/*
Theme Name: Pure Home Fix
Theme URI: https://purehomefix.com
Author: Pure Home Fix
Description: Tema a medida para purehomefix.com. Reconstrucción limpia (sin Elementor) a partir del diseño original; conserva el CSS de Elementor del mirror como assets estáticos para mantener fidelidad visual sin depender del plugin.
Version: 1.0.8
License: Proprietary
Text Domain: purehomefix
*/

/* ==========================================================================
   Colores de marca (extraídos del CSS a medida y del kit global de Elementor
   del sitio original — post-10.css, selector .elementor-kit-10)
   ========================================================================== */
:root {
	--phf-navy: #071842;        /* --e-global-color-primary: fondo del footer */
	--phf-navy-dark: #0d2a6e;
	--phf-navy-secondary: #162C70; /* --e-global-color-secondary: fondo de stats y Why Choose Us */
	--phf-accent: #FFD803;      /* --e-global-color-accent: iconos de Why Choose Us */
	--phf-gold: #CFBB2E;        /* color propio del formulario (wp-custom-css del sitio original) */
	--phf-gold-light: #d4c34a;
	--phf-font: "Radio Canada Big", sans-serif; /* unica fuente realmente usada en el sitio original */
}

body,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
button, input, select, textarea {
	font-family: var(--phf-font);
}

/* ==========================================================================
   Header / nav propio (reemplaza el widget ekit-nav-menu de ElementsKit)
   ========================================================================== */

/* header-footer.css (hello-elementor) pone ".site-header{display:flex;
   justify-content:space-between}" pensado para un solo hijo ".header-inner".
   Como nuestro header.php mete ".phf-topbar" y ".phf-main-nav" como hijos
   directos, heredaban ese flex-row: se encogian a su contenido y quedaban
   uno junto al otro (con el hueco del space-between) en vez de apilados a
   ancho completo — por eso el fondo azul de la topbar no llegaba al borde.
   Se anula el flex para que ambos vuelvan a ser bloques a 100% de ancho. */
.site-header.dynamic-header {
	display: block;
}

.phf-topbar {
	background: var(--phf-navy);
	color: #fff;
}

/* Contenedor interno: fondo azul a todo el ancho (lo da .phf-topbar), pero el
   contenido queda centrado a max-width:1300px (--content-width del kit
   original, post-134.css elementor-element-5ed0c8af). */
.phf-topbar__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 0;
	padding: 15px 20px;
}

