/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES — piezas reutilizables del lenguaje visual de la landing

   Solo se aplican a elementos que tengan la clase. Los nombres son los mismos
   de la landing (referencia/index.html) para que sea fácil compararlos.
   Lo que es exclusivo de Hogar (hero con agua, calculadora, comparativa,
   protocolo, FAQ, videos) NO va acá: va en el CSS de esa página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tipografía de sección ─────────────────────────────────────────────── */
.display {                                   /* titular gigante (hero) */
	font-size: clamp(2.6rem, 7.2vw, 6rem);
	font-weight: 800; line-height: .98; letter-spacing: -.045em;
}
.h-xl { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.05; }
.h-lg { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: -.03em; }

.serif   { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }

/* Palabra resaltada en serif dentro de un título: <h2>Texto <em>resaltado</em></h2> */
:is(.display, .h-xl, .h-lg) em {
	font-family: var(--font-serif); font-style: italic; font-weight: 400;
	color: var(--em); letter-spacing: -.02em;
}
.on-dark :is(.display, .h-xl, .h-lg) em { color: var(--em-dark); }

.eyebrow {                                   /* etiqueta chica sobre cada título */
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--brand); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: currentColor; opacity: .55; }

.lead  { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-2); font-weight: 400; line-height: 1.6; }
.muted { color: var(--ink-3); }

