/* =============================================================================
   volcado.studio — site.css
   Paso 2 · dirección de arte. Tratamiento A: «tarifa editorial».
   Se carga DESPUÉS de fonts/fonts.css y tokens.css.

   Tokens propios de esta fase (tokens.css v1.3): --pad-seccion, --lh-lead,
   --fs-6, --tr-smcp, --col-min-s.

   REGLAS DE ESTE ARCHIVO
   · Ningún color, tamaño ni espacio literal: todo es var(--token). Los únicos
     valores sin token son estructurales: 0, auto, 100%, 1fr, none, los
     factores enteros de calc() y los pesos de flex.
   · Sin @media y sin JS. Las rejillas son intrínsecas (auto-fit + --col-min) y
     el resto es flex-wrap. Todo lo que cambia con el ancho lo decide el
     contenido, no un punto de corte.
   · Los valores derivados que necesita este archivo se componen aquí con
     calc() SOLO a partir de tokens (bloque «Derivados»).

   USO DE LA ESCALA (nivel → dónde cae)
     --fs-6  cifra grande: 48 h y 200 €
     --fs-5  h1 de portada · cifra de 1.500 € y de 24 h
     --fs-4  cifra secundaria (5.500 €)
     --fs-3  h2 de sección
     --fs-2  afirmación de «Quiénes somos» · cierre de la comparativa · números
             de paso · marca +/− del acordeón
     --fs-1  entradilla · h3 · pregunta del acordeón · sufijo de precio
     --fs-0  cuerpo
     --fs--1 notas, pies, cabeceras de tabla y rótulos en versalita
     En móvil no hay otra escala: los clamp() de tokens.css bajan solos, y
     text-wrap: balance reparte los titulares para que no queden viudas.

   USO DEL ACENTO (--acc, y --acc-on-dark en el bloque verde)
     1. Botón de acción (relleno). Es lo más pesado de cada pantalla.
     2. Marcadores de dato: las tres cifras que sostienen la propuesta
        (24 h, 48 h, 200 €) y los plazos dentro de los pasos.
     3. Enlaces de texto (subrayados, por tokens.css) y el foco.
     Nada más: ni cabeceras, ni filetes, ni fondos, ni la navegación.

   FONDOS (ritmo)  P = --paper · A = --paper-2 · V = --verde
     cabecera P · portada P · cómo funciona P · precio A (+ fila V) · encaje P ·
     resultado A (+ fila V) · reparto P · quiénes P · datos A · preguntas P ·
     demo A · pie V.  Las tarjetas blancas solo viven sobre A.
     Bloques V: dos filas (48 h, versión adicional) y el pie. Nunca más.
     Dos secciones P seguidas llevan un filete (portada→cómo, reparto→quiénes).

   ALTURA EN MÓVIL: todo el aire vertical sale de --pad-seccion (24 px a 360,
     48 a 1440). Entre secciones = 2 × --pad-seccion; entre bloques =
     --pad-seccion; en filas = 1/2; en tarjetas = 2/3. El texto secundario
     (listas, tablas, notas, pasos) va a --lh-lead; el cuerpo corrido, a --lh-body.

   GANCHOS DEL MARCADO
     .wrap  .alt  .duo(.cab .cuerpo)  .fila  .grid  .prose  .lista  .nota
     .btn  .cifra  .plazo  .tarifa(.tarifa-fila)  .pasos  .criterios
     .tabla  .preguntas  .form-card  .franja (sección «ejemplo propio»)
============================================================================= */

/* -----------------------------------------------------------------------------
   Derivados (solo tokens)
----------------------------------------------------------------------------- */
:root{
  /* Altura de la barra de cabecera: área de respeto arriba y abajo + alto del
     logotipo (ancho / proporción). Es la altura de UNA línea de cabecera. */
  --header-h:calc(var(--logo-clearspace) * 2 + var(--logo-min-width) * 1.2 / var(--logo-ratio));
  /* Ancho mínimo de una celda de «Incluye»: 4 en una fila dentro de --wrap,
     2×2 en tableta, 1 en móvil. */
  --tile-min:calc(var(--s-10) + var(--s-8) + var(--s-5));
  /* Hueco entre columna de título y de cuerpo: --col-min + este hueco +
     --measure caben dentro de --wrap. */
  --gap-duo:var(--s-7);
  /* Aire de filas y de tarjetas: fracciones enteras de --pad-seccion. */
  --pad-fila:calc(var(--pad-seccion) / 2);
  --pad-tarjeta:calc(var(--pad-seccion) * 2 / 3);
}

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

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }

