/* =============================================================================
   volcado.studio — site.css
   Maqueta mínima del paso 1. Se carga DESPUÉS de fonts/fonts.css y tokens.css.

   Regla: aquí no hay ningún color, tamaño ni espacio literal. Todo es
   var(--token). Los únicos valores sin token son estructurales y no de diseño:
   0, auto, 100%, 1fr, none, y el divisor de calc(). Sin @media: las rejillas son
   intrínsecas (auto-fit + --col-min) y el resto es flex-wrap.

   Contrato con el paso 2 (dirección de arte): el marcado no se toca. Se viste
   con clases. Ganchos disponibles:
     .wrap  contenedor        .alt  sección sobre --paper-2 (las tarjetas
     .card  tarjeta                 blancas solo viven aquí)
     .grid  rejilla auto-fit  .prose  medida de línea (texto corrido)
     .btn   botón de acento   .nota  pie/nota en --ink-2
     .eyebrow antetítulo      mark.pendiente  dato que falta (ver abajo)
============================================================================= */

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

body{ margin:0; }

img{ display:block; max-width:100%; height:auto; }

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

/* -----------------------------------------------------------------------------
   Enlace de salto y ritmo general
----------------------------------------------------------------------------- */
.skip{
  position:absolute;
  transform:translateY(-100%);
  background:var(--ink);
  color:var(--paper);
  padding:var(--s-3) var(--s-4);
  text-decoration:none;
}
.skip:focus{ transform:none; }

main > section,
.legal{
  padding-block:calc(var(--s-9) / 2);
}
.alt{ background:var(--paper-2); }

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

/* Ritmo vertical: solo margin-top, y solo entre hermanos. Un h3 abre bloque
   nuevo (--s-7) y su contenido se le pega (--s-3). Vale dentro y fuera de .prose. */
main .wrap > * + *{ margin-top:var(--s-5); }
main .wrap > h3,
.prose > h3{ margin-top:var(--s-7); }
main .wrap > h3 + *,
.prose > h3 + *{ margin-top:var(--s-3); }

.eyebrow{
  color:var(--ink-2);
  font-size:var(--fs--1);
  margin-bottom:var(--s-2);
}
.nota{
  color:var(--ink-2);
  font-size:var(--fs--1);
}

/* -----------------------------------------------------------------------------
   Cabecera
----------------------------------------------------------------------------- */
.site-header{ border-bottom:var(--bw-1) solid var(--line); }
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0 var(--s-5);
}
/* Área de respeto del logotipo: 1em (= altura de la V). Ahí no entra nada. */
.logo{ display:inline-block; padding-block:var(--logo-clearspace); }
.logo img{ width:calc(var(--logo-min-width) * 1.2); }

.site-header nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--s-4);
  list-style:none;
  margin:0;
  padding:0;
}
.site-header nav a{
  display:inline-block;
  padding:var(--s-2) 0;
  font-size:var(--fs--1);
}
.tel{ font-size:var(--fs--1); }

/* -----------------------------------------------------------------------------
   Portada
----------------------------------------------------------------------------- */
.hero{ padding-block:var(--s-7) var(--s-8); }
.hero h1{
  font-size:var(--fs-5);
  line-height:var(--lh-title);
}
.hero .lead{
  margin-top:var(--s-5);
  font-size:var(--fs-1);
  line-height:var(--lh-tight);
}
.hero .acciones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3) var(--s-5);
  margin-top:var(--s-6);
}
.hero .nota{ margin-top:var(--s-4); }

/* -----------------------------------------------------------------------------
   Rejilla y tarjetas
----------------------------------------------------------------------------- */
.grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
}
.card{
  background:var(--paper-3);
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);
  padding:var(--s-5);
  box-shadow:var(--sh-1);
}
.card > * + *{ margin-top:var(--s-3); }
.card h3{ font-size:var(--fs-1); }

/* -----------------------------------------------------------------------------
   Listas
----------------------------------------------------------------------------- */
.prose ul, .prose ol, .lista{
  padding-left:var(--s-5);
}
.prose li + li, .lista li + li{ margin-top:var(--s-2); }

.pasos{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--s-5);
}
.pasos > li{
  border-top:var(--bw-1) solid var(--ink-2);
  padding-top:var(--s-4);
}
.pasos > li > * + *{ margin-top:var(--s-2); }
.pasos h3{ margin-bottom:0; font-size:var(--fs-1); }

