:root{
  /* Paleta Renovagyn — brandbook */
  --rosa-intenso:#cf1264;
  --rosa:#e32661;
  --rosa-suave:#ef315e;
  --naranja:#fc8e3d;
  --grad:linear-gradient(120deg,#cf1264 0%,#e32661 45%,#fc8e3d 100%);
  --grad-suave:linear-gradient(135deg,#fff2f6 0%,#fff6ef 100%);

  --tinta:#2b1620;
  --tinta-2:#6b5560;
  --linea:#f2dfe6;
  --papel:#ffffff;
  --papel-2:#fff7fa;

  --r-s:14px; --r-m:24px; --r-l:36px; --r-xl:56px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-weight:400; color:var(--tinta); background:var(--papel);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100vw;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.script{font-family:'Sacramento',cursive;font-weight:400;color:var(--naranja)}

h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.15rem;font-weight:600}
.lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--tinta-2);font-weight:300}

.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rosa);margin-bottom:14px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:.95rem;
  background:var(--rosa);color:#fff;border:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 10px 24px -10px rgba(227,38,97,.6);
}
.btn:hover{transform:translateY(-2px);background:var(--rosa-intenso);box-shadow:0 16px 30px -12px rgba(207,18,100,.7)}
.btn-ghost{background:transparent;color:var(--rosa-intenso);border:1.5px solid var(--linea);box-shadow:none}
.btn-ghost:hover{background:var(--papel-2);border-color:var(--rosa);color:var(--rosa-intenso)}
.btn-wa{background:#fff;color:var(--rosa-intenso);box-shadow:0 10px 24px -12px rgba(43,22,32,.35);padding:14px 26px}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linea);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.logo{display:flex;align-items:baseline;gap:2px;font-weight:700;font-size:1.42rem;letter-spacing:-.03em}
.logo span:first-child{color:var(--rosa-intenso)}
.logo span:last-child{color:var(--tinta)}
.nav-links{display:flex;gap:30px;font-size:.92rem;font-weight:400}
.nav-links a{color:var(--tinta-2);transition:color .15s}
.nav-links a:hover{color:var(--rosa-intenso)}
.nav .btn{padding:12px 24px;font-size:.88rem}


/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--grad-suave)}
.hero::before{
  content:"";position:absolute;width:640px;height:640px;right:-180px;top:-220px;
  background:var(--grad);opacity:.13;border-radius:50%;filter:blur(10px);
}
.hero::after{
  content:"";position:absolute;width:340px;height:340px;left:-140px;bottom:-160px;
  background:var(--naranja);opacity:.12;border-radius:50%;
}
/* padding-top/bottom, no el shorthand: .hero-inner es .wrap + hero-inner, y
   el shorthand pisaba los 24px laterales de .wrap. Entre 981 y ~1180px de
   ancho (laptop, tablet horizontal) el texto quedaba pegado al borde de la
   ventana — no se notaba en pantallas más anchas porque ahí el max-width
   ya deja aire de sobra a los costados. */
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-top:84px;padding-bottom:96px}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:22px 0 32px;max-width:34ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-trust div{font-size:.82rem;color:var(--tinta-2);font-weight:300}
.hero-trust b{display:block;font-size:1.5rem;font-weight:700;color:var(--rosa-intenso);letter-spacing:-.02em}

/* Agenda rápida — tarjeta flotante que se monta sobre el borde inferior del hero */
.agenda-rapida{position:relative;z-index:2;margin-top:-56px}
.ar-card{
  background:var(--papel);border-radius:var(--r-l);box-shadow:0 24px 50px -26px rgba(43,22,32,.28);
  padding:30px 34px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 22px;
}
.ar-cabecera{display:flex;align-items:center;gap:14px;flex:0 0 100%}
.ar-ico{width:46px;height:46px;border-radius:14px;background:var(--papel-2);color:var(--rosa-intenso);display:flex;align-items:center;justify-content:center;flex:0 0 46px}
.ar-cabecera h2{font-size:1.3rem;margin:0}
.ar-campos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 22px;flex:1}
.ar-campos .field{flex:1 1 180px;min-width:150px}
.ar-campos .btn{flex:0 0 auto;height:48px}
.ar-nota{flex:0 0 100%;font-size:.82rem;color:var(--tinta-2);font-weight:300;margin-top:2px}

.hero-media{position:relative}
.hero-photo{
  aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:var(--grad);display:flex;align-items:flex-end;justify-content:center;
  box-shadow:0 30px 60px -30px rgba(207,18,100,.5);
}
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:20px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px);
}
.hero-badge{
  position:absolute;left:-26px;bottom:56px;background:#fff;border-radius:var(--r-m);
  padding:18px 22px;box-shadow:0 20px 40px -18px rgba(43,22,32,.28);max-width:230px;
}
.hero-badge p{font-size:.85rem;line-height:1.45;font-weight:300;color:var(--tinta-2)}
.hero-badge b{color:var(--tinta);font-weight:600}

/* ---------- Secciones ---------- */
section{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .lead{margin-top:16px}

/* Bloque empatía */
.empatia{background:var(--papel-2)}
.empatia-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.quote{
  font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;line-height:1.4;
  color:var(--tinta);letter-spacing:-.01em;
}
.quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.empatia-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:8px}
.empatia-list li{display:flex;gap:14px;align-items:flex-start;font-size:.98rem;color:var(--tinta-2);font-weight:300}
.tick{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;margin-top:2px;
}

/* Servicios */
.grid-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:30px 26px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(207,18,100,.45);border-color:transparent}
.ico{
  width:52px;height:52px;border-radius:18px;background:var(--grad-suave);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px;
  border:1px solid var(--linea);
}
.card h3{margin-bottom:8px}
.card p{font-size:.9rem;color:var(--tinta-2);font-weight:300}
.card .more{display:inline-block;margin-top:16px;font-size:.82rem;font-weight:600;color:var(--rosa)}

