/* ==========================================================================
   CATALUNA MEDICINA — hoja de estilo única
   Paleta y tipografías extraídas del sitio actual (export Simply Static).
   ========================================================================== */

:root{
  --rosa:        #e8b9c1;
  --rosa-oscuro: #b26d77;
  --dorado:      #c49e6c;
  --bronce:      #a6784a;
  --cafe:        #3b2b25;
  --crema:       #f5efea;
  --blanco:      #ffffff;
  --whatsapp:    #25d366;
  --linea:       #efe4de;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;
  --max:   1240px;
}

/* ==========================================================================
   SISTEMA DE MOVIMIENTO Y VIDRIO
   Técnicas portadas del prompt "cinematic landing" (BlurText, entradas
   escalonadas, liquid-glass) a CSS + IntersectionObserver, con la paleta
   CATALUNA. Sin React, sin Babel, sin Framer Motion.
   ========================================================================== */

/* --- Liquid glass (borde con máscara, igual que el original) --------------- */
.vidrio, .vidrio-fuerte{
  position:relative; overflow:hidden; border:none;
  background:rgba(255,255,255,.06); background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
}
.vidrio-fuerte{
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  background:rgba(255,255,255,.10);
  box-shadow:4px 4px 14px rgba(43,32,27,.14), inset 0 1px 1px rgba(255,255,255,.15);
}
.vidrio::before, .vidrio-fuerte::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.vidrio-fuerte::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.50) 0%, rgba(255,255,255,.20) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.20) 80%, rgba(255,255,255,.50) 100%);
}
/* Variante cálida para las secciones claras */
.vidrio--calido{
  background:rgba(232,185,193,.16);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 10px 30px rgba(59,43,37,.07);
}
.vidrio--calido::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.9) 0%, rgba(196,158,108,.35) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 58%,
    rgba(196,158,108,.35) 80%, rgba(255,255,255,.9) 100%);
}

/* --- BlurText: entrada palabra por palabra -------------------------------- */
@keyframes entradaBorrosa{
  0%   {filter:blur(10px); opacity:0;  transform:translateY(50px)}
  50%  {filter:blur(5px);  opacity:.5; transform:translateY(-5px)}
  100% {filter:blur(0);    opacity:1;  transform:translateY(0)}
}
.js-mov [data-blur] .palabra{display:inline-block; opacity:0; will-change:filter,opacity,transform}
/* 'backwards' (y no 'forwards'): el estado FINAL vive en el CSS del elemento,
   así que si la animación no llega a correr, la palabra queda visible igual. */
.js-mov [data-blur].visible .palabra{
  opacity:1;
  animation:entradaBorrosa .7s ease-out backwards;
  animation-delay:calc(var(--i,0) * 100ms);
}

/* --- Revelado escalonado al entrar en pantalla ---------------------------- */
.js-mov [data-anim]{
  opacity:0; filter:blur(10px); transform:translateY(20px);
  transition:opacity .85s ease-out, filter .85s ease-out,
             transform .85s cubic-bezier(.16,1,.3,1);
}
.js-mov [data-anim].visible{opacity:1; filter:blur(0); transform:none}
.js-mov [data-anim="izq"]{transform:translateX(-28px)}
.js-mov [data-anim="der"]{transform:translateX(28px)}
.js-mov [data-anim="escala"]{transform:scale(.94)}

/* Hijos escalonados: .cards, .testis, .panel, .galeria, .precios */
.js-mov [data-stagger]>*{
  opacity:0; filter:blur(8px); transform:translateY(26px);
  transition:opacity .8s ease-out, filter .8s ease-out,
             transform .8s cubic-bezier(.16,1,.3,1);
}
.js-mov [data-stagger].visible>*{opacity:1; filter:blur(0); transform:none}
.js-mov [data-stagger].visible>*:nth-child(1){transition-delay:.00s}
.js-mov [data-stagger].visible>*:nth-child(2){transition-delay:.09s}
.js-mov [data-stagger].visible>*:nth-child(3){transition-delay:.18s}
.js-mov [data-stagger].visible>*:nth-child(4){transition-delay:.27s}
.js-mov [data-stagger].visible>*:nth-child(5){transition-delay:.36s}
.js-mov [data-stagger].visible>*:nth-child(6){transition-delay:.45s}
.js-mov [data-stagger].visible>*:nth-child(n+7){transition-delay:.5s}

/* --- Parallax del hero ---------------------------------------------------- */
.js-par .hero__bg{height:124%; top:-12%; will-change:transform}

/* Apagado de emergencia: pestaña oculta al cargar, o cualquier caso en que las
   animaciones no puedan correr. Garantiza que jamás quede contenido invisible. */
html.mov-off [data-blur] .palabra,
html.mov-off [data-anim],
html.mov-off [data-stagger]>*{
  opacity:1!important; filter:none!important; transform:none!important;
  animation:none!important; transition:none!important;
}

/* Impresión: nada puede quedar invisible */
@media print{
  .js-mov [data-blur] .palabra,
  .js-mov [data-anim],
  .js-mov [data-stagger]>*{
    opacity:1!important; filter:none!important; transform:none!important;
    animation:none!important; transition:none!important;
  }
}

/* --- Sin movimiento ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-mov [data-blur] .palabra,
  .js-mov [data-anim],
  .js-mov [data-stagger]>*{
    opacity:1!important; filter:none!important; transform:none!important;
    animation:none!important; transition:none!important;
  }
  .js-par .hero__bg{transform:none!important}
  html{scroll-behavior:auto}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); font-weight:300;
  color:var(--cafe); background:var(--blanco);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.wrap--angosto{max-width:900px}

/* ---------- HEADER ---------- */
.header{
  background:var(--blanco); position:sticky; top:0; z-index:50;
  transition:box-shadow .4s ease, background .4s ease, top .4s cubic-bezier(.16,1,.3,1),
             left .4s cubic-bezier(.16,1,.3,1), right .4s cubic-bezier(.16,1,.3,1),
             border-radius .4s ease;
}
.header__row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 0; transition:padding .4s cubic-bezier(.16,1,.3,1);
}
.logo img{
  width:90px; height:90px; border-radius:50%;
  transition:width .4s cubic-bezier(.16,1,.3,1), height .4s cubic-bezier(.16,1,.3,1);
}
.infobar{transition:opacity .3s ease, max-height .4s ease; max-height:70px; overflow:hidden}

