/* ======================================================================
   LOS GERANIOS · Residencia para Adultos Mayores — Chihuahua
   SISTEMA DE DISEÑO COMPARTIDO  ·  css/styles.css
   ----------------------------------------------------------------------
   Dirección aprobada por el cliente: base "Luz de Hogar" (marfil luminoso,
   editorial, Cormorant Garamond + DM Sans) + el VERDE de marca como color
   PROTAGONISTA (tomado de "Jardín Sereno"). Fondo "hogar con jardín":
   geranios (flores) + hojas verdes meciéndose. Es "un hogar con jardín,
   lleno de luz".

   Este archivo es la BASE de TODO el sitio. Todas las páginas internas
   reutilizan estos tokens y componentes. Organizado por secciones:

     00  Tokens (:root)
     01  Reset y base
     02  Accesibilidad (foco, skip-link, reduced-motion, sr-only)
     03  Layout (container, secciones, section-head, eyebrow, divisores)
     04  RAPTOR LIB 01 — reveal on scroll
     05  Marca (logo geranio)
     06  Botones
     07  Header + navegación + hamburguesa + menú móvil
     08  Fondo "hogar con jardín" (geranios + hojas + motas + amanecer)
     09  Hero
     10  Promesa
     11  Cuidados (tarjetas + iconos animados)
     12  Por qué nos eligen (evidencia + stats animadas)
     13  Nuestra casa (galería + features)
     14  Opiniones (banner Google)
     15  CTA visita (banda verde)
     16  Ubicación / contacto (mapa + NAP)
     17  Footer
     18  Botones flotantes de conversión (WhatsApp + llamada)
     19  Responsive
   ====================================================================== */


/* ============================================================ 00 · TOKENS */
:root{
  /* ---- Paleta de marca (definida por el cliente) ---- */
  --marfil:        #FBF8F2;   /* fondo base luminoso */
  --marfil-hondo:  #F4EEE2;   /* aire cálido, matices */
  --blanco:        #FFFFFF;

  /* PALETA OFICIAL DEL MANUAL DE MARCA (pág. 23 — 3 colores corporativos) */
  --verde-geranio: #A3D55D;   /* ★ PANTONE 367 C — verde lima oficial */
  --oro-amanecer:  #BD955A;   /* ★ PANTONE 465 C — dorado oficial */
  --rosa-suave:    #F5BE99;   /* ★ PANTONE 473 C — durazno oficial */

  /* Derivados accesibles (el lima oficial no alcanza AA como texto: ~1.9:1) */
  --verde-hoja:    #3F6E1F;   /* derivado oscuro de P367 — títulos-acento, CTAs, links (AA) */
  --verde-salvia:  #EDF3E2;   /* tinte claro de P367 — fondos de secciones alternas */
  --verde-bosque:  #2C4A16;   /* verde hondo para bandas/pies con texto blanco (AA) */
  --oro-hondo:     #8F6B2A;   /* derivado oscuro de P465 — texto de acento sobre claro (AA) */
  --azul-sereno:   #A3D55D;   /* REASIGNADO a P367: el azul NO pertenece a la marca oficial */

  --pizarra:       #33454C;   /* texto principal (NO negro) */
  --gris:          #5C666C;   /* texto secundario (AA sobre marfil) */
  --linea:         #E7E3D8;   /* bordes */
  --linea-verde:   #DCE6CB;   /* bordes en secciones salvia */

  /* ---- Tipografías ---- */
  /* Manual de marca (pág. 27): la familia oficial es FUTURA. Jost es su
     equivalente libre en Google Fonts — se usa en cuerpo, menú y botones.
     Cormorant Garamond se conserva en títulos grandes (dirección aprobada). */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Futura', 'Century Gothic', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Curvas de animación ---- */
  --ease-out-expo:  cubic-bezier(.22,1,.36,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);

  /* ---- Sombras (tinte verde-pizarra) ---- */
  --shadow-soft: 0 14px 34px rgba(44,64,40,0.09);
  --shadow-lift: 0 28px 66px rgba(44,64,40,0.16);
  --shadow-cta:  0 16px 34px rgba(63,110,31,0.30);

  /* ---- Ritmo vertical de secciones ---- */
  --sec-pad: 6rem;
}


/* ======================================================== 01 · RESET Y BASE */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }

body{
  font-family: var(--font-body);
  background: var(--marfil);
  color: var(--pizarra);
  line-height: 1.7;
  font-size: 1.06rem;                 /* legibilidad generosa para lectores mayores */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

::selection{ background: var(--verde-geranio); color:#1f2f10; }

/* Tipografía de titulares — verde de marca protagonista, oro como "luz" */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.1; letter-spacing:0; }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:500; }


/* ==================================================== 02 · ACCESIBILIDAD */
/* Skip-link */
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:200;
  background: var(--verde-hoja); color:#fff;
  padding:.7rem 1.2rem; border-radius:0 0 10px 10px; font-weight:700;
  transition: top .25s var(--ease-out-expo);
}
.skip-link:focus{ top:0; }

/* Foco visible accesible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, iframe:focus-visible{
  outline: 3px solid var(--oro-hondo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Solo lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======= RAPTOR LIB 00 — REDUCED MOTION BASE ======= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ========================================================== 03 · LAYOUT */
.container{ max-width:1200px; margin:0 auto; padding:0 2rem; }

