/* ==========================================================================
   MAMASITA MEDALLO · Sistema de diseño
   Revista minimalista ochentera · rosado / rojo / blanco / negro en pastel
   --------------------------------------------------------------------------
   · Todo el escalado es fluido (clamp) y anclado al ancho de viewport, para que
     la composición se vea idéntica en móvil, tablet y escritorio.
   · Un solo tema: papel cálido.
   · Las superficies que son oscuras por diseño —las barras de panel, el pie, el
     texto sobre fotografías— tienen sus propios tokens (--bar-*, --footer-*,
     --on-media) en vez de reutilizar --tinta. Eso mantiene el contraste
     explícito y evita el clásico texto oscuro sobre fondo oscuro.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Paleta: papel ---------------------------------------------- */
  --paper:        #FFFBF8;   /* blanco cálido, fondo general               */
  --paper-warm:   #FFF5F0;   /* papel con un punto de crema                */
  --paper-pink:   #FFF0F4;   /* papel rosado                               */

  --rosa-100:     #FFE7EE;
  --rosa-200:     #FFD3E0;
  --rosa-300:     #FFB8CE;
  --rosa-400:     #FB94B4;
  --rosa-500:     #F26E96;

  --rojo:         #E8413C;   /* rojo del logo                              */
  --rojo-soft:    #FF6F63;   /* coral pastel                               */
  --rojo-ink:     #C22F2C;   /* rojo profundo para texto sobre claro       */
  /* Rojo para TEXTO pequeño: el del logo no llega a contraste AA en cuerpos
     chicos sobre papel, así que ahí se usa la versión profunda.            */
  --rojo-text:    #C22F2C;
  /* Relleno de los botones rojos. El rojo del logo con texto blanco se queda
     en 3.99:1; este tono, de la misma familia, llega a 4.6:1.               */
  --rojo-btn-bg:  #CE342F;
  --rojo-btn-fg:  #FFFFFF;
  --ok-btn-bg:    #2F8F5B;
  --ok-btn-fg:    #FFFFFF;

  /* ---------- Paleta: tinta ----------------------------------------------
     `--tinta` es el color del texto. Lo que deba ser una superficie oscura usa
     --bar-* o --footer-*, no --tinta.                                        */
  --tinta:        #17110F;
  --tinta-70:     rgba(23, 17, 15, 0.72);
  /* 0.66 alcanza AA sobre papel limpio, pero no sobre el centro de un punto
     de la trama, que es donde caen las volantas y las etiquetas. 0.70 si.  */
  --tinta-55:     rgba(23, 17, 15, 0.70);
  --tinta-40:     rgba(23, 17, 15, 0.58);
  --tinta-12:     rgba(23, 17, 15, 0.12);
  --tinta-06:     rgba(23, 17, 15, 0.06);

  --linea:        rgba(23, 17, 15, 0.16);
  --linea-fina:   rgba(23, 17, 15, 0.09);
  --linea-rosa:   rgba(232, 65, 60, 0.24);

  --ok:           #2A7F51;
  --warn:         #B87A0C;
  --danger:       var(--rojo-ink);

  /* ---------- Superficies con identidad propia ---------------------------
     Estas NO se invierten con el tema: son oscuras siempre.                 */
  --bar-bg:       #17110F;   /* cabeceras de panel, barra de mesa, carrito  */
  --bar-fg:       #FFFBF8;
  --bar-dim:      rgba(255, 251, 248, 0.64);
  --bar-line:     rgba(255, 251, 248, 0.16);

  --footer-bg:    #17110F;
  --footer-fg:    #FFFBF8;
  /* La mancha de trama del pie ACLARA el fondo (screen), asi que ahi el gris
     de texto pierde contraste en vez de ganarlo: a 0.70 el horario cae a
     4.08:1 sobre el nucleo. 0.78 aguanta y sigue leyendose como secundario. */
  --footer-dim:   rgba(255, 251, 248, 0.78);

  /* Texto sobre fotografías: siempre claro, en los dos temas */
  --on-media:     #FFF8F4;
  /* Rosa de acento para lo que SIEMPRE está sobre fondo oscuro (pie, barras,
     fotos). No puede seguir al tema o en oscuro queda rosa sobre negro.     */
  --rosa-on-dark: #FFB8CE;
  --on-media-dim: rgba(255, 248, 244, 0.80);
  --media-scrim:  rgba(23, 17, 15, 0.72);
  /* Para el pie de una tarjeta, donde el texto se apoya del todo en el velo */
  --media-scrim-deep: rgba(23, 17, 15, 0.86);

  /* Superficies levantadas sobre el papel (tarjetas, campos, modales) */
  --surface:      #FFFFFF;
  --surface-2:    var(--paper-warm);
  --field-bg:     #FFFFFF;
  --scrim:        rgba(23, 17, 15, 0.42);

  /* Paneles internos */
  --panel-bg:     #FFF8F5;
  --panel-card:   #FFFFFF;
  --panel-line:   rgba(23, 17, 15, 0.12);

  /* ---------- Trama de puntos (cómic vintage) -----------------------------
     La trama no cubre la web ni la cruza: son manchas de tinta que sangran
     por el borde del papel, con silueta irregular y sin un solo canto recto
     dentro de la composición. El degradado se arma con tres retículas de
     puntos de distinto grosor sobre la misma cuadrícula, todas en rojo:
     gruesa en el núcleo, fina donde se disuelve.                            */
  --dot-rgb:        232, 65, 60;     /* el rojo del logo, en componentes    */
  /* Sobre superficies oscuras la trama no se multiplica —quedaría negro
     sobre negro— sino que se aclara (screen). Ahí el rojo tiene que ser el
     coral, que al aclararse da una brasa y no un ladrillo apagado.        */
  --dot-rgb-light:  255, 111, 99;
  /* El degradado lo hace el TAMAÑO del punto, no la opacidad. Por eso las
     tres alfas son IGUALES: en cuatricromía la tinta era siempre la misma y
     lo único que cambiaba era el diámetro. Si acá se escalonan las alfas, el
     punto chico queda medio transparente —se pierde— y el grande queda como
     un parche plano. Lo que gradúa el tono es la cobertura de la retícula,
     que vive en ui.css: 53% en el núcleo, 30% en el medio, 16% en la cola.  */
  --dot-a-coarse:   0.72;
  --dot-a-medium:   0.72;
  --dot-a-fine:     0.72;
  /* La retícula real va desfasada media celda: dos capas cruzadas dan el
     enrejado en diagonal de una trama de imprenta, no una cuadrícula de
     lunares. --dot-half siempre es la mitad de --dot-grid.
     La celda mide 11px: por debajo el punto de la cola no se ve, por encima
     de ~14px los puntos dejan de leerse como trama y pasan a verse como
     círculos sueltos.                                                      */
  --dot-grid:       11px;
  --dot-half:       5.5px;


  /* Velos sobre las fotos grandes (hero y bandas) */
  --veil-top:     color-mix(in srgb, var(--paper) 74%, transparent);
  --veil-mid:     color-mix(in srgb, var(--paper) 32%, transparent);
  /* El tramo bajo del hero lleva la tira de datos y el folio en rojo a 12px:
     con 64% de papel se quedaba en 3,98:1 y necesita 4,5. */
  --veil-low:     color-mix(in srgb, var(--paper-pink) 84%, transparent);
  --veil-end:     var(--paper);
  --media-filter: saturate(0.72) contrast(0.94) brightness(1.06);
  --media-opacity: 0.55;

  --shadow-soft:  0 1px 2px rgba(23, 17, 15, 0.04), 0 8px 28px rgba(23, 17, 15, 0.06);
  --shadow-pop:   0 2px 6px rgba(23, 17, 15, 0.06), 0 18px 50px rgba(232, 65, 60, 0.13);
}

