/* ==========================================================================
   CORTEXA SYSTEM, C.A. — hoja de estilo del sitio corporativo
   Sistema derivado del Manual de Identidad Visual Cortexa, brandbook v1.0.
   Los cinco colores oficiales, las tres familias tipograficas y sus roles
   se respetan tal como estan declarados en el manual.
   ========================================================================== */

/* --- 1. Tokens primitivos ------------------------------------------------ */
:root{
  /* Paleta oficial (seccion 05 del manual) expresada en OKLCH */
  --franch:        oklch(0.343 0.125 265);   /* #1E3A8A */
  --franch-deep:   oklch(0.262 0.099 265);
  --franch-raised: oklch(0.408 0.135 265);
  --azure:         oklch(0.623 0.188 260);   /* #3B82F6 */
  --azure-press:   oklch(0.540 0.172 260);
  --azure-soft:    oklch(0.792 0.096 260);
  --cinnebar:      oklch(0.596 0.176 26);    /* #DC4A41 — uso restringido */

  /* Rampa neutra: matiz 258, heredado del acento; croma en campana */
  --n-0:  oklch(0.994 0.001 258);
  --n-1:  oklch(0.978 0.003 258);
  --n-2:  oklch(0.965 0.004 258);            /* Platinum #F3F4F6 */
  --n-3:  oklch(0.928 0.006 258);
  --n-4:  oklch(0.872 0.009 258);
  --n-5:  oklch(0.762 0.011 258);
  --n-6:  oklch(0.628 0.013 258);
  --n-7:  oklch(0.512 0.017 259);
  --n-8:  oklch(0.432 0.024 259);
  --n-9:  oklch(0.373 0.031 260);            /* Charcoal #374151 */
  --n-10: oklch(0.268 0.026 260);
  --n-11: oklch(0.186 0.022 260);

  /* Tipografia: tres familias, tres roles, sin solapamiento (seccion 06) */
  --f-mark: "Montserrat", system-ui, sans-serif;      /* solo el logotipo */
  --f-head: "Space Grotesk", "Montserrat", sans-serif;/* titulares */
  --f-text: "Inter", system-ui, sans-serif;           /* interfaz y cuerpo */

  /* Escala no lineal. Saltos cortos abajo, largos arriba. */
  --t-0: 0.75rem;    --t-1: 0.8125rem;  --t-2: 0.9375rem;
  --t-3: 1.0625rem;  --t-4: 1.3125rem;  --t-5: 1.75rem;
  --t-6: clamp(2.05rem, 1.42rem + 2.7vw, 3.35rem);
  --t-7: clamp(2.55rem, 1.62rem + 3.9vw, 4.05rem);

  /* Espaciado */
  --s-1: 2px;  --s-2: 4px;   --s-3: 8px;   --s-4: 12px;  --s-5: 16px;
  --s-6: 24px; --s-7: 32px;  --s-8: 48px;  --s-9: 64px;  --s-10: 96px;
  --s-11: 128px;

  /* Geometria: canto vivo en todo el sistema; la pildora solo para el
     indicador de estado, que es el unico elemento con forma de etiqueta. */
  --r-0: 0px;
  --r-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);   /* firma del sistema */
  --d-fast: 130ms;
  --d-base: 220ms;

  /* Anchos: tres contenedores distintos, no uno */
  --w-prose: 63ch;
  --w-page: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 68px;

  /* Semanticos */
  --bg:          var(--n-0);
  --bg-quiet:    var(--n-2);
  --ink:         var(--n-10);
  --ink-strong:  var(--franch);
  --ink-soft:    var(--n-8);
  --ink-faint:   var(--n-7);
  --rule:        var(--n-3);
  --rule-strong: var(--n-4);
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-3);
  line-height:1.58;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--azure); color:#fff; }
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-head); font-weight:700; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
[id]{ scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
html{ scroll-behavior:smooth; }

.skip{
  position:absolute; left:var(--s-4); top:-64px; z-index:100;
  background:var(--franch); color:#fff; padding:var(--s-3) var(--s-5);
  font-size:var(--t-1); font-weight:600; letter-spacing:.02em;
  transition:top var(--d-fast) var(--ease);
}
.skip:focus-visible{ top:var(--s-4); }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--azure); outline-offset:3px;
}

