/* =========================================================
   Proyecto Raíces — COMPONENTS
   ---------------------------------------------------------
   Piezas reutilizables con responsabilidad acotada, compartidas
   por varias páginas: header/navegación y selector de idioma,
   botones, breadcrumb, cards (destino de Inicio, valor,
   experiencia), filtros, badges y avisos, fallback de imagen,
   lightbox, testimonios, formularios, footer y WhatsApp.
   Consumen tokens de foundation/tokens.css; no conocen páginas
   (salvo las variantes de header de Inicio/Comentarios, que
   dependen de la portada a pantalla completa).
   ========================================================= */

/* ---------- Header / navegación ----------
   color explícito: .navlinks a no tenía color propio y heredaba
   --text-primary (Papel), invisible sobre el fondo Papel del propio
   header. Con header oscuro (Asfalto/Tinta) el link queda legible;
   el panel mobile (fondo verde) restaura Papel más abajo. */
header{position:sticky; top:0; z-index:50; background:rgba(var(--verde-rgb),0.92); backdrop-filter:blur(6px); box-shadow:var(--shadow-header); border-bottom:1px solid transparent; color:var(--color-blanco); transition:background-color .25s ease, box-shadow .25s ease, color .25s ease;}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter); max-width:var(--content-max); margin:0 auto; gap:16px;}
@media (min-width:861px){
  /* Desktop: logo / navegación centrada / CTA como tres bloques reales
     (grid), no sólo el espacio "sobrante" entre logo y CTA — con flex +
     space-between la navegación quedaba corrida hacia la izquierda
     porque el logo y el CTA no pesan lo mismo. Mobile no se toca: sigue
     siendo el mismo flex de siempre (el menú y el toggle no participan
     de este grid). */
  nav{display:grid; grid-template-columns:auto 1fr auto;}
  .navlinks{justify-content:center; gap:30px;}
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand img{height:34px; width:auto;}
.navlinks{display:flex; gap:26px; font-size:var(--text-base); letter-spacing:var(--tracking-ui); align-items:center;}
.navlinks a{color:inherit; text-decoration:none; opacity:0.75; transition:opacity .2s; white-space:nowrap;}
.navlinks a:hover,
.navlinks a.active{opacity:1;}
.navlinks a.active{border-bottom:2px solid var(--color-accent); padding-bottom:2px;}
.nav-cta{flex-shrink:0;}
/* Selector de idioma (ES/EN): en desktop vive en .nav-end, al extremo
   derecho de la barra junto al CTA pero separado por un divisor
   vertical (se siente como configuración global del sitio, no como un
   ítem de navegación). En mobile sigue dentro de .navlinks (menú
   hamburguesa) — misma lógica JS (querySelectorAll(".lang-btn")) para
   ambas instancias, sin rediseño. */
.lang-switch{display:flex; align-items:center; gap:6px; margin-left:4px;}
.lang-btn{background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; opacity:0.65; cursor:pointer; letter-spacing:var(--tracking-ui);}
.lang-btn:hover{opacity:1;}
.lang-btn.is-active{opacity:1; font-weight:700; border-bottom:2px solid var(--color-accent); padding-bottom:2px;}
.lang-sep{opacity:0.4; font-size:var(--text-xs);}
.nav-end{display:flex; align-items:center; gap:16px;}
.lang-switch-desktop{margin-left:0; padding-left:14px; border-left:1px solid rgba(var(--white-rgb),0.3);}
@media (max-width:860px){
  .navlinks .lang-switch{margin-left:0; margin-top:4px;}
  .lang-switch-desktop{display:none;}
}
@media (min-width:861px){
  .lang-switch-mobile{display:none;}
}
@media (min-width:861px) and (max-width:1010px){
  /* Franja angosta justo arriba del breakpoint mobile: navlinks + CTA ya
     ocupan casi todo el ancho ahí, así que el selector se ajusta al
     espacio mínimo (sin perder el divisor) para no generar overflow. */
  .nav-end{gap:0;}
  .lang-switch-desktop{padding-left:0; gap:3px;}
}
/* Navbar + hero/cabecera integradas en una misma composición, en TODAS
   las páginas: el header nace transparente (mismo verde que el lienzo
   de fondo de cada página, ver más abajo) y pasa a sólido recién al
   scrollear (clase .is-solid, ver assets/js/core/site.js) — se ve continuo con la
   cabecera de cada página en vez de una franja separada encima.
   En Inicio/Comentarios (foto de portada a pantalla completa)
   además queda fijo sobre la foto, con sombra de texto para legibilidad
   sobre una imagen variable. En el resto de las páginas sigue "sticky"
   (ocupa su lugar en el flujo): no hay foto que tapar, así que sólo
   cambia color/fondo — nada de overlay ni filtro sobre ninguna imagen. */
header:not(.is-solid){background:transparent; box-shadow:none; backdrop-filter:none;}
body[data-page="inicio"] header,
body[data-page="comentarios"] header{position:fixed; top:0; left:0; width:100%;}
body[data-page="inicio"] header:not(.is-solid) .navlinks a,
body[data-page="comentarios"] header:not(.is-solid) .navlinks a{text-shadow:0 2px 8px rgba(var(--black-rgb),0.55);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--color-blanco); margin:5px 0; transition:transform .2s, opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width: 860px){
  .nav-toggle{display:block;}
  .navlinks{
      position:fixed; inset:64px 0 0 0; height:calc(100vh - 64px);
      background:var(--bg-primary); flex-direction:column; align-items:flex-start;
      padding:28px 32px; gap:22px; font-size:17px;
      transform:translateX(100%); transition:transform .25s ease, visibility .25s; overflow-y:auto;
      visibility:hidden; /* cerrado: fuera de pantalla y fuera del orden de tabulación */
    }
  .navlinks.open{transform:translateX(0); visibility:visible;}
  .nav-cta{padding:9px 16px; font-size:var(--text-sm);}
  .navlinks.open a{color:var(--text-primary);}
}
/* ---------- Botones ---------- */
.btn{display:inline-block; padding:var(--btn-pad-md); border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-blanco); text-decoration:none; font-family:var(--font-heading); font-weight:700; font-size:var(--text-base); letter-spacing:var(--tracking-ui); border:none; cursor:pointer; transition:transform .2s, background .2s;}
.btn:hover{background:var(--color-marron); transform:translateY(-2px);}
.btn-outline{background:transparent; border:2px solid currentColor; color:inherit;}
.btn-outline.on-dark{color:var(--color-blanco);}
.btn-outline.on-dark:hover{background:var(--color-blanco); color:var(--color-verde);}
.btn-outline.on-light{color:var(--color-accent-2); border-color:var(--color-accent); background:rgba(var(--naranja-rgb),0.1);}
.btn-outline.on-light:hover{background:var(--color-accent); color:var(--color-blanco); border-color:var(--color-accent);}
.btn-sm{padding:var(--btn-pad-sm); font-size:var(--text-sm);}
.btn-block{display:block; text-align:center;}
.btn-whatsapp{background:var(--color-whatsapp); font-size:var(--text-md); padding:14px 26px;}
.btn-whatsapp:hover{background:var(--color-whatsapp-hover);}
/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); opacity:0.8; margin-bottom:14px;}
.breadcrumb a{text-decoration:none; opacity:0.85;}
.breadcrumb a:hover{opacity:1; text-decoration:underline;}
/* Navegación contextual "← Volver a…" (PRO-48): discreta y secundaria,
   coexiste con el breadcrumb sin reemplazarlo — el breadcrumb ubica,
   este link es la acción de volver al contexto anterior. */