/* ---- Páginas con hero: la cabecera FLOTA sobre la foto -------------------- */
.tiene-hero .header{
  position:fixed; top:0; left:0; right:0; background:transparent; box-shadow:none;
}
/* Degradado sutil arriba para que el menú se lea sobre cualquier foto */
.tiene-hero .header::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(43,32,27,.58) 0%, rgba(43,32,27,.22) 55%, rgba(43,32,27,0) 100%);
  transition:opacity .4s ease;
}
.tiene-hero .header .nav>.nav__item>a,
.tiene-hero .header .btn-outline{color:#fff}
.tiene-hero .header .nav>.nav__item>a:hover,
.tiene-hero .header .nav>.nav__item>a[aria-current="page"]{border-bottom-color:#fff}
.tiene-hero .header .btn-outline{border-color:rgba(255,255,255,.75)}
.tiene-hero .header .btn-outline:hover{background:#fff; color:var(--cafe); border-color:#fff}
.tiene-hero .infobar{border-color:rgba(255,255,255,.24); color:#fff}
.tiene-hero .infobar a{color:#fff}
/* El hero arranca en el borde superior. El espacio para el menú se calcula desde
   la altura REAL de la cabecera (--alto-cabecera, que fija movimiento.js), no
   desde un número fijo: así encaja en cualquier tamaño de pantalla. */
.tiene-hero .hero{padding-top:calc(var(--alto-cabecera, 196px) + 26px)}
.tiene-hero .hero--int{padding-top:calc(var(--alto-cabecera, 196px) + 16px)}
.tiene-hero .hero__inner{padding-top:8px; padding-bottom:56px}
.tiene-hero .hero--int .hero__inner{padding-top:4px; padding-bottom:48px}

/* ---- Al bajar: barra flotante compacta de vidrio -------------------------- */
/* Al bajar: barra mínima, muy transparente. El blur fuerte homogeneiza lo que
   pasa por detrás, así el texto oscuro se lee tanto sobre las secciones crema
   como sobre las fotos oscuras del slider. */
.header.compacta{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 8px 30px rgba(59,43,37,.10), inset 0 0 0 1px rgba(255,255,255,.45);
}
.header.compacta .header__row{padding:5px 0}
.header.compacta .logo img{width:42px; height:42px}
.header.compacta .infobar{opacity:0; max-height:0; border:0}
.header.compacta .nav{gap:26px}
.header.compacta .nav a{font-size:15px}
.header.compacta .btn-outline{padding:9px 20px; font-size:15px}

/* Píldora centrada y angosta: se despega de los bordes y encoge de verdad */
.tiene-hero .header.compacta{
  top:12px;
  left:max(16px, calc(50% - 545px));
  right:max(16px, calc(50% - 545px));
  border-radius:999px;
}
.tiene-hero .header.compacta::after{opacity:0}
.tiene-hero .header.compacta .header__row{padding:5px 20px}
/* Café (no dorado): sobre el vidrio semitransparente el dorado se pierde
   cuando por detrás pasa una foto oscura. El café mantiene el contraste
   tanto sobre las secciones crema como sobre el slider. */
.tiene-hero .header.compacta .nav>.nav__item>a{color:var(--cafe)}
.tiene-hero .header.compacta .nav>.nav__item>a:hover,
.tiene-hero .header.compacta .nav>.nav__item>a[aria-current="page"]{
  color:var(--rosa-oscuro); border-bottom-color:var(--rosa-oscuro);
}
/* El rosa oscuro sobre el vidrio da 1,38:1 cuando pasa una foto detrás.
   En reposo va en café (4,7:1) y al pasar el mouse se rellena de rosa. */
.tiene-hero .header.compacta .btn-outline,
.header.compacta .btn-outline{color:var(--cafe); border-color:var(--cafe)}
.tiene-hero .header.compacta .btn-outline:hover,
.header.compacta .btn-outline:hover{background:var(--rosa-oscuro); border-color:var(--rosa-oscuro); color:#fff}
.header.compacta .nav>.nav__item>a{color:var(--cafe)}
.header.compacta .burger{color:var(--cafe)}
.tiene-hero .header.compacta .burger{color:var(--cafe)}

/* El panel desplegable siempre es blanco: sus enlaces nunca van en blanco */
.tiene-hero .submenu a,
.tiene-hero .nav.abierto>.nav__item>a{color:var(--rosa-oscuro)}
.tiene-hero .header .burger{color:#fff}
.tiene-hero .header.compacta .burger{color:var(--dorado)}

@media (max-width:760px){
  .tiene-hero .header.compacta{top:8px; left:10px; right:10px}
  .tiene-hero .nav.abierto{border-radius:18px; margin-top:6px}
  /* Cabecera más liviana en pantallas chicas */
  .header__row{padding:12px 0}
  .logo img{width:62px; height:62px}
  .header.compacta .logo img{width:46px; height:46px}
  .infobar__row{padding:9px 0; font-size:13px; gap:3px}
}

.nav{display:flex; align-items:center; gap:34px}
.nav a{font-size:17px; color:var(--dorado); padding:8px 0; border-bottom:2px solid transparent; transition:.2s}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--dorado)}
.nav__item{position:relative}
.nav__item.has-sub>a::after{content:" ⌄"; font-size:14px; opacity:.8}

.submenu{
  position:absolute; top:100%; left:-24px; min-width:280px; background:var(--blanco);
  box-shadow:0 12px 30px rgba(59,43,37,.10); padding:12px 0;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s;
}
.nav__item:hover .submenu{opacity:1; visibility:visible; transform:none}
.submenu a{display:block; padding:13px 26px; color:var(--rosa-oscuro); border:0}
.submenu a:hover{background:var(--crema)}
.submenu .sub2{padding-left:44px; font-size:16px}

.btn-outline{
  display:inline-block; border:1px solid var(--rosa-oscuro); color:var(--rosa-oscuro);
  padding:14px 30px; font-size:17px; transition:.2s; white-space:nowrap; background:none; cursor:pointer;
}
.btn-outline:hover{background:var(--rosa-oscuro); color:var(--blanco)}

.btn-rosa{
  display:inline-block; background:var(--rosa); color:var(--cafe);
  padding:18px 46px; font-size:18px; transition:.2s; border:0; cursor:pointer; font-family:var(--sans);
}
.btn-rosa:hover{background:#dea9b3}

.infobar{border-top:1px solid #eee; border-bottom:1px solid #eee}
.infobar__row{display:flex; align-items:center; justify-content:center; gap:56px; padding:14px 0; font-size:15px}
.infobar__row span{display:flex; align-items:center; gap:10px}

.burger{display:none; background:none; border:0; font-size:26px; color:var(--dorado); cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:86vh; display:flex; align-items:flex-end; justify-content:flex-start;
  text-align:center; color:var(--blanco); overflow:hidden}
/* Hero del inicio: ocupa toda la pantalla, el video llena el viewport.
   100svh usa la altura "pequeña" del viewport: en móvil no salta cuando
   aparece/desaparece la barra del navegador. */
.hero--full{min-height:100vh; min-height:100svh}
.hero__bg{position:absolute; inset:0; z-index:0; background-position:72% 30%; background-size:cover; background-repeat:no-repeat}

/* Video de fondo: cubre igual que la imagen, y queda por ENCIMA del poster
   pero por DEBAJO del velo y del texto. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 30%; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease;
}
.hero__video.lista{opacity:1}
/* Velo oscuro por encima del video, para que el texto blanco se lea */
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(30,22,18,.34) 0%, rgba(30,22,18,.06) 26%, rgba(30,22,18,0) 46%,
                    rgba(30,22,18,.30) 72%, rgba(30,22,18,.72) 100%),
    linear-gradient(90deg, rgba(30,22,18,.42) 0%, rgba(30,22,18,.10) 42%, rgba(30,22,18,0) 70%)}
/* Respeto por quien pide menos movimiento: sin video, solo el poster */
@media (prefers-reduced-motion:reduce){ .hero__video{display:none} }
/* ---- Escala tipográfica del hero -----------------------------------------
   Una sola progresión, todo en Jost, con un único elemento dominante (h-lg).
   Antes: badge 38px por herencia de '.hero p', subtítulo 38px y números en
   serif itálica → cuatro tamaños compitiendo. Ahora hay una jerarquía clara. */
.hero__inner{position:relative; z-index:3; padding:96px 24px}
/* Hero limpio del inicio: contenido abajo-izquierda, editorial */
.hero__inner--limpio{
  width:100%; max-width:var(--max); margin:0 auto; text-align:left;
  padding:0 24px 76px; display:flex; flex-direction:column; align-items:flex-start;
}
.hero__inner--limpio h1{text-align:left}
.hero__inner--limpio .h-lg{letter-spacing:-.02em}
.hero__inner--limpio .hero__sub{margin-left:0; margin-right:0; max-width:34ch}
.hero__kicker{
  margin:0 0 18px; color:#fff; font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.5); position:relative; padding-left:44px;
}
.hero__kicker::before{
  content:""; position:absolute; left:0; top:50%; width:32px; height:1px;
  background:var(--rosa); transform:translateY(-50%);
}
.hero h1{margin:0; font-weight:300; line-height:1.02; text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero .h-sm{
  display:block; font-size:clamp(19px,2.5vw,34px);
  letter-spacing:.005em; opacity:.94;
}
.hero .h-lg{display:block; font-size:clamp(52px,9.4vw,118px); line-height:.98; letter-spacing:-.015em}

/* Subtítulo: clase propia. Antes era '.hero p', que arrastraba al badge. */
.hero__sub{
  margin:20px auto 0; max-width:33ch;
  font-style:italic; font-weight:300;
  font-size:clamp(16px,1.75vw,22px); line-height:1.45;
  color:rgba(255,255,255,.94); text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.hero .btn-rosa{margin-top:30px; padding:15px 40px; font-size:16px; border-radius:999px}
.tiene-hero .header .btn-outline{border-radius:999px; padding:12px 26px; font-size:16px}

/* hero interior (páginas secundarias)
   Las fotos vienen recortadas a 1800x850 con el punto focal (la cara o el
   círculo) al 45% de la altura, así que aquí basta con centrar. */
.hero--int .hero__bg{background-position:center 48%}
.hero--int{min-height:52vh}
.hero--int .hero__inner{padding:80px 24px}
.hero--int h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,6.2vw,72px); line-height:1.06; letter-spacing:-.01em;
}
.hero--int .hero__sub{
  font-size:clamp(16px,1.75vw,21px); margin:14px auto 0; max-width:40ch;
}

/* ---------- SECCIONES ---------- */
.sec{padding:96px 0}
.sec--crema{background:var(--crema)}
.sec__title{text-align:center; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5vw,54px); margin:0 0 56px}
.sec__title--sm{margin-bottom:30px}
.eyebrow{text-align:center; text-transform:uppercase; letter-spacing:.22em;
  font-size:13px; color:var(--bronce); margin:0 0 12px}

.prosa p{margin:0 0 22px; font-size:18px; color:#5c4a42}
.prosa strong{font-weight:500; color:var(--cafe)}
.prosa em{color:var(--bronce)}
.prosa h2,.prosa h3{font-family:var(--serif); font-weight:400; font-size:32px; margin:44px 0 16px; color:var(--cafe)}
.prosa ul{padding-left:22px; margin:0 0 22px; color:#5c4a42}
.prosa li{margin-bottom:10px}
.centro{text-align:center}

/* Tarjetas de servicio */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.card{background:var(--blanco); display:flex; flex-direction:column}
.card__img{aspect-ratio:4/5; overflow:hidden}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{padding:30px 26px 34px; text-align:center; display:flex; flex-direction:column; flex:1}
.card h3{font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 14px}
.card p{margin:0 0 24px; flex:1; color:#5c4a42}
.card .link{color:var(--rosa-oscuro); border-bottom:1px solid var(--rosa-oscuro); padding-bottom:3px; align-self:center}

/* Panel numerado de ceremonias */
.panel{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.panel a{border:1px solid var(--linea); padding:34px 26px; background:var(--blanco); transition:.25s; display:block}
.panel a:hover{border-color:var(--rosa-oscuro); transform:translateY(-4px)}
.panel .num{font-family:var(--serif); font-size:15px; color:var(--bronce); letter-spacing:.18em}
.panel h3{font-family:var(--serif); font-weight:400; font-size:26px; margin:12px 0 6px}
.panel span{font-size:14px; color:#8a7a72; text-transform:uppercase; letter-spacing:.1em}

/* --------------------------------------------------------------------------
   Split con foto fija — para textos largos (Terapias)
   La foto queda pegada mientras se lee la descripción: acompaña todo el
   recorrido en vez de perderse en el primer scroll.
   -------------------------------------------------------------------------- */
/* .split declara align-items:center MÁS ABAJO en este archivo, así que aquí
   se dobla la clase para ganar por especificidad y no depender del orden. */
.split.split--pegado{align-items:start}
.split.split--pegado .retrato{
  position:sticky; top:calc(var(--alto-cabecera, 196px) + 28px);
  /* Arranca a la altura de la primera línea del texto, no del borde del bloque */
  margin-top:6px;
}
@media (max-width:980px){
  .split.split--pegado{grid-template-columns:1fr}
  .split.split--pegado .retrato{
    position:static; max-width:420px; margin:0 auto 10px;
  }
}

/* --------------------------------------------------------------------------
   Banda de imagen — respiro dentro de bloques largos de texto (FAQ)
   -------------------------------------------------------------------------- */
.banda{
  position:relative; max-width:1000px; margin:60px auto; border-radius:24px;
  overflow:hidden; aspect-ratio:16/7.5;
  box-shadow:0 26px 60px rgba(59,43,37,.18);
}
.banda img{
  position:absolute; top:-9%; left:0; width:100%; height:118%;
  object-fit:cover; display:block;
}
.banda::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:3;
  background:linear-gradient(150deg,
    rgba(255,255,255,.8) 0%, rgba(255,255,255,.25) 24%,
    rgba(255,255,255,0) 48%, rgba(255,255,255,0) 60%,
    rgba(196,158,108,.4) 82%, rgba(255,255,255,.75) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.banda::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(43,32,27,.52) 0%, rgba(43,32,27,0) 46%);
}
.banda__pie{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:4;
  border-radius:13px; padding:12px 16px; color:#fff; font-size:13.5px; line-height:1.4;
}
@media (max-width:640px){
  .banda{margin:40px auto; border-radius:18px; aspect-ratio:4/3}
  .banda__pie{left:12px; right:12px; bottom:12px; font-size:12px; padding:10px 12px}
}

/* --------------------------------------------------------------------------
   Ceremonias — paneles expansibles en monocromo
   Interacción distinta a la del slider de servicios: en vez de un fundido a
   pantalla completa, aquí los paneles compiten por el ancho. En reposo van en
   blanco y negro con el título en vertical; el activo se abre, recupera el
   color y despliega su placa de vidrio.
   -------------------------------------------------------------------------- */
.ceremonias{
  display:flex; gap:12px; height:min(64vh,540px); align-items:stretch;
}
.cer{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:22px;
  cursor:pointer; border:0; padding:0; text-align:left; background:var(--cafe);
  transition:flex-grow .75s cubic-bezier(.16,1,.3,1);
  will-change:flex-grow;
}
.cer__foto{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.82);
  transform:scale(1.06);
  transition:filter .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.cer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(43,32,27,.82) 0%, rgba(43,32,27,.28) 46%, rgba(43,32,27,.10) 100%);
  transition:opacity .7s ease;
}
.cer:hover .cer__foto{filter:grayscale(.55) brightness(.88)}

.cer.activa{flex-grow:2.9}
.cer.activa .cer__foto{filter:none; transform:scale(1)}

/* Número arriba */
.cer__num{
  position:absolute; top:20px; left:22px; z-index:3;
  font-family:var(--serif); font-size:14px; letter-spacing:.2em; color:var(--dorado);
}

/* Título vertical mientras está cerrado */
.cer__vert{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--serif); font-size:23px; color:#fff; white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
  transition:opacity .4s ease;
}
.cer.activa .cer__vert{opacity:0; pointer-events:none}

/* Placa de vidrio del panel abierto */
.cer__placa{
  position:absolute; left:20px; right:20px; bottom:20px; z-index:3;
  border-radius:16px; padding:22px 24px; color:#fff;
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease .12s, transform .6s cubic-bezier(.16,1,.3,1) .12s;
  pointer-events:none;
}
.cer.activa .cer__placa{opacity:1; transform:none; pointer-events:auto}
.cer__placa h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.3vw,32px);
  margin:0; line-height:1.1;
}
.cer__placa .sub{
  display:block; margin-top:6px; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
}
.cer__placa .ir{
  display:inline-block; margin-top:16px; font-size:15px; color:#fff;
  border-bottom:1px solid var(--rosa); padding-bottom:3px;
}
.cer__placa .ir:hover{color:var(--rosa)}
.cer:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}

@media (max-width:900px){
  .ceremonias{flex-direction:column; height:auto; gap:10px}
  .cer{flex:none; height:132px; transition:height .7s cubic-bezier(.16,1,.3,1)}
  .cer.activa{height:320px}
  .cer__vert{writing-mode:horizontal-tb; left:22px; transform:none; bottom:22px; font-size:21px}
  .cer__placa{left:16px; right:16px; bottom:16px; padding:18px}
}

/* Sin JS: todos abiertos y en color */
.no-js .cer__foto{filter:none}
.no-js .cer__vert{display:none}
.no-js .cer__placa{opacity:1; transform:none; position:static; margin-top:auto}

/* --------------------------------------------------------------------------
   Banda de cifras — sale del hero para dejar respirar el video
   -------------------------------------------------------------------------- */
.franja-cifras{background:var(--crema); padding:38px 0}
.franja-cifras__fila{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px; align-items:start;
}
.dato{display:flex; flex-direction:column; gap:6px;
  border-left:1px solid var(--linea); padding-left:20px}
.dato svg{width:22px; height:22px; stroke:var(--bronce); fill:none; stroke-width:1.5; margin-bottom:4px; flex:none}
.dato b{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.4vw,30px);
  color:var(--cafe); line-height:1; font-style:italic}
.dato b [data-conteo]{font-size:inherit; font-family:inherit; font-variant-numeric:tabular-nums; font-style:normal}
.dato span{font-size:13.5px; color:#6b5a51; line-height:1.5}
@media (max-width:760px){
  .franja-cifras__fila{grid-template-columns:1fr; gap:22px}
  .dato{border-left:0; border-top:1px solid var(--linea); padding-left:0; padding-top:16px}
  .dato:first-child{border-top:0; padding-top:0}
}

/* -----------------------------------------------------------------------------
   Franja de marca — la luna
   El logo NO rota: lleva el nombre escrito y quedaría torcido. Gira un anillo
   dorado a su alrededor y respira un halo detrás.
   -------------------------------------------------------------------------- */
.franja{background:var(--crema); text-align:center; padding:88px 0}
.franja__luna{
  position:relative; width:120px; height:120px; margin:0 auto 30px;
}
.franja__luna img{
  width:100%; height:100%; border-radius:50%; display:block; position:relative; z-index:2;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
/* Halo: aparece cuando la franja entra en pantalla */
.franja__luna::before{
  content:""; position:absolute; inset:-34%; border-radius:50%; z-index:1;
  background:radial-gradient(circle,
    rgba(232,185,193,.55) 0%, rgba(196,158,108,.26) 42%, rgba(196,158,108,0) 70%);
  opacity:0; transform:scale(.82);
  transition:opacity 1.1s ease .15s, transform 1.4s cubic-bezier(.16,1,.3,1) .15s;
}
[data-anim].visible .franja__luna::before{opacity:1; transform:scale(1)}
/* Anillo que gira: gradiente cónico recortado con máscara, 1px de grosor */
.franja__luna::after{
  content:""; position:absolute; inset:-15px; border-radius:50%; z-index:1; padding:1px;
  background:conic-gradient(from 0deg,
    rgba(196,158,108,0) 0deg, rgba(196,158,108,.7) 55deg,
    rgba(232,185,193,.5) 105deg, rgba(196,158,108,0) 175deg, rgba(196,158,108,0) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:giroLuna 22s linear infinite;
}
@keyframes giroLuna{to{transform:rotate(360deg)}}
.franja__luna:hover img{transform:scale(1.05)}

@media (prefers-reduced-motion:reduce){
  .franja__luna::after{animation:none}
  .franja__luna::before{opacity:1; transform:none}
}
.franja p{max-width:820px; margin:0 auto; font-size:clamp(19px,2.2vw,24px); line-height:1.6}
.franja .firma{margin-top:22px; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--bronce)}

/* Split foto + texto */
.split{display:grid; grid-template-columns:0.85fr 1fr; gap:70px; align-items:center}
.split--inv{grid-template-columns:1fr 0.85fr}
.split h2{font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,48px); margin:0 0 22px}

/* --------------------------------------------------------------------------
   Retrato con marco de vidrio
   Cuarta interacción del sitio: la foto se inclina levemente siguiendo el
   mouse (3D) y su interior se desplaza con el scroll. Marco con el mismo
   borde enmascarado del liquid-glass.
   -------------------------------------------------------------------------- */
.retrato{
  position:relative; border-radius:26px; overflow:hidden;
  aspect-ratio:3/4; width:100%;
  box-shadow:0 28px 64px rgba(59,43,37,.22), 0 4px 12px rgba(59,43,37,.10);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
  will-change:transform;
}
.retrato:hover{box-shadow:0 36px 80px rgba(59,43,37,.28), 0 6px 16px rgba(59,43,37,.12)}
.retrato img{
  position:absolute; top:-14%; left:0;
  width:100%; height:128%; object-fit:cover; display:block;
  will-change:transform;
}
/* Borde de vidrio, misma técnica de máscara que .vidrio */
.retrato::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 22%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 58%,
    rgba(196,158,108,.42) 82%, rgba(255,255,255,.8) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
}
/* Velo cálido inferior para que la placa se lea */
.retrato::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(43,32,27,.58) 0%, rgba(43,32,27,0) 42%);
}
.retrato__placa{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:4;
  border-radius:14px; padding:13px 16px; color:#fff;
  display:flex; flex-direction:column; gap:3px;
}
.retrato__placa strong{font-weight:400; font-size:14.5px; letter-spacing:.01em}
.retrato__placa span{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.78)}

