@font-face{font-family:'Young Serif';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/young-serif.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2')}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/yellowtail-400.woff2') format('woff2')}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/dancing-script.woff2') format('woff2')}

:root{
  --rose-900:#b66368;
  --rose-800:#ca7579;
  --rose-700:#d28489;
  --rose-500:#dfa4a7;
  --rose-300:#ebc1c3;
  --rose-100:#f8e2e4;
  --blush-50:#f8dbdc;
  --cream:#fae5e6;
  --ink:#43301f;
  --ink-soft:#7d6353;
  --white:#ffffff;
  --shadow:0 18px 40px rgba(202,117,121,.13);
  --radius-lg:26px;
  --radius-md:16px;
  --radius-full:999px;
  --font-script:'Dancing Script', cursive;
  --font-serif:'Young Serif', Georgia, serif;
  --font-sans:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); color:var(--ink);
  background:var(--cream); overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
.container{max-width:1240px; margin:0 auto; padding:0 24px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-weight:700; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--radius-full);
  border:none; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--rose-800); color:#fff; box-shadow:0 10px 24px rgba(202,117,121,.3); padding-right:9px}
.btn-primary svg{width:26px; height:26px; padding:6px; border-radius:50%; background:#fff; color:var(--rose-800); box-sizing:border-box; margin-left:4px}
.btn-primary:hover{background:var(--rose-900); transform:translateY(-1px)}
.btn-outline{background:#fff; color:var(--rose-900); border:1.5px solid var(--rose-300)}
.btn-outline:hover{border-color:var(--rose-900); transform:translateY(-1px)}
.btn-white{background:#fff; color:var(--rose-900)}
.btn-white:hover{transform:translateY(-1px)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--rose-800); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px;
}
.section-title{font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,3.6vw,42px); line-height:1.18; margin:0 0 14px; color:var(--ink)}
.section-title .accent{color:var(--rose-800)}
.section-sub{color:var(--ink-soft); font-size:16px; line-height:1.6; max-width:620px}
.divider-heart{display:flex; align-items:center; gap:10px; margin:10px 0 14px}
.divider-heart::before,.divider-heart::after{content:"";flex:0 0 34px;height:1px;background:var(--rose-500)}
.divider-heart svg{width:14px;height:14px;color:var(--rose-800)}

/* ---------- Topbar (continuous ticker) ---------- */
.topbar{background:var(--rose-900); color:#fff; font-size:13px; overflow:hidden; height:38px}
.tb-mobile{display:none}
.tb-mobile .tb-tel{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; color:#fff}
.tb-mobile .tb-tel svg{width:16px; height:16px}
.tb-social{display:flex; gap:16px}
.tb-social a{display:flex; color:#fff}
.tb-social svg{width:17px; height:17px}
.tb-marquee{display:flex; align-items:center; height:38px; width:max-content; animation:tbScroll 42s linear infinite}
.topbar:hover .tb-marquee{animation-play-state:paused}
/* ticker en peso fino, con las palabras clave en negrita para que resalten */
.tb-item{display:inline-block; white-space:nowrap; font-weight:300; letter-spacing:.02em}
.tb-item b{font-weight:600}
.tb-item i{font-style:normal; opacity:.7; font-size:10px; margin:0 22px; position:relative; top:-1px}
@keyframes tbScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .tb-marquee{animation:none} }

/* ---------- Header / Nav flotante ----------
   Pildora fija: cotizar | logo centrado | iconos + hamburguesa.
   Se oculta al bajar y reaparece al subir (JS en header.php). */
.site-header{position:sticky; top:12px; z-index:60; height:96px; margin:12px 0 -108px; padding:0 14px;
  transition:transform .34s ease, opacity .26s ease}
.site-header.nav-hidden{transform:translateY(-160%); opacity:0; pointer-events:none}
.site-header .container{position:relative; display:flex; align-items:center; justify-content:space-between;
  height:96px; background:#fffcfc; border-radius:30px; padding:0 22px;
  box-shadow:0 18px 44px rgba(182,99,104,.18)}
.logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; line-height:1}
.logo img{height:84px; width:auto}
.main-nav{display:none}   /* el menu completo vive en el panel lateral */
.hdr-left,.hdr-right{display:flex; align-items:center; gap:14px}
.hdr-cotiza{display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:15px; color:var(--ink)}
.hdr-cotiza .hdr-ico{width:48px; height:48px; border-radius:50%; background:var(--rose-100); color:var(--rose-800);
  display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s, transform .18s}
.hdr-cotiza .hdr-ico svg{width:22px; height:22px}
.hdr-cotiza:hover .hdr-ico{background:var(--rose-800); color:#fff; transform:translateY(-2px)}
.hdr-sep{width:1px; height:36px; background:var(--rose-100); flex:0 0 auto}
.hdr-cotiza-wrap{position:relative}
.hdr-cotiza{background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-sans)}
.hdr-caret{width:15px; height:15px; color:var(--rose-800); transition:transform .25s ease; margin-left:-2px}
.hdr-cotiza-wrap.open .hdr-caret{transform:rotate(180deg)}
.hdr-cotiza-menu{position:absolute; top:calc(100% + 16px); left:0; min-width:252px; z-index:70;
  background:rgba(255,250,250,.75); -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7); border-radius:18px; padding:8px;
  box-shadow:0 18px 44px rgba(182,99,104,.22), inset 0 1px 0 rgba(255,255,255,.85);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.97); transform-origin:top left;
  transition:opacity .22s ease, transform .28s cubic-bezier(.16,.8,.3,1), visibility .28s}
.hdr-cotiza-wrap.open .hdr-cotiza-menu{opacity:1; visibility:visible; transform:none}
.hdr-cotiza-menu a{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:12px;
  font-weight:600; font-size:14px; color:var(--ink); transition:background .15s, color .15s}