/* Pilares */
.pilares{background:var(--grad);color:#fff;border-radius:var(--r-xl);padding:70px 60px;position:relative;overflow:hidden}
.pilares::after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;background:rgba(255,255,255,.09);border-radius:50%}
.pilares .sec-head{position:relative;margin-bottom:44px}
.pilares h2{color:#fff}
.pilares .lead{color:#fff}
/* minmax(0,1fr) —y no 1fr— para que las columnas puedan encogerse por debajo de
   su ancho mínimo de contenido. Con 1fr (= minmax(auto,1fr)) el texto más largo
   fijaba un mínimo que desbordaba la reja en pantallas angostas y .pilares lo
   recortaba con su overflow:hidden. */
.grid-pil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;position:relative}
.pil{min-width:0;overflow-wrap:break-word}
.pil h3{color:#fff;margin-bottom:8px}
.pil p{font-size:.88rem;color:#fff;font-weight:300}
.pil-n{font-family:'Sacramento',cursive;font-size:2.6rem;line-height:1;color:rgba(255,255,255,.8);margin-bottom:6px}

/* Equipo */
.grid-team{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.doc-photo{aspect-ratio:1/1;border-radius:var(--r-l);overflow:hidden;background:var(--grad);margin-bottom:18px}
.doc h3{margin-bottom:2px}
.doc .rol{font-size:.85rem;color:var(--rosa);font-weight:600}
.doc p{font-size:.88rem;color:var(--tinta-2);font-weight:300;margin-top:10px}

/* Paquetes */
.paquetes{background:var(--papel-2)}
.grid-pack{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.pack{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:34px 30px;position:relative}
.pack.destacado{border:2px solid var(--rosa);box-shadow:0 26px 50px -30px rgba(207,18,100,.5)}
.tag{
  position:absolute;top:-13px;left:30px;background:var(--naranja);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;
}
.pack h3{font-size:1.3rem;margin-bottom:6px}
.pack .desc{font-size:.86rem;color:var(--tinta-2);font-weight:300;min-height:42px}
.precio{font-size:2.4rem;font-weight:700;color:var(--rosa-intenso);letter-spacing:-.03em;margin:18px 0 4px}
.precio small{font-size:.9rem;font-weight:400;color:var(--tinta-2)}
.precio-tachado{font-size:1.3rem;font-weight:500;color:var(--tinta-2);text-decoration:line-through;margin-right:8px}
.pack ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.pack li{font-size:.88rem;color:var(--tinta-2);font-weight:300;display:flex;gap:10px}
.pack li::before{content:"✓";color:var(--rosa);font-weight:700}
.pack .btn{width:100%;justify-content:center}

/* Testimonios */
.grid-test{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.test{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:30px 28px}
.stars{color:var(--naranja);font-size:.9rem;letter-spacing:2px;margin-bottom:14px}
.test p{font-size:.94rem;color:var(--tinta-2);font-weight:300;font-style:italic}
.test .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.av{width:40px;height:40px;border-radius:50%;background:var(--grad);flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.av .ui-ico{width:20px;height:20px;color:#fff}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.who b{font-size:.9rem;font-weight:600;display:block}
.who span{font-size:.78rem;color:var(--tinta-2)}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
details{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:22px 26px;transition:border-color .2s}
details[open]{border-color:var(--rosa)}
summary{
  font-weight:600;font-size:1rem;cursor:pointer;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);font-size:1.5rem;font-weight:300;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:14px;font-size:.93rem;color:var(--tinta-2);font-weight:300}

/* CTA final */
.cta-final{
  text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--renova-primary) 0%,var(--renova-pink) 48%,var(--renova-coral) 78%,var(--renova-orange) 130%);
  border-radius:var(--r-xl);padding:80px 40px;position:relative;overflow:hidden;
}
.cta-final h2{color:#fff}
.cta-final .script{font-size:2.6rem;display:block;margin-bottom:6px}
.cta-final .lead{max-width:52ch;margin:18px auto 32px;color:rgba(255,255,255,.92)}
.cta-final .btn-wa{background:#fff;color:var(--rosa-intenso);font-weight:700}
.cta-final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.cta-final .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* Footer */
footer{background:var(--tinta);color:rgba(255,255,255,.72);padding:70px 0 32px;margin-top:96px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px}
footer .logo span:first-child{color:#fff}
footer .logo span:last-child{color:rgba(255,255,255,.6)}
footer h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:700}
footer p,footer a{font-size:.88rem;font-weight:300;line-height:1.9}
footer a:hover{color:var(--naranja)}
.foot-list{list-style:none;display:flex;flex-direction:column}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:50px;padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;
}
.wa-float{
  position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.6);z-index:60;font-size:1.6rem;
}

/* Responsive */
@media(max-width:980px){
  /* padding-top/bottom, no el shorthand: .hero-inner es .wrap + hero-inner,
     y el shorthand "padding:64px 0 76px" pisaba los 24px laterales que ya
     daba .wrap, dejando el texto pegado al borde en pantallas angostas. */
  .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:64px;padding-bottom:76px}
  .hero-media{max-width:420px}
  .agenda-rapida{margin-top:-32px}
  .ar-card{padding:24px 22px}
  .ar-campos .field{flex:1 1 100%}
  .ar-campos .btn{width:100%;justify-content:center}
  .grid-serv{grid-template-columns:repeat(2,1fr)}
  .grid-pil{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .grid-team,.grid-pack,.grid-test{grid-template-columns:1fr}
  .empatia-grid{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .pilares{padding:52px 32px;border-radius:var(--r-l)}
}
@media(max-width:560px){
  section{padding:68px 0}
  .grid-serv{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-badge{position:static;margin-top:18px;max-width:none}
}
/* pantallas muy angostas (iPhone SE, Android chicos, Fold cerrado):
   dos columnas dejarían ~90px por pilar, ilegible */
@media(max-width:399px){
  .grid-pil{grid-template-columns:1fr;gap:24px}
  .pilares{padding:44px 24px}
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */

/* Banner de página */
.page-hero{
  background:var(--grad-suave);position:relative;overflow:hidden;
  padding:64px 0 72px;border-bottom:1px solid var(--linea);
}
.page-hero::before{
  content:"";position:absolute;width:520px;height:520px;right:-160px;top:-240px;
  background:var(--grad);opacity:.12;border-radius:50%;
}
.page-hero .wrap{position:relative}
.page-hero h1{max-width:16ch}
.page-hero .lead{margin-top:18px;max-width:52ch}
.crumbs{font-size:.8rem;color:var(--tinta-2);font-weight:300;margin-bottom:18px}
.crumbs a:hover{color:var(--rosa-intenso)}
.crumbs span{margin:0 8px;opacity:.5}

/* Texto largo */
.prose{max-width:68ch}
.prose h2{margin:44px 0 16px}
.prose h3{margin:32px 0 10px;font-size:1.15rem}
.prose p{margin-bottom:16px;color:var(--tinta-2);font-weight:300}
.prose ul{margin:0 0 20px 0;list-style:none;display:flex;flex-direction:column;gap:11px}
.prose ul li{
  position:relative;padding-left:26px;min-width:0;
  font-size:.95rem;color:var(--tinta-2);font-weight:300;
  overflow-wrap:break-word;
}
.prose ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--rosa);font-weight:700}
.prose strong{color:var(--tinta);font-weight:600}

/* Layout detalle: contenido + sidebar */
.split{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
.side{position:sticky;top:112px;display:flex;flex-direction:column;gap:20px}
.side-card{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:28px}
.side-card.grad{background:var(--grad);color:#fff;border:none}
.side-card.grad h3,.side-card.grad p{color:#fff}
.side-card.grad p{color:#fff}
.side-card h3{margin-bottom:12px}
.side-card p{font-size:.88rem;color:var(--tinta-2);font-weight:300}
.side-card .btn{width:100%;justify-content:center;margin-top:18px}
.side-dl{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.side-dl li{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;
  border-bottom:1px dashed var(--linea);padding-bottom:12px}
.side-dl li:last-child{border:none;padding:0}
.side-dl b{font-weight:600;color:var(--tinta);text-align:right}
.side-dl span{color:var(--tinta-2);font-weight:300}

/* Pasos del proceso */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{position:relative;padding-top:22px;border-top:2px solid var(--linea)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:-16px;left:0;background:#fff;padding-right:12px;
  font-family:'Sacramento',cursive;font-size:1.9rem;color:var(--rosa);line-height:1;
}
.step h3{margin-bottom:6px;font-size:1.02rem}
.step p{font-size:.87rem;color:var(--tinta-2);font-weight:300}

/* Ficha ampliada de servicio en listado */
.serv-row{
  display:grid;grid-template-columns:88px 1fr auto;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);
  padding:26px 30px;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.serv-row:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(207,18,100,.4);border-color:transparent}
.serv-row .ico{margin:0;width:64px;height:64px;font-size:1.7rem}
.serv-row h3{margin-bottom:5px;font-size:1.18rem}
.serv-row p{font-size:.9rem;color:var(--tinta-2);font-weight:300;max-width:60ch}
.serv-list{display:flex;flex-direction:column;gap:16px}

/* Ficha de médica ampliada */
.doc-full{
  display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;
  padding:44px 0;border-bottom:1px solid var(--linea);
}
.doc-full:last-child{border:none}
.doc-full .doc-photo{margin:0}

/* Carrusel de presencia internacional — cinta que se desliza a la izquierda
   y se repite sola. El truco del loop sin salto: el set de fotos está
   duplicado en el HTML (la segunda mitad tiene aria-hidden), y la animación
   solo recorre translateX(-50%) —exactamente el ancho de un set— así que
   cuando "termina" ya está mostrando, píxel por píxel, lo mismo que el
   principio y el ojo no nota el reinicio. */
.doc-gallery{
  overflow:hidden;height:260px;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.doc-track{
  display:flex;align-items:center;width:max-content;height:100%;
  animation:doc-desliza 46s linear infinite;
}
.doc-item{
  flex:0 0 auto;width:280px;height:92%;object-fit:cover;
  margin-right:18px;border-radius:var(--r-m);
  box-shadow:var(--renova-shadow);background:var(--grad);
  cursor:zoom-in;transition:transform .3s var(--renova-ease),box-shadow .3s var(--renova-ease);
}
.doc-item:hover,.doc-item:focus-visible{
  transform:scale(1.1);position:relative;z-index:2;
  box-shadow:0 24px 44px -18px rgba(43,22,32,.45);outline:none;
}
/* al pasar el mouse por cualquier foto, la cinta se detiene entera */
.doc-gallery:has(.doc-item:hover) .doc-track,
.doc-gallery:has(.doc-item:focus-visible) .doc-track{animation-play-state:paused}

/* Lightbox — foto del doctor en grande */
.doc-lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:40px;background:rgba(23,10,17,.86);
  opacity:0;visibility:hidden;transition:opacity .25s var(--renova-ease),visibility .25s;
}
.doc-lightbox.abierta{opacity:1;visibility:visible}
.doc-lightbox img{
  max-width:min(90vw,760px);max-height:85vh;border-radius:var(--r-m);
  box-shadow:0 30px 70px rgba(0,0,0,.5);object-fit:contain;
}
.doc-lightbox-cerrar{
  position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,transform .2s;
}
.doc-lightbox-cerrar:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
@media(max-width:560px){
  .doc-lightbox{padding:20px}
  .doc-lightbox-cerrar{top:14px;right:14px}
}
@keyframes doc-desliza{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* con reduce-motion, la cinta no se mueve: se ve la primera foto quieta */
html:not(.motion-ok) .doc-track{animation:none}
@media(max-width:560px){
  .doc-gallery{height:190px}
  .doc-item{width:210px}
}
.doc-full h2{font-size:1.7rem;margin-bottom:4px}
.doc-full .rol{font-size:.92rem;color:var(--rosa);font-weight:600}
.doc-full > div > p{color:var(--tinta-2);font-weight:300;margin-top:14px}
.doc-full > div > p:first-of-type{margin-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
.chip{
  font-size:.78rem;font-weight:600;padding:7px 15px;border-radius:100px;
  background:var(--papel-2);color:var(--rosa-intenso);border:1px solid var(--linea);
}

/* Formación internacional — lista de congresos */
.cong-list{max-width:760px;margin:0 auto}
.cong-item{
  display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--linea);
}
.cong-item:last-child{border:none}
.cong-año{font-weight:700;color:var(--rosa-intenso);font-size:.92rem}
.cong-item p{color:var(--tinta-2);font-weight:300}
.cong-item strong{color:var(--tinta);font-weight:600}
@media(max-width:560px){
  .cong-item{grid-template-columns:1fr;gap:4px}
}

/* Valores */
.grid-val{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.val{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:30px 28px}
.val .ico{margin-bottom:16px}
.val h3{margin-bottom:8px}
.val p{font-size:.9rem;color:var(--tinta-2);font-weight:300}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;font-weight:600}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.93rem;font-weight:300;color:var(--tinta);
  padding:14px 16px;border:1px solid var(--linea);border-radius:var(--r-s);
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--rosa);box-shadow:0 0 0 3px rgba(227,38,97,.12);
}
.field textarea{resize:vertical;min-height:120px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--tinta-2);font-weight:300}
.consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--rosa)}
.info-block{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--linea)}
.info-block:last-of-type{border:none}
.info-block .ico{flex:0 0 48px;width:48px;height:48px;margin:0;font-size:1.2rem}
.info-block h3{font-size:1rem;margin-bottom:3px}
.info-block p{font-size:.9rem;color:var(--tinta-2);font-weight:300}
.map{
  aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--grad);
  margin-top:26px;
}

@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:44px}
  .side{position:static}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .doc-full{grid-template-columns:1fr;gap:26px}
  .doc-full .doc-photo{max-width:280px}
  .grid-val{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .serv-row{grid-template-columns:64px 1fr;gap:20px;padding:24px}
  .serv-row .btn{grid-column:1/-1;justify-content:center}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .page-hero{padding:44px 0 52px}
}

/* ---------- Imágenes ---------- */
.hero-photo img,.doc-photo img,.map img{width:100%;height:100%;object-fit:cover;display:block}
.card-img{
  width:calc(100% + 52px);max-width:none;margin:-30px -26px 20px;height:170px;object-fit:cover;
  border-radius:var(--r-l) var(--r-l) 0 0;display:block;
}
.serv-thumb{
  width:88px;height:88px;border-radius:22px;overflow:hidden;flex:0 0 88px;
  border:1px solid var(--linea);
}
.serv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 38%;
  border-radius:var(--r-l);margin-bottom:36px;display:block;
}
.figura{margin:0 0 32px}
.figura img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;border-radius:var(--r-l);display:block}
@media(max-width:980px){
  .serv-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:18px}
}