h1, h2, h3{ margin:0; text-wrap:balance; }
p, ul, ol, dl{ margin-block:0; }
p{ text-wrap:pretty; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute;
  transform:translateY(-100%);
  background:var(--ink);
  color:var(--paper);
  padding:var(--s-3) var(--s-4);
  text-decoration:none;
  z-index:1;
}
.skip:focus{ transform:none; }

/* Ritmo entre secciones: de 48 px (móvil) a 96 px (escritorio) de aire entre
   dos bloques, mitad arriba y mitad abajo (--pad-seccion). Las secciones con fondo propio lo separan además con el cambio de
   superficie; dos secciones seguidas sobre --paper llevan un filete. */
main > section,
.legal{ padding-block:var(--pad-seccion); }
.alt{ background:var(--paper-2); }
main > section:not(.alt) + section:not(.alt){
  border-top:var(--bw-1) solid var(--line);
}

/* Dentro de una sección: bloques separados --pad-seccion (24 → 48 px); el texto corrido se ordena solo con .prose. */
main .wrap > * + *{ margin-top:var(--pad-seccion); }
.legal .wrap > * + *{ margin-top:var(--s-5); }

.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:var(--s-4); }
.prose > h3{ margin-top:var(--s-7); }
.prose > h3 + *{ margin-top:var(--s-3); }

.nota{
  color:var(--ink-2);
  font-size:var(--fs--1);
  line-height:var(--lh-lead);
}
.on-dark .nota{ color:var(--ink-2-on-dark); }

/* Rótulo en versalita real (fonts.css pone smcp + tracking en .eyebrow).
   Aquí solo se le da peso, color y tamaño. */
.eyebrow{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-0);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-smcp);
  color:var(--ink-2);
}
.on-dark .eyebrow{ color:var(--ink-2-on-dark); }

/* -----------------------------------------------------------------------------
   Cifras y plazos. La cifra grande es la prueba: serif semibold, tabular.
   Sin acento por defecto: el acento lo decide el modificador .acc.
----------------------------------------------------------------------------- */
.cifra{
  display:inline-block;
  font-family:var(--font-display);
  font-size:var(--fs-5);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
  font-variant-numeric:var(--num-tabular);
  font-feature-settings:"tnum" 1, "lnum" 1;
  white-space:nowrap;
}
.cifra.m{ font-size:var(--fs-4); }
.cifra.xl{ font-size:var(--fs-6); }
.cifra.acc{ color:var(--acc); }
.on-dark .cifra.acc{ color:var(--acc-on-dark); }

/* Plazo dentro de un titular o de una frase: dato marcado, no adorno. */
.plazo{
  color:var(--acc);
  white-space:nowrap;
}
.on-dark .plazo{ color:var(--acc-on-dark); }

/* -----------------------------------------------------------------------------
   Cabecera. UNA línea a cualquier ancho, sin @media y sin JS.
   Logotipo a la izquierda y botón a la derecha flotan; los enlaces de sección
   son un bloque en línea indivisible que ocupa el hueco central. Si no cabe
   ENTERO, baja por debajo de los flotantes, fuera de la altura fija de la
   cabecera, y queda recortado (nunca un enlace cortado a medias). Al enfocar
   uno con teclado (o el botón), la cabecera se abre para mostrarlo.
----------------------------------------------------------------------------- */
.site-header{ border-bottom:var(--bw-1) solid var(--line); }
.site-header .wrap{
  display:flow-root;
  height:var(--header-h);
  overflow:hidden;
}
.site-header .wrap:has(.cta:focus-visible, nav :focus-visible){
  height:auto;
  overflow:visible;
}
.logo{
  display:inline-block;
  /* El área de respeto (1em) se reparte entre relleno (zona pulsable) y margen. */
  padding-block:var(--s-2);
  margin-block:calc(var(--logo-clearspace) - var(--s-2));
}
.logo img{ width:calc(var(--logo-min-width) * 1.2); }
.site-header .logo{ float:left; margin-right:var(--s-5); }

