/* =====================================================================
   La No Chuleta de Mates II · layout of the web (flow v2: P1-P6).
   Port of the designer's spec and mockups (brand/rediseno-web/). The
   components (buttons, field, box, hint, legal line, notices, progress,
   screen transitions, progress, notice, «ver» button, notebook grid and
   hover/active states) are the classes of static/brand/tokens.css v1.3;
   this file only places them. Every value is a token (--anm-*) or one of
   the few layout values below (--web-*). The page never locks scrolling.
   ===================================================================== */

:root {
  --web-logo: 26px;
  --web-lockup: clamp(150px, 44vw, 184px); /* P2 product lockup: the sheets are the star, not the «NO» */
  --web-hoja: clamp(96px, min(34vw, 19vh), 150px); /* P2 fan: width of each blurred sheet */
  --web-hoja-s: 52px;      /* P3 small fan (46px on ≤ 370px) */
  --web-borde-hoja: #D6D6D6; /* the sheets' 1px edge (designer, v2) */
  --web-pie: 48px;         /* legal footer: visible, inside the viewport (founder, 17-10-2026) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--anm-fondo); color-scheme: only light; }
/* Notebook background (tokens .anm-cuaderno): only the page surface; fields,
   buttons, cards and boxes keep their own white background. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--anm-color-papel);
  background-image: var(--anm-cuadricula);
  background-size: var(--anm-cuadricula-paso) var(--anm-cuadricula-paso);
  background-position: -1px -1px;
  color: var(--anm-texto);
  font-family: var(--anm-fuente-texto);
  font-size: var(--anm-web-texto);
  line-height: var(--anm-interlineado-texto);
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
p, h1, h2, ul, ol, figure { margin: 0; }
a { color: var(--anm-texto); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: var(--anm-foco-grosor) solid var(--anm-foco); outline-offset: var(--anm-foco-separacion); }
.titulo:focus, [tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Icons from brand/svg/iconos, inlined: monochrome in the web. */
.icono { width: var(--anm-esp-5); height: var(--anm-esp-5); flex: none; --anm-icono-acento: currentColor; }
.anm-acento { stroke: var(--anm-icono-acento, currentColor); }
.anm-boton .icono { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- frame */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--anm-ancho-columna);
  flex: 1 0 auto;
  margin: 0 auto;
  /* The screen change slides 24px in from the right; on phones with 16px margins
     that briefly made the page wider than the screen, and mobile browsers then
     zoom the whole page out. Clip it here (clip, not hidden: no scroll box). */
  overflow-x: hidden;
  overflow-x: clip;
  padding: 0 max(var(--anm-margen-lateral), env(safe-area-inset-right)) 0 max(var(--anm-margen-lateral), env(safe-area-inset-left));
}
.web-progreso { flex: none; margin-top: var(--anm-esp-3); }
.tb { height: var(--anm-objetivo-tactil); margin-top: var(--anm-esp-1); display: flex; align-items: center; flex: none; }
.tb:first-child { margin-top: var(--anm-esp-2); }
.tb-logo { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; }
.logo { height: var(--web-logo); width: auto; }
.back {
  display: inline-flex; align-items: center; gap: var(--anm-esp-2);
  min-height: var(--anm-objetivo-tactil); min-width: var(--anm-objetivo-tactil);
  margin-left: calc(-1 * var(--anm-esp-2)); padding: 0 var(--anm-esp-2);
  border: 0; background: none; color: var(--anm-texto); cursor: pointer;
  font: 700 0.9375rem/1 var(--anm-fuente-titular);
}
.back-ic { transform: scaleX(-1); }
.ct { flex: 1 0 auto; display: flex; flex-direction: column; }
.estado { flex: 1 0 auto; display: flex; flex-direction: column; }
.cuerpo { flex: 1 0 auto; display: flex; flex-direction: column; }
.ct-mid { justify-content: center; padding-bottom: 40px; }
/* Action zone: 56px button, 16px above, 24px below (+ safe area). */
.ac { flex: none; display: flex; flex-direction: column; gap: var(--anm-esp-4); padding: var(--anm-esp-4) 0 var(--anm-esp-2); }
.ac-c .anm-enlace { align-self: center; }
.p1, .p2, .p4 { max-width: var(--anm-ancho-lectura); }

