@charset "UTF-8";
/* ==========================================================================
   OHMYBITZ — sistema visual
   Derivado de 01-marca/IDENTIDAD-OHMYBITZ.md. No editar sin revisar ese documento.
   Cinco recursos: papel con grilla · antetitulo mono · sombra dura · anotacion ·
   todo dato en ficha.
   ========================================================================== */

/* ------------------------------------------------------- 0. Tipografia
   Autoalojada en estaticos/fuentes/. Subconjunto latin, suficiente para
   español. Ese subconjunto NO trae los glifos decorativos (flecha, cruz,
   circulo): se dibujan en SVG o en CSS, nunca con un caracter, para que
   no dependan de una fuente del sistema. */
@font-face { font-family: "Archivo"; src: url("../fuentes/archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fuentes/archivo-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fuentes/archivo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fuentes/archivo-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fuentes/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fuentes/kalam-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Paleta */
  --tinta:            #14120F;
  --papel:            #F2EEE5;
  --ficha:            #FBF9F5;
  --vermellon:        #FF4A17;
  --vermellon-texto:  #C1300A;
  --vermellon-claro:  #FF6A3D;
  --marcador:         #E8FF5A;
  --azul:             #1F35D6;
  --azul-claro:       #8F9BFF;
  --gris:             #6E675C;
  --regla:            #D9D3C6;

  /* Tipografia */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --mano:    "Kalam", "Bradley Hand", cursive;

  /* Retícula de 28 px: toda medida vertical es múltiplo */
  --u:    28px;
  --u-2:  56px;
  --u-3:  84px;
  --u-4:  112px;
  --u-5:  140px;

  --ancho:      1240px;
  --ancho-texto: 68ch;
  --canal:      clamp(20px, 5vw, 56px);

  /* Sombra dura: 1.5 px de borde y desplazamiento solido, cero blur */
  --borde:      1.5px solid var(--tinta);
  --sombra:     5px 5px 0 var(--tinta);
  --sombra-sm:  4px 4px 0 var(--tinta);
  --sombra-señal: 5px 5px 0 var(--vermellon);
}

/* ------------------------------------------------------------ 2. Cimientos */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--u-3);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.647;              /* 28 px sobre 17 px */
  color: var(--tinta);
  background-color: var(--papel);
  /* Grilla de 28 px dibujada con SVG: hairline, no degradado */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M28 0v28M0 28h28' fill='none' stroke='%2314120F' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Pie al fondo. Las paginas cortas del sistema de contacto (gracias y error)
     no llegan a llenar la pantalla, y sin esto quedaba una franja de papel
     debajo del pie oscuro. El nav sigue pegado arriba: sticky funciona igual
     dentro de un contenedor flex. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* Margen vertical vermellón al borde izquierdo del papel */
body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--vermellon);
  z-index: 60;
  pointer-events: none;
}

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

a { color: var(--vermellon-texto); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2.5px solid var(--azul);
  outline-offset: 3px;
}

hr { border: 0; border-top: 1px solid var(--regla); margin: var(--u-2) 0; }

/* ------------------------------------------------------- 3. Tipografia base */
h1, h2, h3, h4, .titulo-display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  /* Un nombre de creador de una sola palabra larga ("otromasdesistemas") en
     Archivo 800 no entra en su columna y sacaba el documento fuera del
     viewport. break-word parte solo cuando la palabra sola no entra en una
     linea, a diferencia de anywhere, que en su momento partio "636,1 mil". */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
/* El H1 de la home vive en el antetitulo mono, para que el encabezado de la
   pagina responda que es el sitio y no el claim. El display grande pasa a <p>
   con esta clase, que le devuelve la caja del h1 sin ser un encabezado. */
.titulo-display { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.08; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p { margin: 0 0 var(--u); max-width: var(--ancho-texto); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Un resalte de marcador por pantalla, seis palabras como maximo */
.marcador {
  background: var(--marcador);
  padding: .04em .22em;
  margin: 0 -.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Una nota manuscrita por pantalla */
.nota {
  font-family: var(--mano);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--gris);
  transform: rotate(-1.4deg);
  max-width: 30ch;
  text-transform: none;
  letter-spacing: 0;
}
.nota--señal { color: var(--vermellon-texto); }
.nota { padding-left: .1em; }

/* Etiquetas y datos en mono, caja alta, tracking amplio */
.mono {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .6875rem;
}

/* Antetitulo mono antes de cada bloque. Sin pildora, sin numerar: texto
   suelto sobre el papel. La pildora con borde redondeado y la secuencia
   01/02/03 salieron del sistema el 8 de septiembre. */
.etiqueta {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gris);
}
.etiqueta--señal { color: var(--vermellon-texto); }
.etiqueta--papel { color: rgba(242,238,229,.62); }
/* Un H1 con forma de antetitulo: hay que deshacer el line-height 1.02 de los
   titulares, que a 11px con .16em de tracking pega las dos lineas.
   Contrato de una linea: el H1 de la portada mide 53 caracteres, que con el
   tracking de escritorio piden 443 px. El max-width que tenia esta regla lo
   partia en tres y salio. Debajo de 460 px el H1 baja tracking y cuerpo, igual
   que la etiqueta del listado de roster, para no soltar la linea unica. */
/* Sin nowrap a proposito: en un telefono de 320 px ni bajando cuerpo entra en
   una linea, y nowrap ahi desborda el papel en horizontal, que es peor que dos
   lineas. Rompe solo por debajo de ~330 px. */
h1.etiqueta { line-height: 1.5; }
@media (max-width: 560px) {
  h1.etiqueta { letter-spacing: .06em; }
}
@media (max-width: 470px) {
  h1.etiqueta { font-size: .5625rem; letter-spacing: .04em; }
}

.cifra {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* --------------------------------------------------------- 4. Estructura */
.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.env--angosto { max-width: 860px; }
.medida { max-width: 74ch; }

.bloque { padding-block: var(--u-4); }
.bloque--corto { padding-block: var(--u-3); }
.bloque--tinta {
  background: var(--tinta);
  color: var(--papel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M28 0v28M0 28h28' fill='none' stroke='%23F2EEE5' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}
.bloque--tinta h1, .bloque--tinta h2, .bloque--tinta h3 { color: var(--papel); }
.bloque--tinta a { color: var(--vermellon-claro); }
.bloque--tinta .cifra-grande { color: var(--vermellon-claro); }

/* Cabecera de bloque: etiqueta, titulo y entrada */
.cabecera { margin-bottom: var(--u-2); }
.cabecera > .etiqueta { margin-bottom: var(--u); }
.cabecera__entrada {
  margin-top: var(--u);
  font-size: 1.125rem;
  color: var(--gris);
  max-width: 62ch;
}
.bloque--tinta .cabecera__entrada { color: rgba(242,238,229,.72); }

.linea-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--u) var(--u-2);
  flex-wrap: wrap;
  border-bottom: var(--borde);
  padding-bottom: var(--u);
  margin-bottom: var(--u-2);
}
.bloque--tinta .linea-titulo { border-bottom-color: rgba(242,238,229,.3); }

/* Dos reglas seguidas no dividen dos veces. La del titulo existe para separarlo
   de la bajada; cuando el bloque no lleva bajada, lo que viene abajo ya trae su
   propia regla (.punto, .ficha, .faq__item) y las dos quedaban pegadas. El
   build pone la clase solo cuando la cabecera se arma sin entrada. */
.cabecera--sin-bajada .linea-titulo { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------- 5. Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  padding: .95em 1.5em .85em;
  border: var(--borde);
  background: var(--vermellon);
  color: var(--tinta);                 /* nunca blanco sobre vermellon */
  box-shadow: var(--sombra-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.flecha { flex-shrink: 0; }

/* Mandatorio: el texto de un enlace dentro de un parrafo se lee de corrido.
   Sin esto, "Ver a los 10" caia partido en dos lineas dentro de la nota de
   30ch y la flecha quedaba sola en una tercera. La flecha no entra en el
   nowrap a proposito: si no alcanza el ancho, baja ella y el texto se queda
   entero. Un texto de enlace tan largo que no entre en su columna se acorta
   en el copy, nunca se le quita el nowrap. */
.enlace-txt { white-space: nowrap; }
.btn .flecha { transition: transform .12s ease; }
.btn:hover .flecha { transform: translateX(2px); }
.enlace-flecha:hover .flecha { transform: translateX(2px); }

.btn--papel { background: var(--ficha); color: var(--tinta); }
.btn--fantasma {
  background: transparent;
  color: var(--tinta);
  box-shadow: none;
}
.btn--fantasma:hover { background: var(--ficha); box-shadow: var(--sombra-sm); }
.bloque--tinta .btn {
  color: var(--tinta);                 /* la regla dura: nunca claro sobre vermellon */
  border-color: var(--papel);
  box-shadow: 4px 4px 0 var(--papel);
}
.bloque--tinta .btn:hover { box-shadow: 6px 6px 0 var(--papel); }
.bloque--tinta .btn:active { box-shadow: 1px 1px 0 var(--papel); }
.bloque--tinta .btn--fantasma {
  color: var(--papel);
  border-color: var(--papel);
  box-shadow: none;
}
.bloque--tinta .btn--fantasma:hover { background: rgba(242,238,229,.1); box-shadow: 4px 4px 0 var(--papel); }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--vermellon-texto);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: .2em;
}
.enlace-flecha:hover { gap: .85em; }
.bloque--tinta .enlace-flecha { color: var(--vermellon-claro); }

@media (prefers-reduced-motion: reduce) {
  .btn, .enlace-flecha { transition: none; }
  .btn:hover { transform: none; }
  .enlace-flecha:hover { gap: .5em; }
}

/* -------------------------------------------------- 6. Ficha: todo dato aqui
   Formato de expediente: lineas punteadas y cifras alineadas a la derecha.  */
.ficha {
  background: var(--ficha);
  border: var(--borde);
  box-shadow: var(--sombra);
  padding: var(--u) calc(var(--u) - 4px);
}
.ficha--plana { box-shadow: none; }
.ficha__titulo {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gris);
  padding-bottom: .7em;
  margin-bottom: .7em;
  border-bottom: 1.5px solid var(--tinta);
}
.ficha__lista { margin: 0; padding: 0; list-style: none; }
.ficha__fila {
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: .42em 0;
}
.ficha__fila + .ficha__fila { border-top: 1px dotted var(--regla); }
.ficha__etq {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  flex-shrink: 1;          /* red de seguridad: antes de desbordar la ficha, cede */
  min-width: 0;
}
.ficha__pts {
  flex: 1 1 auto;
  min-width: 1.5em;
  border-bottom: 1px dotted var(--regla);
  transform: translateY(-.28em);
}
.ficha__val {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 1;          /* un valor de texto largo se ajusta en vez de salirse */
  min-width: 0;
  overflow-wrap: break-word;   /* "anywhere" partia "636,1 mil" a mitad de palabra */
}
/* Listado de roster: nombre y cifra se leen en una sola linea, siempre.
   El ancho minimo de la tarjeta que lo sostiene esta en .hero__rejilla. */
.ficha--roster .ficha__etq,
.ficha--roster .ficha__val { white-space: nowrap; overflow-wrap: normal; }
.ficha__val--señal { color: var(--vermellon-texto); }
.ficha__val--dato  { color: var(--azul); }
.ficha__pie {
  margin-top: var(--u);
  padding-top: .8em;
  border-top: 1px solid var(--regla);
  font-family: var(--mono);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--gris);
  text-transform: none;
}
.ficha__pie b { color: var(--tinta); text-transform: uppercase; letter-spacing: .1em; }

