/* =========================================================
   Kit base sageDev — estilo A «institucional editorial» (por defecto)
   Rectos (sin border-radius), mayúsculas espaciadas, líneas finas, acento de 2px arriba.
   REEMPLAZAR: tokens de color y fuentes con los MEDIDOS del cliente. El resto ya trae
   las correcciones de Axel (eyebrow en una línea, hamburguesa→X, botones sin ícono, etc.).
   Para el estilo B (moderno, redondeado) solo si el brief lo pide: agregar radios y píldoras.
   ========================================================= */
:root{
  /* identidad visual del cliente (hex literales de su sistema) */
  --noche:#0B1724;       /* azul noche */
  --petroleo:#172B3F;    /* azul petróleo */
  --grisazul:#7186A5;    /* azul grisáceo: acento */
  --marfil:#F4F1EB;
  --piedra:#B8B5AE;
  --grafito:#20262D;
  --bg:#FFFFFF;
  --bg-alt:#F4F1EB;
  --dark:#0B1724;
  --dark-2:#0B1724;
  --accent:#55698A;      /* gris azulado oscurecido para texto chico sobre claro (contraste) */
  --accent-l:#7186A5;
  --text:#20262D;
  --muted:#4F5660;
  --muted-d:rgba(244,241,235,.74);
  --line:rgba(32,38,45,.14);
  --line-d:rgba(244,241,235,.13);
  --head:"League Spartan",system-ui,sans-serif;
  --body:"Libre Baskerville",Georgia,serif;
  --hdr:88px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:2rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:only light;background:#0B1724;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:var(--hdr)}
body{font-family:var(--body);font-size:.96rem;line-height:1.8;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--head);font-weight:500;line-height:1.08;color:var(--dark);text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 2rem}

/* ---------- secciones: alternar fondos (nunca dos iguales seguidas) ---------- */
.sec{padding:120px 0}
.sec-alt{background:var(--bg-alt)}
.sec-alt p,.sec-alt li{font-weight:500}           /* sobre gris el texto necesita más cuerpo */
.sec-alt .lead,.sec-alt .muted{color:#444C54}
.sec-dark{background:var(--dark);color:var(--muted-d)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .eyebrow,.sec-dark .h2 em{color:var(--accent-l)}

/* ---------- tipografía ---------- */
.eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;white-space:nowrap}
.h2{font-size:clamp(2.4rem,4.6vw,3.6rem);letter-spacing:-.005em}
.h2 em{font-style:normal;font-weight:400;color:var(--accent)}
.lead{font-size:1.08rem;color:var(--muted)}
.sec-head{text-align:center;max-width:46rem;margin:0 auto 3.6rem}

/* ---------- botones: solo texto (sin ícono de WhatsApp adentro) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 1.9rem;border:1px solid transparent;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.btn-sm{min-height:42px;padding:0 1.3rem;font-size:.72rem}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--accent)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-l)}
.btn-line{border-color:var(--dark);color:var(--dark)}
.btn-line:hover{background:var(--dark);color:#fff}
.sec-dark .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;padding-bottom:.35rem;border-bottom:1px solid var(--accent);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.link-arrow i{transition:transform .3s var(--ease)}
.link-arrow:hover i{transform:translateX(4px)}

/* ---------- header fijo: transparente → sólido ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:0 2.5rem;transition:background .4s,box-shadow .4s}
.hdr.sc{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -20px rgba(0,0,0,.4)}
.hdr-logo img{height:52px;width:auto}            /* logo con presencia (Axel lo pidió más grande varias veces) */
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a:not(.btn){position:relative;padding:.4rem 0;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dark)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
/* hamburguesa que se transforma en X (nunca una cruz aparte tapándola) */
.burger{display:none;position:relative;width:44px;height:44px;margin-right:.4rem;border:0;background:none}
.burger span{position:absolute;right:10px;height:1.5px;background:var(--dark);transition:transform .45s var(--ease),width .45s var(--ease),top .45s var(--ease)}
.burger span:first-child{top:18px;width:24px}
.burger span:last-child{top:25px;width:16px}
body.nav-open .burger span{width:24px;top:21.5px}
body.nav-open .burger span:first-child{transform:rotate(45deg)}
body.nav-open .burger span:last-child{transform:rotate(-45deg)}
body.nav-open .hdr{z-index:120;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.nav-open .hdr-logo{opacity:0;pointer-events:none}
.mnav-ov{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.35s}
.mnav{position:fixed;top:0;right:0;bottom:0;z-index:100;width:82%;max-width:320px;background:var(--bg);transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:2rem}
.mnav-logo{width:120px;margin-bottom:1rem}
.mnav a:not(.btn){font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dark)}
.mnav a:not(.btn):hover{color:var(--accent)}
.mnav .btn{margin-top:1rem;width:100%;max-width:240px}
body.nav-open .mnav{transform:none}
body.nav-open .mnav-ov{opacity:1;visibility:visible}

/* ---------- hero: ocupa la pantalla; elemento propio del cliente (nada de mitad derecha vacía) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--bg-alt) center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0}  /* velo: fuerte solo detrás del texto; tinte de marca como gradiente diagonal esparcido */
.hero-in{position:relative;z-index:2;width:100%;padding-top:var(--hdr)}
.hero-h1{font-size:clamp(2.6rem,5vw,4.2rem);text-wrap:balance}  /* líneas de ancho parejo */
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

/* ---------- tarjetas y listas del estilo A ---------- */
.card{padding:2.2rem 2rem;background:var(--bg);border:1px solid var(--line);border-top:2px solid var(--accent)}
.rows>li{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.rows{border-top:1px solid var(--line)}
/* preguntas frecuentes: filas con líneas, cruz que gira (sin círculo alrededor) */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem .2rem;cursor:pointer;list-style:none;font-family:var(--head);font-size:1.3rem;color:var(--dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:1.4rem;color:var(--accent);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.4rem 1.4rem .2rem;color:var(--muted)}

/* ---------- contacto: datos + formulario (email y/o WhatsApp) ---------- */
.contacto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start}
.contacto-grid>*{min-width:0}
.datos{border-top:1px solid var(--line)}
.datos li{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.datos .ic{display:grid;place-items:center;flex:none;width:2.8rem;height:2.8rem;border:1px solid var(--accent);font-size:1.25rem;color:var(--accent)}
.datos div{min-width:0}
.datos small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.datos a,.datos span:not(.ic){font-family:var(--head);font-size:1.3rem;font-weight:600;color:var(--dark);overflow-wrap:anywhere}
.form-card{padding:2.8rem 2.6rem;background:var(--bg);border:1px solid var(--line);border-top:2px solid var(--accent)}
.form-card h3{font-size:1.9rem}
.form-card>p{margin:.2rem 0 1.8rem;font-size:.92rem;color:var(--muted)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem;min-width:0}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark)}
.field .opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-width:0;padding:.8rem .95rem;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:.96rem;outline:0;transition:border-color .3s}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B1724' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field .msg{display:none;font-size:.78rem;color:#B3261E}
.field.err .msg{display:block}
.field.err input,.field.err textarea,.field.err select{border-color:#B3261E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-btns{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.6rem}
.f-btns .btn{width:100%;padding:0 1rem}
.f-btns:has(>:only-child){grid-template-columns:1fr}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.5rem;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.3s}
.modal.show{opacity:1;visibility:visible}
.modal-card{width:100%;max-width:420px;padding:2.8rem 2rem 2.2rem;background:var(--bg);border-top:2px solid var(--accent);text-align:center}
.modal-card i{font-size:3rem;color:var(--accent)}
.modal-card h3{font-size:1.8rem;margin:.5rem 0 .4rem}
.modal-card p{color:var(--muted);margin-bottom:1.6rem}