.volver-link{display:inline-block; font-size:var(--text-sm); color:var(--text-muted); text-decoration:none; margin:-6px 0 14px;}
.volver-link:hover{opacity:1; text-decoration:underline;}
/* ---------- Cards ---------- */
.valor-card{background:var(--bg-primary); border-radius:8px; padding:28px;}
.valor-card .num{font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-accent); letter-spacing:var(--tracking-wide); margin-bottom:10px; display:block;}
.valor-card h3{font-size:var(--text-xl); margin-bottom:8px; transition:color .2s;}
.valor-card p{font-size:var(--text-base); color:var(--text-secondary);}
.dest-card{position:relative; border-radius:8px; overflow:hidden; height:340px; display:flex; align-items:flex-end; text-decoration:none; color:inherit;}
.dest-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.dest-card:hover img{transform:scale(1.06);}
.dest-card .info{position:relative; z-index:2; padding:26px;}
.dest-card .tag{font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-accent-2); margin-bottom:8px; display:block; text-shadow:0 1px 4px rgba(var(--black-rgb),0.55);}
.dest-card h3{font-size:26px; color:var(--color-blanco); text-shadow:0 2px 10px rgba(var(--black-rgb),0.5);}
.dest-card p{font-size:var(--text-base); color:var(--color-arena); margin-top:8px; max-width:320px; text-shadow:0 1px 6px rgba(var(--black-rgb),0.45);}
.dest-card .count{display:inline-block; margin-top:12px; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:700; letter-spacing:var(--tracking-ui); color:var(--color-accent); text-decoration:underline; text-underline-offset:4px; transition:transform .25s ease, color .2s ease;}
.dest-card:hover .count{color:var(--color-accent-2); transform:translateX(4px);}
.dest-card.placeholder{background:linear-gradient(135deg, var(--color-verde-oliva), var(--color-marron)); align-items:center; justify-content:center; text-align:center;}
.dest-card.placeholder .info{padding:28px 40px;}
/* ---------- Filtros (chips + selector de destino) ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.filtros.center{justify-content:center;}
.filtro-btn{font-family:var(--font-body); font-size:var(--text-sm); padding:9px 18px; border-radius:var(--radius-pill); border:1.5px solid rgba(var(--cemento-rgb),0.4); background:var(--color-crema); cursor:pointer; color:var(--color-tinta); transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
.filtro-btn:active{transform:scale(0.96);}
.filtro-btn:hover{border-color:var(--color-accent);}
.filtro-btn.active{background:var(--color-accent-2); border-color:var(--color-accent-2); color:var(--color-tinta);}
.filtro-destino-group{display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:100%;}
.filtro-destino-label{font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-primary);}
.filtro-destino-select{font-family:var(--font-body); font-size:var(--text-sm); padding:9px 34px 9px 18px; border-radius:var(--radius-pill); border:1.5px solid rgba(var(--cemento-rgb),0.4); background:var(--color-crema); color:var(--color-tinta); cursor:pointer; max-width:100%; appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%234a463c' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px;}
.filtro-destino-select:hover{border-color:var(--color-accent);}
/* ---------- Grilla + card de experiencia ---------- */
.exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 28px;}
/* Catálogo — mismo lenguaje ya usado en Tours/Travesías/Paquetes/
   Experiencias: sin caja blanca, foto con esquina orgánica y chip
   discreto en vez de card genérica. Base de .exp-card para cualquier
   página que no tenga su propia composición (hoy, sólo Catálogo). */