/* Legal footer: always visible at the bottom of the screen, no scrolling. */
.pie {
  flex: none; width: 100%;
  display: flex; justify-content: center; align-items: center; gap: var(--anm-esp-5);
  max-width: var(--anm-ancho-columna); min-height: var(--web-pie); margin: 0 auto;
  padding: 0 var(--anm-margen-lateral) env(safe-area-inset-bottom);
  font-size: var(--anm-web-legal); line-height: 1.5;
}
.pie a { color: var(--anm-texto-secundario); display: inline-flex; align-items: center; min-height: var(--anm-objetivo-tactil); }

/* Screen changes (tokens: 200ms slide + fade; instant with reduced motion). */
.web-funde { animation: web-funde var(--anm-dur-pantalla) var(--anm-curva-salida) both; }
@keyframes web-funde { from { opacity: 0; } }

/* ---------------------------------------------------------- typography */
.p1-h, .p3-h, .p4-h, .p5-h, .p6-h { margin: 0; }
.anm-nota { display: block; font-size: 1.1875rem; line-height: 1.18; transform-origin: left center; }
.anm-boton { gap: var(--anm-esp-2); }
.anm-boton[aria-disabled="true"]:not([aria-busy="true"]) { padding: 0 calc(var(--anm-esp-4) - var(--anm-borde-grosor)); }

