/* =========================================================================
   Creación Empresas Online — Pliego de despacho
   Sobreimpresión en registro de documento: dos densidades translúcidas que
   al solaparse producen un tercer valor sin declararlo (mix-blend-mode).
   El solape significa reparto de trabajo, no precio.
   ========================================================================= */

:root {
  --paper:      #FBFAF8;
  --paper-2:    #F3F1EC;
  --ink:        #17202E;
  --ink-2:      #545B6B;
  --ink-3:      #6B7280;
  --rule:       #DAD7CF;
  --rule-2:     #EBE8E1;

  --pine:       #14532D;
  --pine-deep:  #0E3A20;

  --pass-a:     rgba(20, 83, 45, .22);
  --pass-b:     rgba(28, 44, 82, .28);
  --pass-a-flat:#D5E1D8;
  --pass-b-flat:#BEC3CD;
  --overlap-flat:#A8B3AE;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, sans-serif;
  --mono:  'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --max: 1200px;
  --sep: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (max-width: 760px) {
  .tarifa-table, .tarifa-table tbody, .tarifa-table tr, .tarifa-table th, .tarifa-table td { display: block; }
  .tarifa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarifa-table tbody tr:not(.rownote) { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
  .tarifa-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .tarifa-table tbody tr:not(.rownote) > * { border-top: 0; }
  .tarifa-table tbody th { padding: 0 0 .7rem; font-size: 1.0625rem; }
  .tarifa-table .num {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    text-align: right; padding: .3rem 0; border-bottom: 1px dotted var(--rule-2);
  }
  .tarifa-table .num::before {
    content: attr(data-l);
    font-family: var(--mono); font-size: .6875rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--ink-2); text-align: left;
  }
  .tarifa-table .total { font-size: 1.125rem; border-bottom: 0; padding-top: .5rem; }
  .tarifa-table .zero { color: var(--ink-2); font-size: .8125rem; }
  /* apilada, la accion cierra el bloque de cada tramite y se pulsa con el
     pulgar: la zona util llega a 44 px aunque la marca siga siendo fina */
  .tarifa-table .go { padding: .55rem 0 .2rem; }
  .tarifa-table .go .link-arrow {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-right: .25rem; font-size: .9375rem;
  }
  .rownote td { padding: .8rem 0 1.4rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

/* grano de fibra del papel: vive detrás de las secciones transparentes y
   queda tapado por los campos de tinta, que conservan su color exacto */
/* el grano de la fibra se imprime sobre el papel y se desplaza con él;
   los campos de tinta lo tapan con su propio fondo */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)' opacity='0.09'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.masthead, main, .footer, .dock { position: relative; z-index: 1; }
/* la cabecera manda sobre el contenido: si no, el desplegable queda debajo */
.masthead { z-index: 30; }

/* superficies del navegador */
::selection { background: rgba(20, 83, 45, .18); color: var(--ink); }
:root { scrollbar-color: var(--ink-3) var(--paper-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
input, button, select, textarea { font: inherit; color: inherit; caret-color: var(--pine); }

:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.on-ink :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--paper); }

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

.sr-only, .sr-defs {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 60;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.15rem; text-decoration: none; font-weight: 600; font-size: .9375rem;
  transition: top .18s ease;
}
.skip:focus { top: .5rem; }

/* ---- tipografía ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3.125rem); line-height: 1.08; }
p { margin: 0 0 1rem; }
.lede { font-size: clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem); line-height: 1.58; color: var(--ink-2); max-width: 62ch; }
.note { font-size: .8125rem; color: var(--ink-2); max-width: 74ch; margin: 1.75rem 0 0; }

.head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); margin-bottom: .85rem; }
.head p { color: var(--ink-2); margin: 0; max-width: 58ch; font-size: .9375rem; }

.link-arrow {
  display: inline-block; color: var(--pine); font-weight: 600; font-size: .9375rem;
  text-decoration: none; border-bottom: 1px solid var(--pine); padding-bottom: 2px;
}
.link-arrow:hover { color: var(--pine-deep); border-bottom-width: 2px; }

/* ---- botones ---- */
.btn[hidden], .link-arrow[hidden], .dock[hidden] { display: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pine); color: var(--paper);
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  padding: .78rem 1.4rem; border: 1px solid var(--pine);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn--lg { font-size: 1.0625rem; padding: 1rem 2rem; }
.btn--onink { background: var(--paper); color: var(--pine); border-color: var(--paper); }
.btn--onink:hover { background: var(--paper-2); border-color: var(--paper-2); color: var(--pine-deep); }
.btn:disabled { opacity: .55; cursor: default; }
.btn[data-enviando] { pointer-events: none; }
/* aviso dentro de un noscript: se lee como nota, con el filete a la izquierda */
.note--warn { border-left: 2px solid var(--pine); padding-left: .9rem; margin-top: 0; }

/* Acuse del formulario guiado: se lee antes que nada al recargar */
.aviso { padding: 1.1rem 1.25rem; border: 1px solid var(--rule); background: var(--paper-2); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.aviso--ok { border-color: var(--pine); background: rgba(20, 83, 45, .06); }
.aviso__t { margin: 0; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.aviso--ok .aviso__t { color: var(--pine); }

.prov {
  display: inline-block; vertical-align: .18em;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
  border: 1px solid var(--rule); padding: .26em .5em .2em; margin-left: .5rem;
  white-space: nowrap;
}
.prov--block {
  display: block; margin: .9rem 0 0; max-width: 32ch; border: 0;
  border-top: 1px solid var(--rule); padding: .6rem 0 0;
  letter-spacing: .02em; text-transform: none; font-size: .6875rem; line-height: 1.5;
  white-space: normal;
}

/* =========================================================================
   MASTHEAD
   ========================================================================= */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__in {
  max-width: var(--max); margin-inline: auto; padding: 1.1rem var(--gut);
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
/* la navegacion y la lupa, juntas y pegadas a la derecha */
.masthead__in > .nav { margin-left: auto; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.brand__mark { width: 27px; height: 27px; flex: none; isolation: isolate; }
/* rosa de los vientos heredada de la matriz, resuelta como las dos pasadas de
   tinta del resto del pliego: aguja N-S en pino, E-O en tinta, solape multiply */
.mark-ring { fill: none; stroke: var(--ink); stroke-width: .9; opacity: .85; }
.mark-rays { fill: none; stroke: var(--ink); stroke-width: .85; stroke-linecap: round; opacity: .34; }
.mark-a { fill: var(--pass-a); stroke: var(--pine); stroke-width: .9; stroke-linejoin: round; mix-blend-mode: multiply; }
.mark-b { fill: var(--pass-b); stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; mix-blend-mode: multiply; }
.brand__name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -.01em; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.85rem, 1.6vw, 1.6rem); }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .875rem; font-weight: 500;
  /* el subrayado del activo cuelga 4px (3 de aire + 1 de filete): se compensa
     arriba para que el texto quede centrado con la marca, no dos pixeles alto */
  padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--pine); }

/* Los desplegables no anuncian nada: un punto detras del enlace basta, y al
   pasar por encima se abre el pliego con el resto. */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__top--more::after {
  content: ''; display: inline-block; vertical-align: .18em;
  width: 3px; height: 3px; margin-left: .42rem; border-radius: 50%;
  background: var(--ink-3); transition: background .18s ease;
}
.nav__group:hover .nav__top--more::after,
.nav__group:focus-within .nav__top--more::after { background: var(--pine); }

.nav__sub {
  position: absolute; top: 100%; left: -.85rem; z-index: 40;
  min-width: 14.5rem; margin: 0; padding: .5rem 0;
  list-style: none; background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub li { margin: 0; }
.nav__sub a {
  display: block; padding: .4rem .85rem; font-size: .8125rem;
  border-bottom: 0; border-left: 1px solid transparent;
}
.nav__sub a:hover { color: var(--ink); border-bottom: 0; border-left-color: var(--pine); }
.nav__sub a[aria-current="page"] { color: var(--ink); border-left-color: var(--pine); }

/* La lupa: un signo mas de la barra, del mismo peso que los enlaces */
/* 44 px de zona util aunque la lupa siga midiendo 15: el icono no crece,
   crece la superficie que se puede pulsar con el dedo */
.iconbtn {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  margin-inline: -.75rem -.5rem; margin-block: -.5rem;
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.iconbtn:hover, .iconbtn[aria-expanded="true"] { color: var(--pine); }
.iconbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* El buscador vive plegado bajo la cabecera y solo baja cuando se pide */
.searchbar { border-top: 1px solid var(--rule-2); background: var(--paper); }
.searchbar[hidden] { display: none; }
.searchbar__in { display: flex; align-items: baseline; gap: 1rem; padding-block: .85rem 1rem; }
.searchbar__i {
  flex: 1 1 auto; min-width: 0;
  padding: .2rem 0; border: 0; border-bottom: 1px solid var(--rule); background: none;
  font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--ink);
}
.searchbar__i::placeholder { color: var(--ink-3); font-family: var(--sans); font-size: .95rem; }
.searchbar__i:focus { outline: none; border-bottom-color: var(--pine); }
.searchbar__i::-webkit-search-cancel-button { cursor: pointer; }
.searchbar__hint {
  flex: none; font-family: var(--mono); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
}

/* boton de menu: solo en pantallas estrechas */
.navtoggle {
  display: none; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 44px; padding: .45rem .8rem; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
}
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  display: block; width: 15px; height: 1.5px; background: currentColor;
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before, .navtoggle__bars::after { content: ''; position: absolute; left: 0; }
.navtoggle__bars::before { top: -5px; }
.navtoggle__bars::after  { top: 5px; }
.navtoggle[aria-expanded="true"] { background: var(--paper-2); }

/* =========================================================================
   1. LA PREGUNTA Y EL CUESTIONARIO
   ========================================================================= */
.opening { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.75rem, 6vw, 5rem); border-bottom: 1px solid var(--rule); }
.opening__say {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.opening__say h1 { margin: 0; max-width: 15ch; }
.opening__say .lede { max-width: 54ch; margin: 0 0 .35rem; }

.test__form { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); grid-template-rows: auto auto; gap: 0; }
.q { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; border: 0; margin: 0; padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 1.75rem 0; min-width: 0; }
.q + .q { padding-left: clamp(1rem, 2vw, 1.75rem); }
.q + .q::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.q__h { font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 0 0 .85rem; padding: 0; }
/* Sin subgrid las cabeceras no comparten fila: se reserva el alto de dos lineas
   para que las opciones de todas las preguntas arranquen a la misma altura. */
@supports not (grid-template-rows: subgrid) {
  .q { display: block; }
  .q__h { min-height: 2.6em; }
}
.opts { display: grid; align-content: start; gap: .3rem; }
.opts label {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .8rem; min-height: 44px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: .8125rem; line-height: 1.4;
  transition: border-color .14s ease, background .14s ease;
}
.opts label:hover { border-color: var(--ink-3); }
.opts input { accent-color: var(--pine); margin: .18rem 0 0; flex: none; }
.opts label:has(input:checked) { border-color: var(--pine); background: rgba(20,83,45,.05); }
.opts label:has(input:checked) span { font-weight: 600; }

.test__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.err { margin: 0; font-size: .8125rem; color: #8A1F11; font-weight: 500; }

.veredicto[hidden] { display: none; }
.veredicto {
  display: block; margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 3px solid var(--pine); border-bottom: 1px solid var(--rule);
  padding: clamp(1.35rem, 3vw, 2rem) 0; max-width: 68ch;
}
.veredicto__v { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); line-height: 1.15; margin: 0 0 .85rem; color: var(--pine); }
.veredicto__why { margin: 0 0 1.35rem; max-width: 60ch; color: var(--ink-2); font-size: .9375rem; }

/* La ficha del tramite recomendado: el precio del veredicto, aqui mismo y con
   los honorarios y los gastos de terceros en lineas distintas. */
.veredicto__ficha[hidden] { display: none; }
.veredicto__ficha { margin: 0 0 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-2); }
.veredicto__t {
  font-family: var(--serif); font-weight: 600; font-size: 1.125rem;
  margin: 0 0 .7rem; color: var(--ink);
}
.veredicto__precio { display: flex; flex-wrap: wrap; gap: .4rem 2.25rem; margin: 0; }
.veredicto__precio > div[hidden] { display: none; }
.veredicto__precio dt {
  font-family: var(--mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-2); margin: 0 0 .1rem;
}
.veredicto__precio dd {
  margin: 0; font-family: var(--mono); font-size: 1rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.veredicto__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; }
.veredicto__acciones .btn { max-width: min(100%, 34ch); text-align: center; }
.veredicto__acciones .btn[hidden] { display: none; }

.veredicto__nota[hidden] { display: none; }
.veredicto__nota { margin: .9rem 0 0; font-size: .8125rem; color: var(--ink-2); max-width: 60ch; }

.veredicto__caveat { margin: 1.25rem 0 0; font-size: .75rem; color: var(--ink-2); max-width: 58ch; padding-top: .9rem; border-top: 1px solid var(--rule-2); }
.veredicto:focus { outline: none; }
.veredicto:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; }