/* ---------- Logotipo ---------- */
.logo{display:flex;align-items:center;gap:0}
.logo img{height:52px;width:auto;max-width:none;display:block}
footer .logo img{height:46px}
@media(max-width:560px){.logo img{height:34px}}

/* Encuadre del hero: la protagonista queda a la derecha del encuadre original */
.hero-photo img{object-position:72% center}



.faq-sec{background:var(--papel-2)}

@media(max-width:980px){
}

.pack-pend{margin:18px 0 26px;min-height:0}

/* ---------- Submenú de servicios ---------- */
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:6px}
.caret{font-size:1.05rem;line-height:1;transition:transform .18s;display:inline-block}
.has-sub:hover .caret{transform:rotate(90deg)}
.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:0 24px 48px -22px rgba(43,22,32,.3);
  padding:12px;min-width:290px;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.submenu li a{
  display:block;padding:10px 14px;border-radius:var(--r-s);font-size:.88rem;
  color:var(--tinta-2);font-weight:400;transition:background .15s,color .15s;
}
.submenu li a:hover{background:var(--papel-2);color:var(--rosa-intenso)}
.sub-todos{margin-top:6px;border-top:1px solid var(--linea);padding-top:6px}
.sub-todos a{color:var(--rosa)!important;font-weight:600!important;text-align:center}

.map iframe{width:100%;height:100%;border:0;display:block}
.form-servicio{background:var(--papel-2)}

@media(max-width:980px){.has-sub{display:none}}

/* ---------- Páginas legales ---------- */
.legal{max-width:78ch}
.legal h2{font-size:1.3rem;margin:40px 0 14px}
.legal h3{font-size:1.05rem;margin:26px 0 10px}
.legal form h2:first-of-type{margin-top:0}
.aviso-legal{
  display:flex;gap:26px;align-items:flex-start;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r-l);padding:28px 30px;
}
.aviso-legal img{width:96px;height:auto;flex:0 0 96px;border-radius:var(--r-s)}
.aviso-legal p{margin:0;font-size:.92rem}
@media(max-width:560px){
  .aviso-legal{flex-direction:column;gap:18px}
  .aviso-legal img{width:80px;flex:none}
}

/* ============================================================
   CARRUSEL DE SERVICIOS
   ============================================================ */
.serv-carrusel{background:var(--grad-suave);overflow:hidden}
.carrusel-grid{display:grid;grid-template-columns:27% 1fr;gap:44px;align-items:center}

.carrusel-editorial h2{margin:0 0 14px}
.carrusel-editorial .lead{margin-bottom:30px}
.carrusel-nav{display:flex;gap:12px;margin-bottom:26px}
.nav-btn{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--linea);
  background:#fff;color:var(--rosa-intenso);font-size:1.5rem;line-height:1;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,opacity .18s;
  display:flex;align-items:center;justify-content:center;
}
.nav-btn:hover:not(:disabled),.nav-btn:focus-visible:not(:disabled){
  background:var(--rosa-intenso);color:#fff;border-color:var(--rosa-intenso);
}
.nav-btn:disabled{opacity:.35;cursor:default}

