/* Tenonway — «Placa»
   Reimaginación completa de la 03 con los mismos tres materiales.

   La tesis: la web es la placa de bronce de la puerta, la que tienen los
   consultorios y los estudios de toda ciudad paraguaya. En la 03 el latón
   era un color de texto; acá es material, con cepillado, bisel, tornillos
   y letra grabada. Aparece como superficie solo dos veces: la placa del
   titular y la placa del WhatsApp. La identidad y la acción.

   Los roles de la 03 se dan vuelta:
   - el vino deja de ser filete y pasa a ser el campo de toda la página;
   - la yerba deja de ser el campo y baja a superficie (formulario, pie);
   - la serif pasa a display y la prosa va en sans.

   El campo no es el bordó de la 03 (#592036) sino uno más hondo, #3A1626:
   a pantalla completa un tono se percibe más saturado que en un botón, y
   el de la 03 ya estaba al límite. El #592036 queda como superficie alzada.

   Rufina (Martín Sommaruga) para display: serif de alto contraste y remates
   filosos, la letra de una placa grabada. Rosario (Omnibus-Type) para prosa
   y datos. Las dos, argentinas.

   Contrastes medidos:
   hueso / campo 13.29 · hueso-2 / campo 8.44 · latón / campo 6.14
   tinta / latón más oscuro del cepillado 5.19 · hueso / yerba 13.08
   borde de control / campo 3.62 · borde de campo / yerba-honda 3.98 */

/* Fuentes autoalojadas, solo el subconjunto latino: el sitio está en
   español. Rufina se usa únicamente en 700. Las dos son OFL. */
@font-face {
  font-family: Rufina;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/rufina-700.woff2') format('woff2');
}
@font-face {
  font-family: Rosario;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fuentes/rosario.woff2') format('woff2');
}
@font-face {
  font-family: Rosario;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/rosario-italica.woff2') format('woff2');
}

:root {
  --campo:       #3A1626;
  --campo-hondo: #2A0F1B;
  --vino:        #592036;
  --hueso:       #EDEBE2;
  --hueso-2:     #C9B9BE;
  --laton:       #C79A3F;
  --laton-luz:   #D4AC55;
  --laton-sombra:#B98C33;
  --tinta:       #3A1626;   /* letra grabada: el mismo vino del campo */
  --yerba:       #1B2620;
  --yerba-honda: #141C17;
  --yerba-texto: #A9B0A6;
  --linea:       #5E3446;   /* filetes decorativos */
  --control:     #9A6B80;   /* bordes de control: 3:1 */
  --borde-campo: #6F7C73;
  --tenue:       #8B948A;
  --error:       #E3A4B8;

  --r-placa: 3px;
  --r-control: 999px;   /* los controles son redondos: contraste con la placa */
  --r-campo: 2px;

  --serif: Rufina, 'Times New Roman', serif;
  --palo:  Rosario, system-ui, -apple-system, sans-serif;

  --t-xs:   14px;
  --t-sm:   16px;
  --t-base: 18px;
  --t-md:   22px;
  --t-lg:   34px;
  --t-xl:   clamp(34px, 4.4vw, 52px);
  --t-tapa: clamp(38px, 7.2vw, 94px);

  --marco: 1180px;
  --canal: 22px;
}

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

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

body {
  margin: 0;
  background: var(--campo);
  color: var(--hueso);
  font-family: var(--palo);
  font-size: var(--t-base);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

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

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 16px; top: 12px; z-index: 50;
  background: var(--hueso); color: var(--campo); padding: 10px 14px;
}

.marco {
  max-width: var(--marco);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* ── Tope ───────────────────────────────────────────────── */

.tope-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.marca {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--laton);
}

/* ── Botones ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--palo);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out,
              color 180ms ease-out, transform 90ms ease-out;
}
.btn[hidden] { display: none; }
.btn:active { transform: translateY(1px); }

.btn-hueso { background: var(--hueso); color: var(--campo); }
.btn-hueso:hover { background: #FFFFFF; }

.btn-linea { background: transparent; border-color: var(--control); color: var(--hueso); }
.btn-linea:hover { border-color: var(--hueso); }

.btn-chico { min-height: 40px; padding-inline: 16px; font-size: var(--t-xs); white-space: nowrap; }
.btn-ancho { width: 100%; }

/* ── La placa ───────────────────────────────────────────────
   Latón cepillado: un degradé suave en diagonal, que es cómo el metal
   devuelve la luz, y un rayado horizontal fino, que es el cepillo. El
   bisel es un filo claro arriba y uno oscuro abajo. La letra va en el
   vino del campo con un filo claro debajo: así se lee hundida. */