@media (max-width: 560px) {
  .veredicto__acciones { align-items: stretch; }
  .veredicto__acciones .btn { width: 100%; text-align: center; }
  .veredicto__precio { gap: .55rem 1.5rem; }
}

/* =========================================================================
   2. LAS TRES FORMAS
   ========================================================================= */
.formas { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }
.formas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.forma { padding: 1.75rem clamp(1rem, 2vw, 2rem) 1.75rem 0; border-bottom: 1px solid var(--rule); }
.forma + .forma { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 2rem); }
.forma h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.forma__one { font-size: .9375rem; margin-bottom: 1.35rem; max-width: 34ch; }
.forma__facts { margin: 0 0 1.35rem; display: grid; gap: .85rem; }
.forma__facts div { display: grid; gap: .15rem; }
.forma__facts dt { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.forma__facts dd { margin: 0; font-size: .8125rem; color: var(--ink); }
.forma__when { font-size: .8125rem; color: var(--ink-2); margin: 0; padding-top: .9rem; border-top: 1px solid var(--rule-2); }

/* =========================================================================
   3. EL REPARTO + OVERPRINT
   ========================================================================= */
.reparto { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }

.overprint { max-width: 460px; }
.overprint--wide { max-width: none; }
.overprint__stage {
  position: relative; isolation: isolate;
  background: var(--paper);
  display: grid; grid-template-columns: 1fr minmax(104px, .8fr) 1fr;
  grid-template-rows: 1fr;
  min-height: 96px;
  border: 1px solid var(--rule);
  overflow: hidden;                 /* la tinta no se sale del pliego */
  cursor: ew-resize; touch-action: pan-y;
}
.overprint--single .overprint__stage { cursor: default; }
.overprint--wide .overprint__stage { min-height: clamp(112px, 14vw, 150px); }

.pass { position: relative; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .7rem .95rem; }
.pass::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  mix-blend-mode: multiply;
  transition: transform .34s cubic-bezier(.16,.84,.34,1);
}
.pass > * { position: relative; z-index: 2; }
.pass--a { grid-column: 1 / 3; align-items: flex-start; }
.pass--b { grid-column: 2 / 4; align-items: flex-end; text-align: right; }
.pass--a::before { background: var(--pass-a); transform: translateX(calc(-1 * var(--sep))); }
.pass--b::before { background: var(--pass-b); transform: translateX(var(--sep)); }

