/* Layout: universo Diplomatic — header blanco, hero navy, sección sticky clara donde el scroll desarma el termopanel, cierre navy. Look claro único, deliberado. */
:root{
  --navy:#0D1F3C; --navy-deep:#08152A; --blue:#1A3A6B; --accent:#2D7DD2;
  --paper:#F8F9FA; --tint:#E8EDF5; --text:#374151; --muted:#6B7280; --white:#FFFFFF;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
img{max-width:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.6}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--white);border-bottom:1px solid var(--tint)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--navy);letter-spacing:.02em;white-space:nowrap}
.logo img{height:32px;width:auto;margin-right:16px;flex:none}
.logo small{align-self:flex-end;padding-bottom:5px}
.logo small{font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.14em;margin-left:8px;font-weight:400}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--navy);text-decoration:none;font-size:14px;font-weight:500}
nav a:hover,nav a:focus-visible{color:var(--accent)}
.btn{display:inline-block;background:var(--navy);color:var(--white);padding:10px 18px;border-radius:4px;text-decoration:none;font-weight:600;font-size:14px}
.btn:focus-visible,nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:760px){nav{display:none}}
@media (max-width:420px){.logo small{display:none}}

/* Hero */
.hero{position:relative;min-height:calc(100svh - 60px);display:grid;align-items:end;overflow:hidden;background:var(--navy-deep);color:var(--white)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,42,.10) 0%,rgba(8,21,42,.18) 45%,rgba(8,21,42,.78) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(40px,7vw,88px);display:grid;gap:18px}
.hero .label{color:#BFD6F2}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,5.4vw,68px);line-height:1.06;margin:0;max-width:18ch;text-wrap:balance}
.hero p{max-width:56ch;margin:0;color:#DCE4EF;font-size:17px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:6px}
.hero .facts span{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--white);border:1px solid rgba(255,255,255,.35);background:rgba(8,21,42,.35);backdrop-filter:blur(4px);padding:7px 11px;border-radius:3px}
.playtoggle{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(16px,4vw,32px);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(8,21,42,.4);color:#fff;cursor:pointer;font-size:12px}
.playtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:760px){.hero .wrap{padding-bottom:72px}.hero p{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.hero video{display:none}}

/* Intro DIPLOTEC */
.about{background:var(--white)}
.about .wrap{padding-block:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,4vw,56px);align-items:start}
.about h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.15;margin:0;color:var(--navy)}
.about p{margin:0 0 12px;max-width:60ch}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}}

/* Scroll section */
.anatomy{position:relative;height:480vh;background:#F7F7F9}
.stick{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);height:calc(100vh - 60px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);align-items:center;gap:clamp(16px,3vw,40px);max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.copy{min-width:0;display:grid;gap:10px}
.copy .label{color:var(--accent)}
.stage-num{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.copy h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.5vw,34px);line-height:1.12;margin:0;color:var(--navy);text-wrap:balance}
.copy p{margin:0;max-width:44ch;font-size:15px;line-height:1.5}
.spec{font-family:var(--f-mono);font-size:13px;color:var(--navy);background:var(--tint);padding:8px 12px;border-radius:3px;justify-self:start}
.fade{transition:opacity .35s ease, transform .35s ease}
.fade.out{opacity:0;transform:translateY(6px)}
.stage{position:relative;aspect-ratio:16/9;max-width:100%;width:100%}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:opacity}
.track{display:flex;gap:6px;margin-top:6px}
.track span{height:3px;flex:1;background:var(--tint);border-radius:2px;overflow:hidden;position:relative}
.track span i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.copy p.note{font-size:12px;color:var(--muted)}
.flat{display:none}
@media (max-width:860px){
  .anatomy{height:auto}
  .stick{display:none}
  .flat{display:grid;gap:40px;padding:56px clamp(16px,4vw,40px)}
  .flat>.label{color:var(--accent);margin-bottom:-16px}
  .fstage{display:grid;gap:10px;min-width:0}
  .fstage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
  .fstage h2{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.15;margin:0;color:var(--navy);text-wrap:balance}
  .fstage p{margin:0;font-size:15px;line-height:1.5}
  .fcards{display:grid;gap:8px;margin-top:6px}
  .flat p.note{margin:0;font-size:12px;color:var(--muted)}
}