.placa {
  position: relative;
  display: block;
  color: var(--tinta);
  border-radius: var(--r-placa);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(104deg, var(--laton-sombra), var(--laton) 30%, var(--laton-luz) 58%, var(--laton) 82%, var(--laton-sombra));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 18px 40px -22px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* El filete grabado que bordea el texto, a un dedo del canto. */
.placa::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(58, 22, 38, 0.38);
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.tornillo {
  position: absolute;
  width: var(--tornillo, 12px);
  height: var(--tornillo, 12px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E6C77F, #9C7327 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
/* La ranura, cada una girada distinto: nadie aprieta cuatro tornillos igual. */
.tornillo::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: calc(50% - 1px);
  height: 2px;
  background: rgba(58, 22, 38, 0.7);
  transform: rotate(var(--giro, 20deg));
}
.tornillo:nth-of-type(1) { top: 26px; left: 26px; --giro: 24deg; }
.tornillo:nth-of-type(2) { top: 26px; right: 26px; --giro: -40deg; }
.tornillo:nth-of-type(3) { bottom: 26px; left: 26px; --giro: 80deg; }
.tornillo:nth-of-type(4) { bottom: 26px; right: 26px; --giro: 5deg; }

/* El brillo: una banda de luz que cruza el metal. Quieto fuera de la
   placa hasta que algo lo dispara (la carga, el clic en la marca, pasar
   por encima del WhatsApp). */
.placa::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 244, 214, 0.42), transparent);
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
}

/* ── Portada ────────────────────────────────────────────── */

.portada { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 104px); }

.placa-tapa {
  --tornillo: clamp(12px, 1.3vw, 17px);
  padding: clamp(64px, 9vw, 120px) clamp(40px, 7vw, 110px);
  text-align: center;
}

.placa-tapa h1 {
  max-width: 16ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: var(--t-tapa);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

.portada-pie {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: 24px 48px;
  align-items: end;
  margin-top: clamp(28px, 3.5vw, 44px);
}

.entrada {
  max-width: 46ch;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--hueso-2);
  text-wrap: pretty;
}

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Secciones: encabezado arriba, a la izquierda, grande ─── */

.seccion { padding-block: clamp(56px, 7vw, 104px) 0; }
.seccion:last-of-type { padding-bottom: clamp(56px, 7vw, 104px); }

.seccion > h2 {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  text-wrap: balance;
}

/* ── Qué podés esperar ──────────────────────────────────────
   Un libro de condiciones: ocho celdas, el valor manda y va en latón,
   el concepto debajo. En el HTML el <dt> va primero, como corresponde;
   el orden visual se da vuelta con flex. */

.libro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
}

.libro > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 24px 30px 0;
  border-bottom: 1px solid var(--linea);
}
.libro > div:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--linea); }

.libro .valor {
  order: -1;
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.08;
  color: var(--laton);
  margin-bottom: 8px;
}
.libro .valor sup { font-size: 0.5em; vertical-align: super; line-height: 0; }

.libro dt { font-size: var(--t-sm); font-weight: 700; }

.libro .nota {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--hueso-2);
  text-wrap: pretty;
}

/* ── Quién hace el trabajo ──────────────────────────────── */

.quien {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px 56px;
  align-items: start;
}
.quien.sin-retrato { grid-template-columns: minmax(0, 1fr); }
.quien.sin-retrato .quien-retrato { display: none; }

.quien-retrato { border-radius: var(--r-placa); overflow: hidden; }
.quien-retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.quien-prosa { max-width: 62ch; }
.quien-prosa p { color: var(--hueso-2); text-wrap: pretty; }
.quien-prosa p + p { margin-top: 18px; }

.quien-prosa .quien-nombre {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hueso);
}
.quien-prosa .quien-oficio { margin-top: 6px; margin-bottom: 26px; font-size: var(--t-sm); }

.obra { margin: 20px 0 24px; }
.obra li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
  font-weight: 600;
}
.obra li:last-child { border-bottom: 1px solid var(--linea); }
.obra span {
  font-size: var(--t-xs);
  font-weight: 400;
  font-style: italic;
  color: var(--laton);
}

