/* carreno.com
   La paleta sale medida del propio anuncio. El tono que más ocupa el cuadro es el
   gris del fondo de estudio (36% del video), y el negro es la playera y la banda
   del pie. Por eso la página va en claro: es más fiel al anuncio que el negro, y
   deja el amarillo trabajando como señal en lugar de como resaltador.

   Contraste calculado con la fórmula de luminancia relativa, contra los dos
   fondos que usa la página. El mínimo del estándar es 4.5 a 1, y lo verifica
   sola la prueba pruebas/test_contraste.py, contra estos mismos valores:

     tinta   #16181C  sobre papel #EAE8E3 = 14.52 a 1
     tinta-2 #55595F  sobre papel #EAE8E3 =  5.75 a 1
     tinta-3 #5E6166  sobre papel #EAE8E3 =  5.08 a 1
     tinta   #16181C  sobre hondo #DFDCD5 = 12.98 a 1
     tinta-2 #55595F  sobre hondo #DFDCD5 =  5.15 a 1
     tinta-3 #5E6166  sobre hondo #DFDCD5 =  4.54 a 1
     tinta   #16181C  sobre señal #F9DF18 = 13.20 a 1
*/

@font-face {
  font-family: "Archivo Ancha";
  src: url("tipos/archivo.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("tipos/literata.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #EAE8E3;
  --papel-hondo: #DFDCD5;
  --tinta: #16181C;
  --tinta-2: #55595F;
  --tinta-3: #5E6166;
  --senal: #F9DF18;
  --linea: #C8C4BA;

  --display: "Archivo Ancha", "Arial Narrow", Helvetica, Arial, sans-serif;
  --cuerpo: "Literata", Georgia, "Times New Roman", serif;

  --medida: 40rem;
  --aire: clamp(3.5rem, 9vw, 6.5rem);
  --margen: clamp(1.25rem, 5vw, 2.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums tabular-nums;
  padding-bottom: 5.5rem;
}

/* ---------- tipografía ---------- */

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 8.6vw, 3.05rem);
  margin-bottom: 1.5rem;
}

/* El resaltador amarillo es el único lugar donde el color del anuncio grita, y va
   por detrás de la letra, como el marcador de un documento revisado a mano. Se
   pinta con un degradado sobre el elemento en línea, para que siga el ancho real
   de cada renglón en lugar del de la caja, y se repita al partirse en dos. */
h1 em {
  font-style: normal;
  color: var(--tinta);
  background-image: linear-gradient(
    to top,
    var(--senal) 0.06em,
    var(--senal) 0.34em,
    transparent 0.34em
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h2 {
  font-size: clamp(1.6rem, 5.5vw, 2.35rem);
  margin-bottom: 1.75rem;
  max-width: 22ch;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rotulo::before {
  content: "";
  width: 1.6rem;
  height: 3px;
  background: var(--senal);
  flex: none;
}

/* ---------- portada ---------- */

.portada {
  padding: 0 0 var(--aire);
}

.portada-retrato img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
  object-position: 50% 22%;
  background: #989898;
  filter: grayscale(1) contrast(1.04);
}

.portada-texto {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 2.5rem var(--margen) 0;
}

.entrada {
  font-size: 1.1875rem;
  color: var(--tinta-2);
  margin: 0 0 2rem;
  max-width: 34ch;
}

/* ---------- secciones ---------- */

/* Cada sección es una rejilla de una sola columna centrada, en lugar de centrar
   hijo por hijo con márgenes automáticos. Ese método fallaba en silencio: basta
   que un hijo declare su propio `margin` (el rótulo, el renglón de cuenta) o que
   sea `inline-block` (los botones) para que se escape a la izquierda y quede
   suelto, lejos del resto. Con la rejilla, todo cae dentro de la misma columna
   sin que cada elemento tenga que acordarse de centrarse. */
main > section {
  display: grid;
  grid-template-columns: minmax(0, var(--medida));
  justify-content: center;
  justify-items: stretch;
  padding: var(--aire) var(--margen);
}

/* Los botones se ajustan a su texto y se alinean con el arranque de la columna. */
main > section > .boton {
  justify-self: start;
}

.diagnostico,
.oferta,
.cetys {
  background: var(--papel-hondo);
}

/* El renglón que cierra una sección: el criterio duro, o la promesa de que el
   documento se queda con el cliente pase lo que pase. Va con más aire arriba
   para que se lea como conclusión y jamás como un párrafo más de la lista. */
.remate {
  margin: 1.75rem 0 2rem;
  max-width: 46ch;
}

/* La capacidad va en su propio renglón, porque en el remate se perdía. */
.capacidad {
  margin: -0.75rem 0 2rem;
  max-width: 46ch;
  padding-left: 0.9rem;
  border-left: 3px solid var(--senal);
}

/* ---------- el diagnóstico, que es el corazón de la página ---------- */

.lista-sintomas {
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--linea);
}

.sintoma {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}

/* La casilla de verdad queda escondida pero viva: sigue recibiendo el teclado y
   la anuncia el lector de pantalla. Lo que se ve es .marca, que la retrata.
   Va anclada a su propia etiqueta para que jamás se despegue al desplazar. */
.sintoma input {
  position: absolute;
  left: 0.25rem;
  top: 1.25rem;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.marca {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.15rem;
  border: 2px solid var(--tinta);
  background: transparent;
  position: relative;
  transition: background-color 120ms ease;
}

.marca::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.12rem;
  width: 0.42rem;
  height: 0.78rem;
  border: solid var(--tinta);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 140ms cubic-bezier(0.2, 1.4, 0.5, 1);
}

.sintoma input:checked ~ .marca {
  background: var(--senal);
}

.sintoma input:checked ~ .marca::after {
  transform: rotate(45deg) scale(1);
}

.sintoma input:focus-visible ~ .marca {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

.sintoma-texto {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.sintoma input:checked ~ .sintoma-texto {
  color: var(--tinta);
}

.cuenta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
  min-height: 1.6em;
}

/* ---------- qué hago ---------- */

.lineas-servicio {
  margin: 0 0 2.25rem;
}

.linea {
  padding: 1.3rem 0;
  border-top: 1px solid var(--linea);
}

.linea:last-child {
  border-bottom: 1px solid var(--linea);
}

.linea dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
}

.linea dd {
  margin: 0;
  color: var(--tinta-2);
}

/* ---------- casos ---------- */

.caso {
  padding: 1.9rem 0;
  border-top: 1px solid var(--linea);
}

.caso:last-of-type {
  border-bottom: 1px solid var(--linea);
}

.caso-giro {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0.35rem 0 0.9rem;
}

.antes {
  margin: 0 0 0.6rem;
  color: var(--tinta-2);
}

.ahora {
  margin: 0;
}

.dato {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  box-shadow: inset 0 -0.45em 0 var(--senal);
}

.mas-casos {
  margin: 2rem 0 2.25rem;
  color: var(--tinta-2);
}

/* ---------- trayectoria ---------- */

.hechos {
  margin: 0;
}

.hecho {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--linea);
}