/* ---------- footer: completo; abajo 3 líneas centradas ---------- */
.ftr{background:var(--dark-2);color:rgba(255,255,255,.66);font-size:.92rem}
.ftr-in{max-width:1200px;margin:0 auto;padding:5rem 2rem 3.6rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:3rem}
.ftr h4{margin-bottom:1.1rem;font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-l)}
.ftr-col ul{display:grid;gap:.65rem}
.ftr a{transition:color .3s}
.ftr a:hover{color:#fff}
.ftr-data li{display:flex;align-items:center;gap:.6rem}
.ftr-data i{font-size:1.15rem;color:var(--accent-l)}
.ftr-bottom{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.5rem 2rem 1.8rem;border-top:1px solid var(--line-d);font-size:.78rem;color:rgba(255,255,255,.5);text-align:center}
.ftr-bottom a{color:#fff;font-weight:600}

/* ---------- WhatsApp flotante (único elemento redondo) ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#1f9d55;color:#fff;font-size:1.7rem;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);transition:opacity .35s,transform .35s var(--ease)}
.wa-float.hide{opacity:0;transform:translateY(16px);pointer-events:none}

/* ---------- animaciones ---------- */
.rise{animation:rise 1s var(--ease) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* si un elemento tiene transición propia y .reveal, declarar la combinada: .x,.x.reveal{transition:…} */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   RESPONSIVE 1024 / 768 / 480 / 380 (+ altura ≤760 en el hero)
   En ≤768 todo centra y las grillas pasan a una columna.
   ========================================================= */
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .ftr-in{grid-template-columns:1fr 1fr;gap:2.8rem 2rem}
  .contacto-grid{grid-template-columns:1fr;gap:3.5rem}
}
@media (max-width:768px){
  :root{--hdr:74px}
  .wrap{padding:0 1.25rem}
  .sec{padding:76px 0}
  .hdr{padding:0 1rem;justify-content:center}            /* logo centrado en mobile */
  .burger{position:absolute;right:.9rem;top:50%;margin:-22px 0 0}
  .eyebrow{font-size:clamp(.56rem,2.75vw,.76rem);letter-spacing:.14em}
  .hero{height:auto;min-height:100svh}
  .hero-in{padding-top:calc(var(--hdr) + 2rem);padding-bottom:3rem;text-align:center}
  .hero-h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}           /* escalar con vw; probar 375×667 y 393×852 */
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-ctas .btn{width:100%;max-width:300px}
  .sec-head,.contacto-info{text-align:center}
  .datos li{flex-direction:column;gap:.55rem;text-align:center}
  .form-card{padding:2.2rem 1.3rem}
  .form-card h3,.form-card>p{text-align:center}
  .f-row,.f-btns{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr;text-align:center;padding:3.6rem 1.25rem 2.6rem;gap:2.4rem}
  .ftr-data li{justify-content:center}
  /* marcos desplazados de fotos (::before con inset asimétrico) → simétricos acá, si no la foto se ve corrida */
}
@media (max-width:768px) and (max-height:760px){
  .hero-h1{font-size:clamp(1.8rem,7.6vw,2.3rem)}
}
@media (max-width:380px){
  .btn{padding:0 1rem;letter-spacing:.1em}
}

/* =========================================================
   AGUSTÍN ALMEYRA · identidad del cliente + RETÍCULA (concepto distintivo)
   League Spartan (títulos, botones, labels) + Libre Baskerville (lectura).
   ========================================================= */
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.015em;line-height:1.02;color:var(--noche)}
.h2{font-size:clamp(2.4rem,4.4vw,3.6rem)}
.h2 .acc{display:block;color:var(--accent)}
.eyebrow{font-family:var(--head);font-size:.8rem;font-weight:700;letter-spacing:.24em;color:var(--noche);margin:0}
.btn{font-family:var(--head);font-size:.84rem;font-weight:600;letter-spacing:.14em;padding-top:.15em}
.btn-sm{font-size:.76rem}
.btn-dark{background:var(--noche);color:var(--marfil)}
.btn-dark:hover{background:var(--petroleo)}
.btn-accent{background:var(--grisazul);color:#fff}
.btn-accent:hover{background:var(--accent)}
.btn-claro{background:var(--marfil);color:var(--noche)}
.btn-claro:hover{background:#fff}
.btn-line{border-color:var(--noche);color:var(--noche)}
.link-arrow{font-family:var(--head);font-size:.82rem;letter-spacing:.16em;border-bottom-color:var(--grisazul);padding-top:.15em}
.lead{font-size:1.04rem;color:var(--muted)}

/* fondos (alternar por luminosidad: noche / marfil / noche / marfil / petróleo / blanco / noche) */
.sec,.ftr{position:relative;isolation:isolate}
.marfil{background:var(--marfil)}
.marfil-2{background:var(--marfil)}
.blanco{background:#fff}
.noche{background:var(--noche);color:var(--muted-d)}
.petroleo{background:var(--petroleo);color:var(--muted-d)}
.noche h2,.noche h3,.petroleo h2,.petroleo h3{color:var(--marfil)}
.noche .h2 .acc,.petroleo .h2 .acc{color:var(--grisazul)}
.noche .eyebrow,.petroleo .eyebrow{color:var(--marfil)}
.noche .btn-line,.petroleo .btn-line,.hero .btn-line{border-color:rgba(244,241,235,.45);color:var(--marfil)}
.noche .btn-line:hover,.petroleo .btn-line:hover,.hero .btn-line:hover{background:var(--marfil);color:var(--noche)}
.noche .link-arrow,.petroleo .link-arrow{color:var(--marfil)}
.sec-foto{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.foto-columnas{background-image:linear-gradient(115deg,rgba(7,15,24,.97) 0%,rgba(7,15,24,.94) 50%,rgba(11,23,36,.9) 100%),url(img/columnas.jpg)}
.foto-firma{background-image:linear-gradient(100deg,rgba(17,33,49,.97) 0%,rgba(17,33,49,.93) 55%,rgba(11,23,36,.88) 100%),url(img/escritorio.jpg)}

/* ---------- RETÍCULA: columnas editoriales finas + cruces «+» donde tocan el borde de la sección ---------- */
.ret{position:absolute;inset:0;z-index:-1;pointer-events:none;--rl:rgba(11,23,36,.075);--rc:rgba(11,23,36,.32)}
.noche>.ret,.petroleo>.ret,.hero>.ret,.ftr>.ret{--rl:rgba(113,134,165,.13);--rc:rgba(113,134,165,.55)}
.ret::before,.ret::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:calc(min(1200px,100%) - 2*var(--gut))}
.ret::before{top:0;bottom:0;
  background:linear-gradient(var(--rl),var(--rl)) 0 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 33.333% 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 66.666% 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 100% 0/1px 100% no-repeat}
.ret::after{top:-6px;height:13px;width:calc(min(1200px,100%) - 2*var(--gut) + 12px);
  --x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%237186A5' stroke-width='1'/%3E%3C/svg%3E");
  background:var(--x) 0 0/13px 13px no-repeat,var(--x) 33.333% 0/13px 13px no-repeat,var(--x) 66.666% 0/13px 13px no-repeat,var(--x) 100% 0/13px 13px no-repeat}
.hero>.ret::after{display:none}
/* hero: las líneas con el mismo margen de aire que en las secciones y sin la segunda (cortaba el email de la barra) */
@media (min-width:1025px){.hero>.ret::before{width:min(calc(min(1200px,100%) - 2*var(--gut) + 7rem),calc(100% - 2.4rem));
  background:linear-gradient(var(--rl),var(--rl)) 0 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 66.666% 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 100% 0/1px 100% no-repeat}}
/* retícula medida: en las secciones (no el hero) solo los bordes de la columna, más tenues; cruces solo en los extremos */
.sec>.ret{--rl:rgba(11,23,36,.05)}
.noche>.ret,.petroleo>.ret{--rl:rgba(113,134,165,.08)}
.sec>.ret::before{background:linear-gradient(var(--rl),var(--rl)) 0 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 100% 0/1px 100% no-repeat}
/* las líneas se corren hacia afuera del contenido: margen de aire, nunca pegadas al texto */
.sec>.ret::before{width:min(calc(min(1200px,100%) - 2*var(--gut) + 7rem),calc(100% - 2.4rem))}
.sec>.ret::after{width:min(calc(min(1200px,100%) - 2*var(--gut) + 7rem + 12px),calc(100% - 2.4rem + 12px))}
@media (max-width:768px){.sec>.ret{display:none}}
.sec>.ret::after{opacity:.7;background:var(--x) 0 0/13px 13px no-repeat,var(--x) 100% 0/13px 13px no-repeat}
/* número de sección en el margen de la retícula: «01 — Sobre mí ————» */
.sec-top{display:flex;align-items:center;gap:1rem;margin-bottom:3.4rem}
.sec-top .n{font-family:var(--head);font-weight:600;font-size:.82rem;letter-spacing:.1em;color:var(--grisazul)}
.sec-top .n::after{content:"";display:inline-block;width:70px;height:3px;margin-left:1rem;vertical-align:middle;background:var(--grisazul);transform:translateY(-2px)}
.sec-top::after{content:"";flex:1;height:1px;background:var(--line)}
.noche .sec-top::after,.petroleo .sec-top::after{background:var(--line-d)}

/* ---------- header: logo + links, centrado como conjunto; transparente sobre el hero ---------- */
.hdr{justify-content:center;padding:0 2rem}
.hdr-in{display:flex;align-items:center;gap:4.2rem}
.hdr.sc{background:rgba(11,23,36,.94);box-shadow:0 1px 0 rgba(113,134,165,.22)}
.brand{display:flex;flex-direction:column;line-height:1;color:var(--marfil)}
.brand-n{font-family:var(--head);font-weight:700;font-size:1.06rem;letter-spacing:.16em;text-transform:uppercase}
/* textlogo en una línea: solo el nombre, con la regla gris azulada de su identidad al costado */
.brand{flex-direction:row;align-items:center;gap:.85rem}
.brand::before{content:"";flex:none;width:30px;height:3px;background:var(--grisazul)}
.brand-n{line-height:1;padding-top:.12em}
.brand-s{margin-top:.42rem;font-family:var(--body);font-size:.8rem;letter-spacing:.04em;color:var(--grisazul)}
.nav{gap:2rem}
.nav a:not(.btn){font-family:var(--head);font-size:.8rem;letter-spacing:.16em;color:var(--marfil);padding-top:.5rem}
.nav a:not(.btn)::after{background:var(--grisazul)}
.burger span{background:var(--marfil)}
.mnav{background:linear-gradient(160deg,var(--petroleo),var(--noche))}
.mnav a:not(.btn){font-family:var(--head);font-size:.86rem;color:var(--marfil)}
.mnav a:not(.btn):hover{color:var(--grisazul)}
.mnav-brand{justify-content:center;text-align:center;margin-bottom:1.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line-d)}
.mnav-brand{flex-direction:column;align-items:center;gap:.9rem}
.mnav-brand .brand-n{white-space:nowrap}

/* ---------- hero: noche + foto a la derecha con la banda translúcida de su identidad ---------- */
.hero{isolation:isolate;background:var(--noche);color:var(--muted-d);min-height:680px;align-items:stretch}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:46%;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 18%}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,23,36,.75) 0%,rgba(11,23,36,0) 32%)}
.hero-banda{position:absolute;top:0;bottom:0;left:0;width:29%;z-index:1;background:rgba(23,43,63,.72);border-right:1px solid rgba(113,134,165,.45)}
.hero-firma{position:absolute;z-index:2;left:calc(29% + 2rem);bottom:2.6rem;display:flex;flex-direction:column;gap:.3rem;padding-left:1rem;border-left:3px solid var(--grisazul)}
.hero-firma b{font-family:var(--head);font-weight:700;font-size:1.25rem;line-height:1.1;color:var(--marfil)}
.hero-firma span{font-size:.82rem;color:rgba(244,241,235,.8)}
.hero-in{display:flex;align-items:center;padding-top:var(--hdr);padding-bottom:6rem}
.hero-txt{max-width:600px}
.regla{display:block;width:70px;height:4px;background:var(--grisazul);margin-bottom:2.2rem}
.hero .eyebrow{color:var(--marfil);margin-bottom:1.4rem}
.hero-h1{font-size:clamp(3.2rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.025em;color:var(--marfil)}
.hero-h1 span{display:block;color:var(--grisazul)}
/* bloque del hero de ancho parejo: la 1.ª línea del H1 se agranda hasta medir lo mismo que la 2.ª; bajada y botones acompañan */
.hero-h1 .l1{font-size:1.185em;line-height:.94;color:var(--marfil)}
.hero-ctas .btn{padding:0 1.55rem}
.hero-sub{max-width:34.5rem;margin-top:1.8rem;font-size:1.08rem;line-height:1.75;color:rgba(244,241,235,.82)}
.hero-ctas{margin-top:2.4rem}
.hero-bar{position:absolute;z-index:2;left:0;bottom:0;width:54%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-d)}
.hero-bar li{display:flex;align-items:center;gap:.6rem;padding:1.15rem 1.6rem;font-family:var(--head);font-size:.9rem;letter-spacing:.04em;color:var(--marfil)}
.hero-bar li+li{border-left:1px solid var(--line-d)}
.hero-bar i{font-size:1.15rem;color:var(--grisazul)}
.hero-bar a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1025px){.hero-in{padding-left:max(2rem,calc((100vw - 1200px)/2 + 2rem))}.hero .wrap.hero-in{max-width:none;margin:0}}

