/* La página es una carpeta de historia clínica: tapa de papel jaspeado, hojas, etiquetas y separadores. */

@font-face {
  font-family: Archivo;
  src: url("/letras/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: oklch(0.957 0.008 250);
  --papel-2: oklch(0.915 0.014 250);
  --papel-3: oklch(0.865 0.02 250);
  --tinta: oklch(0.24 0.06 262);
  --tinta-suave: oklch(0.4 0.055 262);
  --naranja: oklch(0.76 0.15 58);
  --naranja-vivo: oklch(0.8 0.15 62);
  --tapa: oklch(0.31 0.13 265);

  --col: 44vw;          /* ancho de la tapa fija */
  --margen: 4vw;        /* margen de la columna de lectura */
  --borde: 20px;        /* aire alrededor de la tapa */
  --banda: clamp(200px, 30svh, 300px); /* alto de la tapa en pantallas estrechas */

  --t-pequeno: 1rem;
  --t-texto: clamp(1.125rem, 1.39vw, 1.25rem);
  --t-grande: clamp(1.375rem, 1.95vw, 1.75rem);
  --t-titular: clamp(1.875rem, 3.1vw, 2.75rem);
  --t-titulo: clamp(1.75rem, 2.8vw, 2.5rem);
  --t-banda: clamp(2.5rem, 6vw, 5.375rem);
  --t-rotulo: min(25.5vw, 32svh);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-texto);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  caret-color: var(--tinta);
  accent-color: var(--tinta);
}

::selection { background: var(--tinta); color: var(--papel); }

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }

/* Marco de teclado: tinta con un halo de papel, para que se vea también sobre la tapa */
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 9px var(--papel); }

h2, .titular, .sencilla h1 {
  font-size: var(--t-titulo);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 620;
  text-wrap: balance;
}

.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 10;
  background: var(--tinta); color: var(--papel); padding: 12px 18px;
}
.saltar:focus { top: 12px; }

/* ---------- Botón: una sola forma en toda la página ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  background: var(--naranja); color: var(--tinta);
  font: inherit; font-weight: 650; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: 0; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 140ms var(--ease-out), background-color 140ms ease;
}
.boton:active { transform: scale(0.97); }
.boton-menor { min-height: 44px; padding: 0 18px; font-size: var(--t-pequeno); }
.boton[disabled] { opacity: 0.6; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--naranja-vivo); }
  .barra nav a:hover, .pie-etiqueta a:hover { text-decoration-color: currentColor; }
}

/* ---------- La tapa fija y la barra ---------- */

.tapa { display: none; }

.barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 28px;
}
.barra nav { display: none; }
.barra-marca {
  font-weight: 700; font-size: var(--t-texto); letter-spacing: -0.02em; text-decoration: none;
  background: var(--papel); padding: 8px 14px;
}
.barra nav a { text-decoration-color: transparent; transition: text-decoration-color 140ms ease; }

/* ---------- Tramos: lámina sobre la tapa + columna de lectura ---------- */

.tramo { position: relative; z-index: 1; display: flex; flex-direction: column; }

.lamina {
  position: relative;
  margin: 12px;
  padding: 36px 16px;
  display: grid; place-items: center;
  background: var(--tapa) url("/imagenes/tapa-azul.webp") center / cover;
  border-radius: 6px;
}
div.lamina { display: none; }

.lectura { padding: 56px 16px 72px; }
.lectura > * + * { margin-top: 24px; }
.lectura p, .lectura li { max-width: 58ch; }
.grande { font-size: var(--t-grande); line-height: 1.35; }

.titular { font-size: var(--t-titular); line-height: 1.12; }
.entrada { max-width: 54ch; text-wrap: pretty; }
.accion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.accion-nota { font-size: var(--t-pequeno); color: var(--tinta-suave); max-width: 26ch; }

/* El nombre a tamaño de monumento */
.rotulo {
  position: relative; z-index: 2; height: 1em;
  margin: calc(var(--banda) + 12px - 0.56em) 0 0;
  font-size: var(--t-rotulo-movil, 37vw); line-height: 1; font-weight: 620; color: var(--tinta); letter-spacing: -0.04em;
  text-transform: lowercase; white-space: nowrap; pointer-events: none;
}
/* Dos copias superpuestas: clara sobre la tapa, oscura sobre el papel */
.rotulo span { position: absolute; left: 14px; top: 0; }
.rotulo-claro { color: var(--papel); clip-path: inset(-10% -5% calc(100% - 0.56em) -5%); }
.rotulo-oscuro { clip-path: inset(0.56em -5% -30% -5%); }

