/* =========================================================================
   DÍAZ TEALDE — Abogado & Escribano
   base.css · tokens, tipografía, reset, layout y utilidades
   ========================================================================= */

/* ---------- Tipografías autohospedadas (variables, subset latino) -------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-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: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/sourceserif4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/sourceserif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}

/* ======================= TOKENS ========================================== */
:root {
  /* Azules — derivados del isotipo (#0B2C59) */
  --azul-950: #04101F;
  --azul-900: #061729;
  --azul-850: #08203A;
  --azul-800: #0A2140;
  --azul-700: #0B2C59;          /* azul institucional del logo */
  --azul-600: #14417C;
  --azul-500: #2A5C9E;
  --azul-200: #B9CBE2;
  --azul-100: #DCE5F0;
  --azul-050: #EFF3F9;

  /* Neutros cálidos */
  --marfil:        #F6F3ED;
  --marfil-claro:  #FBFAF6;
  --blanco:        #FFFFFF;
  --grafito:       #3A424E;
  /* Bajado desde #6B7482: sobre marfil daba 4,27:1 y el mínimo para texto
     normal es 4,5:1. Con este valor queda en ~5:1 sobre marfil y blanco. */
  --grafito-claro: #616A77;

  /* Acento */
  --champagne:       #C8A96B;
  --champagne-claro: #E3CFA3;
  --bronce:          #8A6A33;   /* acento accesible sobre fondos claros */

  /* Tema por defecto: claro */
  --fondo:      var(--marfil);
  --superficie: var(--blanco);
  --texto:      var(--grafito);
  --titulo:     var(--azul-700);
  --tenue:      var(--grafito-claro);
  --linea:      #E4DFD5;
  --linea-firme:#CFC8BA;
  --acento:     var(--bronce);
  --sombra-1: 0 1px 2px rgba(6,23,41,.05), 0 2px 8px rgba(6,23,41,.04);
  --sombra-2: 0 4px 14px rgba(6,23,41,.06), 0 14px 34px rgba(6,23,41,.07);
  --sombra-3: 0 20px 56px rgba(6,23,41,.16);

  /* Tipografía */
  --f-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-xl:   clamp(1.125rem, 1.03rem + 0.42vw, 1.3125rem);
  --fs-h4:   clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.68vw, 1.75rem);
  --fs-h2:   clamp(1.75rem, 1.36rem + 1.72vw, 2.9375rem);
  --fs-h1:   clamp(2.25rem, 1.55rem + 3.1vw, 4.0625rem);
  --fs-cifra:clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);

  /* Ritmo y medidas */
  --ancho-max:   1280px;
  --ancho-medio: 1060px;
  --ancho-texto: 62ch;
  --pad-x:     clamp(1.25rem, 4vw, 3rem);
  --seccion-y: clamp(4.25rem, 2.6rem + 6.4vw, 8.25rem);
  --gap:       clamp(1.25rem, 0.9rem + 1.4vw, 2rem);

  /* Formas */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Movimiento */
  --e-suave: cubic-bezier(.22,.61,.36,1);
  --e-salida: cubic-bezier(.4,0,.2,1);
  --t-1: 220ms;
  --t-2: 380ms;
  --t-3: 620ms;

  --alto-header: 84px;
}

@media (max-width: 900px) {
  :root { --alto-header: 66px; }
}

/* Bloques con fondo oscuro: se re-mapean las variables de tema
   para que todos los componentes se adapten sin duplicar reglas. */
.tema-oscuro {
  --fondo:      var(--azul-900);
  --superficie: rgba(255,255,255,.045);
  --texto:      #C3D0E1;
  --titulo:     #FFFFFF;
  --tenue:      #8DA1BC;
  --linea:      rgba(255,255,255,.13);
  --linea-firme:rgba(255,255,255,.24);
  --acento:     var(--champagne);
  --sombra-1: 0 1px 2px rgba(0,0,0,.3);
  --sombra-2: 0 14px 34px rgba(0,0,0,.34);
  --sombra-3: 0 24px 60px rgba(0,0,0,.45);
}