/* Data cards: bajada técnica que entra con el scroll */
.cards{display:grid;gap:6px;min-height:0}
.dc{background:var(--white);border:1px solid var(--tint);border-left:3px solid var(--accent);border-radius:4px;padding:7px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:1px;align-items:baseline;opacity:0;transform:translateX(18px);transition:opacity .45s ease, transform .45s ease}
.dc.on{opacity:1;transform:none}
.dc-k{grid-column:1/-1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dc-v{font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.dc-v small{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--muted);margin-left:3px}
.dc-t{font-size:13px;line-height:1.4;color:var(--text)}
.dc-s{grid-column:1/-1;font-size:11px;color:var(--muted)}
.dc.nov .dc-t{grid-column:1/-1}
@media (max-width:860px){
  .fcards .dc{padding:10px 12px}
  .fcards .dc-t{font-size:14px;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){.dc{transition:none;transform:none}}

/* Lines */
.lines{background:var(--white)}
.lines .wrap{padding-block:clamp(48px,7vw,88px);display:grid;gap:28px}
.lines h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.5vw,42px);margin:0;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{border-top:2px solid var(--navy);padding-top:16px;display:grid;gap:8px;align-content:start}
.card h3{font-family:var(--f-display);font-weight:600;font-size:22px;margin:0;color:var(--navy)}
.card p{margin:0}
.card .label{color:var(--muted)}

/* Vidrios: tres niveles de lectura (tarjeta → cómo funciona → ficha) */
.vid{background:var(--white)}
.vid .wrap{padding-block:clamp(56px,8vw,104px);display:grid;gap:clamp(22px,3vw,34px)}
.vid .label{color:var(--accent)}
.vid h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin:0;color:var(--navy);max-width:20ch;text-wrap:balance}
.vid .lead{margin:0;max-width:60ch;font-size:17px}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vc{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:72px 1fr;column-gap:16px;row-gap:4px;align-items:center;padding:16px 18px;border:1px solid var(--tint);border-radius:6px;background:var(--paper);transition:border-color .2s,background .2s,box-shadow .2s}
.vc:hover{border-color:#C9D5E6}
.vc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vc[aria-pressed="true"]{background:var(--white);border-color:var(--navy);box-shadow:0 1px 0 var(--navy) inset,0 6px 18px rgba(13,31,60,.07)}
.vc svg{grid-row:1/4;width:72px;height:72px}
.vc svg .io{display:none}
.vc .n{font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--navy);line-height:1.2}
.vc .b{font-size:13.5px;line-height:1.4;color:var(--text)}
.vc .f{font-family:var(--f-mono);font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.vpanel{border:1px solid var(--tint);border-radius:8px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);overflow:hidden}
.vpanel .side{background:var(--paper);padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start;border-right:1px solid var(--tint)}
.vpanel .side svg{width:100%;max-width:200px;height:auto}
.vpanel .side .cap{font-size:13px;color:var(--muted);margin:-6px 0 0}
.vpanel .side .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vpanel .side h3{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.6vw,32px);margin:0;color:var(--navy);line-height:1.1}
.vpanel .side .big{font-family:var(--f-display);font-weight:600;font-size:30px;color:var(--navy);font-variant-numeric:tabular-nums}
.vpanel .side .big small{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--muted);margin-left:4px}
.vpanel .main{padding:clamp(20px,3vw,32px);display:grid;gap:16px;align-content:start}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--tint)}
.tabs button{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);padding:8px 2px;margin-right:18px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.how p{margin:0 0 12px;max-width:62ch;font-size:15.5px;line-height:1.6}
.how .use{font-size:14px;color:var(--muted)}
.spec-t{width:100%;border-collapse:collapse;font-size:14px}
.spec-t th,.spec-t td{text-align:left;padding:10px 0;border-bottom:1px solid var(--tint);vertical-align:top}
.spec-t th{font-weight:500;color:var(--muted);width:38%;padding-right:16px}
.spec-t td b{font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:16px;font-variant-numeric:tabular-nums}
.spec-t td span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.spec-t a{color:inherit}
.vpanel .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:4px}
.vpanel .acts p{margin:0;font-size:12px;color:var(--muted);max-width:46ch}
.vfade{transition:opacity .25s ease}
.vfade.out{opacity:0}
@media (max-width:980px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .vgrid{grid-template-columns:1fr 1fr;gap:8px}
  .vc{grid-template-columns:1fr;padding:12px;row-gap:2px}
  .vc svg{grid-row:auto;width:48px;height:48px;margin-bottom:4px}
  .vc .b{display:none}
  .vc .n{font-size:16px}
  .vpanel{grid-template-columns:1fr}
  .vpanel .side{border-right:0;border-bottom:1px solid var(--tint)}
  .vpanel .side svg{max-width:180px}
  .spec-t th{width:42%}
}
@media (prefers-reduced-motion:reduce){.vfade,.vc{transition:none}}