/* Submit: padlock only while disabled; spinner only while sending. */
.web-candado, .web-giro { display: none; }
.anm-boton[aria-disabled="true"]:not([aria-busy="true"]) .web-candado { display: block; }
#b-email[aria-disabled="true"]:not([aria-busy="true"]) { border-color: var(--anm-color-fosforito-rosa); }
.bt-col { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.bt-pista { font: 400 var(--anm-web-pequeno)/1.2 var(--anm-fuente-texto); }
.anm-boton[aria-busy="true"] .web-giro { display: block; }
.cuenta { font-variant-numeric: tabular-nums; }
button.anm-enlace { padding: 0; border: 0; background: none; cursor: pointer; }

/* ------------------------------------------------------------ P1 «Hola» */
/* Fallback (no container queries): text and notes on the left, the founder on
   the right at full height, no arrows. */
.p1 { position: relative; max-width: none; }
.p1-txt { position: relative; z-index: 1; width: 56%; padding-top: var(--anm-esp-5); }
.p1-sub { margin-top: var(--anm-esp-3); font: 700 1.25rem/1.3 var(--anm-fuente-titular); font-stretch: 100%; }
.p1-ann { position: relative; z-index: 1; width: 52%; margin-top: var(--anm-esp-5); }
.p1-nota { font-size: var(--anm-tam-m); line-height: 1.2; }
.p1-aparte { margin-top: 4px; font-weight: 400; font-size: 1rem; line-height: 1.2; }
.p1-arrow, .p1-arrow-2 { display: none; }
.p1-fig { position: absolute; right: -8px; bottom: 0; height: 100%; width: auto; max-width: 51%; object-fit: contain; object-position: right bottom; }
.p1-fig-pendiente { height: auto; top: 40%; width: 40%; text-align: center; }

/* Modern browsers: everything is placed in the PHOTO's coordinates, so each note
   and arrow lands on the same point of the body on any screen shape.
   --fig-h: the photo's height = the free height, capped so its width stays under
   51 % of the screen; the cut-out is 424 x 1313 (aspect 0.3229). The silhouette
   (measured on the image): head 2-20 % of its height, torso 25-40 % (full width),
   legs from 45 %, starting 17 % from its left edge. Arrow boxes keep the SVG's own
   aspect ratio, so the hand-drawn strokes never stretch. */
@supports (width: 1cqw) {
  .p1 { container-type: size; flex: 1 1 0; min-height: 360px;
        --fig-a: 0.3229;
        --fig-h: min(100cqh, calc(51cqw / var(--fig-a)));
        --fig-w: calc(var(--fig-h) * var(--fig-a));
        --fig-x: calc(100cqw + 8px - var(--fig-w));
        --fig-y: calc(100cqh - var(--fig-h)); }
  .p1-txt { width: 60%; padding-top: clamp(var(--anm-esp-2), 3cqh, var(--anm-esp-5)); }
  .p1-h { font-size: clamp(1.5rem, min(8cqh, 10.5cqw), 2.5rem); }
  .p1-sub { margin-top: clamp(var(--anm-esp-2), 2.4cqh, var(--anm-esp-3)); font-size: clamp(0.9375rem, min(4.6cqh, 6cqw), 1.375rem); }
  .p1-fig { left: var(--fig-x); top: var(--fig-y); right: auto; bottom: auto;
            width: var(--fig-w); height: var(--fig-h); max-width: none; object-position: center bottom; }
  .p1-fig-pendiente { height: auto; }
  .p1-ann { position: absolute; margin: 0; text-align: right; }
  .p1-nota { font-size: clamp(0.875rem, min(3.7cqh, 5.4cqw), 1.25rem); }
  .p1-aparte { font-size: clamp(0.8125rem, min(3.2cqh, 4.7cqw), 1.0625rem); }
  /* Note 1 (credential): right edge just left of the torso, top at 40 % of the photo. */
  /* Left-aligned (founder, 17-10-2026). Its first line («A los 17 escribí un
     artículo») never breaks and sets the note's width (min-content), and the note's
     right edge is the arrow's tail: the first line always ends at the arrow and the
     rest wraps under it. The font shrinks if that line would not fit (Kalam 700:
     the line is 11.73 em wide; 12 leaves a margin). */
  .p1-ann-1 { left: auto; right: calc(100cqw - var(--fig-x) + var(--fig-w) * 0.04);
              top: calc(var(--fig-y) + var(--fig-h) * 0.40 - 0.35em);
              width: min-content; text-align: left;
              font-size: min(clamp(0.875rem, min(3.7cqh, 5.4cqw), 1.25rem), calc((var(--fig-x) - var(--fig-w) * 0.04) / 12)); }
  .p1-l1 { white-space: nowrap; }
  /* Note 2 (studies): lower and further right, in the gap left of the legs. */
  .p1-ann-2 { left: 9cqw; top: calc(var(--fig-y) + var(--fig-h) * 0.66 - 0.35em);
              width: calc(var(--fig-x) + var(--fig-w) * 0.12 - 9cqw); }
  /* Arrow 1 (flecha-nota-p1, 72x56): tail at note 1's first line, tip on the torso by the hands. */
  .p1-arrow { display: block; position: absolute; z-index: 2;
              left: calc(var(--fig-x) - var(--fig-w) * 0.06); top: calc(var(--fig-y) + var(--fig-h) * 0.315);
              width: calc(var(--fig-h) * 0.13); height: calc(var(--fig-h) * 0.101); }
  /* Arrow 2 (flecha-nota-p2 flipped: concave up, 64x40): from note 2's first line to the hip. */
  .p1-arrow-2 { display: block; position: absolute; z-index: 2; transform: scaleY(-1);
                left: calc(var(--fig-x) + var(--fig-w) * 0.10); top: calc(var(--fig-y) + var(--fig-h) * 0.59);
                width: calc(var(--fig-h) * 0.11); height: calc(var(--fig-h) * 0.069); }
}

/* -------------------------------------------------------- P2 «Producto» */
.p2 { padding-top: var(--anm-esp-3); max-width: none; }
.p2-name { line-height: 0; }
.lockup { width: var(--web-lockup); height: auto; margin-left: -14px; }
.lema { margin: 2px 0 0 40px; font-size: var(--anm-tam-nota); max-width: 250px; }
.fan-row { margin-top: auto; margin-bottom: var(--anm-esp-2); display: flex; align-items: center; justify-content: center; }
@supports (width: 1cqw) {
  /* The fan takes all the free height between the motto and the list, and the
     sheets grow until the fan touches either the sides or the top and bottom. */
  .fan-row { flex: 1 1 0; min-height: 120px; margin: var(--anm-esp-2) 0; container-type: size; }
  .fan-row .fan { --hoja: min(calc(100cqw / 2.25), calc(100cqh / 1.55), 210px); }
}
/* Three blurred sheets in a fan: decorative (aria-hidden), -10° / -1° / +9°, each one offset by
   0.42 sheet widths. On P2 they are the star: the sheet width follows the screen's width AND
   height, so the whole screen still fits on a 360×640 phone. */
.fan { --hoja: var(--web-hoja); position: relative; flex: none; width: calc(var(--hoja) * 2.4); height: calc(var(--hoja) * 1.5); }
.fan-hoja {
  position: absolute; left: 50%; bottom: 4px; width: var(--hoja); height: auto;
  background: var(--anm-color-papel); border: 1px solid var(--web-borde-hoja); transform-origin: 50% 100%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14), 0 8px 18px -8px rgb(0 0 0 / 0.35);
}
.fan-hoja:nth-child(1) { transform: translateX(-50%) translateX(calc(var(--hoja) * -0.42)) rotate(-10deg); }
.fan-hoja:nth-child(2) { transform: translateX(-50%) translateY(calc(var(--hoja) * -0.06)) rotate(-1deg); }
.fan-hoja:nth-child(3) { transform: translateX(-50%) translateX(calc(var(--hoja) * 0.42)) rotate(9deg); }
.pros { list-style: none; padding: 0; display: grid; gap: var(--anm-esp-2); }
.pros li { display: flex; gap: var(--anm-esp-3); align-items: flex-start; line-height: 1.35; }
.pro-ic { width: 20px; height: 20px; margin-top: 3px; }
.pros mark { padding: 0 0.16em; }