/* Nota de una ficha sin filas. Mismo cuerpo que .ficha__pie, sin la regla
   superior porque arriba no hay lista de la que separarse. */
.ficha__nota {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--gris);
}

.bloque--tinta .ficha {
  background: transparent;
  border-color: rgba(242,238,229,.3);
  box-shadow: none;
}
.bloque--tinta .ficha__titulo { color: rgba(242,238,229,.6); border-bottom-color: rgba(242,238,229,.35); }
.bloque--tinta .ficha__etq { color: rgba(242,238,229,.6); }
.bloque--tinta .ficha__pts { border-bottom-color: rgba(242,238,229,.25); }
.bloque--tinta .ficha__fila + .ficha__fila { border-top-color: rgba(242,238,229,.18); }
.bloque--tinta .ficha__val--señal { color: var(--vermellon-claro); }
.bloque--tinta .ficha__val--dato  { color: var(--azul-claro); }

/* Cifra suelta con epigrafe */
.cifra-grande {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--vermellon-texto);
  display: block;
}
.cifra-epigrafe {
  display: block;
  margin-top: .55em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gris);
  line-height: 1.4;
}
.bloque--tinta .cifra-epigrafe { color: rgba(242,238,229,.6); }

.tira-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--u);
  border-top: var(--borde);
  border-bottom: var(--borde);
  padding-block: var(--u-2);
}
.bloque--tinta .tira-cifras { border-color: rgba(242,238,229,.3); }
.tira-cifras > div { padding-inline: 0; }

/* ------------------------------------------------------------- 8. Cabecera */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: var(--borde);
}
.nav__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  height: var(--u-3);
}
.nav__marca { display: flex; align-items: center; text-decoration: none; }
.nav__marca img { height: 26px; width: auto; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.9em;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Sin `nowrap` los dos items de dos palabras, PARA MARCAS y PARA CREADORES,
   se parten en dos lineas entre 881 px y el ancho en que el menu deja de
   apretar. A 880 px ya no se ve, porque ahi entra la navegacion movil. */
.nav__menu a {
  white-space: nowrap;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  text-decoration: none;
  color: var(--tinta);
  padding-bottom: .25em;
  border-bottom: 1.5px solid transparent;
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] { border-bottom-color: var(--vermellon); }
.nav__acciones { display: flex; align-items: center; gap: var(--u); }
.nav__btn { padding: .7em 1.15em .6em; font-size: .6875rem; }

.nav__toggle {
  display: none;
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  background: transparent;
  border: 1px solid var(--tinta);
  padding: .5em 1em .45em;
  color: var(--tinta);
  cursor: pointer;
}
.nav__movil { display: none; border-top: 1px solid var(--regla); padding-block: var(--u); }
.nav__movil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9em; }
.nav__movil a {
  font-family: var(--mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--tinta);
}
/* El CTA del nav vuelve al menu plegado. En movil `.nav__acciones` se oculta,
   asi que este es el unico Hablemos del nav y apunta al mismo formulario.
   Va debajo de los items, con el paso de reticula de separacion y sin regla:
   su borde y su sombra dura ya lo separan de dos enlaces de texto. La regla de
   arriba le ganaria en especificidad al `.btn`, de ahi el selector de dos
   clases. */
.nav__movil .btn {
  margin-top: var(--u);
  letter-spacing: .1em;
  color: var(--tinta);
}

@media (max-width: 880px) {
  .nav__menu, .nav__acciones { display: none; }
  .nav__toggle { display: inline-block; }
  .nav__movil.abierto { display: block; }
  .nav__fila { height: var(--u-2); }
}

/* El lockup mide 247 px fijos. Sumado al boton de menu no entra por debajo de
   unos 380 px de viewport y el documento scrolleaba en horizontal. El logo
   cede primero; el boton nunca, porque es la unica navegacion en movil. */
@media (max-width: 460px) {
  .nav__fila { gap: 14px; }
  .nav__marca { min-width: 0; flex-shrink: 1; }
  .nav__marca img { height: 20px; }
  .nav__toggle { flex-shrink: 0; }
}