.site-header .cta{
  float:right;
  margin:var(--s-2) 0 var(--s-2) var(--s-5);
  padding:var(--s-2) var(--s-4);
  font-size:var(--fs--1);
  line-height:var(--lh-body);
  white-space:nowrap;
}

.site-header nav{
  text-align:right;
  font-size:var(--fs--1);
  line-height:var(--lh-body);
}
.site-header nav ul{
  display:inline-block;
  white-space:nowrap;
  list-style:none;
  margin:0;
  padding:0;
}
.site-header nav li{ display:inline-block; }
.site-header nav li + li{ margin-left:var(--s-5); }
.site-header nav a{
  display:inline-block;
  margin-block:var(--s-2);
  padding:var(--s-2) 0;
  color:var(--ink);
}
.site-header nav a:hover{ color:var(--acc); }

/* -----------------------------------------------------------------------------
   Botón. .btn viene de tokens.css (acento, --acc-hover); aquí se le da tamaño
   táctil y transición corta. El anillo de foco no se toca (tokens.css).
----------------------------------------------------------------------------- */
.btn{
  transition:background var(--t-base) var(--ease);
}
.btn.grande{
  padding:var(--s-4) var(--s-5);
  font-size:var(--fs-1);
  line-height:var(--lh-tight);
}
button.btn{
  border:0;
  font-family:var(--font-text);
  font-size:var(--fs-0);
  cursor:pointer;
}
/* Enlace secundario: pulsable de verdad, no una línea de texto suelta. */
.enlace-sec{
  display:inline-block;
  padding-block:var(--s-2);
}

/* -----------------------------------------------------------------------------
   Estructura editorial: .duo = título a un lado, cuerpo al otro. Sin @media:
   dos columnas mientras quepan --col-min + --measure; si no, apiladas.
----------------------------------------------------------------------------- */
.duo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--s-4) var(--gap-duo);
}
.duo > .cab{ flex:1 1 var(--col-min); min-width:0; }
.duo > .cuerpo{ flex:2 1 var(--measure); min-width:0; }
.duo > .cab > * + *{ margin-top:var(--s-4); }
.duo > .cuerpo > * + *{ margin-top:var(--s-4); }
.duo.cabecera{ align-items:baseline; }

/* Fila de definición: rótulo (h3) a un lado, texto al otro, con filete arriba.
   Es el mismo patrón que .duo pero repetido en lista. */
.fila{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--gap-duo);
  padding-block:var(--pad-fila);
  border-top:var(--bw-1) solid var(--line);
}
.fila:last-child{ border-bottom:var(--bw-1) solid var(--line); }
.fila > h3{ flex:1 1 var(--col-min); min-width:0; }
.fila > .prose, .fila > div{ flex:2 1 var(--measure); min-width:0; }
.alt .fila, .alt .fila:last-child{ border-color:var(--ink-2); }

/* Rejilla auto-fit genérica */
.grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
}

/* Tarjeta blanca (solo sobre .alt) */
.card{
  background:var(--paper-3);
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);
  padding:var(--pad-tarjeta);
  box-shadow:var(--sh-1);
}
.card > * + *{ margin-top:var(--s-3); }

/* -----------------------------------------------------------------------------
   Listas
----------------------------------------------------------------------------- */
.prose ul, .prose ol, .lista{ padding-left:var(--s-5); line-height:var(--lh-lead); }
.prose li + li, .lista li + li{ margin-top:var(--s-1); }
.lista::marker, .prose li::marker{ color:var(--ink-2); }