@media (max-width:760px){
  .retrato{border-radius:20px}
  .retrato__placa{left:12px; right:12px; bottom:12px; padding:11px 13px}
  .retrato__placa strong{font-size:13px}
  .retrato__placa span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .retrato{transform:none!important; transition:none}
  .retrato img{transform:none!important}
}

/* Precios */
.precios{display:flex; flex-wrap:wrap; gap:20px; margin:14px 0 26px}
.precio{border:1px solid var(--linea); padding:24px 34px; background:var(--blanco); min-width:230px}
.precio strong{display:block; font-family:var(--serif); font-size:32px; font-weight:400; color:var(--rosa-oscuro)}
.precio span{font-size:15px; color:#8a7a72}

/* Testimonios */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.testi{background:var(--blanco); padding:34px 30px; display:flex; flex-direction:column; border:1px solid var(--linea)}
.testi p{margin:0 0 22px; font-size:16px; color:#5c4a42; flex:1}
.testi__pie{display:flex; align-items:center; gap:14px}
.avatar{width:48px; height:48px; border-radius:50%; background:var(--rosa);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--cafe); flex:none}
.testi__pie strong{display:block; font-weight:400; font-size:15px}
.testi__pie em{font-style:normal; font-size:13px; color:var(--bronce); text-transform:uppercase; letter-spacing:.1em}

/* --------------------------------------------------------------------------
   Slider inmersivo de servicios
   Transición "glass" portada del shader GLSL de lumina-interactive-list,
   ejecutada en WebGL puro (sin Three.js ni GSAP).
   -------------------------------------------------------------------------- */
.slider{
  position:relative; width:100%; height:clamp(520px,76vh,720px);
  overflow:hidden; background:var(--cafe); isolation:isolate;
}
.slider__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Respaldo si no hay WebGL: mismas imágenes con fundido CSS */
.slider__fallback{position:absolute; inset:0}
.slider__fallback img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.slider__fallback img.is-visible{opacity:1}
.tiene-webgl .slider__fallback{display:none}

/* Velo cálido en café de marca (no negro) para que el texto respire */
.slider__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(43,32,27,.80) 0%, rgba(43,32,27,.52) 46%, rgba(43,32,27,.20) 100%),
    linear-gradient(0deg,  rgba(43,32,27,.55) 0%, rgba(43,32,27,0) 42%);
}