.exp-card{min-width:0; background:transparent; border-radius:0; overflow:visible; border:none; display:flex; flex-direction:column; transition:transform .25s ease;}
.exp-card:hover{transform:translateY(-3px);}
/* Proporción única para .img-wrap en todas las páginas que reutilizan
   .exp-card (Catálogo, Experiencias, Destinos, Tours, Travesías,
   Paquetes, carrusel de Inicio) — PRO-91: antes variaba por posición
   en la grilla (:nth-child(3n+1)) y por página (aspect-ratio vs
   height fijo en px), lo que recortaba la misma foto de forma
   distinta según dónde apareciera. */
.exp-card .img-wrap{display:block; position:relative; height:auto; aspect-ratio:1.1; overflow:hidden; border-radius:36px 10px 36px 10px; box-shadow:0 14px 30px rgba(var(--shadow-rgb),.14);}
.exp-card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.exp-card:hover .img-wrap img,
.exp-card:hover .img-wrap .exp-img-fallback{transform:scale(1.055);}
.exp-card:hover .img-wrap .exp-img-fallback::before{width:44px;}
.exp-card:active .img-wrap .exp-img-fallback{transform:scale(0.985);}
.exp-card .cat-badge{position:absolute; top:12px; left:12px; background:rgba(var(--scrim-rgb),0.55); font-family:var(--font-body); font-weight:600; color:var(--color-blanco); font-size:10.5px; text-transform:uppercase; letter-spacing:var(--tracking-wide); padding:6px 12px; border-radius:var(--radius-pill);}
/* Duración · Modalidad como franja sobre el pie de la foto (no en
   .body): mismo componente para Catálogo, Tours, Travesías y
   Paquetes vía el .img-wrap compartido — no hace falta repetir la
   regla por variante. El degradé no arranca en 0% transparente sino
   ya con algo de opacidad, para garantizar contraste real aunque la
   modalidad sea larga y ocupe 2 líneas (no se corta ni se oculta). */
