/* ==================================================================
   Dr. Joel Marcelino — Sistema de diseño v3 "Editorial"
   Marca real (Manual 2024, White Beetle) · craft de imprenta
   Principio: papel, tinta y aire. Cero degradados de relleno.
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* marca oficial */
  --prussian:#0F3759;
  --prussian-deep:#08202F;
  --beau:#B4CBD9;
  --nude:#EDDFD9;
  --dim:#766C69;
  --cadet:#565F63;

  /* papel y tinta */
  --paper:#F7F4F0;
  --paper-warm:#F2EDE7;
  --ink:#14212C;
  --ink-soft:#46525C;
  --rule:rgba(20,33,44,.14);
  --rule-soft:rgba(20,33,44,.07);

  --fd:'Cormorant Garamond', 'Times New Roman', serif;
  --fb:'Inter', system-ui, -apple-system, sans-serif;

  --maxw:1280px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.7,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:hidden;
}
/* height:auto es obligatorio: al poner width/height en el HTML (para evitar el
   salto de layout) las marcas de agua quedaron con el ancho del CSS y la altura
   del atributo. El isotipo salía estirado hasta un 153%. Los casos que sí
   necesitan altura fija llevan selector propio y siguen ganando. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--prussian);color:#fff}

/* ---- GRANO: la textura de papel que mata el look digital ---- */
body::before{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.28;mix-blend-mode:multiply;
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 20%{transform:translate(-8%,2%)}
  30%{transform:translate(4%,-6%)} 40%{transform:translate(-3%,7%)} 50%{transform:translate(-6%,3%)}
  60%{transform:translate(6%,0)} 70%{transform:translate(0,4%)} 80%{transform:translate(2%,-3%)} 90%{transform:translate(-4%,2%)}
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(80px,11vw,150px) 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---- tipografía editorial ---- */
h1,h2,h3{font-family:var(--fd);font-weight:500;color:var(--ink);line-height:1.04;letter-spacing:-.012em}
.display{font-size:clamp(46px,8vw,108px);line-height:.96;letter-spacing:-.022em;font-weight:500}
.display em{font-style:italic;font-weight:500}
h2.sec{font-size:clamp(32px,4.4vw,58px);line-height:1.05;font-weight:500;letter-spacing:-.015em;margin-bottom:18px}
h2.sec em{font-style:italic}
h3{font-size:26px;font-weight:500}

/* micro-label: mayúsculas, tracking amplio, hairline */
.label{
  font-family:var(--fb);font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.label::after{content:"";flex:1;height:1px;background:var(--rule-soft);max-width:90px}
.label.center{justify-content:center}
.label.center::before{content:"";flex:1;height:1px;background:var(--rule-soft);max-width:90px}
.label.on-dark{color:var(--beau)}
.label.on-dark::after,.label.on-dark::before{background:rgba(180,203,217,.28)}

.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-soft);font-weight:400;line-height:1.7;max-width:52ch}
.lead strong{font-weight:500;color:var(--ink)}
p.body{font-size:16px;color:var(--ink-soft);font-weight:400;line-height:1.75;max-width:60ch}
.idx{font-family:var(--fd);font-size:13px;color:var(--dim);font-style:italic;letter-spacing:.04em}

/* ---- reveals ---- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  body::before{animation:none}
}

/* ---- botones editoriales (rectangulares, NO pills de IA) ---- */
.btn{
  display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:19px 34px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--paper)}