/* ---------- 01 sobre mí ---------- */
.sobre{display:grid;grid-template-columns:1fr 2fr;gap:0;align-items:center}
.sobre>*{min-width:0}
.sobre-cifra{padding-right:2rem}
.sobre-cifra b{display:flex;align-items:flex-start;font-family:var(--head);font-weight:700;font-size:clamp(7rem,13vw,11.5rem);line-height:.8;letter-spacing:-.05em;color:var(--noche)}
.sobre-cifra .mas{font-size:.42em;margin:.1em .3em 0 0;color:var(--grisazul)}
.sobre-cifra>span{display:block;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);max-width:14rem;font-family:var(--head);font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.sobre-txt{padding-left:calc(100% / 2 * 0);}
.sobre-txt .lead{margin:1.6rem 0 2rem;font-size:1.12rem;line-height:1.85;color:var(--grafito)}

/* ---------- 02 áreas ---------- */
.areas .h2{margin-bottom:3.4rem}
.areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.area{display:flex;flex-direction:column;padding:2.8rem 2.6rem 2.6rem 0;transition:background .8s var(--ease)}
.area+.area{padding:2.8rem 0 2.6rem 2.6rem;border-left:1px solid var(--line-d)}
.area-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.area-ic{display:grid;place-items:center;flex:none;width:3.2rem;height:3.2rem;border:1px solid rgba(113,134,165,.6);font-size:1.5rem;color:var(--grisazul)}
.area h3{font-size:clamp(1.6rem,2.4vw,2rem)}
.area>p{color:var(--muted-d)}
.area-list{margin:1.6rem 0 2.2rem}
.area-list li{position:relative;padding:.75rem 0 .75rem 1.5rem;font-family:var(--head);font-size:1.08rem;color:var(--marfil)}
.area-list li+li{border-top:1px solid var(--line-d)}
.area-list li::before{content:"";position:absolute;left:0;top:1.28rem;width:.7rem;height:1px;background:var(--grisazul)}
.area .link-arrow{margin-top:auto;align-self:flex-start}
.otras{display:flex;align-items:center;gap:1.4rem;margin-top:2.6rem}
.otras-ic{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:rgba(113,134,165,.16);font-size:1.4rem;color:var(--marfil)}
.otras p{flex:1;color:var(--muted-d)}
.otras b{font-family:var(--head);font-weight:600;font-size:1.08rem;color:var(--marfil)}

