/* ============================================================
   CONEX361° — base.css
   Sistema de marca: tokens, reset, tipografía, utilidades.
   "Tu conexión directa con la fábrica china."

   Todos los pares de color que llevan texto están medidos: el
   valor de contraste va anotado junto a cada token para que la
   próxima persona que toque esto no lo rompa sin enterarse.
   ============================================================ */

/* ---------- 1. Tipografías auto-alojadas (SIL OFL 1.1) ---------- */
@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 CONEX361° */
  --mar:#0C3F5E;          /* Azul Mar — 11,0:1 sobre blanco */
  --mar-profundo:#071F30; /* Mar Profundo — fondos oscuros */
  --mar-700:#123A55;
  --mar-600:#1B506F;
  --aire:#2E93B8;         /* Azul Aire — SUPERFICIE, no texto (3,5:1) */
  --aire-ink:#1F6D8C;     /* el mismo azul llevado a texto — 5,8:1 */
  --export:#F2A900;       /* Amarillo Export — SUPERFICIE (2,0:1) */
  --export-ink:#8A6100;   /* el mismo amarillo llevado a texto — 5,6:1 */
  --export-suave:#FFC94D;
  --horizonte:#E2703A;    /* naranja de grupo, en reserva */
  --gris-mar:#4B6070;     /* 6,6:1 sobre blanco */
  /* 5,1:1 sobre blanco y 4,7:1 sobre Niebla. El anterior #64798A pasaba
     sobre blanco pero se quedaba en 4,15:1 sobre el fondo Niebla, que es
     donde vive la mitad de las micro-etiquetas del sitio. */
  --gris-medio:#5C7183;
  --linea:#D5DFE7;
  --niebla:#F1F6F9;
  --papel:#FFFFFF;

  /* Roles (modo claro por defecto) */
  --bg:var(--papel);
  --bg-alt:var(--niebla);
  --ink:var(--mar);
  --ink-2:var(--gris-mar);
  --ink-3:var(--gris-medio);
  --rule:var(--linea);
  /* --accent      superficies, trazos y logotipo: el amarillo de marca.
     --accent-ink  el MISMO amarillo llevado a texto sobre fondo claro.
     --on-accent   lo que se escribe ENCIMA del amarillo: Azul Mar, 5,5:1.
                   Blanco sobre amarillo da 2,0:1 y no se usa nunca. */
  --accent:var(--export);
  --accent-ink:var(--export-ink);
  --on-accent:var(--mar);

  /* 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.6rem,7.2vw,6.6rem);
  --t-xxl:clamp(2.5rem,6.8vw,5.6rem);
  --t-xl:clamp(1.95rem,4.3vw,3.6rem);
  --t-lg:clamp(1.58rem,2.7vw,2.45rem);
  --t-md:clamp(1.22rem,1.7vw,1.55rem);
  --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-swell:cubic-bezier(.37,0,.16,1.06);
  --d-1:.22s; --d-2:.45s; --d-3:.9s;

  /* Elevación */
  --sh-1:0 1px 2px rgba(7,31,48,.06),0 4px 14px rgba(7,31,48,.05);
  --sh-2:0 2px 6px rgba(7,31,48,.07),0 18px 44px rgba(7,31,48,.10);
  --sh-3:0 30px 90px rgba(7,31,48,.24);

  /* Radios: la pastilla del icono es la única curva grande del sistema */
  --r-badge:12px;
  --r-sm:3px;
  --r-pill:999px;

  --header-h:74px;
}

/* Bloques oscuros: invierten los roles, no los valores */
.is-dark{ --bg:var(--mar); --bg-alt:var(--mar-700); }

/* Cualquier bloque con fondo oscuro propio tiene que remapear la tinta:
   si no, todo lo que use var(--ink) se pinta azul sobre azul y desaparece. */
/* La lista incluye piezas sueltas que llevan fondo oscuro propio dentro
   de una sección clara: sin remapear la tinta, un <b> hereda var(--ink)
   —Azul Mar— y se pinta azul sobre azul. Pasó con el total de la
   calculadora y no se ve hasta que alguien lo mira de cerca. */
.is-dark,
.phead,
.site-footer,
.menu,
.calc__total,
.en-mar{
  --ink:#FFFFFF;
  --ink-2:#9FB4C4;   /* 7,8:1 sobre Mar Profundo */
  /* 4,8:1 sobre Azul Mar y 7,2:1 sobre Mar Profundo. Se mide contra el
     MÁS CLARO de los dos fondos oscuros: .is-dark usa Azul Mar, no Mar
     Profundo, y el anterior #7E96AA se quedaba ahí en 3,6:1. */
  --ink-3:#96AEC0;
  --rule:rgba(255,255,255,.17);
  --accent-ink:var(--export-suave);
  --on-accent:var(--mar);
  color-scheme:dark;
}
.is-deep{ --bg:var(--mar-profundo); }

/* ---------- 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;min-width: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:.96;
  letter-spacing:-.034em;
  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:.87;letter-spacing:-.045em;}
.t-xxl{font-size:var(--t-xxl);line-height:.91;letter-spacing:-.04em;}
.t-xl{font-size:var(--t-xl);line-height:1;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: la voz de "documento de embarque" 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;
}

/* Código de contenedor: el tic tipográfico de la marca.
   Cuatro letras de propietario + seis dígitos + dígito de control. */
.bic{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
}
.bic b{color:var(--accent-ink);font-weight:600;}

/* El acento amarillo aplicado al "1°" y a activaciones puntuales */
.deg{color:var(--accent);}

/* ---------- 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(--export);color:var(--mar);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(--export);outline-offset:3px;border-radius:2px;}
.is-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--export-suave);}
.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 amura */
.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;}

/* Regla de ola: el separador propio de CONEX361°. La curva es la misma
   del logotipo, repetida como patrón. */
.ola-rule{
  height:22px;width:100%;
  background-repeat:repeat-x;background-position:center;background-size:auto 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 11c10-6.7 20-6.7 30 0s20 6.7 30 0 20-6.7 30 0 20 6.7 30 0' fill='none' stroke='%23D5DFE7' stroke-width='1.6'/%3E%3C/svg%3E");
  opacity:.9;
}
.is-dark .ola-rule,.site-footer .ola-rule{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 11c10-6.7 20-6.7 30 0s20 6.7 30 0 20-6.7 30 0 20 6.7 30 0' fill='none' stroke='%231B506F' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* Textura de mar picado — generada en CSS, sin archivo externo */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.38;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");
}

/* Plano de estiba — se activa con la tecla B.
   Doce bahías: la retícula de maquetación, dibujada como celdas de carga. */
.bayplan{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;
  transition:opacity var(--d-2) var(--e-out);
}
.bayplan[data-on='1']{opacity:1;}
.bayplan__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);
}
.bayplan__inner span{
  background:rgba(242,169,0,.055);
  border-left:1px solid rgba(242,169,0,.24);
  border-right:1px solid rgba(242,169,0,.24);
  position:relative;
}
.bayplan__inner span::after{
  content:attr(data-b);position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:rgba(242,169,0,.75);
}
@media(max-width:720px){.bayplan__inner{grid-template-columns:repeat(4,1fr);}.bayplan__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,.bayplan,.marquee,.noprint,.hero__media,.rosa{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;}
  body.imprimiendo-brief > *:not(#brief-print){display:none !important;}
  body.imprimiendo-brief #brief-print{display:block !important;}
}