/* Secciones y su ritmo. scroll-margin evita que el header sticky tape el título */
section{ scroll-margin-top: 84px; }
.section-pad{ padding: var(--sec-pad) 0; }
.bg-marfil{ background: var(--marfil); }
.bg-salvia{ background: var(--verde-salvia); }
.bg-blanco{ background: var(--blanco); }

/* Encabezado de sección centrado */
.section-head{ text-align:center; max-width:47rem; margin:0 auto 3.4rem; }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head h2{
  font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height:1.1;
  color: var(--verde-hoja);
}
.section-head h2 em{ color: var(--oro-hondo); }
.section-head p{ margin-top:1rem; font-size:1.14rem; color: var(--gris); }

/* Eyebrow (kicker) */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1.05rem;
  background: rgba(63,110,31,0.10);
  color: var(--verde-hoja);
  font-family: var(--font-body);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius:100px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--oro-amanecer); flex:0 0 auto; }
.eyebrow--oro{ background: rgba(210,162,76,0.16); color: var(--oro-hondo); }

/* Divisor botánico (sol + hoja de línea) */
.divider{ display:flex; align-items:center; justify-content:center; gap:1.1rem; padding:3.5rem 0; color: var(--verde-geranio); }
.divider .line{ height:1px; width:min(140px,22vw); background: linear-gradient(90deg, transparent, var(--verde-geranio)); }
.divider .line.r{ background: linear-gradient(90deg, var(--verde-geranio), transparent); }
.divider svg{ width:30px; height:30px; color: var(--oro-hondo); flex:0 0 auto; }


/* ============================================ 04 · RAPTOR LIB 01 — REVEAL */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }


/* ============================================================ 05 · MARCA */
.mark{ color: var(--verde-hoja); display:inline-flex; }
.mark svg{ display:block; overflow:visible; }
.mark .bloom{ transform-origin:24px 15px; animation: bloomBreathe 6s ease-in-out infinite; }
@keyframes bloomBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce){ .mark .bloom{ animation:none; } }

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand .mark svg{ width:46px; height:46px; }

/* Logo OFICIAL (isotipo flor + mandala del manual de marca, vectorial) */
.mark img{ display:block; width:46px; height:auto; transform-origin:center; animation: bloomBreathe 6s ease-in-out infinite; }
.footer-brand .mark img{ width:44px; }
@media (prefers-reduced-motion: reduce){ .mark img{ animation:none; } }
.brand-text{ line-height:1; }
.brand-name{
  font-family: var(--font-display); font-weight:600; font-size:1.72rem;
  color: var(--verde-hoja); letter-spacing:.005em;
}
.brand-name sup{ font-size:.56rem; top:-.95em; color: var(--oro-hondo); }
.brand-tag{
  display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gris); font-weight:700; margin-top:.34rem;
}


/* ========================================================== 06 · BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem;
  border-radius:100px;
  font-family: var(--font-body); font-weight:700; font-size:1rem; letter-spacing:.01em;
  cursor:pointer; border:2px solid transparent;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), background .3s, color .3s, border-color .3s;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn svg{ width:1.2em; height:1.2em; flex:0 0 auto; }

/* Rayo de luz (shimmer) al pasar el cursor */
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 1s var(--ease-out-expo);
}
.btn-primary:hover::before{ transform: translateX(120%); }

/* Primario — VERDE sólido de marca con texto blanco (protagonista) */
.btn-primary{ background: var(--verde-hoja); color: var(--blanco); box-shadow: var(--shadow-cta); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 22px 46px rgba(63,110,31,0.40); }

