/* ============================================================================
   Dr. Juan Dorian Tenorio Narváez — base: tipografía, color y reglas globales
   ----------------------------------------------------------------------------
   REGLA DE ORO DE ESTA HOJA (criterio 10.1 del brief):
   ningún elemento de contenido nace invisible en el CSS base. Todo lo que se
   oculta para animar vive dentro de una @media (prefers-reduced-motion:
   no-preference) y siempre dentro de una animación de duración FINITA con
   animation-fill-mode: both — de modo que el estado final visible lo garantiza
   el motor de CSS, nunca un script.
   ========================================================================== */

/* ── Tipografías autoalojadas (no hay peticiones a terceros) ─────────────── */
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('../fonts/figtree-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: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('../fonts/figtree-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: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-italic-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: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-italic-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;
}

/* ── Fichas de color (medidas del logo real) ─────────────────────────────── */
:root {
  --turquesa:        #56B8AB;
  --turquesa-hondo:  #237F7C;
  /* Escala derivada para TEXTO pequeño en turquesa: el tono oficial se queda en
     4.28:1 sobre el papel cálido, y este llega a 5.0:1 en los dos papeles. */
  --turquesa-texto:  #1F7370;
  --turquesa-claro:  #7ECEC2;
  --aqua:            #A5D0D0;
  --aqua-vapor:      #E4F1EE;
  --navy:            #091626;
  --navy-suave:      #16283C;

  --papel:           #FBFAF8;   /* blanco cálido — nunca blanco frío */
  --papel-calido:    #F5F2EB;   /* segundo tono para alternar secciones */

  --tinta:           var(--navy);
  --tinta-media:     #47586A;
  --tinta-suave:     #5E6E79;   /* elegido para pasar 4.5:1 sobre los dos papeles */
  --linea:           rgba(9, 22, 38, .10);
  --linea-tenue:     rgba(9, 22, 38, .06);

  --vidrio:          rgba(255, 255, 255, .74);
  --vidrio-borde:    rgba(255, 255, 255, .85);

  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --ancho: 1240px;
  --margen: clamp(1.35rem, 5.6vw, 3rem);
  --alto-barra: 5.6rem;   /* para que los anclajes no queden bajo la barra */

  --salto: cubic-bezier(.22, 1, .36, 1);
  --sombra-suave: 0 1px 2px rgba(9,22,38,.04), 0 8px 24px -12px rgba(9,22,38,.14);
  --sombra-media: 0 2px 4px rgba(9,22,38,.04), 0 18px 46px -20px rgba(9,22,38,.22);
  --sombra-boton: 0 10px 24px -10px rgba(35,127,124,.62);
}

/* ── Reajuste ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* clip (no hidden): impide el desplazamiento horizontal sin crear un
     contenedor de scroll que en iOS rompe position: sticky. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section[id], main[id] { scroll-margin-top: var(--alto-barra); }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--turquesa-hondo);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.oculto-visualmente {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 200; background: var(--navy); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 12px 12px; font-weight: 600;
  transition: translate .2s ease;
}
.saltar:focus { translate: -50% 0; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.turquesa { color: var(--turquesa-hondo); }

/* Grano: textura de ruido casi imperceptible sobre las secciones grandes.
   Es un background repetido (no un filtro), para no crear capas enormes
   que Safari en iOS a veces deja de pintar. */
.grano::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%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(%23r)' opacity='.055'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}