/* ── Qué incluye ────────────────────────────────────────── */

.alcance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  max-width: 980px;
}
.alcance h3 {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.alcance p { max-width: 44ch; color: var(--hueso-2); text-wrap: pretty; }

/* ── Cómo trabajamos: un riel de latón con cuatro paradas.
      Única secuencia real de la página, así que es la única numeración. */

.riel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  counter-reset: paso;
}

.riel li {
  position: relative;
  padding-top: 58px;
  counter-increment: paso;
}

/* El riel corre de parada a parada, incluido el hueco entre columnas. */
.riel li::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: -32px;
  height: 2px;
  background: var(--laton);
}
.riel li:last-child::before { right: 0; }

.riel li::after {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--laton);
  box-shadow: 0 0 0 6px var(--campo);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--tinta);
}

.riel h3 {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.riel p { max-width: 34ch; font-size: var(--t-sm); color: var(--hueso-2); text-wrap: pretty; }

/* ── Preguntas ──────────────────────────────────────────────
   Sin JS, o en pantalla angosta: acordeón. Con JS en pantalla ancha:
   lista a la izquierda y respuesta a la derecha, sobre vino alzado. */

.consultas { max-width: 820px; border-top: 1px solid var(--linea); }
.consultas details { border-bottom: 1px solid var(--linea); }

.consultas summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 17px 38px 17px 0;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.35;
  transition: color 150ms ease-out;
}
.consultas summary::-webkit-details-marker { display: none; }
.consultas summary:hover { color: var(--laton); }

/* Un más que se vuelve menos: la barra vertical se acuesta. */
.consultas summary::before,
.consultas summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--laton);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.consultas summary::after { transform: rotate(90deg); }
.consultas details[open] summary::after { transform: rotate(0deg); }

.consultas details p {
  overflow: hidden;
  padding: 0 38px 22px 0;
  max-width: 64ch;
  color: var(--hueso-2);
  text-wrap: pretty;
}

.fichero { display: none; }

@media (min-width: 900px) {
  .consultas.con-fichero { max-width: none; border-top: 0; }
  .consultas.con-fichero details { display: none; }

  .con-fichero .fichero {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
  }

  .fichero-lista { border-top: 1px solid var(--linea); }

  .fichero-lista button {
    display: block;
    width: 100%;
    padding: 14px 16px 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--linea);
    background: transparent;
    color: var(--hueso-2);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: color 150ms ease-out, background-color 150ms ease-out;
  }
  .fichero-lista button:hover { color: var(--hueso); }
  .fichero-lista button[aria-selected="true"] { color: var(--hueso); background: var(--vino); }
  /* La pregunta activa lleva un canto de latón, del lado de la respuesta. */
  .fichero-lista button[aria-selected="true"]::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 3px;
    background: var(--laton);
  }

  .fichero-panel {
    position: sticky;
    top: 24px;
    min-height: 260px;
    padding: 36px 40px 40px;
    background: var(--vino);
    border-radius: var(--r-placa);
  }
  .fichero-panel h3 {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
    text-wrap: balance;
  }
  .fichero-panel p { font-size: var(--t-base); color: var(--hueso); max-width: 50ch; text-wrap: pretty; }
  .fichero-panel.cambia { animation: cambia 220ms cubic-bezier(.2,.8,.2,1); }
}

@keyframes cambia {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Contacto ───────────────────────────────────────────── */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: start;
}

.contacto-entrada {
  max-width: 34ch;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--hueso-2);
  text-wrap: pretty;
}

/* La segunda placa: el número grabado. Es la acción más probable de la
   página, por eso es el único otro lugar donde el latón es superficie. */
.placa-wasap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding: 44px 30px 42px;
  text-align: center;
  transition: transform 140ms ease-out;
}
.placa-wasap::before { inset: 10px; }
.placa-wasap .tornillo:nth-of-type(1) { top: 50%; left: 22px; margin-top: -6px; }
.placa-wasap .tornillo:nth-of-type(2) { top: 50%; right: 22px; margin-top: -6px; }