.slider__contenido{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  max-width:var(--max); margin:0 auto; padding:0 24px 54px;
  color:var(--blanco); max-inline-size:min(1240px,100%);
}
@media (min-width:1290px){ .slider__contenido{left:50%; transform:translateX(-50%)} }

.slider__contador{
  font-size:14px; letter-spacing:.26em; color:var(--blanco);
  margin:0 0 16px; display:flex; align-items:center; gap:10px;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.slider__contador .sep,
.slider__contador [data-total]{color:var(--blanco)}

.slider__titulo{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(40px,7vw,86px); line-height:1.02;
  text-shadow:0 2px 26px rgba(0,0,0,.34);
}
.slider__titulo span{display:inline-block; will-change:transform,opacity,filter}

.slider__desc{
  max-width:520px; margin:16px 0 0; font-size:clamp(16px,1.7vw,20px);
  line-height:1.6; color:rgba(255,255,255,.86);
  text-shadow:0 1px 14px rgba(0,0,0,.34);
  transition:opacity .5s ease, transform .5s ease;
}
.slider__cta{
  display:inline-block; margin-top:26px; color:var(--blanco); font-size:17px;
  border-bottom:1px solid var(--rosa); padding-bottom:4px; transition:.25s;
}
.slider__cta:hover{color:var(--rosa); border-bottom-color:var(--rosa)}
.slider__cta:focus-visible{outline:2px solid var(--rosa); outline-offset:4px}

/* Navegación lateral con barra de progreso */
.slider__nav{
  position:absolute; top:38px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:row; justify-content:center; gap:42px;
  max-width:calc(100% - 48px);
}
.slider__nav-item{
  background:none; border:0; padding:0; text-align:center; cursor:pointer;
  width:180px; color:rgba(255,255,255,.72); font-family:var(--sans); font-size:19px;
  letter-spacing:.03em; transition:color .3s;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.slider__nav-item:hover{color:var(--blanco)}
.slider__nav-item[aria-current="true"]{color:var(--blanco)}
.slider__nav-item:focus-visible{outline:2px solid var(--rosa); outline-offset:4px}
/* Barra de carga del servicio (patrón slide-progress-line del prompt original).
   Era un <span> sin display:block, así que height y margin no se aplicaban. */
.slider__linea{
  display:block; height:2px; width:100%; margin-bottom:14px; overflow:hidden;
  background:rgba(255,255,255,.26); border-radius:2px;
}
.slider__nav-item[aria-current="true"] .slider__linea{background:rgba(255,255,255,.38)}
.slider__relleno{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--bronce), var(--dorado));
  box-shadow:0 0 10px rgba(196,158,108,.75);
  transition:width .1s linear, opacity .35s ease;
}

