/* Páginas públicas de Kovalsky: landing, alta, cuenta y textos legales.
   Un plano técnico en claro: papel blanco, rejilla tenue, filetes finos y
   tinta casi negra. El azul es solo para «Apta» (y el anillo de foco).
   Schibsted Grotesk habla, Red Hat Mono referencia (páginas, figuras, preguntas) y
   Newsreader en cursiva solo cita lo que dice un pliego. */

/* ── Fuentes (OFL, servidas desde /static/fonts) ─────────────────────── */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/schibsted-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Red Hat Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/static/fonts/redhat-mono.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/static/fonts/newsreader-italic.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --blanco: #ffffff;
  --hueso: #f6f6f4;        /* superficies secundarias */
  --tinta: #151515;        /* texto y filetes fuertes */
  --tinta-2: #4f4f4b;      /* texto secundario: 8,1:1 sobre blanco */
  --tinta-3: #67675f;      /* referencias y filas apagadas: 5,8:1 sobre blanco */
  --filete: #e2e2de;
  --rejilla: #eeeeeb;
  --barra: #e9e9e6;        /* renglones del pliego dibujado */
  --azul: #1d4ed8;         /* solo «Apta» y foco */

  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cita: 'Newsreader', Georgia, 'Times New Roman', serif;

  --ancho: 84rem;
  --margen: clamp(1rem, 4vw, 2.5rem);

  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  font-feature-settings: 'kern', 'liga'; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; text-wrap: balance; }