.btn span{position:relative;z-index:1}
.btn .ar{position:relative;z-index:1;transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn.fill{background:var(--prussian);border-color:var(--prussian);color:#fff}
.btn.fill::before{background:var(--ink)}
.btn.fill:hover{color:#fff;border-color:var(--ink)}
.btn.light{border-color:rgba(255,255,255,.5);color:#fff}
.btn.light::before{background:#fff}
.btn.light:hover{color:var(--prussian);border-color:#fff}
.btn.solid-light{background:#fff;border-color:#fff;color:var(--prussian)}
.btn.solid-light::before{background:var(--nude)}
.btn.solid-light:hover{color:var(--prussian)}

.ln{position:relative;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding-bottom:5px;display:inline-flex;gap:9px;align-items:center}
.ln::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.ln:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:22px 0;border-bottom:1px solid transparent;transition:background .6s var(--ease),border-color .6s var(--ease),padding .6s var(--ease)}
.nav.solid{background:rgba(247,244,240,.9);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--rule-soft);padding:14px 0}
.nav .bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brandmark{display:flex;align-items:center;flex-shrink:0}
.brandmark img{height:44px;width:auto;transition:height .6s var(--ease)}
.nav.solid .brandmark img{height:36px}
.brandmark .lw{display:none}
.nav.solid .brandmark .lw{display:block}
.nav.solid .brandmark .ld{display:none}
.nlinks{display:flex;align-items:center;gap:38px}
.nlinks a{font-size:12.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#fff;position:relative;padding-bottom:4px;opacity:.82;transition:opacity .4s,color .6s}
.nav.solid .nlinks a{color:var(--ink)}
.nlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nlinks a:hover{opacity:1}
.nlinks a:hover::after,.nlinks a.on::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:14px 26px;font-size:11px;border-color:rgba(255,255,255,.5);color:#fff}
.nav .btn::before{background:#fff}
.nav .btn:hover{color:var(--prussian);border-color:#fff}
.nav.solid .btn{border-color:var(--ink);color:var(--ink)}
.nav.solid .btn::before{background:var(--ink)}
.nav.solid .btn:hover{color:var(--paper)}
.burger{display:none;background:none;border:none;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:#fff;margin:6px 0;transition:.4s var(--ease)}
.nav.solid .burger span{background:var(--ink)}
.mmenu{position:fixed;inset:0;z-index:79;background:var(--prussian-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu a{font-family:var(--fd);font-size:34px;color:#fff;font-weight:300;padding:9px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mmenu.open a{opacity:1;transform:none}
.mmenu.open a:nth-child(1){transition-delay:.1s}.mmenu.open a:nth-child(2){transition-delay:.16s}
.mmenu.open a:nth-child(3){transition-delay:.22s}.mmenu.open a:nth-child(4){transition-delay:.28s}
.mmenu.open a:nth-child(5){transition-delay:.34s}.mmenu.open a:nth-child(6){transition-delay:.4s}

/* ---- HERO editorial ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--prussian-deep);color:#fff;overflow:hidden}
.hero .mark{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(62vw,760px);opacity:.07;pointer-events:none;filter:brightness(0) invert(1)}
.hero .veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 8% 40%, rgba(8,32,47,.96) 0%, rgba(8,32,47,.72) 45%, rgba(8,32,47,.5) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:90px}
@media(max-width:560px){.hero .wrap{padding-bottom:130px}.slogan{margin-top:38px}}
.hero .label{margin-bottom:34px}
.hero .display{color:#fff;max-width:15ch;margin-bottom:30px}
.hero .display em{color:var(--beau)}
.hero .lead{color:rgba(255,255,255,.85);margin-bottom:44px;max-width:44ch}
.hero .acts{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.slogan{font-family:var(--fd);font-style:italic;font-size:17px;color:var(--beau);opacity:.8;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);max-width:340px}

/* ---- barra de credenciales ---- */
.creds{background:var(--prussian);color:#fff;border-top:1px solid rgba(255,255,255,.08);padding:0}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-left:0;padding-right:0}
.cred{padding:34px 26px;border-right:1px solid rgba(255,255,255,.09)}
.cred:last-child{border-right:none}
.cred .n{font-family:var(--fd);font-size:15px;color:var(--beau);font-style:italic;margin-bottom:9px}
.cred p{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:400;line-height:1.55}

/* ---- marco de imagen editorial ---- */
.frame{position:relative;background:var(--paper-warm);overflow:hidden;border:1px solid var(--rule-soft)}
.frame::after{content:"";position:absolute;inset:0;background:url("assets/isotipo.png") center/38% no-repeat;opacity:.05;filter:grayscale(1)}
.frame .cap{position:absolute;left:0;bottom:0;padding:12px 18px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);background:rgba(247,244,240,.82);backdrop-filter:blur(6px);z-index:2}
.frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* ---- grid asimétrico ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.split.wide-l{grid-template-columns:1.25fr 1fr}
.split.wide-r{grid-template-columns:1fr 1.25fr}

/* ---- procedimientos: lista editorial ---- */
.plist{border-top:1px solid var(--rule-soft);margin-top:56px}
.prow{display:grid;grid-template-columns:64px 1fr auto 44px;gap:26px;align-items:center;padding:30px 8px;border-bottom:1px solid var(--rule-soft);position:relative;transition:padding .5s var(--ease);isolation:isolate}
.prow::before{content:"";position:absolute;inset:0;background:var(--paper-warm);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);z-index:-1}
.prow:hover::before{transform:scaleX(1)}
.prow:hover{padding-left:22px;padding-right:22px}
.prow .num{font-family:var(--fd);font-size:14px;color:var(--dim);font-style:italic}
.prow h3{font-size:clamp(21px,2.4vw,31px);font-weight:400;transition:color .4s;display:flex;align-items:center}
.prow:hover h3{color:var(--prussian)}
.prow .dsc{font-size:13.5px;color:var(--ink-soft);font-weight:400;max-width:34ch;text-align:right}
.prow .ar{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim);transition:.5s var(--ease)}
.prow:hover .ar{background:var(--prussian);border-color:var(--prussian);color:#fff;transform:rotate(-45deg)}
.prow .star{font-family:var(--fd);font-style:italic;font-size:11.5px;color:var(--prussian);border:1px solid var(--rule);padding:3px 10px;margin-left:14px;white-space:nowrap}

/* ---- pilares ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-soft);margin-top:8px}
.pil{padding:44px 34px 44px 0;border-right:1px solid var(--rule-soft)}
.pil:last-child{border-right:none;padding-right:0}
.pil:not(:first-child){padding-left:34px}
.pil .n{font-family:var(--fd);font-size:44px;font-weight:300;color:var(--beau);line-height:1;margin-bottom:20px}
.pil h3{font-size:19px;font-weight:500;margin-bottom:11px;letter-spacing:-.01em}
.pil p{font-size:14px;color:var(--ink-soft);font-weight:400;line-height:1.7}
.dark .pillars{border-top-color:rgba(255,255,255,.12)}
.dark .pil{border-right-color:rgba(255,255,255,.12)}
.dark .pil p{color:rgba(255,255,255,.66)}

/* ---- cita editorial ---- */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote .mk{font-family:var(--fd);font-size:80px;color:var(--beau);line-height:.5;display:block;margin-bottom:26px}
.quote blockquote{font-family:var(--fd);font-size:clamp(24px,3.2vw,42px);font-weight:300;font-style:italic;line-height:1.32;color:var(--ink);letter-spacing:-.015em}
.quote .who{margin-top:32px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}

/* ---- proceso ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:60px}
.steps::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:var(--rule-soft)}
.stp{padding:0 26px 0 0;position:relative}
.stp .dot{width:9px;height:9px;border-radius:50%;background:var(--prussian);margin-bottom:30px;position:relative;z-index:2;outline:6px solid var(--paper)}
.stp .idx{display:block;margin-bottom:9px}
.stp h3{font-size:17.5px;font-weight:500;margin-bottom:9px}
.stp p{font-size:13.5px;color:var(--ink-soft);font-weight:400;line-height:1.65}

/* ---- oscuro ---- */
.dark{background:var(--prussian-deep);color:#fff;position:relative;overflow:hidden}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark p.body{color:rgba(255,255,255,.8)}
.dark .frame{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark .frame::after{filter:grayscale(1) brightness(0) invert(1);opacity:.06}
.dark .frame .cap{background:rgba(8,32,47,.8);color:rgba(255,255,255,.6)}

/* ---- CTA ---- */
.cta{background:var(--prussian);color:#fff;text-align:center;padding:clamp(70px,10vw,120px) var(--gut);position:relative;overflow:hidden}
.cta .mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(70vw,620px);opacity:.06;filter:brightness(0) invert(1);pointer-events:none}
.cta .inner{position:relative;z-index:2}
.cta h2{color:#fff;margin-bottom:18px}
.cta .lead{color:rgba(255,255,255,.72);margin:0 auto 40px}
.cta .acts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---- footer ---- */
.foot{background:var(--prussian-deep);color:#fff;padding:80px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot .brandmark img{height:52px;margin-bottom:20px}
.foot p{font-size:13px;color:rgba(255,255,255,.65);font-weight:400;line-height:1.75}
.foot h4{font-family:var(--fb);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--beau);margin-bottom:18px;font-weight:500}
.foot-grid a{display:block;font-size:13.5px;color:rgba(255,255,255,.75);font-weight:400;padding:5px 0;transition:color .4s,padding-left .4s var(--ease)}
.foot-grid a:hover{color:#fff;padding-left:6px}
.foot-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:26px;font-size:11.5px;color:rgba(255,255,255,.4)}
.foot-bot a{color:rgba(255,255,255,.55);display:inline}
.foot-bot a:hover{color:#fff}

/* ---- floats ---- */
.floats{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;gap:11px;align-items:flex-end}
.fab{display:flex;align-items:center;gap:10px;padding:14px 22px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#fff;box-shadow:0 14px 34px -14px rgba(0,0,0,.5);transition:transform .5s var(--ease),background .4s}
.fab:hover{transform:translateY(-3px)}
.fab.wa{background:#0F3759}
.fab.wa:hover{background:#14486f}
.fab.pre{background:var(--nude);color:var(--prussian)}

/* ---- page hero interiores ---- */
.phero{background:var(--prussian-deep);color:#fff;padding:190px 0 clamp(70px,9vw,110px);position:relative;overflow:hidden}
.phero .mark{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(50vw,520px);opacity:.06;filter:brightness(0) invert(1)}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:clamp(38px,6vw,80px);font-weight:300;letter-spacing:-.028em;margin-bottom:20px;line-height:.98}
.phero h1 em{font-style:italic;color:var(--beau)}
.phero .lead{color:rgba(255,255,255,.85)}

/* ---- chips discretos ---- */
.chips{display:flex;gap:0;flex-wrap:wrap;margin:26px 0}
.chip{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:8px 18px 8px 0;margin-right:18px;border-right:1px solid var(--rule-soft);font-weight:400}
.chip:last-child{border-right:none;margin-right:0}
.dark .chip,.phero .chip{color:rgba(255,255,255,.7);border-right-color:rgba(255,255,255,.16)}

/* ---- cursor ---- */
.cur{display:none}
@media(hover:hover) and (pointer:fine){
  .cur{display:block;position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--prussian);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s;mix-blend-mode:multiply}
  .cur.big{width:52px;height:52px;background:rgba(15,55,89,.14)}
}

/* ---- responsive ---- */
@media(max-width:1080px){
  .creds .wrap{grid-template-columns:repeat(2,1fr)}
  .cred:nth-child(2){border-right:none}
  .cred:nth-child(1),.cred:nth-child(2){border-bottom:1px solid rgba(255,255,255,.09)}
  .steps{grid-template-columns:repeat(2,1fr);gap:38px 0}
  .steps::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
/* Con 6 ítems el nav se parte en dos líneas entre 861 y 1180px ("EL DR." y
   "VIVES FUERA" quedan en dos renglones). Nada de saltos de línea y menos aire. */
.nlinks a{white-space:nowrap}
@media(max-width:1180px){
  .nlinks{gap:24px}
  .nlinks a{font-size:11.5px;letter-spacing:.08em}
  .nav .btn{padding:13px 20px}
}
@media(max-width:960px){
  .nlinks{gap:17px}
  .nlinks a{font-size:10.5px;letter-spacing:.05em}
}

@media(max-width:860px){
  .nlinks{display:none}
  .burger{display:block;margin-right:-8px}
  .nav .btn{display:none}          /* en móvil el CTA vive en el hero y en el float */
  .nav .bar{gap:12px}
  .split,.split.wide-l,.split.wide-r{grid-template-columns:1fr;gap:38px}
  .pillars{grid-template-columns:1fr}
  .pil{border-right:none;border-bottom:1px solid var(--rule-soft);padding:32px 0!important}
  .pil:last-child{border-bottom:none}
  .dark .pil{border-bottom-color:rgba(255,255,255,.12)}
  .prow{grid-template-columns:38px 1fr 34px;gap:16px;padding:22px 4px}
  .prow .dsc,.prow .star{display:none}
  .hero .mark{right:-30%;width:110vw;opacity:.05}
}
@media(max-width:560px){
  .creds .wrap{grid-template-columns:1fr}
  .cred{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.09);padding:24px 0}
  .cred:last-child{border-bottom:none}
  .foot-grid{grid-template-columns:1fr}
  .brandmark img{height:34px}
  .nav.solid .brandmark img{height:30px}
  .btn{padding:16px 26px;font-size:11px}
  .floats{right:14px;bottom:14px}
  .fab{padding:12px 16px;font-size:10px}
}


/* ================= puente: componentes de páginas interiores ================= */
.proc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:40px}
.proc-card{background:#fff;border:1px solid var(--rule-soft);display:block;transition:transform .6s var(--ease),border-color .5s;position:relative}
.proc-card:hover{transform:translateY(-4px);border-color:var(--rule)}
.proc-card .thumb{aspect-ratio:4/3}
.proc-card .body{padding:22px}
.proc-card h3{font-size:20px;font-weight:500;margin-bottom:6px}
.proc-card p{font-size:13.5px;color:var(--ink-soft);font-weight:300;line-height:1.6}
.proc-card .more{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--prussian)}
.proc-card.hero-tag::after,.star-flag{position:absolute;top:12px;right:12px;font-family:var(--fd);font-style:italic;font-size:11px;color:var(--prussian);background:var(--nude);padding:4px 11px;z-index:3}
.star-flag{content:none}
.proc-card.hero-tag::after{content:"Estrella"}

.safe-list{display:flex;flex-direction:column;gap:0}
.safe-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.safe-item:last-child{border-bottom:none}
.safe-item .num{flex-shrink:0;font-family:var(--fd);font-size:22px;color:var(--beau);font-style:italic;width:30px}
.safe-item h3{font-size:17px;font-weight:500;margin-bottom:5px}
.safe-item p{font-size:14px;color:var(--ink-soft);font-weight:300}

.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;background:var(--prussian);color:#fff;padding:0;margin:0}
.statband .s{padding:32px 24px;border-right:1px solid rgba(255,255,255,.1);text-align:left}
.statband .s:last-child{border-right:none}
.statband .n{font-family:var(--fd);font-size:34px;font-weight:300;color:var(--beau);line-height:1}
.statband .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:8px}

.cta-final{background:var(--prussian);color:#fff;text-align:center;padding:clamp(60px,8vw,100px) var(--gut);position:relative}
.cta-final h2{color:#fff;font-family:var(--fd);font-size:clamp(30px,4vw,50px);font-weight:300;margin-bottom:14px}
.cta-final p{color:rgba(255,255,255,.72);font-weight:300;max-width:52ch;margin:0 auto 34px}
.cta-final .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.steps .step{padding:0 24px 0 0}
.step .n{font-family:var(--fd);font-size:34px;font-weight:300;color:var(--beau);line-height:1;margin-bottom:14px}
.step h3{font-size:17px;font-weight:500;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--ink-soft);font-weight:300;line-height:1.65}

.faq-item{border-bottom:1px solid var(--rule-soft)}
.faq-q{padding:24px 0;font-family:var(--fd);font-size:21px;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;font-weight:400}
.faq-q::after{content:"+";font-size:20px;color:var(--dim);transition:transform .4s var(--ease);flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{padding-bottom:24px;font-size:15px;color:var(--ink-soft);font-weight:300;line-height:1.75}

.carousel{display:flex;gap:16px;overflow-x:auto;padding:8px var(--gut) 26px;scroll-snap-type:x mandatory}
.carousel .frame{flex:0 0 300px;aspect-ratio:4/5;scroll-snap-align:start}

.alt{background:var(--paper-warm)}
.split .frame{width:100%}
.timeline{border-top:1px solid var(--rule-soft)}
.tl-item{display:flex;gap:26px;padding:24px 0;border-bottom:1px solid var(--rule-soft)}
.tl-item .yr{flex-shrink:0;width:120px;font-family:var(--fd);font-size:17px;color:var(--prussian);font-style:italic}
.tl-item h3{font-size:16.5px;font-weight:500;margin-bottom:4px}
.tl-item p{font-size:13.5px;color:var(--ink-soft);font-weight:300}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-soft);margin-top:30px}
.val{padding:34px 24px 34px 0;border-right:1px solid var(--rule-soft);text-align:left;background:none;border-radius:0}
.val:last-child{border-right:none}
.val .n{font-family:var(--fd);font-size:40px;font-weight:300;color:var(--beau);line-height:1;margin-bottom:8px}
.val p{font-size:13px;color:var(--ink-soft);font-weight:300}
.bio-hero{background:var(--prussian-deep)!important;color:#fff}
.bio-hero h1,.bio-hero .lead{color:#fff}
.bio-hero .lead{color:rgba(255,255,255,.7)}
.lp-hero{background:var(--prussian-deep)!important}
.otras{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-soft);margin-top:36px}
.otras a{padding:22px 0;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);padding-right:20px;padding-left:20px;font-family:var(--fd);font-size:19px;color:var(--ink);background:none;border-radius:0;transition:color .4s,background .4s}
.otras a:first-child{padding-left:0}
.otras a:last-child{border-right:none}
.otras a:hover{color:var(--prussian);background:var(--paper-warm);transform:none}
.panel{background:#fff;border:1px solid var(--rule-soft);border-radius:0;box-shadow:none;padding:32px}
.fld,.field-lg{border-radius:0;border:1px solid var(--rule);font-weight:300}
.fld:focus,.field-lg:focus{outline:none;border-color:var(--prussian)}
.q-card{border-radius:0;box-shadow:none;border:1px solid var(--rule-soft)}
.opt{border-radius:0;font-weight:400}
.progress,.progress .bar{border-radius:0}
.drop{border-radius:0}
.day,.slot{border-radius:0}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.gal-item .frame{aspect-ratio:3/4}
.gal-item .tag{position:absolute;bottom:12px;left:12px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;background:rgba(247,244,240,.85);color:var(--dim);padding:7px 13px;z-index:3;border-radius:0}
.filter{border-radius:0;font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.filter.on{background:var(--prussian);border-color:var(--prussian)}
.disclaimer{border-radius:0;font-weight:300}
.check{border-radius:50%}
.nx{border-radius:0;border:1px solid var(--rule-soft);box-shadow:none}
.legal h2{font-family:var(--fd);font-weight:500}
@media(max-width:860px){
  .vals,.otras,.gal-grid{grid-template-columns:1fr}
  .val{border-right:none;border-bottom:1px solid var(--rule-soft);padding:26px 0}
  .otras a{border-right:none;padding-left:0!important}
  .tl-item{flex-direction:column;gap:4px}.tl-item .yr{width:auto}
  .statband .s{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media(max-width:960px){.gal-grid{grid-template-columns:repeat(2,1fr)}}


/* ---- puente: clases de botón del sistema viejo ---- */
.btn.pri{background:var(--prussian);border-color:var(--prussian);color:#fff}
.btn.pri::before{background:var(--ink)}
.btn.pri:hover{color:#fff;border-color:var(--ink)}
.btn.ghost{border-color:var(--rule);color:var(--ink)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--paper);border-color:var(--ink)}
.btn.on-dark{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn.on-dark::before{background:#fff}
.btn.on-dark:hover{color:var(--prussian);border-color:#fff}

/* blindaje: cualquier .btn sin variante dentro de zona oscura NO puede quedar tinta-sobre-tinta */
.dark .btn:not(.fill):not(.pri):not(.solid-light),
.phero .btn:not(.fill):not(.pri):not(.solid-light),
.bio-hero .btn:not(.fill):not(.pri):not(.solid-light),
.lp-hero .btn:not(.fill):not(.pri):not(.solid-light),
.cta-final .btn:not(.fill):not(.pri):not(.solid-light),
.hero .btn:not(.fill):not(.pri):not(.solid-light){
  border-color:rgba(255,255,255,.5);color:#fff;background:transparent;
}
.dark .btn:not(.fill):not(.pri):not(.solid-light)::before,
.phero .btn:not(.fill):not(.pri):not(.solid-light)::before,
.bio-hero .btn:not(.fill):not(.pri):not(.solid-light)::before,
.lp-hero .btn:not(.fill):not(.pri):not(.solid-light)::before,
.cta-final .btn:not(.fill):not(.pri):not(.solid-light)::before,
.hero .btn:not(.fill):not(.pri):not(.solid-light)::before{background:#fff}
.dark .btn:not(.fill):not(.pri):not(.solid-light):hover,
.phero .btn:not(.fill):not(.pri):not(.solid-light):hover,
.bio-hero .btn:not(.fill):not(.pri):not(.solid-light):hover,
.lp-hero .btn:not(.fill):not(.pri):not(.solid-light):hover,
.cta-final .btn:not(.fill):not(.pri):not(.solid-light):hover,
.hero .btn:not(.fill):not(.pri):not(.solid-light):hover{color:var(--prussian);border-color:#fff}
/* sobre fondo oscuro, .pri en prussian se pierde → usar sólido claro */
.bio-hero .btn.pri,.lp-hero .btn.pri,.dark .btn.pri,.cta-final .btn.pri{background:#fff;border-color:#fff;color:var(--prussian)}
.bio-hero .btn.pri::before,.lp-hero .btn.pri::before,.dark .btn.pri::before,.cta-final .btn.pri::before{background:var(--nude)}
.bio-hero .btn.pri:hover,.lp-hero .btn.pri:hover,.dark .btn.pri:hover,.cta-final .btn.pri:hover{color:var(--prussian);border-color:#fff}
/* los .btn sin <span> interno (páginas viejas) necesitan el texto sobre el fill */
.btn{isolation:isolate}
.btn::before{z-index:-1}

/* aire bajo el nav sólido en páginas sin hero oscuro */
.navpad{height:78px}
@media(max-width:560px){.navpad{height:66px}}


/* ---- miniatura editorial en la lista de procedimientos ---- */
.prow{grid-template-columns:48px 150px 1fr auto 44px}
.pthumb{width:150px;height:113px;overflow:hidden;background:var(--paper-warm);position:relative}
.pthumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;filter:saturate(.92)}
.prow:hover .pthumb img{transform:scale(1.07);filter:saturate(1)}
@media(max-width:860px){
  .prow{grid-template-columns:30px 96px 1fr 30px;gap:14px}
  .pthumb{width:96px;height:72px}
}

.proc-steps .ss-card{isolation:isolate}
/* ============ PROCESO: cards que se APILAN al scrollear (mecánica del sitio de Anny) ============
   Clave: TODAS las cards son sticky al mismo top → cada una sube y tapa a la anterior.
   La imagen de la izquierda es sticky aparte y se mantiene.                                     */
.proc-steps{background:#EBE4DB;padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(80px,10vw,140px);position:relative}
.ss-head{text-align:center;max-width:660px;margin:0 auto clamp(48px,6vw,78px)}
.ss-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(32px,4vw,56px);align-items:start}

/* columna izquierda: se queda */
.ss-left{position:sticky;top:100px}
.ss-left .frame{aspect-ratio:4/5;box-shadow:0 30px 70px rgba(15,55,89,.14)}
.ss-note{margin-top:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* columna derecha: las cards se apilan */
.ss-right{display:flex;flex-direction:column;gap:96px}
.ss-card{
  position:sticky;top:118px;
  min-height:300px;display:flex;flex-direction:column;justify-content:center;
  background:#fff;border:1px solid var(--rule-soft);
  padding:clamp(32px,3.4vw,52px);padding-right:clamp(90px,13vw,190px);
  overflow:hidden;
  box-shadow:0 22px 60px rgba(20,33,44,.13);
}
.ss-card .lbl{font-family:var(--fb);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--prussian);margin-bottom:12px}
.ss-card h3{font-family:var(--fd);font-size:clamp(24px,2.6vw,32px);font-weight:400;letter-spacing:-.02em;margin-bottom:13px;max-width:15ch}
.ss-card p{font-size:15px;color:var(--ink-soft);font-weight:400;line-height:1.7;max-width:40ch;position:relative;z-index:2}
.ss-card .ghost{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font-family:var(--fd);font-size:clamp(120px,15vw,205px);font-weight:300;
  color:var(--prussian);opacity:.07;line-height:1;pointer-events:none;user-select:none;
}
@media(max-width:900px){
  .ss-grid{grid-template-columns:1fr;gap:30px}
  .ss-left{position:relative;top:0}
  .ss-left .frame{aspect-ratio:16/10}
  .ss-right{gap:64px}
  .ss-card{position:sticky;top:86px;min-height:0;padding-right:clamp(70px,22vw,110px)}
  .ss-card .ghost{font-size:110px;right:16px}
}


/* ---- AVALES: logos oficiales de las instituciones ---- */
.avales{background:var(--paper);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:40px 0}
.avales .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(30px,5vw,68px);flex-wrap:wrap}
.aval{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;text-align:center;flex-shrink:0;min-height:80px}
.aval img{
  /* peso visual parejo: el de MESCYT es 7x más ancho que el de FACIIP */
  height:46px;width:auto;max-width:180px;object-fit:contain;
  /* vienen en rojo/azul/dorado: se desaturan para no pelear con la marca */
  filter:grayscale(1) contrast(.72) brightness(.62);
  opacity:.65;transition:filter .6s var(--ease),opacity .6s var(--ease);
}
/* Escudos cuadrados (CMD, FACIIP): a 46px leen 3x más chicos que un wordmark y el
   filtro fuerte les borra el texto interior. Más altura y menos oscurecido. */
.aval.crest img{height:60px;filter:grayscale(1) contrast(1.05) brightness(.82);opacity:.72}
/* Hover en CUALQUIER logo enciende los cuatro a la vez: la franja se lee como un solo
   bloque de credenciales, no como cuatro sellos sueltos. El disparador va en .avales
   (no en .aval) y su especificidad 0-3-1 gana sobre .aval.crest img, que si no anula
   el hover de los dos escudos. */
.avales:hover .aval img{filter:grayscale(0) contrast(1) brightness(1);opacity:1}
.aval .rel{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);opacity:.85;line-height:1.5;white-space:nowrap}
.avales-nota{text-align:center;font-size:10.5px;color:var(--dim);opacity:.6;margin-top:26px;letter-spacing:.04em}
@media(max-width:760px){
  .avales .wrap{gap:26px}
  .aval img{height:38px}
  .aval.crest img{height:48px}
  .aval .rel{font-size:8px}
}


/* ============ PROCEDIMIENTOS: acordeón horizontal (paneles que se abren) ============
   Reemplaza la lista vertical. Cada panel = un procedimiento. Al pasar el mouse
   se expande, la foto pasa de tenue a color pleno y aparece el texto.            */
.pacc{display:flex;gap:2px;height:min(66vh,580px);margin-top:52px;background:var(--rule-soft)}
.pan{
  position:relative;flex:1;min-width:0;overflow:hidden;background:var(--prussian-deep);
  transition:flex 1s var(--ease);cursor:pointer;display:block;
}
/* al hacer hover en el grupo, los demás ceden espacio */
.pacc:hover .pan{flex:.72}
.pacc .pan:hover{flex:3.4}

.pan-media{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:filter 1s var(--ease),transform 1.4s var(--ease),opacity 1s var(--ease);
  filter:grayscale(.75) brightness(.62);transform:scale(1.06);
}
.pan:hover .pan-media{filter:grayscale(0) brightness(.92);transform:scale(1)}
.pan::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,32,47,.9) 0%,rgba(8,32,47,.3) 52%,rgba(8,32,47,.14) 78%,rgba(8,32,47,.42) 100%);
  transition:opacity 1s var(--ease);
}
.pan:hover::after{opacity:.8}

.pan-num{
  position:absolute;top:24px;left:24px;z-index:4;
  font-family:var(--fd);font-size:21px;font-style:italic;font-weight:600;
  color:#fff;letter-spacing:.02em;line-height:1;
  /* sombra: el número cae sobre foto, tiene que leerse sobre claro Y sobre oscuro */
  text-shadow:0 1px 3px rgba(8,32,47,.7), 0 3px 18px rgba(8,32,47,.55);
  transition:color .6s var(--ease);
}
/* filete bajo el número: detalle de imprenta y ancla de lectura */
.pan-num::after{
  content:"";display:block;width:22px;height:1px;margin-top:8px;
  background:rgba(255,255,255,.75);box-shadow:0 1px 3px rgba(8,32,47,.5);
  transition:width .7s var(--ease),background .6s var(--ease);
}
.pan:hover .pan-num{color:var(--beau)}
.pan:hover .pan-num::after{width:38px;background:var(--beau)}
/* título vertical: se lee de lado cuando el panel está angosto */
.pan-vert{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;z-index:3;white-space:nowrap;
  font-family:var(--fd);font-size:21px;font-weight:500;color:#fff;letter-spacing:.01em;
  transition:opacity .5s var(--ease);
}
.pan:hover .pan-vert{opacity:0;transition-duration:.3s}

/* contenido horizontal: aparece al abrirse */
.pan-body{
  position:absolute;left:0;bottom:0;z-index:3;padding:34px;width:min(400px,90%);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) .18s,transform .7s var(--ease) .18s;
  pointer-events:none;
}
.pan:hover .pan-body{opacity:1;transform:none}
.pan-body h3{font-family:var(--fd);font-size:clamp(24px,2.4vw,32px);font-weight:500;color:#fff;margin-bottom:10px;letter-spacing:-.015em}
.pan-body p{font-size:14.5px;font-weight:400;color:rgba(255,255,255,.86);line-height:1.65;margin-bottom:18px}
.pan-star{
  display:inline-block;font-family:var(--fd);font-style:italic;font-size:11.5px;
  color:var(--prussian-deep);background:var(--beau);padding:3px 11px;margin-bottom:12px;
}
.pan-cta{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.45);
}
.pan:hover .pan-cta{border-bottom-color:#fff}

/* móvil: scroll horizontal, paneles siempre abiertos */
@media(max-width:900px){
  .pacc{height:auto;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;background:none;
        -webkit-overflow-scrolling:touch}
  .pacc:hover .pan,.pacc .pan:hover{flex:none}
  .pan{flex:none;width:78vw;max-width:330px;height:400px;scroll-snap-align:start}
  .pan-media{filter:grayscale(0) brightness(.9);transform:none}
  .pan-vert{display:none}
  .pan-body{opacity:1;transform:none;padding:24px;width:100%}
  .pan::after{opacity:.85}
}


/* ============ PAR ANTES/DESPUÉS ============
   Antes y después dentro del MISMO recuadro, uno al lado del otro. Lo usan
   la galería y la sección de resultados de la home, así que vive acá y no
   duplicado en cada página.                                                */
.par{background:#fff;border:1px solid var(--line);overflow:hidden}
/* TODOS los recuadros miden igual y NINGUNA foto se recorta.
   Cada mitad es cuadrada y la imagen entra completa (object-fit:contain),
   apoyada sobre el azul de marca. El aire que sobra lee como marco de
   galería, no como error: es el precio de no recortar el resultado.
   El ratio del par ya no depende de las fotos, por eso es fijo. */
.par .duo{display:flex;gap:2px;background:var(--line);position:relative;aspect-ratio:1.9/1}
/* 1.9/1 = cada mitad a 0.95. Medido sobre las 24 fotos (14 verticales, 10
   horizontales): es el ratio que menos aire deja sin que ninguna quede medio
   vacía. Con 0.75 el promedio baja, pero una foto se queda al 52% de aire. */
/* Cada par usa la relación de aspecto de SU foto original. Antes todo se forzaba
   a 3/4: los originales horizontales (5712x4284) perdían el 44% de la imagen y
   quedaban con un zoom que no dejaba apreciar el resultado. */
.par .duo figure{margin:0;position:relative;overflow:hidden;background:var(--prussian-deep);
  flex:1 1 0;min-width:0}
.par .duo img{width:100%;height:100%;object-fit:contain;display:block}
.par .duo figcaption{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(8,32,47,.86);color:#fff;
  font-family:var(--fb);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px}
.par .pie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 16px}
.par .pie b{font-family:var(--fd);font-size:clamp(15px,1.5vw,19px);font-weight:500;color:var(--prussian)}
.par .pie span{font-family:var(--fb);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* Resultados en la home: 2 pares grandes. Solo entran casos donde el antes y el
   después están los dos fuera del quirófano; el resto vive en la galería.        */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:960px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.res-grid{grid-template-columns:1fr;gap:20px}}


/* ============ TURISMO DE SALUD ============
   La página tiene que VENDER el país, no explicarlo. Foto grande primero,
   número verificado después, texto al mínimo.                             */

/* hero a sangre con la foto del destino */
.tur-hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--prussian-deep);padding:0}   /* padding:0 anula el de section, que sumaba 300px de aire */
.tur-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* el velo tiene que dar contraste DONDE va el texto (mitad inferior), no solo abajo */
.tur-hero .veil{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(8,32,47,.95) 0%,rgba(8,32,47,.88) 30%,rgba(8,32,47,.62) 58%,rgba(8,32,47,.3) 82%,rgba(8,32,47,.42) 100%)}
.tur-hero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:clamp(54px,6vw,80px)}
.tur-hero h1{color:#fff;font-size:clamp(36px,5.4vw,68px);line-height:1.04;letter-spacing:-.02em;max-width:19ch;margin-bottom:20px;
  text-shadow:0 1px 30px rgba(8,32,47,.35)}
.tur-hero h1 em{font-style:italic}
.tur-hero .sub{font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.9);max-width:46ch;margin-bottom:32px;line-height:1.62}
.tur-hero .acts{display:flex;gap:14px;flex-wrap:wrap}

/* banda de datos verificados del país */
.rdstat{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.rdstat .c{padding:clamp(30px,3.6vw,50px) clamp(18px,2.4vw,34px);border-right:1px solid var(--rule-soft)}
.rdstat .c:last-child{border-right:none}
.rdstat .n{font-family:var(--fd);font-size:clamp(30px,3.9vw,52px);font-weight:500;line-height:1;color:var(--prussian);letter-spacing:-.02em}
.rdstat .n small{font-size:.44em;font-weight:500;letter-spacing:0}
.rdstat p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:13px}
.rdstat-src{font-size:10.5px;color:var(--dim);opacity:.72;margin-top:20px;letter-spacing:.02em}
@media(max-width:1000px){
  .rdstat{grid-template-columns:repeat(2,1fr)}
  .rdstat .c:nth-child(2){border-right:none}
  .rdstat .c:nth-child(1),.rdstat .c:nth-child(2){border-bottom:1px solid var(--rule-soft)}
}
@media(max-width:440px){.rdstat{grid-template-columns:1fr}.rdstat .c{border-right:none;border-bottom:1px solid var(--rule-soft)}.rdstat .c:last-child{border-bottom:none}}

/* razones: filas intercaladas, foto de un lado y texto del otro, alternando */
.rdalt{display:flex;flex-direction:column;gap:clamp(60px,7.5vw,120px);margin-top:clamp(50px,6vw,86px)}
.rdrow{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.6vw,76px);align-items:center}
.rdrow .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--prussian-deep)}
.rdrow .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.rdrow:hover .ph img{transform:scale(1.04)}
.rdrow .ph .kick{position:absolute;left:0;bottom:0;z-index:2;background:var(--prussian);color:#fff;
  font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px}
/* filas pares: la foto se va a la derecha */
.rdrow.rev .ph{order:2}
.rdrow .bd{max-width:46ch}
.rdrow .nn{font-family:var(--fd);font-style:italic;font-size:clamp(30px,3.2vw,42px);color:var(--beau);line-height:1;margin-bottom:16px}
.rdrow h3{font-size:clamp(26px,3.1vw,40px);font-weight:500;letter-spacing:-.016em;line-height:1.08;margin-bottom:15px}
.rdrow h3 em{font-style:italic}
.rdrow p{font-size:clamp(15px,1.3vw,17px);color:var(--ink-soft);line-height:1.72}
.rdrow .rows{margin-top:26px;border-top:1px solid var(--rule-soft);max-width:400px}
.rdrow .rows div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.rdrow .rows span{color:var(--ink-soft)}
.rdrow .rows b{font-weight:500;color:var(--prussian);white-space:nowrap}
@media(max-width:880px){
  .rdalt{gap:clamp(48px,9vw,72px)}
  .rdrow{grid-template-columns:1fr;gap:26px}
  .rdrow.rev .ph{order:0}      /* en una columna la foto siempre va arriba */
  .rdrow .bd{max-width:none}
}

/* bloque de la regla: foto a un lado, la regla al otro */
.rdrule{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;background:var(--prussian-deep);overflow:hidden}
.rdrule .ph{position:relative;min-height:340px}
.rdrule .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rdrule .bd{padding:clamp(38px,5vw,74px)}
.rdrule h2{color:#fff;font-size:clamp(30px,3.9vw,50px);margin-bottom:16px;line-height:1.06}
.rdrule h2 em{font-style:italic}
.rdrule .lead{color:rgba(255,255,255,.82);margin-bottom:30px}
.rdrule .pt{display:flex;gap:16px;padding:15px 0;border-top:1px solid rgba(180,203,217,.2)}
.rdrule .pt:last-of-type{border-bottom:1px solid rgba(180,203,217,.2);margin-bottom:32px}
.rdrule .pt i{font-family:var(--fd);font-style:italic;font-size:18px;color:var(--beau);flex-shrink:0;width:22px}
.rdrule .pt b{display:block;color:#fff;font-weight:500;font-size:15.5px;margin-bottom:4px}
.rdrule .pt span{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.6}
@media(max-width:900px){.rdrule{grid-template-columns:1fr}.rdrule .ph{min-height:260px;order:-1}}


/* ============ SELECTOR DE IDIOMA ============
   Los mercados del Dr. (EE.UU., Jamaica, Puerto Rico, Canadá, San Martín) son de
   habla inglesa. La banderita cambia al inglés y vuelve, y ocupa un solo botón para
   no romper el nav, que ya lleva 6 enlaces.                                      */
.lang{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:8px 11px;
  border:1px solid rgba(255,255,255,.28);color:#fff;transition:border-color .4s var(--ease),background .4s var(--ease)}
.lang:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
.nav.solid .lang{border-color:var(--rule);color:var(--ink)}
.nav.solid .lang:hover{border-color:var(--prussian);background:rgba(15,55,89,.05)}
.lang svg{width:19px;height:13px;display:block;flex-shrink:0;border-radius:1px}
.lang b{font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* en el menú móvil va como una fila más, alineada con los enlaces */
.mmenu .lang{border:none;padding:0;margin-top:6px;color:inherit;justify-content:flex-start;gap:10px}
.mmenu .lang:hover{background:none}
.mmenu .lang svg{width:24px;height:16px}
.mmenu .lang b{font-size:13px;letter-spacing:.1em}
@media(max-width:1180px){.lang{padding:7px 9px;gap:6px}.lang b{font-size:10px;letter-spacing:.1em}}
@media(max-width:860px){.nav .lang{display:none}}   /* en móvil vive en el menú */


/* ============ SITIO TRADUCIDO (Google) ============
   Google Translate inyecta un iframe#gt-nvframe fijo arriba, de 57px y con
   z-index 2147483646, que tapaba nuestro nav (z-index 80). Cuando el visitante
   viene por *.translate.goog el script marca <html class="gt"> y mide la barra
   real; todo lo fijo baja esa altura y el contenido se corre para acompañarlo. */
html.gt{--gt:57px}
html.gt body{padding-top:var(--gt)}
html.gt .nav{top:var(--gt)}
html.gt .mmenu{top:var(--gt)}

/* Con el body corrido, el nav transparente queda sobre papel claro y su texto blanco
   se pierde. Traducido va siempre en su estado sólido: funciona igual sobre los heros
   oscuros y sobre las páginas que arrancan en claro (procedimientos, pre-evaluación,
   gracias, política). Se replica .nav.solid porque site.js lo alterna por scroll.   */
html.gt .nav{background:rgba(247,244,240,.94);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--rule-soft);padding:14px 0}
html.gt .nav .brandmark img{height:36px}
html.gt .nav .brandmark .lw{display:block}
html.gt .nav .brandmark .ld{display:none}
html.gt .nav .nlinks a{color:var(--ink)}
html.gt .nav .btn{border-color:var(--ink);color:var(--ink)}
html.gt .nav .btn::before{background:var(--ink)}
html.gt .nav .btn:hover{color:var(--paper)}
html.gt .nav .burger span{background:var(--ink)}
html.gt .nav .lang{border-color:var(--rule);color:var(--ink)}
html.gt .nav .lang:hover{border-color:var(--prussian);background:rgba(15,55,89,.05)}
@media(max-width:860px){html.gt .nav .brandmark img{height:30px}}


/* ==================================================================
   PASADA MÓVIL  ·  el 90% del tráfico entra por teléfono
   Medido a 390x844 con DPR 3 sobre las 22 páginas. Cada bloque
   corrige un defecto concreto, no una impresión.
   ================================================================== */

/* ---- 1. Toque: sin retardo de 300ms y sin flash azul de Android ---- */
a,button,select,input,textarea,.faq-q,.filter,label{
  -webkit-tap-highlight-color:rgba(15,55,89,.12);
  touch-action:manipulation;
}
html{overscroll-behavior-y:none}          /* mata el rebote que despega el nav fijo */

/* ---- 2. Formularios: 16px o Safari hace zoom al enfocar ----
   Es el defecto móvil más caro del sitio: al tocar un campo la página salta
   y la persona pierde el contexto. Encontrado en contacto, agendamiento y
   pre-evaluación (13 campos).                                            */
@media(max-width:860px){
  .fld,.field-lg,input,select,textarea{font-size:16px!important;line-height:1.4}
  .fld,.field-lg{padding:15px 16px;min-height:52px}
  textarea.fld{min-height:132px}
  select.fld{
    appearance:none;-webkit-appearance:none;padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3759' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
  }
  .flab{font-size:12px;letter-spacing:.1em}
}

/* ---- 3. Objetivos de toque a 44px (guía de Apple) ----
   Medidos por debajo: hamburguesa 40x36, enlaces del footer 350x32,
   política de privacidad 117x14, flotantes 100x40, bandera del menú 54x21. */
@media(max-width:860px){
  .burger{width:48px;height:48px;display:flex!important;align-items:center;justify-content:center;padding:0}
  .brandmark{min-height:44px;align-items:center}
  .foot-grid a{display:block;padding:11px 0;min-height:44px;line-height:1.5}
  .foot-bot a{display:inline-block;padding:14px 4px;min-height:44px}
  .fab{min-height:48px;padding:0 18px;display:inline-flex;align-items:center}
  .filter{min-height:44px;padding:0 18px;display:inline-flex;align-items:center}
  .mmenu a{min-height:52px;display:flex;align-items:center;justify-content:center;width:100%}
  .mmenu .lang{min-height:52px;justify-content:center}
  .ln{padding:12px 0;min-height:44px;align-items:center}
  .info-item a{display:inline-block;padding:6px 0}
}

/* ---- 4. Legibilidad: nada de 8px en un teléfono ----
   Los micro-labels con tracking .32em a 11px son ilegibles a un brazo de
   distancia. En móvil suben de tamaño y bajan de tracking.               */
@media(max-width:860px){
  .label{font-size:12px;letter-spacing:.18em;margin-bottom:18px}
  .aval .rel{font-size:10px;letter-spacing:.1em;white-space:normal;text-align:center}
  .avales-nota{font-size:11.5px;line-height:1.6}
  .chip{font-size:12.5px}
  .rdstat .l,.rdstat p{font-size:13px}
  .stp .idx,.idx{font-size:13px}
  .par .pie span,.gal-item .tag{font-size:11px;letter-spacing:.06em}
  .fnote{font-size:12.5px}
  .lead{font-size:16.5px;line-height:1.68}
  p.body{font-size:16px}
}

/* ---- 5. Aire y ritmo: el nav se comía 81px de 844 ---- */
@media(max-width:860px){
  .nav{padding:14px 0}
  .nav.solid{padding:10px 0}
  .brandmark img{height:34px}
  .nav.solid .brandmark img{height:30px}
  section{padding:clamp(58px,13vw,88px) 0}
}

/* ---- 6. Heros de las landings: median 1300px, 1.5 pantallas antes del
   primer contenido. Se recortan para que el CTA entre en el primer viewport. */
@media(max-width:860px){
  .lp-hero .wrap{padding:104px 24px 58px}
  .lp-hero h1{font-size:clamp(30px,8.4vw,38px);line-height:1.08}
  .lp-hero p{font-size:16px;margin-bottom:22px}
  .lp-hero .frame{display:none}          /* la foto grande vuelve más abajo */
  .phero{padding:104px 0 58px}
  .tur-hero{min-height:min(80svh,620px)}
  .tur-hero .wrap{padding-top:112px;padding-bottom:42px}
  .tur-hero h1{font-size:clamp(31px,8.6vw,40px)}
  .tur-hero .sub{font-size:16px;margin-bottom:26px}
}

/* ---- 7. Botones a lo ancho: el pulgar no apunta, barre ---- */
@media(max-width:620px){
  .acts,.cta-row,.hero .acts{flex-direction:column;align-items:stretch;gap:11px}
  .acts .btn,.cta-row .btn{width:100%;justify-content:center}
  .btn{padding:18px 26px;font-size:12px}
}

/* ---- 8. El acordeón de procedimientos es un carrusel en móvil:
   se le da snap y una pista de que se desliza.                     */
@media(max-width:860px){
  .pacc{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:6px}
  .pacc::-webkit-scrollbar{display:none}
  .pan{scroll-snap-align:center;flex:0 0 78%}
}


/* ---- 9. En móvil los dos flotantes apilados ocupaban 144x107 en la esquina y
   tapaban el "Agendar cita" del hero. Pasan a barra inferior fija: el CTA vive
   siempre a la vista, los objetivos crecen y nada queda debajo.            */
@media(max-width:620px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .floats{
    left:0;right:0;bottom:0;flex-direction:row;align-items:stretch;gap:9px;
    background:rgba(8,32,47,.965);backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(180,203,217,.16);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .floats .fab{flex:1;justify-content:center;min-height:52px;font-size:11.5px;letter-spacing:.1em}
  html.gt body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ---- 10. Últimos toques pequeños que quedaron por debajo de 44px ---- */
@media(max-width:860px){
  .cal-head button{min-width:48px;min-height:48px;font-size:22px;display:inline-flex;align-items:center;justify-content:center}
  .cal .day{min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav-btns .back{min-height:48px;padding:0 20px;display:inline-flex;align-items:center}
  .mode button,.opt{min-height:48px}
  .info-item a{display:inline-block;padding:11px 0;min-height:44px}
  .falt a{display:inline-block;padding:11px 2px;min-height:44px}
  .back,.volver,a[href="pre-evaluacion.html"].back{min-height:44px;display:inline-flex;align-items:center;padding:10px 6px}
  .stp .dot{margin-bottom:22px}
}

/* ---- 11. Texto que seguía a 11px: las bandas de datos de las landings ---- */
@media(max-width:860px){
  .statband .l{font-size:12.5px;letter-spacing:.08em;line-height:1.5}
  .statband .s{padding:32px 18px}
  .ss-note,.step p,.who{font-size:12.5px}
  .disclaimer,.legal{font-size:12.5px;line-height:1.65}
}


/* ---- 12. Texto que aún quedaba por debajo de 12px en pantalla de teléfono.
   La nota de credenciales es la más importante de todas: afirma la cadena
   SODOCIPRE - CMD - FILACP y estaba a 11.5px.                            */
@media(max-width:860px){
  .avales-nota{font-size:13px;line-height:1.65;max-width:38ch;margin-left:auto;margin-right:auto}
  .aval .rel{font-size:11px}
  .rdstat-src{font-size:12px;line-height:1.6}
  .rdrow .ph .kick,.rdc .ph .kick{font-size:11px;letter-spacing:.14em;padding:9px 14px}
  .who{font-size:12.5px}
  .step,.step span{font-size:12.5px}   /* indicador de paso: es feedback, no adorno */
  .foot-bot,.foot-bot span{font-size:12.5px}
  .statband .l{font-size:12.5px!important}
}

/* ---- 13. La barra inferior estorba justo en las dos páginas que ya son un
   formulario con sus propios botones. Ahí se oculta y se recupera el alto. */
@media(max-width:620px){
  body.sin-barra{padding-bottom:0}
  body.sin-barra .floats{display:none}
}


/* ---- CIERRE DE PÁGINA ----
   Las bandas oscuras finales flotaban en papel con márgenes distintos en cada
   página (190px arriba y 110px abajo en la galería, 44/92 en procedimientos,
   0/92 en sobre). Ahora toda banda final va PEGADA al footer: el pie de la
   página es una sola masa oscura y no un bloque suelto en medio de la nada. */
section.cierre{padding:0}
section.cierre + footer,.cierre-flush + footer{margin-top:0}


/* ---- REDES DEL DR. ----
   Iconos SVG de trazo, no emojis ni fuentes de iconos. En el footer, alineados
   con la columna de contacto. Solo se muestran las cuentas confirmadas.      */
.redes{display:flex;gap:10px;margin-top:18px}
.redes a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(180,203,217,.28);color:var(--beau);
  transition:border-color .45s var(--ease),background .45s var(--ease),color .45s var(--ease)}
.redes a:hover{border-color:var(--beau);background:rgba(180,203,217,.1);color:#fff}
.redes svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.redes svg .relleno{fill:currentColor;stroke:none}
@media(max-width:860px){.redes a{width:48px;height:48px}.redes{gap:12px;justify-content:flex-start}}


/* ============ HERO ============
   Reestructurado el 30 jul. Antes: rejilla de dos columnas con el Dr. recortado
   flotando a media altura y 227px de vacío encima del titular. Se veía "en el aire".
   Ahora el hero es UN MARCO de una pantalla: el Dr. está anclado al borde inferior,
   así que lo corta el propio borde y queda parado sobre la franja de credenciales.
   El texto se centra vertical en la mitad izquierda y el lema deja de ser un quinto
   elemento suelto: pasa a firma vertical junto a la foto.
   Provisional: el Dr. quiere video aquí. Cambiar el <picture> por
   <video muted playsinline loop> y el CSS aguanta igual.                        */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;max-height:900px;
  display:flex;align-items:center;
  padding:0;                                  /* anula el padding global de section */
}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:88px;padding-bottom:88px}
.hero-txt{max-width:min(46vw,620px)}

/* el retrato: pegado abajo y a la derecha, cortado por el borde del hero */
.hero-dr{
  position:absolute;z-index:1;
  right:clamp(0px,3vw,72px);bottom:0;
  height:min(92%,860px);line-height:0;pointer-events:none;
}
.hero-dr picture,.hero-dr img{display:block;height:100%;width:auto}
.hero-dr img{filter:saturate(.93) contrast(1.05)}

/* el velo abre a la derecha para que el Dr. no quede lavado, y refuerza la
   esquina inferior izquierda donde vive el lema */
.hero .veil{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(105% 88% at 2% 46%, rgba(8,32,47,.97) 0%, rgba(8,32,47,.8) 34%, rgba(8,32,47,.34) 66%, rgba(8,32,47,.14) 100%),
    linear-gradient(to top, rgba(8,32,47,.55) 0%, rgba(8,32,47,0) 26%);
}
.hero .mark{z-index:0}

/* lema y señal de scroll comparten la esquina inferior izquierda: cierran el marco
   sin competir con los botones flotantes de la derecha. En vertical junto al canto
   derecho quedaba pegado al de WhatsApp y era ilegible. */
.hero-lema{
  position:absolute;z-index:4;left:calc(var(--gut) + 46px);bottom:34px;
  font-family:var(--fd);font-style:italic;font-size:15px;letter-spacing:.01em;
  color:var(--beau);opacity:.7;white-space:nowrap;max-width:calc(100% - var(--gut) - 260px);
  overflow:hidden;text-overflow:ellipsis;
}
.hero-baja{
  position:absolute;z-index:4;left:var(--gut);bottom:28px;
  width:26px;height:44px;border:1px solid rgba(180,203,217,.3);border-radius:13px;
  display:flex;align-items:flex-start;justify-content:center;padding-top:7px;
}
.hero-baja span{width:3px;height:8px;border-radius:2px;background:var(--beau);opacity:.85;animation:baja 1.9s var(--ease) infinite}
@keyframes baja{0%{transform:translateY(0);opacity:.85}60%{transform:translateY(15px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-baja span{animation:none}}

/* ---- TELÉFONO: el retrato ES el hero ----
   Apilado (texto y luego foto) el hero medía 1144px en un viewport de 844 y el Dr.
   quedaba como una cabeza flotando tras un muro de texto.
   Con la foto a un % del alto, en algunos ratios el texto arrancaba DENTRO de la
   foto: medido, la etiqueta caía a 2.4:1 de contraste sobre un reflejo de piel,
   ilegible. Los porcentajes no lo arreglan porque el solape varía con cada pantalla.
   Solución determinista con flex: el texto toma exactamente lo que necesita
   (flex:0 0 auto) y la foto se queda con lo que sobra (flex:1 1 auto, min-height:0),
   recortada por su propia caja. Así el texto NUNCA se apoya en la foto.          */
@media(max-width:860px){
  .hero{
    height:100svh;min-height:100svh;max-height:100svh;overflow:hidden;
    display:flex;flex-direction:column;align-items:stretch;padding:0;
  }
  /* la foto: se queda con el espacio libre y se ancla por arriba, para que lo
     primero que se vea siempre sea la cara */
  .hero-dr{
    order:1;flex:1 1 auto;min-height:0;
    position:relative;right:auto;bottom:auto;top:auto;left:auto;transform:none;
    width:100%;height:auto;margin:0;padding:0;overflow:hidden;line-height:0;
  }
  .hero-dr picture{display:block;position:absolute;top:56px;left:50%;transform:translateX(-50%);
    width:min(88vw,392px)}
  .hero-dr img{
    width:100%;height:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%);
  }
  /* el texto: lo que necesita, ni un píxel más */
  .hero .wrap{
    order:2;flex:0 0 auto;position:relative;z-index:3;
    padding-top:0;padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }
  /* El retrato está centrado y el texto iba a la izquierda: dos ejes peleando.
     En móvil todo se alinea al mismo eje vertical que la foto. */
  .hero-txt{max-width:none;text-align:center}
  .hero .label{justify-content:center}
  .hero .label::before{content:"";flex:1;height:1px;background:rgba(180,203,217,.28);max-width:52px}
  .hero .label::after{max-width:52px}
  /* .hero .display trae max-width:15ch, que a 32px son 240px: el bloque quedaba
     estrecho y pegado a la izquierda, así que centrar el texto no centraba la caja. */
  .hero .display{font-size:clamp(32px,8.6vw,42px);line-height:1.06;max-width:none;margin-bottom:22px}
  .hero .lead{font-size:16px;line-height:1.6;margin:0 auto 2px;max-width:33ch}
  .hero .acts{margin-top:24px}
  /* el velo solo asienta el fondo bajo el texto; el contraste ya no depende de él */
  .hero .veil{
    position:absolute;inset:auto 0 0 0;height:62%;z-index:2;
    background:linear-gradient(to bottom, rgba(8,32,47,0) 0%, rgba(8,32,47,.75) 34%, rgba(8,32,47,.97) 58%, rgba(8,32,47,1) 100%);
  }
  .hero-lema,.hero-baja,.hero .mark{display:none}
}
@media(max-height:700px) and (max-width:860px){
  /* pantallas cortas: los botones en fila liberan 65px para la cara */
  .hero-dr picture{top:48px;width:min(78vw,320px)}
  .hero .display{font-size:30px;line-height:1.08}
  .hero .lead{font-size:15.5px;line-height:1.55}
  .hero .acts{flex-direction:row;gap:9px;margin-top:18px}
  .hero .acts .btn{flex:1;padding:16px 8px;font-size:10.5px;letter-spacing:.08em;justify-content:center}
  .hero .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(max-width:340px){
  /* bajo 340px las etiquetas de los botones se partían en dos líneas */
  .hero .acts{flex-direction:column;gap:9px}
  .hero .acts .btn{padding:15px 10px;font-size:11px}
  .hero-dr picture{width:min(92vw,300px);top:44px}
}


/* ============ MÓVIL: un solo eje ============
   En escritorio las secciones partidas van a la izquierda porque tienen la imagen
   al lado; centradas están las de ancho completo. En una columna esa lógica
   desaparece y la alternancia se lee como desorden. En teléfono TODOS los intros
   de sección (etiqueta + titular + entradilla) se centran, y el detalle
   (listas, pasos, tarjetas) sigue a la izquierda, que es donde se lee mejor.   */
@media(max-width:860px){
  /* h2.sec se usa SOLO para titulares de sección, así que centrarlos todos es
     seguro. La entradilla que le sigue va con él. Antes lo intenté con
     `.split > div > ...` y se quedaban fuera las secciones que no son split
     (seguridad, por ejemplo): la etiqueta salía centrada y el párrafo a la izquierda. */
  h2.sec{text-align:center}
  h2.sec + .lead,
  h2.sec + p.body,
  .label + h2.sec + .lead{text-align:center;margin-left:auto;margin-right:auto}
  .split > div > .label,
  .split > div > .lead,
  .split > div > p.body,
  .split > .label,
  .split > .lead,
  .split > p.body{text-align:center;margin-left:auto;margin-right:auto}

  /* la etiqueta centrada necesita filete a los dos lados, no solo a la derecha */
  .label{justify-content:center;text-align:center}
  .label::before{content:"";flex:1;height:1px;background:var(--rule-soft);max-width:52px}
  .label::after{max-width:52px}
  .label.on-dark::before{background:rgba(180,203,217,.28)}

  /* el detalle se mantiene a la izquierda: ahí manda la lectura */
  .safe-list,.safe-item,.pil,.tl-item,.stp,.step,.faq-item,.rdrow .bd,
  .par .pie,.oc .t,.info-item,.foot-grid,.creds,.timeline{text-align:left}
  .safe-item .num,.pil .n,.stp .idx{text-align:left}
  .pil .label,.stp .label,.faq-item .label{justify-content:flex-start;text-align:left}
  .pil .label::before,.stp .label::before,.faq-item .label::before{display:none}
}


/* ---- 15. AUDITORÍA MÓVIL (13 ago 2026, medida con Chrome real a 390px) ----

   Dos defectos, ninguno de desborde: a 390px no hay scroll horizontal en
   ninguna de las 19 páginas y la barra flotante (73px) ya está compensada
   por el padding del body (74px). Lo que sí afeaba:

   (a) 45 elementos por debajo de 12px en el home, 37 en la galería. Entre
       ellos el texto del botón de WhatsApp, la etiqueta del formulario de
       contacto y los pies de las fotos de resultados. En un teléfono a
       distancia normal, 10px no se lee: se adivina.

   (b) Titulares cuya última línea era UN PUNTO solo. "Antes de decidir,
       conoce a quien te va a operar." dejaba el punto colgando en una línea
       de 6px de ancho. Pasaba en el home, en las landings y en turismo.     */

@media(max-width:820px){

  /* (a) piso de 12.5px. Al subir el cuerpo se afloja el interletrado,
     que es lo que hacía que estas líneas se partieran mal.               */
  .foot h4{font-size:12.5px;letter-spacing:.18em}
  .foot-bot,.foot-bot span,.foot-bot a{font-size:12.5px}
  .ss-card .lbl{font-size:12.5px;letter-spacing:.18em}
  .ss-note{font-size:12.5px;letter-spacing:.14em}
  .proc-card .more{font-size:12.5px;letter-spacing:.14em}
  .aval .rel,.aval .rel *{font-size:12.5px;letter-spacing:.06em}
  .par .pie span,.gal-item .tag{font-size:12.5px;letter-spacing:.05em}
  .prow .star,.pan-star,.star-flag,.proc-card.hero-tag::after{font-size:12.5px}
  .quote .who,.who{font-size:12.5px;letter-spacing:.18em}
  .avales-nota{font-size:12.5px;line-height:1.65}
  .rdstat-src{font-size:12.5px}
  .rdrow .ph .kick,.rdc .ph .kick,.kick{font-size:12.5px;letter-spacing:.12em}
  .flab,label.flab{font-size:12.5px;letter-spacing:.06em}
  .chip{font-size:12.5px;letter-spacing:.1em}
  .filter{font-size:12.5px;letter-spacing:.07em}
  .statband .l{font-size:12.5px;letter-spacing:.1em}
  .lang b{font-size:12px;letter-spacing:.08em}
  .par .pie,.gal-item .pie{font-size:12.5px}

  /* el CTA principal: era el texto más pequeño de la pantalla siendo el
     botón que más importa. Menos interletrado para que quepa igual.      */
  .floats .fab{font-size:12.5px;letter-spacing:.06em}

  /* (b) reparto de líneas. Evita que la última quede con una palabra
     suelta o con el punto solo.                                          */
  h1,h2,h3,.sec,.label,.kick,.lead,.hero-lema{text-wrap:balance}
  p.body,p.lead{text-wrap:pretty}
}

/* El hero partía "Cirugía Plástica · Santo Domingo, R.D." dejando "R.D."
   solo en la segunda línea. Con el interletrado de 0.22em no cabe entero
   a 390px; a 0.12em sí, y sigue leyéndose como versalita.               */
@media(max-width:430px){
  .hero .label,.phero .label,.label.on-dark{letter-spacing:.12em;font-size:12.5px}
}


/* ---- 16. EL CORTE RECTO DEL RETRATO EN EL HERO (13 ago 2026) ----

   En el teléfono la foto del Dr. terminaba en un borde recto que le partía
   el logo de la bata por la mitad. La imagen llevaba un degradado, pero el
   contenedor .hero-dr tiene overflow:hidden y la recortaba ANTES de que el
   degradado terminara: el corte lo hacía la caja, no la máscara.

   PRIMER INTENTO, DESCARTADO: poner la máscara en el contenedor. Funcionaba
   en Chrome y en Safari de iPhone dejaba la foto INVISIBLE. Enmascarar una
   caja flexible con overflow:hidden y un hijo posicionado en absoluto no es
   fiable en WebKit.

   LO QUE SÍ: no se enmascara nada. Se pinta encima un degradado del mismo
   azul del hero, que tapa el borde recto sin tocar la imagen. Es pintura
   normal: funciona en todo lo que sepa dibujar un gradiente.              */

@media(max-width:860px){
  .hero-dr{position:relative}
  .hero-dr::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;
    z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(8,32,47,0) 0%,
      rgba(8,32,47,.55) 46%,
      rgba(8,32,47,.9) 78%,
      #08202F 100%);
  }
}

/* ---- 17. LAS ETIQUETAS "ANTES / DESPUÉS" (13 ago 2026) ----

   Última cosa que quedaba por debajo de 12px en el teléfono, y no era
   decorativa: es el rótulo que le dice a la paciente cuál foto es cuál.
   A 10px sobre una franja oscura, en una pantalla al sol, no se lee.
   Sube a 12px, con un poco más de caja para que siga siendo una pastilla
   legible y no una etiqueta apretada.                                     */

@media(max-width:860px){
  .par .duo figcaption{
    font-size:12px;letter-spacing:.1em;padding:5px 10px;
    left:9px;bottom:9px;background:rgba(8,32,47,.9);
  }
  .par .pie span{font-size:12.5px;letter-spacing:.06em}
}


/* ============================================================================
   18. HERO DE CELULAR, REHECHO (13 ago 2026)

   Lo pedido: el Dr. entero y sin cortar, fondo con grano un poco difuminado,
   y sombra bajo el texto para que se lea encima de la foto.

   Dato que condicionó todo: el PNG del Dr. YA viene recortado (40% del
   archivo es transparente, las cuatro esquinas en alfa 0), pero la figura
   TOCA el borde inferior del propio archivo — 106 de 173 píxeles de la
   última fila son opacos. El corte del torso viene en la foto, no lo hace
   la web. Por eso se muestra el PNG completo y se desvanece SU borde: si no,
   el tajo aparece igual por muy grande que se ponga.

   Antes el hero era una columna flexible (foto arriba, texto abajo) y la
   caja de la foto la recortaba. Ahora es una sola capa: el Dr. de fondo a
   tamaño completo, el texto encima con sombra, y los botones abajo.
   ========================================================================= */

@media(max-width:860px){

  .hero{
    display:block;position:relative;
    height:100svh;min-height:100svh;max-height:100svh;overflow:hidden;
    background:
      radial-gradient(128% 78% at 50% 16%, rgba(43,92,124,.50) 0%, rgba(8,32,47,0) 64%),
      var(--prussian-deep);
  }

  /* --- el grano. Ruido SVG, suave y ligeramente desenfocado para que se
     lea como papel y no como pixelado.                                    */
  .hero::before{
    content:"";position:absolute;inset:-8%;z-index:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='0.55'/></svg>");
    background-size:220px 220px;
    opacity:.30;filter:blur(.5px);
    mix-blend-mode:soft-light;
  }

  /* --- el Dr., completo. object-fit:contain garantiza que NADA se recorta:
     la figura entra entera aunque cambie el alto del teléfono.            */
  .hero-dr{
    position:absolute;z-index:1;
    top:52px;left:50%;transform:translateX(-50%);
    width:min(86vw,352px);height:62svh;
    right:auto;bottom:auto;margin:0;padding:0;
    overflow:visible;line-height:0;pointer-events:none;
    /* SIN máscara aquí a propósito. Enmascarar esta caja dejó la foto
       INVISIBLE en Safari de iPhone (13 ago). El borde inferior lo
       difumina el degradado pintado del bloque 16, que sí funciona en
       todos lados porque es pintura, no recorte. */
  }
  .hero-dr picture{display:block;position:static;transform:none;width:100%;height:100%}
  .hero-dr img{
    width:100%;height:100%;
    object-fit:contain;object-position:center bottom;
    -webkit-mask-image:none;mask-image:none;   /* la máscara vive en la caja */
    filter:saturate(.95) contrast(1.06);
  }

  /* --- el velo: sube desde abajo para asentar el texto sobre la foto.
     No tapa la cara: arranca transparente en el 34% superior.            */
  .hero .veil{
    position:absolute;inset:0;z-index:2;
    background:linear-gradient(to bottom,
      rgba(8,32,47,0) 0%,
      rgba(8,32,47,0) 30%,
      rgba(8,32,47,.42) 48%,
      rgba(8,32,47,.82) 64%,
      rgba(8,32,47,.96) 78%,
      var(--prussian-deep) 100%);
  }

  /* --- el texto, encima de todo y anclado abajo --- */
  .hero .wrap{
    position:absolute;z-index:3;left:0;right:0;bottom:0;
    width:100%;padding-top:0;
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }
  .hero-txt{max-width:none;text-align:center}

  /* la sombra: doble, una corta y dura para el borde de la letra y otra
     larga y suave que separa el bloque de la foto.                       */
  .hero .label,.hero .display,.hero .lead{
    text-shadow:0 1px 2px rgba(4,16,24,.85), 0 6px 22px rgba(4,16,24,.7);
  }
  .hero .display{
    font-size:clamp(33px,8.8vw,44px);line-height:1.05;
    max-width:none;margin-bottom:16px;
  }
  .hero .lead{
    font-size:15.5px;line-height:1.55;margin:0 auto 2px;max-width:32ch;
    color:rgba(255,255,255,.94);
  }
  .hero .label{margin-bottom:14px}
  .hero .acts{margin-top:20px}

  .hero-lema,.hero-baja,.hero .mark{display:none}
}

/* Teléfonos bajos: se le quita altura a la foto antes que al texto, porque
   el que decide es el que lee, no el que mira.                            */
@media(max-height:730px) and (max-width:860px){
  .hero-dr{height:54svh;top:44px;width:min(78vw,306px)}
  .hero .display{font-size:clamp(29px,7.8vw,36px)}
  .hero .lead{font-size:14.5px}
}


/* ---- 19. AJUSTES DEL HERO Y CINTA DE AVALES (13 ago 2026, pedidos) ----

   (a) Que se vea MÁS cuerpo del Dr. La foto pasa del 62% al 74% de la
       pantalla y se ensancha. El texto se le monta más encima, que es
       exactamente lo que se pidió: con la sombra encima del cuerpo cae bien.

   (b) Los cuatro sellos (Colegio Médico, SODOCIPRE, FILACP, Ipitanga) en
       una sola cinta horizontal que pasa sola. En el teléfono, apilados en
       dos filas, ocupaban media pantalla y se leían como cuatro cosas
       sueltas; en cinta se leen como una cadena de respaldos.             */

@media(max-width:860px){
  /* (a) más cuerpo */
  .hero-dr{
    top:44px;
    width:min(96vw,412px);
    height:74svh;
  }
  /* el velo empieza más abajo para no comerse el cuerpo que acabamos de ganar */
  .hero .veil{
    background:linear-gradient(to bottom,
      rgba(8,32,47,0) 0%,
      rgba(8,32,47,0) 34%,
      rgba(8,32,47,.06) 41%,
      rgba(8,32,47,.16) 47%,
      rgba(8,32,47,.30) 53%,
      rgba(8,32,47,.45) 59%,
      rgba(8,32,47,.59) 65%,
      rgba(8,32,47,.71) 71%,
      rgba(8,32,47,.81) 77%,
      rgba(8,32,47,.89) 83%,
      rgba(8,32,47,.95) 90%,
      var(--prussian-deep) 100%);
  }
  /* con más foto detrás, el texto necesita más sombra para sostenerse */
  .hero .label,.hero .display,.hero .lead{
    text-shadow:0 1px 2px rgba(4,16,24,.92), 0 4px 12px rgba(4,16,24,.85), 0 10px 34px rgba(4,16,24,.6);
  }
}

@media(max-height:730px) and (max-width:860px){
  .hero-dr{height:64svh;top:38px;width:min(88vw,352px)}
}

/* (b) ---- la cinta de avales ---- */
.avales-pista{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.avales-cinta{
  display:flex;align-items:center;width:max-content;
  gap:clamp(30px,5vw,68px);
  animation:avales-gira 26s linear infinite;
}
.avales-copia{display:flex;align-items:center;gap:clamp(30px,5vw,68px)}
@keyframes avales-gira{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* se para al tocarla, y respeta a quien pidió menos movimiento */
.avales-pista:hover .avales-cinta{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .avales-cinta{animation:none}
  .avales-pista{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:860px){
  .avales{padding:26px 0}
  .avales-cinta,.avales-copia{gap:34px}
  .avales-cinta{animation-duration:20s}
  .aval{min-height:0}
}


/* ---- 20. FUERA LA BARRA FLOTANTE · Y LA FRANJA DEL MENÚ EN iPHONE ----
   (13 ago 2026, pedidos)

   (a) La barra fija de WhatsApp abajo, quitada en teléfono. Con ella se va
       también el padding-bottom de 74px que existía SOLO para compensarla:
       si se borra la barra y se deja el padding, queda un hueco muerto al
       final de las 19 páginas.

       Los caminos a WhatsApp NO se pierden: siguen los dos botones del hero,
       los del menú y entre 5 y 10 enlaces wa.me por página.

   (b) La franja rara del menú al hacer scroll. Causa: el <head> declara
       viewport-fit=cover, así que la página se dibuja por DEBAJO de la barra
       de estado y del notch. El menú va en position:fixed;top:0 sin
       compensar la zona segura, así que al volverse sólido su fondo empieza
       por debajo del notch y arriba se ve el fondo de la página colándose.
       En escritorio env() vale 0 y no cambia nada.                        */

/* ⚠️ DEROGADO el 11 sep 2026 por el bloque 26: la barra vuelve, ahora con
   DOS botones. Se deja el comentario de arriba porque explica el porqué del
   padding-bottom, que el bloque 26 tiene que reponer. */

.nav{
  padding-top:calc(22px + env(safe-area-inset-top));
  padding-bottom:22px;
}
.nav.solid{
  padding-top:calc(14px + env(safe-area-inset-top));
  padding-bottom:14px;
}
/* el menú desplegable también arranca bajo el notch */
.mmenu{padding-top:env(safe-area-inset-top)}


/* ---- 21. EL HERO DE LAS PÁGINAS DE PROCEDIMIENTO EN MÓVIL (13 ago 2026) ----

   Estaba así:  .lp-hero .frame{display:none}   ← foto escondida a propósito
   Resultado: al abrir cualquier procedimiento en el teléfono, la primera
   pantalla era un rectángulo azul oscuro con texto y nada más. Las 12
   páginas tenían su foto vertical lista y sin usar.

   Lo que corresponde en una landing de procedimiento: que en la primera
   pantalla se vea QUÉ es (la foto), CÓMO se llama (el titular) y CÓMO se
   pide (el botón). Los tres a la vez, sin bajar.

   Se resuelve con el mismo lenguaje que el hero del home, para que el sitio
   se sienta uno solo: foto a sangre detrás, velo que sube desde abajo, y el
   texto delante con sombra. Se anula el aspect-ratio en línea del .frame,
   que si no pelea con el posicionamiento.                                 */

@media(max-width:860px){
  .lp-hero{position:relative;overflow:hidden;isolation:isolate}

  .lp-hero .frame{
    display:block !important;
    position:absolute;inset:0;z-index:0;
    aspect-ratio:auto !important;max-height:none !important;
    width:100%;height:100%;margin:0;border:0;background:none;
  }
  .lp-hero .frame img{
    width:100%;height:100%;
    object-fit:cover;object-position:center 28%;
    filter:saturate(.92) contrast(1.05);
  }

  /* velo: oscuro arriba para que el logo blanco del menú se lea, se abre en
     el centro para dejar ver la foto, y cierra abajo contra el fondo */
  .lp-hero::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    /* muchos pasos y muy juntos: el ojo no distingue el degradado de una
       transición continua, y desaparecen las bandas.                     */
    background:linear-gradient(to bottom,
      rgba(8,32,47,.80) 0%,
      rgba(8,32,47,.72) 6%,
      rgba(8,32,47,.62) 13%,
      rgba(8,32,47,.54) 21%,
      rgba(8,32,47,.49) 30%,
      rgba(8,32,47,.48) 40%,
      rgba(8,32,47,.52) 50%,
      rgba(8,32,47,.60) 59%,
      rgba(8,32,47,.69) 67%,
      rgba(8,32,47,.78) 75%,
      rgba(8,32,47,.86) 82%,
      rgba(8,32,47,.92) 88%,
      rgba(8,32,47,.96) 94%,
      var(--prussian-deep) 100%);
  }

  /* z-index:auto A PROPÓSITO: si el .wrap crea contexto de apilamiento, la
     foto (que es hija suya) queda atrapada dentro y se pinta por encima del
     texto, y el velo se queda debajo de todo. Sin contexto propio, los tres
     compiten en el mismo plano del hero: foto 0, velo 1, texto 2.        */
  .lp-hero .wrap{
    position:relative;z-index:auto;
    min-height:76svh;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:116px 24px 44px;
  }
  /* el bloque de texto va en flujo normal: sin capa explícita lo tapa
     cualquier elemento posicionado. Se le asigna la de arriba.           */
  .lp-hero .wrap > div:not(.frame){position:relative;z-index:2}
  .lp-hero .wrap > .frame{z-index:0}
  .lp-hero .label,.lp-hero h1,.lp-hero p{
    text-shadow:0 1px 2px rgba(4,16,24,.92), 0 5px 16px rgba(4,16,24,.8);
  }
  .lp-hero .cta-row{margin-top:4px}
}

@media(max-height:730px) and (max-width:860px){
  .lp-hero .wrap{min-height:88svh;padding-top:100px}
}


/* ---- 22 y 23. VARIANTES DESCARTADAS (13 ago 2026) ----
   Se probaron dos alternativas y se retiraron tras compararlas en vivo:
     · "apilada"      — foto arriba y texto debajo sobre azul sólido. Para
       que los botones cupieran en la primera pantalla había que encoger la
       foto al 36%, la más pequeña de las tres.
     · "texto arriba" — texto y botones primero, foto al fondo. Ponía el
       botón muy alto pero la primera pantalla volvía a empezar con texto.
   Ganó la superpuesta con el texto abajo (bloque 24). El código de las dos
   descartadas se retira para no dejar reglas muertas que después peleen
   con las vivas.                                                          */

/* ---- 24. SUPERPUESTA CON EL TEXTO ARRIBA (13 ago 2026) ----
   PRUEBA en lipo-corporal.

   Diferencia con la variante 21 (rinoplastia): allí el texto va superpuesto
   pero anclado ABAJO, así que el velo tiene que oscurecer la mitad inferior
   y la foto se ensucia justo donde más cuerpo hay. Aquí el texto va pegado
   ARRIBA, y entonces el velo solo tiene que trabajar en la franja superior:
   los dos tercios de abajo de la foto quedan LIMPIOS.

   Es la mejor de las dos superposiciones por una razón simple: el sitio
   donde va el texto es el sitio donde la foto tiene menos información
   (aire, fondo, hombros), no donde está el resultado.                    */

@media(max-width:860px){
  .lp-hero.hero-encima-arriba{
    position:relative;display:block;overflow:hidden;isolation:isolate;
    padding:0;min-height:100svh;
  }

  /* la foto, detrás y a sangre */
  .lp-hero.hero-encima-arriba .frame{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;margin:0;
    aspect-ratio:auto !important;max-height:none !important;
    border:0;background:none;overflow:hidden;
  }
  .lp-hero.hero-encima-arriba .frame img{
    width:100%;height:100%;
    object-fit:cover;object-position:center 42%;
    filter:saturate(.95) contrast(1.04);
  }

  /* el velo trabaja ARRIBA, donde está el texto, y se abre del 46% hacia
     abajo para dejar la foto limpia en la zona del resultado */
  .lp-hero.hero-encima-arriba::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(8,32,47,.62) 0%,     /* solo lo justo para que se lea el logo */
      rgba(8,32,47,.44) 6%,
      rgba(8,32,47,.26) 12%,
      rgba(8,32,47,.13) 18%,
      rgba(8,32,47,.06) 24%,
      rgba(8,32,47,.04) 32%,    /* la foto, limpia */
      rgba(8,32,47,.06) 40%,
      rgba(8,32,47,.14) 48%,
      rgba(8,32,47,.26) 55%,
      rgba(8,32,47,.40) 62%,
      rgba(8,32,47,.55) 69%,
      rgba(8,32,47,.69) 76%,
      rgba(8,32,47,.81) 83%,
      rgba(8,32,47,.90) 90%,
      rgba(8,32,47,.95) 96%,
      var(--prussian-deep) 100%);
  }

  /* el texto, arriba del todo */
  .lp-hero.hero-encima-arriba .wrap{
    position:relative;z-index:auto;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:104px 24px 42px;
  }
  .lp-hero.hero-encima-arriba .wrap > div:not(.frame){position:relative;z-index:2}
  .lp-hero.hero-encima-arriba .label,
  .lp-hero.hero-encima-arriba h1,
  .lp-hero.hero-encima-arriba p{
    text-shadow:0 1px 2px rgba(4,16,24,.9), 0 5px 18px rgba(4,16,24,.75);
  }
  .lp-hero.hero-encima-arriba .label{margin-bottom:10px}
  .lp-hero.hero-encima-arriba h1{font-size:clamp(27px,7.4vw,33px);line-height:1.05;margin-bottom:12px}
  .lp-hero.hero-encima-arriba p{margin-bottom:18px;font-size:15.5px;line-height:1.5}
}


/* ---- 25. LOS BOTONES SUELTOS DEL CUERPO (13 ago 2026) ----

   Revertido el centrado de los botones del hero: se quedan como estaban.

   El problema real estaba MÁS ABAJO. En las 12 páginas de procedimiento,
   los dos botones sueltos de las secciones "¿Qué es?" y "¿Eres candidata?"
   son <a class="btn"> dentro de un <div> normal. Al ser en línea, se pegan
   a la izquierda y dejan 150px de vacío al lado:

       "Evalúame ahora"      ancho 192px · hueco a la derecha 158px
       "Dime si califico →"  ancho 204px · hueco a la derecha 146px

   Y desentonan porque TODOS los demás botones del cuerpo van a ancho
   completo. En teléfono un botón a ancho completo no es capricho: es más
   fácil de tocar y marca dónde termina la sección.                       */

@media(max-width:860px){
  .split .btn:not(.cta-row .btn),
  .lp-hero ~ section .btn:not(.cta-row .btn),
  section > .wrap .btn:not(.cta-row .btn):not(.nav .btn){
    display:flex;width:100%;
    align-items:center;justify-content:center;
    min-height:48px;text-align:center;
  }
}


/* ---- 26. BARRA FIJA DE DOS BOTONES · SOLO EN TELÉFONO -------------------
   (11 sep 2026; estética alineada a la marca el mismo día)

   Dos caminos: WhatsApp y Pre-evaluación. Los dos van a wa.me con texto
   distinto para que Eva sepa qué quiere cada quien desde el primer mensaje.

   ESTÉTICA: habla el mismo idioma que .btn del sitio — esquinas RECTAS,
   borde de 1px, mayúsculas y letter-spacing amplio. Se quitaron el verde de
   WhatsApp, el ícono y el redondeo: eran de otro sistema de diseño y rompían
   el "papel, tinta y aire" de la marca.

   JERARQUÍA por relleno, no por color: el principal es papel sólido sobre el
   azul de marca (máximo contraste, el ojo va ahí primero) y el secundario es
   contorno sobre el mismo fondo. Es la misma pareja fill/ghost que ya usa el
   sitio, sin introducir un color nuevo.

   ⚠️ EN ESCRITORIO NO CAMBIA NADA. El segundo botón se esconde y queda el
   FAB único de siempre en la esquina. Al agregar el <a> al HTML aparecía
   apilado en las 19 páginas aunque el CSS de la barra fuera solo móvil: el
   markup es global, así que hay que esconderlo explícitamente arriba de
   620px, no solo estilar abajo.

   NO se toca el href aquí: track.js intercepta el clic, dispara la
   conversión de Google Ads y le pega el código del gclid al mensaje.        */

/* escritorio y tablet: como estaba antes, un solo botón */
@media(min-width:621px){
  .floats .fab.pre{display:none}
}

@media(max-width:620px){
  .floats{
    display:flex !important;
    flex-direction:row;
    left:0; right:0; bottom:0;
    gap:9px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:var(--prussian-deep);
    border-top:1px solid rgba(255,255,255,.12);
    z-index:80;
  }
  .floats .fab{
    flex:1 1 50%;
    min-width:0;                 /* sin esto el texto largo desborda la mitad */
    min-height:46px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    /* el tipo del sitio: mayúsculas y espaciado amplio, como .btn. A 11.5px
       "PRE-EVALUACIÓN" todavía entra en una línea a 360px de ancho. */
    font-size:11.5px; font-weight:600; letter-spacing:.13em;
    text-transform:uppercase;
    line-height:1.1;
    padding:8px 10px;
    border-radius:0;             /* recto, como todo el sitio */
    box-shadow:none;
    transition:opacity .3s var(--ease);
  }
  .floats .fab:hover{transform:none}
  .floats .fab:active{opacity:.7}

  /* principal: papel sólido, el de mayor contraste contra el azul */
  .floats .fab.cita{
    background:var(--paper); color:var(--prussian-deep);
    border:1px solid var(--paper);
    gap:8px;
  }
  /* el ícono va pintado con currentColor (el azul del texto), NO en verde:
     así identifica el canal sin meter un color ajeno al manual de marca.
     Se usa mask y no <img> para que herede el color del botón. */
  .floats .fab.cita::before{
    content:"";
    width:15px; height:15px; flex:none;
    background:currentColor;
    -webkit-mask:var(--ico-wa) center/contain no-repeat;
    mask:var(--ico-wa) center/contain no-repeat;
  }
  /* secundario: contorno sobre el mismo fondo */
  .floats .fab.pre{
    background:transparent; color:#fff;
    border:1px solid rgba(255,255,255,.45);
  }

  /* el hueco que deja la barra. MEDIDO, no calculado: 46 del botón + 18 de
     padding + 1 del borde = 65px reales. */
  body,html.gt body{padding-bottom:calc(65px + env(safe-area-inset-bottom))}
  /* .sin-barra la sigue escondiendo: la usa la pre-evaluación, donde un
     botón a WhatsApp encima del formulario solo distrae */
  body.sin-barra{padding-bottom:0}
  body.sin-barra .floats{display:none !important}
}

/* ícono de WhatsApp en SVG embebido: sin petición extra y, al ir como mask,
   toma el color del botón en vez de traer el verde de la marca ajena. */
:root{
  --ico-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.06 2.87 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.004c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.004a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.25 8.23z'/%3E%3C/svg%3E");
}