@media (max-width:1024px){
  .slider__nav{top:26px; gap:26px}
  .slider__nav-item{width:140px; font-size:16px}
}
@media (max-width:760px){
  .slider{height:clamp(460px,66vh,560px)}
  .slider__velo{background:
    linear-gradient(0deg, rgba(43,32,27,.86) 0%, rgba(43,32,27,.34) 62%, rgba(43,32,27,.24) 100%)}
  .slider__contenido{padding:0 22px 30px}
  .slider__desc{max-width:none; font-size:15px}
  .slider__nav{
    position:static; transform:none; flex-direction:row; max-width:none; gap:12px;
    padding:22px 22px 0; z-index:4;
  }
  .slider__nav-item{flex:1; width:auto; font-size:14px; letter-spacing:.02em}
  .slider__nav .txt{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* --------------------------------------------------------------------------
   Carrusel apilado de testimonios
   Física portada de "carousel-07" (motion/react) a JS nativo:
   mismos divisores, multiplicadores y muelle (stiffness 200 · damping 30).
   -------------------------------------------------------------------------- */
.carrusel{
  position:relative; width:100%; max-width:1240px; margin:0 auto;
  height:560px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; user-select:none; -webkit-user-select:none;
}
.carrusel__drag{position:absolute; inset:0; z-index:50; cursor:grab; touch-action:pan-y}
.carrusel__drag:active{cursor:grabbing}

.tcard{
  position:absolute; width:340px; height:460px; border-radius:18px; overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea);
  box-shadow:0 18px 44px rgba(59,43,37,.13);
  display:flex; flex-direction:column; padding:34px 30px 26px;
  pointer-events:none; will-change:transform,opacity;
}
/* opacity:0 de base — el velo sólo aparece cuando pintar() lo levanta. Si esa
   función no llega a correr (un solo testimonio, JS a medias), la tarjeta se
   ve completa en vez de quedar tapada por una capa crema opaca. */
.tcard__velo{position:absolute; inset:0; background:var(--crema); pointer-events:none; z-index:3; opacity:0}

.tcard__badge{
  position:absolute; top:18px; right:18px; z-index:4;
  background:var(--rosa); color:var(--cafe);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; white-space:nowrap; max-width:62%;
  overflow:hidden; text-overflow:ellipsis;
}

.tcard__comilla{
  font-family:var(--serif); font-size:62px; line-height:.7; color:var(--rosa);
  margin:0 0 6px; flex:none;
}
.tcard__texto{
  flex:1; overflow:hidden; font-size:15px; line-height:1.62; color:#5c4a42;
  margin:0; padding-right:4px;
}
.tcard.is-activa .tcard__texto{overflow-y:auto; scrollbar-width:thin}
.tcard.is-activa .tcard__texto::-webkit-scrollbar{width:4px}
.tcard.is-activa .tcard__texto::-webkit-scrollbar-thumb{background:var(--rosa); border-radius:4px}

.tcard__pie{
  display:flex; align-items:center; gap:13px; flex:none;
  border-top:1px solid var(--linea); padding-top:18px; margin-top:18px;
}
.tcard__pie strong{display:block; font-weight:400; font-size:14px; line-height:1.35; color:var(--cafe)}

/* Controles */
.carrusel__ctrl{display:flex; align-items:center; justify-content:center; gap:26px; margin-top:26px}
.carrusel__flecha{
  width:50px; height:50px; border-radius:50%; border:1px solid var(--rosa-oscuro);
  background:none; color:var(--rosa-oscuro); font-size:24px; line-height:1;
  cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center;
}
.carrusel__flecha:hover{background:var(--rosa-oscuro); color:var(--blanco)}
.carrusel__flecha:focus-visible{outline:2px solid var(--rosa-oscuro); outline-offset:3px}

.carrusel__puntos{display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:320px}
.carrusel__punto{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--rosa); opacity:.42; transition:.25s;
}
.carrusel__punto:hover{opacity:.75}
.carrusel__punto[aria-current="true"]{opacity:1; background:var(--rosa-oscuro); transform:scale(1.4)}
.carrusel__punto:focus-visible{outline:2px solid var(--rosa-oscuro); outline-offset:3px}