.exp-card .img-meta{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 14px 12px; background:linear-gradient(180deg, rgba(var(--scrim-rgb),0) 0%, rgba(var(--scrim-rgb),0.55) 35%, rgba(var(--scrim-rgb),0.85) 100%); color:var(--color-blanco); font-family:var(--font-body); font-size:12.5px; line-height:1.4; text-shadow:0 1px 4px rgba(var(--black-rgb),0.45);}
.exp-card .body{padding:16px 2px 0; display:flex; flex-direction:column; gap:8px; flex:1;}
.exp-card .dest-tag{font-size:11.5px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--color-accent-2);}
.exp-card h3{font-size:19px; line-height:1.2;}
/* Texto completo, nunca truncado (corrección puntual post-PRO-10:
   line-clamp+overflow:hidden cortaba descripciones reales, ej. "Tour
   Mirabus — Bus Panorámico"). Sin flex:1: el bloque ocupa sólo lo que
   su propio texto necesita — así la metadata queda pegada justo
   después de la descripción en vez de flotar más abajo cuando el
   texto es corto (el empuje hacia abajo ahora lo hace .actions). */
.exp-card .resumen{font-size:13.5px; color:var(--text-secondary);}
/* Separación real entre el contenido y la acción (antes 4px: el CTA
   quedaba pegado al resumen/meta en vez de leerse como un paso propio
   de la jerarquía imagen→chip→título→info→acción, PRO-10). "Consultar"
   (secundaria) se apaga en reposo para no competir en peso con "Ver
   detalles" (primaria) — cambio acotado a los botones dentro de la
   card, no toca .btn-outline.on-light en el resto del sitio. */
/* Centrado como grupo (corrección puntual post-PRO-10): con 1 acción
   (carrusel de Inicio) o 2 (Ver detalles + Consultar), justify-content
   centra el bloque completo, dejando el mismo margen a ambos lados —
   sin depender de cuántos botones haya. */
/* margin-top:auto (en vez de un valor fijo) es lo que ahora empuja el
   CTA al piso de la card: como .resumen ya no tiene flex:1, todo el
   espacio libre restante de la columna se acumula acá, después de la
   metadata, en vez de adentro del bloque de descripción. padding-top
   asegura un mínimo de aire aunque no haya espacio libre que empujar. */
.exp-card .actions{display:flex; justify-content:center; gap:10px; margin-top:auto; padding-top:var(--space-3); flex-wrap:wrap;}
/* CTA como acción sólida integrada en el ancho de la card, no una
   pastilla chica flotando: flex:1 en cada botón reparte el ancho
   disponible en partes iguales (1 botón = ancho completo, 2 = mitad
   cada uno), texto centrado adentro. min-width:0 evita overflow si el
   texto fuera más largo que el espacio disponible. */