/* --------------------------------------------- 8b. Barra del pulgar (movil)
   Los dos catalogos de la casa, fijos abajo, donde cae el pulgar. Aparece en
   el mismo corte en que el menu se pliega en el boton, 880 px, y no existe en
   escritorio: alli los dos siguen en el menu.

   Tres cosas que no se cambian sin volver a medir. El fondo es papel con regla
   arriba y no tinta, porque el pie ya es oscuro y una barra tinta apoyada
   sobre el se leia como su continuacion en vez de como navegacion. La altura
   es 56 px, un paso de la reticula y por encima del minimo tactil de 44. Y la
   cifra va en vermellon-texto y nunca en el color de su segmento: sobre papel
   el marcador de masivo da 1,4:1 y la etiqueta quedaria ilegible. */
.barra-movil { display: none; }

@media (max-width: 880px) {
  .barra-movil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    /* Debajo del margen vermellon, que es 60 y cruza por delante igual que
       cruza por delante del nav. */
    z-index: 55;
    background: var(--papel);
    border-top: var(--borde);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* La regla separa los dos botones, y no se dibuja ninguna en los extremos. */
  .barra-movil__btn + .barra-movil__btn { border-left: var(--borde); }
  .barra-movil__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--u-2);
    text-decoration: none;
    color: var(--tinta);
  }
  .barra-movil__cifra {
    font-family: var(--mono);
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1;
    color: var(--vermellon-texto);
  }
  .barra-movil__txt {
    font-family: var(--mono);
    font-weight: 500;
    font-size: .625rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .13em;
  }
  /* El activo lleva la senal vermellon sobre el borde superior, que es la
     misma marca que el menu de escritorio pone debajo del item. */
  .barra-movil__btn[aria-current="page"] {
    box-shadow: inset 0 3px 0 var(--vermellon);
    background: var(--ficha);
  }
  /* El pie termina por encima de la barra y no debajo. */
  body { padding-bottom: calc(var(--u-2) + env(safe-area-inset-bottom)); }
  /* Un ancla no queda tapada por la barra al final del documento. */
  html { scroll-padding-bottom: var(--u-2); }
}