.carrusel-viewport{overflow:hidden;padding:8px 0 4px}
.carrusel-track{
  display:flex;gap:24px;list-style:none;margin:0;padding:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1);touch-action:pan-y;
}
.scard{
  flex:0 0 calc((100% - 48px)/3);min-width:0;
  opacity:0;transform:translateY(12px);
  transition:opacity .65s ease,transform .65s ease;
}
.scard.is-visible{opacity:1;transform:translateY(0)}
.scard.es-clon{pointer-events:auto}
.scard-in{
  display:block;position:relative;aspect-ratio:4/5;min-height:360px;border-radius:26px;overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(207,18,100,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.scard-in:hover{transform:translateY(-6px);box-shadow:0 26px 52px -24px rgba(207,18,100,.6)}
.scard-in img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  object-position:center;transform:scale(1.04);
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
.scard.is-visible .scard-in img{transform:scale(1)}
.scard-in:hover img{transform:scale(1.03)}
.scard-in::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 22%,rgba(55,8,30,.55) 52%,rgba(55,8,30,.93) 100%);
}
.scard-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px;color:#fff;
  opacity:0;transform:translateY(10px);
  transition:opacity .65s ease .08s,transform .65s ease .08s;
}
.scard.is-visible .scard-body{opacity:1;transform:translateY(0)}
.scard-cat{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#FFC48A;margin-bottom:10px;
  background:rgba(44,13,33,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:5px 11px;border-radius:100px;
  border:1px solid rgba(255,196,138,.28);
}
.scard-body h3{color:#fff;font-size:1.05rem;line-height:1.25;margin-bottom:7px;text-shadow:0 1px 10px rgba(30,4,16,.55)}
.scard-body p{
  font-size:.8rem;font-weight:400;color:rgba(255,255,255,.95);margin-bottom:12px;line-height:1.5;
  text-shadow:0 1px 8px rgba(30,4,16,.5);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.scard-cta{font-size:.82rem;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(30,4,16,.5)}
.scard-in:hover .scard-cta{color:var(--naranja)}
.scard.is-active .scard-in{box-shadow:0 24px 50px -22px rgba(207,18,100,.6)}

.carrusel-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.dot{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:var(--linea);cursor:pointer;transition:background .2s,width .2s;
}
.dot[aria-current]{background:var(--rosa);width:26px;border-radius:100px}
.dot:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
.carrusel-todos{text-align:center;margin-top:18px}
.carrusel-todos a{font-size:.88rem;font-weight:600;color:var(--rosa)}

@media(max-width:1099px){
  .carrusel-grid{grid-template-columns:1fr;gap:34px}
  .scard{flex:0 0 calc((100% - 24px)/2)}
}
@media(max-width:759px){
  .scard{flex:0 0 100%}
  .carrusel-track{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .carrusel-track,.scard,.scard-body,.scard-in,.scard-in img{transition:none!important}
  .scard{opacity:1;transform:none}
  .scard-body{opacity:1;transform:none}
  .scard-in img{transform:none}
}


/* ============================================================
   SISTEMA DE MOVIMIENTO
   Solo transform y opacity. Curva única: var(--renova-ease).
   ============================================================ */

/* ---- aparición al hacer scroll ---- */
html.js-reveal [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--renova-ease),transform .62s var(--renova-ease);
  will-change:opacity,transform;
}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* ---- cabecera ---- */
header{transition:box-shadow .3s var(--renova-ease),background .3s var(--renova-ease)}
.nav{transition:height .3s var(--renova-ease)}
header.is-scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 24px -12px rgba(43,22,32,.22);
}
header.is-scrolled .nav{height:74px}
header.is-scrolled .logo img{height:44px}
.logo img{transition:height .3s var(--renova-ease)}

/* ---- enlaces de navegación: subrayado que crece ---- */
.nav-links a{position:relative}
.nav-links > a::after,
.has-sub > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--rosa);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--renova-ease);
}
.nav-links > a:hover::after,
.has-sub:hover > a::after{transform:scaleX(1);transform-origin:left}

/* ---- botones ---- */
.btn{transition:transform .2s var(--renova-ease),box-shadow .2s var(--renova-ease),background .2s var(--renova-ease),color .2s var(--renova-ease)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn-ghost:active{transform:scale(.985)}

/* ---- foco visible coherente en todo el sitio ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--rosa);outline-offset:3px;border-radius:6px;
}

/* ---- tarjetas: elevación uniforme ---- */
.card,.serv-row,.pack,.test,.val,.side-card,.doc-photo{
  transition:transform .32s var(--renova-ease),box-shadow .32s var(--renova-ease),border-color .32s var(--renova-ease);
}
.pack:hover,.test:hover,.val:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 44px -26px rgba(207,18,100,.4);
}
.pack.destacado:hover{box-shadow:0 30px 56px -28px rgba(207,18,100,.55)}

/* zoom contenido en las miniaturas */
.serv-thumb,.card-img,.doc-photo,.figura,.map{overflow:hidden}
.serv-thumb img,.doc-photo img,.figura img{
  transition:transform .5s var(--renova-ease);
}
.serv-row:hover .serv-thumb img{transform:scale(1.06)}
.doc:hover .doc-photo img,.doc-full:hover .doc-photo img{transform:scale(1.04)}
.card img.card-img{transition:transform .5s var(--renova-ease)}
.card:hover img.card-img{transform:scale(1.05)}

/* ---- iconos ---- */
.ico{transition:transform .25s var(--renova-ease),background .25s var(--renova-ease)}
.card:hover .ico,.val:hover .ico,.info-block:hover .ico{transform:rotate(-3deg) scale(1.06)}

/* ---- pilares: numeración que reacciona ---- */
.pil-n{transition:transform .35s var(--renova-ease),color .35s var(--renova-ease)}
.pil:hover .pil-n{transform:translateY(-4px);color:#fff}

/* ---- pasos ---- */
.paso-n{transition:transform .3s var(--renova-ease),box-shadow .3s var(--renova-ease)}
.pasos li:hover .paso-n{transform:scale(1.08);box-shadow:0 10px 22px -8px rgba(207,18,100,.55)}
.step{transition:border-color .3s var(--renova-ease)}
.step:hover{border-top-color:var(--rosa)}

/* ---- preguntas frecuentes: apertura suave ---- */
details{transition:border-color .25s var(--renova-ease),box-shadow .25s var(--renova-ease)}
details:hover{box-shadow:0 12px 26px -20px rgba(43,22,32,.35)}
details summary::after{transition:transform .3s var(--renova-ease),color .2s}
details[open] > *:not(summary){
  animation:faq-abrir .38s var(--renova-ease) both;
}
@keyframes faq-abrir{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* ---- formularios ---- */
.field input,.field select,.field textarea{
  transition:border-color .2s var(--renova-ease),box-shadow .2s var(--renova-ease),transform .2s var(--renova-ease);
}
.field input:focus,.field select:focus,.field textarea:focus{transform:translateY(-1px)}

/* ---- burbuja de WhatsApp ---- */
.wa-float{transition:transform .28s var(--renova-ease),box-shadow .28s var(--renova-ease)}
.wa-float:hover{transform:scale(1.08) rotate(-4deg);box-shadow:0 16px 34px -8px rgba(37,211,102,.7)}
.motion-ok .wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:wa-pulso 2.8s var(--renova-ease) infinite;
}
@keyframes wa-pulso{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* ---- deriva lenta de las formas orgánicas ---- */
.motion-ok .hero::before{animation:deriva-a 22s ease-in-out infinite alternate}
.motion-ok .hero::after{animation:deriva-b 18s ease-in-out infinite alternate}
.motion-ok .page-hero::before{animation:deriva-a 26s ease-in-out infinite alternate}
.motion-ok .pilares::after{animation:deriva-b 24s ease-in-out infinite alternate}
@keyframes deriva-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-26px,18px,0) scale(1.06)}
}
@keyframes deriva-b{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(20px,-16px,0) scale(1.08)}
}

/* ---- hero: la foto entra con un ligero acercamiento ---- */
.hero-photo img{transition:transform 1.2s var(--renova-ease)}
.motion-ok .hero-inner > div:last-child:not(.is-in) .hero-photo img{transform:scale(1.06)}

/* ---- indicadores del carrusel ---- */
.dot{transition:background .25s var(--renova-ease),width .3s var(--renova-ease),transform .2s}
.dot:hover{transform:scale(1.25)}

/* ============================================================
   Respeto por prefers-reduced-motion: se desactiva todo
   el movimiento no esencial.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html.js-reveal [data-reveal]{opacity:1!important;transform:none!important}
  .motion-ok .wa-float::before{display:none}
}

/* ============================================================
   NAVEGADOR EDITORIAL DE SERVICIOS
   ============================================================ */