/* Fantasma — borde verde sobre claro */
.btn-ghost{ background: var(--blanco); color: var(--verde-hoja); border-color: var(--verde-geranio); }
.btn-ghost:hover{ transform: translateY(-3px); background: var(--verde-hoja); color:#fff; border-color: var(--verde-hoja); }

/* WhatsApp — cálido, secundario */
.btn-wa{ background: var(--blanco); color: var(--verde-hoja); border-color: var(--verde-geranio); }
.btn-wa:hover{ transform: translateY(-3px); background: var(--verde-salvia); }

/* Claro sobre banda oscura */
.btn-light{ background: var(--blanco); color: var(--verde-hoja); }
.btn-light:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.22); }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover{ transform: translateY(-3px); background: rgba(255,255,255,0.12); border-color:#fff; }


/* =========================================================== 07 · HEADER */
.site-header{
  position:sticky; top:0; z-index:60;
  background: rgba(251,248,242,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .3s, background .3s;
}
.site-header.scrolled{ box-shadow: 0 8px 28px rgba(44,64,40,0.10); background: rgba(251,248,242,0.94); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:1rem; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav ul{ display:flex; gap:1.7rem; list-style:none; }
.nav a{
  color: var(--pizarra); font-weight:500; font-size:1rem;
  position:relative; padding:.2rem 0;
  transition: color .25s var(--ease-out-quart);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
  background: var(--verde-hoja);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-out-expo);
}
.nav a:hover{ color: var(--verde-hoja); }
.nav a:hover::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:1rem; }
.header-cta .btn{ padding:.72rem 1.35rem; font-size:.95rem; }

/* Hamburguesa */
.hamb{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem;
}
.hamb span{ width:26px; height:2.5px; background: var(--verde-hoja); border-radius:2px; transition: transform .3s var(--ease-out-expo), opacity .3s; }
.hamb[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamb[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  display:none;
  position:fixed; inset:0 0 0 auto; top:0; height:100dvh; width:min(84vw,340px);
  background: var(--marfil);
  z-index:70; padding:5.5rem 1.8rem 2rem;
  transform: translateX(105%);
  transition: transform .45s var(--ease-out-expo);
  box-shadow: -24px 0 66px rgba(44,64,40,0.18);
  border-left:1px solid var(--linea);
  overflow-y:auto;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:.2rem; }
.mobile-menu a.m-link{
  color: var(--verde-hoja); font-weight:500; font-size:1.4rem; font-family:var(--font-display);
  display:block; padding:.7rem 0; border-bottom:1px solid var(--linea);
}
.mobile-menu .btn{ width:100%; margin-top:1.2rem; }
.menu-overlay{
  display:none; position:fixed; inset:0; background: rgba(44,64,40,0.42);
  z-index:65; opacity:0; transition:opacity .4s;
}
.menu-overlay.open{ display:block; opacity:1; }


/* =================================== 08 · FONDO "HOGAR CON JARDÍN" */
/* Capa decorativa: geranios (flores) + hojas verdes meciéndose despacio.
   Vive DETRÁS del contenido de cada banda (z-index:0). El contenido se
   eleva con position:relative + z-index mayor para quedar legible.
   Uso: <section class="has-garden"> … <div class="garden">…</div> …
   y el contenido dentro de un wrapper .container (que ya sube de capa). */
.has-garden{ position:relative; overflow:hidden; }
.has-garden > .container,
.has-garden > .hero-grid,
.has-garden > .promesa-grid{ position:relative; z-index:2; }

.garden{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* --- Geranios (flores de marca) --- */
.bloom{
  position:absolute;
  width: min(var(--g-size,130px), 40vw); height:auto;
  color: var(--rosa-suave);
  opacity: var(--g-op,.22);
  overflow:visible; transform-origin:center; will-change:transform;
  animation-name: gSway;
  animation-duration: var(--g-dur,16s);
  animation-delay: var(--g-delay,0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bloom.drift{  animation-name: gDrift; }
.bloom.breath{ animation-name: gBreath; }
.bloom.c-rosa{ color: var(--rosa-suave); }
.bloom.c-oro{  color: var(--oro-amanecer); }

/* --- Hojas verdes --- */
.hoja{
  position:absolute;
  width: min(var(--g-size,60px), 22vw); height:auto;
  color: var(--verde-hoja);
  opacity: var(--g-op,.30);
  overflow:visible; will-change:transform;
  animation-name: gSway;
  animation-duration: var(--g-dur,15s);
  animation-delay: var(--g-delay,0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hoja.drift{ animation-name: gDrift; }
.hoja.c-clara{ color: var(--verde-geranio); }

@keyframes gSway{
  0%,100%{ transform: translate3d(0,0,0) rotate(-4deg); }
  50%    { transform: translate3d(8px,-16px,0) rotate(5deg); }
}
@keyframes gDrift{
  0%,100%{ transform: translate3d(0,0,0) rotate(3deg); }
  50%    { transform: translate3d(-12px,12px,0) rotate(-6deg); }
}
@keyframes gBreath{
  0%,100%{ transform: scale(1) rotate(0deg);   opacity: var(--g-op,.22); }
  50%    { transform: scale(1.07) rotate(2deg); opacity: calc(var(--g-op,.22) * 1.35); }
}
@media (prefers-reduced-motion: reduce){
  .bloom, .hoja{ animation:none !important; }
}
@media (max-width: 600px){
  .garden .hide-sm{ display:none; }
  .bloom, .hoja{ opacity: calc(var(--g-op,.22) * .8); }
}

/* Motas de luz (amanecer que respira) */
.mote{ position:absolute; z-index:1; border-radius:50%; pointer-events:none; filter: blur(.3px); }
.mote.m1{ width:12px; height:12px; top:16%; left:7%;  background: rgba(210,162,76,.55); animation: floatA 12s ease-in-out infinite; }
.mote.m2{ width:8px;  height:8px;  top:70%; left:13%; background: rgba(155,194,74,.55); animation: floatB 14s ease-in-out infinite; }
.mote.m3{ width:10px; height:10px; top:26%; right:46%; background: rgba(206,154,139,.5); animation: floatB 10s ease-in-out infinite; }
.mote.m4{ width:14px; height:14px; bottom:12%; right:8%; background: rgba(210,162,76,.4); animation: floatA 16s ease-in-out infinite; }
.mote.m5{ width:7px;  height:7px;  top:10%; right:16%; background: rgba(124,157,171,.45); animation: floatB 13s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform: translateY(0) translateX(0); opacity:.5; } 50%{ transform: translateY(-24px) translateX(6px); opacity:1; } }
@keyframes floatB{ 0%,100%{ transform: translateY(0) translateX(0); opacity:.45; } 50%{ transform: translateY(20px) translateX(-6px); opacity:.9; } }
@media (prefers-reduced-motion: reduce){ .mote{ animation:none !important; } }


/* ============================================================= 09 · HERO */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: 5.5rem 0 6rem;
  background: linear-gradient(180deg, var(--blanco) 0%, var(--marfil) 42%, var(--marfil-hondo) 100%);
}
/* Amanecer que respira — luz cálida + un toque verde jardín */
.dawn{
  position:absolute; inset:-10% -10% auto -10%; height:80%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 78% 8%, rgba(210,162,76,0.26), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 4%, rgba(155,194,74,0.18), transparent 62%),
    radial-gradient(ellipse 90% 80% at 40% 0%, rgba(206,154,139,0.12), transparent 62%);
  transform-origin:80% 0%;
  animation: dawnBreathe 14s ease-in-out infinite;
}
@keyframes dawnBreathe{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .dawn{ animation:none; } }

/* Grano sutil (calidez de papel) */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.43  0 0 0 0 0.16  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.05; mix-blend-mode:multiply;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }

.hero-copy .eyebrow{ margin-bottom:1.5rem; }
h1{
  font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height:1.04;
  color: var(--pizarra); margin-bottom:1.4rem;
}
h1 em{ color: var(--verde-hoja); }         /* énfasis clave en VERDE de marca */
.hero-sub{ font-size:1.24rem; line-height:1.62; color: var(--pizarra); max-width:32rem; margin-bottom:2rem; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.4rem; }

.trust-ribbon{ display:flex; flex-wrap:wrap; gap:.6rem 1.3rem; align-items:center; }
.trust-pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight:600; color: var(--verde-hoja); }
.trust-pill svg{ width:1.15em; height:1.15em; color: var(--oro-hondo); flex:0 0 auto; }
.trust-sep{ width:5px; height:5px; border-radius:50%; background: var(--verde-geranio); }

/* Hero visual — foto-marco luminoso */
.hero-visual{ position:relative; }
.photo-frame{
  position:relative; border-radius:26px; overflow:hidden;
  background: linear-gradient(155deg, var(--blanco) 0%, var(--verde-salvia) 46%, rgba(210,162,76,0.18) 100%);
  border:1px solid var(--linea); box-shadow: var(--shadow-lift);
  display:grid; place-items:center; text-align:center; padding:2.5rem;
}
.photo-frame::before{  /* rayo de luz diagonal dentro del marco */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.5) 50%, transparent 58%);
  opacity:.6;
}
.photo-frame > *{ position:relative; z-index:1; }
.hero-visual .photo-frame{ aspect-ratio:4/4.6; }
.photo-frame .frame-icon{ color: var(--verde-hoja); opacity:.78; margin-bottom:1rem; }
.photo-frame .frame-icon svg{ width:66px; height:66px; }
.photo-frame .frame-cap{ font-family: var(--font-display); font-style:italic; font-size:1.28rem; color: var(--verde-hoja); line-height:1.32; }
.photo-frame .frame-sub{ font-size:.8rem; color: var(--gris); margin-top:.35rem; letter-spacing:.03em; }