p, dl, dd, figure, blockquote { margin: 0; }
p, dd { text-wrap: pretty; }
a { color: var(--tinta); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
#contenido:focus { outline: none; }
::selection { background: #dfe6fb; color: var(--tinta); }
svg { display: block; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.6rem 1rem; background: var(--tinta); color: var(--blanco); }
.saltar:focus { top: 1rem; color: var(--blanco); }

/* Referencias documentales: siempre en mono. */
.ref, .pie-fig, .nota-ref, .faq-n, .cob-etiqueta, .correo-campo, .tabla caption, .tabla th {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.boton, main button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.35rem;
  border: 1px solid var(--tinta); border-radius: 2px;
  background: var(--tinta); color: var(--blanco);
  font: 500 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.boton:hover, main button:hover { background: #333331; color: var(--blanco); }
.boton:active, main button:active { transform: translateY(1px); }
.boton-linea { background: var(--blanco); color: var(--tinta); }
.boton-linea:hover { background: var(--hueso); color: var(--tinta); }
.boton-pequeno { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.9375rem; }

/* ── Cabecera ────────────────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--tinta); }
.cabecera-in { max-width: var(--ancho); margin: 0 auto; padding: 0.7rem var(--margen); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-secciones { display: none; list-style: none; margin: 0 0.75rem 0 0; padding: 0; gap: 0.25rem; }
.nav a:not(.boton) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.7rem; color: var(--tinta-2); font-size: 0.9375rem; text-decoration: none; }
.nav a:not(.boton):hover { color: var(--tinta); text-decoration: underline; }
.nav .nav-entrar { color: var(--tinta); font-weight: 500; }
@media (min-width: 56rem) { .nav-secciones { display: flex; } }

/* ── Secciones: ritmo variable ───────────────────────────────────────── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--margen) 0; }
.seccion > h2, .pasos-texto h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.875rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 20ch;
}
h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em; }

/* ── Hero: el plano anotado ──────────────────────────────────────────── */
.hero {
  border-bottom: 1px solid var(--filete);
  background-color: var(--blanco);
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -1px -1px;
}
/* La primera pantalla tiene que enseñar el titular, el subtítulo y las dos acciones: el relleno
   superior y el titular se miden también contra la altura de la ventana. */
.hero-in { max-width: var(--ancho); margin: 0 auto; padding: clamp(1.25rem, 5.5vh, 4.5rem) var(--margen) clamp(2.5rem, 5vw, 4rem); display: grid; gap: clamp(2.5rem, 5vw, 3rem); align-items: start; }
.hero h1 { font-size: clamp(2rem, min(1.3rem + 3.6vw, 8.2vh), 4rem); letter-spacing: -0.04em; line-height: 0.99; max-width: 15ch; }
.hero-sub { margin-top: clamp(0.9rem, 2.4vh, 1.5rem); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--tinta-2); max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 3.2vh, 2rem); }
.hero-nota { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--tinta-2); }

.plano { width: 100%; max-width: 50rem; justify-self: center; container-type: inline-size; }
.plano-marco { position: relative; }
.plano-guias { display: none; }
.hoja { position: relative; max-width: 22rem; margin: 0 auto; }
.hoja-svg { width: 100%; height: auto; overflow: visible; }
.hoja-papel { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1; }
.hoja-sombra { fill: var(--hueso); stroke: var(--filete); }
.hoja-doc { font-family: var(--mono); font-size: 11px; fill: var(--tinta-3); }
.hoja-filete { stroke: var(--filete); }
.hoja-tit { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--tinta); }
.r { fill: var(--barra); }
.r-marca { fill: var(--tinta); }
.r-duda { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 3 2; }
.pin circle { fill: var(--tinta); }
.pin text { font-family: var(--mono); font-size: 11px; font-weight: 500; fill: var(--blanco); text-anchor: middle; }
.pin-duda circle { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.5; }
.pin-duda text { fill: var(--tinta); }
.plano-guias .lineas path { stroke: var(--tinta); stroke-width: 1; fill: none; }
.plano-guias .lineas circle { fill: var(--tinta); }
.plano-guias .cruces path { stroke: #9a9a94; stroke-width: 1; fill: none; }

.sello {
  position: absolute; left: 71.9%; top: 9.6%;
  padding: 0.3rem 0.8rem 0.25rem; border: 2px solid var(--azul); background: var(--blanco);
  color: var(--azul); font: 500 1rem/1 var(--mono); letter-spacing: 0.14em;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: sellar 520ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}
@keyframes sellar {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1.7); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

.notas { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; font-size: 0.9375rem; line-height: 1.45; color: var(--tinta-2); }
.nota b { display: block; font-weight: 600; color: var(--tinta); }
.nota-ref { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.15rem; }
.nota-n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tinta); color: var(--blanco); font-size: 0.6875rem; }
.nota-2 .nota-n { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.pie-fig { margin-top: 1.25rem; }
.plano > .pie-fig { text-align: center; }

@container (min-width: 640px) {
  .plano-marco { aspect-ratio: 760 / 560; }
  .plano-guias { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  .hoja { position: absolute; left: 17.105%; top: 1.786%; width: 44.737%; max-width: none; margin: 0; }
  .notas { margin: 0; display: block; font-size: 0.875rem; line-height: 1.4; }
  /* Una columna de notas a la derecha; cada una arranca a la altura de su línea guía.
     Las marcas del pliego están separadas 115 unidades del viewBox (≥ 97 px a 640 px de ancho)
     y cada nota ocupa como mucho cuatro líneas cortas (≈ 78 px). */
  .nota { position: absolute; left: 64.5%; right: 0; transform: translateY(-0.7rem); }
  .nota-1 { top: 21.03%; }
  .nota-2 { top: 41.77%; }
  .nota-3 { top: 62.4%; }
  .nota-4 { top: 82.15%; }
  .nota-n { display: none; }
}

/* ── Fuentes: franja de cobertura ────────────────────────────────────── */
.cobertura { border-bottom: 1px solid var(--filete); }
.cobertura-in { max-width: var(--ancho); margin: 0 auto; padding: 1.1rem var(--margen); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; }
.cob-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0; }
.cob-lista li { font-size: 0.9375rem; color: var(--tinta); }
.cob-lista li + li::before { content: '/'; margin: 0 0.85rem; color: #a3a39d; }

/* ── El problema: dos dolores y la frase que los resuelve ──────────── */
.problema { display: grid; gap: 2.5rem 4rem; }
.dolor { border-top: 2px solid var(--tinta); padding-top: 1.25rem; }
.dolor h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -0.03em; line-height: 1.08; }
.dolor p { margin-top: 0.9rem; font-size: 1.125rem; line-height: 1.55; color: var(--tinta-2); max-width: 32em; }
.problema > h2 { order: 2; max-width: 24ch; padding-top: 0.5rem; }
@media (min-width: 52rem) { .problema { grid-template-columns: 1fr 1fr; } .problema > h2 { grid-column: 1 / -1; } }

/* ── El tablón ───────────────────────────────────────────────────────── */
.tablon > h2 { max-width: 22ch; }
.solucion-sub { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--tinta-2); max-width: 36em; }
.tablon-cabeza { display: grid; gap: 0.6rem 3rem; align-items: baseline; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--filete); }
.tablon-cabeza h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.tablon-cabeza p { color: var(--tinta-2); max-width: 34em; }
.tabla-marco { margin-top: 2.25rem; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.tabla caption { caption-side: bottom; text-align: left; padding-top: 0.9rem; }
.tabla thead { border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.tabla th { text-align: left; font-weight: 400; padding: 0.6rem 1rem 0.6rem 0; white-space: nowrap; }
.tabla td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.ref, .tabla td[data-col="Cierra"] { white-space: nowrap; }
.t-titulo { display: block; font-weight: 500; }
.t-motivo { display: block; margin-top: 0.25rem; color: var(--tinta-2); font-size: 0.875rem; }
.fila-no td, .fila-no .t-titulo, .fila-no .t-motivo { color: var(--tinta-3); }
.fila-no .t-titulo { font-weight: 400; }
.ref-aviso { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; color: var(--tinta); white-space: nowrap; }
.tablon-pie { margin-top: 1.25rem; }

/* Veredictos y estados: forma + palabra. */
.ver { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.ver-marca { width: 0.7rem; height: 0.7rem; border: 1.5px solid currentColor; flex: none; }
.ver-apto { color: var(--azul); }
.ver-apto .ver-marca { background: currentColor; }
.ver-dudosa { color: var(--tinta); }
.ver-dudosa .ver-marca { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.ver-no { color: var(--tinta-3); }
.est { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; color: var(--tinta); }
.est-marca { width: 0.55rem; height: 0.55rem; border: 1.5px solid currentColor; }
.est-cumple .est-marca, .est-encaja .est-marca { background: currentColor; }
.est-sin_datos .est-marca { border-style: dashed; border-radius: 50%; }
.est-no_encaja { color: var(--tinta-3); }

@media (max-width: 59.99rem) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla { display: flex; flex-direction: column; }
  .tabla caption { order: 2; }
  .tabla .num { font-variant-numeric: normal; }
  .tabla tbody { border-top: 1px solid var(--tinta); }
  .tabla tr { padding: 1rem 0; border-bottom: 1px solid var(--filete); display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
  .tabla td { padding: 0; border: 0; }
  .tabla td[data-col="Licitación"] { grid-column: 1 / -1; }
  .tabla td[data-col="Órgano"] { grid-column: 1 / -1; color: var(--tinta-2); font-size: 0.875rem; }
  .tabla td[data-col="Importe"] { text-align: left; }
  .tabla td[data-col="Cierra"] { font-size: 0.875rem; text-align: right; }
  .tabla td[data-col="Cita"] { grid-column: 1 / -1; white-space: normal; }
  .tabla td[data-col="Cita"] .ref-aviso { margin-left: 0.5rem; }
  .tabla td[data-col="Veredicto"] { grid-column: 1 / -1; }
}
@media (min-width: 48rem) { .tablon-cabeza { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .tabla td[data-col="Licitación"] { width: 40%; } }

/* ── Cómo funciona: secuencia vertical junto al email ────────────────── */
.pasos { display: grid; gap: 3rem; align-items: start; }
.pasos-lista { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: paso; }
.pasos-lista li { counter-increment: paso; position: relative; padding: 0 0 2rem 3rem; border-left: 1px solid var(--tinta); margin-left: 0.75rem; }
.pasos-lista li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos-lista li::before {
  content: counter(paso); position: absolute; left: -0.8rem; top: -0.1rem;
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--tinta); color: var(--blanco); font: 500 0.8125rem/1 var(--mono);
}
.pasos-lista p { margin-top: 0.45rem; color: var(--tinta-2); max-width: 36em; }
.correo-hoja { border: 1px solid var(--tinta); background: var(--blanco); font-size: 0.9375rem; line-height: 1.5; }
.correo-asunto { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--filete); font-weight: 600; display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
/* El cuerpo es el email real (src/correo.py), con sus estilos en línea; aquí solo se encaja. */
.correo-cuerpo { font-size: 15px; line-height: normal; overflow-x: auto; }
.correo-cuerpo table { border-collapse: collapse; }
@media (max-width: 40rem) {  /* la regla móvil del email vive en su <head>, que no se incrusta */
  .correo-cuerpo .k-tarjeta { padding: 24px 18px !important; }
  .correo-cuerpo .k-cifra { font-size: 30px !important; }
}
@media (min-width: 60rem) { .pasos { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; } .correo { margin-top: 5.25rem; } }

/* ── Diferencias: la ficha ───────────────────────────────────────────── */
.dif-cuerpo { margin-top: 2.5rem; display: grid; gap: 3rem; align-items: start; }
.ficha { border: 1px solid var(--tinta); background: var(--blanco); padding: clamp(1.1rem, 3vw, 1.75rem); font-size: 0.9375rem; line-height: 1.5; }
.ficha-cabecera { padding-bottom: 1rem; border-bottom: 1px solid var(--filete); }
.ficha-titulo { margin-top: 0.75rem; font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 0.85rem; }
.ficha-datos dt { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-3); }
.ficha-datos dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha-motivo { margin-top: 1rem; color: var(--tinta-2); }
.ficha-apartado { margin: 1.4rem 0 0.35rem; font-size: 0.875rem; font-weight: 600; }
.ficha-filas { list-style: none; margin: 0; padding: 0; }
.ficha-filas > li { padding: 0.5rem 0; border-top: 1px solid var(--filete); }
.ficha-filas > li:not(:has(.req-fila)), .req-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.ficha-req .ref { display: block; margin-top: 0.15rem; }
.req-cita { margin: 0.5rem 0 0.1rem; padding: 0.6rem 0.85rem; background: var(--hueso); border: 1px solid var(--filete); }
.req-cita p { font-family: var(--cita); font-style: italic; font-size: 1rem; line-height: 1.45; }
.req-cita .ref { display: block; margin-top: 0.35rem; color: var(--tinta-2); }
.ficha-gana > div { padding: 0.45rem 0; border-top: 1px solid var(--filete); display: grid; gap: 0.1rem; }
.ficha-gana dt { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-3); }
.ficha-gana .ref { margin-left: 0.35rem; white-space: nowrap; }
.dif-lista > div { padding: 1.25rem 0; border-top: 1px solid var(--filete); }
.dif-lista > div:first-child { border-top-color: var(--tinta); }
.dif-lista dt { font-weight: 600; }
.dif-lista dd p { margin-top: 0.35rem; color: var(--tinta-2); }
.cita-falla { margin-top: 0.85rem !important; padding: 0.7rem 0.9rem; background: var(--hueso); border: 1px solid var(--filete); font-size: 0.9375rem; }
.cita-falla-texto { font-family: var(--cita); font-style: italic; color: var(--tinta); }
.aviso { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font: 500 0.8125rem/1.3 var(--mono); color: var(--tinta); }
@media (min-width: 64rem) { .dif-cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; } }

/* ── Precio ──────────────────────────────────────────────────────────── */
.precio { display: grid; gap: 2rem; }
.precio > h2 { max-width: 16ch; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.precio-cuerpo { border-top: 1px solid var(--tinta); padding-top: 1.5rem; display: grid; gap: 0.9rem; justify-items: start; max-width: 32rem; }
.precio-cifra { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.precio-condicion { font-weight: 600; }
.precio-texto { color: var(--tinta-2); margin-bottom: 0.6rem; }
@media (min-width: 60rem) { .precio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }

/* ── Preguntas: abiertas, a dos columnas ─────────────────────────────── */
.faq { margin-top: 2.25rem; display: grid; gap: 0 3.5rem; border-top: 1px solid var(--tinta); }
.faq > div { padding: 1.4rem 0; border-bottom: 1px solid var(--filete); }
.faq dt { font-weight: 600; font-size: 1.0625rem; }
.faq-n { display: block; margin-bottom: 0.35rem; font-weight: 400; }
.faq dd { margin-top: 0.4rem; color: var(--tinta-2); }
@media (min-width: 52rem) { .faq { grid-template-columns: 1fr 1fr; } }

/* ── Cierre ──────────────────────────────────────────────────────────── */
.cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cierre > h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); max-width: 22ch; }
.cierre .acciones { margin-top: 0; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { margin-top: clamp(4rem, 9vw, 6.5rem); border-top: 1px solid var(--tinta); }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--margen) 2.5rem; display: grid; gap: 1rem; font-size: 0.875rem; color: var(--tinta-2); }
.pie a { color: var(--tinta-2); }
.pie a:hover { color: var(--tinta); }
.pie-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.pie-legal a { display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 48rem) { .pie-in { grid-template-columns: 1fr auto; align-items: start; } }