/* display:grid de .panel y .serv-grid gana al hidden del navegador */
[hidden]{display:none!important}
.serv-hero{
  position:relative;overflow:hidden;background:var(--blush);
  min-height:250px;display:flex;align-items:center;
}
/* dos formas orgánicas, esquina superior derecha */
.serv-hero::before{
  content:"";position:absolute;top:-46%;right:-14%;width:46%;height:200%;
  background:radial-gradient(60% 55% at 40% 35%, rgba(252,142,61,.22) 0%, transparent 62%),
             linear-gradient(155deg, rgba(227,38,97,.20) 0%, rgba(255,242,245,.9) 70%);
  border-radius:52% 48% 44% 56%/56% 44% 56% 44%;transform:rotate(-8deg);filter:blur(.4px);
}
.serv-hero::after{
  content:"";position:absolute;top:-22%;right:12%;width:34%;height:150%;
  background:linear-gradient(150deg, rgba(255,237,241,.95) 0%, rgba(255,246,239,.85) 100%);
  border-radius:46% 54% 52% 48%/48% 52% 48% 52%;transform:rotate(12deg);
}
.serv-hero-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:56px 24px;width:100%}
.serv-hero .crumbs{margin-bottom:18px}
.serv-hero-eyebrow{
  font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--primary);margin-bottom:10px;
}
.serv-hero h1{
  font-family:var(--font);font-weight:700;color:var(--plum);
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:14px;
}
.serv-hero-lead{color:var(--ink);opacity:.75;font-weight:300;font-size:1.02rem}

.nav-serv{background:var(--ivory);padding:0}
.nav-serv-in{max-width:1240px;margin:0 auto;padding:36px 24px 96px}

/* ---- fila de utilidades ---- */
.utilidades{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.util-filtro{display:flex;align-items:center;gap:12px}
.util-filtro label{font-size:.88rem;color:var(--ink);opacity:.7}
.util-filtro select{
  font-family:var(--font);font-size:.9rem;font-weight:500;color:var(--plum);
  padding:13px 18px;border:1px solid var(--line);border-radius:100px;background:#fff;
  cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.util-filtro select:hover{border-color:var(--primary)}
.util-buscar{position:relative;flex:0 1 340px;min-width:240px}
.util-buscar .lupa{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--primary);font-size:1.15rem}
.util-buscar input{
  width:100%;font-family:var(--font);font-size:.9rem;color:var(--plum);
  padding:13px 40px 13px 44px;border:1px solid var(--line);border-radius:100px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.util-buscar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(207,18,100,.12);outline:none}
.limpiar{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:none;border-radius:50%;background:var(--blush);
  color:var(--primary);font-size:1.1rem;line-height:1;cursor:pointer;
}

/* ---- rejilla principal ---- */
.nav-serv-grid{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
/* sin esto, los chips con nowrap estiran la columna y desbordan la página */
.nav-serv-grid > *{min-width:0}
.serv-card,.serv-info,.panel,.panel-txt{min-width:0}

/* ---- columna de categorías ---- */
.cat-col{
  position:sticky;top:108px;
  background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow);padding:14px;
}
.cat-menu{list-style:none;margin:0;padding:0}
.cat-btn{
  position:relative;width:100%;display:grid;
  grid-template-columns:40px auto 1fr auto;align-items:center;gap:10px;
  background:none;border:1px solid transparent;border-radius:16px;
  padding:14px 12px;cursor:pointer;text-align:left;font-family:var(--font);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.cat-btn::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:4px;border-radius:4px;
  background:var(--primary);transform:scaleY(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.cat-btn:hover{background:var(--blush)}
.cat-btn[aria-pressed="true"]{
  background:#fff;border-color:var(--primary);
  box-shadow:0 10px 24px -14px rgba(207,18,100,.5);
}
.cat-btn[aria-pressed="true"]::before{transform:scaleY(1)}
.cat-ico{
  width:40px;height:40px;border-radius:12px;background:var(--blush);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
  transition:transform .25s var(--ease);
}
.cat-btn[aria-pressed="true"] .cat-ico{background:rgba(207,18,100,.10)}
.cat-btn:hover .cat-ico{transform:scale(1.06)}
.cat-num{font-size:.82rem;font-weight:600;color:var(--ink);opacity:.55}
.cat-btn[aria-pressed="true"] .cat-num{color:var(--primary);opacity:1}
.cat-tit{font-size:.9rem;font-weight:600;color:var(--plum);line-height:1.3}
.cat-n{
  font-size:.72rem;font-weight:700;color:var(--primary);
  background:var(--blush);border-radius:100px;padding:3px 8px;
}
.cat-todos{
  display:block;text-align:center;margin-top:10px;padding:16px 10px 8px;
  border-top:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--primary);
}

/* ---- panel destacado ---- */
.panel{
  display:grid;grid-template-columns:52% 48%;align-items:stretch;
  min-height:260px;background:#fff;border:1px solid var(--line);
  border-radius:var(--card-radius);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:22px;
}
.panel-txt{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
.panel-num{font-size:.9rem;font-weight:700;color:var(--primary);margin-bottom:8px}
.panel-txt h2{
  font-family:var(--font);font-weight:700;color:var(--plum);
  font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:12px;
}
.panel-txt p{font-size:.95rem;font-weight:300;color:var(--ink);opacity:.8;margin-bottom:24px;max-width:38ch}
.panel-txt .btn{align-self:flex-start;padding:13px 26px;font-size:.88rem}
.panel-img{padding:14px 14px 14px 0}
.panel-img img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:16px;display:block}

/* ---- tarjetas de servicio ---- */
.serv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grupo-tit{
  grid-column:1/-1;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);margin-top:8px;
}
.serv-card{
  display:grid;grid-template-columns:68px 1fr 42px;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);
  padding:18px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.serv-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px -24px rgba(207,18,100,.45)}