.exp-card .actions .btn-sm{flex:1 1 0; min-width:0; text-align:center; padding:14px 20px; font-size:var(--text-base);}
.exp-card .actions .btn-outline{background:transparent;}
/* ---------- Badges, avisos y estados vacíos ---------- */
.placeholder-badge{display:inline-block; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:0.06em; background:var(--color-accent-2); color:var(--color-tinta); padding:3px 9px; border-radius:var(--radius-pill); margin-bottom:6px; font-family:var(--font-body);}
/* Badge "Personalizable" junto al título de la ficha — celeste de la
   paleta con texto oscuro para contraste garantizado (el fondo blanco
   con texto blanco que tenía antes lo dejaba invisible). */
.placeholder-badge.badge-personalizable{background:var(--color-celeste); color:var(--color-tinta); margin-bottom:14px;}
.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted);}
.notice-box{background:var(--color-accent-2); color:var(--color-tinta); border-radius:8px; padding:18px 22px; font-size:var(--text-base); margin-top:16px;}
/* Fallback editorial global para experiencias y destinos sin imagen
   todavía (ver components/experiencias.js,
   pages/propuesta.js, pages/destino.js y pages/destinos.js): una superficie propia con degradé e
   identidad de marca (naranja/amarillo/marrón sobre un verde más claro
   que el verde base de la página, para que se lea como pieza aparte y
   no como un agujero hacia el fondo), con el nombre como protagonista
   tipográfico en vez de un cartel de "sin imagen". Apenas la
   experiencia/destino tenga imagen real, deja de usarse solo. */
.exp-img-fallback{position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(var(--crema-rgb),0.14); transition:transform .5s ease; background:
    radial-gradient(60% 50% at 12% 10%, rgba(var(--naranja-rgb),0.22) 0%, transparent 100%),
    radial-gradient(55% 45% at 90% 14%, rgba(var(--amarillo-rgb),0.2) 0%, transparent 100%),
    radial-gradient(75% 65% at 50% 105%, rgba(var(--marron-rgb),0.4) 0%, transparent 100%),
    linear-gradient(155deg, var(--color-verde-claro) 0%, var(--color-verde-profundo) 100%);}