.phf-topbar__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phf-topbar__phone-link {
	color: inherit;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Iconos de la topbar (pin de direccion, telefono): tamaño fijo pequeño,
   sin depender de var(--e-icon-list-icon-size) por si esa cascada falla —
   así el pin no puede renderizar "gigante" bajo ninguna circunstancia. */
.phf-topbar .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.phf-topbar .elementor-icon-list-icon {
	display: inline-flex !important;
	flex-shrink: 0;
}

.phf-topbar .elementor-icon-list-icon svg {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	fill: #fff;
}

.phf-topbar .elementor-icon-list-text {
	color: #fff;
	white-space: nowrap;
}

.phf-topbar__social {
	margin-left: auto;
}

/* Desktop >=1025px: original (post-134.css) agrupa direccion+telefono al 50%
   izquierda y los iconos sociales al 50% derecha, una sola linea. */
@media (min-width: 1025px) {
	.phf-topbar__info {
		width: 50%;
		justify-content: flex-start;
	}

	.phf-topbar__social {
		width: 50%;
		justify-content: center;
	}
}

/* <1025px: el widget de iconos sociales de la topbar original lleva las
   clases "elementor-hidden-tablet" (768-1024px) + "elementor-hidden-mobile"
   (<=767px) — es decir, el original los OCULTA por completo por debajo de
   1025px. Replicamos ese comportamiento exacto en vez de apilarlos. */
@media (max-width: 1024px) {
	.phf-topbar .phf-topbar__social {
		display: none;
	}

	.phf-topbar__inner {
		justify-content: center;
	}

	.phf-topbar__info {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.phf-topbar__inner {
		padding: 10px 16px 6px;
		gap: 6px 0;
	}

	.phf-topbar__info {
		gap: 4px 16px;
	}

	.phf-topbar .elementor-icon-list-text {
		font-size: 13px;
		white-space: normal;
	}
}

@media (max-width: 480px) {
	.phf-topbar__inner {
		padding: 8px 12px 6px;
	}

	.phf-topbar__info {
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.phf-topbar .elementor-icon-list-item {
		justify-content: center;
	}

	.phf-topbar .elementor-icon-list-text {
		font-size: 12px;
	}
}

.phf-main-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 0;
}

/* Tamaño real del logo en la topbar (post-134.css, elementor-element-4b562e8c,
   los 3 breakpoints del sitio original). !important porque theme.css (heredado
   de hello-elementor) trae una regla "img{width:100vw}" muy agresiva. */
.phf-main-nav__logo img {
	display: block;
	width: 238px !important;
	height: 101px !important;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.phf-main-nav__logo img {
		width: 352px !important;
		height: 70px !important;
	}
}

@media (max-width: 767px) {
	.phf-main-nav__logo img {
		width: 95px !important;
		height: 50px !important;
	}
}

.phf-main-nav__menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phf-main-nav__menu a {
	color: var(--phf-navy);
	text-decoration: none;
	font-weight: 600;
}

.phf-main-nav__menu a:hover,
.phf-main-nav__menu a.is-current {
	color: var(--phf-gold);
}

.phf-main-nav__cta {
	background: linear-gradient(135deg, var(--phf-navy) 0%, var(--phf-navy-dark) 100%);
	color: #fff !important;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.phf-main-nav__cta:hover {
	background: linear-gradient(135deg, var(--phf-gold) 0%, var(--phf-gold-light) 100%);
	color: var(--phf-navy) !important;
}

.phf-nav-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--phf-navy);
}

@media (max-width: 1024px) {
	.phf-nav-toggle {
		display: block;
	}

	.phf-main-nav__menu,
	.phf-main-nav__cta {
		display: none;
		width: 100%;
	}

	.phf-main-nav.is-open .phf-main-nav__menu,
	.phf-main-nav.is-open .phf-main-nav__cta {
		display: flex;
	}

	.phf-main-nav__menu {
		flex-direction: column;
		gap: 12px;
	}
}

/* ==========================================================================
   Scroll-reveal propio (reemplaza el fadeInUp/fadeIn de Elementor, que salta
   sin transition real y desplaza el 100% del alto del elemento). Aquí es
   solo opacidad + un translateY sutil con una transition CSS normal —
   .elementor-invisible[data-animate] pisa el "visibility:hidden" genérico
   de frontend.min.css con la misma especificidad (clase + atributo).
   ========================================================================== */