/* áreas v2: menos líneas horizontales, íconos con presencia, textos de ancho parejo */
.areas-grid{border-top:0;border-bottom:0}
.area{padding-top:.4rem;padding-bottom:.4rem}
.area+.area{padding-top:.4rem;padding-bottom:.4rem}
.area-list{margin:1.4rem 0 2.2rem}
.area-list li{padding:.45rem 0 .45rem 1.5rem}
.area-list li+li{border-top:0}
.area-list li::before{top:1.02rem}
.area-ic{width:3.6rem;height:3.6rem;border:0;background:var(--grisazul);color:var(--noche);font-size:1.7rem}
.area>p,.otras p{text-wrap:balance}
.otras{margin-top:3.6rem;padding-top:2.4rem;border-top:1px solid var(--line-d)}
.otras-ic{width:3.6rem;height:3.6rem;background:var(--grisazul);color:var(--noche);font-size:1.6rem}
@media (max-width:1024px){
  .area,.area+.area{padding:2.4rem 0}
  .area:first-child{padding-top:0}
}
/* ---------- 03 criterio: la propuesta de valor, frase por frase ---------- */
.criterio{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}
.criterio>*{min-width:0}
.criterio-head{position:sticky;top:calc(var(--hdr) + 2rem)}
.criterio-cita{margin-top:1.6rem;max-width:22rem;font-size:1.08rem;color:var(--muted)}
.filas{counter-reset:f}
.filas li{display:grid;grid-template-columns:4.4rem 1fr;align-items:baseline;padding:1.7rem 0;position:relative}
.filas li+li{border-top:1px solid var(--line)}
.filas li::after{content:"";position:absolute;left:4.4rem;right:0;bottom:-1px;height:1px;background:var(--grisazul);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.filas li:last-child::after{display:none}
.filas li:hover::after{transform:scaleX(1)}
.f-n{font-family:var(--head);font-weight:600;font-size:.9rem;letter-spacing:.06em;color:var(--accent)}
.filas p{font-family:var(--head);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.2;letter-spacing:-.01em;color:var(--noche)}
.filas li,.filas li.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* ---------- 04 preguntas ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:4.5rem;align-items:start}
.faq-grid>*{min-width:0}
.faq-head p{margin:1.4rem 0 2rem;color:var(--muted-d)}
.petroleo .faq details{border-bottom-color:var(--line-d)}
.faq details:last-child{border-bottom:0}
.faq summary{font-family:var(--head);font-weight:600;font-size:1.2rem;line-height:1.3;padding:1.35rem .2rem}
.petroleo .faq summary{color:var(--marfil)}
.faq summary::after{font-family:var(--head);font-weight:300;font-size:1.8rem;color:var(--grisazul)}
.petroleo .faq details p{color:var(--muted-d)}
.faq-a{overflow:hidden}
.faq details.cerrando summary::after{transform:none}