.serv-mini{width:68px;height:68px;max-width:none;border-radius:16px;object-fit:cover;display:block}
.serv-cab{display:flex;gap:8px;align-items:baseline;margin-bottom:5px}
.serv-num{font-size:.82rem;font-weight:700;color:var(--primary)}
.serv-tit{font-size:.98rem;font-weight:600;color:var(--plum);line-height:1.25}
.serv-desc{font-size:.84rem;font-weight:300;color:var(--ink);opacity:.78;line-height:1.55}
.serv-flecha{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.serv-card:hover .serv-flecha{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateX(3px)}

.serv-vacio{
  background:#fff;border:1px dashed var(--line);border-radius:var(--card-radius);
  padding:36px;text-align:center;color:var(--ink);font-weight:300;
}
.serv-vacio a{color:var(--primary);font-weight:600}

/* ---- CTA final ---- */
.cta-serv{
  display:flex;align-items:center;gap:22px;margin-top:26px;
  background:linear-gradient(120deg,var(--blush) 0%,#FFF6EF 100%);
  border:1px solid var(--line);border-radius:var(--card-radius);padding:28px 32px;
}
.cta-ico{
  width:58px;height:58px;flex:0 0 58px;border-radius:16px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 8px 18px rgba(207,18,100,.12);
}
.cta-serv h2{font-size:1.18rem;font-weight:700;color:var(--plum);margin-bottom:4px}
.cta-serv p{font-size:.9rem;font-weight:300;color:var(--ink);opacity:.8;margin:0}
.cta-serv .btn{margin-left:auto;flex:0 0 auto}

/* ---- transición al cambiar de categoría ---- */
.panel.entra,.serv-grid.entra{animation:panel-entra .36s var(--ease) both}
@keyframes panel-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---- responsive ---- */
@media(max-width:1100px){
  .nav-serv-grid{grid-template-columns:220px 1fr;gap:24px}
  .panel{grid-template-columns:1fr}
  .panel-img{padding:0 14px 14px;height:230px}
}
@media(max-width:900px){
  .nav-serv-grid{grid-template-columns:1fr}
  .cat-col{position:static;border:none;box-shadow:none;background:transparent;padding:0;margin-bottom:22px}
  .cat-menu{
    display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .cat-menu li{flex:0 0 auto;scroll-snap-align:start}
  .cat-btn{
    grid-template-columns:auto auto;gap:8px;background:#fff;
    border-color:var(--line);border-radius:100px;padding:11px 18px;white-space:nowrap;
  }
  .cat-btn::before,.cat-btn .cat-ico,.cat-btn .cat-n{display:none}
  .cat-todos{border:none;text-align:left;padding:4px 0 0}
  .serv-grid{grid-template-columns:1fr}
  .util-buscar{flex:1 1 100%}
  .cta-serv{flex-wrap:wrap}
  .cta-serv .btn{margin-left:0;width:100%;justify-content:center}
}
@media(max-width:560px){
  .nav-serv-in{padding:44px 20px 64px}
  .serv-hero-in{padding:40px 20px}
  .serv-hero::before,.serv-hero::after{width:70%;right:-22%}
  .panel-txt{padding:28px 24px}
  .serv-card{grid-template-columns:56px 1fr;gap:14px}
  .serv-mini{width:56px;height:56px}
  .serv-flecha{grid-column:1/-1;width:100%;border-radius:100px;height:38px}
  .cta-serv{padding:24px}
}

@media(prefers-reduced-motion:reduce){
  .panel.entra,.serv-grid.entra{animation:none}
  .cat-btn,.serv-card,.serv-flecha,.cat-ico{transition:none!important}
}

/* ============================================================
   MEJORAS GENERALES: agenda, confianza, proceso, franja, CTA móvil
   ============================================================ */
.ui-ico{display:block;color:var(--renova-primary)}
.linea-orn{
  display:block;width:78px;height:4px;border-radius:100px;margin:18px 0 20px;
  background:linear-gradient(90deg,var(--renova-orange) 0%,var(--renova-coral) 100%);
  position:relative;
}
.linea-orn::after{
  content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--renova-orange);
}
.linea-orn.centrada{margin:18px auto 0}

/* ---------- Agenda rápida ---------- */
.agenda-rapida{background:var(--renova-blush);padding:0;position:relative;z-index:3}
.agenda-rapida .wrap{transform:translateY(-46px);margin-bottom:-46px}
.agenda-card{
  background:var(--renova-ivory);border:1px solid var(--renova-line);
  border-radius:var(--renova-radius);box-shadow:var(--renova-shadow);
  padding:30px 32px 26px;
}
.agenda-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.agenda-ico{
  width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--renova-blush);
  display:flex;align-items:center;justify-content:center;
}
.agenda-head h2{
  font-family:var(--renova-font);font-weight:700;color:var(--renova-plum);
  font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:0;
}
.agenda-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:16px;align-items:end}
.agenda-campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.agenda-campo label{font-size:.82rem;font-weight:600;color:var(--renova-ink)}
.agenda-campo select,.agenda-campo input{
  font-family:var(--renova-font);font-size:.92rem;color:var(--renova-plum);
  padding:13px 16px;border:1px solid var(--renova-line);border-radius:14px;background:#fff;
  transition:border-color .2s var(--renova-ease),box-shadow .2s var(--renova-ease);
}
.agenda-campo select:focus,.agenda-campo input:focus{
  border-color:var(--renova-primary);box-shadow:0 0 0 3px rgba(207,18,100,.12);outline:none;
}
.agenda-form .btn{height:48px;padding:0 30px}
.agenda-nota{
  margin-top:18px;font-size:.8rem;font-weight:300;color:var(--renova-ink);opacity:.75;
}

/* ---------- Confianza ---------- */
.confianza{background:var(--renova-ivory);padding:96px 0}
.confianza-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

.foto-equipo-pendiente{
  position:relative;aspect-ratio:4/5;border-radius:var(--renova-radius);
  background:
    repeating-linear-gradient(135deg, rgba(207,18,100,.045) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, var(--renova-blush) 0%, #FFF7F1 100%);
  border:1.5px dashed var(--renova-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;
}
.fep-marca{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--renova-primary);background:#fff;border-radius:100px;padding:7px 16px;
  margin-bottom:16px;box-shadow:0 6px 14px rgba(207,18,100,.10);
}
.fep-txt{font-size:.9rem;font-weight:300;color:var(--renova-ink);opacity:.8;line-height:1.6}
.fep-txt small{font-size:.8rem;opacity:.75}

.confianza-txt h2{
  font-family:var(--renova-font);font-weight:700;color:var(--renova-plum);
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.02em;max-width:14ch;
}
.confianza-lead{font-size:1rem;font-weight:300;color:var(--renova-ink);opacity:.85;max-width:42ch;margin-bottom:30px}
.confianza-lista{list-style:none;margin:0;padding:0}
.confianza-lista li{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid var(--renova-line);
}
.confianza-lista li:last-child{border-bottom:none}
.cl-ico{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:var(--renova-blush);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--renova-ease);
}
.confianza-lista li:hover .cl-ico{transform:scale(1.06)}
.confianza-lista h3{font-size:1.05rem;font-weight:700;color:var(--renova-plum);margin-bottom:4px}
.confianza-lista p{font-size:.9rem;font-weight:300;color:var(--renova-ink);opacity:.8;margin:0;line-height:1.55}

/* ---------- Proceso: línea de tres pasos ---------- */
.proceso{background:var(--renova-blush);padding:96px 0}
.linea-pasos{
  list-style:none;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.paso{position:relative;display:flex;flex-direction:column;align-items:center}
.paso-nodo{
  width:48px;height:48px;border-radius:50%;
  background:var(--renova-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;position:relative;z-index:2;
  box-shadow:0 8px 18px -6px rgba(207,18,100,.55);
}
/* línea punteada naranja entre nodos */
.paso:not(:last-child)::after{
  content:"";position:absolute;top:24px;left:calc(50% + 34px);
  width:calc(100% + 28px - 68px);height:0;
  border-top:2px dotted var(--renova-orange);z-index:1;
}
.paso-card{
  margin-top:22px;width:100%;background:var(--renova-ivory);
  border:1px solid var(--renova-line);border-radius:var(--renova-radius);
  box-shadow:var(--renova-shadow);padding:30px 26px;text-align:center;
  transition:transform .3s var(--renova-ease),box-shadow .3s var(--renova-ease);
}
.paso-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px rgba(92,14,49,.16)}
.paso-ico{
  width:60px;height:60px;border-radius:50%;background:var(--renova-blush);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.paso-card h3{font-size:1.08rem;font-weight:700;color:var(--renova-plum);margin-bottom:8px}
.paso-card p{font-size:.9rem;font-weight:300;color:var(--renova-ink);opacity:.8;margin:0;line-height:1.6}

/* ---------- Franja de visita ---------- */
.franja-visita{background:var(--renova-ivory);padding:0 0 84px}
.franja-in{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--renova-blush) 0%,#FFF7F1 100%);
  border:1px solid var(--renova-line);border-radius:var(--renova-radius);
  padding:26px 32px;
}
.franja-dato{min-width:0}
.fd-et{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--renova-primary);margin-bottom:5px;
}
.franja-dato p{font-size:.92rem;font-weight:400;color:var(--renova-ink);margin:0}
.franja-acciones{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}

/* ---------- CTA móvil fijo ---------- */
.cta-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,253,252,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--renova-line);
  box-shadow:0 -8px 24px -16px rgba(43,22,32,.4);
}
.cm-principal{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:50px;border-radius:100px;background:var(--renova-primary);color:#fff;
  font-weight:700;font-size:.95rem;
  transition:transform .2s var(--renova-ease),background .2s var(--renova-ease);
}
.cm-principal:active{transform:scale(.98)}
.cm-wa{
  width:50px;height:50px;flex:0 0 50px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -8px rgba(37,211,102,.7);
  transition:transform .2s var(--renova-ease);
}
.cm-wa:active{transform:scale(.95)}

/* en escritorio, solo el acceso de WhatsApp flotante */
@media(min-width:901px){
  .cta-movil{
    display:flex;left:auto;right:26px;bottom:26px;
    width:auto;padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none;
  }
  .cta-movil .cm-principal{display:none}
  .cm-wa{width:58px;height:58px;flex:0 0 58px}
}
@media(max-width:900px){
  .cta-movil{display:flex}
  body{padding-bottom:78px}
}