.pass__k, .overlap__k { font-family: var(--mono); font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.pass__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 500; color: var(--ink); }

.overlap {
  grid-row: 1; grid-column: 2 / 3; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  text-align: center; padding: .5rem .4rem;
  transition: opacity .22s ease;
}
.overprint[data-dragging="true"] .pass::before { transition: none; }
.overlap__k { color: var(--ink); font-weight: 600; }
.overlap__v { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); font-weight: 600; color: var(--pine); line-height: 1.05; }
.overprint[data-open="true"] .overlap { opacity: 0; }

.split {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: .1rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.split:hover { color: var(--pine); text-decoration-color: currentColor; }
/* El pie del reparto: el control y, cuando se separan, lo que eso significa */
.overprint__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; }
.overprint__foot .split { margin-top: .1rem; }
.overprint__dice[hidden] { display: none; }
.overprint__dice {
  margin: .6rem 0 0; font-family: var(--serif); font-size: .9375rem;
  font-style: italic; color: var(--pine);
}

@supports not (mix-blend-mode: multiply) {
  .pass--a { grid-column: 1 / 2; } .pass--b { grid-column: 3 / 4; }
  .pass--a::before { background: var(--pass-a-flat); }
  .pass--b::before { background: var(--pass-b-flat); }
  .overlap { background: var(--overlap-flat); }
}
@media (forced-colors: active) {
  .pass::before { display: none; }
  .pass { border-inline-end: 1px solid CanvasText; }
}

.reparto__cols { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.reparto__col { padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem) 1.5rem 0; }
.reparto__col--ours { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.reparto__col h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.tasklist { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: t; }
.tasklist li {
  counter-increment: t; position: relative;
  padding: .55rem 0 .55rem 2.1rem; border-bottom: 1px solid var(--rule-2);
  font-size: .875rem;
}
.tasklist li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0; top: .62rem;
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
}
.reparto__note { font-size: .8125rem; color: var(--ink-2); margin: 1rem 0 0; max-width: 40ch; }

/* =========================================================================
   4. EXPEDIENTE
   ========================================================================= */