/* Las secciones que pintan su propio fondo oscuro no llevan .tema-oscuro (ver
   el inventario documentado más abajo, junto a :focus-visible). Re-mapear todas
   sus variables sería lo ideal, pero rompería los campos de formulario de fondo
   blanco que viven dentro de .cierre. Se re-mapea solo --acento, que es el que
   produce fallos reales: el asterisco de campo obligatorio quedaba en bronce
   (pensado para fondo claro) y daba 3,1:1 sobre azul oscuro. */
.hero,
.franja,
.programa,
.diagnostico,
.columna--prevenir,
.filosofia,
.cierre,
.cabeza-interna,
.estado-pagina,
.menu-movil,
.pie { --acento: var(--champagne); }

/* ======================= RESET =========================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-header) + 16px);
  /* Recorta el desborde lateral que producen las animaciones de entrada
     (.revelar--izq / --der) y el parallax del hero.
     Va en html y no solo en body: si se declara únicamente en body, el overflow
     se propaga al viewport y no recorta nada.
     Se usa `clip` y no `hidden` porque `clip` no crea contenedor de scroll,
     así position: sticky sigue funcionando en beneficios y preguntas. */
  overflow-x: clip;
}

body {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; }

/* El anillo de foco tiene que llegar a 3:1 contra el fondo que lo rodea
   (WCAG 2.2, 1.4.11). El champagne sobre marfil da 2,2:1 y no alcanza; el
   bronce da 4,5:1. Sobre azul oscuro pasa al revés: el bronce da 2,8:1 y el
   champagne claro da 9:1.
   Como outline-offset: 3px dibuja el anillo POR FUERA del elemento, lo que
   importa es el fondo de la sección, no el del propio control: por eso alcanza
   con declarar --foco a nivel de sección y dejar que herede. Un input blanco
   dentro de una tarjeta oscura queda bien igual, porque el anillo cae sobre la
   tarjeta. */