/* Criterios numerados (encaje): número grande colgado a la izquierda. */
.criterios{
  list-style:none;
  padding-left:0;
  counter-reset:criterio;
}
.prose .criterios{ padding-left:0; }
.criterios > li{
  position:relative;
  padding-left:var(--s-6);
  padding-block:var(--s-3);
  border-top:var(--bw-1) solid var(--line);
  line-height:var(--lh-lead);
  counter-increment:criterio;
}
.criterios > li:last-child{ border-bottom:var(--bw-1) solid var(--line); }
.prose .criterios > li + li{ margin-top:0; }
.criterios > li::before{
  content:counter(criterio);
  position:absolute;
  left:0;
  top:var(--s-3);
  font-family:var(--font-display);
  font-size:var(--fs-3);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-title);
  color:var(--ink);
  font-variant-numeric:var(--num-tabular);
}

/* -----------------------------------------------------------------------------
   Portada
----------------------------------------------------------------------------- */
.hero{ padding-block:var(--s-6) var(--s-7); }
.hero h1{
  font-size:var(--fs-5);
  line-height:var(--lh-title);
}
.hero-cuerpo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--s-5) var(--gap-duo);
}
.hero-texto{ flex:2 1 var(--measure); min-width:0; }
.hero .lead{
  font-size:var(--fs-1);
  line-height:var(--lh-lead);
  text-wrap:balance;
}
.hero .acciones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2) var(--s-5);
  margin-top:var(--s-5);
}
/* Garantía antes del primer scroll: no cuesta nada, no compromete a nada. */
.garantia{
  flex:1 1 var(--col-min);
  min-width:0;
  padding:var(--pad-tarjeta);
  background:var(--paper-2);
  border-top:var(--s-1) solid var(--ink);
  border-radius:0 0 var(--r-3) var(--r-3);
}

/* -----------------------------------------------------------------------------
   Afirmación (Quiénes somos): una línea, sin nombres ni foto.
----------------------------------------------------------------------------- */
.afirmacion{
  font-family:var(--font-display);
  font-size:var(--fs-2);
  font-weight:var(--fw-regular);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
  text-wrap:balance;
}

/* -----------------------------------------------------------------------------
   Resultado: filas de definición; una de ellas, la del plazo, en bloque verde.
----------------------------------------------------------------------------- */
.resultados{ display:block; }
.resultados > .fila:first-child{ border-top-color:var(--ink-2); }
.fila.on-dark{
  padding:var(--pad-tarjeta);
  margin-block:var(--s-4);
  border:0;
  border-radius:var(--r-3);
}
.fila.on-dark + .fila{ border-top:0; }
.fila.on-dark h3{ font-size:var(--fs-2); }
.fila.on-dark h3 .cifra{ font-size:var(--fs-6); }
.fila.on-dark h3 .cifra{
  display:block;
  margin-bottom:var(--s-2);
}
blockquote{
  margin:0;
  padding-left:var(--s-4);
  border-left:var(--bw-1) solid var(--ink-2);
  font-size:var(--fs--1);
}
blockquote p{ max-width:none; }

/* -----------------------------------------------------------------------------
   Proceso numerado. Estricta simetría: número | título | texto en la misma
   retícula en los cinco pasos. Título y texto son dos columnas iguales mientras
   quepan; si no, se apilan.
----------------------------------------------------------------------------- */
.pasos{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:paso;
}
.pasos > li{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:var(--s-2) var(--s-4);
  padding-block:var(--s-3);
  border-top:var(--bw-1) solid var(--ink-2);
  counter-increment:paso;
}
.pasos > li:last-child{ border-bottom:var(--bw-1) solid var(--ink-2); }
.pasos > li::before{
  content:counter(paso);
  min-width:var(--s-5);
  font-family:var(--font-display);
  font-size:var(--fs-3);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-title);
  color:var(--ink);
  font-variant-numeric:var(--num-tabular);
}
.paso{
  display:grid;
  gap:var(--s-2) var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
  align-items:start;
}
.paso h3{ font-size:var(--fs-1); }
.paso p{ line-height:var(--lh-lead); }