.exp { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }
.exp__machine { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.exp__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.step {
  width: 100%; display: flex; align-items: baseline; gap: .9rem;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: .85rem .5rem; cursor: pointer; text-align: left;
  color: var(--ink-2); font-size: .9375rem;
}
.step__n {
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
  min-width: 1.6rem; height: 1.6rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2);
}
.step__t { font-weight: 500; }
.step:hover { color: var(--ink); }
.step[data-done="true"] { color: var(--ink); }
.step[data-done="true"] .step__n { color: var(--pine); border-color: var(--pine); }
.step[aria-current="step"] { font-weight: 600; color: var(--ink); }
.step[aria-current="step"] .step__n { background: var(--pine); border-color: var(--pine); color: var(--paper); }

.exp__read { padding-top: .25rem; }
.exp__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem); line-height: 1.2; margin: 0 0 .75rem; }
.exp__body { color: var(--ink-2); max-width: 46ch; margin: 0; font-size: .9375rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.facts div { display: flex; flex-direction: column; gap: .15rem; }
.facts dt { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.facts dd { margin: 0; font-family: var(--mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.facts--exp { margin-top: 1.35rem; }

/* =========================================================================
   5. COMPROMISOS
   ========================================================================= */
.compromisos { padding: clamp(2.75rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--rule); }
.comp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.comp__list li { padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem) 1.5rem 0; border-bottom: 1px solid var(--rule); }
.comp__list li + li { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
.comp__list h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.comp__list p { font-size: .875rem; color: var(--ink-2); margin: 0; }

/* =========================================================================
   6. CALCULADORAS
   ========================================================================= */
.calc { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.tabs__list { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: .6rem 1.1rem .7rem; margin-bottom: -1px; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--pine); }

.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr); gap: clamp(1.5rem, 3vw, 3.5rem); padding: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.panel[hidden] { display: none; }
.panel__lead { color: var(--ink-2); font-size: .875rem; max-width: 38ch; }

.field { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; }
.field__hint { display: block; font-family: var(--sans); font-weight: 400; font-size: .8125rem; color: var(--ink-2); margin: .3rem 0 .75rem; max-width: 40ch; }
.field__wrap { display: flex; border: 1px solid var(--ink); max-width: 240px; background: var(--paper); }
.field__wrap input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .55rem .7rem; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 500; }
.field__wrap input:focus-visible { outline-offset: -3px; }
.field__unit { display: flex; align-items: center; padding: 0 .7rem; background: var(--paper-2); border-left: 1px solid var(--rule); font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
.slider { width: 100%; max-width: 380px; margin-top: 1.1rem; accent-color: var(--pine); }

.check { display: flex; align-items: baseline; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.check input { accent-color: var(--pine); }
.check span { display: flex; justify-content: space-between; gap: 1rem; flex: 1; }
.check em { font-family: var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.check input:disabled ~ span { color: var(--ink-2); }

.panel__out { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
.out__k { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-2); margin: 0 0 .35rem; }
/* Cuando lo escrito se sale de la escala del deslizador, se dice */
.slider__off[hidden] { display: none; }
.slider__off {
  margin: .45rem 0 0; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .04em; color: var(--ink-2);
}
.out__v { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .6rem; }
.out__v b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); line-height: 1; color: var(--pine); }
.out__v span { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); }
.out__v--sm b { font-size: 1.5rem; color: var(--ink); }
.out__note { font-size: .8125rem; color: var(--ink-2); margin: 0; max-width: 36ch; }
.verso { display: grid; gap: 1.1rem; margin-bottom: 1rem; }

/* =========================================================================
   7. TARIFAS
   ========================================================================= */
.tarifas { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }
.table-scroll { overflow-x: auto; }
.tarifa-table { width: 100%; border-collapse: collapse; }
.tarifa-table th, .tarifa-table td { text-align: left; padding: .95rem .75rem .95rem 0; vertical-align: baseline; }
.tarifa-table thead th {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
  border-bottom: 2px solid var(--ink); padding-bottom: .6rem;
}
.tarifa-table tbody th { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
.tarifa-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9375rem; text-align: right; padding-right: 0; }
.tarifa-table thead .num { text-align: right; }
.tarifa-table .zero { color: var(--ink-3); }
.tarifa-table .total { font-weight: 600; color: var(--pine); font-size: 1.0625rem; }
.tarifa-table .when { color: var(--ink-2); font-size: .8125rem; }
/* La accion vive en la fila: aqui es donde se decide, no 800 px mas abajo.
   Enlace de texto y no boton: cuatro botones seguidos serian una escalera. */
.tarifa-table .go { text-align: right; padding-right: 0; white-space: nowrap; }
.tarifa-table thead .go { text-align: right; }
.tarifa-table .go .link-arrow { font-size: .8125rem; }
.tarifa-table tbody tr:not(.rownote) > * { border-top: 1px solid var(--rule); }
.tarifa-table tbody tr:first-child > * { border-top: 0; }
.rownote td { padding-top: 0; padding-bottom: 1.1rem; font-size: .8125rem; color: var(--ink-2); max-width: 0; }

/* =========================================================================
   8. CUOTA — la cuota mensual es un anadido, no la venta: se cuenta en papel.
   La region de color se la lleva el cierre, que es donde se empieza.
   ========================================================================= */
.cuota { position: relative; background: var(--paper-2); padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }

.cuota__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cuota h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); margin-bottom: 1.1rem; max-width: 22ch; }
.cuota .lede { color: var(--ink-2); margin-bottom: 1.5rem; }
.cuota__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: 52ch; }
.cuota__list li { position: relative; padding-left: 1.1rem; font-size: .9375rem; color: var(--ink-2); }
.cuota__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--pine); }

/* la caja se imprime como segunda densidad, con su propio filete ligeramente
   fuera de registro: el gesto del mundo, en silencio */
