/* ============================================================================
   Dra. Camila León — base: color, tipografía y reglas globales
   ----------------------------------------------------------------------------
   REGLA DE ORO DE ESTA HOJA (§11.1 del brief):

       Ocultar no puede estar garantizado mientras mostrar es opcional.

   Ningún elemento de contenido nace invisible aquí. Todo lo que se oculta para
   animar vive en movimiento.css, 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 — el fotograma final visible lo garantiza el motor
   de CSS, nunca un script. Si movimiento.css o pagina.js no llegan, la página
   se ve entera y quieta.
   ========================================================================== */

/* ── Tipografías autoalojadas — cero peticiones a terceros ───────────────────
   Serif editorial de alto contraste (Playfair Display) como VOZ PRINCIPAL: es
   lo que más separa esta página de la del Dr. Dorian, donde manda la sans.
   Sans humanista ligera (Work Sans) para cuerpo, etiquetas y botones.        */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/playfair-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: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/playfair-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: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('../fonts/playfair-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: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('../fonts/playfair-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;
}
@font-face {
  font-family: 'Work Sans'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/worksans-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: 'Work Sans'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/worksans-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;
}

/* ── Color ───────────────────────────────────────────────────────────────────
   Los cuatro tonos base los fija el cliente (§2 del brief). Las escalas
   intermedias se derivan de ellos; no entra ningún color ajeno.

   Contrastes medidos sobre el papel #F6F4F6:
     · violeta  #77669D → 4,60:1  titulares, acentos y fondo de botón. NUNCA en
                                  peso ligero por debajo de 16 px.
     · malva    #CDBFCB → 1,61:1  DECORATIVO. Nunca texto ni icono informativo.
     · tinta    #2A2333 → 14,2:1  todo el texto de lectura.
     · violeta oscuro #5F4F86 → 6,5:1  violeta para texto pequeño.
     · tinta suave    #5B5266 → 6,7:1  texto secundario.
     · blanco sobre violeta   → 5,0:1  texto de los botones.                  */
:root {
  --papel:          #F6F4F6;
  --malva:          #CDBFCB;
  --violeta:        #77669D;
  --tinta:          #2A2333;

  --malva-vapor:    #EDE8EC;   /* superficie muy suave sobre el papel */
  --malva-humo:     #E2D9E0;
  --violeta-hondo:  #5F4F86;   /* violeta apto para texto pequeño */
  --violeta-vapor:  #EAE6F0;
  --tinta-suave:    #5B5266;   /* texto secundario */

  --turquesa:       #56B8AB;   /* marca madre: punto de la píldora, logo,
                                  sección del Centro y pie. En ningún otro sitio. */

  --linea:          rgba(205, 191, 203, .95);   /* líneas finísimas en malva */
  --linea-tenue:    rgba(42, 35, 51, .07);
  --superficie:     #FCFBFC;                    /* tarjetas sobre el papel */

  --sans:  'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;

  --ancho:  1280px;
  --margen: clamp(1.4rem, 6vw, 4.5rem);
  --alto-barra: 5.5rem;

  --salto: cubic-bezier(.22, 1, .36, 1);
  --sombra-tenue: 0 1px 2px rgba(42, 35, 51, .03), 0 10px 34px -18px rgba(42, 35, 51, .18);
  --sombra-suave: 0 2px 6px rgba(42, 35, 51, .04), 0 22px 54px -26px rgba(42, 35, 51, .24);
  --sombra-boton: 0 12px 28px -14px rgba(95, 79, 134, .75);
}

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

html {
  /* clip, no hidden: evita 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;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.68;
  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(--violeta-hondo);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--violeta); 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% -160%;
  z-index: 200; background: var(--tinta); color: var(--papel);
  padding: .7rem 1.2rem; border-radius: 0 0 10px 10px; font-weight: 500;
  transition: translate .2s ease;
}
.saltar:focus { translate: -50% 0; }

/* La itálica de la serif es el matiz de voz de toda la página. */
.cursiva {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: .002em;
}
.violeta { color: var(--violeta); }

/* Grano: ruido casi imperceptible para que el papel no se vea plano y digital.
   Es un background repetido, no un filtro: Safari en iOS deja de pintar capas
   filtradas muy grandes. */
.grano::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .55;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Turquesa de la marca madre apto para TEXTO. El tono oficial #56B8AB se queda
   en 2,17:1 sobre el papel y no cumple ni para titular grande; este llega a
   5,13:1. El oficial se reserva para formas: el punto de la píldora y el logo. */
:root { --turquesa-texto: #1F7370; }
.turquesa { color: var(--turquesa-texto); }