/* ---------- Responsive de los bloques nuevos ---------- */
@media(max-width:1024px){
  .agenda-form{grid-template-columns:1fr 1fr;gap:14px}
  .agenda-form .btn{grid-column:1/-1;width:100%;justify-content:center}
  .confianza-grid{grid-template-columns:1fr;gap:36px}
  .foto-equipo-pendiente{max-width:420px;margin:0 auto}
  .confianza-txt h2{max-width:none}
}
@media(max-width:900px){
  .linea-pasos{grid-template-columns:1fr;gap:22px}
  .paso:not(:last-child)::after{display:none}
  .paso-card{margin-top:16px}
  .franja-acciones{margin-left:0;width:100%}
  .franja-acciones .btn{flex:1;justify-content:center}
}
@media(max-width:640px){
  .agenda-rapida .wrap{transform:translateY(-28px);margin-bottom:-28px}
  .agenda-card{padding:24px 20px}
  .agenda-form{grid-template-columns:1fr}
  .confianza,.proceso{padding:64px 0}
  .franja-in{padding:22px 20px;gap:20px}
}

@media(prefers-reduced-motion:reduce){
  .paso-card,.cl-ico,.cm-principal,.cm-wa{transition:none!important}
}

/* ---------- Carrusel de testimonios ---------- */
.test-sec{background:var(--renova-blush);padding:96px 0}
.test-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.test-nav{display:flex;gap:10px}
.test-viewport{overflow:hidden}
.test-track{display:flex;gap:22px;list-style:none;margin:0;padding:4px 0;touch-action:pan-y}
.test-track .test{
  flex:0 0 calc((100% - 44px)/3);min-width:0;
  background:var(--renova-ivory);border:1px solid var(--renova-line);
  border-radius:var(--renova-radius);box-shadow:var(--renova-shadow);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;
}
.test-txt{font-size:.96rem;font-weight:400;color:var(--renova-ink);line-height:1.65;margin:0;flex:1}
.test-who{
  display:flex;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--renova-line);
}
.test-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px}
.test-fuente{
  font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--renova-primary);
  margin:0;
}
/* la 5ta tarjeta (sin foto) no lleva .test-who: mantiene su propio borde superior */
.test-txt + .test-fuente{padding-top:14px;border-top:1px solid var(--renova-line)}
.test-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
@media(max-width:999px){.test-track .test{flex:0 0 calc((100% - 22px)/2)}}
@media(max-width:699px){
  .test-track .test{flex:0 0 100%}
  .test-sec{padding:64px 0}
  .test-cab{flex-direction:column;align-items:flex-start}
}

.agenda-precargada{
  background:var(--renova-blush);border:1px solid var(--renova-line);
  border-radius:14px;padding:12px 16px;margin:0 0 6px;
  font-size:.85rem;font-weight:400;color:var(--renova-ink);
}

/* ---------- Guardas de desbordamiento ----------
   input/select/textarea tienen anchura intrínseca y no encogen dentro de
   un grid o flex: sin esto desbordan la página en pantallas de 320px. */
input,select,textarea,button{max-width:100%}
.form,.field,.row-2,.row-2 > *,.contact-grid,.contact-grid > *,
.agenda-form,.agenda-campo{min-width:0}
.field input,.field select,.field textarea{width:100%}

/* sin foto: el bloque de confianza pasa a una sola columna centrada */
.confianza-simple{grid-template-columns:1fr;max-width:760px;margin-inline:auto;text-align:center}
.confianza-simple .confianza-txt h2{max-width:none}
.confianza-simple .linea-orn{margin-inline:auto}
.confianza-simple .confianza-lead{margin-inline:auto}
.confianza-simple .confianza-lista{text-align:left;max-width:560px;margin-inline:auto}

/* ============================================================
   MENÚ MÓVIL
   ============================================================ */
.burger{
  display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--renova-line);border-radius:14px;
  font-size:1.35rem;line-height:1;color:var(--renova-primary);cursor:pointer;
  transition:background .2s var(--renova-ease),border-color .2s var(--renova-ease);
}
.burger:hover{background:var(--renova-blush)}
.sub-toggle{display:none}
.nav-cta{display:none}
html.sin-scroll,html.sin-scroll body{overflow:hidden}

/* El menú hamburguesa llega hasta 1100px, no hasta 880: la barra de
   escritorio necesita ~1010px sólo para sus enlaces, así que entre 881 y
   1074 se partía en dos líneas (iPad horizontal, laptops de 1024). */
@media(max-width:1100px){
  .burger{display:flex;position:relative;z-index:101}
  /* con .nav-links fuera del flujo (position:fixed), el space-between dejaba
     el botón flotando en el centro: lo agrupamos con la hamburguesa */
  .nav > a.btn{margin-left:auto;margin-right:14px}

  /* El panel (.nav-links) se traslada a <body> para cubrir toda la
     pantalla (menu.js lo saca de header porque el position:sticky de
     header lo encerraba). Pero eso también lo saca de la "burbuja" de
     apilamiento de header: el z-index:101 del botón solo cuenta DENTRO
     de header, y header en conjunto vale 50 contra los 100 del panel.
     El panel gana y tapa el botón de cerrar por completo, aunque
     "funcione" al tacto en el punto exacto donde debería estar. Subir
     el z-index de header mientras el menú está abierto lo pone por
     encima del panel. */
  header.menu-abierto{z-index:110}

  /* el botón hamburguesa se convierte en × al abrir, sin tocar el marcado.
     Antes la × era blanca — tenía sentido cuando el botón se veía sobre el
     panel rosa, pero desde que el botón quedó fijo sobre la barra blanca
     del header (para no quedar tapado por el panel), blanco sobre blanco
     casi no se distinguía. Ahora usa el rosa de marca. */
  header.menu-abierto .burger{
    background:var(--renova-blush);border-color:var(--renova-line);color:transparent;
  }
  header.menu-abierto .burger::after{
    content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--renova-primary);font-size:1.9rem;line-height:1;font-weight:300;
  }

  /* ---- panel a pantalla completa, con la identidad de marca ----
     No es un desplegable blanco bajo el header: es una capa propia,
     con el degradado rosa→naranja que ya usan el CTA final y las
     tarjetas destacadas, para que se lea como Renovagyn y no como
     el menú de cualquier otra clínica. */
  .nav-links{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:100;
    /* un toque/arrastre en un menú táctil puede seleccionar el texto por
       accidente; el resaltado de selección del sistema (a menudo un color
       claro, parecido al degradado) puede tapar el texto blanco encima y
       parecer que "desapareció". Nadie necesita copiar el texto de un
       enlace de navegación, así que se desactiva la selección aquí. */
    -webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
      linear-gradient(155deg, var(--renova-primary) 0%, var(--renova-pink) 48%, var(--renova-coral) 78%, var(--renova-orange) 130%);
    padding:calc(var(--alto-cabecera,88px) + 12px) 8vw 32px;
    gap:0;font-size:1rem;counter-reset:menu-item;
    /* overflow-x:hidden es obligatorio aquí: por la spec de CSS, un
       overflow-y distinto de "visible" sin overflow-x explícito hace que el
       navegador calcule overflow-x como "auto" también. Si el contenido del
       panel es aunque sea 1px más ancho que su caja (fuente distinta, zoom
       del sistema, densidad de píxeles), el panel gana scroll horizontal
       propio y el navegador lo desplaza solo al enfocar un botón (como el
       acordeón de "Servicios"), cortando el texto por ambos lados. */
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    /* refuerzo para celular real: -webkit-overflow-scrolling:touch en un
       elemento position:fixed que además anima con transform es la
       combinación clásica en la que WebKit/Chrome móvil ignoran
       overflow-x:hidden durante el gesto táctil (aunque en escritorio se
       vea perfecto). touch-action:pan-y le prohíbe al navegador interpretar
       cualquier arrastre como paneo horizontal, a nivel de gesto, no de caja. */
    touch-action:pan-y;
    opacity:0;visibility:hidden;transform:translateX(100%);
    transition:opacity .38s var(--renova-ease),transform .42s var(--renova-ease),visibility .42s;
  }
  /* clase propia, no descendiente de header: el panel vive en <body> mientras está abierto */
  .nav-links.panel-abierto{opacity:1;visibility:visible;transform:none}

  /* trazo orgánico decorativo, apenas insinuado */
  .nav-links::before{
    content:"";position:absolute;left:-22%;bottom:-18%;width:75%;height:46%;
    border:2px solid rgba(255,255,255,.18);border-radius:58% 42% 40% 60%/50% 55% 45% 50%;
    pointer-events:none;
  }

  .nav-links > a:not(.nav-cta),
  .has-sub > a{
    display:flex;align-items:baseline;gap:14px;
    padding:17px 2px;color:#fff;font-weight:700;font-size:1.32rem;letter-spacing:-.01em;
    border-bottom:1px solid rgba(255,255,255,.22);position:relative;z-index:1;
  }
  /* :not(.nav-cta) también aquí: el botón "Agenda tu cita" es un <a> más
     dentro de .nav-links, así que sin excluirlo heredaba el numerito
     (01, 02...) como pseudo-elemento invisible (blanco sobre blanco).
     No se veía, pero SÍ ocupaba espacio antes del texto y lo descentraba
     dentro del botón — por eso "Agenda tu cita" se veía corrido. */
  .nav-links > a:not(.nav-cta)::before,
  .has-sub > a::before{
    counter-increment:menu-item;content:counter(menu-item,decimal-leading-zero);
    font-family:'Sacramento',cursive;font-size:1.15rem;font-weight:400;color:rgba(255,255,255,.75);
    flex:0 0 auto;
  }
  .nav-links > a::after,.has-sub > a::after{display:none}

  /* fila de Servicios: enlace + botón de acordeón */
  .has-sub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.22)}
  .has-sub > a{border-bottom:none;min-width:0}
  .sub-toggle{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;background:rgba(255,255,255,.16);border:none;border-radius:50%;
    color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;
  }
  .sub-toggle span{display:block;transition:transform .25s var(--renova-ease)}
  .has-sub.abierto .sub-toggle span{transform:rotate(90deg)}

  /* submenú como acordeón, sobre el mismo degradado */
  .submenu{
    grid-column:1/-1;position:static;transform:none;opacity:1;visibility:visible;
    background:none;border:none;box-shadow:none;padding:0;min-width:0;
    display:block;overflow:hidden;max-height:0;
    transition:max-height .32s var(--renova-ease);
  }
  /* El desplegable de escritorio se centra con translateX(-50%), y la regla
     que lo hace visible (.has-sub:hover/:focus-within .submenu) es más
     específica que el .submenu de aquí arriba: al tocar un enlace en el
     celular, .has-sub recibía el foco y el acordeón entero se corría media
     anchura a la izquierda, cortando los títulos. Se anula con la misma
     especificidad. */
  .has-sub:hover .submenu,
  .has-sub:focus-within .submenu{transform:none}
  .has-sub.abierto .submenu{max-height:640px}
  .submenu > li{overflow:visible}
  .submenu::before{display:none}
  .submenu li a{
    padding:12px 14px;font-size:.92rem;font-weight:400;color:rgba(255,255,255,.88);
    border-left:2px solid rgba(255,255,255,.35);border-radius:0;margin-left:6px;
    display:block;overflow-wrap:anywhere;
  }
  .submenu li a:hover{background:rgba(255,255,255,.12)}
  .sub-todos{border-top:none;margin-top:0;padding-top:0}
  .sub-todos a{text-align:left!important;color:#fff!important;font-weight:600!important}

  /* CTA propio del panel, al final del recorrido (enlace real, lo añade menu.js) */
  .nav-cta{
    display:flex!important;align-items:center;justify-content:center;
    margin-top:24px;height:54px;border-radius:100px;background:#fff;color:var(--renova-primary)!important;
    font-weight:700;font-size:.98rem;position:relative;z-index:1;border:none;
  }
}