/* ---------- Hojas, tiras y etiquetas ---------- */

.hoja {
  width: min(100%, 500px);
  background: var(--papel); color: var(--tinta);
  padding: 30px 34px 36px;
  border-radius: 2px;
  font-size: var(--t-texto); line-height: 1.4;
}
.hoja-titulo { font-size: var(--t-grande); font-weight: 650; letter-spacing: -0.02em; margin-bottom: 20px; }

.nota dl { display: grid; gap: 14px; }
.nota dt { font-weight: 650; }
.nota [data-apartado] { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
/* Con JavaScript, la nota de la portada arranca vacía y se rellena al dictar */
.js [data-dictado]:not(.completo) [data-apartado]:not(.hecho) { opacity: 0.16; }
.js [data-dictado]:not(.completo) [data-apartado]:not(.hecho) dd { opacity: 0; }

.dictado { width: min(100%, 430px); display: grid; gap: 0; }
.tira {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--papel-2); color: var(--tinta);
  padding: 16px 20px; margin: 0 -10px -6px 18px;
  min-height: calc(3 * 1.35em + 32px);
  font-size: var(--t-pequeno); line-height: 1.35;
  border-radius: 2px;
  transform: rotate(-1.2deg);
}
.ondas { display: flex; align-items: center; gap: 3px; height: 1.35em; }
.ondas i { width: 3px; height: 100%; background: var(--tinta); transform: scaleY(0.25); transform-origin: center; border-radius: 2px; }
.dictando .ondas i { animation: onda 700ms var(--ease-in-out) infinite alternate; }
.dictando .ondas i:nth-child(2) { animation-delay: -420ms; }
.dictando .ondas i:nth-child(3) { animation-delay: -160ms; }
.dictando .ondas i:nth-child(4) { animation-delay: -560ms; }
.dictando .ondas i:nth-child(5) { animation-delay: -300ms; }
.dictando .ondas i:nth-child(6) { animation-delay: -640ms; }
.dictando .ondas i:nth-child(7) { animation-delay: -90ms; }
@keyframes onda { to { transform: scaleY(1); } }

.ejemplo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-top: 18px; font-size: var(--t-pequeno); color: var(--tinta-suave);
}
.repetir {
  font: inherit; font-weight: 650; color: inherit; background: none; border: 0; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; touch-action: manipulation;
}

.agenda ul { display: grid; gap: 10px; }
.agenda li { display: grid; grid-template-columns: 4.2ch 1fr auto; gap: 14px; align-items: baseline; }
.agenda li span:first-child { font-weight: 650; }
.agenda em { font-style: normal; background: var(--papel-2); padding: 2px 10px; font-size: var(--t-pequeno); }

.pareja { position: relative; width: min(100%, 540px); padding-bottom: 170px; }
.pareja .dicho { width: 84%; transform: rotate(-2.2deg); background: var(--papel-2); }
.pareja .nota-corregida { position: absolute; right: 0; bottom: 0; width: 72%; transform: rotate(1.6deg); }
.nota-corregida del { color: var(--tinta-suave); text-decoration-thickness: 2px; }
.nota-corregida ins { text-decoration: none; background: var(--papel-3); padding: 0 4px; font-weight: 650; }
.pareja .ejemplo { margin-top: 14px; }

.etiqueta { background: var(--papel); color: var(--tinta); border-radius: 12px; padding: 28px 32px; width: min(100%, 500px); }
.etiqueta-cable svg { width: 100%; height: auto; }
.cable { fill: none; stroke: var(--tinta); stroke-width: 13; stroke-linecap: round; }
.clavija, .hueco { fill: var(--tinta); }
.clavija-punta { fill: var(--papel-3); }
.contacto { fill: none; stroke: var(--tinta); stroke-width: 3; }
.contacto-claro { fill: none; stroke: var(--papel-3); stroke-width: 3; }
.toma { fill: var(--papel-3); }