.hdr-cotiza-menu a svg{width:19px; height:19px; color:var(--rose-800); flex:0 0 auto}
.hdr-cotiza-menu a:hover{background:var(--rose-800); color:#fff}
.hdr-cotiza-menu a:hover svg{color:#fff}
.hdr-icons{display:flex; align-items:center; gap:10px}
.hdr-icons a{width:44px; height:44px; border-radius:50%; background:var(--rose-100); color:var(--rose-800);
  display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s, transform .18s}
.hdr-icons a:hover{background:var(--rose-800); color:#fff; transform:translateY(-2px)}
.hdr-icons svg{width:19px; height:19px}
.nav-toggle{width:52px; height:52px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:var(--rose-500); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .18s}
.nav-toggle svg{width:24px; height:24px; color:#fff}
.nav-toggle:hover{background:var(--rose-800); transform:scale(1.06)}
.nav-toggle:focus-visible,.hdr-icons a:focus-visible,.hdr-cotiza:focus-visible{outline:3px solid var(--rose-500); outline-offset:3px}
@media(max-width:980px){
  .site-header{height:78px; margin-bottom:-90px; padding:0 10px}
  .site-header .container{height:78px; border-radius:24px; padding:0 14px}
  .logo img{height:62px}
  .hdr-cotiza span:not(.hdr-ico){display:none}
  .hdr-cotiza .hdr-ico{width:44px; height:44px}
  .hdr-icons a{width:40px; height:40px}
  .nav-toggle{width:46px; height:46px}
}
@media(max-width:760px){ .hdr-icons,.hdr-sep{display:none} }

/* ---------- Liquid glass (nav + tarjeta de ocasiones) ----------
   Vidrio esmerilado con borde de luz; si el navegador no soporta
   backdrop-filter quedan los fondos solidos de arriba. */
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header .container{
    background:rgba(255,250,250,.55);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);
    backdrop-filter:blur(20px) saturate(1.7);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 18px 44px rgba(182,99,104,.16),
               inset 0 1px 0 rgba(255,255,255,.85),
               inset 0 -1px 0 rgba(255,255,255,.25);
  }
  .occ-card{
    background:rgba(253,238,239,.5);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    backdrop-filter:blur(22px) saturate(1.6);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 16px 40px rgba(202,117,121,.15),
               inset 0 1px 0 rgba(255,255,255,.8);
  }
}

/* ---------- Animaciones de carga y reveal ---------- */
@keyframes aInUp{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@keyframes aInLeft{from{opacity:0; transform:translateX(-46px)} to{opacity:1; transform:none}}
@keyframes aInRight{from{opacity:0; transform:translateX(60px)} to{opacity:1; transform:none}}
@keyframes aDrop{from{opacity:0; transform:translateY(-28px)} to{opacity:1; transform:none}}
/* los personajes levitan y se mecen; --stage-y conserva el offset base del stage */
@keyframes stageFloat{
  0%,100%{transform:translateY(var(--stage-y)) rotate(0deg)}
  25%    {transform:translateY(calc(var(--stage-y) - 7px)) rotate(.55deg)}
  50%    {transform:translateY(calc(var(--stage-y) - 10px)) rotate(0deg)}
  75%    {transform:translateY(calc(var(--stage-y) - 6px)) rotate(-.55deg)}
}
@media(prefers-reduced-motion:no-preference){
  .site-header{animation:aDrop .7s cubic-bezier(.16,.8,.3,1) .12s backwards}
  .hero-stage{animation:aInRight .85s cubic-bezier(.16,.8,.3,1) .34s backwards,
    stageFloat 8s ease-in-out 1.4s infinite}
  .occ-card{animation:aInUp .75s cubic-bezier(.16,.8,.3,1) .5s backwards}
  .page-hero .container > *{animation:aInUp .7s cubic-bezier(.16,.8,.3,1) .2s backwards}
  .page-hero .container > *:nth-child(2){animation-name:aInRight; animation-delay:.34s}
}
/* .rv lo agrega el JS solo a lo que esta bajo el pliegue: sin JS nada queda oculto */
.rv{opacity:0; transform:translateY(30px); transition:opacity .65s ease, transform .65s cubic-bezier(.16,.8,.3,1)}
.rv-in{opacity:1; transform:none}

/* ---------- Hero ---------- */
.hero{position:relative; padding:120px 0 46px; overflow:hidden; background:#f9dedf}
@media(max-width:980px){ .hero{padding-top:102px} }
.hero-shapes{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-blob{display:none}
.hero-deco{position:absolute; z-index:3; color:var(--rose-700); pointer-events:none; filter:drop-shadow(0 3px 6px rgba(182,99,104,.18))}
.hd-sparkle-1{width:30px;height:30px; left:20.5%; top:8%; color:var(--rose-500); animation:twinkle 3.2s ease-in-out infinite}
.hd-sparkle-2{width:22px;height:22px; left:83%; top:14%; color:var(--rose-500); animation:twinkle 2.6s ease-in-out .8s infinite}
/* los corazones suben como globos: nacen abajo y se desvanecen arriba */
.hd-heart-1{width:42px;height:42px; left:80%; top:64%; animation:floatUp 12s linear infinite}
.hd-heart-2{width:27px;height:27px; left:1.5%; top:74%; animation:floatUp 15s linear 2.2s infinite}
.hd-heart-3{width:33px;height:33px; left:57%; top:80%; animation:floatUp 13.5s linear 4.5s infinite}
.hd-heart-4{width:22px;height:22px; left:52%; top:90%; animation:floatUp 17s linear 1.1s infinite}
.hd-heart-5{width:29px;height:29px; left:92%; top:60%; animation:floatUp 14s linear 6.3s infinite}
.hd-heart-6{width:24px;height:24px; left:37%; top:84%; animation:floatUp 16s linear 3.4s infinite}
.hd-heart-7{width:31px;height:31px; left:70%; top:94%; animation:floatUp 12.8s linear 5.6s infinite}
.hd-heart-8{width:19px;height:19px; left:31%; top:70%; animation:floatUp 18s linear 7.8s infinite}
.hd-sparkle-3{width:20px;height:20px; left:64%; top:12%; color:var(--rose-500); animation:twinkle 3.8s ease-in-out 1.4s infinite}
.hd-sparkle-4{width:24px;height:24px; left:88%; top:56%; color:var(--rose-500); animation:twinkle 3.0s ease-in-out 2.2s infinite}
.hd-sparkle-5{width:18px;height:18px; left:33%; top:44%; color:var(--rose-500); animation:twinkle 3.4s ease-in-out .3s infinite}
.hd-dotted{width:260px;height:140px; left:6%; bottom:2%; color:var(--rose-300)}
@keyframes floatUp{
  0%  {transform:translateY(30px) translateX(0) rotate(-6deg) scale(.85); opacity:0}
  10% {opacity:.95}
  35% {transform:translateY(-110px) translateX(14px) rotate(6deg) scale(1)}
  70% {transform:translateY(-250px) translateX(-10px) rotate(-4deg) scale(1.03); opacity:.9}
  100%{transform:translateY(-400px) translateX(6px) rotate(8deg) scale(1.06); opacity:0}
}
@keyframes twinkle{
  0%,100%{transform:scale(.8); opacity:.7}
  50%    {transform:scale(1.18); opacity:1}
}
@media(prefers-reduced-motion:reduce){ .hero-deco{animation:none !important} }
@media(max-width:980px){
  /* fuera los corazones que caerian sobre la columna de texto */
  .hd-dotted, .hd-heart-2, .hd-heart-4, .hd-heart-6, .hd-heart-8, .hd-sparkle-1, .hd-sparkle-5{display:none}
  .hd-heart-1{width:30px;height:30px} .hd-heart-3{width:24px;height:24px}
  .hd-heart-5{width:22px;height:22px} .hd-heart-7{width:22px;height:22px}
}
.hero .container{position:relative; z-index:2; display:grid; grid-template-columns:0.88fr 1.12fr; gap:0; align-items:center}
.hero-copy .eyebrow{font-family:var(--font-sans)}
.hero-copy h1{font-family:var(--font-serif); font-weight:600; font-size:clamp(40px,5.6vw,64px); line-height:0.96; margin:0 0 6px; color:var(--ink)}
.hero-copy h1 .line2{color:var(--rose-800); display:block}
.hero-copy p{color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:420px; margin:12px 0 18px}
.hero-img{position:relative}
/* el escenario define el tamano real de la ilustracion... */
.hero-stage{--stage-y:-30px; position:relative; width:134%; max-width:none; margin-left:-9%; margin-right:-25%; aspect-ratio:1491/1055; transform:translateY(var(--stage-y)); transform-origin:50% 92%}
/* ...y el area de recorte se estira 45vw a la derecha, para que el corte del slider
   caiga SIEMPRE fuera de la pantalla y no se vea el borde recto al salir la imagen */
.hero-slides{position:absolute; top:0; bottom:0; left:0; right:-45vw; overflow:hidden}
/* Slider del hero: cada personaje SALE por un lado y el siguiente ENTRA por ese mismo lado.
   Sin JS queda el primer slide visible (is-active viene puesto en el HTML). */
.hero-slides img, .hero-slides video{
  position:absolute; top:0; left:0; height:100%; width:calc(100% - 45vw);
  object-fit:contain; object-position:center bottom;
  transform:translateX(112%);
  transition:transform .62s cubic-bezier(.7,0,.9,.25);   /* salida: arranca lento, se va disparado */
  will-change:transform;
}
.hero-slides img.is-active, .hero-slides video.is-active{
  transform:translateX(0);
  /* entrada: rapida y frena al llegar. El retardo deja salir antes a la anterior */
  transition:transform .72s cubic-bezier(.14,.8,.3,1) .42s;
}
.hero-slides{touch-action:pan-y; cursor:grab}
.hero-slides:active{cursor:grabbing}

/* copys: uno por slide, apilados en la misma celda.
   El bloque solo desliza suave; el protagonismo lo tiene la entrada
   escalonada de los hijos (copyIn: sube + blur -> nitido). */
.hero-copy{display:grid; grid-template-rows:auto auto; position:relative}
.hero-slide-copy{grid-row:1; grid-column:1; opacity:0; transform:translateX(-28px); pointer-events:none;
  transition:opacity .38s ease, transform .42s cubic-bezier(.7,0,.9,.25)}
.hero-slide-copy.is-active{opacity:1; transform:none; pointer-events:auto;
  transition:opacity .5s ease .44s, transform .66s cubic-bezier(.14,.8,.3,1) .44s}
@keyframes copyIn{
  from{opacity:0; transform:translateY(30px); filter:blur(8px)}
  to  {opacity:1; transform:none; filter:none}
}
.hero-slide-copy > *{opacity:0; transition:opacity .3s ease}
.hero-slide-copy.is-active > *{animation:copyIn .65s cubic-bezier(.16,.8,.3,1) both}
.hero-slide-copy.is-active > *:nth-child(1){animation-delay:.42s}
.hero-slide-copy.is-active > *:nth-child(2){animation-delay:.54s}
.hero-slide-copy.is-active > *:nth-child(3){animation-delay:.66s}
.hero-slide-copy.is-active > *:nth-child(4){animation-delay:.78s}
.hero-slide-copy.is-active > *:nth-child(5){animation-delay:.9s}
.hero-copy .hero-h{font-family:var(--font-serif); font-weight:600; font-size:clamp(40px,5.6vw,64px); line-height:0.96; margin:0 0 6px; color:var(--ink)}
.hero-copy p.hero-h{max-width:none}   /* que el titulo no herede el max-width de los <p> */
.hero-copy .hero-h .line2{color:var(--rose-800); display:block}

/* manejadores */
/* flechas + puntos juntos debajo de la ilustracion, sin taparla */
/* los controles viven en la columna del texto, debajo del boton */
.hero-controls{grid-row:2; grid-column:1; justify-self:start; z-index:6;
  display:flex; align-items:center; gap:15px; margin-top:20px}
.hero-arrow{width:38px; height:38px; border-radius:50%; cursor:pointer; padding:0;
  background:transparent; color:var(--rose-800); border:1.5px solid rgba(202,117,121,.45);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s, border-color .18s}
.hero-arrow svg{width:15px; height:15px}
.hero-arrow:hover{background:var(--rose-800); border-color:var(--rose-800); color:#fff}
.hero-arrow:focus-visible{outline:3px solid var(--rose-500); outline-offset:2px}
.hero-prev svg{transform:rotate(180deg)}

.hero-dots{display:flex; align-items:center; gap:7px}
.hero-dots button{width:20px; height:4px; padding:0; border:none; border-radius:99px; cursor:pointer;
  background:rgba(202,117,121,.32); transition:background .25s, width .25s}
.hero-dots button:hover{background:rgba(202,117,121,.6)}
.hero-dots button.is-active{background:var(--rose-800); width:34px}
.hero-dots button:focus-visible{outline:3px solid var(--rose-500); outline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .hero-slides img, .hero-slides video, .hero-slide-copy{transition:none}
  .hero-slide-copy > *{animation:none !important; opacity:1; transition:none}
  .hero-slide-copy{opacity:0}
  .hero-slide-copy.is-active{opacity:1}
}
@media(max-width:980px){
  .hero-arrow{width:36px; height:36px}
  .hero-controls{gap:13px}
}
@media(max-width:980px){ .hero-stage{width:100%; margin:0} }
@media(max-width:980px){
  .hero .container{grid-template-columns:1fr; text-align:center}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-copy .divider-heart{justify-content:center}
}

/* ---------- Trust bar ---------- */
.trust-bar{position:relative; z-index:1; background:#fdebec; border-radius:var(--radius-lg); box-shadow:0 10px 26px rgba(202,117,121,.08); margin:34px auto 0; padding:26px 10px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:0}
.trust-item{display:flex; align-items:center; justify-content:center; gap:14px; padding:0 14px; border-right:1px solid #efd2d3; white-space:nowrap; min-width:0}
.trust-item:last-child{border-right:none}
.trust-item strong,.trust-item span{white-space:nowrap}
.trust-item .ico{width:54px; height:54px; border-radius:50%; background:var(--rose-100); color:var(--rose-800); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.trust-item .ico svg{width:25px;height:25px}
.trust-item strong{display:block; font-size:15px; color:var(--ink); font-weight:700}
.trust-item span{font-size:13.5px; color:var(--ink-soft)}
@media(max-width:900px){
  .trust-bar{grid-template-columns:repeat(2,1fr); gap:18px 10px; padding:24px}
  .trust-item{border-right:none; padding:0}
}

/* ---------- Ocasiones ---------- */
.occasions{padding:0 0 22px; text-align:center; background:linear-gradient(180deg,#f9dedf 0%, #fae5e6 100%)}
.occasions .section-title{max-width:780px; margin-left:auto; margin-right:auto}
.occ-card{position:relative; z-index:5; background:#fdeced; border-radius:var(--radius-lg); box-shadow:0 16px 40px rgba(202,117,121,.16); padding:26px 26px 24px; margin:-58px -24px 0}
.occ-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:0 0 22px}
.occ-item a{display:block}
/* el orbe es el sistema de referencia: circulo al centro, los dos arcos girando a su alrededor */
.occ-orb{--orb:104px; --arc:208px; position:relative; display:block; width:var(--orb); height:var(--orb); margin:50px auto 36px}
.occ-circle{width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--rose-700); box-shadow:0 10px 20px rgba(202,117,121,.22); transition:transform .18s}
.occ-item.occ-light .occ-circle{background:var(--rose-300); box-shadow:0 10px 20px rgba(202,117,121,.14)}
/* iconos burbuja: la imagen ES el circulo completo */
.occ-item.occ-bubble .occ-circle{background:none; box-shadow:0 12px 24px rgba(202,117,121,.25)}
.occ-item.occ-bubble .occ-circle img{width:100%; height:100%}
.occ-item a:hover .occ-circle{transform:translateY(-8px) scale(1.07); box-shadow:0 18px 30px rgba(202,117,121,.34)}
/* seleccion de ocasion: la elegida salta, las demas se atenuan */
.occ-item{transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1)}
.occ-grid.has-sel .occ-item{opacity:.42; transform:scale(.92)}
.occ-grid.has-sel .occ-item.is-sel{opacity:1; transform:scale(1.07) translateY(-6px)}
.occ-grid.has-sel .occ-item.is-sel .occ-circle{box-shadow:0 18px 34px rgba(202,117,121,.4)}
/* panel de opciones: se despliega bajo el grid */
.occ-panel{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.16,.8,.3,1), opacity .35s ease}
.occ-panel.open{grid-template-rows:1fr; opacity:1}
.occ-panel-clip{overflow:hidden; min-height:0}
.occ-pc{padding:6px 4px 18px}
.occ-q{font-family:var(--font-serif); font-size:21px; margin:8px 0 16px; color:var(--ink)}
.occ-q b{color:var(--rose-800); font-weight:600}
.occ-opts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
@keyframes chipIn{from{opacity:0; transform:translateY(18px) scale(.9)} to{opacity:1; transform:none}}
.occ-pc.pop .occ-opt{animation:chipIn .5s cubic-bezier(.16,.8,.3,1) both}
.occ-pc.pop .occ-opt:nth-child(1){animation-delay:.05s}
.occ-pc.pop .occ-opt:nth-child(2){animation-delay:.13s}
.occ-pc.pop .occ-opt:nth-child(3){animation-delay:.21s}
.occ-pc.pop .occ-opt:nth-child(4){animation-delay:.29s}
.occ-pc.pop .occ-opt:nth-child(5){animation-delay:.37s}
.occ-opt{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:var(--radius-full);
  background:#fff; border:1.5px solid var(--rose-300); color:var(--rose-900); font-weight:600; font-size:14px;
  transition:background .18s, color .18s, transform .18s, box-shadow .18s}
.occ-opt svg{width:17px; height:17px}
.occ-opt:hover{background:var(--rose-800); border-color:var(--rose-800); color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(202,117,121,.3)}
.occ-opt-wa{background:var(--rose-800); border-color:var(--rose-800); color:#fff}
.occ-opt-wa:hover{background:#1faa55; border-color:#1faa55}
@media(prefers-reduced-motion:reduce){
  .occ-item, .occ-panel{transition:none}
  .occ-pc.pop .occ-opt{animation:none}
}
/* hover: el circulo salta, el icono crece y los rotulos giran alrededor */
.occ-circle{transition:transform .3s cubic-bezier(.34,1.5,.64,1), box-shadow .3s ease}
.occ-circle img{transition:transform .38s cubic-bezier(.34,1.5,.64,1)}
.occ-item a:hover .occ-circle img{transform:scale(1.14) rotate(-7deg)}
.occ-arc{transition:transform .55s cubic-bezier(.34,1.2,.64,1)}
.occ-item a:hover .occ-arc-top{transform:rotate(-8deg)}
.occ-item a:hover .occ-arc-bot{transform:rotate(8deg)}
.occ-arc text{transition:fill .3s ease}
.occ-item a:hover .occ-arc-top text{fill:var(--rose-900)}
.occ-item a:hover .occ-arc-bot text{fill:var(--rose-800)}
/* anillo que se abre al pasar el mouse */
.occ-orb::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--rose-500); opacity:0; transform:scale(.86); pointer-events:none;
  transition:opacity .32s ease, transform .5s cubic-bezier(.34,1.4,.64,1)}
.occ-item a:hover .occ-orb::after{opacity:.6; transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .occ-circle, .occ-circle img, .occ-arc, .occ-orb::after{transition:none}
  .occ-item a:hover .occ-arc-top, .occ-item a:hover .occ-arc-bot{transform:none}
}
.occ-circle img{width:56%; height:56%; object-fit:contain}
.occ-label-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.occ-sub{display:none}
.occ-arc{position:absolute; left:50%; top:50%; width:var(--arc); height:var(--arc); margin-left:calc(var(--arc) / -2); margin-top:calc(var(--arc) / -2); overflow:visible; pointer-events:none}
.occ-arc text{font-family:var(--font-sans); fill:var(--ink)}
.occ-arc-top text{font-size:16.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase}
.occ-arc-bot text{font-size:13.5px; font-weight:400; fill:#6b5341}
@media(max-width:1180px){ .occ-orb{--orb:88px; --arc:178px; margin:44px auto 30px} }
@media(max-width:900px){
  .occ-grid{grid-template-columns:repeat(3,1fr); gap:10px}
  .occ-card{padding:20px 18px 26px}
  .occ-orb{--orb:96px; --arc:194px; margin:48px auto 34px}
}
@media(max-width:520px){ .occ-grid{grid-template-columns:repeat(2,1fr)} .occ-orb{--orb:92px; --arc:186px} }

/* ---------- Cada detalle ---------- */
.detail{position:relative; padding:60px 0 40px; margin-top:8px}
.detail::before{content:"";position:absolute; inset:0; background:#f5ced0; z-index:0}
/* onda superior, como en el diseño */
.detail::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:130px; z-index:1;
  background:var(--cream);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,40 C1230,112 1040,120 830,86 C620,52 380,26 170,64 C100,77 46,92 0,104 Z' fill='black'/></svg>") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,40 C1230,112 1040,120 830,86 C620,52 380,26 170,64 C100,77 46,92 0,104 Z' fill='black'/></svg>") no-repeat center/100% 100%;
}
.detail-title{display:flex; flex-direction:column; line-height:1.1}
.detail-title .l1{color:var(--rose-800)}
.detail-title .l2{color:var(--ink)}
.divider-detail{max-width:230px; margin:14px 0 20px}
.divider-detail::before,.divider-detail::after{flex:0 0 66px}
.detail .container{position:relative; z-index:2}   /* por encima de la onda decorativa (::after, z-index:1) */
.detail .detail-grid{display:grid; grid-template-columns:0.86fr 1.14fr; gap:24px; align-items:center; padding-top:26px}
.detail-copy .section-title{font-style:normal; margin-bottom:10px}
.detail-copy .section-sub{margin-bottom:18px}
.detail-copy .section-title em{font-family:var(--font-script); font-weight:600; font-style:normal; color:var(--rose-800); font-size:1.12em; line-height:1.35; margin-top:2px}
.detail-photos{position:relative; height:352px}
.detail-photos img{position:absolute; width:222px; height:286px; object-fit:cover; border-radius:3px; border:13px solid #fff; border-bottom-width:15px; box-shadow:0 16px 30px rgba(90,35,40,.18)}
.detail-photos img:nth-child(1){left:0; top:40px; transform:rotate(-6deg); z-index:1}
.detail-photos img:nth-child(2){left:206px; top:2px; transform:rotate(1.5deg); z-index:3}
.detail-photos img:nth-child(3){left:412px; top:36px; transform:rotate(6.5deg); z-index:2}
.detail-photos .deco-heart{position:absolute; color:var(--rose-500); z-index:3; pointer-events:none}
.detail-photos .deco-heart.h1{width:22px; height:22px; right:-6px; top:-14px}
.detail-photos .deco-heart.h2{width:14px; height:14px; right:20px; top:20px}
@media(max-width:980px){
  .detail .container{grid-template-columns:1fr}
  .detail-photos{height:auto; display:flex; gap:14px; justify-content:center; margin-top:20px}
  .detail-photos img{position:static; width:31%; height:220px; transform:none !important}
  .detail-photos .deco-heart{display:none}
}

/* ---------- Inspiración ---------- */
.inspiration{position:relative; padding:30px 0 44px; background:var(--blush-50); overflow:hidden}
.inspiration .head{position:static; text-align:center; margin-bottom:24px}
.insp-flourish{position:absolute; top:16px; width:min(300px,22vw); height:100px; color:var(--rose-300); opacity:.9; pointer-events:none}
.insp-flourish-l{left:8px}
.insp-flourish-r{right:8px}
@media(max-width:1100px){ .insp-flourish{display:none} }
/* mosaico irregular como el mockup: alturas y anchos distintos, esquinas muy redondeadas */
.insp-grid{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:44px; gap:12px; align-items:stretch}
.insp-grid a{border-radius:18px; overflow:hidden; position:relative; display:block}
.insp-grid img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.insp-grid a:hover img{transform:scale(1.06)}
.insp-grid a:nth-child(1){grid-column:1/3;  grid-row:3/8}
.insp-grid a:nth-child(2){grid-column:3/5;  grid-row:1/5}
.insp-grid a:nth-child(3){grid-column:3/5;  grid-row:5/10}
.insp-grid a:nth-child(4){grid-column:5/8;  grid-row:1/9}
.insp-grid a:nth-child(5){grid-column:8/10; grid-row:2/6}
.insp-grid a:nth-child(6){grid-column:8/10; grid-row:6/10}
.insp-grid a:nth-child(7){grid-column:10/12;grid-row:1/6}
.insp-grid a:nth-child(8){grid-column:10/12;grid-row:6/9}
.inspiration .more{text-align:center; margin-top:32px}
@media(max-width:900px){
  .insp-grid{grid-template-columns:repeat(6,1fr); grid-auto-rows:60px}
  .insp-grid a:nth-child(n){grid-column:auto; grid-row:auto}
  .insp-grid a:nth-child(1){grid-column:span 3; grid-row:span 3}
  .insp-grid a:nth-child(2){grid-column:span 3; grid-row:span 2}
  .insp-grid a:nth-child(3){grid-column:span 3; grid-row:span 2}
  .insp-grid a:nth-child(4){grid-column:span 6; grid-row:span 4}
  .insp-grid a:nth-child(5){grid-column:span 3; grid-row:span 3}
  .insp-grid a:nth-child(6){grid-column:span 3; grid-row:span 3}
  .insp-grid a:nth-child(7){grid-column:span 3; grid-row:span 3}
  .insp-grid a:nth-child(8){grid-column:span 3; grid-row:span 3}
}

/* ---------- Plan feature sections ---------- */
.plan-section{padding:90px 0 14px}
.plan-section:last-of-type{padding-bottom:0}
.plan-card{position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:10px; background:linear-gradient(120deg,var(--rose-100) 0%, var(--blush-50) 100%); border-radius:var(--radius-lg); overflow:visible; margin:0 auto; min-height:360px}
.plan-card.reverse{grid-template-columns:1fr 1fr}
.plan-card.reverse .plan-copy{order:2}
.plan-card.reverse .plan-img{order:1}
.plan-copy{padding:36px 40px; align-self:center}
.plan-copy .section-title{margin-bottom:14px; font-size:clamp(24px,2.8vw,32px)}
.plan-copy .eyebrow{margin-bottom:4px}
.plan-copy .eyebrow::after{content:""; display:inline-block; width:70px; height:1px; background:var(--rose-300); margin-left:6px; vertical-align:middle}
.plan-features{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:0 0 30px}
.plan-features li{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink)}
.plan-features li svg{width:20px; height:20px; color:var(--rose-800); flex:0 0 auto}
.plan-icon-row{display:flex; gap:0; margin:0 0 22px; padding-top:16px; border-top:1px solid rgba(182,99,104,.15)}
.plan-icon-row li{display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-size:12px; font-weight:600; color:var(--ink-soft); line-height:1.3; padding-right:16px; margin-right:16px; border-right:1px solid rgba(182,99,104,.15)}
.plan-icon-row li:last-child{border-right:none; padding-right:0; margin-right:0}
.plan-icon-row li > svg{width:30px; height:30px; flex:0 0 auto; display:block; color:var(--rose-800)}
@media(max-width:900px){ .plan-icon-row{flex-wrap:wrap; justify-content:center; text-align:center} .plan-icon-row li{align-items:center} }
/* la ilustración se sale por arriba del cuadro, como en el diseño */
.plan-img{padding:0; align-self:end; display:flex; align-items:flex-end; justify-content:center; position:relative; z-index:2; margin-top:-110px}
.plan-img img{width:118%; max-width:none; height:auto; object-fit:contain; display:block}
@media(max-width:900px){
  .plan-card,.plan-card.reverse{grid-template-columns:1fr; min-height:0}
  .plan-card.reverse .plan-copy{order:1}
  .plan-card.reverse .plan-img{order:2}
  .plan-copy{padding:30px 24px; text-align:center}
  .plan-features{grid-template-columns:1fr; justify-items:center}
  .plan-img{max-width:300px; margin:0 auto; min-height:0; height:auto}
  .plan-img img{width:100%; height:auto; max-width:100%}
}

/* ---------- Planes todo incluido (precios reales) ---------- */
.pricing{padding:40px 0 56px; text-align:center; background:linear-gradient(180deg, var(--cream) 0%, #f7d4d6 100%)}
.pricing .head{margin-bottom:30px}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:start; border-radius:20px; overflow:visible; background:#fdf0f1}
.price-card{background:var(--blush-50); border-right:1px solid rgba(182,99,104,.1); padding:32px 26px 30px; text-align:left; transition:transform .18s, box-shadow .18s}
.price-card:first-child{border-radius:20px 0 0 20px}
.price-card:last-child{border-right:none; border-radius:0 20px 20px 0}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{background:linear-gradient(160deg,var(--rose-800),#b65055); color:#fff; box-shadow:var(--shadow); border-radius:22px; padding:40px 28px 38px; margin:-14px 0; position:relative; z-index:1}
.price-card .tag{font-family:var(--font-serif); font-size:19px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); display:block}
.price-card.featured .tag{color:#fff}
.price-card .n-people{font-size:13px; color:var(--ink-soft); margin:6px 0 16px}
.price-card.featured .n-people{color:var(--rose-100)}
.price-card .price{font-family:var(--font-serif); font-size:28px; font-weight:700; margin:0 0 4px}
.price-card .price small{font-size:13px; font-weight:600; opacity:.7}
.price-card ul{margin:18px 0 26px; display:flex; flex-direction:column; gap:9px}
.price-card ul li{font-size:13px; display:flex; gap:8px; align-items:flex-start; color:var(--ink-soft)}
.price-card ul li svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--rose-500)}
.price-card.featured ul li{color:#f3d9da}
.price-card.featured ul li svg{color:#ffd9db}
.price-card .btn{width:100%; justify-content:center; background:var(--rose-100); color:var(--rose-900); box-shadow:none}
.price-card .btn:hover{background:var(--rose-300)}
.price-card.featured .btn{background:#fff; color:var(--rose-900)}
/* movil: los planes en carrusel horizontal con swipe (scroll-snap) */
/* anchos intermedios (tablet / ventana angosta): cuadricula 2x2, nada de carrusel */
@media(min-width:641px) and (max-width:980px){
  .price-grid{grid-template-columns:repeat(2,1fr); gap:14px; background:transparent}
  .price-card{border-right:none; border-radius:20px !important;
    box-shadow:0 6px 18px rgba(182,99,104,.1)}
  .price-card.featured{margin:0}
}
/* celulares: carrusel horizontal con swipe */
@media(max-width:640px){
  .price-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    padding:14px 6px 22px; background:transparent; -webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .price-grid::-webkit-scrollbar{display:none}
  .price-card{flex:0 0 78%; max-width:320px; scroll-snap-align:center; border-right:none;
    border-radius:20px !important; margin:0 !important; box-shadow:0 6px 18px rgba(182,99,104,.1)}
  .price-card.featured{margin:0 !important}
}
.pricing-note{max-width:640px; margin:40px auto 0; color:var(--ink-soft); font-size:14.5px; line-height:1.6}
.pricing-note a{color:var(--rose-900); font-weight:700; text-decoration:underline}

/* ---------- CTA band (diseño definitivo, el de home-b) ----------
   Textura original del tema retro (skin3) y festón de semicírculos COMPLETOS de
   130px que se tocan en la base. El festón es un ::before enmascarado, no un
   degradado de fondo, para que comparta la misma textura de la banda; su mosaico
   arranca desplazado 64px (la altura a la que sube) y así no se ve la línea de
   corte en la unión. Sobre el rosa claro el texto va en el marrón de marca. */
.cta-band{position:relative; color:var(--ink); padding:32px 0; margin-top:26px;
  background:url('../img/body-tail-1.png') repeat}
.cta-band::before{
  content:""; position:absolute; top:-64px; left:0; right:0; height:65px; display:block;
  background:url('../img/body-tail-1.png') repeat 0 64px;
  -webkit-mask:radial-gradient(circle at 65px 65px, #000 64.5px, transparent 65px) 0 0/130px 65px repeat-x;
  mask:radial-gradient(circle at 65px 65px, #000 64.5px, transparent 65px) 0 0/130px 65px repeat-x;
}
.cta-band h3, .cta-band p{color:var(--ink)}
.cta-band .btn-white{background:#fff; color:var(--rose-900)}
.cta-band .container{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-left:9%; padding-right:24px}
.cta-band-text{display:flex; align-items:center; gap:16px}
.cta-band-text .ico{width:auto; height:auto; border-radius:0; background:none; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.cta-band-text .ico svg{width:30px;height:30px}
.cta-band-text h3{font-family:var(--font-serif); font-size:24px; margin:0 0 4px}
.cta-band-text p{margin:0; opacity:.92; font-size:14.5px}
.cta-band-actions{display:flex; align-items:center; gap:14px}
.wa-round{position:relative; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,.18)}
.wa-round svg{width:26px;height:26px; color:#fff}
.wa-badge{position:absolute; top:-3px; right:-3px; width:18px; height:18px; border-radius:50%; background:#e63950; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #d9a3a1}

/* ---------- Footer ---------- */
.site-footer{background:#33241a; color:#f3e3dc; padding:64px 0 26px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
.footer-col h4{font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--rose-300); margin:0 0 18px}
.footer-col p, .footer-col li{font-size:14px; line-height:1.75; color:#e6d3ca}
.footer-col a:hover{color:#fff; text-decoration:underline}
.footer-logo-img{height:44px; width:auto; margin-bottom:16px; background:#fdf0f1; border-radius:10px; padding:10px 16px}
.footer-social{display:flex; gap:12px; margin-top:16px}
.footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center}
.footer-social svg{width:16px;height:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:46px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#c9b3a9}
@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(3,1fr); gap:30px 20px}
  .footer-col:first-child{grid-column:1 / -1; text-align:center}
  .footer-col:first-child .footer-social{justify-content:center}
  .footer-col:first-child .footer-logo-img{margin-left:auto; margin-right:auto}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:repeat(3,1fr); gap:24px 14px}
  .footer-col h4{font-size:11.5px; letter-spacing:.06em}
  .footer-col{font-size:12px; line-height:1.5}
  .footer-col:last-child{grid-column:1 / -1; text-align:center}
}

/* ---------- Mobile nav drawer ---------- */
/* Drawer lateral: overlay con fade, panel desliza desde la derecha,
   links en cascada. Cerrado usa visibility (no display) para poder animar. */
.mobile-drawer{position:fixed; inset:0; background:rgba(43,26,23,.5); z-index:100;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .45s}
.mobile-drawer.open{opacity:1; visibility:visible; transition:opacity .35s ease}
.mobile-drawer-panel{position:absolute; top:0; right:0; width:82%; max-width:340px; height:100%;
  background:#fff; padding:26px 22px; overflow-y:auto;
  transform:translateX(105%); transition:transform .45s cubic-bezier(.16,.8,.3,1)}
.mobile-drawer.open .mobile-drawer-panel{transform:none}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mobile-drawer-panel{background:rgba(255,252,252,.82);
    -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7)}
}
.mobile-drawer-panel a{display:block; padding:13px 4px; font-weight:600; font-size:15px; border-bottom:1px solid #f4e3e4}
/* cascada: cada link entra con fade + deslizamiento; sin delay al cerrar */
.mobile-drawer-panel > a, .mobile-drawer-panel .drawer-social{opacity:0; transform:translateX(30px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.16,.8,.3,1)}
.mobile-drawer.open .mobile-drawer-panel > a, .mobile-drawer.open .drawer-social{opacity:1; transform:none}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(1){transition-delay:.1s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(2){transition-delay:.15s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(3){transition-delay:.2s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(4){transition-delay:.25s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(5){transition-delay:.3s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(6){transition-delay:.35s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(7){transition-delay:.4s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(8){transition-delay:.45s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(9){transition-delay:.5s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(10){transition-delay:.55s}
.mobile-drawer.open .mobile-drawer-panel > a:nth-of-type(11){transition-delay:.6s}
.mobile-drawer.open .drawer-social{transition-delay:.68s}
.mobile-drawer-close{background:none; border:none; float:right; font-size:26px; color:var(--rose-900); cursor:pointer;
  transition:transform .25s ease}
.mobile-drawer-close:hover{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){
  .mobile-drawer, .mobile-drawer-panel, .mobile-drawer-panel > a, .mobile-drawer-panel .drawer-social{transition:none}
}


/* ============ MOVIL: maquetacion del mockup ============ */
@media(max-width:980px){
  /* la franja superior queda igual que en escritorio (el ticker) */
  /* .tb-mobile (telefono + redes) queda en el HTML por si se quiere reactivar */

  /* hero APILADO y centrado: texto grande arriba, ilustracion debajo */
  .hero{padding:102px 0 26px}
  .hero .container{grid-template-columns:1fr; text-align:center; gap:0; align-items:center; padding:0 16px}
  .hero-copy h1, .hero-copy .hero-h{font-size:clamp(38px,11vw,50px); line-height:0.98}
  .hero-copy .eyebrow{font-size:12.5px; letter-spacing:.12em; margin-bottom:8px; justify-content:center; display:flex}
  .hero-copy p{font-size:15px; line-height:1.5; margin:12px auto 16px; max-width:340px}
  .hero-copy .divider-heart{justify-content:center; margin:8px auto 10px}   /* auto: el bloque tiene max-width inline */
  /* en movil el bloque no desliza lateralmente (se percibia descentrado): solo fade */
  .hero-slide-copy{transform:none}
  .hero-slide-copy.is-active{transform:none}

  /* CTA final centrado y en columna */
  .cta-band .container{flex-direction:column; text-align:center; gap:16px; padding:0 22px}
  .cta-band-text{flex-direction:column; gap:10px}
  .cta-band-text h3{font-size:21px; line-height:1.25}
  .cta-band-actions{justify-content:center; width:100%}
  /* el corazon divisor de "Cada detalle" bien centrado */
  .detail-copy .divider-heart{justify-content:center; margin-left:auto; margin-right:auto}

  /* titulos de seccion centrados en movil */
  .section-title{text-align:center}
  .section-sub{text-align:center; margin-left:auto; margin-right:auto}
  .eyebrow{display:flex; justify-content:center; text-align:center}
  .divider-heart{justify-content:center; margin-left:auto; margin-right:auto}
  .detail-copy, .plan-copy{text-align:center}
  .detail-copy .btn, .plan-copy .btn{margin-left:auto; margin-right:auto}
  .hero-copy .divider-heart::before,.hero-copy .divider-heart::after{flex-basis:30px}
  .hero-copy .btn{font-size:12.5px; padding:13px 9px 13px 22px}
  .hero-copy .btn svg{width:24px; height:24px; padding:5px}
  .hero-controls{justify-self:center; margin-top:16px; gap:13px}
  .hero-stage{--stage-y:0px; width:88%; margin:14px auto 0}
  .hero-slides{right:-45vw}

  /* ocasiones: las 5 burbujas en UNA linea, sin subtitulo */
  .occ-card{margin:-34px 0 0; padding:16px 8px 18px; border-radius:20px}
  .occ-grid{grid-template-columns:repeat(6,1fr); gap:3px; margin-bottom:6px}
  .occ-orb{--orb:48px; --arc:98px; margin:24px auto 4px}
  .occ-arc-bot{display:none}
  .occ-sub{display:none}
  .occasions .btn{font-size:11px; padding:11px 8px 11px 18px}
  .occasions .btn svg{width:22px; height:22px; padding:5px}

  /* cada detalle: fotos en fila bajo el texto */
  .detail{padding:34px 0 26px}
  .detail::after{height:76px}
  .detail-copy .section-title{font-size:clamp(21px,6.1vw,28px)}
  .detail .section-sub{font-size:13px; line-height:1.5}
  .detail .btn{font-size:11px; padding:11px 18px}
  .divider-detail{max-width:170px; margin:8px 0 12px}
  .divider-detail::before,.divider-detail::after{flex-basis:44px}
  .inspiration .section-title, .pricing .section-title{font-size:clamp(21px,6.1vw,28px)}
  .detail .detail-grid{grid-template-columns:1fr; gap:6px; padding-top:10px}
  .detail-photos{height:auto; display:flex; gap:8px; justify-content:center; margin-top:16px}
  .detail-photos img{position:static; width:32%; height:150px; border-width:7px; border-bottom-width:9px; transform:none !important}
  .detail-photos img:nth-child(2){margin-top:-8px}

  /* confianza: 4 en fila, icono arriba y texto debajo */
  .trust-bar{grid-template-columns:repeat(4,1fr); gap:0; padding:16px 4px; margin-top:22px}
  .trust-item{flex-direction:column; text-align:center; gap:7px; padding:0 5px; white-space:normal; border-right:1px solid #efd2d3}
  .trust-item:last-child{border-right:none}
  .trust-item strong,.trust-item span{white-space:normal}
  .trust-item .ico{width:38px; height:38px}
  .trust-item .ico svg{width:18px; height:18px}
  .trust-item strong{font-size:11px; line-height:1.25}
  .trust-item span{font-size:10px; line-height:1.25}

  /* planes: siguen en dos columnas, con las caracteristicas en lista vertical */
  .plan-section{padding:36px 0 10px}
  .plan-card, .plan-card.reverse{grid-template-columns:1.04fr .96fr; gap:0}
  .plan-copy{padding:22px 14px 22px 18px; text-align:left}
  .plan-copy .section-title{font-size:clamp(19px,5.2vw,26px); margin-bottom:10px}
  .plan-copy .eyebrow{font-size:10.5px}
  .plan-copy .eyebrow::after{width:34px}
  .plan-icon-row{flex-direction:column; gap:9px; padding-top:12px; margin-bottom:18px}
  .plan-icon-row li{flex-direction:row; align-items:center; gap:9px; text-align:left; font-size:11px; border-right:none; padding:0; margin:0}
  .plan-icon-row li > svg{width:22px; height:22px}
  .plan-copy .btn{font-size:11px; padding:11px 8px 11px 16px}
  .plan-copy .btn svg{width:22px; height:22px; padding:5px}
  /* munecos de los planes bien grandes en movil: scale NO infla el layout
     (con width% el grid se ensancha y empuja la pagina fuera del viewport) */
  /* width 126% inflaba el track del grid -> scroll lateral en 390px (Alejo 08-10).
     Ahora: ancho 100% (no infla el layout) + scale para el tamaño; el recorte lo
     hace la SECCION, no la columna, para que el muñeco se vea completo. */
  .plan-section{overflow-x:clip}
  .plan-img{margin-top:-20px; max-width:none; align-self:center}
  .plan-img img{width:100%; max-width:100%; transform:scale(1.3); transform-origin:50% 50%}
}
@media(max-width:520px){
  .occ-grid{grid-template-columns:repeat(6,1fr)}
  .occ-orb{--orb:44px; --arc:90px; margin:22px auto 4px}
  .occ-arc-top text{font-size:20px}
}


/* ---------- Botones flotantes (WhatsApp + llamada) ---------- */
.float-cta{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:12px}
.float-cta a{position:relative; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.22); transition:transform .16s, box-shadow .16s}
.float-cta a:hover{transform:translateY(-2px) scale(1.05); box-shadow:0 12px 26px rgba(0,0,0,.28)}
.float-cta a:focus-visible{outline:3px solid #fff; outline-offset:3px}
.float-cta svg{width:27px; height:27px; color:#fff}
.float-cta span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.fc-wa{background:#25D366}
.fc-tel{background:var(--rose-800)}
.fc-wa::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:fcPulse 2.6s ease-out infinite}
@keyframes fcPulse{0%{transform:scale(1); opacity:.7} 70%{transform:scale(1.5); opacity:0} 100%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .fc-wa::after{animation:none} }
@media(max-width:980px){
  .float-cta{right:14px; bottom:14px; gap:10px}
  .float-cta a{width:50px; height:50px}
  .float-cta svg{width:24px; height:24px}
}

/* ---------- Menu movil: telefono y redes ---------- */
.drawer-social{margin-top:20px; padding-top:16px; border-top:1px solid #f4e3e4}
.mobile-drawer-panel .drawer-tel{display:flex; align-items:center; gap:10px; padding:8px 4px;
  font-weight:700; font-size:15px; color:var(--rose-900); border-bottom:none}
.drawer-tel svg{width:18px; height:18px; flex:0 0 auto}
.drawer-redes{display:flex; gap:12px; margin-top:14px; padding-left:2px}
.mobile-drawer-panel .drawer-redes a{width:42px; height:42px; padding:0; border-bottom:none;
  border-radius:50%; background:var(--rose-100); color:var(--rose-900);
  display:flex; align-items:center; justify-content:center}
.mobile-drawer-panel .drawer-redes a:hover{background:var(--rose-300)}
.drawer-redes svg{width:19px; height:19px}

/* ================================================================
   PAGINAS INTERNAS  (hero de seccion, tablas, pasos, FAQ, etc.)
   ================================================================ */

/* ---------- Hero de pagina interna ---------- */
.page-hero{position:relative; background:#f9dedf; overflow:hidden; padding:120px 0 30px}
.page-hero .container{position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:10px; align-items:center; min-height:404px}
.page-hero-shapes{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.page-hero .hero-copy{padding:34px 0 26px}
.page-hero h1{font-family:var(--font-serif); font-weight:600; font-size:clamp(30px,4.4vw,50px); line-height:1.02; margin:0 0 4px; color:var(--ink)}
.page-hero h1 .line2{color:var(--rose-800); display:block}
.page-hero .lead{color:var(--ink-soft); font-size:16px; line-height:1.6; max-width:470px; margin:12px 0 20px}
.page-hero-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.page-hero .hero-img{position:relative}
.page-hero .illus{width:112%; max-width:none; margin-left:-6%; height:auto; display:block; filter:drop-shadow(0 20px 34px rgba(158,82,88,.16))}

/* precio de arranque, al lado de los botones */
.price-pill{display:inline-flex; flex-direction:column; line-height:1.15; padding:9px 18px; border-radius:var(--radius-full); background:#fff; box-shadow:0 8px 20px rgba(202,117,121,.14)}
.price-pill span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
.price-pill strong{font-family:var(--font-serif); font-size:19px; color:var(--rose-900)}

/* ---------- Migas ---------- */
.crumbs{font-size:12.5px; color:#8a6a67; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.crumbs a{color:#8a6a67}
.crumbs a:hover{color:var(--rose-900); text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--rose-900); font-weight:600}

/* ---------- Secciones genericas ---------- */
.sec{padding:58px 0}
.sec-tight{padding:40px 0}
.sec-alt{background:var(--blush-50)}
.sec-white{background:#fff}
.head-center{text-align:center; max-width:760px; margin:0 auto 36px}
.head-center .eyebrow{display:inline-flex}
.head-center .section-sub{margin-left:auto; margin-right:auto}
.head-center .divider-heart{justify-content:center; max-width:200px; margin:8px auto 14px}
.prose{color:var(--ink-soft); font-size:15.5px; line-height:1.75; max-width:760px}
.prose p{margin:0 0 16px}
.prose a{color:var(--rose-900); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.prose strong{color:var(--ink)}
.sec-cta{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* ---------- Tarjetas de "que incluye" ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat-card{background:#fff; border-radius:var(--radius-md); padding:26px 24px 24px; box-shadow:0 10px 26px rgba(202,117,121,.09); transition:transform .18s, box-shadow .18s}
.feat-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(202,117,121,.16)}
.feat-card .ico{width:52px; height:52px; border-radius:50%; background:var(--rose-100); color:var(--rose-900); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.feat-card .ico svg{width:25px; height:25px}
.feat-card h3{font-family:var(--font-serif); font-weight:600; font-size:19px; margin:0 0 8px; color:var(--ink)}
.feat-card p{margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft)}
@media(max-width:900px){ .feat-grid{grid-template-columns:1fr 1fr; gap:12px} .feat-card{padding:20px 18px} }
@media(max-width:560px){ .feat-grid{grid-template-columns:1fr} }

/* ---------- Pasos ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative}
.steps::before{content:""; position:absolute; top:26px; left:12%; right:12%; height:2px;
  background:repeating-linear-gradient(90deg,var(--rose-300) 0 6px,transparent 6px 14px)}
.step{position:relative; text-align:center; padding:0 8px}
.step .num{position:relative; z-index:1; width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--rose-800); color:#fff; font-family:var(--font-serif); font-size:22px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(202,117,121,.26)}
.step h3{font-family:var(--font-serif); font-weight:600; font-size:17px; margin:0 0 6px; color:var(--ink)}
.step p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
@media(max-width:820px){
  .steps{grid-template-columns:1fr 1fr; gap:26px 12px}
  .steps::before{display:none}
}
@media(max-width:460px){ .steps{grid-template-columns:1fr; text-align:left}
  .step{display:grid; grid-template-columns:54px 1fr; gap:14px; text-align:left; padding:0}
  .step .num{margin:0} }

/* ---------- Tablas ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); box-shadow:0 10px 26px rgba(202,117,121,.09)}
.tbl{width:100%; border-collapse:collapse; background:#fff; min-width:520px}
.tbl th,.tbl td{padding:14px 18px; text-align:left; font-size:14px; border-bottom:1px solid #f2dbdc}
.tbl thead th{background:var(--rose-800); color:#fff; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-bottom:none}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:nth-child(even) td{background:#fdf5f5}
.tbl td:first-child{font-weight:600; color:var(--ink)}
.tbl td{color:var(--ink-soft)}
.tbl .val{font-family:var(--font-serif); font-size:16px; color:var(--rose-900); white-space:nowrap}
.tbl-note{font-size:13px; color:var(--ink-soft); margin:14px 0 0; line-height:1.6}

/* ---------- Lista con check (dietas, coberturas) ---------- */
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:0}
.check-grid li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--ink-soft)}
.check-grid li svg{width:19px; height:19px; flex:0 0 auto; margin-top:2px; color:var(--rose-800)}
.check-grid li b{color:var(--ink); font-weight:700}
@media(max-width:700px){ .check-grid{grid-template-columns:1fr} }

/* ---------- Bloque partido (texto + imagen) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center}
.split.reverse .split-media{order:-1}
.split-media img{border-radius:var(--radius-lg); box-shadow:0 18px 36px rgba(90,35,40,.16); width:100%; height:340px; object-fit:cover}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:26px} .split.reverse .split-media{order:0} .split-media img{height:250px} }

/* ---------- Cobertura ---------- */
.cover-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cover-card{background:#fff; border-radius:var(--radius-md); padding:22px 20px; box-shadow:0 10px 24px rgba(202,117,121,.08)}
.cover-card .pin{width:38px; height:38px; border-radius:50%; background:var(--rose-100); color:var(--rose-900); display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.cover-card .pin svg{width:19px; height:19px}
.cover-card h3{font-family:var(--font-serif); font-weight:600; font-size:17px; margin:0 0 6px; color:var(--ink)}
.cover-card p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
@media(max-width:900px){ .cover-grid{grid-template-columns:1fr 1fr; gap:12px} }
@media(max-width:480px){ .cover-grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin:0 auto}
.faq-item{background:#fff; border-radius:14px; margin-bottom:12px; box-shadow:0 6px 18px rgba(202,117,121,.08); overflow:hidden}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 54px 18px 22px; position:relative;
  font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.45}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:2px solid var(--rose-800); border-bottom:2px solid var(--rose-800);
  transform:rotate(45deg); transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq-item summary:hover{color:var(--rose-900)}
.faq-item .faq-body{padding:0 22px 20px; font-size:14.5px; line-height:1.7; color:var(--ink-soft)}
.faq-item .faq-body p{margin:0}
.faq-item .faq-body a{color:var(--rose-900); font-weight:600; text-decoration:underline}

/* ---------- Servicios relacionados ---------- */
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.rel-card{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border-radius:var(--radius-md); padding:18px 20px;
  box-shadow:0 8px 20px rgba(202,117,121,.08); transition:transform .16s, box-shadow .16s}
.rel-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(202,117,121,.16)}
.rel-card b{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4}
.rel-card span{font-size:12.5px; color:var(--ink-soft); display:block; margin-top:3px; font-weight:400}
.rel-card .go{width:32px; height:32px; border-radius:50%; background:var(--rose-100); color:var(--rose-900);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.rel-card .go svg{width:15px; height:15px}
@media(max-width:900px){ .rel-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .rel-grid{grid-template-columns:1fr} }

/* ---------- Ajustes moviles del hero interno ---------- */
@media(max-width:980px){
  .page-hero{padding:102px 0 18px}
  .page-hero .container{grid-template-columns:1.1fr .9fr; gap:6px; min-height:0; padding:0 16px}
  .page-hero .hero-copy{padding:20px 0 16px}
  .page-hero h1{font-size:clamp(21px,6.1vw,32px); line-height:1.04}
  .page-hero .crumbs{font-size:10.5px; gap:5px; margin-bottom:9px}
  .page-hero .lead{font-size:12.5px; line-height:1.45; margin:8px 0 14px; max-width:none}
  .page-hero .divider-heart{margin:6px 0 8px}
  .page-hero .divider-heart::before,.page-hero .divider-heart::after{flex-basis:26px}
  .page-hero-actions{gap:9px}
  .page-hero .btn{font-size:11px; padding:11px 8px 11px 16px}
  .page-hero .btn svg{width:22px; height:22px; padding:5px}
  .page-hero .btn-outline{padding:11px 16px}
  .price-pill{padding:7px 14px}
  .price-pill span{font-size:9px}
  .price-pill strong{font-size:15px}
  .page-hero .illus{width:126%; margin-left:-16%}

  .sec{padding:34px 0}
  .sec-tight{padding:26px 0}
  .head-center{margin-bottom:22px}
  .sec .section-title, .head-center .section-title{font-size:clamp(21px,6.1vw,28px)}
  .prose{font-size:14px; line-height:1.7}
  .sec .btn{font-size:11px; padding:11px 8px 11px 16px}
  .sec .btn svg{width:22px; height:22px; padding:5px}
  .sec .btn-outline{padding:11px 16px}
  .tbl th,.tbl td{padding:11px 13px; font-size:13px}
  .faq-item summary{font-size:14px; padding:15px 46px 15px 17px}
  .faq-item .faq-body{font-size:13.5px; padding:0 17px 17px}
}


/* Slider en pausa: solo el slide del video (pedido 08-06); revertir junto al flag SOLO_PRIMER_SLIDE de index.php */
.hero-controls{display:none}

/* ---------- Footer: mega-bloque de enlaces SEO (08-10) ---------- */
.footer-mega{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px;
  padding-bottom:36px; margin-bottom:40px; border-bottom:1px solid rgba(243,227,220,.16)}
.footer-mega h4{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#d9b39a; margin:0 0 12px}
.footer-mega ul{display:flex; flex-direction:column; gap:8px}
.footer-mega a{color:#f3e3dc; opacity:.82; font-size:14px; transition:opacity .15s}
.footer-mega a:hover{opacity:1}
/* siempre 3 columnas (pedido de Alejo); en pantallas chicas se compacta */
@media(max-width:900px){
  .footer-mega{gap:22px 16px}
  .footer-mega h4{font-size:11px; letter-spacing:.1em}
  .footer-mega a{font-size:12.5px}
}

/* ── Mapa del rediseño (herramienta de revisión, solo en home-b) ─────────── */
.mapa-v2{padding:46px 0 60px; background:var(--rose-50,#fdf6f6)}
.mapa-box{background:#fff; border:1px solid var(--rose-100,#f5dcdd); border-radius:22px;
  box-shadow:0 8px 30px rgba(182,99,104,.08); overflow:hidden}
.mapa-box>summary{list-style:none; cursor:pointer; padding:22px 26px; display:flex;
  align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.mapa-box>summary::-webkit-details-marker{display:none}
.mapa-box>summary::after{content:"▾"; margin-left:auto; font-size:20px; color:var(--rose-500,#c98287);
  transition:transform .25s}
.mapa-box[open]>summary::after{transform:rotate(180deg)}
.mapa-tit{font-family:var(--font-serif,Georgia,serif); font-size:clamp(20px,2.4vw,26px);
  color:var(--rose-800,#7d4145); font-weight:700}
.mapa-cifra{font-size:14px; color:var(--rose-500,#c98287); letter-spacing:.04em}
.mapa-body{padding:0 26px 30px; border-top:1px solid var(--rose-100,#f5dcdd)}
.mapa-lead{margin:20px 0 24px; color:#6b5a5b; font-size:15px}
.mapa-grid{columns:4 240px; column-gap:30px}
.mapa-col{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 26px}
.mapa-col h3{break-after:avoid}
.mapa-col h3,.mapa-sub{font-family:var(--font-serif,Georgia,serif); font-size:17px;
  color:var(--rose-800,#7d4145); margin:0 0 10px; display:flex; align-items:baseline; gap:8px}
.mapa-sub{margin-top:30px; padding-top:22px; border-top:1px solid var(--rose-100,#f5dcdd)}
.mapa-col h3 em,.mapa-sub em{font-style:normal; font-size:12px; font-weight:600;
  color:var(--rose-500,#c98287); background:var(--rose-100,#f5dcdd); border-radius:20px; padding:2px 9px}
.mapa-col ul,.mapa-posts{list-style:none; margin:0; padding:0}
.mapa-col li,.mapa-posts li{margin:0 0 7px; line-height:1.35}
.mapa-col a,.mapa-posts a{color:#5a4a4b; text-decoration:none; font-size:14.5px;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s}
.mapa-col a:hover,.mapa-posts a:hover{color:var(--rose-700,#a05a5f); border-bottom-color:currentColor}
.mapa-posts{columns:2; column-gap:30px}
.mapa-posts li{break-inside:avoid}
.mapa-cat{display:block; font-size:12px; color:#a89596}
@media(max-width:640px){
  .mapa-body{padding:0 18px 26px}
  .mapa-posts{columns:1}
  .mapa-grid{gap:22px}
}

/* Página propia del mapa (/v2/mapa/) */
.mapa-page{padding:40px 0 20px; min-height:100vh; background:var(--rose-50,#fdf6f6)}
.mapa-page h1{font-family:var(--font-serif,Georgia,serif); font-size:clamp(28px,4vw,40px);
  color:var(--rose-800,#7d4145); margin:0 0 6px; text-align:center}
.mapa-page .mapa-v2{padding:18px 0 40px; background:transparent}
.mapa-page .mapa-box>summary{cursor:default}

/* ── Cortina de transición entre páginas ────────────────────────────────────
   Al entrar se abre; al salir hacia otra URL se cierra. Es la misma en todo el
   sitio porque vive en el include común. No toca la opacidad del <body>: el
   contenido se pinta debajo desde el primer frame, así el LCP no se penaliza
   más allá de lo que dura la apertura. */
.cortina{position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; align-items:stretch}
.cortina i{flex:1 1 50%; background:linear-gradient(160deg, #fdeeef 0%, #f6d9db 60%, #eec9cb 100%);
  will-change:transform}
.cortina-mark{position:absolute; top:50%; left:50%; width:66px; height:66px;
  transform:translate(-50%,-50%); color:var(--rose-500,#c98287); opacity:0}

/* Apertura: arranca sola con CSS, no depende del JS */
@media (prefers-reduced-motion: no-preference){
  .cortina-izq{animation:cortinaAbreIzq .72s cubic-bezier(.76,0,.24,1) .06s forwards}
  .cortina-der{animation:cortinaAbreDer .72s cubic-bezier(.76,0,.24,1) .06s forwards}
  .cortina-mark{animation:cortinaMark .5s ease-out forwards}
}
@keyframes cortinaAbreIzq{from{transform:translateX(0)}    to{transform:translateX(-101%)}}
@keyframes cortinaAbreDer{from{transform:translateX(0)}    to{transform:translateX(101%)}}
@keyframes cortinaMark{0%{opacity:.9; transform:translate(-50%,-50%) scale(1)}
                      100%{opacity:0;  transform:translate(-50%,-50%) scale(.6)}}

/* Cierre: la inversa, al pulsar un enlace interno */
.cortina.cerrando .cortina-izq{animation:cortinaCierraIzq .42s cubic-bezier(.76,0,.24,1) forwards}
.cortina.cerrando .cortina-der{animation:cortinaCierraDer .42s cubic-bezier(.76,0,.24,1) forwards}
.cortina.cerrando .cortina-mark{animation:cortinaMarkIn .42s ease-out forwards}
@keyframes cortinaCierraIzq{from{transform:translateX(-101%)} to{transform:translateX(0)}}
@keyframes cortinaCierraDer{from{transform:translateX(101%)}  to{transform:translateX(0)}}
@keyframes cortinaMarkIn{from{opacity:0; transform:translate(-50%,-50%) scale(.6)}
                          to{opacity:.9; transform:translate(-50%,-50%) scale(1)}}

/* Sin animación: la cortina no debe existir para quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){ .cortina{display:none} }

/* Texto que leen buscadores y lectores de pantalla pero no se ve.
   Se usa para el H1 de la portada, cuyo titular visual es decorativo. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ── Página 404 ─────────────────────────────────────────────────────────── */
.p404{padding:70px 0 90px; background:var(--rose-50,#fdf6f6); min-height:64vh}
.p404-chip{display:inline-block; background:var(--rose-100,#f5dcdd); color:var(--rose-700,#a05a5f);
  border-radius:30px; padding:6px 16px; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 18px}
.p404 h1{font-family:var(--font-serif,Georgia,serif); font-size:clamp(30px,5vw,46px);
  color:var(--rose-800,#7d4145); margin:0 0 14px; line-height:1.1}
.p404-lead{font-size:17px; color:#6b5a5b; max-width:60ch; margin:0 0 34px}
.p404-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin:0 0 32px}
.p404-grid a{background:#fff; border:1px solid var(--rose-100,#f5dcdd); border-radius:16px;
  padding:16px 18px; text-decoration:none; display:block; transition:transform .18s, box-shadow .18s}
.p404-grid a:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(182,99,104,.13)}
.p404-grid strong{display:block; color:var(--rose-800,#7d4145); font-size:16px; margin-bottom:3px}
.p404-grid span{color:#8a7576; font-size:14px}
.p404-cta{font-size:16px; color:#6b5a5b}
.p404-cta a{color:var(--rose-700,#a05a5f); font-weight:600}