.hecho:last-child {
  border-bottom: 1px solid var(--linea);
}

.hecho dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1;
}

.hecho dd {
  margin: 0;
  color: var(--tinta-2);
}

/* ---------- las pruebas fotográficas ---------- */

/* Rejilla contenida en la misma columna que todo lo demás. Antes esta banda se
   desplazaba a lo ancho y se salía hasta el borde derecho de la pantalla: se veía
   como si las fotos se hubieran escapado del resto del contenido. Alinear pesa
   más que enseñar una foto de más. */
.entrada-seccion {
  color: var(--tinta-2);
  margin: -0.75rem 0 2rem;
  max-width: 38ch;
}

.rejilla-pruebas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
}

.prueba {
  margin: 0;
}

.prueba img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
}

.prueba figcaption {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

/* ---------- método ---------- */

.puntos {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}

.puntos li {
  padding: 0.95rem 0 0.95rem 1.9rem;
  border-top: 1px solid var(--linea);
  position: relative;
}

.puntos li:last-child {
  border-bottom: 1px solid var(--linea);
}

.puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--senal);
}

/* ---------- bloque del CETYS ---------- */

.cetys p {
  color: var(--tinta-2);
  max-width: 36ch;
  margin: 0 0 2rem;
}

/* ---------- botones ---------- */

.boton {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--tinta);
  background: var(--senal);
  padding: 1.05rem 1.9rem;
  border: 2px solid var(--tinta);
  box-shadow: 5px 5px 0 var(--tinta);
  transition: transform 110ms ease, box-shadow 110ms ease;
}

.boton:hover,
.boton:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--tinta);
}

.boton:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--tinta);
}

.boton-linea {
  background: transparent;
}

.boton-fijo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  background: var(--senal);
  border-top: 2px solid var(--tinta);
  padding: 1.05rem 1rem calc(1.05rem + env(safe-area-inset-bottom));
}

a:focus-visible,
.boton:focus-visible,
.boton-fijo:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

/* ---------- pie ---------- */

footer {
  max-width: var(--medida);
  margin: 0 auto;
  padding: var(--aire) var(--margen) 3rem;
  border-top: 1px solid var(--linea);
}

footer p {
  margin: 0 0 0.35rem;
}

.pie-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.pie-lugar {
  color: var(--tinta-2);
  margin-bottom: 1.1rem;
}

footer a {
  color: var(--tinta);
  text-decoration-color: var(--linea);
  text-underline-offset: 0.25em;
  display: inline-block;
  padding: 0.75rem 0;
}

.solo-mensajes {
  margin-top: 1.1rem;
  color: var(--tinta-2);
  max-width: 34ch;
}

.aviso {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--tinta-3);
}

.sin-guion {
  margin: 0;
  padding: 1.25rem var(--margen);
  background: var(--senal);
  color: var(--tinta);
  text-align: center;
}

/* ---------- pantallas anchas ---------- */