.elementor-invisible[data-animate] {
	visibility: visible;
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.elementor-invisible[data-animate].phf-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-invisible[data-animate] {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* Iconos sociales sin destino real: se muestran como decorativos, no como enlaces rotos */
.phf-social-icons {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* El icono de WhatsApp usa la fuente de iconos "elementskit" (ekiticons.css).
   Esa hoja solo activa font-family:elementskit dentro de .ekit-wid-con /
   .elementor-widget — clases que nuestro markup simplificado de iconos
   sociales no tiene, así que el glifo (content:"\eb46") se generaba con la
   fuente equivocada y se veía como un cuadro vacío. Se fuerza aquí. */
.phf-social-icons .icon::before,
.phf-social-icons .icon {
	font-family: elementskit !important;
}

.phf-social-icons .icon {
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   Footer (markup propio, no reutiliza las clases elementor-element-* del
   mirror, así que necesita su propio color de fondo: --e-global-color-primary
   del kit original, #071842).
   ========================================================================== */
.site-footer {
	background-color: var(--phf-navy);
	color: #d8dde8;
}

.site-footer h4 {
	color: #fff;
}

.site-footer a {
	color: #d8dde8;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--phf-accent);
}

.site-footer .elementor-icon-list-item a {
	color: #d8dde8;
}

.site-footer .phf-social-icons svg,
.site-footer .phf-social-icons i {
	fill: #d8dde8;
	color: #d8dde8;
}

.phf-social-icons .elementor-icon {
	cursor: default;
}

/* Grid de 4 columnas del footer: estaba fijo inline (grid-template-columns:
   2fr 1fr 1fr 1fr) sin breakpoints. Un grid con columnas "fr" no encoge por
   debajo del min-content de su contenido (el párrafo de la primera columna,
   sobre todo), así que a partir de cierto ancho el grid entero se salía del
   viewport y causaba scroll horizontal en TODO el sitio, no solo en el
   footer. Se mueve a clases (antes estaba en atributos style inline, que no
   se pueden pisar con @media sin !important) y se apila en mobile. */
.phf-footer__grid {
	max-width: 1300px;
	margin: 0 auto;
	padding: 60px 20px 20px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
}

.phf-footer__logo {
	max-width: 220px;
	height: auto;
}

.phf-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.phf-footer__bottom {
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.phf-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

@media (max-width: 1024px) {
	.phf-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}
}

@media (max-width: 767px) {
	.phf-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 20px 20px;
		text-align: center;
	}

	.phf-footer__logo {
		margin: 0 auto;
	}

	.phf-social-icons {
		justify-content: center;
	}

	.phf-footer__list .elementor-icon-list-item {
		justify-content: center;
	}

	.phf-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 16px 20px;
	}

	.phf-footer__legal-links {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.phf-footer__grid {
		padding: 32px 16px 16px;
	}

	.phf-footer__bottom {
		padding: 14px 16px;
		font-size: 13px;
	}

	.phf-footer__legal-links {
		gap: 2px 6px;
	}
}

/* ==========================================================================
   Formulario CF7 (estilos originales del sitio, recuperados de su CSS a medida)
   ========================================================================== */
.phf-form-heading {
	text-align: center;
	margin-bottom: 5px;
	color: var(--phf-navy);
	font-size: 28px;
	font-weight: 700;
}

.phf-contact-form-wrapper {
	max-width: 950px;
	margin: 0 auto;
	padding: 30px;
	font-family: 'Segoe UI', Arial, sans-serif;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	box-shadow: 0 8px 50px rgba(7, 24, 66, 0.15);
	border: 1px solid rgba(207, 187, 46, 0.2);
	position: relative;
	z-index: 1;
}

.phf-contact-form {
	position: relative;
}

.phf-two-col,
.phf-row {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

.phf-two-col .phf-form-row,
.phf-row > label {
	flex: 1;
}

.phf-form-row {
	margin-bottom: 5px;
}

.phf-form-row label,
.phf-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: var(--phf-navy);
	font-size: 15px;
}

.phf-form input[type="text"],
.phf-form input[type="email"],
.phf-form input[type="tel"],
.phf-form select,
.phf-form textarea {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #e1e5eb;
	border-radius: 6px;
	font-size: 15px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--phf-navy);
	transition: all 0.3s ease;
}

.phf-form input:focus,
.phf-form select:focus,
.phf-form textarea:focus {
	outline: none;
	border-color: var(--phf-gold);
	box-shadow: 0 0 0 3px rgba(207, 187, 46, 0.2);
	background-color: #fff;
}

.phf-form .column.one,
.phf-form .phf-consent {
	background-color: rgba(255, 255, 255, 0.95);
	padding: 15px;
	border-radius: 6px;
	border-left: 4px solid var(--phf-gold);
	margin: 25px 0;
	border: 1px solid rgba(7, 24, 66, 0.1);
	font-size: 13px;
	color: #555;
	line-height: 1.5;
}

.phf-submit input[type="submit"],
.phf-form input[type="submit"] {
	background: linear-gradient(135deg, var(--phf-navy) 0%, var(--phf-navy-dark) 100%);
	color: #fff;
	border: none;
	padding: 15px 40px;
	font-size: 17px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.phf-submit input[type="submit"]:hover,
.phf-form input[type="submit"]:hover {
	background: linear-gradient(135deg, var(--phf-gold) 0%, var(--phf-gold-light) 100%);
	color: var(--phf-navy);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(207, 187, 46, 0.3);
}

@media (max-width: 768px) {

	.phf-two-col,
	.phf-row {
		flex-direction: column;
		gap: 10px;
	}
}