.cuota__box { position: relative; background: var(--paper); border: 1px solid var(--rule); padding: clamp(1.35rem, 3vw, 2rem); }
.cuota__box::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid var(--rule-2); pointer-events: none;
}
.cuota__k { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-2); margin: 0 0 .5rem; position: relative; }
.cuota__v { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .6rem; position: relative; }
.cuota__v b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); line-height: 1; }
.cuota__v b { color: var(--pine); }
.cuota__v span { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); }
.cuota__d { font-size: .875rem; color: var(--ink-2); margin: 0 0 1.35rem; position: relative; }
.cuota__alt { font-size: .75rem; color: var(--ink-2); margin: .9rem 0 0; position: relative; }
.cuota .btn { position: relative; }

/* =========================================================================
   9-11. PERSONA / GUÍAS / CIERRE / FOOTER / DOCK
   ========================================================================= */
.persona { padding: clamp(2.75rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--rule); }
.persona__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.persona h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); max-width: 16ch; }
.persona__body p { max-width: 56ch; color: var(--ink-2); }
.persona__terms { font-size: .875rem; margin: 0; }

.guias { padding: clamp(2.75rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--rule); }
.guias__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.guias__list li { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.guias__t { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; max-width: 52ch; }
.guias__s { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); flex: none; }

/* El cierre es la unica region de color de cada pagina: el verde marca donde
   se empieza, no donde se contrata un extra. Las marcas de registro son las
   que llevaba la cuota, que ahora va en papel. */
.cierre { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0; background: var(--pine); color: var(--paper); border-bottom: 0; }
.cierre::before, .cierre::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
  background:
    linear-gradient(rgba(251,250,248,.5), rgba(251,250,248,.5)) center/1px 100% no-repeat,
    linear-gradient(rgba(251,250,248,.5), rgba(251,250,248,.5)) center/100% 1px no-repeat;
}
.cierre::before { top: 14px; left: 14px; }
.cierre::after { bottom: 14px; right: 14px; }
.cierre > .wrap { position: relative; }
.cierre h2 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3rem); margin-bottom: 1.1rem; max-width: 18ch; color: var(--paper); }
.cierre .lede { margin-bottom: 2rem; color: rgba(251, 250, 248, .84); }
.cierre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.cierre .note { margin-top: 1.25rem; color: rgba(251, 250, 248, .78); }
.cierre .note a, .cierre .lede a { color: var(--paper); }
.cierre .link-arrow { color: var(--paper); border-bottom-color: rgba(251, 250, 248, .5); }
.cierre .link-arrow:hover { color: var(--paper); border-bottom-color: var(--paper); border-bottom-width: 2px; }
/* en las paginas interiores el cierre llega como "band cierre": dos clases
   ganan a una, para que .band no le devuelva el filete ni su relleno */