/* -----------------------------------------------------------------------------
   Tablas. Con desplazamiento propio: en pantalla estrecha no rompen la página.
   Cabecera en versalita real; cifras tabulares (tokens.css).
----------------------------------------------------------------------------- */
.tabla{ overflow-x:auto; }
table{
  width:100%;
  border-collapse:collapse;
}
caption{
  text-align:left;
  color:var(--ink-2);
  font-size:var(--fs--1);
  padding-bottom:var(--s-2);
}
th, td{
  text-align:left;
  vertical-align:top;
  line-height:var(--lh-lead);
  padding:var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom:var(--bw-1) solid var(--line);
}
tbody th{ font-weight:var(--fw-semibold); }
thead th{
  font-variant-caps:small-caps;
  letter-spacing:var(--tr-smcp);
  font-weight:var(--fw-semibold);
  color:var(--ink-2);
  border-bottom:var(--bw-1) solid var(--ink-2);
}
.on-dark thead th{ color:var(--ink-2-on-dark); border-bottom-color:var(--line-on-dark); }
.on-dark caption{ color:var(--ink-2-on-dark); }
.on-dark th, .on-dark td{ border-bottom-color:var(--line-on-dark); }

/* Tablas de importes: el importe a la derecha, alineado por cifras. */
.importes td:last-child,
.importes th:last-child{
  text-align:right;
  padding-right:0;
}
.importes th[scope="row"]{ white-space:nowrap; padding-right:var(--s-2); }
.importes td{ text-wrap:balance; }
.importes tbody tr:last-child th,
.importes tbody tr:last-child td{ border-bottom:0; }
.importes tr.dest th,
.importes tr.dest td{ font-weight:var(--fw-semibold); }

/* Reparto de tareas: primera columna estrecha y fija, sin partir el rótulo. */
.reparto th[scope="row"]{ width:34%; }

/* -----------------------------------------------------------------------------
   Personas (reparto): dos bloques con filete arriba, uno junto al otro.
----------------------------------------------------------------------------- */
.personas > div{
  display:grid;
  grid-row:span 2;
  grid-template-rows:subgrid;
  gap:var(--s-3);
  padding-top:var(--s-4);
  border-top:var(--bw-1) solid var(--ink-2);
}
.personas > div > * + *{ margin-top:0; }

/* Bloques cortos: columna estrecha (--col-min-s), dos lado a lado desde ~540 px. */
.limites, .personas{
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min-s), 100%), 1fr));
}

/* Límites (encaje): «lo que no cogemos» y «lo que no hacemos», con el mismo peso. */
.limites > div{
  padding-top:var(--s-4);
  border-top:var(--bw-1) solid var(--ink);
}
.limites > div > * + *{ margin-top:var(--s-3); }

/* -----------------------------------------------------------------------------
   TARIFA. El componente más importante. Cuatro filas con la MISMA retícula
   (simetría estricta): a la izquierda, rótulo y cifra; a la derecha, el detalle.
   La jerarquía sale del tamaño de la cifra y de la superficie:
     1. recurrente  → blanca, barra de acento arriba, cifra --fs-5
     2. puesta en marcha → blanca, cifra --fs-4
     3. edición suelta   → blanca, referencia (sin cifra grande)
     4. versión adicional → verde, cifra --fs-5 en acento: el argumento
----------------------------------------------------------------------------- */
.tarifa{ display:grid; gap:var(--s-4); }
.tarifa > * + *{ margin-top:0; }
.tarifa-fila{
  display:grid;
  gap:var(--s-4) var(--gap-duo);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
  align-items:start;
  padding:var(--pad-tarjeta);
  background:var(--paper-3);
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--sh-1);
}
.tarifa-fila > *{ min-width:0; }
.tarifa-fila > * + *{ margin-top:0; }
.tarifa-fila .resumen > * + *{ margin-top:var(--s-3); }
.tarifa-fila .ancho{ grid-column:1 / -1; }
.tarifa-fila .ancho > * + *{ margin-top:var(--s-3); }

.tarifa-fila.principal{
  box-shadow:inset 0 var(--s-1) 0 var(--acc), var(--sh-2);
}
.tarifa-fila.argumento{
  background:var(--verde);
  border-color:var(--line-on-dark);
  box-shadow:none;
}