/* En móvil la barra fija inferior ya ofrece "Agenda tu cita": en el header
   sobra y aprieta el logo. En tablet (901–1100) sí se mantiene, porque ahí
   no aparece esa barra inferior. */
@media(max-width:900px){
  .nav > a.btn{display:none}
}

/* la cabecera compacta al bajar cambia el alto del panel */
@media(max-width:1100px){
  header{--alto-cabecera:88px}
  header.is-scrolled{--alto-cabecera:74px}
}
@media(max-width:560px){
  header{--alto-cabecera:76px}
  header.is-scrolled{--alto-cabecera:68px}
  .nav .btn{padding:10px 16px;font-size:.8rem}
  .burger{width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){
  .nav-links,.submenu,.sub-toggle span{transition:none!important}
}

/* El botón de WhatsApp mostraba el número como texto; ahora es solo el
   ícono, así que se anula el width:100% que heredaba de .side-card .btn
   / .pack .btn para que no quede un pill enorme y vacío. */
.side-card .btn-wa,.pack .btn-wa{width:auto;align-self:center}

/* ---------- Áreas táctiles en móvil y tablet (mínimo 40px) ---------- */
@media(max-width:1100px){
  .foot-list a,
  .foot-bottom a,
  footer p a,
  .crumbs a,
  .map + p a,
  .carrusel-todos a,
  .cat-todos,
  .sub-todos a{display:inline-block;padding-top:11px;padding-bottom:11px}
  .foot-list{gap:2px}
  .cat-todos{padding-top:16px;padding-bottom:16px}

  /* los puntos conservan su tamaño visual y ganan área de toque */
  .dot{position:relative}
  .dot::after{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:40px;height:40px;
  }
  .carrusel-dots,.test-dots{gap:4px}

  .serv-flecha{height:44px}
  .scard-cta{display:inline-block;padding:6px 0}
  .nav-btn{width:48px;height:48px}
}

.staff-cta-link{margin-top:14px;text-align:center}
.staff-cta-link a{font-size:.92rem;font-weight:600;color:var(--rosa);transition:color .15s}
.staff-cta-link a:hover{color:var(--rosa-intenso)}

.confianza-privacidad{margin-top:24px;text-align:center}
.confianza-privacidad a{font-size:.82rem;font-weight:600;color:var(--renova-primary);opacity:.85;transition:opacity .15s}
.confianza-privacidad a:hover{opacity:1}

/* ============================================================
   PÁGINA DE SERVICIOS PARA TRÁFICO DE ADS (versión B)
   ============================================================ */
.ads-servicios{background:var(--papel);padding:64px 0}
.ads-lista{display:flex;flex-direction:column;gap:0}
.ads-item{padding:44px 0;border-bottom:1px solid var(--linea)}
.ads-item:first-child{padding-top:0}
.ads-item:last-child{border-bottom:none}
.ads-item-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.ads-num{
  font-family:'Sacramento',cursive;font-size:1.7rem;color:var(--rosa);line-height:1;flex:0 0 auto;
}
.ads-item-head h2{margin:0;font-size:1.5rem}
.ads-tag{color:var(--tinta-2);font-weight:500;margin-bottom:22px;font-size:1.02rem}
.ads-body h3{font-size:1.02rem;margin:20px 0 8px}
.ads-body h3:first-child{margin-top:0}
.ads-body p{color:var(--tinta-2);font-weight:300;margin-bottom:10px;line-height:1.6}
.ads-body ul{margin:0 0 10px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ads-body ul li{
  color:var(--tinta-2);font-weight:300;line-height:1.6;padding-left:22px;position:relative;
}
.ads-body ul li::before{content:"—";position:absolute;left:0;color:var(--rosa)}

.ads-ver-todos{
  text-align:center;margin-top:16px;padding:36px 24px;border-radius:var(--r-l);
  background:var(--papel-2);
}
.ads-ver-todos p{margin-bottom:16px;color:var(--tinta-2)}

.ads-legal{background:var(--papel-2);padding:28px 0}
.ads-legal p{
  max-width:70ch;margin:0 auto;text-align:center;font-size:.82rem;
  color:var(--tinta-2);font-weight:300;line-height:1.6;
}

@media(max-width:640px){
  .ads-servicios{padding:40px 0}
  .ads-item{padding:32px 0}
  .ads-item-head h2{font-size:1.25rem}
}

.aviso-cookies{
  max-width:900px;margin:0 auto 18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  text-align:center;font-size:.76rem;font-weight:300;color:rgba(255,255,255,.65);line-height:1.6;
}
.aviso-cookies a{color:rgba(255,255,255,.85);text-decoration:underline}