/* Texto sobre fondo oscuro */
.on-dark { color: rgba(255,255,255,.74); }
.on-dark :is(h1, h2, h3, h4, h5, h6, strong, b) { color: #fff; }
.on-dark .eyebrow { color: var(--aqua); }
.on-dark .lead  { color: rgba(255,255,255,.68); }
.on-dark .muted { color: rgba(255,255,255,.5); }
.on-dark a:where(:not([class])) { color: var(--aqua-soft); }

/* ── 2. Botones — altura mínima 52px (cómodo para el dedo) ────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 52px; padding: 0 1.9rem; border-radius: var(--r-full);
	border: 1.5px solid transparent;
	font-family: inherit; font-size: .98rem; font-weight: 600; letter-spacing: -.01em;
	line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background .22s var(--e-soft), color .22s var(--e-soft),
	            border-color .22s var(--e-soft), transform .18s var(--e-out),
	            box-shadow .22s var(--e-soft);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.975); }

.btn-solid { background: var(--brand-600); color: #fff; box-shadow: 0 4px 14px rgba(var(--brand-600-rgb),.28); }
.btn-solid:hover { background: var(--brand-700); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--brand-600-rgb),.34); }

.btn-line { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--brand); color: var(--brand-700); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--abyss); }
.btn-white:hover { color: var(--abyss); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }

.btn-ghost-white { border-color: rgba(255,255,255,.32); color: #fff; background: transparent; }
.btn-ghost-white:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 1.3rem; font-size: .88rem; }

/* Link con flecha */
.link-arrow {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .9rem; font-weight: 600; color: var(--brand-700);
	transition: gap .2s var(--e-out), color .2s;
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { gap: .7rem; color: var(--brand); }

/* Botón redondo con ícono (carrito, cuenta, menú) */
.icon-btn {
	position: relative; width: 44px; height: 44px; border-radius: var(--r-full);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); background: none; border: 0; cursor: pointer;
	transition: background .2s;
}
.icon-btn:hover { background: var(--mist-2); color: var(--ink); }
.icon-btn svg { width: 21px; height: 21px; }

/* Contador sobre un icon-btn (cantidad del carrito) */
.badge {
	position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px;
	background: var(--brand-600); color: #fff; border-radius: var(--r-full);
	font-size: .66rem; font-weight: 700; line-height: 14px; text-align: center;
	border: 2px solid var(--paper);
	transform: scale(0); transition: transform .3s var(--e-out);
}
.badge.on  { transform: scale(1); }
.badge.pop { animation: ts-badge-pop .4s var(--e-out); }
@keyframes ts-badge-pop { 0% { transform: scale(1) } 45% { transform: scale(1.35) } 100% { transform: scale(1) } }

/* ── 3. Secciones y contenedores ──────────────────────────────────────────── */
.section { padding: var(--pad-section) var(--gutter); position: relative; }
.wrap        { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.wrap-narrow { max-width: var(--maxw-narrow); margin-inline: auto; width: 100%; }

.sec-head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head .lead { margin-top: 1.1rem; }

.bg-mist { background: var(--mist); }
.bg-dark { background: var(--abyss); }
.bg-dark::before {                           /* halo sutil del color de la paleta, no plano */
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(70% 90% at 15% 0%,   var(--halo-1), transparent 62%),
		radial-gradient(60% 80% at 88% 100%, var(--halo-2), transparent 60%);
}
.bg-dark > * { position: relative; z-index: 1; }

/* Dos columnas: texto + imagen */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }

/* ── 4. Chips y pastillas ─────────────────────────────────────────────────── */
.chip {                                      /* sobre fondo oscuro */
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .42rem 1rem .42rem .7rem; border-radius: var(--r-full);
	background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #fff;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(var(--aqua-rgb),.22); }

.pill {                                      /* sobre fondo claro */
	display: inline-block;
	font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	background: var(--mist-2); color: var(--brand-700);
	padding: .3rem .75rem; border-radius: var(--r-full);
}

/* ── 5. Tarjetas ──────────────────────────────────────────────────────────── */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 2.1rem 1.75rem;
	transition: transform .3s var(--e-out), box-shadow .3s var(--e-soft), border-color .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.card-ico {
	width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1.2rem;
	display: flex; align-items: center; justify-content: center;
	background: var(--abyss); color: var(--aqua);
}
.card-ico svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.card p { font-size: .93rem; color: var(--ink-3); line-height: 1.6; margin: 0; }

/* Íconos chicos con título y texto */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.feature-ico {
	width: 42px; height: 42px; border-radius: 12px; margin-bottom: .85rem;
	display: flex; align-items: center; justify-content: center;
	background: var(--mist-2); color: var(--brand-700);
}
.feature-ico svg { width: 20px; height: 20px; }
.feature h4 { font-size: 1rem; margin-bottom: .3rem; }
.feature p { font-size: .92rem; color: var(--ink-3); line-height: 1.55; margin: 0; }

/* ── 6. Imágenes con marco ────────────────────────────────────────────────── */
.media {
	position: relative; border-radius: var(--r-lg); overflow: hidden;
	background: linear-gradient(150deg, var(--deep-2), var(--brand) 55%, var(--aqua));
	box-shadow: var(--sh-lg);
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media.ratio-4-5 { aspect-ratio: 4/5; }
.media.ratio-3-2 { aspect-ratio: 3/2; }
.media.ratio-1-1 { aspect-ratio: 1/1; }

/* ── 7. Aparición al hacer scroll ─────────────────────────────────────────────
   El contenido es visible por defecto. Solo se oculta para animarlo cuando el
   JS confirmó que puede hacerlo (clase .reveal-on en <html>). Si el JS falla,
   la página se ve igual: nunca queda en blanco. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--e-soft), transform .7s var(--e-out); }
.reveal-on [data-reveal].in { opacity: 1; transform: none; }
.reveal-on [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--e-soft), transform .6s var(--e-out); }
.reveal-on [data-stagger].in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* Titular que entra palabra por palabra (assets/js/animaciones.js).
   Las palabras solo se esconden si el JS confirmó que va a animarlas
   (clase .anime-on en <html>); si no, el titular se ve normal. */
[data-titular-animado] .w { display: inline-block; will-change: transform, opacity; }
.anime-on [data-titular-animado] .w { opacity: 0; }

/* Números que cuentan: ancho fijo por dígito, así el texto no "salta" mientras cambia. */
[data-contar] { font-variant-numeric: tabular-nums; }

/* ── 8. Migas (Inicio › Ambiental › Luces) — páginas de línea y fichas ─────── */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.migas a { color: var(--ink-3); text-decoration: none; transition: color .2s; }
.migas a:hover { color: var(--brand); }
.migas-sep { width: 12px; height: 12px; opacity: .6; transform: rotate(-90deg); }
.migas [aria-current] { color: var(--ink); }
.on-dark .migas, .on-dark .migas a { color: rgba(255,255,255,.6); }
.on-dark .migas a:hover { color: #fff; }
.on-dark .migas [aria-current] { color: #fff; }

/* Bloque de contacto (template-parts/home/contacto.php, al final de la portada y de
   Nosotros) y tarjetas de datos (template-parts/contacto-datos.php). Antes estaba en home.css. */
.contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.contacto-bajada { margin-top: 1rem; }
.home-contacto .portada-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.contacto-datos {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--r-lg); overflow: hidden;
}
.dato { background: var(--abyss); padding: 1.4rem 1.3rem; display: flex; gap: .9rem; align-items: flex-start; color: inherit; text-decoration: none; transition: background .2s; }
a.dato:hover { background: var(--abyss-2); color: inherit; }
.dato-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(var(--aqua-rgb), .14); color: var(--aqua); display: flex; align-items: center; justify-content: center; }
.dato-ico svg { width: 19px; height: 19px; }
.dato-txt small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .2rem; }
.dato-txt b { color: #fff; font-size: 1rem; font-weight: 700; word-break: break-word; }
@media (max-width: 980px) { .contacto { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .contacto-datos { grid-template-columns: 1fr; } }

/* Formularios de Contact Form 7 (ej: Contacto).
   Antes tomaban el diseño del tema Hello y del "CSS adicional" de la agencia, que no
   pasan al tema nuevo. Campos y botón como los de Pagar. */
.wpcf7-form { display: grid; gap: .9rem; max-width: 640px; }
.wpcf7-form p { margin: 0; }
.wpcf7-form label > br { display: none; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form :is(input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select) {
	width: 100%; min-height: 50px; padding: .8rem .95rem;
	font: inherit; font-size: .95rem; color: var(--ink);
	background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
	transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form textarea { min-height: 110px; resize: vertical; }
.wpcf7-form :is(input, textarea, select):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(39,117,141,.12); }
.wpcf7-form .wpcf7-not-valid { border-color: var(--danger); }
.wpcf7-not-valid-tip { margin-top: .35rem; font-size: .8rem; font-weight: 500; color: var(--danger); }
.wpcf7-form .wpcf7-submit {
	display: inline-flex; align-items: center; min-height: 50px; padding: 0 1.8rem;
	border: 0; border-radius: var(--r-full); background: var(--brand-600); color: #fff;
	font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .2s;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--brand-700); }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-sm); font-size: .92rem; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--line); border-left-color: var(--ok); }
.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--line); border-left-color: var(--danger); }

/* ── 9. Adaptación a pantallas chicas ─────────────────────────────────────── */
@media (max-width: 1024px) {
	.split { grid-template-columns: 1fr; gap: 2.75rem; }
}
@media (max-width: 820px) {
	.cards-3 { grid-template-columns: 1fr; }
	.feature-grid { grid-template-columns: 1fr; }
	.link-arrow { min-height: 44px; }
}
@media (max-width: 560px) {
	.btn:not(.btn-sm) { width: 100%; }
}