.carrusel__pista{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.carrusel__ayuda{text-align:center; font-size:13px; color:var(--bronce); margin:14px 0 0; letter-spacing:.04em}

/* Sin JS: degrada a lista legible */
.no-js .carrusel{height:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; overflow:visible}
.no-js .carrusel__pista{position:static; display:contents}
.no-js .tcard{position:static; width:auto; height:auto; min-height:340px; transform:none!important; opacity:1!important}
.no-js .tcard__velo,.no-js .carrusel__drag,.no-js .carrusel__ctrl,.no-js .carrusel__ayuda{display:none}

@media (prefers-reduced-motion:reduce){
  .tcard{transition:none}
}

@media (max-width:1024px){
  .carrusel{height:500px}
  .tcard{width:290px; height:420px; padding:30px 26px 22px}
  .tcard__texto{font-size:14px}
}
@media (max-width:640px){
  .carrusel{height:430px}
  .tcard{width:246px; height:360px; padding:26px 22px 18px; border-radius:15px}
  .tcard__comilla{font-size:48px}
  .tcard__texto{font-size:13px; line-height:1.55}
  .tcard__pie{gap:10px; padding-top:14px; margin-top:14px}
  .tcard__pie strong{font-size:12.5px}
  .tcard__pie .avatar{width:38px; height:38px; font-size:12px}
  .carrusel__ctrl{gap:16px}
  .no-js .carrusel{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Galería — rejilla editorial + visor de vidrio
   Tercera interacción del sitio, distinta a las otras dos: ni fundido WebGL
   (servicios) ni paneles que compiten por el ancho (ceremonias). Aquí la
   rejilla tiene ritmo y la foto se abre en un visor a pantalla completa.
   -------------------------------------------------------------------------- */
.galeria{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  grid-auto-rows:196px; grid-auto-flow:dense;
}
.galeria__item{
  position:relative; overflow:hidden; border-radius:16px; cursor:zoom-in;
  border:0; padding:0; background:var(--crema); display:block;
}
/* Una de cada siete ocupa el doble: da ritmo sin desordenar */
.galeria__item:nth-child(7n+1){grid-column:span 2; grid-row:span 2}
.galeria__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.galeria__item:hover img,
.galeria__item:focus-visible img{transform:scale(1.06)}
.galeria__item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(43,32,27,.62) 0%, rgba(43,32,27,0) 52%);
  opacity:0; transition:opacity .45s ease;
}
.galeria__item:hover::after,
.galeria__item:focus-visible::after{opacity:1}
.galeria__pie{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  border-radius:11px; padding:9px 13px; color:#fff; font-size:12.5px; line-height:1.35;
  opacity:0; transform:translateY(12px);
  transition:opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
  text-align:left;
}
.galeria__item:hover .galeria__pie,
.galeria__item:focus-visible .galeria__pie{opacity:1; transform:none}
.galeria__item:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}