.exp-img-fallback::before{content:""; width:30px; height:2px; background:var(--color-accent); margin-bottom:16px; transition:width .35s ease;}
.exp-img-fallback span{font-family:var(--font-heading); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:0.01em; color:var(--color-crema); max-width:88%;}
/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(var(--scrim-rgb),0.92); display:none; align-items:center; justify-content:center; z-index:200; padding:32px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:var(--radius-sm);}
.lightbox-close{position:absolute; top:24px; right:32px; color:var(--color-blanco); font-size:32px; background:none; border:none; cursor:pointer; line-height:1;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:var(--radius-round); border:none; background:rgba(var(--white-rgb),0.12); color:var(--color-blanco); font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.lightbox-nav:hover{background:rgba(var(--white-rgb),0.24);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
@media (max-width:640px){
  .lightbox-nav{width:40px; height:40px; font-size:var(--text-3xl);}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}
/* ---------- Testimonios ---------- */
.testi{background:var(--color-accent-2); color:var(--color-tinta);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{background:var(--color-blanco); border-radius:8px; padding:32px;}
.testi-card p{font-size:var(--text-md); color:var(--color-tinta-suave); margin-bottom:20px;}
.testi-name{font-family:var(--font-heading); font-weight:700; font-size:var(--text-base); color:var(--color-tinta);}
.testi-role{font-size:var(--text-xs); color:var(--color-tierra);}
.stars{color:var(--color-accent); margin-bottom:14px; font-size:var(--text-base); letter-spacing:2px;}
/* ---------- Carrusel de testimonios (Inicio) ---------- */
.testi-carousel{display:flex; align-items:center; gap:20px; max-width:720px; margin:0 auto;}
.testi-viewport{flex:1; overflow:hidden;}
.testi-track{list-style:none; display:grid;}
.testi-slide{grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;}
.testi-slide.is-active{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .5s ease, transform .5s ease;}
.testi-track .testi-card{height:100%;}
.testi-arrow{width:44px; height:44px; border-radius:var(--radius-round); border:none; background:var(--color-blanco); color:var(--color-tinta); font-size:var(--text-3xl); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 16px rgba(var(--shadow-rgb),0.14); transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);}
.testi-arrow:hover{background:var(--color-verde); color:var(--color-blanco); transform:scale(1.06);}
.testi-arrow:disabled{opacity:0.35; cursor:default; pointer-events:none; box-shadow:none;}
.testi-dots{display:flex; justify-content:center; gap:10px; margin-top:28px;}
.testi-dot{width:9px; height:9px; border-radius:var(--radius-round); border:none; padding:0; background:rgba(var(--shadow-rgb),0.25); cursor:pointer; transition:background .2s ease, transform .2s ease;}
.testi-dot:hover{background:rgba(var(--shadow-rgb),0.45);}
.testi-dot.is-active{background:var(--color-marron); transform:scale(1.25);}
@media (prefers-reduced-motion: reduce){
  .testi-slide{transition:opacity .01s linear; transform:none;}
  .testi-slide.is-active{transition:opacity .01s linear;}
}
/* ---------- Formularios ---------- */
form{display:grid; gap:var(--space-5);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);}
label{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-muted); margin-bottom:var(--space-2); display:block;}
input,
select,
textarea{width:100%; padding:14px 16px; border:1.5px solid var(--border-color-strong); border-radius:var(--radius-md); font-family:var(--font-body); font-size:var(--text-base); background:var(--color-crema); color:var(--color-tinta); transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);}
input:focus,
select:focus,
textarea:focus{outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(var(--naranja-rgb),0.14);}
textarea{resize:vertical; min-height:130px;}
form .btn{justify-self:start; margin-top:var(--space-2); padding:14px 34px;}
.form-note{font-size:var(--text-xs); color:var(--text-muted); margin-top:-8px; line-height:1.5;}
.form-status{font-size:var(--text-base); padding:12px 14px; border-radius:var(--radius-sm); display:none;}
.form-status.show{display:block;}
.form-status.ok{background:var(--state-ok-bg); color:var(--state-ok-text);}
.form-status.err{background:var(--state-err-bg); color:var(--state-err-text);}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
.btn:disabled:hover{background:var(--color-accent); transform:none;}
@media (max-width:640px){
  form .btn{justify-self:stretch; text-align:center;}
}
/* ---------- Footer ---------- */
footer{background:var(--bg-dark); color:var(--color-piedra); padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px;}
footer .brand img{height:32px;}
footer p{font-size:var(--text-base); margin-top:14px; color:var(--color-piedra-oscura); max-width:280px;}
footer h4{font-family:var(--font-heading); font-size:var(--text-base); color:var(--color-blanco); margin-bottom:16px; letter-spacing:var(--tracking-ui);}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:var(--text-base);}
footer li a{text-decoration:none; color:var(--color-piedra); opacity:0.85;}
footer li a:hover{opacity:1; color:var(--color-accent-2);}
.footer-bottom{border-top:1px solid rgba(var(--white-rgb),0.1); padding-top:24px; display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--color-tierra); flex-wrap:wrap; gap:10px;}
/* ---------- Botón flotante de WhatsApp (se activa solo si hay número cargado) ---------- */
.whatsapp-float{position:fixed; bottom:22px; right:22px; z-index:40; background:var(--color-whatsapp); color:var(--color-blanco); width:56px; height:56px; border-radius:var(--radius-round); display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 20px rgba(var(--black-rgb),0.25); font-size:26px;}
/* ---------- Responsive de componentes ---------- */
@media (max-width: 960px){
  .exp-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 860px){
  .testi-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .exp-grid{grid-template-columns:1fr;}
  nav{padding:14px var(--gutter-mobile);}
  .testi-carousel{gap:10px;}
  .testi-arrow{width:34px; height:34px; font-size:var(--text-xl);}
  .testi-carousel .testi-card{padding:24px 20px;}
}