/* ------------------------------------- 8c. Riel lateral (tablet apaisada)
   Entre 881 y 1366 px, en horizontal y con puntero grueso, el menu deja de
   ser una fila arriba y pasa a una columna fija a la izquierda, que se
   contrae y se despliega como el panel lateral de una aplicacion de tableta.
   Es la misma idea de la barra del pulgar y con la misma logica: donde no hay
   cursor, la navegacion va donde cae la mano.

   Cuatro cosas que no se cambian sin volver a medir.

   1. `pointer: coarse` no es decoracion de la consulta. Sin el, un notebook
      de 1366 x 768 recibe el riel y pierde su menu de escritorio. Por eso el
      riel no se ve achicando la ventana: se ve en la tableta o en el modo
      dispositivo del navegador.
   2. Contraido el riel mide 64 px y nunca desaparece. Es la unica navegacion
      de la pagina en ese rango, igual que el boton de menu en telefono.
   3. Contraido muestra iconos y ninguna etiqueta. Se probo con la etiqueta
      girada y se retiro el 9 de septiembre: si el texto ya se lee de costado,
      desplegar el panel no agrega nada y solo obliga a torcer la cabeza. El
      icono dice que ahi hay algo y el panel dice que es.
   4. El isotipo, los iconos, el signo mayor y la cruz salen del CSS y no del
      marcado, con el mismo criterio que la flecha. El enlace ya declara su
      nombre en `aria-label` o en su texto, asi que apagar la caja del texto
      no lo deja sin nombre para un lector de pantalla.
*/
@media (min-width: 881px) and (max-width: 1366px)
   and (orientation: landscape) and (pointer: coarse) {

  :root { --riel: 64px; --riel-abierto: 260px; }

  /* El contenido se corre los 64 px del riel contraido, que es su estado
     normal, y no se mueve al desplegarlo: el panel abierto se monta encima.
     Empujandolo, a 1024 px la columna de texto caia a 326 px y el nombre del
     creador se partia a la mitad de la palabra, porque el cuerpo del H1 se
     calcula contra el viewport y no contra su columna. El panel abierto es
     ademas un estado de paso: dura lo que tarda el visitante en elegir. */
  body { padding-left: var(--riel); }
  /* Ya no hay fila de nav arriba que tape el ancla. */
  html { scroll-padding-top: var(--u); }

  .nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--riel);
    border-bottom: 0;
    border-right: var(--borde);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .18s ease;
  }
  /* La sombra dura de la identidad, sin blur, es lo que dice que el panel
     esta por encima de la pagina. Un velo oscuro seria otro lenguaje. */
  html.riel-abierto .nav {
    width: var(--riel-abierto);
    box-shadow: 5px 0 0 var(--tinta);
  }

  .nav > .env { max-width: none; padding-inline: 0; height: 100%; }
  .nav__fila {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    gap: var(--u);
    padding-block: var(--u);
  }
  /* El marcado no cambia y el orden visual si: el boton que despliega el riel
     va arriba, debajo del isotipo, y el Hablemos se queda anclado al fondo.
     Abajo va el destino, no el control. */
  .nav__marca { order: 1; }
  .nav__toggle { order: 2; }
  .nav__fila > nav { order: 3; }
  .nav__acciones { order: 4; }

  .nav__marca { justify-content: center; }
  .nav__marca img { display: none; }
  .nav__marca::before {
    content: "";
    display: block;
    width: 40px;
    height: 25px;
    background: url("../svg/isotipo-tinta.svg") no-repeat center / contain;
  }
  html.riel-abierto .nav__marca { justify-content: flex-start; padding-left: 18px; }
  html.riel-abierto .nav__marca::before { display: none; }
  html.riel-abierto .nav__marca img { display: block; height: 20px; }

  /* Cerrado, el boton dibuja un signo mayor que invita a abrir; abierto, una
     cruz que cierra. Son los dos signos con los que un visitante de tableta
     ya sabe que hacer, y los dos se dibujan con bordes: el subconjunto de las
     tipografias no trae ninguno de los dos caracteres. */
  .nav__toggle {
    display: block;
    align-self: center;
    position: relative;
    width: 40px;
    height: 34px;
    padding: 0;
    font-size: 0;
    flex-shrink: 0;
  }
  .nav__toggle::before, .nav__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .nav__toggle::before {
    width: 9px;
    height: 9px;
    border-top: 1.6px solid var(--tinta);
    border-right: 1.6px solid var(--tinta);
    transform: translate(-65%, -50%) rotate(45deg);
  }
  html.riel-abierto .nav__toggle { align-self: flex-start; margin-left: 18px; }
  html.riel-abierto .nav__toggle::before,
  html.riel-abierto .nav__toggle::after {
    width: 17px;
    height: 0;
    border-top: 1.6px solid var(--tinta);
    border-right: 0;
  }
  html.riel-abierto .nav__toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
  html.riel-abierto .nav__toggle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  .nav__menu { flex-direction: column; align-items: stretch; gap: 6px; }
  /* Contraido el enlace es su icono. El texto se queda en el arbol de
     accesibilidad con la caja en cero, igual que en el boton de menu. */
  .nav__menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    font-size: 0;
    letter-spacing: 0;
    padding-bottom: 0;
    border-bottom: 0;
    border-left: 1.5px solid transparent;
  }
  .nav__i::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  /* Sin etiqueta a la vista, la senal del destino activo pasa al canto
     izquierdo del enlace, que ocupa todo el ancho del riel. */
  .nav__menu a:hover, .nav__menu a[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--vermellon);
  }
  html.riel-abierto .nav__menu { gap: 4px; padding-inline: 12px; }
  html.riel-abierto .nav__menu a {
    justify-content: flex-start;
    gap: .85em;
    height: 42px;
    padding-left: 6px;
    font-size: .6875rem;
    letter-spacing: .13em;
  }

  /* Los cuatro iconos. Cada uno dibuja lo que el destino contiene y no una
     figura abstracta. La primera version del 9 de septiembre usaba geometria
     abstracta, un listado, una reticula, una etiqueta y un cuadro, y se
     retiro el mismo dia: fuera del globo de dialogo del Hablemos, ninguna se
     leia, y un icono que hay que adivinar se siente puesto para rellenar.

     La regla que salio de ahi: un icono de navegacion dibuja un objeto que el
     visitante ya vio en otro lado, o no va. `Roster` es una voz, que es lo
     que la casa vende. `Masivo` es un grupo, que es lo que ese segmento es.
     `Para marcas` es una medalla, la marca que quiere estar arriba.
     `Para creadores` es un play, que es donde vive un creador.

     El play es generico a proposito. La marca de YouTube esta registrada y no
     se dibuja, y de todas formas el triangulo dentro del circulo se lee como
     video en cualquier plataforma.

     Trazo de 1,6 y remate cuadrado, que es el mismo pulso de la flecha. */
  .nav__i--roster::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120F' stroke-width='1.6' stroke-linecap='square'%3E%3Ccircle cx='8.5' cy='7' r='3.2'/%3E%3Cpath d='M3.5 19.5v-1.6c0-2.6 2.2-4 5-4s5 1.4 5 4v1.6'/%3E%3Cpath d='M17.2 9.6a4.2 4.2 0 0 1 0 5.4'/%3E%3Cpath d='M20.1 6.9a8 8 0 0 1 0 10.8'/%3E%3C/svg%3E");
  }
  .nav__i--masivo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120F' stroke-width='1.6' stroke-linecap='square'%3E%3Ccircle cx='12' cy='6.8' r='3'/%3E%3Cpath d='M6.8 19.5v-1.4c0-2.4 2.1-3.8 5.2-3.8s5.2 1.4 5.2 3.8v1.4'/%3E%3Ccircle cx='4.5' cy='9.6' r='2.2'/%3E%3Cpath d='M1.2 18.2v-1c0-1.7 1-2.7 2.9-3'/%3E%3Ccircle cx='19.5' cy='9.6' r='2.2'/%3E%3Cpath d='M22.8 18.2v-1c0-1.7-1-2.7-2.9-3'/%3E%3C/svg%3E");
  }
  .nav__i--marcas::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120F' stroke-width='1.6' stroke-linecap='square'%3E%3Ccircle cx='12' cy='8.2' r='5.6'/%3E%3Cpath d='M8.4 12.6 6.8 21.4 12 18.6l5.2 2.8-1.6-8.8'/%3E%3C/svg%3E");
  }
  .nav__i--creadores::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120F' stroke-width='1.6' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M9.9 8 16 12l-6.1 4z' fill='%2314120F' stroke-linejoin='miter'/%3E%3C/svg%3E");
  }

  /* El Hablemos queda al fondo del riel, que es donde cae el pulgar de quien
     sostiene la tableta. Contraido es el globo de dialogo en tinta sobre
     vermellon, que es la unica combinacion que la identidad admite para ese
     boton. Desplegado vuelve a ser el boton con su texto y su flecha. */
  .nav__acciones { margin-top: auto; justify-content: center; padding-inline: 12px; }
  .nav__btn {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  .nav__btn .flecha { display: none; }
  .nav__btn::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120F' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M3 3h18v13H9l-6 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  html.riel-abierto .nav__acciones { padding-inline: 18px; }
  html.riel-abierto .nav__btn {
    width: 100%;
    height: auto;
    padding: .8em 1.15em .7em;
    font-size: .6875rem;
    letter-spacing: .1em;
  }
  html.riel-abierto .nav__btn::before { display: none; }
  html.riel-abierto .nav__btn .flecha { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ----------------------------------------------------------------- 9. Hero */
.hero { padding-block: var(--u-3) var(--u-3); position: relative; }
.hero__comillas {
  width: clamp(52px, 6vw, 78px);
  margin-bottom: var(--u);
}
.hero__titulo { margin-bottom: var(--u); }
.hero__titulo .serif { display: block; font-size: 1.06em; letter-spacing: -.01em; }
.hero__entrada {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--gris);
  margin-bottom: var(--u-2);
}
.hero__entrada strong { color: var(--tinta); font-weight: 700; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u); margin-bottom: var(--u-2); }
.hero__rejilla {
  display: grid;
  /* 372 px: el nombre mas largo del roster ("Pildoras de Programacion") mas su
     cifra miden 352 px dentro de la ficha. Por debajo de eso, la columna se
     apila. Si entra un nombre mas largo, este numero sube con el. */
  grid-template-columns: minmax(0, 1.35fr) minmax(372px, .65fr);
  gap: var(--u-2);
  align-items: start;
}
@media (max-width: 1100px) {
  /* minmax(0, 1fr) y no 1fr: con 1fr la columna no baja del min-content de la
     ficha del roster, que con nowrap mide 359 px, y el papel se desbordaba en
     un telefono de 360 px. */
  .hero__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* Contrato de una linea del listado de roster, version angosta. Por debajo de
   420 px no hay ancho para el nombre mas largo con el tracking de escritorio,
   asi que la etiqueta baja un paso de cuerpo y suelta tracking. La linea sigue
   siendo una. */
@media (max-width: 420px) {
  .ficha--roster .ficha__etq { font-size: .5625rem; letter-spacing: .04em; }
  .ficha--roster .ficha__val { font-size: .8125rem; }
  .ficha--roster .ficha__pts { min-width: .7em; }
}

/* --------------------------------------------- 10. Tarjeta de creador (ficha) */
.rejilla-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(252px, 100%), 1fr));
  gap: var(--u);
}
.rejilla-roster--densa { grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); }

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--ficha);
  border: var(--borde);
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  color: var(--tinta);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
}
.tarjeta:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tinta); }
.tarjeta__media {
  position: relative;
  border-bottom: var(--borde);
  background: var(--papel);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.tarjeta__media img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__segmento {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .5625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  background: var(--tinta);
  color: var(--papel);
  padding: .45em .8em .35em;
}
/* Roster monocromo. La foto descansa en duotono tinta+papel y recupera su color
   bajo el cursor. Dos decisiones que no se tocan sin volver a medir:

   1. Va dentro de (hover: hover). En un telefono no hay cursor, asi que sin
      esta consulta el visitante tactil se queda con 51 tarjetas grises y
      ningun gesto que las revele. Ahi el color es el estado normal.
   2. El acento es la barra y no el duotono. Tenir las 51 fotos de vermellon
      invierte la proporcion de la paleta, que le da 10%: la barra deja el
      acento en unos pocos pixeles por tarjeta y la foto en los dos colores
      base. Es tambien lo unico que el CSS puede hacer del contorno de la
      referencia, que en el original es un recorte por foto.

   El duotono es un filtro SVG que emite build.py en el <body> de las 121
   paginas. Si esa constante deja de emitirse, la tarjeta vuelve a color sin
   error: el control esta en la seccion 8 del README. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta__media img {
    filter: url(#duo-roster);
    transition: filter .18s ease;
  }
  .tarjeta:hover .tarjeta__media img,
  .tarjeta:focus-visible .tarjeta__media img { filter: none; }
  .tarjeta__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 7px;
    background: var(--acento-seg, var(--vermellon));
    transition: opacity .18s ease;
  }
  .tarjeta:hover .tarjeta__media::after,
  .tarjeta:focus-visible .tarjeta__media::after { opacity: 0; }

  /* La etiqueta de segmento acompana al reposo. En tinta sobre papel todo el
     tiempo era la unica pieza de la tarjeta que no participaba del hover.

     El color lo elige el segmento y el texto lo elige el contraste, no el
     gusto: vermellon y marcador solo admiten tinta encima, y azul solo admite
     papel. Con la combinacion cruzada la etiqueta queda en 2,26 y 2,90, por
     debajo del 4,5 que pide un texto de 9 px, y en el caso del vermellon
     ademas rompe la prohibicion de la identidad. Los cuatro pares que se usan
     miden 5,56 tinta sobre vermellon, 16,81 tinta sobre marcador, 7,14 papel
     sobre azul y 16,15 papel sobre tinta en el hover.

     Va dentro de esta consulta a proposito, junto al duotono. En una pantalla
     tactil la foto ya esta a color, y una etiqueta marcador sobre una foto a
     color son dos acentos peleando. Ahi la etiqueta se queda como estaba,
     tinta sobre papel, que es la misma forma que toma en el hover. */
  .tarjeta--tech        { --acento-seg: var(--vermellon); --texto-seg: var(--tinta); }
  .tarjeta--divulgacion { --acento-seg: var(--azul);      --texto-seg: var(--papel); }
  .tarjeta--masivo      { --acento-seg: var(--marcador);  --texto-seg: var(--tinta); }
  .tarjeta__segmento {
    background: var(--acento-seg, var(--tinta));
    color: var(--texto-seg, var(--papel));
    transition: background .18s ease, color .18s ease;
  }
  .tarjeta:hover .tarjeta__segmento,
  .tarjeta:focus-visible .tarjeta__segmento {
    background: var(--tinta);
    color: var(--papel);
  }
}