.cierre.band { border-bottom: 0; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

.footer { border-top: 1px solid var(--ink); background: var(--paper-2); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem 3rem; padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom)); }
.footer__h { font-family: var(--mono); font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 0 0 .85rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__col a { color: var(--ink); font-size: .875rem; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.footer__col a:hover { border-bottom-color: var(--pine); }
.footer__col a[aria-current="page"] { color: var(--ink-2); border-bottom-color: var(--rule); }
.footer__col--brand { align-content: start; }
.footer__mark { width: 30px; height: 30px; display: block; margin: 0 0 .75rem; isolation: isolate; }
.footer__parent { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: .95rem 0 0; padding-top: .75rem; border-top: 1px solid var(--rule); }
.footer__name { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; margin: 0 0 .15rem; }
.footer__legal { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); margin: 0; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; align-content: start; }
.footer__nav a { color: var(--ink-2); font-size: .875rem; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.footer__nav a:hover { color: var(--ink); border-bottom-color: var(--pine); }

.dock[hidden] { display: none !important; }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--ink);
}
.dock__in {
  width: 100%; max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem;
}
.dock__price {
  font-size: .8125rem; color: var(--ink-2); line-height: 1.3;
  min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dock .btn { flex: none; }
/* El hueco para la barra fija se reserva en el pie, no en el body: reservarlo
   abajo del todo dejaba una franja de papel claro bajo el pie cuando la barra
   se esconde al llegar al cierre. */
body:has(.dock:not([hidden])) .footer { padding-bottom: 4.25rem; }
.dock .btn { padding: .6rem 1.1rem; font-size: .875rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .reparto__cols { grid-template-columns: 1fr; }
  .reparto__col--ours { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
}

@media (max-width: 900px) {
  .exp__machine, .persona__grid, .cuota__grid, .panel, .opening__say { grid-template-columns: 1fr; }
  .opening__say h1 { max-width: 20ch; }
  .panel__out { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.5rem; }
  .nav { display: none; }
  .comp__list li + li, .forma + .forma, .q + .q { border-left: 0; padding-left: 0; }
  .q { padding-right: 0; }
  .q + .q::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .forma { padding-right: 0; }
  .forma + .forma { padding-top: 1.75rem; }
  .comp__list li { padding-right: 0; }
}

@media (max-width: 760px) {
  .overprint__stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr minmax(62px, .85fr) 1fr;
    min-height: 250px;
  }
  .pass--a { grid-column: 1; grid-row: 1 / 3; align-items: flex-start; justify-content: flex-start; text-align: left; }
  .pass--b { grid-column: 1; grid-row: 2 / 4; align-items: flex-start; justify-content: flex-end; text-align: left; }
  .overlap  { grid-column: 1; grid-row: 2 / 3; }
  .pass--a::before { transform: translateY(calc(-1 * var(--sep))); }
  .pass--b::before { transform: translateY(var(--sep)); }
  /* apilada, la barra ocupa demasiada altura para robar el eje vertical:
     el scroll manda y el gesto lo sustituye el botón, que ya está a la vista */
  .overprint__stage { cursor: default; touch-action: auto; }
}

@media (max-width: 620px) {
  .pass { padding: .7rem .8rem; }
  .pass__k, .overlap__k { letter-spacing: .06em; }
  .footer__grid { grid-template-columns: 1fr; }
  .tab { padding-inline: .7rem; }
}

@media (max-width: 760px) {
  .tarifa-table, .tarifa-table tbody, .tarifa-table tr, .tarifa-table th, .tarifa-table td { display: block; }
  .tarifa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarifa-table tbody tr:not(.rownote) { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
  .tarifa-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .tarifa-table tbody tr:not(.rownote) > * { border-top: 0; }
  .tarifa-table tbody th { padding: 0 0 .7rem; font-size: 1.0625rem; }
  .tarifa-table .num {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    text-align: right; padding: .3rem 0; border-bottom: 1px dotted var(--rule-2);
  }
  .tarifa-table .num::before {
    content: attr(data-l);
    font-family: var(--mono); font-size: .6875rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--ink-2); text-align: left;
  }
  .tarifa-table .total { font-size: 1.125rem; border-bottom: 0; padding-top: .5rem; }
  .tarifa-table .zero { color: var(--ink-2); font-size: .8125rem; }
  .rownote td { padding: .8rem 0 1.4rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================================
   PÁGINAS INTERIORES
   ========================================================================= */
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pine); }

.crumb { font-family: var(--mono); font-size: .6875rem; color: var(--ink-2); margin-bottom: 1.5rem; letter-spacing: .02em; }
.crumb a { color: var(--ink-2); text-underline-offset: 3px; }
.crumb a:hover { color: var(--pine); }
.crumb span[aria-hidden] { padding: 0 .35rem; color: var(--ink-3); }

.page-head { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.page-head h1 { margin-bottom: 1.25rem; max-width: 18ch; }
.page-head .lede { margin: 0; }

.ficha { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.ficha .overprint { max-width: none; margin-bottom: 1.1rem; }
.ficha .facts { margin-bottom: 1.25rem; }
.ficha__note { font-size: .75rem; color: var(--ink-2); margin: .9rem 0 0; max-width: 34ch; }
.ficha--quiet { border-top-width: 1px; }
.ficha--quiet p { font-size: .875rem; color: var(--ink-2); margin: 0; }
.h-sm { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; margin: 0 0 .85rem; }

.band { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }
.band--sunk { background: var(--paper-2); }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }
.two--weighted { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.two h2 { font-size: clamp(1.25rem, 1.1rem + .9vw, 1.625rem); margin-bottom: 1.1rem; }

.ticks, .crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ticks li, .crosses li {
  position: relative; padding: .65rem 0 .65rem 1.9rem;
  border-bottom: 1px solid var(--rule-2); font-size: .9375rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 1px; top: 1rem; width: 12px; height: 7px;
  border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine);
  transform: rotate(-45deg);
}
.crosses li { color: var(--ink-2); }
.crosses li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem; width: 13px; height: 2px;
  background: var(--ink-3);
}

.steplist { list-style: none; margin: 0; padding: 0; counter-reset: sl; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.steplist li { counter-increment: sl; padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem) 1.5rem 0; border-bottom: 1px solid var(--rule); }
.steplist li + li { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
.steplist li::before {
  content: counter(sl, decimal-leading-zero);
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
  display: block; margin-bottom: .6rem;
}
.steplist h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.steplist p { font-size: .875rem; color: var(--ink-2); margin: 0; }

.faq { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.faq > dl { margin: 0; padding: 1.35rem clamp(1.25rem, 2.5vw, 2.25rem) 1.35rem 0; border-bottom: 1px solid var(--rule); }
.faq > dl + dl { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }

/* La foto ocupa las celdas que sobran en la ultima fila: empieza donde toque y
   termina en la ultima columna, sea cual sea el numero de columnas. */
.faq__fig { grid-column: span var(--fig-span, 1); position: relative; min-height: 8.5rem; overflow: hidden; }
.faq__fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: multiply;
}
.faq dt { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; margin-bottom: .5rem; }
.faq dd { margin: 0; font-size: .875rem; color: var(--ink-2); max-width: 52ch; }

.breakdown { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.breakdown > div { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); gap: 1rem clamp(1.25rem, 3vw, 3rem); padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.breakdown dt { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
.breakdown dd { margin: 0; font-size: .9375rem; color: var(--ink-2); max-width: 62ch; }
.breakdown--tight > div { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; }
.breakdown--tight dt { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); font-weight: 500; }
.breakdown--tight dd { font-size: .875rem; color: var(--ink); }

.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.linklist li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.linklist a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.linklist a:hover { border-bottom-color: var(--pine); }
.linklist span:last-child { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); flex: none; }

/* =========================================================================
   FOTOGRAFIA
   La imagen entra como una pasada mas de tinta sobre el papel: en gris y en
   multiply, para que conviva con la sobreimpresion del resto del pliego y no
   compita con la tipografia. Para verlas a todo color, quitar la linea filter.
   Sin imagen no se pinta nada: la pagina se sostiene igual.
   ========================================================================= */
.figure { margin: 0; }
.figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: multiply;
}
.figure figcaption {
  font-family: var(--mono); font-size: .6875rem; line-height: 1.55; color: var(--ink-3);
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--rule-2);
}
.figure--wide { margin-block: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.75rem); }
/* Franja apaisada: la foto acompana, no manda */
.figure--band img { aspect-ratio: 21 / 9; }

/* Miniatura del listado de guias */
.figure--thumb { flex: none; width: 104px; }
.figure--thumb img { aspect-ratio: 4 / 3; }
.guias__main { flex: 1 1 22rem; min-width: 0; }
@media (max-width: 520px) {
  .figure--thumb { width: 72px; }
}

/* Banda que solo sostiene una figura */
.band--tight { padding: clamp(2rem, 4vw, 3rem) 0; }

.guias__list--rich li { align-items: start; padding: 1.35rem 0; }
.guias__abstract { font-size: .875rem; color: var(--ink-2); margin: .5rem 0 0; max-width: 60ch; }
.cuota__v--ink b { color: var(--pine); }
.cuota__v--ink span { color: var(--ink-2); }
.tarifa-table tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.tarifa-table tbody th a:hover { border-bottom-color: var(--pine); }
.forma__go { margin: .9rem 0 0; }

/* =========================================================================
   FORMULARIO GUIADO
   ========================================================================= */
