/*
 * Taraceista — sistema visual
 *
 * Tres reglas que no se rompen:
 *
 *   1. CERO sombras. La profundidad se hace con contraste y con filetes de
 *      1px, como en una revista. Una sombra es la forma perezosa de separar
 *      dos cosas.
 *   2. Nada de fondos crema. Negro casi puro, hueso para el texto y un solo
 *      acento saturado.
 *   3. Los bordes son rectos. Las esquinas redondeadas suavizan, y esto no
 *      quiere ser suave.
 *
 * La geometria de la taracea entra como estructura -rejilla, filetes,
 * proporciones- y no como adorno de fondo.
 */

:root {
  --negro: #0a0a0b;
  --negro-2: #121215;
  --negro-3: #1c1c20;
  --linea: #2a2a30;
  --linea-viva: #3d3d45;
  --hueso: #f2f0ed;
  --gris: #8b8783;
  --acento: #e4572e;
  --acento-apagado: #b8401f;

  --display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --texto: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  --ancho: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.envoltorio { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }

h1, h2, h3 { font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; }
h1, h2 { font-family: var(--display); font-weight: 500; font-variation-settings: 'opsz' 96; }
h1 { font-size: clamp(3rem, 8vw, 6.6rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -0.035em; }
h3 { font-family: var(--texto); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

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

.etiqueta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.etiqueta--acento { color: var(--acento); }

/* ---------- Botones: rectangulares, sin sombra ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent;
  padding: 15px 26px;
  font: 500 0.94rem/1 var(--texto);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.boton--fuerte { background: var(--acento); color: #fff; }
.boton--fuerte:hover { background: var(--acento-apagado); }
.boton--linea { border-color: var(--linea-viva); color: var(--hueso); background: none; }
.boton--linea:hover { border-color: var(--hueso); }

/* ---------- Cabecera con selector de idioma ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 11, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 24px; height: 62px; }
.marca { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 500; font-size: 1.24rem; letter-spacing: -0.04em; }
.navegacion { display: none; gap: 28px; font-size: 0.88rem; color: var(--gris); }
.navegacion a:hover { color: var(--hueso); }
@media (min-width: 940px) { .navegacion { display: flex; margin-left: 20px; } }

/* Los idiomas mandan arriba, a la derecha: es lo primero que busca alguien
   que no lee en castellano. */
/*
 * LOS IDIOMAS: DESPLEGABLE POR DEFECTO, FILA SOLO DONDE SOBRA SITIO.
 *
 * La fila de seis codigos mide 230 px, y con la marca al lado pedia unos 400.
 * Medido en frio cabia por siete pixeles a 400... y en el navegador de Jesus
 * no cabia. Siete pixeles de margen es apostar a que la tipografia, el zoom y
 * el idioma midan siempre lo mismo en cualquier aparato, y esa apuesta se
 * pierde: cuando se pierde, la fila desborda y la pagina ENTERA se puede
 * mover de lado.
 *
 * Asi que se le da la vuelta: el desplegable es lo normal y la fila es la
 * excepcion, y solo aparece a partir de 1100 px, donde sobran mas de 150 px.
 * Ahi ya no hay apuesta que perder.
 *
 * Va en un <details> y no en un menu de JavaScript: se abre y se cierra sin
 * una linea de guion, con el teclado, y funciona aunque el guion no cargue.
 */
.idiomas-menu { margin-left: auto; position: relative; }
.idiomas-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--linea); padding: 6px 10px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--gris); text-transform: uppercase;
}
.idiomas-menu summary::-webkit-details-marker { display: none; }
.idiomas-menu summary::after { content: ''; width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--gris); }
.idiomas-menu summary:hover { color: var(--hueso); border-color: var(--linea-viva); }
.idiomas-menu[open] summary { color: var(--hueso); border-color: var(--hueso); }
.idiomas-menu__lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: grid; min-width: 132px;
  background: var(--negro-2); border: 1px solid var(--linea-viva);
}
.idiomas-menu__lista a {
  padding: 10px 14px; font-family: var(--mono); font-size: 0.74rem;
  color: var(--gris); border-bottom: 1px solid var(--linea);
}
.idiomas-menu__lista a:last-child { border-bottom: 0; }
.idiomas-menu__lista a:hover { color: var(--hueso); background: var(--negro-3); }
.idiomas-menu__lista a[aria-current] { color: var(--acento); }

/*
 * CUAL DE LOS DOS SE VE LO DECIDE UNA MEDICION, NO UN ANCHO ESCRITO A MANO.
 *
 * Primero se probo un corte en 400 px y en el navegador de Jesus no cabia.
 * Despues uno en 1100, y salia el desplegable con 600 px de sitio libre. Las
 * dos veces el error fue el mismo: adivinar cuanto mide una fila de texto.
 *
 * No se puede adivinar. Mide distinto con otra tipografia, con el zoom
 * cambiado, con la letra del sistema mas grande, y con otro idioma. Asi que
 * el guion la mide de verdad y pone `--fila` en la cabecera si cabe.
 *
 * POR DEFECTO, EL DESPLEGABLE. Si el guion no corre, se ve el desplegable, que
 * funciona igual y nunca desborda. La fila entera es la mejora, no la base:
 * al reves, un fallo del guion dejaria la pagina moviendose de lado.
 *
 * Va con `.cabecera` delante porque la regla de `.idiomas` que le pone
 * `display: flex` esta MAS ABAJO en esta hoja y ganaria por orden. Es el mismo
 * tropiezo que ya paso con `.legal--ancho`.
 */
.cabecera .idiomas { display: none; }
.cabecera--fila .idiomas-menu { display: none; }
.cabecera--fila .idiomas { display: flex; }

.idiomas { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--linea); }

/*
 * ARRIBA MANDAN LOS IDIOMAS, ABAJO MANDA EL BOTON.
 *
 * En la portada el boton de la cabecera sobra: justo debajo hay uno grande
 * diciendo lo mismo, y dos botones iguales a diez centimetros compiten entre
 * ellos. Lo que si hace falta ahi es el selector de idioma, que es lo primero
 * que busca quien no lee en castellano.
 *
 * En cuanto se pasa la portada se invierte: el boton grande ya no esta a la
 * vista y el de la cabecera pasa a ser el unico sitio donde apuntarse, y el
 * idioma ya lo eligio quien lo tuviera que elegir.
 *
 * Se relevan con una transicion y ocupando el MISMO hueco, para que la fila no
 * de un salto al cambiar.
 */