/* ---------- 05 contacto ---------- */
.contacto-info .lead{margin:1.4rem 0 2rem}
.datos{border-top:0}
.datos li:last-child{border-bottom:0}
.datos .ic{border-color:var(--grisazul);color:var(--accent)}
.datos small{font-family:var(--head);font-size:.74rem;color:var(--accent)}
.datos a,.datos span:not(.ic){font-family:var(--head);font-size:1.18rem;font-weight:600;color:var(--noche)}
.mapa{margin-top:1.6rem;border:1px solid var(--line);height:220px}
.mapa iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
/* contacto: columnas de igual altura (el mapa y el campo del mensaje absorben la diferencia) */
@media (min-width:1025px){
  .contacto-grid{align-items:stretch}
  .contacto-info{display:flex;flex-direction:column}
  .contacto-info .mapa{flex:1 1 auto;min-height:200px;height:auto}
  .form-card{display:flex;flex-direction:column}
  #contactForm{flex:1 1 auto;display:flex;flex-direction:column}
  #contactForm .field:has(textarea){flex:1 1 auto}
  #contactForm textarea{flex:1 1 auto}
}
.form-card{background:var(--marfil);border:0;border-top:4px solid var(--grisazul)}
.form-card h3{font-size:1.9rem}
.field label{font-family:var(--head);font-size:.76rem;color:var(--noche)}
.field input,.field select,.field textarea{background-color:#fff;font-family:var(--body);font-size:.92rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--grisazul)}
.modal-card{border-top:4px solid var(--grisazul)}
.modal-card i{color:var(--grisazul)}

/* ---------- footer ---------- */
.ftr{background:var(--noche);color:rgba(244,241,235,.66)}
.ftr h4{font-family:var(--head);font-size:.78rem;color:var(--grisazul)}
.ftr-brand p{margin-top:1.3rem;max-width:20rem;font-size:.9rem}
.ftr-data i{color:var(--grisazul)}
.ftr a:hover{color:var(--marfil)}
/* footer: textlogo en una línea y todos los textos con la fuente de los links del navbar */
@media (min-width:1025px){.ftr-in{grid-template-columns:1.7fr 1fr 1fr 1.3fr}}
.ftr .brand-n{white-space:nowrap}
@media (max-width:380px){.ftr .brand-n{white-space:normal}}
.ftr-brand p,.ftr-col li,.ftr-col a,.ftr-data span{font-family:var(--head);font-size:1rem;letter-spacing:.02em}
.ftr-bottom{font-family:var(--head);font-size:.82rem;letter-spacing:.04em}

@media (max-width:1150px){
  .hdr-in{gap:2.4rem}
  .nav{gap:1.4rem}
}
@media (max-width:1024px){
  .hdr{justify-content:space-between;padding:0 1.6rem}
  .hero-foto{width:44%}
  .hero-bar{display:none}
  .hero-in{padding-bottom:4rem}
  .hero-txt{max-width:52%}
  .hero-firma{left:1.4rem;bottom:1.6rem}
  .hero-banda{width:18%}
  .sobre{grid-template-columns:1fr;gap:2.6rem}
  .criterio,.faq-grid{grid-template-columns:1fr;gap:2.8rem}
  .criterio-head{position:static}
  .areas-grid{grid-template-columns:1fr}
  .area,.area+.area{padding:2.4rem 0}
  .area+.area{border-left:0;border-top:1px solid var(--line-d)}
  .ret::before{background:linear-gradient(var(--rl),var(--rl)) 0 0/1px 100% no-repeat,linear-gradient(var(--rl),var(--rl)) 100% 0/1px 100% no-repeat}
  .ret::after{background:var(--x) 0 0/13px 13px no-repeat,var(--x) 100% 0/13px 13px no-repeat}
}
@media (max-width:768px){
  :root{--hdr:72px;--gut:1.25rem}
  .hdr{justify-content:center}
  .brand-n{font-size:.92rem;letter-spacing:.13em}
  .brand-s{font-size:.74rem}
  /* hero mobile: captura de presentación en 100svh fijo (texto arriba, foto llenando el resto) */
  .hero{height:100svh;min-height:0;flex-direction:column}
  .hero-in{order:1;flex:none;padding:calc(var(--hdr) + 1.6rem) var(--gut) 2.8rem;text-align:center;justify-content:center}
  .hero-txt{max-width:none;display:flex;flex-direction:column;align-items:center}
  .regla{width:52px;height:3px;margin-bottom:1.2rem}
  .hero .eyebrow{margin-bottom:.9rem}
  .hero-h1{font-size:clamp(2.4rem,11.4vw,3.3rem)}
  .hero-sub{font-size:.96rem;margin-top:1.1rem;max-width:22rem}
  .hero-ctas{margin-top:1.5rem;gap:.7rem;width:100%}
  .hero-foto{position:relative;order:2;flex:1 1 auto;min-height:120px;width:100%}
  /* la foto se agranda un poco y se corre para que el cuerpo quede al centro (en el original está al 55%) */
  .hero-foto img{width:118%;max-width:none;margin-left:-15%;object-position:50% 12%}
  .hdr .brand::before{display:none}
  .hero-banda{width:16%}
  .hero-firma{left:calc(16% + 1rem);bottom:1.1rem;padding-left:.8rem}
  .hero-firma b{font-size:1.05rem}
  .hero-firma span{font-size:.76rem}
  /* como en el hero: número y regla arriba, eyebrow debajo, todo centrado */
  .sec-top{flex-direction:column;gap:1rem;margin-bottom:2rem}
  .sec-top::after{display:none}
  .sec-top .n{display:flex;flex-direction:column;align-items:center;gap:.7rem}
  .sec-top .n::after{width:52px;height:3px;margin:0;transform:none}
  .sobre-cifra{padding:0;display:flex;flex-direction:column;align-items:center;text-align:center}
  .sobre-cifra>span{margin-inline:auto}
  .sobre-txt{text-align:center}
  .h2{font-size:clamp(2.1rem,9vw,2.6rem)}
  .h2,.areas .h2,.criterio-head,.faq-head{text-align:center}
  .area{text-align:center;align-items:center}
  .area-head{flex-direction:column;gap:.9rem}
  .area-list{width:100%}
  .area-list li{padding-left:0}
  .area-list li::before{display:none}
  .area .link-arrow{align-self:center}
  .otras{flex-direction:column;text-align:center}
  .criterio-cita{margin-inline:auto}
  .filas li{grid-template-columns:1fr;gap:.4rem;text-align:center;padding:1.4rem 0}
  .filas li::after{left:0}
  .faq summary{text-align:left}
  .mapa{height:200px}
  .ftr-brand .brand{justify-content:center}
  .ftr-brand p{margin-inline:auto}
}
@media (max-width:768px) and (max-height:700px){
  .hero-sub{display:none}
  .hero-h1{font-size:clamp(2.2rem,10.4vw,2.9rem)}
}
@media (max-width:380px){
  .brand-n{font-size:.82rem;letter-spacing:.1em}
  .hdr .brand-n{font-size:.88rem;letter-spacing:.1em}
  .hdr .brand::before{display:none}
  .hdr .brand-n{padding-top:0}
  .hdr .brand-n{font-size:1.02rem;letter-spacing:.14em}
  /* firma legible sobre la camisa: velo inferior más fuerte y sombra suave en el texto */
  .hero-foto::after{background:linear-gradient(0deg,rgba(11,23,36,.94) 0%,rgba(11,23,36,.7) 20%,rgba(11,23,36,0) 46%)}
  .hero-firma b,.hero-firma span{text-shadow:0 1px 10px rgba(11,23,36,.9)}
  .burger{margin-top:-26px}  /* centro óptico de las dos líneas = centro del textlogo */
}

/* =========================================================
   v2 (01/11) — pedido del cliente: nombre en el hero, sobre mí completo,
   menos info en áreas y criterio, muchos accesos de contacto, reunión virtual/presencial
   ========================================================= */
/* hero: el nombre es el H1 (dos líneas de ancho parejo) */
/* v3 (02/11): sin «Pablo» ni bajada: «Agustín» / «Almeyra» al mismo tamaño */
.hero-h1 .l1{font-size:1.38em;line-height:.92;color:var(--marfil)}
.hero-h1 .l2{font-size:1.62em;line-height:.92;color:var(--grisazul)}
.hero-sub{max-width:36rem;text-wrap:balance}

/* 01 sobre mí: texto completo, la cifra acompaña fija */
.sobre{align-items:start}
.sobre-cifra{position:sticky;top:calc(var(--hdr) + 3rem)}
.sobre-p{margin:1.6rem 0 2.2rem}
.sobre-p p{font-size:1.04rem;line-height:1.85;color:var(--grafito)}
.sobre-p p+p{margin-top:1.1rem}
.sobre-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}

