/* ============================================================
   ONBRAND361° — base.css
   Sistema de marca: tokens, reset, tipografía, utilidades.
   "Cero complicaciones. Tu imagen lista para funcionar."
   ============================================================ */

/* ---------- 1. Tipografías auto-alojadas (OFL) ---------- */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/SpaceGrotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/SpaceGrotesk-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/PlusJakartaSans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/PlusJakartaSans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root{
  /* Paleta corporativa */
  --navy:#111E38;
  --navy-deep:#0A1225;
  --navy-700:#1B2A4A;
  --navy-600:#26375C;
  --orange:#FF5E13;
  --orange-dark:#E24E08;
  --orange-soft:#FF8A4D;
  --gray-tech:#4A5568;
  /* 4,75:1 sobre blanco. El anterior #7C8797 se quedaba en 3,64:1 */
  --gray-mid:#66738A;
  --gray-line:#D8DEE8;
  --soft:#F7FAFC;
  --paper:#FFFFFF;

  /* Roles (modo claro por defecto) */
  --bg:var(--paper);
  --bg-alt:var(--soft);
  --ink:var(--navy);
  --ink-2:var(--gray-tech);
  --ink-3:var(--gray-mid);
  --rule:var(--gray-line);
  /* --accent  = superficies, trazos y logotipo: siempre el naranja de marca.
     --accent-ink = el MISMO naranja llevado a texto sobre fondo claro, oscurecido
     hasta 5,0:1 porque #FF5E13 sobre blanco se queda en 3,06:1 y no pasa AA.
     --on-accent = lo que se escribe ENCIMA del naranja: navy, 5,3:1. */
  --accent:var(--orange);
  --accent-ink:#C2440A;
  --on-accent:var(--navy);

  /* Tipografía */
  --f-display:'Space Grotesk','Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-brand:'Plus Jakarta Sans','Space Grotesk','Segoe UI',system-ui,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular','Cascadia Mono','Consolas',monospace;

  /* Escala fluida */
  --t-mega:clamp(2.9rem,9.4vw,8.2rem);
  --t-xxl:clamp(2.6rem,7vw,5.8rem);
  --t-xl:clamp(2rem,4.4vw,3.7rem);
  --t-lg:clamp(1.6rem,2.8vw,2.5rem);
  --t-md:clamp(1.24rem,1.7vw,1.58rem);
  --t-body:clamp(1rem,0.32vw + 0.94rem,1.075rem);
  --t-sm:0.9375rem;
  --t-xs:0.8125rem;
  --t-micro:0.6875rem;

  /* Ritmo */
  --gut:clamp(1.25rem,3.4vw,2.75rem);
  --sec:clamp(4.5rem,9.5vw,9rem);
  --maxw:1400px;
  --readw:64ch;

  /* Movimiento */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --d-1:.22s; --d-2:.45s; --d-3:.9s;

  /* Elevación */
  --sh-1:0 1px 2px rgba(17,30,56,.06),0 4px 14px rgba(17,30,56,.05);
  --sh-2:0 2px 6px rgba(17,30,56,.07),0 18px 44px rgba(17,30,56,.10);
  --sh-3:0 30px 90px rgba(10,18,37,.22);

  /* Radios: el sistema es escuadrado; el badge es la única curva */
  --r-badge:14px;
  --r-sm:4px;
  --r-pill:999px;

  --header-h:74px;
}

/* Bloques oscuros: invierten los roles, no los valores */
.is-dark{
  --bg:var(--navy);
  --bg-alt:var(--navy-700);
}
/* Cualquier bloque con fondo oscuro propio tiene que remapear la tinta.
   Si no, todo lo que use var(--ink) —titulares, <strong>, .link-t— se
   pinta navy sobre navy y desaparece. */
.is-dark,
.phead,
.split__layer--b,
.menu,
.auth__side,
.site-footer{
  --ink:#FFFFFF;
  --ink-2:#A9B5CA;
  --ink-3:#8D9BB4;
  --rule:rgba(255,255,255,.16);
  --accent-ink:var(--orange-soft);
  --on-accent:var(--navy);
  color-scheme:dark;
}
.is-deep{ --bg:var(--navy-deep); }

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset{margin:0;}
fieldset{padding:0;border:0;}
ul[class],ol[class]{list-style:none;padding:0;}
img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;border:0;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;}
:where(p,li){text-wrap:pretty;}
hr{border:0;border-top:1px solid var(--rule);margin:0;}

body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  overflow-x:hidden;
}