.wizard { display: grid; grid-template-columns: minmax(190px, .28fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.wizard__rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.wstep {
  width: 100%; display: flex; align-items: baseline; gap: .8rem;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: .8rem .4rem; cursor: pointer; text-align: left;
  color: var(--ink-2); font-size: .9375rem;
}
.wstep__n {
  font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
  min-width: 1.6rem; height: 1.6rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2);
}
.wstep:hover { color: var(--ink); }
.wstep[data-done="true"] { color: var(--ink); }
.wstep[data-done="true"] .wstep__n { color: var(--pine); border-color: var(--pine); }
.wstep[aria-current="step"] { font-weight: 600; color: var(--ink); }
.wstep[aria-current="step"] .wstep__n { background: var(--pine); border-color: var(--pine); color: var(--paper); }

.wpanel { border: 0; padding: 0; margin: 0 0 1.75rem; }
.wpanel[hidden] { display: none; }
.wpanel h3 { font-size: clamp(1.25rem, 1.1rem + .9vw, 1.625rem); margin-bottom: .7rem; }
.wpanel__hint { font-size: .875rem; color: var(--ink-2); max-width: 54ch; margin-bottom: 1.35rem; }

.opts--wide label span { display: flex; width: 100%; align-items: baseline; }
.opts--wide label em { font-style: normal; font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); margin-left: auto; padding-left: 1rem; }
.check--std { border-bottom: 0; margin-top: 1.1rem; padding: .7rem .8rem; border: 1px solid var(--rule); background: var(--paper); }