/* Al pasar o enfocar, un brillo cruza el metal una vez. */
.placa-wasap:hover::after,
.placa-wasap:focus-visible::after {
  transform: translateX(260%) skewX(-12deg);
  transition: transform 700ms cubic-bezier(.3,.7,.3,1);
}
/* Y los tornillos dan un cuarto de vuelta: la placa responde entera. */
.placa-wasap .tornillo { transition: transform 420ms cubic-bezier(.3,.8,.3,1); }
.placa-wasap:hover .tornillo,
.placa-wasap:focus-visible .tornillo { transform: rotate(90deg); }
.placa-wasap:active { transform: translateY(1px); }

.placa-wasap span,
.placa-wasap em {
  font-size: var(--t-sm);
  font-weight: 700;
  font-style: normal;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.placa-wasap em { font-weight: 400; }
.placa-wasap strong {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

.contacto-fino { margin-top: 18px; font-size: var(--t-sm); color: var(--hueso-2); }

.pliego {
  display: grid;
  gap: 18px;
  padding: 30px;
  background: var(--yerba);
  border-radius: var(--r-placa);
}

.campo { display: grid; gap: 7px; }
.campo label { font-size: var(--t-sm); font-weight: 700; }

.pliego input,
.pliego textarea {
  font-family: var(--palo);
  font-size: 16px;
  color: var(--hueso);
  background: var(--yerba-honda);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-campo);
}
.pliego input { min-height: 50px; padding-inline: 14px; }
.pliego textarea { padding: 12px 14px; resize: vertical; line-height: 1.5; }

.pliego input::placeholder,
.pliego textarea::placeholder { color: var(--tenue); }

.pliego input:focus,
.pliego textarea:focus { outline: 2px solid var(--laton); outline-offset: 0; border-color: var(--laton); }

.pliego input.con-error,
.pliego textarea.con-error { border-color: var(--error); outline: 1px solid var(--error); outline-offset: 0; }

.acuse {
  padding: 14px 16px;
  background: var(--yerba-honda);
  border-left: 3px solid var(--laton);
  font-size: var(--t-sm);
}

/* ── Pie: el único tramo de yerba a lo ancho ────────────── */

.pie { background: var(--yerba); }

.pie-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px 40px;
  padding-block: 34px 42px;
  font-size: var(--t-sm);
  color: var(--yerba-texto);
}

.pie-marca {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--laton);
}
.pie-marca span {
  display: block;
  margin-top: 4px;
  font-family: var(--palo);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--hueso);
}

.pie a { color: var(--laton); }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Tablet ─────────────────────────────────────────────── */

@media (max-width: 960px) {
  .libro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libro > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .libro > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--linea); }

  .portada-pie { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .riel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .riel li:nth-child(2)::before { right: 0; }

  .contacto { grid-template-columns: minmax(0, 1fr); }
}

/* ── Celular ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .placa-tapa { padding: 64px 30px; }
  .placa::before { inset: 10px; }
  .tornillo:nth-of-type(1) { top: 18px; left: 18px; }
  .tornillo:nth-of-type(2) { top: 18px; right: 18px; }
  .tornillo:nth-of-type(3) { bottom: 18px; left: 18px; }
  .tornillo:nth-of-type(4) { bottom: 18px; right: 18px; }

  /* Dos columnas también acá: ocho celdas apiladas eran una pantalla y media. */
  .libro > div { padding: 18px 14px 20px 0; }
  .libro > div:nth-child(even) { padding-left: 14px; }
  .libro .valor { font-size: 25px; margin-bottom: 6px; }

  .quien { grid-template-columns: minmax(0, 1fr); }
  .quien-retrato { max-width: 220px; }

  .alcance { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  /* El riel se para: corre vertical a la izquierda de las paradas. */
  .riel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .riel li { padding: 4px 0 34px 58px; }
  .riel li::before,
  .riel li:nth-child(2)::before { top: 0; bottom: 0; left: 16px; right: auto; width: 2px; height: auto; }
  .riel li:last-child::before { display: none; }

  .pliego { padding: 22px; }
}

@media (max-width: 480px) {
  .marca { font-size: 22px; }
  .btn-chico { padding-inline: 12px; font-size: 13px; }
}