/* Precio: prefijo en versalita (Quincenal: desde), cifra, sufijo. */
.precio{
  font-family:var(--font-text);
  font-size:var(--fs-1);
  line-height:var(--lh-tight);
}
.precio .pre{
  display:block;
  margin-bottom:var(--s-1);
  font-size:var(--fs-0);
  font-weight:var(--fw-semibold);
  font-variant-caps:small-caps;
  letter-spacing:var(--tr-smcp);
  color:var(--ink-2);
}
.on-dark .precio .pre{ color:var(--ink-2-on-dark); }
.precio .post{ color:var(--ink-2); }
.precio .post.sep{ margin-left:var(--s-2); }
/* Con la cifra grande (--fs-6) el sufijo baja a su propia línea: no se parte en «hasta 24 / páginas». */
.precio .cifra.xl + .post{ display:block; margin:var(--s-1) 0 0; }
.on-dark .precio .post{ color:var(--ink-2-on-dark); }

/* «Incluye»: celdas iguales con filete arriba; la de 24 h lleva la cifra. */
.incluye{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--s-2) var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr));
}
.incluye > li{
  margin:0;
  padding:var(--s-3) 0 0;
  border-top:var(--bw-1) solid var(--ink-2);
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  line-height:var(--lh-lead);
}
.incluye .cifra{ font-size:var(--fs-5); }
.prose .incluye > li + li, .incluye > li + li{ margin-top:0; }

/* Comparativa con el mercado: texto con dos cifras. No es una tabla ni un gráfico. */
.comparativa{
  padding-top:var(--s-4);
  border-top:var(--bw-1) solid var(--line-on-dark);
}
.comparativa > * + *{ margin-top:var(--s-4); }
.comparativa .fuentes{
  max-width:var(--measure);
  color:var(--ink-2-on-dark);
}
.comparativa .fuentes strong,
.comparativa .fuentes .dato{
  color:var(--paper);
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.comparativa .cierre{
  max-width:var(--measure);
  font-family:var(--font-display);
  font-size:var(--fs-3);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
  text-wrap:balance;
}
.comparativa .cierre .cifra{
  display:inline;   /* en línea, no inline-block: así la coma tras «200 €» no salta de renglón */
  font-size:inherit;
  color:var(--acc-on-dark);
}

/* -----------------------------------------------------------------------------
   Preguntas (details): acordeón sin JS. Marca +/−, foco y estados definidos.
----------------------------------------------------------------------------- */
.preguntas details{ border-bottom:var(--bw-1) solid var(--line); }
.preguntas details:first-of-type{ border-top:var(--bw-1) solid var(--ink-2); }
.preguntas summary{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s-4);
  padding:var(--s-4) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:var(--fs-1);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
  text-wrap:balance;
  transition:color var(--t-base) var(--ease);
}
.preguntas summary::-webkit-details-marker{ display:none; }
.preguntas summary::after{
  content:"+";
  content:"+" / "";
  flex:none;
  font-family:var(--font-text);
  font-size:var(--fs-2);
  font-weight:var(--fw-regular);
  line-height:var(--lh-title);
  color:var(--ink-2);
}
.preguntas details[open] summary::after{
  content:"\2212";
  content:"\2212" / "";
}
.preguntas summary:hover{ color:var(--acc); }
.preguntas details > div{
  padding-bottom:var(--s-5);
  animation:abre var(--t-base) var(--ease);
}
/* La única animación: al abrir, la respuesta entra desde arriba. Es la
   confirmación de que el clic ha hecho algo; no retrasa ningún contenido. */
@keyframes abre{
  from{ opacity:0; transform:translateY(calc(var(--s-2) * -1)); }
  to{ opacity:1; transform:none; }
}