/* ── Páginas de alta, cuenta y contraseña ───────────────────────────── */
main.contratar, main.cuenta, main.bienvenida { max-width: 30rem; margin: clamp(2rem, 8vw, 5rem) auto 0; padding: 0 var(--margen); }
main.contratar h1, main.cuenta h1, main.bienvenida h1 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.05; }
main.contratar > p, main.cuenta > p, main.bienvenida > p { margin-top: 0.9rem; color: var(--tinta-2); }
main.contratar > p:first-of-type { color: var(--tinta); font-weight: 500; }
main form { margin-top: 1.75rem; display: grid; gap: 0.4rem; background: var(--blanco); border: 1px solid var(--tinta); padding: clamp(1.25rem, 4vw, 1.75rem); }
main.cuenta form { border: 0; padding: 0; margin-top: 1.5rem; }
main label { font-weight: 500; font-size: 0.9375rem; margin-top: 0.6rem; }
main label:first-child { margin-top: 0; }
main input[type=email], main input[type=password], main input[type=text] {
  width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; border: 1px solid #85857f; border-radius: 2px;
  background: var(--blanco); color: var(--tinta); font: 400 1rem/1.4 var(--sans);
}
main input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
main label[for=terms] { position: relative; display: block; padding-left: 1.9rem; font-weight: 400; color: var(--tinta-2); margin-top: 1rem; line-height: 1.5; }
main input[type=checkbox] { position: absolute; left: 0; top: 0.15rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--tinta); }
main form button { margin-top: 1.25rem; width: 100%; }
main [role=alert] { margin-top: 0.4rem; padding: 0.55rem 0.8rem; border: 1px solid #b42318; background: #fdf3f2; color: #8f1d14; font-size: 0.9375rem; font-weight: 500; }
main [role=status] { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--filete); background: var(--hueso); color: var(--tinta); }