/* ----------------------------------------------------------- P3 «Email» */
.p3-head { margin-top: var(--anm-esp-2); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--anm-esp-2); }
.p3-h { max-width: 200px; }
/* «Podrían ser tuyas :)» is the previews' caption (founder, 17-10-2026): it hangs
   under them, starting 94px left of their centre, and its concave-up arrow rises
   from the note into the middle sheet, drawn over the previews. */
.p3-fig { position: relative; flex: none; margin-right: var(--anm-esp-1); padding-bottom: 30px; }
.p3-nota { position: absolute; z-index: 1; left: calc(50% - 94px); bottom: 0; margin: 0; white-space: nowrap; font-size: var(--anm-tam-m); line-height: 1.2; transform: rotate(-3deg); }
.p3-nota .fan-arrow { position: absolute; left: 25px; top: -38px; width: 76px; height: 48px; transform: scaleY(-1); }
.fan-s { --hoja: var(--web-hoja-s); width: 112px; height: 84px; }
.fan-s .fan-hoja { bottom: 2px; }
.form { margin-top: var(--anm-esp-5); padding-bottom: var(--anm-esp-5); }
.anm-etiqueta-campo { line-height: 1.2; }
.anm-campo { display: block; height: var(--anm-alto-control); -webkit-appearance: none; appearance: none; }
.anm-campo[readonly] { box-shadow: none; }
.casilla { margin-top: var(--anm-esp-2); }
.casilla input:disabled { cursor: default; }
.casilla:has(input:disabled) { color: var(--anm-texto-secundario); cursor: default; }
.casilla b { font-weight: 700; }
/* Inline links (licence, «Privacidad y bajas», the suggested email). */
.casilla a, .anm-legal a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.anm-legal a { color: var(--anm-texto); font-weight: var(--anm-peso-texto-fuerte); }
#email-legal b, #email-legal a { color: var(--anm-texto-secundario); }
.sugerencia {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.send { margin-top: var(--anm-esp-4); display: flex; flex-direction: column; gap: var(--anm-esp-2); }
/* Honeypot: off-screen for people, still in the form for bots. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Licence layer (opens from the box's link; nothing typed is lost). */
.capa {
  width: min(100% - 2 * var(--anm-margen-lateral), var(--anm-ancho-columna));
  max-height: 85dvh; padding: 0; border: var(--anm-borde-grosor) solid var(--anm-borde); border-radius: 0;
  background: var(--anm-fondo); color: var(--anm-texto);
}
.capa::backdrop { background: color-mix(in srgb, var(--anm-color-tinta) 45%, transparent); }
.capa-cuerpo { display: flex; flex-direction: column; gap: var(--anm-esp-4); padding: var(--anm-esp-5) var(--anm-esp-4) var(--anm-esp-4); }
.capa-h { font-size: var(--anm-tam-xl); }
.capa-texto ol { margin: 0; padding-left: var(--anm-esp-5); display: grid; gap: var(--anm-esp-2); font-size: var(--anm-web-pequeno); line-height: 1.45; }

/* ------------------------------------------------- P4 «Revisa tu email» */
.env-ic { width: 56px; height: 56px; margin-top: var(--anm-esp-5); }
.p4-h { margin-top: var(--anm-esp-4); }
.p4-tx { margin-top: var(--anm-esp-4); }
.mail-addr { font-weight: 700; word-break: break-all; }
.p4-s { margin-top: var(--anm-esp-4); font-size: var(--anm-web-pequeno); color: var(--anm-texto-secundario); }
.p4-nota { margin-top: var(--anm-esp-5); font-size: var(--anm-tam-nota); }
.p4-msg { margin-top: var(--anm-esp-4); }

/* ------------------------------------------------ P5 «Última pregunta» */
.p5-nota { font-size: 1.375rem; }
.p5-h { margin-top: var(--anm-esp-4); }
.p5-h-solo { margin-top: 0; }
.p5-s { margin-top: var(--anm-esp-4); font-size: var(--anm-web-pequeno); color: var(--anm-texto-secundario); }
.p5-s-antes { margin: 0 0 var(--anm-esp-4); }
.yn { margin-top: var(--anm-esp-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--anm-esp-4); }
.p5-legal { margin-top: var(--anm-esp-4); }
.p5-error { margin-top: var(--anm-esp-4); }
.p5b-ac { margin-top: var(--anm-esp-6); }

/* ------------------------------------------------------ P6 «Tus PDF» */
/* «Suscripción confirmada» is .anm-aviso-emergente (tokens): fixed, ~4 s, no layout shift. */
.anm-aviso-emergente .icono { width: 22px; height: 22px; }
.p6-h { margin-top: var(--anm-esp-4); }
.dl { list-style: none; padding: 0; margin: var(--anm-esp-4) 0 0; display: grid; gap: var(--anm-esp-4); }
.dl-card {
  position: relative; display: flex; flex-direction: column; gap: var(--anm-esp-3);
  padding: var(--anm-esp-4); border: var(--anm-borde-grosor) solid var(--anm-borde); background: var(--anm-color-papel);
}
.dl-t b { display: block; font: 700 var(--anm-web-texto)/1.2 var(--anm-fuente-titular); }
.dl-t span { display: block; margin-top: var(--anm-esp-1); font-size: var(--anm-web-pequeno); line-height: 1.4; color: var(--anm-texto-secundario); }
.dl-nota { position: absolute; right: var(--anm-esp-3); top: -15px; padding: 0 6px; background: var(--anm-color-papel); font-size: var(--anm-tam-m); line-height: 1.15; transform: rotate(-3deg); }
.dl-row { display: flex; gap: var(--anm-esp-2); }
.dl-row .anm-boton { flex: 1; width: auto; }
.anm-boton-ver .icono { width: 30px; height: 30px; }
.p6-integrado { margin-top: var(--anm-esp-4); font-size: var(--anm-tam-m); }
.p6-foot { margin: var(--anm-esp-3) 0 0 28px; font-size: var(--anm-tam-m); line-height: 1.22; max-width: 290px; }
.foot-s { margin-top: auto; padding: var(--anm-esp-4) 0; font-size: var(--anm-tam-xs); line-height: 1.6; }

/* ------------------------------------------ «Gestionar mis suscripciones» */
.sub-intro { margin-top: var(--anm-esp-2); font-size: var(--anm-web-pequeno); color: var(--anm-texto-secundario); }
.sub-card { gap: var(--anm-esp-2); }
/* The status sits on the title row (wraps under it only when there is no room),
   so both cards and the footer fit one phone screen. */
.sub-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--anm-esp-1) var(--anm-esp-3); }
.sub-estado { flex: none; font-size: var(--anm-web-pequeno); font-weight: var(--anm-peso-texto-fuerte); }
.sub-todo { margin-top: var(--anm-esp-2); display: flex; justify-content: center; }