/* ---------- 4. Tipografía ---------- */
.display,h1,h2,h3{
  font-family:var(--f-display);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--ink);
}
h4,h5,h6{font-family:var(--f-brand);font-weight:700;line-height:1.22;letter-spacing:-.015em;color:var(--ink);}
.t-mega{font-size:var(--t-mega);line-height:.86;letter-spacing:-.045em;}
.t-xxl{font-size:var(--t-xxl);line-height:.9;letter-spacing:-.04em;}
.t-xl{font-size:var(--t-xl);line-height:.99;letter-spacing:-.032em;}
.t-lg{font-size:var(--t-lg);line-height:1.1;letter-spacing:-.028em;}
.t-md{font-size:var(--t-md);line-height:1.34;letter-spacing:-.018em;}
.lead{font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:58ch;}
.body-2{color:var(--ink-2);}
.measure{max-width:var(--readw);}
strong,b{font-weight:600;color:var(--ink);}
.body-2 strong{color:var(--ink);}
em{font-style:italic;}
small{font-size:var(--t-xs);}

/* Micro-etiqueta técnica: la voz "ficha técnica" del sistema */
.label{
  font-family:var(--f-body);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;align-items:center;gap:.7em;line-height:1;
}
.label--accent{color:var(--accent-ink);}
.label[data-idx]::before{
  content:attr(data-idx);
  font-family:var(--f-mono);
  font-size:.98em;
  letter-spacing:.04em;
  color:var(--accent-ink);
}
.label[data-idx]::after{
  content:'';width:clamp(18px,4vw,54px);height:1px;background:currentColor;opacity:.5;flex:none;
}

/* El acento naranja aplicado a "1°" y activaciones puntuales */
.deg{color:var(--accent);}
.deg-sup{font-size:.6em;vertical-align:.45em;letter-spacing:0;}

/* ---------- 5. Layout base ---------- */
.wrap{width:min(100% - (var(--gut)*2),var(--maxw));margin-inline:auto;}
.wrap-wide{width:min(100% - (var(--gut)*2),1700px);margin-inline:auto;}
.wrap-narrow{width:min(100% - (var(--gut)*2),960px);margin-inline:auto;}
.section{padding-block:var(--sec);background:var(--bg);color:var(--ink);position:relative;}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem);}
.section--flush-top{padding-top:0;}
.grid{display:grid;gap:var(--gut);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.flow > * + *{margin-top:var(--fl,1.1em);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}

@media(max-width:1024px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
}

/* Cabecera de sección estándar */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--gut);align-items:end;margin-bottom:clamp(2.4rem,5vw,4.5rem);}
.sec-head__t{margin-top:1.1rem;}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start;}}

/* ---------- 6. Utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{
  position:fixed;top:0;left:50%;transform:translate(-50%,-140%);
  z-index:1200;background:var(--orange);color:var(--navy);padding:.85rem 1.6rem;
  font-weight:600;font-size:var(--t-sm);border-radius:0 0 var(--r-badge) var(--r-badge);
  transition:transform var(--d-1) var(--e-out);
}
.skip:focus{transform:translate(-50%,0);}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px;}
.txt-c{text-align:center;}
.mt-0{margin-top:0 !important;}
.hide{display:none !important;}
@media(max-width:900px){.hide-m{display:none !important;}}
@media(min-width:901px){.only-m{display:none !important;}}

/* Regla técnica con marcas de corte */
.rule{position:relative;height:1px;background:var(--rule);margin-block:clamp(2.5rem,5vw,4rem);}
.rule::before,.rule::after{
  content:'';position:absolute;top:-3px;width:1px;height:7px;background:var(--accent);
}
.rule::before{left:0;} .rule::after{right:0;}

/* Textura de papel / grano — generada en CSS, sin archivo externo */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* Retícula de diseño — se activa con la tecla G */
.gridlines{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;
  transition:opacity var(--d-2) var(--e-out);
}
.gridlines[data-on='1']{opacity:1;}
.gridlines__inner{
  width:min(100% - (var(--gut)*2),var(--maxw));height:100%;margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
}
.gridlines__inner span{background:rgba(255,94,19,.05);border-left:1px solid rgba(255,94,19,.2);border-right:1px solid rgba(255,94,19,.2);}
@media(max-width:720px){.gridlines__inner{grid-template-columns:repeat(4,1fr);}.gridlines__inner span:nth-child(n+5){display:none;}}

/* ---------- 7. Movimiento accesible ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- 8. Impresión ---------- */
@media print{
  .site-header,.site-footer,.cursor,.gridlines,.marquee,.noprint,.hero__media{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .section{padding-block:1.2rem;}
  .is-dark{--bg:#fff;--ink:#000;--ink-2:#333;--rule:#ccc;}
  a[href^='http']::after{content:' (' attr(href) ')';font-size:9pt;color:#555;}
  /* Vista de impresión del briefing de contacto */
  body.printing-brief > *:not(#brief-print-view){display:none !important;}
  body.printing-brief #brief-print-view{display:block !important;}
}