/* ── Textos legales ──────────────────────────────────────────────────── */
main.legal { max-width: 44rem; margin: clamp(2rem, 6vw, 3.5rem) auto 0; padding: 0 var(--margen); }
.borrador { margin-bottom: 2rem; padding: 0.85rem 1rem; border: 1px dashed var(--tinta); background: var(--hueso); font-size: 0.9375rem; }
main.legal h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.625rem); letter-spacing: -0.035em; }
.legal-fecha { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--tinta-3); }
main.legal h2 { margin: 2.25rem 0 0.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
main.legal p, main.legal li { color: #2e2e2b; }
main.legal p + p { margin-top: 0.8rem; }
main.legal ul { padding-left: 1.25rem; margin: 0.6rem 0; }
main.legal li + li { margin-top: 0.35rem; }

/* ── Anchos ──────────────────────────────────────────────────────────── */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .hero h1 { max-width: 20ch; }
}
/* De 1024 a 1360 px: dos columnas; el pliego a la derecha, escalado al alto de la ventana, con
   solo las marcas numeradas y una leyenda compacta debajo (una línea por nota). */
@media (min-width: 64rem) and (max-width: 84.99rem) {
  .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 2.5rem; }
  .hero h1 { max-width: 15ch; }
  .plano { align-self: start; }
  .hoja { width: min(100%, 22rem, calc((100vh - 8rem) * 0.654)); }
  .notas { margin: 1rem auto 0; gap: 0.3rem; width: min(100%, 22rem); font-size: 0.875rem; }
  .nota { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
  .nota-ref { margin: 0; }
  .nota b { display: inline; font-weight: 500; }
  .nota-texto { display: none; }
  .plano > .pie-fig { margin-top: 0.75rem; font-size: 0.75rem; }
}
@media (min-width: 85rem) {
  .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; }
  .plano { align-self: center; }
}

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