/* ── Movimiento ─────────────────────────────────────────────
   Exagerado a propósito, pero todo sale del mismo objeto: una placa de
   metal que se cuelga, se graba y se atornilla. No hay fundidos genéricos
   en cada sección.

   Al cargar (≈3.5 s):
     0      la placa baja colgada del borde de arriba y se balancea
     450    la letra se graba palabra por palabra
     1150   los cuatro tornillos entran girando, uno por uno, con rebote
     2250   un brillo fuerte cruza el latón
   Al scrollear, una vez cada uno:
     las condiciones se estampan y los números cuentan hasta su valor;
     el riel se traza de parada a parada y cada parada late;
     la placa del WhatsApp se cuelga igual que la del titular.
   Al mover el mouse sobre una placa, se inclina en 3D y la luz la sigue.

   script.js marca .espera solo en lo que arranca fuera de pantalla, así
   que sin JS, o si ya se ve al cargar, nada queda escondido. Todo va
   dentro de no-preference: con movimiento reducido la página está quieta
   desde el primer cuadro. */

@property --rx   { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --ry   { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --baja { syntax: '<length>';     inherits: false; initial-value: 0px; }
@property --luz  { syntax: '<number>';     inherits: false; initial-value: 0; }
@property --mx   { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --my   { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

@media (prefers-reduced-motion: no-preference) {

  /* Una sola lista de transformaciones para todo lo que le pasa a una
     placa (colgarse, inclinarse, hundirse), así se interpolan sin saltos. */
  .placa,
  .placa-wasap {
    transform: perspective(1100px) translateY(var(--baja)) rotate(0deg) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), --rx 260ms cubic-bezier(.2,.8,.2,1),
                --ry 260ms cubic-bezier(.2,.8,.2,1), --baja 90ms ease-out, --luz 320ms ease-out;
    will-change: transform;
  }
  .placa-wasap:active { --baja: 3px; transform: perspective(1100px) translateY(var(--baja)) rotate(0deg) rotateX(var(--rx)) rotateY(var(--ry)); }

  /* La luz que sigue al mouse, encima del cepillado. */
  .placa {
    background:
      radial-gradient(circle at var(--mx) var(--my), rgba(255, 242, 205, calc(var(--luz) * 0.55)), transparent 42%),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
      linear-gradient(104deg, var(--laton-sombra), var(--laton) 30%, var(--laton-luz) 58%, var(--laton) 82%, var(--laton-sombra));
  }

  .placa::after {
    width: 60%;
    background: linear-gradient(100deg, transparent, rgba(255, 246, 220, 0.75) 50%, transparent);
  }

  /* 1 · Colgarse */
  .placa-tapa { animation: colgar 1150ms cubic-bezier(.3,.7,.3,1) backwards; }

  /* 2 · Grabarse: script.js parte el titular en palabras con --n. */
  .placa-tapa h1 .palabra {
    display: inline-block;
    animation: grabar 700ms cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(450ms + var(--n) * 75ms);
  }

  /* 3 · Atornillarse */
  .placa-tapa .tornillo { animation: atornillar 720ms cubic-bezier(.25,.8,.3,1) backwards; }
  .placa-tapa .tornillo:nth-of-type(1) { animation-delay: 1150ms; }
  .placa-tapa .tornillo:nth-of-type(2) { animation-delay: 1300ms; }
  .placa-tapa .tornillo:nth-of-type(3) { animation-delay: 1450ms; }
  .placa-tapa .tornillo:nth-of-type(4) { animation-delay: 1600ms; }

  /* 4 · Brillar */
  .placa-tapa::after { animation: brillo 1300ms 2250ms cubic-bezier(.3,.6,.3,1) backwards; }

  /* La placa del WhatsApp: se cuelga cuando llega, más rápido. */
  .placa-wasap.espera { opacity: 0; }
  .placa-wasap.anda { animation: colgar 950ms cubic-bezier(.3,.7,.3,1) backwards; }
  .placa-wasap.espera .tornillo { opacity: 0; }
  .placa-wasap.anda .tornillo { animation: atornillar 650ms cubic-bezier(.25,.8,.3,1) backwards; }
  .placa-wasap.anda .tornillo:nth-of-type(1) { animation-delay: 700ms; }
  .placa-wasap.anda .tornillo:nth-of-type(2) { animation-delay: 850ms; }
  .placa-wasap.anda::after { animation: brillo 1100ms 1450ms cubic-bezier(.3,.6,.3,1) backwards; }

  /* Condiciones: cada valor cae como un sello, de a uno. */
  .libro > div:nth-child(1) { --n: 0; }
  .libro > div:nth-child(2) { --n: 1; }
  .libro > div:nth-child(3) { --n: 2; }
  .libro > div:nth-child(4) { --n: 3; }
  .libro > div:nth-child(5) { --n: 4; }
  .libro > div:nth-child(6) { --n: 5; }
  .libro > div:nth-child(7) { --n: 6; }
  .libro > div:nth-child(8) { --n: 7; }

  .libro .valor { transform-origin: 0 100%; }
  .libro.espera .valor { opacity: 0; transform: scale(2.1) translateY(-10px); filter: blur(10px); }
  .libro.espera dt,
  .libro.espera .nota { opacity: 0; transform: translateY(14px); }

  .libro.anda .valor {
    transition: opacity 380ms ease-out, filter 420ms ease-out,
                transform 620ms cubic-bezier(.2,1.5,.4,1);
    transition-delay: calc(var(--n) * 110ms);
  }
  .libro.anda dt,
  .libro.anda .nota {
    transition: opacity 400ms ease-out, transform 500ms cubic-bezier(.2,.8,.2,1);
    transition-delay: calc(var(--n) * 110ms + 260ms);
  }

  /* Riel */
  .riel li { --i: 0; }
  .riel li:nth-child(2) { --i: 1; }
  .riel li:nth-child(3) { --i: 2; }
  .riel li:nth-child(4) { --i: 3; }

  .riel.espera li::before { transform: scaleX(0); transform-origin: left center; }
  .riel.espera li::after { transform: scale(0) rotate(-200deg); }
  .riel.espera li > * { opacity: 0; transform: translateY(30px); filter: blur(5px); }

  .riel.anda li::before {
    transform: none;
    transition: transform 460ms cubic-bezier(.6,0,.4,1) calc(var(--i) * 480ms + 240ms);
  }
  .riel.anda li::after {
    transform: none;
    transition: transform 520ms cubic-bezier(.3,1.9,.5,1) calc(var(--i) * 480ms);
    animation: latir 1000ms ease-out calc(var(--i) * 480ms + 260ms) backwards;
  }
  .riel.anda li > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 420ms ease-out calc(var(--i) * 480ms + 120ms),
                filter 420ms ease-out calc(var(--i) * 480ms + 120ms),
                transform 560ms cubic-bezier(.2,1.3,.4,1) calc(var(--i) * 480ms + 120ms);
  }
}

/* En celular el riel es vertical, así que se traza hacia abajo. */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .riel.espera li::before { transform: scaleY(0); transform-origin: center top; }
}

/* Colgada del borde de arriba: baja, se pasa, vuelve y se asienta. */
@keyframes colgar {
  0%   { opacity: 0; transform-origin: 50% 0; transform: perspective(1100px) translateY(-140px) rotate(-8deg) rotateX(28deg) rotateY(0deg); }
  45%  { opacity: 1; transform-origin: 50% 0; transform: perspective(1100px) translateY(14px) rotate(3.5deg) rotateX(-6deg) rotateY(0deg); }
  65%  {             transform-origin: 50% 0; transform: perspective(1100px) translateY(-6px) rotate(-1.8deg) rotateX(2deg) rotateY(0deg); }
  82%  {             transform-origin: 50% 0; transform: perspective(1100px) translateY(2px) rotate(0.7deg) rotateX(0deg) rotateY(0deg); }
  100% { opacity: 1; transform-origin: 50% 0; transform: perspective(1100px) translateY(0px) rotate(0deg) rotateX(0deg) rotateY(0deg); }
}

/* Cada palabra sube desde el fondo del metal, desenfocada, y se asienta. */
@keyframes grabar {
  0%   { opacity: 0; transform: translateY(0.45em) scale(1.25); filter: blur(12px); text-shadow: none; }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes atornillar {
  0%   { opacity: 0; transform: rotate(-1080deg) scale(3); }
  50%  { opacity: 1; transform: rotate(-80deg) scale(0.8); }
  72%  { transform: rotate(14deg) scale(1.15); }
  100% { opacity: 1; transform: none; }
}

@keyframes brillo {
  from { transform: translateX(-120%) skewX(-14deg); }
  to   { transform: translateX(240%) skewX(-14deg); }
}

@keyframes latir {
  0%   { box-shadow: 0 0 0 6px var(--campo), 0 0 0 6px rgba(199, 154, 63, 0.9); }
  100% { box-shadow: 0 0 0 6px var(--campo), 0 0 0 34px rgba(199, 154, 63, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}