.tarjeta__cuerpo {
  padding: calc(var(--u) - 6px) calc(var(--u) - 8px);
  display: flex;
  flex-direction: column;
  gap: .7em;
  flex: 1;
}
.tarjeta__nichos {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .5625rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--gris);
  line-height: 1.5;
  min-height: 2.7em;                   /* reserva dos lineas: alinea los nombres */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.05;
}
.tarjeta__datos { margin-top: auto; padding-top: .5em; }
.tarjeta__datos .ficha__etq {
  flex-shrink: 1;
  min-width: 0;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La cifra es el dato de la tarjeta: no encoge ni se recorta nunca. */
.tarjeta__datos .ficha__val { white-space: nowrap; flex-shrink: 0; }
.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  border-top: 1px solid var(--regla);
  padding-top: .7em;
  margin-top: .3em;
}
.tarjeta__plataformas {
  display: flex;
  gap: .45em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .5625rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
}
.tarjeta__plataformas span {
  border: 1px solid var(--regla);
  padding: .18em .4em .12em;
}
.tarjeta__flecha { color: var(--vermellon-texto); display: flex; }
.tarjeta:hover .tarjeta__flecha { color: var(--vermellon); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta { transition: none; }
  .tarjeta:hover { transform: none; }
  .tarjeta__media img, .tarjeta__media::after,
  .tarjeta__segmento { transition: none; }
}

/* ----------------------------------------------- 11. Rejillas de contenido */
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--u-2); }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--u); }
.rejilla-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--u); }

/* Rail de datos de un bloque. La ficha o la nota de la seccion se presenta a la
   derecha del contenido, igual que la ficha del roster en el hero, en vez de
   colgar al final de la seccion. El minimo de 372 px es el mismo de
   .hero__rejilla, para que las tres cajas de la portada midan igual. */
.bloque__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(372px, .65fr);
  gap: var(--u-2);
  align-items: start;
}
@media (max-width: 1100px) {
  /* Debajo del corte se apila y la caja vuelve a quedar al final del bloque,
     que es como se lee en telefono. Mismo corte que .hero__rejilla. */
  .bloque__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* Punto de valor numerado */
.punto { border-top: var(--borde); padding-top: var(--u); }
.bloque--tinta .punto { border-top-color: rgba(242,238,229,.3); }
.bloque--tinta .punto h4 { margin-bottom: .5em; font-size: 1.125rem; }
.punto p { font-size: .9375rem; color: var(--gris); line-height: 1.6; }
.bloque--tinta .punto p { color: rgba(242,238,229,.72); }

/* Columna de audiencia (para marcas / para creadores) */
.columna-audiencia {
  border: var(--borde);
  box-shadow: var(--sombra);
  background: var(--ficha);
  padding: var(--u-2) calc(var(--u) + 6px);
}
.columna-audiencia__destino {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vermellon-texto);
  display: block;
  margin-bottom: var(--u);
}
.columna-audiencia h3 { margin-bottom: var(--u); }
.columna-audiencia .rejilla-2 { gap: var(--u); }

/* Lista de vetos */
.lista-veto { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lista-veto li {
  display: flex;
  align-items: baseline;
  gap: .75em;
  padding: .62em 0;
  border-top: 1px dotted var(--regla);
  font-size: .9375rem;
}
.lista-veto li:first-child { border-top: 1.5px solid var(--tinta); }
.lista-veto .cruz {
  flex-shrink: 0;
  color: var(--vermellon-texto);
  transform: translateY(.15em);
}
.bloque--tinta .lista-veto li { border-top-color: rgba(242,238,229,.2); }
.bloque--tinta .lista-veto li:first-child { border-top-color: rgba(242,238,229,.45); }
.bloque--tinta .lista-veto .cruz { color: var(--vermellon-claro); }

.lista-temas { list-style: none; margin: 0; padding: 0; }
.lista-temas li {
  padding: .55em 0;
  border-top: 1px dotted var(--regla);
  font-size: .9375rem;
}
.lista-temas li:first-child { border-top: 1.5px solid var(--tinta); }
.lista-temas li::before {
  content: "— ";
  font-family: var(--mono);
  color: var(--gris);
}

/* ------------------------------------------------ 12. Ficha de creador (pag) */
.miga {
  display: flex;
  align-items: center;
  gap: .6em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gris);
  padding-block: var(--u);
}
.miga a { color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--regla); }
.miga a:hover { color: var(--vermellon-texto); border-bottom-color: currentColor; }