/*
 * EN MOVIL, AL BAJAR SE QUEDA SOLO LA ESTRELLA.
 *
 * Medido: a 360 y 390 px la fila desbordaba. La marca ocupa 119 px y el boton
 * 187, y entre los dos se comen la fila entera: el boton llegaba justo al
 * borde derecho de la pantalla y la cabecera se descuadraba al bajar.
 *
 * Esconder el nombre libera 88 px y cabe todo con aire. Y no se pierde nada:
 * arriba del todo, que es cuando alguien esta averiguando donde ha entrado, el
 * nombre se ve entero; abajo ya sabe donde esta y lo que hace falta es el
 * boton.
 *
 * El enlace SIGUE llamandose Taraceista para un lector de pantalla: el nombre
 * va tambien en el `aria-label` del logotipo, asi que esto solo lo esconde de
 * la vista.
 */
/*
 * SOLO DONDE NO CABE, y no siempre.
 *
 * Medido: la marca con su nombre ocupa 119 px y el boton de alta 187, mas el
 * hueco entre ellos y el margen del envoltorio. Eso pide unos 375 px de
 * pantalla. Por encima cabe todo y el nombre se queda; por debajo hay que
 * elegir, y entre el nombre y el boton gana el boton.
 *
 * El corte va en 380 para tener un dedo de margen: justo en el limite, una
 * tipografia que carga tarde o un idioma con la palabra mas larga vuelven a
 * desbordar.
 */
@media (max-width: 380px) {
  /*
   * Por debajo de 380 el nombre no cabe CON NADA: ni con el selector de
   * idiomas arriba (seis codigos son 180 px) ni con el boton abajo (187). Asi
   * que ahi se va siempre, no solo al bajar.
   *
   * Por encima de 380 se queda puesto en los dos estados, que era el fallo de
   * la primera version: lo quitaba por sistema aunque sobrara sitio.
   */
  .marca__nombre { display: none; }
  /* Y los idiomas, mas apretados: a ese ancho cada pixel cuenta. */
  .idiomas a { padding: 5px 7px; font-size: 0.66rem; }
}