/* Caso 1: plano con etiquetas HTML y líneas guía rectas */
.caso{background:var(--navy-deep);color:#DCE4EF}
.caso .wrap{padding-block:clamp(56px,8vw,104px);display:grid;gap:clamp(22px,3vw,36px)}
.caso .label{color:#8FB8E8}
.caso h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.1;margin:0;color:var(--white);max-width:22ch;text-wrap:balance}
.caso .lead{margin:0;max-width:58ch;font-size:17px}
.plan{position:relative;margin:0;border-radius:6px;overflow:hidden;aspect-ratio:2752/1536;background:#1b2433}
.plan img{display:block;width:100%;height:100%;object-fit:cover}
.tag{position:absolute;display:flex;align-items:center;transform:translateY(-50%);pointer-events:none}
.tag i{display:block;height:1px;background:rgba(255,255,255,.85);transform-origin:var(--o,left);transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.tag b{display:grid;gap:2px;font-weight:400;background:rgba(8,21,42,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:3px;padding:8px 12px;opacity:0;transition:opacity .5s ease calc(var(--d,0s) + .35s);white-space:nowrap}
.tag b span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9FB6D3}
.tag b strong{font-family:var(--f-display);font-weight:600;font-size:clamp(14px,1.4vw,18px);color:var(--white);font-variant-numeric:tabular-nums}
.tag.r{flex-direction:row-reverse}
@media (max-width:1100px){.tag b{padding:6px 9px}.tag b span{font-size:9.5px}}
.plan.on .tag i{transform:scaleX(1)} .plan.on .tag b{opacity:1}
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:clamp(16px,3vw,40px)}
.step{border-top:1px solid rgba(255,255,255,.22);padding-top:16px;display:grid;gap:10px;align-content:start}
.step .label{color:#8FB8E8}
.step p{margin:0;font-size:15.5px;line-height:1.55}
.step q{font-family:var(--f-display);font-style:italic;font-size:19px;line-height:1.4;color:var(--white);quotes:"“" "”"}
.prop{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prop li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--accent);border-radius:4px;padding:9px 12px}
.prop .k{grid-column:1/-1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9FB6D3}
.prop .v{font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums}
.prop .v small{font-family:var(--f-mono);font-size:11px;font-weight:400;color:#9FB6D3;margin-left:3px}
.prop .t{font-size:13.5px;line-height:1.4}
.prop .s{grid-column:1/-1;font-size:11px;color:#8A9AB2}
.prop li.sun{border-left-color:#D9952F} 
.caso .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.caso .foot p{margin:0;font-size:12px;color:#8A9AB2}
.caso .btn{background:var(--white);color:var(--navy)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
@media (max-width:760px){.tag{display:none}.plan{aspect-ratio:auto}.plan img{height:auto}}
@media (prefers-reduced-motion:reduce){.tag i,.tag b{transition:none}}

footer{background:var(--navy);color:#C9D3E3}
footer .wrap{padding-block:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer strong{font-family:var(--f-display);color:var(--white);font-weight:400;font-size:22px}
@media (prefers-reduced-motion:reduce){.fade{transition:none}}

/* Enlace a Diplomatic (sitio hermano) */
nav a.nav-ext{color:var(--muted);border-left:1px solid var(--tint);padding-left:22px}
nav a.nav-ext:hover,nav a.nav-ext:focus-visible{color:var(--accent)}
footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Contacto */
footer .contact{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding-block:72px 48px}
footer .contact .label{color:#8A9AB2}
footer .contact h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.15;color:var(--white);margin:12px 0 0}
footer .people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
footer .people li{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;display:flex;flex-direction:column;gap:6px}
footer .people h3{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.25;color:var(--white);margin:4px 0 6px}
footer .people a{font-family:var(--f-mono);font-size:14px;text-decoration:none;overflow-wrap:anywhere}
footer .people a:hover,footer .people a:focus-visible{color:var(--white);text-decoration:underline;text-underline-offset:3px}
footer .base{border-top:1px solid rgba(255,255,255,.1);padding-block:28px}
@media (max-width:860px){footer .contact{grid-template-columns:1fr;padding-block:56px 40px}}
@media (max-width:560px){footer .people{grid-template-columns:1fr}}
footer address{font-style:normal;margin-top:18px;font-size:15px;line-height:1.5}
footer .phones{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
footer .phones a{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:15px;text-decoration:none;color:var(--white)}
footer .phones svg{flex:none;color:#C9D3E3}
footer .phones a:hover,footer .phones a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Botón flotante de WhatsApp (Leonardo López) */
.fab-wa{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:30;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:var(--white);box-shadow:0 6px 20px rgba(8,21,42,.28);transition:transform .15s ease}
.fab-wa:hover{transform:scale(1.06)}
.fab-wa:focus-visible{outline:2px solid var(--white);outline-offset:3px;box-shadow:0 0 0 5px var(--accent)}
@media (prefers-reduced-motion:reduce){.fab-wa{transition:none}}

/* Celular: el botón de WhatsApp no tapa el control del video ni la última línea del pie */
@media (max-width:760px){
  .fab-wa{width:50px;height:50px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
  .playtoggle{top:16px;bottom:auto}
  footer .base{padding-bottom:84px}
}