/* Badge flotante — reseñas en vivo */
.floating-badge{
  position:absolute; left:-1.2rem; bottom:1.8rem;
  background: var(--blanco); border-radius:18px; padding:.9rem 1.2rem;
  box-shadow: var(--shadow-lift); display:flex; align-items:center; gap:.75rem;
  border:1px solid var(--linea);
}
.floating-badge .stars{ color: var(--oro-amanecer); font-size:1rem; letter-spacing:1px; }
.floating-badge b{ font-family:var(--font-display); font-size:1.7rem; color: var(--verde-hoja); font-weight:600; line-height:1; }
.floating-badge small{ display:block; font-size:.76rem; color: var(--gris); }


/* ========================================================== 10 · PROMESA */
.promesa{ padding: var(--sec-pad) 0; background: var(--marfil); }
.promesa-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center; }
.promesa .frame-tall .photo-frame{ aspect-ratio:4/5; }
.promesa h2{ font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height:1.08; color: var(--verde-hoja); margin-bottom:1.3rem; }
.promesa h2 em{ color: var(--oro-hondo); }
.promesa-copy p{ font-size:1.16rem; color: var(--pizarra); margin-bottom:1.1rem; max-width:35rem; }
.promesa-copy p strong{ color: var(--verde-hoja); font-weight:700; }
.promesa-points{ list-style:none; display:flex; flex-direction:column; gap:.75rem; margin-top:1.7rem; }
.promesa-points li{ display:flex; align-items:flex-start; gap:.75rem; font-weight:600; color: var(--verde-hoja); }
.tick{
  flex:0 0 auto; width:27px; height:27px; border-radius:50%;
  background: rgba(63,110,31,0.12); color: var(--verde-hoja);
  display:grid; place-items:center; margin-top:1px;
}
.tick svg{ width:14px; height:14px; }
.promesa-copy .btn{ margin-top:1.9rem; }


/* ========================================================= 11 · CUIDADOS */
.cuidados{ padding: var(--sec-pad) 0; background: var(--verde-salvia); position:relative; }
.care-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.care-card{
  background: var(--blanco); border:1px solid var(--linea-verde); border-radius:22px;
  padding:2.1rem 1.8rem; display:flex; flex-direction:column;
  transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo), border-color .4s;
  position:relative; overflow:hidden;
}
.care-card::after{
  content:''; position:absolute; left:0; top:0; height:100%; width:4px;
  background: linear-gradient(180deg, var(--verde-hoja), var(--verde-geranio));
  transform: scaleY(0); transform-origin:top;
  transition: transform .45s var(--ease-out-expo);
}
.care-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--verde-geranio); }
.care-card:hover::after{ transform: scaleY(1); }
.care-ico{
  width:66px; height:66px; border-radius:18px; background: var(--verde-salvia);
  display:grid; place-items:center; margin-bottom:1.3rem; color: var(--verde-hoja);
  transition: background .4s, color .4s;
}
.care-card:hover .care-ico{ background: rgba(63,110,31,0.14); }
.care-ico svg{ width:34px; height:34px; overflow:visible; }
.care-card h3{ font-size:1.5rem; color: var(--verde-hoja); margin-bottom:.45rem; line-height:1.18; }
.care-card p{ font-size:1.02rem; color: var(--gris); line-height:1.55; flex:1 1 auto; }
.care-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-weight:700; font-size:.98rem; color: var(--verde-hoja);
}
.care-link svg{ width:1em; height:1em; transition: transform .3s var(--ease-out-expo); }
.care-card:hover .care-link svg{ transform: translateX(4px); }