/* ----------------------------------------------- interaction states ----
   tokens.css v1.3 gives buttons, «ver», .anm-enlace and legal links their
   hover / active / focus. The other links follow the same language: marked
   in fosforito on hover (pointer devices only), pressed 1px, focus ring. */
.back span, .tb-logo, .pie a, .sugerencia, .casilla a, .texto-pagina a, .foot-s a {
  transition: background-color var(--anm-dur-rapida) var(--anm-curva-salida), transform var(--anm-dur-rapida) var(--anm-curva-salida);
}
@media (hover: hover) {
  .back:hover span, .pie a:hover, .sugerencia:hover, .casilla a:hover, .texto-pagina a:hover, .foot-s a:hover {
    background: var(--anm-color-fosforito); color: var(--anm-color-tinta);
  }
  .tb-logo:hover { background: var(--anm-color-fosforito-suave); }
  .casilla:hover input:not(:checked):not(:disabled) { background-color: var(--anm-color-fosforito-suave); }
}
.back:active span, .pie a:active, .sugerencia:active, .casilla a:active, .texto-pagina a:active, .foot-s a:active,
.anm-enlace:active, .anm-legal a:active {
  background: var(--anm-color-fosforito); color: var(--anm-color-tinta); transform: translateY(1px);
}
.anm-boton[aria-disabled="true"]:active { transform: none; }
.back:focus-visible, .tb-logo:focus-visible, .pie a:focus-visible, .sugerencia:focus-visible,
.casilla a:focus-visible, .texto-pagina a:focus-visible, .foot-s a:focus-visible {
  outline: var(--anm-foco-grosor) solid var(--anm-foco);
  outline-offset: var(--anm-foco-separacion);
}
@media (prefers-reduced-motion: reduce) {
  .back:active span, .pie a:active, .sugerencia:active, .casilla a:active, .texto-pagina a:active,
  .foot-s a:active, .anm-enlace:active, .anm-legal a:active { transform: none; }
}