/* ---- Visor ---- */
.visor{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:76px 24px 96px;
  background:rgba(43,32,27,.72);
  -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%);
  opacity:0; transition:opacity .35s ease;
}
.visor.abierto{display:flex}
.visor.visible{opacity:1}
.visor__img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  opacity:0; transform:scale(.97);
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.visor.visible .visor__img{opacity:1; transform:none}
.visor__cerrar,.visor__nav{
  position:absolute; border:0; cursor:pointer; color:#fff; border-radius:999px;
  display:flex; align-items:center; justify-content:center; transition:.25s;
}
.visor__cerrar{top:20px; right:22px; width:46px; height:46px; font-size:22px; line-height:1}
.visor__nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:26px}
.visor__nav--prev{left:18px}
.visor__nav--next{right:18px}
.visor__cerrar:hover,.visor__nav:hover{background:rgba(255,255,255,.28)}
.visor__cerrar:focus-visible,.visor__nav:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}
.visor__pie{
  position:absolute; left:0; right:0; bottom:26px; text-align:center; color:#fff;
  font-size:14px; padding:0 24px;
}
.visor__pie .cont{
  display:block; font-size:12px; letter-spacing:.24em; color:var(--dorado); margin-bottom:7px;
}

@media (max-width:980px){
  .galeria{grid-template-columns:repeat(3,1fr); grid-auto-rows:168px}
}
@media (max-width:640px){
  .galeria{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; gap:9px}
  .galeria__item:nth-child(7n+1){grid-column:span 2; grid-row:span 2}
  .galeria__pie{font-size:11px; padding:7px 10px; left:8px; right:8px; bottom:8px}
  .visor{padding:64px 12px 84px}
  .visor__nav{width:44px; height:44px; font-size:22px}
  .visor__nav--prev{left:8px} .visor__nav--next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .galeria__item img,.visor,.visor__img,.galeria__pie{transition:none!important}
}

/* FAQ (acordeón nativo, sin JS) */
.faq{max-width:860px; margin:0 auto}
.faq__grupo{margin-bottom:48px}
.faq__grupo>h2{font-family:var(--serif); font-weight:400; font-size:32px; margin:0 0 4px}
.faq__grupo>.sub{font-size:14px; color:var(--bronce); text-transform:uppercase; letter-spacing:.14em; margin:0 0 22px}
details{border-bottom:1px solid var(--linea); padding:4px 0}
summary{cursor:pointer; padding:20px 0; font-size:18px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--rosa-oscuro); font-size:26px; font-weight:300; flex:none}
details[open] summary::after{content:"–"}
details[open] summary{color:var(--rosa-oscuro)}
details p{margin:0 0 22px; color:#5c4a42; font-size:16px}

/* Formulario */
.form{max-width:640px; margin:0 auto}
.form label{display:block; margin-bottom:20px; font-size:15px; color:#5c4a42}
.form input,.form select,.form textarea{
  width:100%; margin-top:8px; padding:14px 16px; border:1px solid var(--linea);
  background:var(--blanco); font-family:var(--sans); font-size:16px; color:var(--cafe);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--rosa); outline-offset:1px}
.form textarea{min-height:130px; resize:vertical}
.form .oculto{position:absolute; left:-9999px}
.form .consent{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:#6b5a52}
.form .consent input{width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--rosa-oscuro)}
.form .consent a{color:var(--rosa-oscuro); text-decoration:underline}
.form .nota{text-align:center; font-size:14px; color:#8a7a72; margin-top:18px}

/* CTA */
.cta{text-align:center; padding:110px 0; background:var(--crema)}
.cta h2{font-weight:300; font-size:clamp(40px,7vw,84px); margin:0 0 10px; line-height:1.05}
.cta p{max-width:660px; margin:0 auto 38px; font-size:clamp(19px,2.4vw,26px)}

/* --------------------------------------------------------------------------
   Pie de página — cierre oscuro con llamada a la acción y redes
   -------------------------------------------------------------------------- */
.pie{background:var(--cafe); color:rgba(255,255,255,.82); padding:72px 0 0; margin-top:0}
.pie__top{
  display:grid; grid-template-columns:1.05fr 1.25fr .95fr; gap:56px; align-items:start;
  padding-bottom:54px;
}
.pie a{color:inherit}

/* Marca */
.pie__marca img{width:76px; height:76px; border-radius:50%; margin-bottom:20px;
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease}
.pie__marca img:hover{transform:translateY(-4px) scale(1.04); box-shadow:0 14px 30px rgba(0,0,0,.32)}
.pie__lema{margin:0 0 24px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); max-width:32ch}
.pie__redes{display:flex; gap:11px}
.pie__redes a{
  width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s;
}
.pie__redes a svg{width:20px; height:20px}
.pie__redes a:hover{transform:translateY(-3px); background:rgba(255,255,255,.2)}
.pie__redes a:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}

/* Navegación */
.pie__nav{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.pie__nav h2{
  margin:0 0 16px; font-family:var(--sans); font-weight:400; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dorado);
}
.pie__nav ul{list-style:none; margin:0; padding:0}
.pie__nav li{margin-bottom:11px}
.pie__nav a{font-size:15px; color:rgba(255,255,255,.78); transition:color .25s, padding-left .25s}
.pie__nav a:hover{color:#fff; padding-left:5px}

/* Tarjeta de contacto */
.pie__cta{border-radius:20px; padding:28px 26px}
.pie__cta h2{
  margin:0 0 10px; font-family:var(--serif); font-weight:400; font-size:29px; color:#fff;
}
.pie__cta p{margin:0 0 20px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.78)}
.pie__btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--whatsapp); color:#fff; border-radius:999px;
  padding:13px 20px; font-size:15px; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  box-shadow:0 6px 20px rgba(37,211,102,.28);
}
.pie__btn svg{width:19px; height:19px; flex:none}
.pie__btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(37,211,102,.4)}
.pie__mail{
  display:block; margin-top:16px; font-size:15px; color:#fff;
  border-bottom:1px solid var(--rosa); padding-bottom:3px; width:fit-content;
}
.pie__mail:hover{color:var(--rosa)}
.pie__horario{margin:16px 0 0!important; font-size:13px; color:rgba(255,255,255,.6)}