/* Y por si aun asi no cupiera, que el boton ceda antes que romper la fila. */
.cabecera__cambio { min-width: 0; }
.cabecera .boton { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (min-width: 720px) { .cabecera .boton { display: inline-flex; } }

.cabecera__cambio { margin-left: auto; display: grid; align-items: center; justify-items: end; }
.cabecera__cambio > * { grid-area: 1 / 1; transition: opacity .22s ease, transform .22s ease; }
.cabecera__cambio .idiomas { margin-left: 0; }
.cabecera__cambio .boton { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* Los DOS selectores de idioma se van al bajar, la fila y el desplegable.
   La primera version solo nombraba a la fila, asi que en un movil (donde lo
   que se ve es el desplegable) el boton aparecia ENCIMA del desplegable y se
   veian los dos pisandose. */
.cabecera--rodando .idiomas,
.cabecera--rodando .idiomas-menu { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* Y si estaba abierto al empezar a bajar, se cierra: un menu invisible pero
   abierto sigue robando el foco al tabular. */
.cabecera--rodando .idiomas-menu__lista { display: none; }
.cabecera--rodando .boton { opacity: 1; transform: none; pointer-events: auto; }

/* Sin JavaScript no se pone nunca `--rodando`, asi que se verian los idiomas
   y el boton escondido para siempre. Se le devuelve el boton. */
.sin-guion .cabecera__cambio .boton { opacity: 1; transform: none; pointer-events: auto; }
.sin-guion .cabecera__cambio { grid-auto-flow: column; gap: 16px; }
.sin-guion .cabecera__cambio > * { grid-area: auto; }

/* Quien pide que no se le muevan las cosas, que no se le muevan. */
@media (prefers-reduced-motion: reduce) {
  .cabecera__cambio > * { transition: none; }
}
.idiomas a {
  padding: 7px 11px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris);
  border-right: 1px solid var(--linea);
}
.idiomas a:last-child { border-right: 0; }
.idiomas a:hover { color: var(--hueso); background: var(--negro-2); }
.idiomas a[aria-current='true'] { background: var(--hueso); color: var(--negro); }
/*
 * EN MOVIL EL BOTON TAMBIEN SALE, pero solo al bajar.
 *
 * Antes estaba escondido del todo por debajo de 720 px, y tenia sentido
 * cuando competia con los idiomas por una fila estrecha. Ahora se relevan en
 * el mismo hueco, asi que no compiten: arriba se ve el idioma y abajo el
 * boton, y en un movil es donde mas falta hace porque el boton grande de la
 * portada queda muy lejos en cuanto se baja un poco.
 *
 * Mas apretado que en escritorio para que quepa junto a la marca.
 */
.cabecera .boton { display: inline-flex; padding: 9px 14px; font-size: 0.8rem; }
@media (min-width: 720px) { .cabecera .boton { padding: 10px 18px; font-size: 0.86rem; } }

/* ---------- Portada ---------- */
.portada { border-bottom: 1px solid var(--linea); padding: clamp(48px, 8vw, 96px) 0 40px; }
@media (min-width: 1000px) { .portada { padding-bottom: 0; } }
.portada__texto { max-width: 100%; }
.portada h1 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
.portada h1 em { font-style: normal; color: var(--acento); }
.portada__bajada { margin-top: 26px; max-width: 44ch; color: var(--gris); font-size: 1.06rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portada__nota { margin-top: 18px; font-family: var(--mono); font-size: 0.74rem; color: var(--gris); letter-spacing: 0.04em; }

.portada__rejilla { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .portada__rejilla { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }
.portada__marca { display: block; justify-self: center; margin-top: 8px; }
@media (min-width: 1000px) { .portada__marca { justify-self: end; margin-top: 0; } }
.portada__marca svg { width: 100%; height: auto; max-width: 240px; }
@media (min-width: 1000px) { .portada__marca svg { max-width: 420px; } }

/* ---------- Demostración: el rectángulo rojo, funcionando ---------- */
.demo { margin-top: clamp(48px, 7vw, 84px); border-top: 1px solid var(--linea); }
.demo__barra { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-family: var(--mono); font-size: 0.72rem; color: var(--gris); letter-spacing: 0.06em; }
.demo__punto { width: 6px; height: 6px; background: var(--acento); flex: none; }
.demo__lienzo { position: relative; background: #faf7f2; border-bottom: 1px solid var(--linea); cursor: crosshair; user-select: none; overflow: hidden; }
/* ---------------------------------------------------------------------------
   La web de mentira: OTRA web, no un trozo de esta.

   Aqui dentro no manda nuestro sistema visual. Si hereda nuestro negro, nuestra
   tipografia y nuestros botones cuadrados, lo que se ve es la misma pagina con
   un marco alrededor, y entonces no demuestra nada: parece que editas nuestra
   web, no la de un cliente.

   Asi que va con lo suyo: papel crudo en vez de negro, una serie con serifa
   para los titulares, botones redondos, y sus propias reglas finas. La serifa
   es de sistema a proposito -Georgia esta en todas partes- porque una fuente
   mas serian dos peticiones para una demostracion.
   --------------------------------------------------------------------------- */
.demo__web {
  --papel: #faf7f2;
  --tinta: #2b211c;
  --tinta-suave: #7a6a60;
  --raya: #e3dbd0;
  --cafe: #7a3f2a;
  --serifa: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  padding: 0; pointer-events: none; height: clamp(360px, 52vh, 520px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--papel); color: var(--tinta);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.demo__web::-webkit-scrollbar { display: none; }
/* Columna de contenido, como cualquier web de verdad.
   En un ordenador ancho, esto se estiraba de borde a borde: un titular de 41
   caracteres repartido en 1.121 px, y el precio del cafe a mil pixeles de su
   nombre. Con este relleno el fondo sigue llegando a los lados -la cabecera
   pegajosa lo necesita- pero el texto se queda en una columna legible. */
.demo__web > * { padding-inline: max(24px, calc((100% - 820px) / 2)); }

.fweb__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 18px;
                  padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--raya);
                  position: sticky; top: 0; background: var(--papel); z-index: 2; }
.fweb__marca { font-family: var(--serifa); font-weight: 700; font-size: 1.05rem; color: var(--tinta); letter-spacing: 0; }
.fweb__nav { display: flex; gap: 20px; font-size: 0.8rem; color: var(--tinta-suave); }
@media (max-width: 620px) { .fweb__nav span:nth-child(n+3) { display: none; } }

.fweb__portada { padding-top: clamp(26px, 4vw, 44px); padding-bottom: clamp(26px, 4vw, 44px); }
.demo__web .demo__rotulo { font-family: system-ui, sans-serif; font-weight: 600; font-size: 0.72rem;
                           letter-spacing: 0.16em; text-transform: uppercase; color: var(--cafe);
                           margin: 0 0 16px; padding-bottom: 0; border-bottom: 0; }
.demo__web h4 { font-family: var(--serifa); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.9rem);
                line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--tinta);
                transition: color 0.25s; }
.demo__web p { color: var(--tinta-suave); max-width: 46ch; font-size: 0.94rem; }
.demo__web .fila { display: flex; gap: 10px; margin-top: 24px; }
/* Redondos, que es justo lo contrario de los nuestros. */
.demo__web .falso-boton { border: 1px solid var(--tinta); border-radius: 999px; padding: 9px 20px;
                          font-size: 0.84rem; color: var(--tinta); background: none; }
.demo__web .falso-boton--lleno { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.fweb__foto { margin: 0; padding-top: 8px; padding-bottom: 26px; }
.fweb__foto img { width: 100%; height: auto; display: block; border-radius: 14px; }
.fweb__foto figcaption { margin-top: 10px; font-size: 0.78rem; color: var(--tinta-suave); font-style: italic; }

.fweb__seccion { padding-top: 26px; padding-bottom: 26px; border-top: 1px solid var(--raya); }
.fweb__titulo { font-family: var(--serifa); font-size: 1.15rem; letter-spacing: 0; text-transform: none;
                color: var(--tinta); margin-bottom: 16px; font-weight: 400; }
.fweb__lista { display: grid; }
.fweb__cafe { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 0; border-top: 1px solid var(--raya); }
.fweb__cafe:first-child { border-top: 0; }
.fweb__cafe-nombre { grid-column: 1; grid-row: 1; font-family: var(--serifa); font-size: 1.02rem; color: var(--tinta); }
.fweb__cafe-nota { grid-column: 1; grid-row: 2; font-size: 0.82rem; color: var(--tinta-suave); }
.fweb__cafe-precio { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.9rem;
                     color: var(--cafe); font-weight: 600; }
.fweb__cafe--nuevo { animation: entra-fila 0.5s ease-out both; }
@keyframes entra-fila { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.fweb__video { margin: 0; padding-top: 8px; padding-bottom: 26px; }
.fweb__video-marco { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.fweb__video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.fweb__video figcaption { margin-top: 10px; font-size: 0.78rem; color: var(--tinta-suave); font-style: italic; }

.fweb__entra { animation: entra-pieza 0.55s ease-out both; }
@keyframes entra-pieza { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fweb__pie { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 20px; padding-bottom: 30px;
             border-top: 1px solid var(--raya); font-size: 0.82rem; color: var(--tinta-suave); }
.fweb__horario { color: var(--tinta); }

/* Lo que la instruccion acaba de cambiar, marcado un momento. */
.demo__cambiado { animation: recien-cambiado 1.6s ease-out both; }
@keyframes recien-cambiado {
  0% { color: var(--acento); }
  70% { color: var(--acento); }
  100% { color: inherit; }
}

/* Mientras la demostracion se representa sola no se ofrece el cursor de
   dibujar: nadie esta apuntando todavia. */
.demo__lienzo--sola { cursor: default; }
#demo-rect { position: absolute; display: none; border: 2px solid var(--acento); background: rgba(228, 87, 46, 0.09); pointer-events: none; }
.demo__pista { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.7rem; color: var(--gris); letter-spacing: 0.08em; border: 1px solid var(--linea); padding: 6px 14px; background: var(--negro); pointer-events: none; }
/* En una pantalla estrecha la web de mentira llega hasta abajo y el aviso se
   le monta encima de los botones. Se le deja su franja libre. */
@media (max-width: 620px) {
  .demo__web { padding-bottom: 66px; }
  .demo__pista { bottom: 12px; font-size: 0.66rem; padding: 5px 10px; }
}
/* El cajon OCUPA SU SITIO SIEMPRE, este abierto o cerrado.
   Antes pasaba de display:none a display:flex, o sea que aparecia de la nada y
   empujaba hacia abajo todo lo que tenia debajo: cada vuelta de la
   demostracion daba un salto a quien estuviera leyendo mas abajo. Reservar el
   hueco cuesta 50 px de nada y quita el salto entero. */
.demo__cajon { display: flex; border-bottom: 1px solid var(--linea); background: var(--negro-3); padding: 14px; gap: 10px; align-items: center;
               opacity: 0; visibility: hidden; transition: opacity 0.2s; }
.demo__cajon.abierto { opacity: 1; visibility: visible; }
.demo__cajon input { flex: 1; min-width: 0; background: var(--negro); border: 1px solid var(--linea-viva); color: var(--hueso); font: inherit; font-size: 0.9rem; padding: 11px 13px; outline: none; }
.demo__cajon input:focus { border-color: var(--acento); }
.demo__cajon .ref { font-family: var(--mono); font-size: 0.68rem; color: var(--acento); white-space: nowrap; }
@media (max-width: 620px) { .demo__cajon .ref { display: none; } }

/* ---------- Manifiesto ---------- */
/* --avance, de 0 a 1, lo pone el JavaScript en la seccion segun se baja, y de
   el cuelgan las dos cosas que crecen a la vez: el panel de taracea y el cuerpo
   de las lineas grandes. Sin JavaScript se queda en 1 y todo sale a su tamano.
   Va en la seccion y no en cada hijo para que el texto y la marca compartan
   exactamente el mismo numero: crecen juntos o no crece nada. */
.manifiesto { --avance: 1; border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 116px) 0; }
.manifiesto__rejilla { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .manifiesto__rejilla { grid-template-columns: 1fr 0.82fr; } }

/* Aqui la marca no se monta sola como la de la portada: se teje con el scroll,
   y de la estrella va naciendo una figura tras otra hasta cerrar el panel. El
   scale del conjunto va aqui y no dentro del SVG. */
.manifiesto__marca {
  justify-self: center;
  transform: scale(calc(0.86 + 0.14 * min(1, var(--avance))));
  transition: transform .42s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 900px) { .manifiesto__marca { justify-self: end; } }
.manifiesto__marca svg { width: 100%; height: auto; max-width: 280px; display: block; }
@media (min-width: 900px) { .manifiesto__marca svg { max-width: 460px; } }
@media (prefers-reduced-motion: reduce) {
  .manifiesto { --avance: 1; }
  .manifiesto__marca { transform: none; transition: none; }
}
.manifiesto p { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.22; letter-spacing: -0.02em; max-width: 22ch; }
.manifiesto p + p { margin-top: 0.7em; color: var(--gris); }
.manifiesto strong { font-weight: 700; color: var(--acento); }

/* El cierre baja de cuerpo respecto a las lineas, pero lo que importa dentro
   de el vuelve a subir y se pone en acento. La interlinea va holgada para que
   las palabras grandes no choquen con la linea de arriba. */
.manifiesto .manifiesto__cierre {
  margin-top: 40px; max-width: 44ch; color: var(--gris);
  font-family: var(--texto); font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.75; letter-spacing: 0;
}
/* Las dos frases que importan entran del tamano del texto que las rodea y
   crecen hasta su vez y media, al ritmo al que se teje el panel. El cuerpo del
   <strong> no se toca nunca: manda la altura de la linea y el ancho de los
   espacios, que asi no encogen. Quien crece es cada palabra, y lo hace sin
   moverle el sitio a nada (ver el guion del tejido en build.mjs). */
.manifiesto .manifiesto__cierre strong {
  font-family: var(--display); font-weight: 500; font-size: 1.5em;
  line-height: 1.1; letter-spacing: -0.03em; color: var(--acento);
}
.manifiesto .manifiesto__cierre strong span {
  transition: font-size .42s cubic-bezier(.2,.8,.3,1), letter-spacing .42s cubic-bezier(.2,.8,.3,1);
}
/* Para medir hay que devolver la palabra a su cuerpo de destino y leerlo en el
   acto. Con la transicion puesta, lo que se lee es el tamano a mitad de camino
   y la medida sale corta -y encima se guarda-. El JavaScript pone esta clase
   mientras mide y la quita al fotograma siguiente. */
.manifiesto.midiendo .manifiesto__cierre strong span { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .manifiesto .manifiesto__cierre strong span { transition: none; }
}

/* ---------- Comparativa ---------- */
.comparativa { border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 108px) 0; }
/*
 * LA TABLA DESLIZA EN PANTALLAS MUY ESTRECHAS.
 *
 * Cuatro columnas de texto no caben en 320 px por mucho que se aprieten:
 * medido, se salia 54 px y hacia que la pagina entera se pudiera mover de
 * lado. Encogerla mas la volvia ilegible, que es peor que deslizarla.
 *
 * `min-width` en la tabla para que no se estruje dentro de la caja, y la caja
 * es la que desliza. Por encima de ese ancho no pasa nada: la tabla cabe y la
 * caja no llega a deslizar nunca.
 */
.tabla__caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla__caja .tabla { min-width: 460px; }

.tabla { width: 100%; border-collapse: collapse; margin-top: 44px; font-size: 0.92rem; }
.tabla th, .tabla td { border-top: 1px solid var(--linea); padding: 18px 14px; text-align: left; vertical-align: top; }
.tabla thead th { border-top: 0; border-bottom: 1px solid var(--linea-viva); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); font-weight: 400; }
.tabla thead th:first-child { color: transparent; }
.tabla tbody th { font-weight: 500; color: var(--hueso); width: 26%; }
.tabla td { color: var(--gris); }
.tabla .nuestra { color: var(--hueso); background: var(--negro-2); }
.tabla thead .nuestra { color: var(--acento); background: var(--negro-2); }
@media (max-width: 720px) { .tabla { font-size: 0.84rem; } .tabla th, .tabla td { padding: 13px 9px; } }

/* ---------- Pasos, en banda horizontal ---------- */
.proceso { border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 108px) 0; }
.pasos { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--linea); }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { padding: 30px 26px 34px 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 860px) { .paso { border-bottom: 0; border-right: 1px solid var(--linea); padding: 34px 30px; } .paso:first-child { padding-left: 0; } .paso:last-child { border-right: 0; } }
.paso h3 { margin: 0 0 9px; }
.paso p { color: var(--gris); font-size: 0.93rem; }

/* ---------- La app ---------- */

/* Las capturas son de la app DE VERDAD, dibujadas por `capturas_test.dart`
   con los mismos widgets que se instalan. Un montaje con una pantalla de
   adorno y texto encima se nota, y ademas es lo que Play rechaza. */
.app { border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 108px) 0; }
.app__texto { color: var(--gris); max-width: 56ch; margin-top: 16px; font-size: 1.02rem; }