/* ALTCHA runs invisibly (display="invisible"); keep its node out of the layout. */
altcha-widget { display: contents; }

/* --------------------------------------------- content pages (legal...) */
.pagina .ct { padding-bottom: var(--anm-esp-6); }
.texto-pagina { display: flex; flex-direction: column; gap: var(--anm-esp-3); padding-top: var(--anm-esp-4); max-width: var(--anm-ancho-lectura); }
.texto-pagina h2 { font: 700 var(--anm-web-texto)/1.25 var(--anm-fuente-titular); margin-top: var(--anm-esp-3); scroll-margin-top: var(--anm-esp-4); }
.texto-pagina p, .texto-pagina li { font-size: var(--anm-web-pequeno); line-height: var(--anm-interlineado-texto); }
.texto-pagina .tx { font-size: var(--anm-web-texto); }
.texto-pagina ul, .texto-pagina ol { padding-left: var(--anm-esp-5); display: grid; gap: var(--anm-esp-1); }
.texto-pagina .meta { color: var(--anm-texto-secundario); font-size: var(--anm-web-legal); }
.texto-pagina .accion { margin-top: var(--anm-esp-3); }
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; min-width: 34rem; font-size: var(--anm-web-legal); }
.tabla th, .tabla td { border: 1px solid var(--anm-color-linea); padding: var(--anm-esp-2); text-align: left; vertical-align: top; }
.pendiente { background: var(--anm-aviso); color: var(--anm-color-tinta); padding: 0 0.2em; border-radius: var(--anm-radio-s); font-weight: var(--anm-peso-texto-fuerte); }
.aviso-borrador { border: var(--anm-borde-grosor) solid var(--anm-borde); padding: var(--anm-esp-3); font: 700 var(--anm-web-legal)/1.4 var(--anm-fuente-titular); }
@media (min-width: 48rem) { .pagina-ancha { max-width: 46rem; } }

/* Equations, if any ever appear: use .anm-fosforito from tokens.css (it
   becomes a box automatically inside .anm-noche; never a fill on dark). */

/* ----------------------------------- short screens (≤ 600px tall: SE 1st gen) */
/* Everything must still fit with the footer visible: the fixed parts of P2 give
   the sheets a little room back. */
@media (max-height: 600px) {
  :root { --web-lockup: clamp(124px, 38vw, 150px); }
  .lema { font-size: var(--anm-tam-m); }
  .pros { gap: var(--anm-esp-1); }
  .pros li { font-size: 0.9375rem; line-height: 1.3; }
  .p2 { padding-top: var(--anm-esp-1); }
  .tb { margin-top: 0; }
}

/* --------------------------------------------- small phones (≤ 370px) */
@media (max-width: 370px) {
  :root { --web-hoja-s: 46px; }
  .lema { font-size: var(--anm-tam-m); margin-left: var(--anm-esp-6); }
  .fan-s { width: 100px; height: 76px; }
  .p3-h { max-width: 210px; }
  .form { margin-top: var(--anm-esp-4); }
  .dl-card { padding: var(--anm-esp-3); }
  .p4-nota { font-size: var(--anm-tam-m); }
  .p6-foot { font-size: 1rem; margin-left: 20px; }

}