.perfil {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--u-2);
  align-items: start;
  /* La seccion de audiencia que sigue ya trae su propio padding de u-3.
     Sumando los dos, el bloque de perfil quedaba flotando. */
  padding-bottom: var(--u);
}
@media (max-width: 860px) {
  /* minmax(0, 1fr) y no 1fr: con 1fr la columna hereda el min-content de su
     contenido y un nombre largo sacaba el papel fuera del viewport. */
  .perfil { grid-template-columns: minmax(0, 1fr); gap: var(--u); }
}
.perfil__retrato {
  border: var(--borde);
  box-shadow: var(--sombra);
  background: var(--papel);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.perfil__retrato img { width: 100%; height: 100%; object-fit: cover; }
.perfil__retrato picture { display: contents; }
/* Retrato vertical. El contenedor tiene que seguir al recorte que sirve
   <picture>, si no el object-fit recorta de nuevo lo que ya venia recortado.
   La condicion es la misma del <source>, y tiene que quedar identica: 861 px
   es el primer ancho al que .perfil vuelve a dos columnas, y la orientacion
   deja afuera a la tablet parada, que aun siendo ancha se lee como movil. En
   todo lo demas la ficha muestra la cuadrada, el mismo archivo de la tarjeta
   del listado.
   La proporcion es 9:16 para todo el roster y esta escrita una sola vez. Los
   nueve verticales se recortan a esa relacion al convertirlos, asi que ninguna
   ficha declara la suya y el contenedor nunca vuelve a recortar. */
.perfil__retrato--vertical { aspect-ratio: 1 / 1; }
@media (min-width: 861px) and (orientation: landscape) {
  .perfil__retrato--vertical { aspect-ratio: 9 / 16; }
}

/* --------------------------------- 12b. Retrato anclado (tablet apaisada)
   Prueba de concepto sobre una ficha. En la misma vista en que el menu pasa a
   riel, el retrato del creador queda fijo mientras el visitante recorre
   perfil, audiencia, perfil editorial y formatos, y se suelta al terminar
   formatos: de ahi en adelante la pagina se desplaza entera.

   El corte no lo decide un script. `.anclaje` envuelve exactamente esas
   secciones, y una posicion pegajosa nunca sale de su contenedor: donde
   termina el envoltorio, termina el anclaje.

   Fuera de esa vista el envoltorio es `display: contents`, o sea que no
   existe para el layout y el documento queda igual que antes en las 121
   paginas. El retrato se escribe dos veces y solo se ve uno, que es el mismo
   recurso del `Hablemos` del nav.

   `align-items` se queda en su valor por defecto a proposito: con `start` la
   celda del riel mide lo que mide la foto y la posicion pegajosa no tiene por
   donde correrse. */
.anclaje, .anclaje__flujo { display: contents; }
.anclaje__riel { display: none; }

@media (min-width: 881px) and (max-width: 1366px)
   and (orientation: landscape) and (pointer: coarse) {
  .anclaje {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--u-2);
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--canal);
  }
  .anclaje__flujo { display: block; min-width: 0; }
  /* Las secciones ya viven dentro de la columna: su envoltorio no vuelve a
     centrar ni a sumar canal. */
  .anclaje__flujo .env { max-width: none; padding-inline: 0; }
  /* Los dos margenes recortan la celda del riel por arriba y por abajo, y
     con eso recortan el recorrido de la posicion pegajosa sin tocar el
     documento. Arriba, el retrato arranca a la altura del nombre y no del
     borde de la pagina. Abajo, se suelta con la ultima linea de su seccion y
     no con el borde de la seccion, asi la pagina empieza a desplazarse entera
     cuando el visitante termino de leer, y no antes.

     Los 120 px de arriba son el alto de la migaja mas la etiqueta de
     segmento mas la separacion del H1, medidos sobre la ficha y iguales en
     los tres viewports del rango. Si alguno de esos tres cambia de alto, el
     numero se vuelve a medir.

     **Abajo hay dos valores, porque hay dos altos de foto.** El recorte
     vertical mide 498 px y acompana hasta formatos, que deja una cola de
     140 px, o sea el paso u-5. El cuadrado mide 280 y no llega tan lejos:
     sostenido hasta formatos queda flotando en una columna vacia mucho antes
     de que el visitante termine de leer, asi que acompana hasta audiencia,
     que deja una cola de 81 px. Ese numero no cae en la reticula porque la
     nota de audiencia tiene su propio interlineado, y esta medido igual que
     el otro. Cual de los dos se aplica lo dice la clase que emite build.py, y
     el envoltorio cierra en la seccion que le corresponde. */
  .anclaje__riel {
    display: block;
    margin-top: 120px;
  }
  .anclaje--largo .anclaje__riel { margin-bottom: var(--u-5); }
  .anclaje--corto .anclaje__riel { margin-bottom: 81px; }
  /* El tercer recorrido, el de quien ademas tiene bloque de eventos: la foto
     acompana hasta el boton que invita al creador. Su cola son los 56 px del
     pie del tramo mas los 84 del pie del bloque, menos los 5 de la sombra dura
     del boton, que es lo ultimo que se ve. Se mide igual que las otras dos y
     se vuelve a medir si cambia el relleno del tramo o del bloque. */
  .anclaje--eventos .anclaje__riel { margin-bottom: 135px; }
  .anclaje__riel .perfil__retrato { position: sticky; top: var(--u); }
  /* El retrato del flujo se apaga: el que se ve es el del riel. */
  .anclaje__flujo .perfil > div:first-child { display: none; }
  .anclaje__flujo .perfil { grid-template-columns: minmax(0, 1fr); }
  /* **Dentro del anclaje el tramo apila.** La columna del flujo mide 521 px a
     1024 y el riel del h3 se lleva 200 mas el hueco, asi que al contenido le
     quedan 265: la caja de datos pierde sus 460 px de ancho y sus filas parten
     la etiqueta en dos, y un boton con el nombre del creador adentro cae en
     tres lineas. Es el mismo umbral por el que el tramo ya apila por debajo de
     780 px, medido esta vez sobre la columna y no sobre la ventana. Fuera del
     envoltorio el tramo tiene el ancho del `env` entero y conserva sus dos
     columnas. */
  .anclaje__flujo .tramo__rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u);
  }
}

.perfil__nichos {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gris);
  margin-bottom: var(--u);
}
.perfil h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: var(--u); }
.perfil__resumen {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 58ch;
  margin-bottom: var(--u-2);
}
.perfil__canales { display: flex; flex-wrap: wrap; gap: .55em; margin-bottom: var(--u-2); }
.canal {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  border: var(--borde);
  background: var(--ficha);
  padding: .5em .85em .42em;
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 3px 3px 0 var(--tinta);
}
.canal:hover { box-shadow: 4px 4px 0 var(--vermellon); }
.canal b { color: var(--vermellon-texto); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Cita con comillas-pixel */
.cita {
  border-left: 3px solid var(--vermellon);
  padding-left: var(--u);
  margin-block: var(--u-2);
  max-width: 46ch;
}
.cita p {
  font-family: var(--texto);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: 0;
  max-width: none;
}
.cita__fuente {
  display: block;
  margin-top: .9em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gris);
}

/* Seccion interna de la ficha */
.tramo { border-top: var(--borde); padding-block: var(--u-2); }
.tramo__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--u-2);
  align-items: start;
}
@media (max-width: 780px) {
  .tramo__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--u); }
}
.tramo h3 { margin-bottom: var(--u); }
.tramo p { font-size: 1.0625rem; line-height: 1.6; }
.tramo p + p { margin-top: 0; }
/* La ficha de datos de un tramo. Va debajo del parrafo y no en un riel a la
   derecha: la caja mide 342 px y el parrafo de apertura de un bloque tres o
   cuatro lineas, asi que en el riel dejaba entre 230 y 258 px de hueco. Medido
   el 10-09 sobre las 51 fichas. Es el mismo motivo por el que la caja de
   formacion para empresas salio del riel el 9-09. */
.tramo__ficha { margin-top: var(--u-2); max-width: 460px; }
/* La accion de un tramo va debajo de su caja de datos y alineada a su borde
   izquierdo. Suelta en el `env` quedaba a la altura de la columna del h3, con
   la caja flotando a su derecha, y se leia como si perteneciera a otra cosa. */
.tramo__accion { margin-top: var(--u-2); }

.aviso {
  border: 1.5px dashed var(--regla);
  padding: calc(var(--u) - 6px);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--gris);
  text-transform: none;
}
.aviso b { text-transform: uppercase; letter-spacing: .1em; color: var(--tinta); }