/* Iconos contextuales animados (RAPTOR LIB 03 visual) */
.care-card:hover .ic-home .heart{ animation: beat 1.4s ease-in-out infinite; }
@keyframes beat{ 0%,100%{ transform:scale(1);} 30%{ transform:scale(1.18);} 60%{ transform:scale(.96);} }
.ic-home .heart{ transform-origin:center; transform-box:fill-box; }
.care-card:hover .ic-sun .rays{ animation: spin 9s linear infinite; }
.ic-sun .rays{ transform-origin:center; transform-box:fill-box; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.care-card:hover .ic-leaf .sprout{ animation: grow 2.4s var(--ease-out-expo) infinite; }
.ic-leaf .sprout{ transform-origin:bottom center; transform-box:fill-box; }
@keyframes grow{ 0%{ transform:scale(.55) rotate(-4deg);} 55%,100%{ transform:scale(1) rotate(0);} }
.care-card:hover .ic-mind .ripple{ animation: ripple 2.6s ease-out infinite; }
.ic-mind .ripple{ transform-origin:center; transform-box:fill-box; opacity:.9; }
@keyframes ripple{ 0%{ transform:scale(.6); opacity:.9;} 100%{ transform:scale(1.25); opacity:0;} }
.care-card:hover .ic-hand .hand{ animation: cradle 2.8s ease-in-out infinite; }
.ic-hand .hand{ transform-origin:center bottom; transform-box:fill-box; }
@keyframes cradle{ 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-3px) rotate(-3deg);} }
@media (prefers-reduced-motion: reduce){
  .ic-home .heart,.ic-sun .rays,.ic-leaf .sprout,.ic-mind .ripple,.ic-hand .hand{ animation:none !important; }
}


/* ============================================ 12 · POR QUÉ NOS ELIGEN */
.porque{ padding: var(--sec-pad) 0; background: var(--marfil); }
.porque-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.porque h2{ font-size: clamp(2.1rem, 4vw, 3.2rem); color: var(--verde-hoja); line-height:1.1; margin-bottom:1rem; }
.porque h2 em{ color: var(--oro-hondo); }
.porque .lead{ font-size:1.14rem; color: var(--gris); margin-bottom:1.8rem; max-width:34rem; }
.evidence{ list-style:none; display:flex; flex-direction:column; gap:1.15rem; }
.evidence li{ display:flex; gap:1rem; align-items:flex-start; }
.evidence .ev-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  background: var(--verde-salvia); color: var(--verde-hoja);
  display:grid; place-items:center;
}
.evidence .ev-ico svg{ width:22px; height:22px; }
.evidence .ev-txt strong{ display:block; color: var(--verde-hoja); font-weight:700; font-size:1.06rem; margin-bottom:.15rem; }
.evidence .ev-txt span{ color: var(--gris); font-size:1rem; line-height:1.5; }