/* Barra inferior */
.pie__abajo{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13); padding:22px 24px 26px;
}
.pie__abajo small{font-size:13px; color:rgba(255,255,255,.55)}

@media (max-width:980px){
  .pie__top{grid-template-columns:1fr 1fr; gap:40px}
  .pie__cta{grid-column:1 / -1}
}
@media (max-width:640px){
  .pie{padding-top:52px}
  .pie__top{grid-template-columns:1fr; gap:36px; padding-bottom:38px}
  .pie__nav{gap:28px}
  .pie__abajo{flex-direction:column; align-items:flex-start; gap:8px}
}

/* WhatsApp flotante — con etiqueta que se despliega al pasar el mouse */
.wa{
  position:fixed; right:24px; bottom:24px; z-index:60;
  display:flex; align-items:center; gap:0; height:58px; padding:0 13px;
  border-radius:999px; background:var(--whatsapp); color:#fff;
  box-shadow:0 8px 26px rgba(37,211,102,.36), 0 2px 8px rgba(0,0,0,.18);
  transition:gap .35s cubic-bezier(.16,1,.3,1), box-shadow .3s, transform .3s;
  overflow:hidden;
}
.wa svg{width:31px; height:31px; fill:#fff; flex:none}
.wa .wa__txt{
  max-width:0; opacity:0; white-space:nowrap; font-size:15px; letter-spacing:.01em;
  transition:max-width .38s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.wa:hover,.wa:focus-visible{gap:11px; transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.44)}
.wa:hover .wa__txt,.wa:focus-visible .wa__txt{max-width:210px; opacity:1}
.wa::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulsoWa 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes pulsoWa{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){ .wa::after{animation:none} }
@media (max-width:600px){ .wa{right:16px; bottom:16px} .wa:hover .wa__txt{max-width:0; opacity:0} }

/* --- Píldora y cifras del hero (liquid glass) ----------------------------- */
/* Píldora: el escalón más bajo de la escala. La especificidad extra la protege
   de '.hero p' y de cualquier regla de párrafo del hero. */
/* Mismo tamaño y centrado que la barra de correo y horario, justo debajo. */
.hero .hero__badge{
  display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  padding:4px 14px 4px 4px; margin:0 0 26px;
  color:rgba(255,255,255,.94); font-size:15px;
  font-style:normal; font-weight:300; line-height:1.4; letter-spacing:0;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.hero .hero__badge .chip{
  background:#fff; color:var(--cafe); border-radius:999px; flex:none;
  padding:3px 11px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}

/* Cifras: mismo tipo que el resto del hero (antes iban en serif itálica) */
.hero__cifras{display:flex; justify-content:center; gap:14px; margin:36px 0 0; flex-wrap:wrap}
.cifra{
  border-radius:18px; padding:17px 20px; width:222px; text-align:left; color:#fff;
  cursor:default; transition:background .4s ease, transform .4s cubic-bezier(.16,1,.3,1),
                              box-shadow .4s ease;
}
/* Al pasar el mouse el vidrio se oscurece: el texto blanco gana contraste */
.cifra.vidrio:hover, .cifra.vidrio:focus-visible{
  background:rgba(43,32,27,.52);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(43,32,27,.34), inset 0 1px 1px rgba(255,255,255,.16);
  outline:none;
}
.cifra.vidrio:hover svg, .cifra.vidrio:focus-visible svg{opacity:1}
.cifra.vidrio:hover .cifra__txt, .cifra.vidrio:focus-visible .cifra__txt{color:rgba(255,255,255,.95)}

.cifra svg{width:21px; height:21px; stroke:#fff; fill:none; stroke-width:1.5; margin-bottom:11px; opacity:.85; transition:opacity .4s}
.cifra b{
  display:block; font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:clamp(23px,2.2vw,29px); line-height:1; letter-spacing:-.01em;
}
.cifra b [data-conteo]{font-variant-numeric:tabular-nums}
.cifra .cifra__txt{
  display:block; font-size:12px; margin-top:6px; color:rgba(255,255,255,.8);
  line-height:1.4; transition:color .4s;
}

@media (max-width:600px){
  .hero__cifras{gap:10px; margin-top:28px}
  .cifra{width:calc(50% - 5px); padding:14px 13px; border-radius:15px}
  .cifra svg{width:18px; height:18px; margin-bottom:8px}
  .cifra span{font-size:11px}
  .hero .hero__badge{gap:8px; padding:4px 12px 4px 4px; margin-bottom:20px}
  .hero .hero__badge .chip{font-size:9.5px; padding:3px 9px; letter-spacing:.1em}
  .hero .btn-rosa{margin-top:24px; padding:13px 32px; font-size:15px}
  .hero__sub{margin-top:16px}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .cards,.testis{grid-template-columns:repeat(2,1fr)}
  .panel{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .split,.split--inv{grid-template-columns:1fr; gap:40px}
  .infobar__row{gap:24px; flex-direction:column}
}
@media (max-width:760px){
  .burger{display:block}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--blanco);
    flex-direction:column; align-items:flex-start; gap:0; padding:14px 24px 24px;
    box-shadow:0 14px 30px rgba(59,43,37,.12); max-height:74vh; overflow-y:auto}
  .nav.abierto{display:flex}
  .nav a{padding:14px 0; width:100%}
  .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding:0 0 0 16px}
  .header__row .btn-outline{display:none}
  .cards,.testis,.panel{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .sec{padding:64px 0}
  .hero{min-height:70vh}
}

/* --------------------------------------------------------------------------
   Aviso de cookies — lo inyecta analitica.js, y SOLO si GA4 está activo.
   -------------------------------------------------------------------------- */
.cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  max-width:560px; margin:0 auto; border-radius:18px; padding:18px 20px;
  background:rgba(43,32,27,.94); color:#fff;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 18px 44px rgba(43,32,27,.32);
  opacity:0; transform:translateY(18px);
  transition:opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.cookies.visible{opacity:1; transform:none}
.cookies p{margin:0 0 14px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.9)}
.cookies a{color:var(--rosa); border-bottom:1px solid var(--rosa)}
.cookies__btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.cookies__no{
  background:none; border:1px solid rgba(255,255,255,.45); color:#fff;
  border-radius:999px; padding:10px 18px; font-size:14px; cursor:pointer;
  font-family:var(--sans); transition:.25s;
}
.cookies__no:hover{background:rgba(255,255,255,.15)}
.cookies .btn-rosa{padding:10px 22px; font-size:14px; border-radius:999px}
@media (max-width:600px){
  .cookies{left:10px; right:10px; bottom:10px; padding:16px}
  .cookies__btns{justify-content:stretch}
  .cookies__btns>*{flex:1}
}