:root { --foco: var(--bronce); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Mismo inventario de superficies oscuras que las reglas de <strong> (más
   abajo) y de .btn--secundario (components.css). Acá basta con una lista
   porque la variable hereda a todo lo que hay dentro. */
.tema-oscuro,
.hero,
.franja,
.programa,
.diagnostico,
.columna--prevenir,
.filosofia,
.cierre,
.cabeza-interna,
.estado-pagina,
.menu-movil,
.pie { --foco: var(--champagne-claro); }

::selection { background: var(--azul-700); color: #fff; }

/* ======================= TIPOGRAFÍA ====================================== */
h1, h2, h3, h4 {
  font-family: var(--f-serif);
  color: var(--titulo);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.008em; }

p { text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--titulo); }

/* INVENTARIO DE SUPERFICIES OSCURAS
   ---------------------------------
   Estas trece superficies pintan su propio fondo azul oscuro pero NO llevan la
   clase .tema-oscuro, así que las variantes claras siguen activas encima de
   ellas. Sin esta lista el <strong> hereda var(--titulo) y queda azul oscuro
   sobre azul oscuro: los marcadores [PENDIENTE DE CONFIRMACIÓN], que son
   justamente los que hay que poder leer, desaparecen.

   La misma lista se repite en components.css para .btn--secundario. Si se
   agrega una sección oscura nueva hay que sumarla en LOS DOS lugares. */
.tema-oscuro strong,
.hero strong,
.franja strong,
.programa strong,
.diagnostico strong,
.columna--prevenir strong,
.filosofia strong,
.cierre strong,
.cabeza-interna strong,
.estado-pagina strong,
.menu-movil strong,
.pie strong { color: #fff; }

/* ======================= LAYOUT ========================================== */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contenedor--medio { max-width: var(--ancho-medio); }
.contenedor--ancho { max-width: 1440px; }

.seccion {
  position: relative;
  padding-block: var(--seccion-y);
  background: var(--fondo);
  color: var(--texto);
}
.seccion--compacta { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.seccion--marfil { --fondo: var(--marfil); }
.seccion--blanca { --fondo: var(--blanco); }

/* ======================= PIEZAS DE TEXTO ================================= */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--acento);
  line-height: 1.3;
}
.etiqueta::before {
  content: '';
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.etiqueta--centrada { justify-content: center; }

.encabezado {
  max-width: 46rem;
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
}
.encabezado--centrado { margin-inline: auto; text-align: center; justify-items: center; }
.encabezado p { font-size: var(--fs-lg); color: var(--texto); max-width: 44rem; }

/* Mismo inventario de superficies oscuras de siempre. Acá el síntoma era la
   bajada de "El programa": el <p> del encabezado no lleva clase, así que no
   tomaba .bajada y se quedaba con el gris de tema claro sobre azul oscuro
   (1,9:1). Se remapea solo el color del texto, no las variables de superficie,
   porque dentro de .cierre hay campos de formulario de fondo blanco que se
   volverían ilegibles si --texto pasara a blanco. */
.tema-oscuro .encabezado p,
.hero .encabezado p,
.franja .encabezado p,
.programa .encabezado p,
.diagnostico .encabezado p,
.columna--prevenir .encabezado p,
.filosofia .encabezado p,
.cierre .encabezado p,
.cabeza-interna .encabezado p,
.estado-pagina .encabezado p,
.menu-movil .encabezado p,
.pie .encabezado p { color: rgba(255,255,255,.82); }

.bajada { font-size: var(--fs-lg); color: var(--texto); }
.nota   { font-size: var(--fs-sm); color: var(--tenue); line-height: 1.6; }

.medida { max-width: var(--ancho-texto); }

.regla {
  border: 0;
  block-size: 1px;
  background: var(--linea);
}

/* Filete dorado corto, usado como remate editorial */
.filete {
  inline-size: 46px;
  block-size: 2px;
  background: var(--acento);
  border-radius: 2px;
}

/* ======================= ICONOS ========================================== */
.ic {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--relleno { fill: currentColor; stroke: none; }
.ic--sm { inline-size: 18px; block-size: 18px; stroke-width: 1.8; }
.ic--lg { inline-size: 30px; block-size: 30px; stroke-width: 1.45; }
.ic--xl { inline-size: 38px; block-size: 38px; stroke-width: 1.3; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ======================= UTILIDADES ====================================== */
.solo-lectores {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.saltar-al-contenido {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 999;
  padding: .8rem 1.3rem;
  background: var(--azul-700);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.saltar-al-contenido:focus { inset-block-start: 0; }

.solo-movil { display: none; }
@media (max-width: 900px) { .solo-movil { display: revert; } }
@media (min-width: 901px) { .solo-escritorio-no { display: none; } }

/* ======================= APARICIONES AL HACER SCROLL ===================== */
/* El estado oculto sólo se aplica si hay JS (clase puesta por un script
   inline en el <head>), de modo que sin JS todo el contenido es visible. */
.js .revelar {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--t-3) var(--e-suave),
    transform var(--t-3) var(--e-suave);
  will-change: opacity, transform;
}
.js .revelar--izq  { transform: translate3d(-24px, 0, 0); }
.js .revelar--der  { transform: translate3d(24px, 0, 0); }
.js .revelar--zoom { transform: scale(.965); }

.js .revelar.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Escalonado por hijos */
.js .escalonar > * { transition-delay: calc(var(--i, 0) * 85ms); }

/* ======================= MOVIMIENTO REDUCIDO ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar { opacity: 1 !important; transform: none !important; }
}

/* ======================= IMPRESIÓN ======================================= */
@media print {
  .cabecera, .flotantes, .barra-movil, .menu-movil { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion { padding-block: 1.5rem; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
}