/* --- 3. Retícula --------------------------------------------------------- */
.wrap{
  width:100%; max-width:var(--w-page);
  margin-inline:auto; padding-inline:var(--gutter);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--s-6);
}
@media (max-width:860px){ .grid{ column-gap:var(--s-5); } }

/* --- 4. Marca ------------------------------------------------------------ */
.mark{ display:inline-flex; align-items:center; gap:var(--s-4); text-decoration:none; }
.mark__glyph{ display:block; width:26px; height:26px; flex:none; }
.mark__word{
  font-family:var(--f-mark); font-weight:800; font-size:0.98rem;
  letter-spacing:.03em; color:var(--franch); line-height:1;
}
.mark--neg .mark__word{ color:#fff; }
.mark--lg .mark__glyph{ width:34px; height:34px; }
.mark--lg .mark__word{ font-size:1.28rem; }

/* --- 5. Cabecera --------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:30;
  height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in oklab, var(--n-0) 88%, transparent);
  border-bottom:1px solid var(--rule);
}
@supports (backdrop-filter:blur(2px)){
  .hdr{ backdrop-filter:saturate(1.4) blur(10px); }
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); width:100%; }
.nav{ display:flex; align-items:center; gap:var(--s-7); }
.nav a{
  font-size:var(--t-1); font-weight:500; letter-spacing:.005em;
  color:var(--ink-soft); text-decoration:none;
  padding-block:var(--s-3);
  border-bottom:1px solid transparent;
  transition:color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
@media (hover:hover){ .nav a:hover{ color:var(--franch); border-bottom-color:var(--azure); } }
.nav a:active{ color:var(--azure-press); }
@media (max-width:760px){ .nav{ display:none; } }

/* --- 6. Rotulos y numeración de sección ---------------------------------- */
.eyebrow{
  font-family:var(--f-text);
  font-size:var(--t-0); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
}
.secnum{
  font-family:var(--f-head); font-weight:700;
  font-size:var(--t-2); letter-spacing:.10em;
  color:var(--azure);
}
.h2{
  font-size:var(--t-6); line-height:1.08; letter-spacing:-0.025em;
  color:var(--franch); text-wrap:balance; max-inline-size:20ch;
}
.h3{
  font-size:var(--t-4); line-height:1.26; letter-spacing:-0.014em;
  color:var(--franch); text-wrap:balance;
}
.lede{
  font-size:var(--t-4); line-height:1.46; letter-spacing:-0.008em;
  color:var(--ink-soft); text-wrap:balance; max-inline-size:46ch;
  font-weight:400;
}
.prose{ max-inline-size:var(--w-prose); text-wrap:pretty; color:var(--ink-soft); }
.prose + .prose{ margin-top:var(--s-5); }

/* Separador de sección: regla de 1px interrumpida por un nodo hexagonal.
   Es el token de firma del sistema — reaparece en cada corte de sección. */
.sep{ display:flex; align-items:center; gap:var(--s-4); margin-block:0; }
.sep::after{ content:""; height:1px; background:var(--rule-strong); flex:1; }
.sep__node{
  width:11px; height:12px; flex:none; background:var(--azure);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* --- 7. Portada ---------------------------------------------------------- */
.hero{ padding-block:clamp(var(--s-9), 9vw, var(--s-11)) var(--s-10); }
.hero__head{ grid-column:1 / span 6; }
@media (max-width:980px){ .hero__head{ grid-column:1 / -1; } }
.hero h1{
  margin-top:var(--s-5);
  font-size:var(--t-7); line-height:1.04; letter-spacing:-0.033em;
  color:var(--franch); text-wrap:balance; max-inline-size:21ch;
}
.hero .lede{ margin-top:var(--s-6); }

/* Panel de identificación: prueba documental en las 5 columnas restantes.
   Rompe la retícula por arriba a proposito — es la unica ruptura del sitio. */
.ficha{
  grid-column:8 / span 5;
  margin-top:calc(var(--s-9) * -1);
  align-self:start;
  border:1px solid var(--rule-strong);
  border-top:3px solid var(--franch);
  background:var(--n-1);
  padding:var(--s-6);
}
@media (max-width:980px){
  .ficha{ grid-column:1 / -1; margin-top:var(--s-8); }
}
.ficha__t{
  font-size:var(--t-0); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:var(--s-4); border-bottom:1px solid var(--rule);
}
.ficha dl{ margin:0; }
.ficha div{ padding-block:var(--s-4); border-bottom:1px solid var(--rule); }
.ficha div:last-child{ border-bottom:0; padding-bottom:0; }
.ficha dt{
  font-size:var(--t-0); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:var(--s-2);
}
.ficha dd{
  margin:0; font-size:var(--t-2); line-height:1.45; color:var(--n-10);
  font-weight:500;
}
.ficha dd.num{ font-variant-numeric:tabular-nums; letter-spacing:.02em; font-size:var(--t-3); }

/* --- 8. Secciones -------------------------------------------------------- */
.sec{ padding-block:var(--s-10); }
.sec--tight{ padding-block:var(--s-9); }
.sec__head{ grid-column:1 / span 7; display:flex; flex-direction:column; gap:var(--s-4); }
.sec__aside{
  grid-column:9 / span 4; align-self:end; padding-bottom:var(--s-2);
  border-top:1px solid var(--rule-strong); padding-top:var(--s-5);
  font-size:var(--t-2); line-height:1.55; color:var(--ink-soft); text-wrap:pretty;
}
@media (max-width:980px){
  .sec__head{ grid-column:1 / -1; }
  .sec__aside{ grid-column:1 / -1; margin-top:var(--s-6); align-self:start; }
}
.sec__head .h2{ margin-top:var(--s-2); }

/* Arquitectura de producto: el principal ocupa el doble de area. */
.prod{ margin-top:var(--s-8); }
.prod__main{ grid-column:1 / span 7; }
.prod__side{ grid-column:9 / span 4; }
@media (max-width:980px){
  .prod__main,.prod__side{ grid-column:1 / -1; }
  .prod__side{ margin-top:var(--s-8); padding-top:var(--s-7); border-top:1px solid var(--rule); }
}
.prod__name{
  font-family:var(--f-mark); font-weight:700; letter-spacing:.01em;
  color:var(--franch); font-size:var(--t-5); line-height:1.1;
}
.prod__name span{ font-weight:300; color:var(--azure); }
.prod__side .prod__name{ font-size:var(--t-4); }
.prod__claim{
  margin-top:var(--s-4);
  font-family:var(--f-head); font-weight:400; font-size:var(--t-4);
  line-height:1.3; letter-spacing:-0.012em; color:var(--n-10);
  max-inline-size:24ch; text-wrap:balance;
}
.prod__side .prod__claim{ font-size:var(--t-3); }
.prod__body{ margin-top:var(--s-5); }
.feat{ margin-top:var(--s-6); border-top:1px solid var(--rule); }
.feat li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-5);
  padding-block:var(--s-4);
  border-bottom:1px solid var(--rule);
  font-size:var(--t-2); color:var(--ink-soft); line-height:1.5;
}
.feat b{
  font-weight:600; color:var(--n-10);
  font-variant-numeric:tabular-nums;
  font-family:var(--f-head); font-size:var(--t-1);
  letter-spacing:.06em; color:var(--azure);
  padding-top:.2em;
}
.chip{
  display:inline-flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-6);
  border:1px solid var(--rule-strong); border-radius:var(--r-pill);
  padding:var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  font-size:var(--t-0); font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--n-1);
}
.chip i{
  width:7px; height:8px; background:var(--azure); flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* Marco normativo: reglas de 1px, sin tarjetas. */
.norm{ margin-top:var(--s-8); grid-column:1 / -1; border-top:1px solid var(--rule-strong); }
.norm > div{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:var(--s-6);
  padding-block:var(--s-7);
  border-bottom:1px solid var(--rule);
}
@media (max-width:760px){
  .norm > div{ grid-template-columns:1fr; gap:var(--s-4); padding-block:var(--s-6); }
}

/* --- 9. Banda institucional (dominante Franch Blue) ---------------------- */
.band{
  background:var(--franch); color:#fff;
  padding-block:var(--s-10);
  position:relative; overflow:hidden;
}
.band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(150deg, transparent 62%, color-mix(in oklab, #fff 5%, transparent) 62.4%);
}
.band > *{ position:relative; z-index:1; }
.band .eyebrow{ color:var(--azure-soft); }
.band .h2{ color:#fff; }
.dom{ grid-column:1 / span 6; }
.band .h2{ max-inline-size:14ch; }
.dom__addr{
  margin-top:var(--s-6);
  font-family:var(--f-head); font-style:normal;
  font-size:var(--t-4); line-height:1.44; letter-spacing:-0.01em;
  color:#fff; max-inline-size:40ch;
}
.dom__note{
  margin-top:var(--s-5); font-size:var(--t-2); line-height:1.5;
  color:color-mix(in oklab, #fff 84%, var(--franch));
  max-inline-size:40ch;
}
.legal{ grid-column:8 / span 5; align-self:start; }
@media (max-width:980px){
  .dom,.legal{ grid-column:1 / -1; }
  .legal{ margin-top:var(--s-8); }
}
.legal dl{ margin:0; border-top:1px solid color-mix(in oklab,#fff 26%, transparent); }
.legal div{ padding-block:var(--s-4); border-bottom:1px solid color-mix(in oklab,#fff 18%, transparent); }
.legal dt{
  font-size:var(--t-0); font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--azure-soft); margin-bottom:var(--s-2);
}
.legal dd{ margin:0; font-size:var(--t-3); font-weight:500; color:#fff; font-variant-numeric:tabular-nums; }

/* --- 10. Pie ------------------------------------------------------------- */
.ft{ background:var(--n-11); color:var(--n-4); padding-block:var(--s-9) var(--s-7); }
.ft__top{ grid-column:1 / span 5; }
.ft__rule{ width:64px; height:2px; background:var(--cinnebar); margin-top:var(--s-5); }
.ft__tag{
  margin-top:var(--s-5); font-family:var(--f-head); font-size:var(--t-3);
  color:var(--azure-soft); letter-spacing:-0.01em;
}
.ft__cols{ grid-column:8 / span 5; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); }
@media (max-width:860px){
  .ft__top{ grid-column:1 / -1; }
  .ft__cols{ grid-column:1 / -1; margin-top:var(--s-8); }
}
.ft h4{
  font-family:var(--f-text); font-size:var(--t-0); font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--n-6);
  margin-bottom:var(--s-4);
}
.ft li + li{ margin-top:var(--s-3); }
.ft a{
  font-size:var(--t-2); color:var(--n-4); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
@media (hover:hover){ .ft a:hover{ color:#fff; border-bottom-color:var(--azure); } }
.ft__meta{
  grid-column:1 / -1; margin-top:var(--s-9); padding-top:var(--s-5);
  border-top:1px solid var(--n-10);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  justify-content:space-between;
  font-size:var(--t-0); color:var(--n-6); letter-spacing:.02em;
}
.ft__meta span{ font-variant-numeric:tabular-nums; }

/* --- 11. Páginas de texto legal ----------------------------------------- */
.doc{ padding-block:var(--s-9) var(--s-10); }
.doc__head{ grid-column:1 / span 8; }
@media (max-width:860px){ .doc__head{ grid-column:1 / -1; } }
.doc h1{
  margin-top:var(--s-4);
  font-size:var(--t-6); line-height:1.06; letter-spacing:-0.03em; color:var(--franch);
  text-wrap:balance;
}
.doc__body{ grid-column:1 / span 8; margin-top:var(--s-8); }
@media (max-width:860px){ .doc__body{ grid-column:1 / -1; } }
.doc__body section{ padding-top:var(--s-7); margin-top:var(--s-7); border-top:1px solid var(--rule); }
.doc__body section:first-child{ padding-top:0; margin-top:0; border-top:0; }
.doc__body h2{
  font-size:var(--t-4); line-height:1.25; letter-spacing:-0.014em;
  color:var(--franch); margin-bottom:var(--s-4);
}
.doc__body p{ max-inline-size:var(--w-prose); color:var(--ink-soft); text-wrap:pretty; }
.doc__body p + p{ margin-top:var(--s-4); }
.doc__body ul{ margin-top:var(--s-4); max-inline-size:var(--w-prose); }
.doc__body li{
  padding-left:var(--s-6); position:relative;
  color:var(--ink-soft); font-size:var(--t-2); line-height:1.55;
}
.doc__body li + li{ margin-top:var(--s-3); }
.doc__body li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:8px; background:var(--azure);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.back{
  display:inline-flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-8); font-size:var(--t-2); font-weight:600;
  color:var(--franch); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); padding-bottom:2px;
  transition:border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
@media (hover:hover){ .back:hover{ color:var(--azure-press); border-bottom-color:var(--azure); } }