@media (min-width: 56rem) {
  body {
    font-size: 1.1875rem;
    padding-bottom: 0;
  }

  .boton-fijo {
    display: none;
  }

  /* El retrato queda a ras del borde izquierdo del bloque, sin margen que lo
     despegue, y el texto respira a su lado. Es la composición de una portada de
     revista: la persona primero, la frase junto a ella. */
  .portada {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: 76rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen) var(--aire) 0;
  }

  .portada-retrato img {
    max-height: 82vh;
    aspect-ratio: 3 / 4;
  }

  .portada-texto {
    max-width: 37rem;
    margin: 0;
    padding: 0;
  }

  .entrada {
    font-size: 1.25rem;
  }

  .hecho {
    grid-template-columns: 11rem 1fr;
    gap: 1.75rem;
    align-items: baseline;
  }

  .hecho dt {
    font-size: 1.9rem;
    text-align: right;
  }

  .sintoma-texto {
    font-size: 1.15rem;
  }

  .rejilla-pruebas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Las cuatro cosas que trae el entregable. Iban en un solo párrafo y en el
   teléfono se leían como un muro de once renglones; dichas como lista, se ve
   de un vistazo que son cuatro entregas concretas. */
.entregable {
  margin: 0.85rem 0;
  padding-left: 1.15rem;
}

.entregable li {
  margin-bottom: 0.5rem;
}

/* El renglón que contesta "¿y cuánto cuesta?" en el momento en que la persona
   se lo pregunta, que es al terminar de marcar sus síntomas. Antes esa
   respuesta vivía quince pantallas más abajo. */
.puente {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: 1rem 0;
  margin: 0 0 1.75rem;
  color: var(--tinta-2);
  max-width: 44ch;
}

.puente a {
  color: var(--tinta);
  text-underline-offset: 3px;
}

/* El renglón para quien escaneó porque reconoció la cara. Su bloque vive al
   final de la página, así que aquí se le avisa que existe. Va discreto a
   propósito: el público principal del anuncio pagado es quien llega sin
   conocerlo, y a esa persona este renglón le cuesta un vistazo. */
.guino {
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
  color: var(--tinta-2);
}

.guino a {
  color: var(--tinta);
  text-underline-offset: 3px;
}

/* Las dos fotos del bloque del CETYS, en pareja a propósito: una en camiseta y
   otra de traje, que es el contraste que cuenta dónde anduvo. Van chicas porque
   son un guiño para quien ya lo conoce, y jamás una prueba más que deba
   competir con las seis de arriba. */
.fotos-cetys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0 2rem;
  max-width: 26rem;
}

.fotos-cetys img {
  display: block;
  width: 100%;
  height: auto;
}

.fotos-cetys figure {
  margin: 0;
}

.fotos-cetys figcaption {
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--tinta-2);
  margin-top: 0.55rem;
}


/* La frase que anuncia una lista va pegada a ella, y jamás al final de un
   párrafo largo donde llega desgastada. Sin esto, los cuatro títulos se leen
   como bloques sueltos en vez de como las cuatro clases de una clasificación. */
.entrada-lista {
  margin: 0 0 0.9rem;
  max-width: 44ch;
}

/* El enlace al otro idioma. Va arriba a la derecha y discreto a propósito:
   la puerta principal es el español, que es la que recibe el QR del anuncio.
   Se queda fijo al desplazarse en pantalla ancha, y en el teléfono viaja con
   la página, para dejarle la esquina al botón fijo de WhatsApp. */
.idioma {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  padding: 0.85rem var(--margen);
  border-bottom: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  background: var(--papel);
}

.idioma:hover,
.idioma:focus-visible {
  color: var(--tinta);
  background: var(--senal);
  border-color: var(--tinta);
}

@media (min-width: 60rem) {
  .idioma {
    position: fixed;
  }
}


/* ---------- preguntas frecuentes ----------
   Van hasta el final por recomendación de Michael Montejano, del 7 de
   septiembre de 2026: quien escanea el QR junto a la cancha se va mucho antes,
   y esta sección le habla a otro lector y a las IA, que contestan citando
   trozos. Por eso cada respuesta se escribe para entenderse sola.

   Cerradas de entrada, menos la primera: abiertas, diez respuestas alargarían
   la página por encima de lo que ya mide. */
.preguntas details {
  border-top: 1px solid var(--linea);
}

.preguntas details:last-of-type {
  border-bottom: 1px solid var(--linea);
}

.preguntas summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  padding: 1.05rem 2.4rem 1.05rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

/* La flecha se dibuja con dos bordes girados, para gastar cero bytes de imagen. */
.preguntas summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--tinta-3);
  border-bottom: 2px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.preguntas details[open] summary::after {
  transform: rotate(225deg);
  top: 1.6rem;
}

.preguntas summary:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

/* La respuesta va en la tinta del cuerpo, y jamás en el gris de apoyo: es el
   contenido por el que existe la sección, y es lo que se lee completo. */
.preguntas .respuesta {
  margin: 0 0 1.4rem;
  max-width: 62ch;
}