/* -----------------------------------------------------------------------------
   Tablas. Con desplazamiento propio: en pantalla estrecha no rompen la página.
----------------------------------------------------------------------------- */
.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;
  padding:var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom:var(--bw-1) solid var(--line);
}
thead th{ border-bottom:var(--bw-1) solid var(--ink-2); }
td.num, th.num{ text-align:right; }

/* -----------------------------------------------------------------------------
   Figuras y fotos
----------------------------------------------------------------------------- */
figure{ margin:0; }
figcaption{
  margin-top:var(--s-2);
  color:var(--ink-2);
  font-size:var(--fs--1);
}
.socio{ display:grid; gap:var(--s-4); align-content:start; }
.socio img,
.foto-pendiente{ max-width:var(--col-min); }
.foto-pendiente{
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s-4);
  text-align:center;
  background:var(--paper-2);
  border:var(--bw-1) dashed var(--ink-2);
  border-radius:var(--r-3);
}

/* -----------------------------------------------------------------------------
   Dato pendiente. Todo [ ] del texto va dentro de <mark class="pendiente">.
   Sirve para verlo en revisión y para un grep antes de publicar. Usa --warn:
   es el mismo criterio que las incidencias del volcado (algo que falta).
----------------------------------------------------------------------------- */
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);
}

/* -----------------------------------------------------------------------------
   Preguntas (details)
----------------------------------------------------------------------------- */
details{ border-bottom:var(--bw-1) solid var(--line); }
details:first-of-type{ border-top:var(--bw-1) solid var(--line); }
summary{
  cursor:pointer;
  padding:var(--s-4) 0;
  font-weight:var(--fw-semibold);
}
details > div{ padding-bottom:var(--s-4); }

/* -----------------------------------------------------------------------------
   Formulario
----------------------------------------------------------------------------- */
form{ max-width:var(--measure); }
form > * + *{ margin-top:var(--s-5); }
fieldset{
  margin:0;
  padding:0;
  border: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-5); }
.campo label{
  display:block;
  margin-bottom:var(--s-1);
  font-weight:var(--fw-semibold);
}
.campo .nota{ margin-bottom:var(--s-2); }
.campo input:not([type="checkbox"]),
.campo textarea{
  display:block;
  width:100%;
}
.campo textarea{ resize:vertical; }
.consentimiento{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
}
.consentimiento input{
  flex:none;
  margin-top:var(--s-1);
}
.consentimiento label{
  margin:0;
  font-weight:var(--fw-regular);
}
.hp{ display:none; }

/* .btn viene de tokens.css; aquí solo se adapta al <button>. */
button.btn{
  border:0;
  font-family:var(--font-text);
  font-size:var(--fs-0);
  cursor:pointer;
}
.envio{ margin-top:var(--s-6); }

/* -----------------------------------------------------------------------------
   Pie
----------------------------------------------------------------------------- */
.site-footer{
  padding-block:var(--s-7);
  border-top:var(--bw-1) solid var(--line);
}
.site-footer .wrap{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
}
.site-footer p + p{ margin-top:var(--s-2); }
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer li a{
  display:inline-block;
  padding:var(--s-1) 0;
}

/* -----------------------------------------------------------------------------
   Páginas legales y de agradecimiento
----------------------------------------------------------------------------- */
.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); }

/* -----------------------------------------------------------------------------
   Precios y cita legal
   .bloque sobre --paper (las tarjetas blancas solo viven sobre --paper-2).
   .destacado usa --acc-soft, la superficie clara del acento: --ink encima
   14,48:1 y --acc 4,88:1 (ver PARES VERIFICADOS en tokens.css).
----------------------------------------------------------------------------- */
.bloque{
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);
  padding:var(--s-5);
}
.bloque > * + *{ margin-top:var(--s-3); }
.bloque h3{ font-size:var(--fs-1); }
.bloque.destacado{
  background:var(--acc-soft);
  border-color:var(--acc);
}
.precio{
  font-family:var(--font-display);
  font-size:var(--fs-2);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);
  font-variant-numeric:var(--num-tabular);
}

blockquote{
  margin:0;
  padding-left:var(--s-4);
  border-left:var(--bw-1) solid var(--ink-2);
  font-size:var(--fs--1);
}