.app__capturas { display: grid; gap: 34px; margin-top: 48px; }
@media (min-width: 640px) { .app__capturas { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/*
 * EN MOVIL LAS TRES CAPTURAS SE TURNAN EN EL MISMO SITIO.
 *
 * Apiladas ocupaban tres pantallas enteras de scroll para enseñar tres
 * momentos del mismo gesto, y quien baja se cansa antes de llegar al tercero.
 * Aqui se superponen y se relevan con un fundido: mismo contenido, un tercio
 * del alto.
 *
 * Va con `animation` y sin una linea de JavaScript. Tres imagenes que se
 * turnan no necesitan un guion, y uno que corriera aqui tendria que pararse
 * al salir de pantalla para no gastar bateria por nada.
 *
 * El pie no se turna: dice lo mismo de las tres y cambiarlo a la vez que la
 * imagen obliga a leer dos cosas que se mueven.
 */
@media (max-width: 639px) {
  /*
   * LA CAJA RECORTA, y las cartas tienen su propio margen dentro.
   *
   * Medido en un Pixel 7: la carta de arriba se posa 17 px a la derecha, y en
   * una pantalla ancha eso la sacaba 7 px fuera y hacia que TODA la pagina se
   * pudiera mover de lado. El recorte es la garantia; el hueco de 22 px es
   * para que ese recorte no llegue a cortar nada que se vea.
   */
  /* Y con TOPE DE ANCHO. Es la captura de un movil: estirada a 600 px deja de
     parecer un movil y pasa a parecer una web mal escalada. Se queda a 320 y
     se centra, que es mas o menos lo que mide el aparato de verdad. */
  .app__capturas { position: relative; display: block; padding: 0 22px 46px;
                   overflow: hidden; max-width: 364px; margin-inline: auto; }
  .app__movil { position: absolute; inset: 0 22px 46px; }
  /* La primera SI ocupa sitio: es la que le da el alto a la caja. Las otras
     dos se posicionan encima. Sin esto la caja mediria cero. */
  .app__movil:first-child { position: relative; }

  /*
   * SE REPARTEN COMO CARTAS DE UNA BARAJA.
   *
   * Cada captura SUBE desde abajo y se posa encima de la anterior, un poco
   * girada y un poco corrida, asi que se ve el canto de las que quedan
   * debajo. Al final del ciclo hay una baraja de tres, no una sola imagen.
   *
   * No es un fundido cruzado, que era la primera version: al cruzarse se ven
   * dos a medias y no se lee ninguna. Y no es un pase de diapositivas, porque
   * lo que hay que entender es que son tres momentos SEGUIDOS del mismo
   * gesto: al quedarse la anterior debajo, eso se cuenta solo.
   *
   * SE GIRA LA IMAGEN, NO LA FIGURA. La figura lleva dentro el pie de foto, y
   * un pie de foto torcido se lee como un fallo de maqueta, no como una carta.
   *
   * Los porcentajes van escritos uno a uno y no con `animation-delay` porque
   * las tres tienen que reiniciarse A LA VEZ. Con retardos, la baraja se
   * desharia por partes.
   */
  .app__movil:nth-child(1) { z-index: 1; }
  .app__movil:nth-child(2) { z-index: 2; }
  .app__movil:nth-child(3) { z-index: 3; }
  .app__movil img { transform-origin: 50% 90%; }
  .app__movil:nth-child(1) img { animation: carta-1 13.5s infinite; }
  .app__movil:nth-child(2) img { animation: carta-2 13.5s infinite; }
  .app__movil:nth-child(3) img { animation: carta-3 13.5s infinite; }

  /* El pie es el de la carta que esta ARRIBA. Van todos en el mismo sitio y
     se relevan: dos pies a la vez no se leen. */
  .app__movil figcaption { position: absolute; left: 0; right: 0; top: 100%;
                           margin-top: 12px; opacity: 0; }
  .app__movil:nth-child(1) figcaption { animation: pie-1 13.5s infinite; }
  .app__movil:nth-child(2) figcaption { animation: pie-2 13.5s infinite; }
  .app__movil:nth-child(3) figcaption { animation: pie-3 13.5s infinite; }
}

/* La carta sube desde abajo, encogida, y se posa. Cada una en su sitio de la
   baraja: la de abajo mas girada, la de arriba casi recta. */
@keyframes carta-1 {
  0%       { opacity: 0; transform: translateY(52px) scale(.94) rotate(-4deg); }
  5%, 92%  { opacity: 1; transform: translate(-9px, 5px) rotate(-3.5deg); }
  97%,100% { opacity: 0; transform: translate(-9px, 5px) rotate(-3.5deg); }
}
@keyframes carta-2 {
  0%, 28%  { opacity: 0; transform: translateY(52px) scale(.94) rotate(4deg); }
  33%, 92% { opacity: 1; transform: translate(7px, 2px) rotate(2.5deg); }
  97%,100% { opacity: 0; transform: translate(7px, 2px) rotate(2.5deg); }
}
@keyframes carta-3 {
  0%, 58%  { opacity: 0; transform: translateY(52px) scale(.94) rotate(-3deg); }
  63%, 92% { opacity: 1; transform: translate(17px, -4px) rotate(-1deg); }
  97%,100% { opacity: 0; transform: translate(17px, -4px) rotate(-1deg); }
}

/* Y su pie, mientras esa carta es la de arriba. */
@keyframes pie-1 { 0%{opacity:0} 6%,26%{opacity:1} 30%,100%{opacity:0} }
@keyframes pie-2 { 0%,28%{opacity:0} 34%,56%{opacity:1} 60%,100%{opacity:0} }
@keyframes pie-3 { 0%,58%{opacity:0} 64%,92%{opacity:1} 97%,100%{opacity:0} }

/* Quien ha pedido que no se le muevan las cosas no tiene por que aguantar un
   carrusel. Se le enseñan las tres apiladas, como antes. */
@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .app__capturas { display: grid; }
  .app__movil { position: relative; opacity: 1; animation: none; }
  .app__movil figcaption { position: relative; }
}

.app__movil { margin: 0; }
/* El movil se dibuja con el borde, no con una carcasa en PNG: una carcasa es
   un kilo de imagen para enseñar un rectangulo redondeado. */
.app__movil img { display: block; width: 100%; height: auto; border: 1px solid var(--linea-viva);
                  border-radius: 14px; background: var(--negro-2); }
.app__movil figcaption { margin-top: 14px; font-size: 0.88rem; color: var(--gris); }

.app__incluida { margin-top: 38px; font-size: 0.93rem; color: var(--hueso); }


/* ---------- El aviso de la lista ---------- */

/* Va en un <dialog>, asi que el navegador pone el fondo y el foco. Aqui solo
   se le quita el aspecto de serie, que es un recuadro blanco con borde. */
/* `margin: auto` es lo que centra un <dialog> modal, y el reseteo de arriba
   (`* { margin: 0 }`) se lo quita: salia pegado a la esquina de arriba a la
   izquierda. Hay que devolverselo a mano. */
/* NO SE LE TOCA `position`. Un <dialog> abierto con showModal() es
   `position: fixed` por el navegador, y eso es lo que lo deja quieto encima
   de la pagina. Al ponerle `relative` para colgar el aspa de cerrar, pasaba a
   estar en el flujo del documento: se abria y la pagina saltaba a buscarlo,
   2.648 px hacia arriba desde donde estuviera leyendo.

   El aspa no necesita nada: un elemento `fixed` ya sirve de referencia para
   lo que lleve dentro en `absolute`. */
.aviso-lista { margin: auto; border: 1px solid var(--linea-viva); background: var(--negro-2);
               color: var(--hueso); padding: 34px 34px 30px; max-width: 460px; width: calc(100% - 32px); }
.aviso-lista::backdrop { background: rgba(0, 0, 0, 0.72); }

/*
 * EL AVISO NO APARECE DE GOLPE.
 *
 * Un <dialog> se planta en pantalla de un fotograma al siguiente, y eso a los
 * doce segundos de estar leyendo se siente como un manotazo: lo primero que
 * hace cualquiera es buscar el aspa, no leer lo que pone. Subiendo un poco y
 * escalando el ultimo pelin, se lee como algo que llega y no como algo que
 * interrumpe.
 *
 * Van dos animaciones y no una: el velo de detras tarda un poco mas y arranca
 * antes, asi que la pantalla se oscurece PRIMERO y la caja llega despues. Al
 * reves, la caja aparece sobre el fondo claro y da un salto de contraste.
 *
 * Son 280 ms. Mas corto no se percibe como entrada y mas largo se nota como
 * espera, que en algo que interrumpe es peor.
 */
.aviso-lista[open] { animation: aviso-entra .28s cubic-bezier(.2, .8, .3, 1); }
.aviso-lista[open]::backdrop { animation: aviso-velo .34s ease-out; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
}
@keyframes aviso-velo {
  from { background: rgba(0, 0, 0, 0); }
}

/* Quien ha pedido que no se le muevan las cosas lo recibe como antes. */
@media (prefers-reduced-motion: reduce) {
  .aviso-lista[open], .aviso-lista[open]::backdrop { animation: none; }
}
.aviso-lista h2 { font-size: 1.6rem; margin: 0 0 12px; }
.aviso-lista__texto { color: var(--gris); margin: 0 0 22px; font-size: 0.98rem; }

.aviso-lista__cerrar-forma { margin: 0; }
.aviso-lista__cerrar { position: absolute; right: 12px; top: 10px; background: none; border: 0;
                       color: var(--gris); font-size: 1.1rem; cursor: pointer; padding: 8px 10px; }
.aviso-lista__cerrar:hover { color: var(--hueso); }

.aviso-lista__forma { display: flex; gap: 0; }
.aviso-lista__forma input { flex: 1; min-width: 0; background: var(--negro); color: var(--hueso);
                            border: 1px solid var(--linea-viva); border-right: 0;
                            padding: 14px 16px; font: inherit; font-size: 0.95rem; }
.aviso-lista__forma input::placeholder { color: var(--gris); }
.aviso-lista__forma input:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.aviso-lista__forma .boton { flex: none; }

.aviso-lista__recado { font-size: 0.82rem; color: var(--gris); margin: 14px 0 0; }
.aviso-lista__recado--mal { color: var(--acento); }
.aviso-lista__hecho { margin: 0; font-size: 0.98rem; }
.aviso-lista__legal { font-size: 0.76rem; color: var(--gris); margin: 16px 0 0; }
.aviso-lista__legal a { color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }

/* Para la etiqueta del campo, que tiene que estar por accesibilidad y no
   tiene que verse porque ya lo dice el texto de dentro. */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tutoriales ---------- */

/* La columna de lectura se ensancha aqui: el cuadro de los videos mide 1920
   y en 66ch la frase que se escribe dentro sale a un tercio y no se lee. */
/* Doble clase a proposito: `.legal` se declara mas abajo en esta misma hoja
   con `max-width: 66ch`, y con una sola clase le ganaba por orden. */
.legal.legal--ancho { max-width: 1040px; }
.legal--ancho p, .legal--ancho li { max-width: 68ch; }

/* La cola: pantalla a la izquierda y las piezas a la derecha, como cualquier
   lista de reproduccion. Debajo de 900 px se apilan. */
.reproduce { display: grid; gap: 24px; margin: 30px 0 34px; }
@media (min-width: 900px) { .reproduce { grid-template-columns: 1fr 330px; } }

.pantalla { border: 1px solid var(--linea-viva); background: #000; align-self: start; }
.pantalla__video { display: block; width: 100%; height: auto; }
/* Sin guion se ven los tres, con sus controles. Con guion, solo el elegido. */
.con-cola .pantalla__video[hidden] { display: none; }

.cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cola__pieza { display: flex; gap: 14px; align-items: flex-start; width: 100%;
               background: none; border: 1px solid transparent; padding: 8px;
               font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cola__pieza:hover { border-color: var(--linea-viva); }
.cola__pieza--puesta { border-color: var(--acento); background: var(--negro-2); }
.cola__pieza img { width: 120px; height: auto; flex: none; display: block; border: 1px solid var(--linea); }
.cola__medio { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cola__titulo { font-size: 0.95rem; line-height: 1.25; color: var(--hueso); }
.cola__pie { font-size: 0.8rem; line-height: 1.35; color: var(--gris); }
.cola__dura { font-size: 0.72rem; color: var(--gris); margin-left: auto; flex: none; }

.ficha[hidden] { display: none; }
.ficha h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* El cierre que lleva al alta. */
.tuto__cierre { border-top: 1px solid var(--linea); margin-top: 64px; padding-top: 40px; }
.tuto__cierre h2 { border-top: 0; padding-top: 0; margin-top: 0; }

/* EL BOTON, CON SU COLOR GANADO A PULSO. `.legal a` pinta todos los enlaces
   de naranja y le ganaba por especificidad al `.boton--fuerte`: salia texto
   naranja sobre fondo naranja, o sea un rectangulo vacio. */
.tuto__cta { display: inline-flex; margin: 10px 0 18px; }
.legal .tuto__cta, .legal .cabecera__cta { color: #fff; text-decoration: none; }

/* ---------- Preguntas ---------- */
.preguntas { border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 108px) 0; }
.pregunta { border-top: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: 1px solid var(--linea); }
.pregunta summary { cursor: pointer; padding: 22px 0; font-size: 1.02rem; font-weight: 500; list-style: none; display: flex; align-items: baseline; gap: 14px; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before { content: '+'; font-family: var(--mono); color: var(--acento); flex: none; }
.pregunta[open] summary::before { content: '−'; }
.pregunta p { color: var(--gris); padding: 0 0 24px 26px; max-width: 62ch; font-size: 0.95rem; }

/* ---------- Cierre ---------- */
.cierre { padding: clamp(72px, 11vw, 140px) 0; border-bottom: 1px solid var(--linea); }
.cierre h2 { max-width: 15ch; }
.cierre p { color: var(--gris); margin: 22px 0 34px; max-width: 46ch; }

/* ---------- Pie ---------- */
.pie { padding: 34px 0 48px; font-size: 0.84rem; color: var(--gris); }
.pie__fila { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }
.pie__fila .mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }


/* El cursor de la demostracion: se mueve con transform, que no repinta nada. */
#demo-cursor { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
               transition: opacity 0.2s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); z-index: 3; }
#demo-cursor.visible { opacity: 1; }
#demo-cursor.pulsando { transform-origin: 0 0; }

/* El cajon ya no es un formulario: lo que se escribe se pinta, y se ve el
   cursor de texto parpadeando al final para que parezca escrito a mano. */
.demo__escrito { flex: 1; color: var(--hueso); font-size: 0.92rem; min-height: 1.2em; }
.demo__escrito::after { content: ''; display: inline-block; width: 1px; height: 1em;
                        background: var(--acento); margin-left: 2px; vertical-align: -2px;
                        animation: latir 1s steps(2) infinite; }
@keyframes latir { 50% { opacity: 0; } }

/* Nada de aquí se toca: es una representación. */
.demo__lienzo, .demo__cajon { cursor: default; }


/* El vídeo dentro de la web de mentira: un marco con su triángulo, que es como
   se ve un vídeo incrustado antes de darle. No es un reproductor: es la pieza
   que el cliente acaba de pedir que le pongan. */

/* ---------- Páginas legales ---------- */
/* Un documento que hay que leer: medida corta, aire entre bloques y ni un
   adorno. Lo único que se permite es el filete de 1px de siempre. */
.legal { max-width: 66ch; padding: 90px 0 80px; }
.legal h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); margin-bottom: 24px; }
.legal h2 { font-size: 1.5rem; margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--linea); }
.legal h3 { font-size: 1.05rem; margin: 30px 0 10px; color: var(--acento); }
.legal p, .legal li { color: var(--hueso); margin-bottom: 14px; }
.legal__entrada { font-size: 1.12rem; color: var(--gris); }
.legal__fecha { font-size: 0.74rem; color: var(--gris); letter-spacing: 0.12em; margin-bottom: 10px; }
.legal__lista { padding-left: 20px; }
.legal__lista li { margin-bottom: 10px; }
.legal a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