/* ==========================================================================
   Tipografía y medidas (iguales en los dos temas)
   ========================================================================== */

:root {
  --font-display: 'Anton', 'Archivo Black', 'Haettenschweiler', 'Impact', sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Times, serif;
  --font-body:    'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluida: mínimo en 360px, máximo en 1600px */
  --fs-micro:  clamp(0.625rem, 0.58rem + 0.20vw, 0.75rem);
  --fs-xs:     clamp(0.6875rem, 0.64rem + 0.22vw, 0.8125rem);
  --fs-sm:     clamp(0.8125rem, 0.77rem + 0.24vw, 0.9375rem);
  --fs-base:   clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --fs-md:     clamp(1.0625rem, 0.98rem + 0.40vw, 1.25rem);
  --fs-lg:     clamp(1.25rem, 1.08rem + 0.80vw, 1.75rem);
  --fs-xl:     clamp(1.75rem, 1.30rem + 2.10vw, 3.25rem);
  --fs-2xl:    clamp(2.5rem, 1.50rem + 4.60vw, 5.75rem);
  --fs-3xl:    clamp(3.25rem, 1.35rem + 8.80vw, 10rem);

  /* Espaciado fluido */
  --sp-1:  clamp(0.25rem, 0.23rem + 0.10vw, 0.375rem);
  --sp-2:  clamp(0.5rem, 0.46rem + 0.19vw, 0.75rem);
  --sp-3:  clamp(0.75rem, 0.69rem + 0.28vw, 1.125rem);
  --sp-4:  clamp(1rem, 0.90rem + 0.47vw, 1.5rem);
  --sp-5:  clamp(1.5rem, 1.32rem + 0.75vw, 2.25rem);
  --sp-6:  clamp(2rem, 1.72rem + 1.30vw, 3.25rem);
  --sp-7:  clamp(2.75rem, 2.30rem + 2.00vw, 4.5rem);
  --sp-8:  clamp(3.5rem, 2.90rem + 2.80vw, 6rem);

  /* Aire vertical de una sección. Antes se usaba --sp-8 arriba y abajo, que
     dejaba 256px de nada entre bloques; esto deja una separación generosa
     pero que no rompe la lectura. */
  --section-pad:  clamp(2.5rem, 2.00rem + 2.30vw, 4.25rem);
  /* Alto de la zona donde una sección se disuelve en la siguiente. 110px
     para una banda de 900px de alto es un corte, no un desvanecido: el ojo
     ve el borde de la fotografía igual. */
  --bleed:        clamp(80px, 12vw, 210px);
  /* Lo que tarda el papel en volverse la contraportada. Este era el corte
     más brusco de la página: blanco a negro de un renglón al siguiente. */
  --footer-fade:  clamp(90px, 11vw, 185px);

  /* Interlineados de titular.
     Anton es una condensada de ojo muy alto: a 0.92 las mayúsculas de una
     línea tocan las de la siguiente y dos renglones negros se leen como una
     sola mancha. Estos valores dejan un canal de luz entre renglones sin
     perder la contundencia de revista. --lh-accent es para los remates en
     serif itálica, que además llevan descendentes. */
  --lh-display: 1.04;
  --lh-hero:    0.98;
  --lh-accent:  1.18;

  --shell:        min(100% - 2 * var(--gutter), 1480px);
  --shell-narrow: min(100% - 2 * var(--gutter), 1100px);
  --gutter:       clamp(1rem, 0.72rem + 1.20vw, 2.5rem);
  --header-h:     clamp(56px, 48px + 2.2vw, 76px);
  --radius:       2px;
  --radius-md:    10px;
  --radius-pill:  999px;

  --ring:         0 0 0 2px var(--paper), 0 0 0 4px var(--rojo);
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:          360ms;

  --dock-h: 0px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* el cambio de tema se cruza en vez de parpadear */
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

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

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

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

::selection {
  background: var(--rojo);
  color: var(--paper);
}

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--rosa-300) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rosa-300);
  border-radius: var(--radius-pill);
  border: 3px solid var(--paper);
}

/* ==========================================================================
   Tipografía editorial
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.serif-it { font-family: var(--font-serif); font-style: italic; }

/* Etiqueta de revista: minúsculas espaciadas con guion */
.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-55);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.kicker::before {
  content: '';
  width: clamp(18px, 3vw, 34px);
  height: 1px;
  background: var(--rojo);
  flex: none;
}

.kicker--plain::before { display: none; }

/* Número de sección, como índice de revista */
.folio {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--rojo-text);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.58;
  color: var(--tinta-70);
  max-width: 62ch;
  text-wrap: pretty;
}

.rule {
  height: 1px;
  background: var(--linea);
  border: 0;
  width: 100%;
}

.rule--red { background: var(--rojo); height: 2px; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

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

.skip-link {
  position: fixed;
  top: var(--sp-2); left: var(--sp-2);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--bar-bg);
  color: var(--bar-fg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  transition: transform 180ms var(--ease);
}
.skip-link:focus { transform: none; }

.money { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.stack > * + * { margin-top: var(--sp-3); }

.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}