/* 02 áreas: tres tarjetas que son botón de consulta */
.areas-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.area3{display:flex;flex-direction:column;padding:2.4rem 2.2rem 2.2rem;border:1px solid var(--line-d);background:rgba(11,23,36,.35);transition:border-color .5s,background .5s}
.area3:hover{border-color:rgba(113,134,165,.7);background:rgba(23,43,63,.6)}
.area3 h3{margin:1.5rem 0 2.2rem;font-size:clamp(1.6rem,2.4vw,2rem);color:var(--marfil)}
.area3-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grisazul)}
.area3-cta i{transition:transform .3s var(--ease)}
.area3:hover .area3-cta i{transform:translateX(4px)}

/* 03 criterio */
.crit2{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.crit2-txt{margin-bottom:2rem;font-size:1.28rem;line-height:1.7;color:var(--grafito)}

/* 04 comunicate: canales grandes */
.canales{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.canal{display:flex;flex-direction:column;align-items:flex-start;padding:2.4rem 2.2rem 2.2rem;border:1px solid var(--line-d);background:rgba(11,23,36,.4);transition:border-color .5s,background .5s;min-width:0}
.canal:hover{border-color:rgba(113,134,165,.75);background:rgba(11,23,36,.6)}
.canal>i{display:grid;place-items:center;width:3.6rem;height:3.6rem;background:var(--grisazul);color:var(--noche);font-size:1.7rem}
.canal small{margin-top:1.6rem;font-family:var(--head);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--grisazul)}
.canal b{margin-top:.3rem;font-family:var(--head);font-weight:600;font-size:1.25rem;color:var(--marfil);overflow-wrap:anywhere}
.canal-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;padding-bottom:.3rem;border-bottom:1px solid var(--grisazul);font-family:var(--head);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--marfil)}
.canal-cta i{transition:transform .3s var(--ease)}
.canal:hover .canal-cta i{transform:translateX(4px)}