/* -----------------------------------------------------------------------------
   Formulario
----------------------------------------------------------------------------- */
.form-card{ padding:var(--pad-tarjeta); max-width:none; }
.form-card > * + *{ margin-top:var(--s-4); }
form{ max-width:var(--measure); }
fieldset{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
legend{
  padding:0;
  margin-bottom:var(--s-4);
  font-family:var(--font-display);
  font-size:var(--fs-1);
  font-weight:var(--fw-semibold);
}
.campo + .campo{ margin-top:var(--s-4); }
.campo label{
  display:block;
  margin-bottom:var(--s-1);
  font-weight:var(--fw-semibold);
}
.campo label .nota{ font-weight:var(--fw-regular); }
.campo .nota{ margin-bottom:var(--s-2); }
.campo input:not([type="checkbox"]),
.campo textarea{
  display:block;
  width:100%;
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.campo textarea{ resize:vertical; }
.campo input:not([type="checkbox"]):hover,
.campo textarea:hover{ border-color:var(--ink); }

/* Error: solo tras interactuar (:user-invalid). El color no va solo: la línea
   se hace más gruesa (halo interior) y la etiqueta lleva una marca. --warn es
   el color de las incidencias del volcado (5,73:1 sobre --paper). */
.campo input:user-invalid,
.campo textarea:user-invalid{
  border-color:var(--warn);
  background:var(--warn-soft);
  box-shadow:inset 0 0 0 var(--bw-1) var(--warn);
}
.campo:has(:user-invalid) label{ color:var(--warn); }
.campo:has(:user-invalid) label::before{
  content:"!";
  content:"!" / "";
  margin-right:var(--s-2);
  font-weight:var(--fw-semibold);
}

.consentimiento{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
}
.consentimiento input{
  flex:none;
  margin-top:var(--s-1);
  width:var(--s-5);
  height:var(--s-5);
  accent-color:var(--acc);
}
.consentimiento label{
  margin:0;
  font-weight:var(--fw-regular);
}
.hp{ display:none; }
.envio{ margin-top:var(--s-5); }
.envio .btn{ width:100%; }

/* -----------------------------------------------------------------------------
   Pie (bloque verde). Logotipo en inverso, a una tinta.
----------------------------------------------------------------------------- */
.site-footer{ padding-block:var(--pad-seccion); }
.site-footer .wrap{
  display:grid;
  gap:var(--s-4) var(--gap-duo);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
  align-items:start;
}
.site-footer p + p{ margin-top:var(--s-2); }
.site-footer .logo{ margin:0 0 var(--logo-clearspace); padding-block:0; }
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer li a{
  display:inline-block;
  padding:var(--s-3) 0;
}

/* -----------------------------------------------------------------------------
   Páginas legales, de agradecimiento y 404
----------------------------------------------------------------------------- */
.legal h1{ margin-bottom:var(--s-5); }
.legal h2{
  font-size:var(--fs-2);
  margin-top:var(--s-7);
  margin-bottom:var(--s-3);
}
.legal h3{ margin-top:var(--s-5); }
.legal .prose > h2{ margin-top:var(--s-7); }

/* -----------------------------------------------------------------------------
   Franja del ejemplo propio (sección comentada en index.html). Preparada para
   una doble página 420:297: el marco toma la proporción de la propia imagen
   (width/height del <img>), así que basta con descomentar el bloque.
----------------------------------------------------------------------------- */
.franja h3{ margin-top:var(--s-7); }
.franja .tabla{ margin-top:var(--s-4); }
.doble-pagina{
  padding:var(--s-3);
  background:var(--paper-3);
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-2);
  box-shadow:var(--sh-2);
}
.doble-pagina img{ width:100%; }
.doble-pagina figcaption{
  margin-top:var(--s-3);
  padding-inline:var(--s-1);
}
.franja .enlace-pdf{
  display:inline-block;
  padding-block:var(--s-2);
  font-weight:var(--fw-semibold);
}

/* -----------------------------------------------------------------------------
   Dato pendiente (uso interno en revisión: nunca debe llegar al HTML publicado).
----------------------------------------------------------------------------- */
mark.pendiente{
  background:var(--warn-soft);
  color:var(--warn);
  border:var(--bw-1) dashed var(--warn);
  border-radius:var(--r-1);
  padding:0 var(--s-1);
}