/* Las preguntas como separadores con pestaña */
.indice { width: min(100%, 500px); display: grid; }
.indice a {
  display: block; background: var(--papel); color: var(--tinta);
  padding: 15px 22px 21px; margin: 0 9% -7px 0;
  border-radius: 10px 10px 0 0;
  font-weight: 650; line-height: 1.25; text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.indice a:nth-child(even) { background: var(--papel-2); margin: 0 0 -7px 9%; }
.indice a:last-child { margin-bottom: 0; padding-bottom: 20px; border-radius: 10px 10px 2px 2px; }
.indice a:active { transform: translateY(2px); }
@media (hover: hover) and (pointer: fine) { .indice a:hover { transform: translateY(-4px); } }
.etiqueta-precio { padding: 20px 32px 30px; width: auto; }
.cifra { display: block; font-size: clamp(6rem, 13vw, 12.5rem); line-height: 0.95; font-weight: 620; letter-spacing: -0.04em; white-space: nowrap; }
.periodo { display: block; font-size: var(--t-grande); font-weight: 600; margin-top: 4px; }
/* La oferta de fundador: una etiqueta más pequeña pegada sobre la del precio */
.lamina-precio { align-content: center; }
.etiqueta-fundador {
  width: min(88%, 380px); margin-top: -18px; justify-self: end;
  background: var(--papel-2); padding: 18px 24px 20px;
  font-weight: 600; line-height: 1.3;
}
.js .etiqueta-fundador.posa { transform: translateY(34px) rotate(3deg); }
.js .etiqueta-fundador.posa.visto, .etiqueta-fundador { transform: rotate(1.6deg); }
.cifra-menor { display: block; font-size: var(--t-titulo); font-weight: 620; letter-spacing: -0.03em; line-height: 1.1; }

/* ---------- Textos de la columna ---------- */

.pasos { display: grid; gap: 28px; margin-top: 36px; }
.pasos strong { display: block; font-size: var(--t-grande); font-weight: 650; letter-spacing: -0.01em; }

.hechos { display: grid; gap: 22px; margin-top: 36px; font-size: var(--t-grande); line-height: 1.35; }

.respuestas { display: grid; gap: 22px; margin-top: 36px; }
.respuestas strong { font-weight: 650; }
.respuestas p { scroll-margin-top: 40px; }

/* ---------- Dos formas: dos campos de papel, a partes iguales ---------- */

.formas { position: relative; z-index: 2; background: var(--papel); }
.formas h2 { padding: 88px 16px 40px; font-size: var(--t-banda); line-height: 0.98; letter-spacing: -0.04em; }
.formas-campos { display: grid; grid-template-columns: 1fr; }
.forma { position: relative; display: grid; place-items: center; padding: 88px 16px 56px; overflow: hidden; }
.forma > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.separador {
  position: relative; width: min(100%, 440px);
  background: var(--papel); padding: 32px 30px 34px;
  border-radius: 0 2px 2px 2px;
  display: grid; gap: 20px; justify-items: start;
}
.separador h3 {
  position: absolute; left: 0; bottom: 100%;
  background: var(--papel); padding: 12px 26px 6px;
  border-radius: 10px 10px 0 0;
  font-size: var(--t-grande); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2;
}
.forma-grabacion .separador { border-radius: 2px 0 2px 2px; }
.forma-grabacion .separador h3 { left: auto; right: 0; }

/* ---------- Lista de espera: la ficha ---------- */

.lista { position: relative; z-index: 2; padding: 72px 12px; overflow: hidden; background: var(--papel-3); scroll-margin-top: 0; }
.lista-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha {
  position: relative; max-width: 1080px; margin: 0 auto;
  background: var(--papel); padding: 36px 20px 40px; border-radius: 2px;
  display: grid; gap: 32px;
}
.ficha h2 { letter-spacing: -0.035em; }
.aviso { display: none; margin-top: 24px; background: var(--tinta); color: var(--papel); padding: 16px 20px; max-width: 40ch; font-weight: 550; }
.lista:target .aviso, .lista.abierta .aviso { display: block; }
.oferta { margin-top: 20px; max-width: 34ch; }
.ficha.hecha .oferta { display: none; }
.estado { margin-top: 24px; font-size: var(--t-grande); font-weight: 600; max-width: 30ch; }
.estado:empty { display: none; }
.estado:focus { outline: none; }
.ficha.hecha form, .ficha.hecha .aviso { display: none; }

form { display: grid; gap: 22px; }
.campo { display: grid; gap: 8px; align-content: start; }
.campo > label, .campo > legend { font-weight: 600; font-size: var(--t-pequeno); }
.opcional { font-weight: 400; color: var(--tinta-suave); margin-left: 6px; }
input[type="email"], input[type="number"], textarea {
  width: 100%; font: inherit; color: var(--tinta);
  background: var(--papel-2); border: 0; border-bottom: 2px solid var(--tinta); border-radius: 0;
  padding: 12px 14px; min-height: 52px;
}
textarea { resize: vertical; min-height: 84px; overflow-wrap: anywhere; }
input::placeholder, textarea::placeholder { color: var(--tinta-suave); }
input:focus-visible, textarea:focus-visible { outline-offset: 0; }
.campos-dos { display: grid; gap: 22px; }
fieldset.campo { display: flex; flex-wrap: wrap; gap: 8px 24px; }
fieldset.campo legend { margin-bottom: 8px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 400; }
.opcion input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.acepta .opcion { font-size: var(--t-pequeno); }

/* ---------- Pie: el nombre sobre la tapa ---------- */

.pie { position: relative; z-index: 2; overflow: hidden; min-height: 78svh; display: flex; flex-direction: column; justify-content: space-between; background: var(--tapa); }
.pie-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pie-etiqueta { position: relative; align-self: flex-start; margin: 24px 16px; background: var(--papel); padding: 16px 22px; border-radius: 10px; font-size: var(--t-pequeno); }
.pie-etiqueta a { text-decoration-color: transparent; transition: text-decoration-color 140ms ease; }
@media (hover: none) { .pie-etiqueta a, .barra nav a { text-decoration-color: currentColor; } }
.creditos { font-size: var(--t-pequeno); color: var(--tinta-suave); margin-top: 6px; }
.pie-rotulo {
  position: relative; color: var(--papel);
  font-size: var(--t-pie, 38vw); line-height: 1.1; font-weight: 620; letter-spacing: -0.04em;
  text-transform: lowercase; white-space: nowrap; padding: 0 2vw 0.03em; margin-top: -0.12em; transform-origin: left bottom;
}

/* ---------- Páginas sencillas: legales y confirmación ---------- */

.sencilla { padding: 0 16px 96px; }
.sencilla .banda { height: 96px; margin: 12px -4px 40px; background: var(--tapa) url("/imagenes/tapa-azul.webp") center / cover; border-radius: 6px; display: flex; align-items: flex-end; }
.sencilla .banda a { background: var(--papel); padding: 8px 14px; margin: 12px; font-weight: 700; font-size: var(--t-texto); letter-spacing: -0.02em; text-decoration: none; }
.sencilla main { max-width: 66ch; }
.sencilla h1 { margin-bottom: 28px; }
.sencilla h2 { font-size: var(--t-grande); letter-spacing: -0.01em; line-height: 1.25; margin: 40px 0 10px; }
.sencilla p + p, .sencilla ul + p, .sencilla p + ul { margin-top: 14px; }
.sencilla main ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
.sencilla .pendiente { background: var(--papel-3); padding: 0 6px; font-weight: 650; }
.sencilla .volver { margin-top: 48px; }
.sencilla .nota-legal { margin-top: 48px; background: var(--papel-2); padding: 16px 20px; font-size: var(--t-pequeno); }

/* ---------- Las hojas se posan sobre la tapa al llegar (solo con JavaScript; siempre visibles) ---------- */

.js .posa { transform: translateY(34px) rotate(-2.4deg); transition: transform 800ms var(--ease-out); }
.js .posa.visto { transform: none; }

/* ---------- Pantallas estrechas: la tapa arriba y el nombre cruzando su borde ---------- */

@media (max-width: 1079.98px) {
  .tapa {
    display: block; position: absolute; z-index: 0;
    top: 12px; left: 12px; right: 12px; height: var(--banda);
    background: var(--tapa); border-radius: 6px; overflow: hidden;
  }
  .tapa img { width: 100%; height: 100%; object-fit: cover; }
  .barra { top: 12px; left: 12px; right: 12px; padding: 14px; justify-content: flex-end; }
  .barra-marca { display: none; }
  .portada .lectura { order: 1; padding-top: 20px; padding-bottom: 36px; }
  .portada .lamina { order: 2; }
}

/* ---------- Escritorio: escenario partido ---------- */

@media (min-width: 1080px) {
  .tapa {
    display: block; position: fixed; z-index: 0;
    top: var(--borde); bottom: var(--borde); left: var(--borde);
    width: calc(var(--col) - var(--borde));
    background: var(--tapa); border-radius: 6px; overflow: hidden;
  }
  .tapa img { width: 100%; height: 114%; object-fit: cover; }
  /* Las gomas de la carpeta */
  .tapa::before, .tapa::after {
    content: ""; position: absolute; z-index: 1; right: -60px; width: 300px; height: 9px;
    background: var(--tinta);
  }
  .tapa::before { top: 78px; transform: rotate(45deg); }
  .tapa::after { bottom: 78px; transform: rotate(-45deg); }

  .barra { left: var(--col); padding: 28px var(--margen); justify-content: flex-end; gap: 28px; }
  .barra-marca { display: none; }
  .barra nav { display: flex; gap: 24px; font-size: var(--t-pequeno); white-space: nowrap; }
  .barra .boton-menor, .barra .nav-extra { display: none; }
  @media (min-width: 1280px) { .barra .boton-menor { display: inline-flex; } .barra .nav-extra { display: inline; } .barra nav { margin-right: 8px; } }

  .tramo { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); min-height: 100svh; }
  .lamina, div.lamina {
    display: grid; position: sticky; top: 0; height: 100svh;
    margin: 0; padding: calc(var(--borde) + 28px) 28px calc(var(--borde) + 28px) calc(var(--borde) + 28px);
    background: none; border-radius: 0;
  }
  .lectura { padding: 120px var(--margen); display: flex; flex-direction: column; justify-content: center; }
  .lectura > * + * { margin-top: 28px; }

  .portada { height: 100svh; min-height: 640px; }
  .portada .lamina { align-items: start; padding-top: clamp(36px, 7svh, 80px); height: 100%; position: relative; }
  .portada .lectura { justify-content: flex-start; padding-top: clamp(104px, 17svh, 168px); padding-bottom: 0; }
  .portada .dictado { width: min(100%, 440px); }
  .portada .hoja { padding: 22px 26px 22px; font-size: var(--t-pequeno); }
  .portada .hoja-titulo { margin-bottom: 14px; font-size: var(--t-texto); }
  .portada .ejemplo { margin-top: 12px; }
  .portada .nota dl { gap: 10px; }

  .rotulo {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0;
    height: 1em; font-size: var(--t-rotulo); transform-origin: 70% 100%;
  }
  .rotulo span { display: block; left: 33vw; top: auto; bottom: 0.1em; line-height: 1; }
  .rotulo-claro { color: var(--papel); clip-path: inset(-20% calc(100% - 11vw) -20% -5%); }
  .rotulo-oscuro { clip-path: inset(-20% -5% -20% 11vw); }

  .formas h2 { padding: 140px var(--margen) 56px; }
  .formas-campos { grid-template-columns: 1fr 1fr; }
  .forma { min-height: 82svh; padding: 120px 32px 96px; }
  .separador { padding: 40px 40px 44px; }

  .lista { padding: 140px var(--margen); }
  .ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; padding: 64px; }
  .campos-dos { grid-template-columns: 1fr 1fr; align-items: start; }

  .pie { min-height: 92svh; }
  .pie-etiqueta { margin: 32px; }

  .sencilla { padding: 0 var(--margen) 120px calc(18vw + var(--margen)); }
  .sencilla .banda { position: fixed; top: var(--borde); bottom: var(--borde); left: var(--borde); width: calc(18vw - var(--borde)); height: auto; margin: 0; align-items: flex-start; }
  .sencilla main { padding-top: 96px; }
}

/* ---------- Movimiento ligado al desplazamiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1080px) {
      .tapa img { animation: deriva linear both; animation-timeline: scroll(root); }
      .rotulo { animation: mengua linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    }
    .pie-rotulo { animation: crece linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes deriva { to { transform: translateY(-12%); } }
@keyframes mengua { to { transform: scale(0.94); } }
@keyframes crece { from { transform: scale(0.93); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .posa { transform: none; transition: none; }
  .js .etiqueta-fundador.posa { transform: rotate(1.6deg); }
  .indice a { transition: none; }
  .dictando .ondas i { animation: none; transform: scaleY(0.6); }
  .boton { transition: none; }
}