/* ==================================================================
   El cotizador: /cotizar.

   Hoja APARTE, como la del blog: la pagina no carga styles.css. El
   cuerpo viene del artifact «ODD — Cotizador» casi tal cual -cristal
   sobre campos de color, el verde acido de acento-; lo que cambio al
   traerlo:
     - las letras son las del sitio: Neue Haas Display en los
       titulares, Neue Haas Text en el cuerpo y DM Mono en los rotulos.
       El artifact usaba Inter y JetBrains Mono, que no son de ODD.
     - fuera su barra propia, el cursor de cruz, el carrusel de marcas
       y el bloque de contacto: arriba va el menu del sitio y el
       contacto ya vive en la portada.
     - su <header> paso a ser .hero, porque <header> aqui es el menu.
================================================================== */

/* --- Neue Haas Grotesk ---
   Las mismas declaraciones que blog.css, y las mismas versiones -Trial:
   el dia que entre la licencia se sustituye el .otf y no se toca esto. */
@font-face {
  font-family: "Neue Haas Display";
  src: url("assets/fonts/neue-haas-display-black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Text";
  src: url("assets/fonts/neue-haas-text-roman.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Text";
  src: url("assets/fonts/neue-haas-text-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --body:    "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  /* lo que pide el menu copiado de abajo */
  --rd-acido:  #D3F32C;
  --nav-tinta: #f2efe9;
  /* Alto de la barra fija: su relleno mas el logotipo, que mide el 51%
     de su ancho. Calculado y no medido a ojo para que el titular no se
     meta debajo en ningun ancho. */
  --nav-alto: calc(2.2rem + clamp(74px, 8vw, 118px) * 0.51);
}

/* las dos lenguas del menu y del pie; el resto lo traduce cotizar.js */
html[data-lang="en"] [data-doc-lang="es"] { display: none; }
html[data-lang="es"] [data-doc-lang="en"] { display: none; }

/* ==================================================================
   EL COTIZADOR (del artifact)
================================================================== */
:root{color-scheme:dark;--bg:#000;--card:rgba(255,255,255,.06);--card2:rgba(255,255,255,.1);--line:rgba(255,255,255,.14);--tx:#f4f5f2;--mut:#9aa0a6;--lime:#dcff3d;--ink:#0b0d10;--sans:var(--body);--mono:"DM Mono",ui-monospace,monospace;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:80px;scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);line-height:1.5;overflow-x:hidden}
.w{max-width:1180px;margin:0 auto;padding:0 28px}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.kick:before{content:"— ";}
h1{font-size:clamp(52px,9vw,112px);line-height:.92;letter-spacing:-.045em;font-weight:800;margin:22px 0}
h1 i{font-style:normal;color:var(--lime)}
.sub{color:#c9ccd0;font-size:19px;max-width:460px}
.sec{padding:100px 0;min-height:90vh;display:flex;flex-direction:column;justify-content:center}
.lab{font-family:var(--mono);color:var(--mut);letter-spacing:.1em;text-transform:uppercase;font-size:14px;margin-bottom:22px}
.lab b{color:var(--tx);font-weight:500}
h2{font-size:clamp(34px,5vw,56px);letter-spacing:-.04em;line-height:1;font-weight:800;margin-bottom:12px}
h2 i{font-style:normal;color:var(--lime)}
.plans{display:block;overflow:hidden;padding:26px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.track{--sw:836px;display:flex;gap:18px;width:max-content;margin-left:calc(var(--sw)*-1);will-change:transform}.plans:hover .track{animation-play-state:paused}.plan{width:400px;flex:none}@keyframes slide{to{transform:translateX(var(--sw))}}
.plan{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:28px;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:.2s}
.plan:hover{transform:translateY(-3px)}
.plan.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 20px 60px -30px var(--lime)}
.plan h3{font-size:22px;letter-spacing:-.01em;font-weight:800}
.plan .p{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:6px 0 16px}
.plan .p small,.mes{font-size:14px;font-weight:400;color:var(--mut);letter-spacing:0}
.plan li{list-style:none;display:flex;gap:10px;font-size:14px;color:#d6d9dc;padding:5px 0}
.plan li:before{content:"✓";display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#c9ccd0;color:var(--ink);font-size:11px;font-weight:800;margin-top:2px}
.tag{position:absolute;top:-12px;right:22px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 12px;border-radius:99px;letter-spacing:.06em}
.cfg{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
.svc{display:flex;align-items:center;gap:18px;width:100%;background:var(--card);border:1px solid transparent;border-radius:16px;padding:18px 22px;margin-bottom:10px;cursor:pointer;color:inherit;font:inherit;text-align:left;transition:.15s}
.svc:hover{border-color:var(--line)}
.svc.on{border-color:#3a4220;background:#181c15}
.ck{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid #4a5058;display:grid;place-items:center;color:var(--ink);font-weight:800;font-size:15px}
.on>.ck{background:var(--lime);border-color:var(--lime)}
.on>.ck:after{content:"✓"}
.svc svg{flex:none;width:30px;height:30px;stroke:#d6d9dc;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc div{flex:1}.svc b{display:block;font-weight:600}.svc small{color:var(--mut);font-size:13px}
.svc .pr{font-weight:800;font-size:18px}
.side{position:sticky;top:20px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;font-family:var(--mono)}
.side .t{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:14px}
.side h4{font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--mut);margin:20px 0 10px}
.row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0}
.tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:16px;padding-top:16px;font-size:16px}
.tot b{font-family:var(--sans);font-size:38px;color:var(--lime);letter-spacing:-.03em}
.btn{display:flex;justify-content:center;gap:10px;width:100%;margin-top:18px;background:var(--lime);color:var(--ink);border:0;border-radius:12px;padding:16px;font:600 14px var(--mono);letter-spacing:.06em;cursor:pointer;text-decoration:none}
footer{padding:80px 0 50px;color:var(--mut);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.side{position:static}}

.glass,.plan,.svc,.side{background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 50px -24px rgba(0,0,0,.9)}
.plan.on{border-color:var(--lime);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px var(--lime),0 20px 60px -30px var(--lime)}
.svc.on{background:linear-gradient(135deg,rgba(220,255,61,.2),rgba(220,255,61,.05));border-color:rgba(220,255,61,.4)}
.plans,.cfg{position:relative;z-index:2}
.hero,.sec{position:relative}
.stage{position:absolute;right:-10px;top:30px;width:620px;height:520px;z-index:1;pointer-events:none}
.mon{position:absolute;bottom:0;animation:fl 5s ease-in-out infinite}
.mon .in{position:relative;width:100%}
.mon img{display:block;width:100%;height:auto}
.mon .hd{position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 40%,transparent 54%);mask-image:linear-gradient(#000 40%,transparent 54%);transform-origin:50% 38%;will-change:transform}
.mon .bd{transform-origin:50% 100%;will-change:transform}
@keyframes fl{50%{transform:translateY(-8px)}}

@media(max-width:900px){.stage{position:relative;right:auto;top:auto;width:100%;height:330px;margin:20px 0 -60px}}
.plan,.svc{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.svc:active{transform:scale(.992)}
h1{font-size:clamp(48px,7.4vw,96px)}
.stage{width:clamp(300px,38vw,480px);height:480px;top:60px}
.kick,h1,.sub,.lab{position:relative;z-index:3}
.pw{position:relative;margin-top:60px}.pw .plans{margin-top:0}
@media(min-width:901px){.stage{top:auto;bottom:100%;right:0;width:min(360px,36vw);height:min(300px,30vw);margin-bottom:-34px;z-index:4}}
.form{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.5fr;gap:32px;padding:34px;border-radius:26px;margin-top:10px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fg label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}.fg .full{grid-column:1/-1}
.fg input,.fg textarea{width:100%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 14px;color:#fff;font:inherit;font-size:15px;outline:none;resize:vertical;transition:.2s}
.fg input:focus,.fg textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(220,255,61,.18)}.fg .bad{border-color:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.2)}
.wst{font:12px/1.5 var(--mono);color:var(--mut);margin-top:12px}.wst a{color:var(--lime)}
.hero::before,#cfg::before{content:"";position:absolute;pointer-events:none;z-index:-1;filter:blur(34px);animation:gl 10s ease-in-out infinite alternate}
.hero::before{left:30%;right:-14%;top:120px;height:540px;background:radial-gradient(34% 40% at 46% 50%,rgba(255,45,45,.42),transparent 72%),radial-gradient(30% 36% at 76% 56%,rgba(230,255,40,.34),transparent 72%)}
#cfg::before{left:-14%;top:60px;width:60%;height:560px;background:radial-gradient(40% 40% at 40% 40%,rgba(220,255,61,.14),transparent 72%)}
@keyframes gl{from{opacity:.65;transform:translate3d(-16px,0,0) scale(1)}to{opacity:1;transform:translate3d(16px,-12px,0) scale(1.07)}}
@media(max-width:900px){.form{grid-template-columns:1fr;padding:24px}.fg{grid-template-columns:1fr}}
.hero::after,.sec::after{content:"";position:absolute;z-index:-2;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:0}
.hero::after{top:-100px;background:linear-gradient(165deg,#9a1018,#430509 62%,#170203)}
#datosec::after{background:linear-gradient(165deg,#0f4283,#08203f 68%,#030b18)}
#cfg::after{background:linear-gradient(165deg,#5f6f0b,#2a3304 68%,#0e1201)}

.ph{display:grid;grid-template-columns:150px 1fr;gap:8px}.ph select{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 10px;color:#fff;font:inherit;font-size:14px;outline:none}.ph select option{color:#000}
.btn[aria-disabled=true]{opacity:.45}
@media(max-width:900px){.ph{grid-template-columns:130px 1fr}}
@media(min-width:901px){.stage{width:min(540px,48vw);height:min(440px,42vw)}}
h1{font-size:clamp(46px,6.2vw,84px)}
#datosec{min-height:0;padding:56px 0}
.form{grid-template-columns:1fr 1.8fr;padding:30px;gap:28px}
.fg{grid-template-columns:1fr 1.45fr}
.ph{grid-template-columns:142px 1fr}
.side{top:24px}
@media(max-width:900px){.form,.fg{grid-template-columns:1fr}.ph{grid-template-columns:130px 1fr}}
.stp{display:inline-flex;align-items:center;gap:12px;font:12px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.8);margin-bottom:18px}
.stp b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--lime);color:#0b0d10;display:grid;place-items:center;font:700 16px var(--sans);letter-spacing:0}
.sw{position:sticky;top:24px;align-self:start}
.side{position:relative!important;top:auto!important;z-index:2}
@media(min-width:901px){.cfg{grid-template-columns:1.35fr 1fr;gap:28px}}
@media(max-width:900px){.sw{position:static}}
.grp{position:relative}
.grp::after{content:"";position:absolute;z-index:-2;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:0;background:linear-gradient(165deg,#5f6f0b,#2a3304 55%,#0e1201)}
#cfg::after{display:none}
#cfg{min-height:0;padding:90px 0 30px}
.arw{display:flex;justify-content:center;gap:14px;position:relative;z-index:3;margin-top:-8px}
.arw button{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:.2s}
.arw button:hover{background:var(--lime);color:#0b0d10;transform:scale(1.06)}.arw button:active{transform:scale(.95)}
.arw svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);opacity:0;pointer-events:none;transition:opacity .25s}
.pm.on{opacity:1;pointer-events:auto}
.pmc{position:relative;width:min(580px,100%);max-height:90vh;overflow:auto;border-radius:28px;padding:36px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05)),rgba(16,16,16,.6);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 90px -30px #000;transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pm.on .pmc{transform:none}
.pmx{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:.2s;cursor:pointer}
.pmx:hover{background:var(--lime);color:#0b0d10}
.pmc h3{font-size:34px;font-weight:800;letter-spacing:-.025em}
.pmp{font-size:46px;font-weight:800;letter-spacing:-.03em;margin:4px 0 12px}.pmp small{font-size:15px;font-weight:400;color:var(--mut);letter-spacing:0}
.pmd{color:#d6d9dc;font-size:16px}
.pmh{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:22px 0 4px}
.pml{list-style:none;padding:0;margin:0 0 14px}
.pml li{display:flex;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.pml li:before{content:"\2713";flex:none;width:24px;height:24px;border-radius:50%;background:var(--lime);color:#0b0d10;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.pml b{display:block;font-size:16px}.pml small{color:#c9ccd0;font-size:13.5px;line-height:1.5}
.pmn{color:var(--mut);font-size:13px}
.pfn{color:var(--lime);font:12px var(--mono);letter-spacing:.04em;margin:-8px 0 14px}
.pmc .pfn{margin:-6px 0 12px}
.plan li.more{color:var(--mut);padding-left:28px}.plan li.more:before{display:none}
.svc .inc{font:11px/1.3 var(--mono);letter-spacing:.05em;color:var(--lime);text-align:right;max-width:130px}
.gn{color:var(--lime);font:12px var(--mono);margin-top:14px}
.pkd{position:relative;z-index:2;margin-top:30px;display:grid;grid-template-columns:.9fr 1.6fr;gap:34px;padding:34px;border-radius:28px}
.pkl h3{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;margin:10px 0 4px}
.pk-p{font-size:34px;font-weight:800;letter-spacing:-.03em}.pk-p small{font-size:14px;font-weight:400;color:var(--mut);letter-spacing:0}
.pkl>p{color:#d6d9dc;margin:12px 0 24px}
.chart{display:grid;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.chart .tt{font:11px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.65);text-transform:uppercase}
.bar{display:grid;grid-template-columns:92px 1fr 78px;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.6)}
.bar b{font:600 12px var(--mono);text-align:right}.bar.sel{color:#fff}
.bar .tr{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.08)}
.bar .fl{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:rgba(255,255,255,.28);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar.sel .fl{background:var(--lime);box-shadow:0 0 14px rgba(220,255,61,.55)}
.bar .cm{position:absolute;top:0;bottom:0;border-radius:99px;border:1.5px dashed rgba(220,255,61,.5)}.bar.sel .cm{border-color:var(--lime)}
.lg{font:11px var(--mono);color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px}.lg i{width:26px;height:10px;border-radius:99px;border:1.5px dashed var(--lime)}
.pkg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}
.pkc{display:flex;gap:14px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(12px);animation:pk .5s forwards}
.pkc:last-child:nth-child(odd){grid-column:1/-1}
.pkc .ic{flex:none;width:46px;height:46px;border-radius:13px;background:rgba(220,255,61,.13);border:1px solid rgba(220,255,61,.4);display:grid;place-items:center}
.pkc .ic svg{width:23px;height:23px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pkc b{display:block;font-size:15px;margin-bottom:2px}.pkc small{color:#c9ccd0;font-size:12.5px;line-height:1.45}
@keyframes pk{to{opacity:1;transform:none}}
@media(max-width:900px){.pkd{grid-template-columns:1fr;padding:22px}.pkg{grid-template-columns:1fr}}
.ck{width:28px;height:28px;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.svc:hover .ck{border-color:var(--lime);box-shadow:0 0 0 3px rgba(220,255,61,.25)}
.on>.ck{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 3px rgba(220,255,61,.3)}
.svc.lock:not(.on){opacity:.5}
.cnt{font:12px var(--mono);letter-spacing:.08em;color:var(--lime);margin:0 0 18px}.cnt.shake{animation:shk .4s}
@keyframes shk{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media(max-width:900px){
.w{overflow-x:clip}
.hero{padding:calc(var(--nav-alto) + 16px) 0 44px!important}
.pw{margin-top:22px}
.stage{height:200px!important;margin:0 0 -14px!important}.plan .p{font-size:34px}.plan .p small{white-space:nowrap}
.plan{width:min(340px,82vw)}
.sec{padding:60px 0;min-height:0}
.svc{flex-wrap:wrap;gap:10px 14px;padding:16px}
.svc svg{display:none}.svc>div{flex:1 1 160px}
.svc .inc{order:3;flex-basis:100%;max-width:none;text-align:left;padding-left:42px}
.pmc{padding:26px}
.form{padding:22px 18px!important;gap:18px!important}
.ph{grid-template-columns:122px 1fr!important}.ph select{font-size:13px;padding:13px 6px}
}
@media(max-width:900px){
.stage{height:240px!important;margin:0!important}
.stage .mon{bottom:30px!important}
.plan{width:min(240px,64vw)!important;padding:18px 18px 16px}
.plan h3{font-size:17px}.plan .p{font-size:28px}.plan .p small{font-size:12px}
.plan li{font-size:13px;padding:3px 0;gap:8px}.plan li:before{width:16px;height:16px;font-size:9px}
.plan .pfn,.plan .tag{font-size:11px}
.arw button{width:44px;height:44px}
}

/* --- ajustes al traerlo al sitio --- */
h1, h2, .plan h3, .pkl h3, .pmc h3 { font-family: var(--display); font-weight: 900; }
/* El artifact apretaba a -.045em pensando en Inter. La Display Black ya
   viene cerrada de serie y con eso las palabras se pegaban: "atumanera". */
h1, h2 { letter-spacing: -.02em; word-spacing: .06em; }
.plan h3, .pkl h3, .pmc h3 { letter-spacing: 0; word-spacing: .06em; }
html { scroll-padding-top: calc(var(--nav-alto) + 16px); }
/* el titular arranca debajo de la barra fija */
.hero { padding: calc(var(--nav-alto) + 40px) 0 90px; }
footer a { color: inherit; }

/* ==================================================================
   EL MENU DEL SITIO

   ★ COPIADO de blog.css -que a su vez lo copio de styles.css-, no
   compartido: es la tercera copia y un cambio en el menu va en LAS
   TRES hojas.
================================================================== */

/* --- reglas base del menu que en blog.css viven fuera de su copia ---
   Van ANTES del resto: la media query de abajo enciende .nav__toggle en
   estrecho, y si esto fuera despues lo volveria a apagar. */

.nav__lang button[aria-pressed="true"] { opacity: 1; font-weight: 500; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--nav-tinta);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* vuelve a repartir: marca a la izquierda, enlaces y redes a la derecha */
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  /* Barra negra maciza, en todas las secciones.
     El difference original se iba con el rediseno -sobre el rojo devolvia
     un cian electrico-, y dejarla transparente y blanca la hacia
     desaparecer sobre las secciones claras. Con fondo propio deja de
     depender de lo que tenga detras: un solo estado, legible siempre. */
  background: #000;
  color: #fff;
}

.nav__brand {
  display: block;
  flex: none;
  line-height: 0;
}

.nav__brand img {
  display: block;
  width: clamp(74px, 8vw, 118px);
  height: auto;
  -webkit-user-drag: none;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
}

.social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: block;
  line-height: 0;
  transition: transform 220ms ease;
}

.social a:hover {
  transform: scale(1.12) rotate(-4deg);
}

.social img {
  display: block;
  width: clamp(24px, 2.4vw, 32px);
  height: auto;
  -webkit-user-drag: none;
}

.nav__links a {
  color: #fff;
  text-decoration: none;
  font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(0.66rem, 0.86vw, 0.82rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.95;
  transition: opacity 200ms ease;
}

.nav__links a:hover {
  opacity: 0.6;
}

.nav__burger {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: background-color 200ms ease;
}

.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__burger::before { top: -6px; }

.nav__burger::after { top: 6px; }

.nav.is-open .nav__burger { background: transparent; }

.nav.is-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }

.nav.is-open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

.nav__item--sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__subtoggle {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__chev { transform: translateY(1px) rotate(-135deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  z-index: 2;
  min-width: 17rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #08080a;
  border: 1px solid rgba(244, 242, 237, 0.16);
  /* el zoom: nace un poco encogido y desde arriba */
  transform: scale(0.96) translateY(-8px);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__sub {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.nav__sub button {
  display: block;
  width: 100%;
  padding: 0.5rem 1.1rem;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 237, 0.82);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.nav__sub button:hover { background: rgba(244, 242, 237, 0.07); color: var(--rd-acido); }

.nav__sub button:focus-visible { outline: 2px solid var(--rd-acido); outline-offset: -2px; }

.nav.is-sub-open { mix-blend-mode: normal; }

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: clamp(0.8rem, 2vw, 1.6rem);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  /* Hereda del nav en vez de fijar --ink, que era un blanco roto y se
     despegaba medio tono del resto de la barra. */
  color: inherit;
}

.nav__lang span { opacity: 0.4; }

.nav__lang button {
  padding: 0.2em 0.1em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.45;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 200ms ease;
}

.nav__lang button:hover { opacity: 0.8; }

.nav__lang button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 1180px) {
  .nav__toggle { display: inline-flex; }
  .nav__right {
      position: fixed;
      inset: 0;
      z-index: -1;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: clamp(1.4rem, 4vh, 2.2rem);
      padding: 6rem clamp(1.4rem, 8vw, 3rem) 3rem;
      /* el mismo negro que la barra: son una sola superficie */
      background: #000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 320ms ease;
    }
  .nav.is-open .nav__right {
      z-index: 1;
      opacity: 1;
      pointer-events: auto;
    }
  .nav__links a:focus-visible,
    .nav__sub button:focus-visible {
      outline: 2px solid var(--rd-acido);
      outline-offset: 4px;
      border-radius: 2px;
    }
  .nav__links {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(0.7rem, 2.2vh, 1.2rem);
    }
  .nav__links a {
      font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-style: italic;
      font-size: clamp(1.7rem, 7vw, 2.6rem);
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #fff;
    }
  .nav__links a:hover { color: var(--rd-acido); }
  .social { gap: 1.4rem; }
  .social img { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__right,
    .nav__burger,
    .nav__burger::before,
    .nav__burger::after { transition: none; }
}

@media (max-width: 1180px) {
  .nav__item--sub { display: block; }
  .nav__item--sub > a { display: inline-block; }
  .nav__subtoggle {
      width: 28px;
      height: 28px;
      vertical-align: middle;
      margin-left: 0.4rem;
    }
  .nav__chev { width: 8px; height: 8px; }
  .nav__sub {
      position: static;
      min-width: 0;
      margin: 0.5rem 0 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-left: 1px solid rgba(244, 242, 237, 0.2);
      display: none;
      transform: none;
      opacity: 1;
    }
  .nav__item--sub.is-open .nav__sub { display: block; }
  .nav__sub button {
      padding: 0.42rem 0 0.42rem 1rem;
      font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__chev { transition: none; }
}

@media (max-width: 1180px) {
  .nav__lang { margin-right: auto; }
}

@media (pointer: coarse) {
  .nav__lang button {
      padding: 0.75rem 0.55rem;
      margin: -0.75rem -0.2rem;
    }
  .social a {
      padding: 0.55rem;
      margin: -0.55rem;
    }
  .nav__subtoggle,
    .nav__toggle { position: relative; }
  .nav__subtoggle::after {
      content: "";
      position: absolute;
      inset: -9px;
    }
  .nav__toggle::after {
      content: "";
      position: absolute;
      inset: -9px -8px;
    }
}

/* El acceso al portal sale del sitio y va el ultimo: se separa con aire. */
.nav__os { margin-left: 0.4rem; }