.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem clamp(1.25rem, 2.5vw, 2rem); }
.field--std { font-family: var(--sans); font-weight: 600; font-size: .9375rem; }
.field--std input, .field--std textarea {
  display: block; width: 100%; margin-top: .5rem;
  border: 1px solid var(--ink); background: var(--paper);
  padding: .65rem .75rem; font-family: var(--sans); font-size: 1rem; font-weight: 400;
}
.field--std textarea { resize: vertical; }
.field--std input:focus-visible, .field--std textarea:focus-visible { outline-offset: -3px; }
.field--std input[aria-invalid="true"], .field--std textarea[aria-invalid="true"] { border-color: #8A1F11; border-width: 2px; }
.field--wide { grid-column: 1 / -1; }

.droplist { display: grid; gap: .6rem; }
.drop {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45rem 1rem;
  border: 1px dashed var(--rule); padding: 1rem 1.1rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover { border-color: var(--ink-3); background: var(--paper); }
.drop:focus-within { border-color: var(--pine); border-style: solid; }
.drop input { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; }
.drop__t { font-weight: 600; font-size: .9375rem; }
.drop__s { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.drop[data-filled="true"] { border-style: solid; border-color: var(--pine); }

.summary { margin: 0 0 1.25rem; border-top: 1px solid var(--rule); }
.summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule-2); }
.summary dt { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.summary dd { margin: 0; font-size: .9375rem; text-align: right; max-width: 40ch; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.summary__total span { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.summary__total b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 600; color: var(--pine); }

.wizard__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.wizard__saved { font-family: var(--mono); font-size: .6875rem; color: var(--ink-2); margin: 0 0 0 auto; }

@media (max-width: 900px) {
  .page-head__grid, .two--weighted, .wizard { grid-template-columns: 1fr; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__fig { grid-column: span var(--fig-span-2, 1); }
  .faq > dl + dl, .steplist li + li { border-left: 0; padding-left: 0; }
  .faq > dl, .steplist li { padding-right: 0; }
  /* los cinco pasos caben en pantalla: solo el actual dice su nombre */
  .wizard__rail { display: flex; align-items: stretch; border-top: 0; border-bottom: 1px solid var(--rule); }
  .wizard__rail li { flex: none; }
  .wstep { border-bottom: 0; white-space: nowrap; padding: .7rem .5rem; gap: .5rem; }
  .wstep .wstep__t { display: none; }
  .wstep[aria-current="step"] .wstep__t { display: inline; }
}

@media (max-width: 620px) {
  .faq { grid-template-columns: 1fr; }
  .faq__fig { grid-column: auto; }
  .breakdown > div { grid-template-columns: 1fr; gap: .35rem; }
  .summary > div { flex-direction: column; gap: .2rem; }
  .summary dd { text-align: left; }
}

/* =========================================================================
   REGLA DE FILETES EN REJILLA
   Un borde por celda falla en cuanto la rejilla envuelve: la primera celda
   de la segunda fila hereda un filete lateral que no le toca. Se resuelve con
   un hueco de 1px que rellena cada celda con su propio anillo de sombra: el
   filete solo existe donde hay celda, asi que la ultima fila incompleta no
   deja un bloque de fondo a la vista. El anillo que sobresale por los bordes
   exteriores lo recorta el overflow del contenedor.
   ========================================================================= */
:root { --cell-bg: var(--paper); }
.band--sunk, .test { --cell-bg: var(--paper-2); }

.faq,
.steplist,
.comp__list,
.formas__grid,
.qs {
  gap: 1px;
  background: var(--cell-bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.faq > dl,
.faq__fig,
.steplist li,
.comp__list li,
.forma,
.q {
  background: var(--cell-bg);
  box-shadow: 0 0 0 1px var(--rule);
  border: 0;
  padding: 1.5rem clamp(1.15rem, 2.2vw, 2rem);
}

.faq > dl + dl,
.steplist li + li,
.comp__list li + li,
.forma + .forma,
.q + .q {
  border-left: 0;
  padding-left: clamp(1.15rem, 2.2vw, 2rem);
}

.q + .q::before { display: none; }
.steplist li::before { margin-top: 0; }

@media (max-width: 900px) {
  .faq > dl, .steplist li, .comp__list li, .forma, .q,
  .faq > dl + dl, .steplist li + li, .comp__list li + li, .forma + .forma, .q + .q {
    padding-left: clamp(1.15rem, 2.2vw, 2rem);
    padding-right: clamp(1.15rem, 2.2vw, 2rem);
  }
  .forma + .forma { padding-top: 1.5rem; }
}

/* =========================================================================
   Piezas del CMS
   Lo que la version estatica no necesitaba: aviso de cookies, barra legal del
   pie, texto corrido de las guias y las paginas legales, y el acuse del
   formulario de contacto. Mismo sistema, mismos tokens.
   ========================================================================= */

/* --- distintivo del Kit Digital --------------------------------------
   El bloque oficial se entrega como una sola imagen sobre blanco: se le da
   su propio recuadro para que no flote sobre el papel crudo del pie, y se
   deja escalar a lo ancho sin pasar de su tamano real. */
.footer__kit {
  border-top: 1px solid var(--rule-2);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
}
.footer__kitimg {
  display: block; width: 100%; max-width: 640px; height: auto;
  margin-inline: auto;
  background: #fff; border: 1px solid var(--rule-2); border-radius: 2px;
  padding: .5rem .75rem;
}

/* --- barra legal del pie --------------------------------------------- */
.footer__legalbar {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--rule-2);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
}
.footer__kit + .footer__legalbar { margin-top: 1.25rem; }
.footer__legallinks {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.footer__legallinks a {
  font-family: var(--mono); font-size: .75rem;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.footer__legallinks a:hover { color: var(--ink); border-bottom-color: var(--rule); }

/* --- aviso de cookies -------------------------------------------------- */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: var(--paper); border-top: 1px solid var(--ink);
  box-shadow: 0 -1px 0 var(--rule-2);
}
.cookies[hidden] { display: none; }
.cookies__in {
  max-width: var(--max); margin: 0 auto;
  padding: .9rem var(--gut);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
}
.cookies__t { margin: 0; font-size: .8125rem; color: var(--ink-2); max-width: 78ch; }
.cookies__t a { color: var(--pine); }
.btn--sm { padding: .5rem 1rem; font-size: .8125rem; }

/* la barra fija y el aviso no pueden solaparse */
.cookies:not([hidden]) ~ .dock { bottom: 4.5rem; }

/* --- texto corrido: guias y paginas legales ---------------------------- */
.prose { max-width: 68ch; }
.prose h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  margin: 2.25rem 0 .6rem;
}
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; line-height: 1.62; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; line-height: 1.58; }
.prose a { color: var(--pine); }
.prose--legal p, .prose--legal li { font-size: .9375rem; color: var(--ink-2); }
.prose--legal strong { color: var(--ink); }

.video { max-width: 68ch; aspect-ratio: 16 / 9; margin: 0 0 1.5rem; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* --- acuse del formulario de contacto ---------------------------------- */
.err--ok { color: var(--pine); }
.wizard__form .err {
  border-left: 2px solid currentColor;
  padding: .6rem 0 .6rem .9rem;
  margin-bottom: 1.5rem;
}

/* --- texto de la BD dentro de contenedores de una sola linea ------------
   El editor del admin devuelve parrafos completos, asi que los contenedores
   que en la version estatica eran <p> ahora envuelven <p>. Se normalizan los
   margenes para que el ritmo vertical no cambie. */
.lede > p,
.persona__terms > p,
.ficha--quiet > p,
.head > p,
.cierre .lede > p {
  margin: 0 0 .8rem;
  font-size: inherit; line-height: inherit; color: inherit;
}
.lede > p:last-child,
.persona__terms > p:last-child,
.ficha--quiet > p:last-child,
.head > p:last-child,
.cierre .lede > p:last-child { margin-bottom: 0; }

.persona__body > p { margin: 0 0 1rem; }
.steplist li > p,
.comp__list li > p { margin: 0; }

/* --- enlaces sueltos dentro de texto de la BD ---------------------------
   El editor del admin permite enlazar dentro de cualquier campo de texto.
   Sin esto saldrian con el azul por defecto del navegador. */
.note a,
.ficha__note a,
.guias__t a,
.guias__abstract a,
.faq dd a,
.breakdown dd a,
.wpanel__hint a,
.cookies__t a,
.footer__col--brand a,
.reparto__note a,
.forma__one a,
.forma__when a {
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.note a:hover,
.ficha__note a:hover,
.guias__t a:hover,
.guias__abstract a:hover,
.faq dd a:hover,
.breakdown dd a:hover,
.wpanel__hint a:hover,
.cookies__t a:hover,
.footer__col--brand a:hover,
.reparto__note a:hover,
.forma__one a:hover,
.forma__when a:hover { color: var(--pine-deep); border-bottom-color: var(--pine); }

.footer__col--brand a { color: var(--ink); border-bottom-color: var(--rule-2); }
.footer__col--brand a:hover { color: var(--pine); }

/* -------------------------------------------------------------------------
   Navegacion en pantallas estrechas: el arbol entero dentro del panel.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dock__in { justify-content: space-between; gap: 1rem; }
  .dock__price { max-width: 14ch; }
  .masthead__in { flex-wrap: nowrap; }
  .navtoggle { margin-left: -.6rem; }
  .searchbar__hint { display: none; }
}

/* En pantallas muy estrechas la marca ya ocupa dos lineas: el boton se queda
   en el icono para que no salte de fila al abrir el menu. */
@media (max-width: 560px) {
  .masthead__in { gap: .75rem; }
  .navtoggle { padding: .45rem .55rem; }
  .navtoggle__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .navtoggle { display: inline-flex; }
  .nav {
    display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: 1rem; border-top: 1px solid var(--rule);
  }
  .masthead--open .masthead__in { flex-wrap: wrap; }
  .masthead--open .nav { display: flex; }
  .nav > .nav__top, .nav__group > .nav__top {
    padding: .8rem 0; border-bottom: 1px solid var(--rule-2); color: var(--ink);
  }
  .nav__group { display: block; position: static; }
  .nav__more { display: none; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; box-shadow: none; background: none;
    padding: .2rem 0 .6rem; margin-left: .9rem; border-left: 1px solid var(--rule);
  }
  .nav__sub a { padding: .42rem .9rem; }

}