/* ---------------------------------------------------------- 13. Pie legal */
.pie {
  background: var(--tinta);
  color: var(--papel);
  padding-block: var(--u-2) var(--u-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M28 0v28M0 28h28' fill='none' stroke='%23F2EEE5' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--u-2);
  padding-bottom: var(--u-2);
  border-bottom: 1px solid rgba(242,238,229,.25);
}
@media (max-width: 860px) {
  .pie__rejilla { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.pie__marca img { height: 26px; width: auto; margin-bottom: var(--u); }
.pie__marca p { font-size: .9375rem; color: rgba(242,238,229,.72); max-width: 34ch; }
.pie h4 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .14em;
  color: rgba(242,238,229,.55);
  margin-bottom: var(--u);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.pie ul a {
  font-size: .9375rem;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pie ul a:hover { border-bottom-color: var(--vermellon-claro); color: var(--vermellon-claro); }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  padding-top: var(--u-2);
  font-family: var(--mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(242,238,229,.55);
}
.pie__legal img { height: 42px; width: auto; opacity: .75; }

/* ------------------------------------------------------------ 14. Utiles */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vermellon);
  color: var(--tinta);
  padding: .8em 1.2em;
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  z-index: 100;
}
.salto-contenido:focus { left: var(--canal); top: 8px; }

.centrado { text-align: center; }
.apilado { display: grid; gap: var(--u); }
.apilado--sm { display: grid; gap: .8em; }
.gris { color: var(--gris); }
.bloque--tinta .gris { color: rgba(242,238,229,.7); }

/* CTA de cierre */
.cierre { text-align: center; padding-block: var(--u-3); }
.cierre h2 { max-width: 26ch; margin-inline: auto; margin-bottom: var(--u); }
.cierre p { max-width: 62ch; margin-inline: auto; }
.cierre__pie {
  margin-top: var(--u);
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(242,238,229,.6);
}
.cierre__pie a { color: var(--vermellon-claro); }

/* ------------------------------------------- 15. Ficha de creador, extras */
/* H2 que termina en el nombre del creador. Mismo cuerpo que el resto de los H2
   de la pagina: bajarlo lo hacia ver como un titular de segunda categoria. Lo
   unico propio es que el nombre no se puede partir, para que nunca vuelva a
   salir "AUDIENCIA DE LEAN / RICCIO". Eso se resuelve con un espacio duro
   dentro del nombre, en build.py, y no con white-space: nowrap, que con un
   nombre de una sola palabra larga ("otromasdesistemas") desbordaba el papel a
   880 px. Si no entra, la linea corta antes del nombre. */
.h2--nombre .serif { overflow-wrap: break-word; }

/* Politica de vetos en modal. El enlace sacaba al visitante de la ficha justo
   cuando estaba evaluando al creador. <dialog> cierra con Escape y con su
   propio boton via form method=dialog, asi que no hace falta JS de cierre. */
.enlace-modal {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--vermellon-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: pointer;
}
.enlace-modal:hover { text-decoration-thickness: 2px; }
.modal {
  border: var(--borde);
  box-shadow: var(--sombra);
  background: var(--ficha);
  color: var(--tinta);
  padding: 0;
  max-width: 620px;
  width: calc(100% - 2 * var(--canal));
  margin: auto;
}
.modal::backdrop { background: rgba(20, 18, 15, .72); }
/* El resumen de privacidad es más alto que la pantalla y sin esto el botón
   Entendido queda fuera, con el diálogo sin scroll: el visitante no puede
   cerrarlo ni marcar la casilla. Se descubrió midiendo, el 10-09. El pie queda
   pegado abajo para que el botón esté siempre a la vista. */
.modal {
  max-height: min(86dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__caja { padding: var(--u-2); }
.modal__caja p { max-width: none; }
.modal__pie {
  margin-top: var(--u-2);
  position: sticky;
  bottom: calc(-1 * var(--u-2));
  padding-block: var(--u) var(--u-2);
  margin-bottom: calc(-1 * var(--u-2));
  background: linear-gradient(to bottom, rgba(251,249,245,0) 0, var(--ficha) 40%);
}

/* Boton al media kit y nota, en la misma linea bajo las dos fichas. */
.tras-fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u);
  margin-top: var(--u);
}
.tras-fichas .nota { margin: 0; }

/* Dentro de un tramo, la lista ya viene separada por el borde del tramo o por
   el parrafo que la precede. Su propia regla superior duplicaba la linea. */
.tramo .lista-temas li:first-child,
.tramo .lista-veto li:first-child { border-top: 0; }

/* Formatos de colaboracion. Lista vertical de puntos dentro de un tramo. Se
   anula la regla del primero por lo mismo que en .lista-temas: cae justo bajo
   el borde del tramo y las dos lineas se leen como una linea doble. */
.formatos { display: grid; gap: var(--u-2); }
.tramo .formatos > .formato:first-child { border-top: 0; padding-top: 0; }
.formato h4 { margin-bottom: .35em; }
.formato .etiqueta { margin-bottom: .35em; }
.formato p + p { margin-top: .5em; }
.formato__nota { font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.5; color: var(--gris); }
.formato__ejemplo a { font-size: .9375rem; }

/* Un destino por renglon, debajo de su linea de entrada. Decision de Eze del
   10-09 mirando eventos.html: los creadores enumerados con comas dentro de un
   parrafo se leian como un bloque roto.

   CADA DESTINO SON DOS RENGLONES, el texto y su flecha debajo, que es el estilo
   de enlace del sitio y no un defecto: la flecha queda fuera del `nowrap` a
   proposito y los svg del reset son `display: block`. Confirmado por Eze el
   10-09. Lo que separa un destino del siguiente es el margen del `li`, y por
   eso los dos renglones de un mismo enlace tienen que quedar mas juntos entre
   si que de los del enlace de abajo.

   Sin punteados ni bullet: no es una lista de datos como .lista-temas, son
   destinos, y el guion largo de esa clase es el pendiente P3.4. */
.lista-encaja { list-style: none; margin: .5em 0 0; padding: 0; }
.lista-encaja li + li { margin-top: .7em; }
.lista-encaja a { font-size: .9375rem; }
/* La nota que sigue a la lista necesita su aire: `.formato p + p` no la alcanza
   porque el hermano anterior es un ul y no un parrafo. */
.lista-encaja + .formato__nota { margin-top: 1em; }

/* Remate serif del H1 de ficha. En el hero de portada el remate es del tamano
   del titular; aqui el nombre manda y el remate queda como bajada. */
.perfil h1 .serif {
  display: block;
  font-size: .52em;
  line-height: 1.1;
  color: var(--gris);
  margin-top: .2em;
}
.perfil__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u);
  margin-bottom: var(--u-2);
}
.perfil__acciones + .cita { margin-top: 0; }

/* Preguntas frecuentes. Las respuestas van visibles: el marcado FAQPage
   describe lo que la pagina muestra, nunca contenido plegado ni oculto. */
.faq { max-width: 80ch; }
/* Una regla que no separa nada no se dibuja. El ultimo item llevaba regla
   inferior, y en las 52 paginas con preguntas lo que seguia era el final de la
   seccion: la linea quedaba sola, cerrando contra el aire. Cada item se separa
   del anterior con su regla superior, que es lo unico que hace falta.
   `.lista-salidas` es otra cosa y se queda como esta: esa si es una lista
   acotada, con regla arriba en el `ul` y una por fila, y se lee como tabla. */
.faq__item { border-top: var(--borde); padding-block: var(--u); }
.faq__p {
  text-transform: none;
  letter-spacing: -.01em;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  margin-bottom: .6em;
  max-width: 46ch;
}
.faq__r p {
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.62;
  max-width: 72ch;
}

/* ------------------------------------------------------- 14. Formularios
   Desde el 8 de septiembre los CTA abren un formulario en vez del cliente de
   correo. Los campos son de esquina viva, igual que todo el sistema: la
   pildora esta prohibida, asi que aqui no hay border-radius en ninguna parte.
   El foco dibuja la sombra dura, que es el unico movimiento permitido porque
   responde a una accion del visitante. */
.formulario {
  margin-top: var(--u-2);
  padding-top: var(--u);
  border-top: 1px solid var(--regla);
}
.formulario__campos {
  display: grid;
  /* Dos columnas fijas y no auto-fit: el ancho de cada campo lo decide el dato
     que se pide, no el espacio que sobra. Un campo ocupa el ancho completo
     salvo que lleve .campo--medio. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u) var(--u);
}
.campo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* El campo es un <p>, y la regla general de parrafo lo cortaba en 68ch: un
     campo de ancho completo medía 662 px dentro de una rejilla de 700. */
  max-width: none;
}
.campo--medio { grid-column: auto; }
@media (max-width: 620px) {
  .formulario__campos { grid-template-columns: minmax(0, 1fr); }
  .campo--medio { grid-column: 1 / -1; }
}

/* La etiqueta va arriba y siempre visible. Un placeholder que hace de etiqueta
   desaparece al escribir y deja el formulario sin encabezados. */
.campo__etq {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gris);
  margin-bottom: .7em;
}
.campo__opcional {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--texto);
  font-size: .8125rem;
  color: var(--gris);
}
.campo__control {
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--ficha);
  border: var(--borde);
  border-radius: 0;
  padding: .8em .85em;
  width: 100%;
  box-shadow: none;
  transition: box-shadow .12s ease;
}
input.campo__control, select.campo__control { height: var(--u-2); }
textarea.campo__control { resize: vertical; min-height: var(--u-3); }
.campo__control:hover { box-shadow: var(--sombra-sm); }
.campo__control:focus { box-shadow: var(--sombra-sm); }
/* :user-invalid y no :invalid: con :invalid todo campo obligatorio aparece en
   rojo antes de que el visitante haya escrito una sola letra. */