.legal__tabla { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 0.94rem; }
.legal__tabla th { text-align: left; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
                   letter-spacing: 0.1em; color: var(--gris); font-weight: 400; padding: 0 14px 8px 0; }
.legal__tabla td { padding: 12px 14px 12px 0; border-top: 1px solid var(--linea); vertical-align: top; }
@media (max-width: 620px) {
  .legal__tabla, .legal__tabla tbody, .legal__tabla tr, .legal__tabla td, .legal__tabla th { display: block; }
  .legal__tabla th { display: none; }
  .legal__tabla td { padding: 4px 0; border: none; }
  .legal__tabla tr { border-top: 1px solid var(--linea); padding: 14px 0; display: block; }
}

.pie__enlace { color: var(--gris); }
.pie__enlace:hover { color: var(--hueso); }
.legal__nota { font-size: 0.86rem; color: var(--gris); margin-top: -8px; }

/* ---------- Aquí no hay nada ---------- */
/* Centrada y con la marca grande: una 404 tiene UNA cosa que hacer, que es
   decir dónde estás y devolverte a la portada. Todo lo demás sobra. */
.perdido { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; text-align: center; }
.perdido__caja { width: min(420px, 100%); }
.perdido__marca { display: block; margin: 0 auto 34px; width: 84px; }
.perdido__marca svg { width: 100%; height: auto; display: block; }
.perdido h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.perdido__nota { margin-top: 12px; color: var(--gris); font-size: 0.95rem; }
.perdido__nota a { color: var(--acento); }
.perdido__nota a:hover { color: var(--hueso); }