/* Panel de estadísticas (contadores) — banda verde profunda */
.stats-panel{
  background: var(--verde-hoja); border-radius:26px; padding:2.6rem 2rem;
  color:#fff; position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 1.5rem;
}
.stats-panel::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 14% 16%, rgba(155,194,74,0.35), transparent 46%),
    radial-gradient(circle at 88% 88%, rgba(210,162,76,0.28), transparent 48%);
}
.stat{ text-align:center; }
.stat b{
  font-family: var(--font-display); font-weight:600; line-height:1;
  font-size: clamp(2.6rem, 5vw, 3.5rem); color:#fff; display:block;
  font-variant-numeric: tabular-nums;
}
.stat .stat-oro{ color:#DCEBB8; }   /* verde de marca aclarado — AA sobre el verde profundo */
.stat span{ display:block; margin-top:.5rem; font-size:.98rem; opacity:.94; font-weight:500; letter-spacing:.01em; }


/* ====================================================== 13 · NUESTRA CASA */
.casa{ padding: var(--sec-pad) 0; background: var(--verde-salvia); }
.casa-layout{ display:grid; grid-template-columns:1fr; gap:3rem; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:1.4rem; }
.gallery .g-item{ position:relative; }
.gallery .photo-frame{ aspect-ratio:1/1; height:100%; border-radius:20px; padding:1.8rem; }
.gallery .g-tall{ grid-row: span 2; }
.gallery .g-tall .photo-frame{ aspect-ratio:auto; }
.gallery .photo-frame .frame-icon svg{ width:48px; height:48px; }
.gallery .photo-frame .frame-cap{ font-size:1.12rem; }
.gallery .g-item .photo-frame{ transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo); }
.gallery .g-item:hover .photo-frame{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.casa-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.feature{
  background: var(--blanco); border:1px solid var(--linea-verde); border-radius:18px;
  padding:1.5rem 1.4rem; text-align:left;
}
.feature .f-ico{ color: var(--verde-hoja); margin-bottom:.7rem; }
.feature .f-ico svg{ width:30px; height:30px; }
.feature h3{ font-size:1.18rem; color: var(--verde-hoja); margin-bottom:.3rem; line-height:1.2; }
.feature p{ font-size:.96rem; color: var(--gris); line-height:1.5; }
.casa-cta{ text-align:center; }


/* ======================================================= 14 · OPINIONES */
.opiniones{ padding: var(--sec-pad) 0; background: var(--marfil); position:relative; overflow:hidden; }
.reviews-card{
  max-width:60rem; margin:0 auto;
  background: var(--blanco); border:1px solid var(--linea); border-radius:28px;
  box-shadow: var(--shadow-soft); padding:3rem;
  display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center;
}
.reviews-score{ text-align:center; padding-right:2.5rem; border-right:1px solid var(--linea); }
.reviews-score .num{ font-family:var(--font-display); font-weight:600; font-size:4.6rem; color: var(--verde-hoja); line-height:1; }
.reviews-score .stars{ color: var(--oro-amanecer); font-size:1.4rem; letter-spacing:2px; margin:.4rem 0; }
.reviews-score .count{ font-size:.95rem; color: var(--gris); font-weight:600; }
.reviews-live{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem;
  font-size:.8rem; font-weight:700; color: var(--verde-hoja);
  background: rgba(63,110,31,0.12); padding:.35rem .8rem; border-radius:100px;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 0 rgba(46,204,113,.6); animation: pulseDot 2s ease-out infinite; }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(46,204,113,.55);} 70%{ box-shadow:0 0 0 9px rgba(46,204,113,0);} 100%{ box-shadow:0 0 0 0 rgba(46,204,113,0);} }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }
.reviews-body .g-logo{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.reviews-body .g-logo svg{ width:24px; height:24px; }
.reviews-body .g-logo span{ font-weight:700; color: var(--pizarra); font-size:1.05rem; }
.reviews-body h3{ font-family:var(--font-display); font-weight:500; font-size:1.95rem; color: var(--verde-hoja); line-height:1.2; margin-bottom:.7rem; }
.reviews-body h3 em{ font-style:italic; color: var(--oro-hondo); }
.reviews-body p{ color: var(--gris); margin-bottom:1.4rem; font-size:1.06rem; }
.verified{ display:inline-flex; align-items:center; gap:.4rem; font-size:.92rem; color: var(--verde-hoja); font-weight:600; margin-bottom:1.4rem; }
.verified svg{ width:1.1em; height:1.1em; color: var(--verde-hoja); }


/* ====================================================== 15 · CTA VISITA */
.cta-visita{ padding: 5.5rem 0; background: var(--verde-hoja); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.cta-visita::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 84% 14%, rgba(210,162,76,0.30), transparent 46%),
    radial-gradient(circle at 8% 88%, rgba(155,194,74,0.30), transparent 46%);
}
.cta-inner{ max-width:52rem; margin:0 auto; text-align:center; }
.cta-inner .eyebrow{ background: rgba(255,255,255,0.14); color:#F1E4C6; }
.cta-visita h2{ font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height:1.1; margin:1rem 0 1rem; color:#fff; }
.cta-visita h2 em{ color: var(--oro-amanecer); }
.cta-visita .cta-quote{
  font-family:var(--font-display); font-style:italic; font-size:1.4rem; line-height:1.5;
  color:#fff; opacity:.95; max-width:40rem; margin:0 auto 2rem;
}
.cta-visita .hero-cta{ justify-content:center; margin-bottom:0; }


/* ================================================= 16 · UBICACIÓN / CONTACTO */
.ubicacion{ padding: var(--sec-pad) 0; background: var(--marfil); }
.ubi-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:stretch; }
.map-embed{ border-radius:24px; overflow:hidden; box-shadow: var(--shadow-lift); border:5px solid var(--blanco); }
.map-embed iframe{ width:100%; height:460px; border:0; display:block; }
.ubi-info{ display:flex; flex-direction:column; justify-content:center; }
.ubi-info .eyebrow{ margin-bottom:1rem; }
.ubi-info h2{ font-size: clamp(2rem, 3.8vw, 2.9rem); line-height:1.12; color: var(--verde-hoja); margin-bottom:.8rem; }
.ubi-info h2 em{ color: var(--oro-hondo); }
.ubi-info > p{ color: var(--gris); margin-bottom:1.5rem; font-size:1.08rem; }
.nap-card{ background: var(--blanco); border:1px solid var(--linea); border-radius:18px; padding:1.7rem; box-shadow: var(--shadow-soft); }
.nap-row{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--linea); }
.nap-row:first-child{ padding-top:0; }
.nap-row:last-child{ border:none; padding-bottom:0; }
.nap-ico{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background: var(--verde-salvia); color: var(--verde-hoja); display:grid; place-items:center; }
.nap-ico svg{ width:20px; height:20px; }
.nap-row .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--gris); font-weight:700; margin-bottom:.15rem; }
.nap-row .v{ color: var(--pizarra); font-weight:600; font-size:1.04rem; line-height:1.4; }
.nap-row a.v:hover{ color: var(--verde-hoja); }
.ubi-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }


/* ============================================================ 17 · FOOTER */
.site-footer{ background: var(--verde-bosque); color: rgba(255,255,255,0.76); padding:4rem 0 2.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:2.5rem; }
.footer-brand .mark{ color: var(--verde-geranio); }
.footer-brand .mark svg{ width:44px; height:44px; }
.footer-brand .fb-name{ font-family:var(--font-display); font-size:1.7rem; color:#fff; font-weight:600; margin-top:.6rem; }
.footer-brand .fb-name sup{ font-size:.56rem; color: var(--verde-geranio); }
.footer-brand .fb-tag{ font-family:var(--font-display); font-style:italic; color: var(--verde-geranio); margin-top:.4rem; font-size:1.12rem; }
.footer-col h4{ color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; font-weight:700; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ color: rgba(255,255,255,0.76); transition: color .25s; font-size:1rem; }
.footer-col a:hover{ color: var(--verde-geranio); }
.footer-col p{ font-size:.98rem; line-height:1.6; }
.footer-col p a{ color: rgba(255,255,255,0.76); }
.footer-col p a:hover{ color: var(--verde-geranio); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); padding-top:1.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.88rem; align-items:center; }
.footer-bottom .legal-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-bottom .reg{ opacity:.62; }


/* ================================= 18 · BOTONES FLOTANTES DE CONVERSIÓN */
.float-actions{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:80; display:flex; flex-direction:column; gap:.7rem; }
.float-btn{
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s;
}
.float-btn svg{ width:28px; height:28px; }
.float-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(0,0,0,0.3); }
.float-btn.wa{ background:#25D366; }
.float-btn.tel{ background: var(--verde-hoja); }
.float-btn::after{  /* halo de pulso muy sutil */
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 0 currentColor; opacity:.5;
  animation: floatPulse 2.6s ease-out infinite;
}
.float-btn.wa{ position:relative; }
.float-btn.tel{ position:relative; }
@keyframes floatPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 12px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.float-btn.tel::after{ animation:none; }
@media (prefers-reduced-motion: reduce){ .float-btn::after{ animation:none; } }


/* ========================================================= 19 · RESPONSIVE */
@media (max-width:1024px){
  .care-grid{ grid-template-columns:repeat(2,1fr); }
  .casa-features{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ gap:2.5rem; }
}
@media (max-width:900px){
  :root{ --sec-pad:4.5rem; }
  .nav ul, .header-cta .btn-primary{ display:none; }
  .hamb{ display:flex; }
  .mobile-menu{ display:block; }
  .hero-grid, .promesa-grid, .porque-grid, .ubi-grid, .reviews-card{ grid-template-columns:1fr; }
  .reviews-card{ gap:1.6rem; padding:2.2rem; text-align:center; }
  .reviews-score{ border-right:none; border-bottom:1px solid var(--linea); padding-right:0; padding-bottom:1.6rem; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .g-tall{ grid-row:auto; }
  .promesa-grid .frame-tall{ order:-1; }
  .porque-grid .stats-panel{ order:-1; }
  .hero{ padding:4rem 0 4.5rem; }
  .verified, .reviews-body .btn{ margin-left:auto; margin-right:auto; }
}
@media (max-width:768px){
  .stats-panel{ grid-template-columns:repeat(2,1fr); }
  .map-embed iframe{ height:380px; }
}
@media (max-width:720px){
  .container{ padding:0 1.4rem; }
}
@media (max-width:640px){
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .cta-visita .hero-cta{ flex-direction:column; }
  .care-grid, .gallery, .casa-features{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .map-embed iframe{ height:300px; }
  .floating-badge{ left:.4rem; }
  .ubi-actions .btn{ width:100%; }
}
@media (max-width:480px){
  .container{ padding:0 1.1rem; }
  h1{ font-size: clamp(2.2rem, 9vw, 2.6rem); }
  .brand-tag{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .reviews-score .num{ font-size:3.6rem; }
  .stats-panel{ grid-template-columns:1fr; gap:1.4rem; }
  .float-btn{ width:52px; height:52px; }
  .float-btn svg{ width:25px; height:25px; }
}

/* ===== RAPTOR — Menú desplegable "Cuidados" ===== */
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:.3rem}
.nav-caret{font-size:.68em;transition:transform .2s ease}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:rotate(180deg)}
.nav .nav-submenu{display:block !important;flex-direction:column;position:absolute;top:100%;left:0;gap:0;margin:.55rem 0 0;padding:.45rem;width:290px;max-width:none;list-style:none;background:var(--blanco,#fff);border:1px solid var(--linea,#e7e3d8);border-radius:12px;box-shadow:0 16px 38px rgba(51,69,76,.16);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:200}
.nav-submenu a::after{display:none !important}
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:.65rem}
.nav-drop:hover>.nav-submenu,.nav-drop:focus-within>.nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-submenu li{display:block;width:100%;margin:0}
.nav-submenu a{display:block;padding:.62rem .85rem;border-radius:8px;color:var(--pizarra,#33454c);text-decoration:none;font-size:.95rem;line-height:1.3;white-space:nowrap;transition:background .15s,color .15s}
.nav-submenu a:hover,.nav-submenu a:focus{background:var(--verde-salvia,#edf3e2);color:var(--verde-hoja,#3f6e1f)}
.m-sub{padding-left:2.4rem !important;font-size:.95rem;opacity:.9}
@media (max-width:900px){.nav-submenu{display:none}}

/* ===== RAPTOR — Leyenda de crédito en el footer ===== */
.footer-credit{display:block;margin-top:.55rem;font-size:.82rem;opacity:.78}
.footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-credit a:hover{color:var(--verde-geranio,#9bc24a)}


/* ===== RAPTOR — Hero con video de fondo (solo Home) ===== */
.hero.has-video{ min-height:clamp(560px,80vh,780px); display:flex; align-items:center; padding:clamp(3.5rem,9vh,6rem) 0; background:#20291f; }
.hero.has-video > .container{ flex:1 1 auto; }
.hero.has-video::before{ display:none; }
.hero-bg-video,.hero-bg-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; }
.hero-bg-video.is-mobile,.hero-bg-image.is-mobile{ display:none; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg, rgba(18,24,18,.74) 0%, rgba(18,24,18,.6) 34%, rgba(18,24,18,.38) 60%, rgba(18,24,18,.2) 100%),
    linear-gradient(180deg, rgba(18,24,18,.32), rgba(18,24,18,.06) 34%, rgba(18,24,18,.46) 100%); }
.hero.has-video > .container{ position:relative; z-index:2; min-width:0; }
.hero.has-video .hero-grid{ grid-template-columns:minmax(0,1fr); min-width:0; }
.hero.has-video .hero-copy{ min-width:0; }
.hero.has-video h1{ overflow-wrap:break-word; }
.hero.has-video .hero-copy{ max-width:560px; }
.hero.has-video h1{ color:#FFFFFF; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero.has-video h1 em{ color:var(--verde-geranio); }
.hero.has-video .hero-sub{ color:rgba(255,255,255,.95); text-shadow:0 1px 10px rgba(0,0,0,.45); }
.hero.has-video .eyebrow{ background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.3); }
.hero.has-video .eyebrow .dot{ background:var(--verde-geranio); }
.hero.has-video .trust-pill{ color:#fff; }
.hero.has-video .trust-pill svg{ color:var(--verde-geranio); }
.hero.has-video .trust-sep{ background:rgba(255,255,255,.5); }
.hero.has-video .hero-visual{ position:static; }
.hero.has-video .floating-badge{ position:absolute; right:clamp(1rem,4vw,2.6rem); bottom:1.8rem; left:auto; z-index:3; }
@media (max-width:900px){
  .hero.has-video .hero-bg-video.is-desktop{ display:none !important; }
  .hero.has-video .hero-bg-image.is-mobile{ display:block; }
  .hero.has-video .hero-bg-video.is-mobile{ display:block; }
  .hero.has-video{ min-height:clamp(600px,90vh,880px); }
  .hero-scrim{ background:
    linear-gradient(180deg, rgba(18,24,18,.5) 0%, rgba(18,24,18,.4) 42%, rgba(18,24,18,.4) 68%, rgba(18,24,18,.62) 100%); }
  .hero.has-video .floating-badge{ right:auto; left:50%; transform:translateX(-50%); bottom:1.4rem; }
}


/* ===== RAPTOR — Galeria rotativa (instalaciones) ===== */
.galeria{ margin-top:.4rem; }
.galeria-stage{ position:relative; aspect-ratio:16/10; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lift); background:var(--verde-salvia); }
.gslide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .9s ease; }
.gslide.is-active{ opacity:1; }
.gslide img{ width:100%; height:100%; object-fit:cover; display:block; }
.gslide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.8rem 1.7rem 1.15rem; color:#fff; font-family:var(--font-display); font-size:1.55rem; line-height:1.2; background:linear-gradient(transparent, rgba(20,26,20,.74)); }
.gnav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--verde-hoja); border:none; cursor:pointer; font-size:1.7rem; line-height:1; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:background .2s, transform .2s; z-index:2; }
.gnav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.gprev{ left:1rem; } .gnext{ right:1rem; }
.gdots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.1rem; flex-wrap:wrap; }
.gdot{ width:10px; height:10px; padding:0; border-radius:50%; border:none; background:var(--linea-verde); cursor:pointer; transition:width .3s, background .3s; }
.gdot.is-active{ background:var(--verde-hoja); width:28px; border-radius:5px; }
@media (max-width:600px){ .galeria-stage{ aspect-ratio:4/3; } .gslide figcaption{ font-size:1.25rem; padding:2.2rem 1.3rem 1rem; } .gnav{ width:40px; height:40px; } }

/* ===== RAPTOR — Foto real en photo-frame ===== */
.photo-frame.has-photo{ padding:0; display:block; background:none; }
.photo-frame.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame-tall .photo-frame.has-photo{ aspect-ratio:4/5; }

/* ===== RAPTOR — Ken Burns (fondo de seccion) ===== */
.kb-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.kb-bg img{ width:100%; height:100%; object-fit:cover; display:block; animation:kenburns 24s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{ 0%{ transform:scale(1.06) translate(0,0); } 100%{ transform:scale(1.2) translate(-2.5%,-2%); } }
@media (prefers-reduced-motion: reduce){ .kb-bg img{ animation:none; transform:scale(1.06); } }
.cta-visita{ position:relative; overflow:hidden; }
.cta-visita .kb-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(44,74,22,.92) 0%, rgba(44,74,22,.8) 45%, rgba(20,26,20,.7) 100%); }
.cta-visita > .container{ position:relative; z-index:2; }