.campo__control:user-invalid { border-color: var(--vermellon-texto); }
/* El campo cuyo texto describe una campana que la casa no toma. Lo marca el
   JavaScript de la lectura del pago, con el mismo borde del campo invalido. */
.campo__control[aria-invalid="true"] { border-color: var(--vermellon-texto); }
.campo__ayuda {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
  margin-top: .5em;
}

/* El aviso del unico campo que puede impedir un envio. No usa .aviso, el
   recuadro punteado, que quedo reservado para la advertencia de dato que
   falta: esto no es un dato ausente, es una condicion de la casa. Se dibuja
   con una regla al costado, que es la marca editorial de la cita. */
.campo__veto {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--vermellon-texto);
  margin-top: .7em;
  padding-left: .8em;
  border-left: 2px solid var(--vermellon-texto);
}
.campo__veto[hidden] { display: none; }

/* El aviso que informa y no detiene. Es el de la anticipacion de un evento: la
   fecha puede llegar corta y la propuesta se envia igual, porque esa fecha
   puede estar libre. Va en gris meta y con la regla del punteado, y no en
   vermellon, que en este sistema es la senal de que algo se freno. */
.campo__veto--blando { color: var(--gris); border-left-color: var(--regla); }

/* El selector nativo dibuja su propia flecha y cambia de forma en cada sistema
   operativo. Se apaga y se dibuja una en CSS, con el mismo criterio del
   subconjunto latin, que no trae el caracter. */
.campo__caja { position: relative; display: block; }
select.campo__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6em;
  /* La opcion elegida se recorta cuando no entra en el control cerrado, y en
     una columna angosta eso pasa con casi cualquier lista. Con puntos
     suspensivos el corte se lee como una abreviatura y no como una palabra
     partida. Medido el 9 de septiembre: la opcion mas larga de `objetivo` se
     pasa 61 px incluso a 1600, asi que esto aplica en todos los anchos. */
  text-overflow: ellipsis;
}
.campo__caja::after {
  content: "";
  position: absolute;
  right: 1.1em;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--tinta);
  border-bottom: 1.5px solid var(--tinta);
  transform: rotate(45deg);
  pointer-events: none;
}

/* La trampa del correo basura. Oculta por CSS y fuera del tabulador: un robot
   que completa todos los campos la llena, y enviar.php descarta el envio. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u);
  margin-top: var(--u);
}
button.btn {
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
/* El boton apagado cuando el modelo de pago declarado es 100 % variable. Sin
   sombra y sin desplazamiento: lo unico que se mueve en el sitio es lo que
   responde al cursor, y este dejo de responder. */
button.btn[disabled] {
  cursor: not-allowed;
  opacity: .4;
  box-shadow: none;
  transform: none;
}
button.btn[disabled]:hover { box-shadow: none; transform: none; }
.formulario__pie .nota { margin: 0; max-width: 42ch; }

/* El reto de Turnstile, dentro del pie del formulario y arriba del boton.
   Ocupa su propio renglon: al lado del boton empuja la nota a un tercer
   renglon y deja el pie desparejo en los anchos intermedios. La altura minima
   reserva el lugar del marco antes de que cargue, para que el boton no salte
   hacia abajo cuando el widget aparece. Lo que hay dentro lo dibuja Cloudflare
   en un marco de 300 x 65 px y no se puede estilar desde aqui. */
.reto { flex: 0 0 100%; min-height: 65px; }

/* Las salidas de la pagina de gracias. Ahi ofrecer por donde seguir si tiene
   sentido: el envio ya ocurrio y no hay ninguna decision pendiente. */
.lista-salidas {
  list-style: none;
  margin: var(--u-2) 0 0;
  padding: 0;
  border-top: 1px solid var(--regla);
  max-width: 46ch;
}
.lista-salidas li { border-bottom: 1px solid var(--regla); }
.lista-salidas a {
  display: block;
  padding: .8em 0;
  font-family: var(--mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
}
.lista-salidas a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ------------------------------------------------- 15. Páginas legales */
/* El cuerpo de una cláusula es el texto principal de la página y no una nota al
   margen, así que .punto recupera el tamaño y el color del párrafo. Se reusa
   .punto en vez de inventar un componente: la regla superior y el título sobre
   ella son exactamente los mismos, y lo único que cambia es el peso del cuerpo.
   La lista va sin bullet y con punteado: el guion largo de .lista-temas es el
   pendiente P3.4 y no se extiende a cinco páginas nuevas. */
.legal { display: grid; gap: var(--u); }
.legal .punto h4 { font-size: 1.25rem; margin-bottom: .6em; }
.legal .punto p { font-size: 1rem; color: var(--tinta); }
.legal .punto p + p { margin-top: 0; }
.legal .punto ul {
  list-style: none;
  margin: 0 0 var(--u);
  padding: 0;
  max-width: var(--ancho-texto);
}
.legal .punto ul:last-child { margin-bottom: 0; }
.legal .punto li {
  padding: .55em 0;
  border-top: 1px dotted var(--regla);
  font-size: 1rem;
  line-height: 1.6;
}
.legal .punto li b { font-weight: 700; }
/* El índice de la página. Reusa .lista-salidas, que es la lista acotada que se
   lee como tabla, y la pasa a dos columnas: en una sola, quince filas ocupan
   una pantalla entera antes de la primera cláusula. */
/* Dentro del mismo bloque que el hero, y no en una sección propia: dos
   secciones seguidas sumaban el relleno inferior de una y el superior de la
   otra, y dejaban 196 px de papel entre la bajada y el índice. */
.legal-indice__caja { margin-top: var(--u-2); }
.legal-indice {
  margin-top: var(--u);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--u-2);
  max-width: none;
}
@media (max-width: 700px) {
  .legal-indice { grid-template-columns: minmax(0, 1fr); }
}

/* La casilla de consentimiento. El control va a la izquierda y el texto a su
   derecha, al revés de .campo: una casilla sin su texto al lado no se
   entiende, y ese texto es justamente la parte que hay que leer. */
.casilla {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9em;
  align-items: start;
  margin: 0;
}
.casilla__control {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--tinta);
  background: var(--ficha);
  cursor: pointer;
  position: relative;
}
.casilla__control:hover { box-shadow: var(--sombra-sm); }
.casilla__control:focus-visible { outline: 2px solid var(--vermellon-texto); outline-offset: 2px; }
.casilla__control:checked { background: var(--vermellon); }
/* La marca de verificación se dibuja en CSS. El subconjunto latin no trae el
   glifo, y el que trae el sistema operativo cambia de forma en cada uno. */
.casilla__control:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 8px;
  height: 13px;
  border: solid var(--tinta);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(40deg);
}
.casilla__control:user-invalid { border-color: var(--vermellon-texto); }
.casilla__texto { font-size: .9375rem; line-height: 1.55; color: var(--tinta); }
.casilla__texto .campo__opcional { display: block; margin-top: .2em; }
/* El botón que abre el resumen. Es un botón porque abre un diálogo, y se lee
   como un enlace porque el visitante lo lee dentro de una frase. */
.enlace-modal {
  font: inherit;
  color: var(--vermellon-texto);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.enlace-modal:hover { text-decoration-thickness: 3px; }

/* La franja legal del pie. Va en la misma base que el copyright, a su
   izquierda, para no abrir una quinta columna en la rejilla. */
.pie__legales {
  display: flex;
  flex-wrap: wrap;
  gap: .5em var(--u);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__legales a { color: inherit; text-decoration: none; }
.pie__legales a:hover { color: var(--papel); text-decoration: underline; }

@media print {
  body::before, .nav, .barra-movil, .cierre { display: none; }
  body { background: #fff; }
  .tarjeta, .ficha, .columna-audiencia { box-shadow: none; }
  /* En papel no hay cursor que devuelva el color, asi que la foto se imprime
     como esta: sin duotono y sin la barra, que ahi solo gasta tinta. */
  .tarjeta__media img { filter: none; }
  .tarjeta__media::after { display: none; }
}