/* ---------- Apuntarse a la lista ---------- */
/* Todavía no hemos abierto, así que esto es lo único que la portada puede
   pedirle a alguien. El campo y el botón van pegados, dentro de un solo marco:
   son un gesto, no dos. */
.apuntarse { margin-top: 32px; max-width: 520px; }
.apuntarse__fila {
  display: flex; align-items: stretch;
  border: 1px solid var(--linea-viva);
}
.apuntarse__fila:focus-within { border-color: var(--acento); }
.apuntarse__campo { flex: 1; min-width: 0; display: block; }
.apuntarse__campo input {
  width: 100%; height: 100%;
  background: var(--negro-2); border: 0; color: var(--hueso);
  font: inherit; font-size: 0.95rem; padding: 15px 16px; outline: none;
}
.apuntarse__campo input::placeholder { color: #6f6b66; }
.apuntarse__fila .boton { flex: none; border: 0; }

.apuntarse__nota { margin-top: 10px; font-size: 0.84rem; color: var(--gris); }
.apuntarse__nota--mal { color: var(--acento); }

/* Al apuntarse, el formulario se va y queda la confirmación en su sitio:
   dejarlo puesto invita a apuntarse dos veces y a dudar de si la primera contó. */
.apuntarse__hecho {
  margin: 0; padding: 15px 16px;
  border-left: 2px solid var(--acento); background: var(--negro-2);
  font-size: 0.98rem;
}

/* Para lectores de pantalla: el campo necesita etiqueta aunque el marcador de
   posición ya diga lo mismo. Un placeholder no es una etiqueta. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 520px) {
  .apuntarse__fila { flex-direction: column; }
  .apuntarse__fila .boton { justify-content: center; padding: 15px; }
}

/* La linea legal, debajo y en pequeno: tiene que estar y tiene que poder
   leerse, pero no compite con el boton. El enlace en acento, que si no nadie
   lo encuentra. */
.apuntarse__legal { margin-top: 8px; font-size: 0.78rem; color: var(--gris); }
.apuntarse__legal a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.apuntarse__legal a:hover { color: var(--hueso); }

/* ---------- Precios ---------- */
/*
 * Cuatro tarjetas pegadas, separadas por un filete de 1 px y no por aire.
 * Es la misma decision que la tabla comparativa de arriba: en una pagina
 * oscura, el hueco no separa -se lee como fondo- y lo que ordena de verdad es
 * la linea. Sombras y esquinas redondeadas, ninguna: aqui no se negocia.
 *
 * El unico acento de la seccion se gasta entero en El taller, que es el plan
 * al que se quiere llevar a la gente. Si lo llevaran dos, no lo llevaria
 * ninguno.
 */
.precios { border-bottom: 1px solid var(--linea); padding: clamp(64px, 9vw, 108px) 0; }
.precios__bajada { margin-top: 14px; color: var(--gris); max-width: 58ch; }

/* El interruptor: dos palabras y un subrayado, no una pastilla que se desliza. */
.precios__interruptor { display: flex; gap: 4px; margin-top: 32px; flex-wrap: wrap; }
.precios__opcion {
  font: inherit; font-size: 0.86rem; color: var(--gris); background: none;
  border: 1px solid var(--linea); padding: 9px 16px; cursor: pointer;
}
.precios__opcion:hover { color: var(--hueso); border-color: var(--linea-viva); }
.precios__opcion--puesta { color: var(--hueso); border-color: var(--hueso); }

.planes {
  display: grid; gap: 1px; margin-top: 32px;
  background: var(--linea); border: 1px solid var(--linea);
}
@media (min-width: 640px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .planes { grid-template-columns: repeat(4, 1fr); } }

/*
 * EN MOVIL LOS PLANES SE DESLIZAN DE LADO, NO SE APILAN.
 *
 * Apilados son cuatro pantallas enteras de scroll, y cada tarjeta lleva
 * ademas siete lineas de lo que incluye. Quien baja para comparar precios se
 * cansa antes de llegar al tercero, y comparar es justo lo que ha venido a
 * hacer: al apilarlos no puede ver dos cifras a la vez ni una sola vez.
 *
 * Deslizando, con parada en cada tarjeta, ve una entera y adivina que hay
 * otra al lado. Los 86vw son a proposito: si midieran 100 no asomaria la
 * siguiente, y una fila que se desliza sin que se note que se desliza es una
 * fila con tres tarjetas que nadie va a encontrar.
 */
@media (max-width: 639px) {
  .planes {
    display: flex; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /*
     * Se sale del envoltorio para que la primera empiece pegada al borde.
     *
     * SIN `vw`, Y ESO IMPORTA: `100vw` incluye la barra de desplazamiento,
     * asi que en una ventana con barra visible el carrusel medía unos pixeles
     * MAS que el sitio disponible y desbordaba la pagina. El envoltorio se
     * queda a 20 px de cada borde (`100% - 40px`), asi que salirse es
     * exactamente eso: 20 px, medidos y no estimados.
     */
    margin-inline: -20px; padding-inline: 20px;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .planes::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 84%; scroll-snap-align: start;
    border: 1px solid var(--linea); margin-right: 12px;
  }
  /* Sin esto la descripcion reserva tres lineas para cuadrar cuatro tarjetas
     que aqui ya no se ven a la vez, y regala hueco muerto en cada una. */
  .plan__para { min-height: 0; }
}

/*
 * El hueco de arriba lo reservan TODAS las tarjetas, lleven marca o no, y la
 * marca va posicionada dentro de el. Si ocupara sitio solo en la destacada, su
 * titulo y su precio bajarian ese tanto y las cuatro cifras dejarian de estar
 * a la misma altura -que es exactamente lo que hace que una tabla de precios
 * se pueda leer de un vistazo-.
 */
.plan {
  position: relative; background: var(--negro); padding: 46px 22px 28px;
  display: flex; flex-direction: column;
}
.plan--destacado { background: var(--negro-2); }

/*
 * Y la marca NO es un rotulo en mayusculas muy espaciadas. Ese es el primero
 * de los tics que delatan una pagina hecha con plantilla, y esta casa lo tiene
 * prohibido por escrito. Es una frase normal, en su caja, del color del acento.
 */
.plan__marca {
  position: absolute; top: 20px; left: 22px; right: 22px;
  color: var(--acento); font-size: 0.8rem;
}

.plan h3 { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.02em; }
/* Tres lineas reservadas: es lo que ocupa la descripcion mas larga, y sin esto
   el precio de cada tarjeta cae a una altura distinta. */
.plan__para { margin-top: 8px; color: var(--gris); font-size: 0.88rem; min-height: 4.4em; }

/*
 * El precio, con la jerarquia que pide la ley y el sentido comun: grande el
 * que se paga -con IVA- y pequeño el desglose. Quien mira un precio quiere
 * saber lo que le van a cobrar; quien se lo deduce ya sabe donde mirar.
 */
.plan__precio { margin-top: 18px; }
.plan__precio--fuera { display: none; }
.plan__cifra { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__num {
  font-family: var(--display); font-size: 2.5rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.plan__cada { font-size: 0.84rem; color: var(--gris); }
.plan__iva { margin-top: 6px; font-size: 0.72rem; color: var(--gris); }

.plan__incluye { list-style: none; margin: 22px 0 26px; display: grid; gap: 9px; font-size: 0.88rem; }
.plan__incluye li { padding-left: 15px; position: relative; color: var(--hueso); }
/* Un filete corto en vez de una palomita: el tic de las palomitas verdes es
   exactamente lo que delata una pagina de precios hecha con plantilla. */
.plan__incluye li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--acento);
}
.plan .boton { margin-top: auto; }

.precios__pie { display: grid; gap: 1px; margin-top: 1px; background: var(--linea); border: 1px solid var(--linea); border-top: 0; }
@media (min-width: 860px) { .precios__pie { grid-template-columns: 1fr 1fr; } }
.precios__nota { background: var(--negro); padding: 26px 22px; }
.precios__nota h3 { font-family: var(--display); font-size: 1.02rem; margin-bottom: 10px; }
.precios__nota p { color: var(--gris); font-size: 0.9rem; max-width: 52ch; }
.precios__nota-fina { margin-top: 10px; color: var(--gris); font-size: 0.84rem; }
.precios__todos { list-style: none; display: grid; gap: 9px; font-size: 0.9rem; color: var(--gris); }
.precios__todos li { padding-left: 15px; position: relative; }
.precios__todos li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--linea-viva);
}

.precios__aviso { margin-top: 26px; color: var(--gris); font-size: 0.86rem; }