/* 05 agendar: modalidades */
.modos{margin-top:2rem;border-top:1px solid var(--line)}
.modos li{display:flex;align-items:center;gap:1.1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.modos .ic{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:var(--noche);color:var(--grisazul);font-size:1.35rem}
.modos b{display:block;font-family:var(--head);font-weight:600;font-size:1.15rem;color:var(--noche)}
.modos span{font-size:.94rem;color:var(--grafito)}
.modos-wa{margin-top:1.6rem;font-size:.98rem;color:var(--grafito)}
.modos-wa a{font-weight:700;color:var(--noche);border-bottom:1px solid var(--grisazul)}

.areas-3>*,.canales>*,.crit2>*{min-width:0}
@media (max-width:1024px){
  .areas-3,.canales{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .crit2{grid-template-columns:1fr;gap:1.6rem}
  .sobre-cifra{position:static}
}
@media (max-width:768px){
  .hero-h1 .l1{font-size:1.36em}
  .hero-h1 .l2{font-size:1.6em}
  .sobre-p{text-align:left}
  .sobre-ctas{justify-content:center}
  .area3,.canal{align-items:center;text-align:center;padding:2rem 1.4rem}
  .crit2{text-align:center}
  .modos{text-align:left}
  .modos-wa{text-align:center}
}

/* Anti modo oscuro forzado: Samsung Internet y algunas WebView ignoran «only light»,
   pero no invierten la página si detectan un tema oscuro propio. Este «tema oscuro» repite los colores claros. */
@media (prefers-color-scheme:dark){
  :root{color-scheme:only light}
  html{background:#fff}
  body{background:var(--bg);color:var(--text)}
}

/* ---------- privacidad y 404 (generar_extras.py) ---------- */
.legal-hero{padding:calc(var(--hdr) + 5rem) 0 3.6rem;background:var(--noche);color:var(--marfil)}
.legal-hero .h2{color:var(--marfil)}
.legal{padding:80px 0 120px;background:var(--marfil)}
.legal-in>*{max-width:46rem}
.legal-date{margin-bottom:2.2rem;font-size:.85rem;font-weight:600;color:var(--grisazul)}
.legal h2{margin:2.4rem 0 .8rem;font-family:var(--head);font-size:1.45rem}
.legal p,.legal li{color:var(--muted)}
.legal p+p{margin-top:.8rem}
.legal ul{display:grid;gap:.5rem;margin:.8rem 0}
.legal li{position:relative;padding-left:1.3rem}
.legal li::before{content:"";position:absolute;left:0;top:.8em;width:.55rem;height:1px;background:var(--grisazul)}
.nf{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 3rem) 0 4rem;background:var(--marfil)}
.nf-num{display:block;margin-bottom:1rem;font-family:var(--head);font-size:clamp(6rem,14vw,11rem);line-height:.85;color:var(--grisazul)}
.nf .lead{margin:1.2rem 0 2rem;max-width:34rem}
.nf-ctas{display:flex;flex-wrap:wrap;gap:1rem}
@media (max-width:768px){
  .legal-hero{padding:calc(var(--hdr) + 3rem) 0 2.6rem;text-align:center}
  .legal{padding:56px 0 84px}
  .nf{text-align:center}
  .nf .lead{margin-left:auto;margin-right:auto}
  .nf-ctas{flex-direction:column;align-items:center}
  .nf-ctas .btn{width:100%;max-width:300px}
}

/* 404 en azul noche: el header es claro arriba de todo (como en el hero) */
.nf{background:var(--noche);color:var(--muted-d)}
.nf .h2{color:var(--marfil)}
.nf .lead{color:var(--muted-d)}
.nf .btn-dark{background:var(--marfil);color:var(--noche)}
.nf .btn-line{border-color:rgba(244,241,235,.45);color:var(--marfil)}