/* =========================================================================
   Alquiler de Habitaciones Madrid — rent-to-rent comparator landing.
   Design direction: "dossier". Warm paper, hairline rules, a stamped
   vermilion accent and a highlighter amber. The comparison table is the
   visual identity: rules, cells and marked rows repeat across the page.
   Light theme only, mobile-first, WCAG AA.
   ========================================================================= */

/* --------------------------------- Tokens -------------------------------- */
:root {
  --paper:        #F7F4ED;
  --paper-raised: #FFFDF8;
  --paper-deep:   #EFEADF;

  --ink:          #15171C;
  --ink-soft:     #4E535D;
  --ink-faint:    #6A6F7C;

  --rule:         #DCD5C7;
  --rule-strong:  #B9B0A0;

  --accent:       #A8321E;
  --accent-dark:  #8A2717;
  --accent-tint:  #F6E6E1;
  --on-accent:    #FFF7F3;

  --mark:         #F2D98E;
  --mark-tint:    #FBF1D5;

  --ok:           #1F6B4A;
  --ok-tint:      #E4F0E9;
  --danger:       #A8321E;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;

  --step-0: 1rem;
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.7vw, 2.85rem);
  --step-5: clamp(2.3rem, 1.7rem + 3vw, 4rem);

  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  --shell: 74rem;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 0 rgba(21, 23, 28, 0.06);
  --shadow-md: 0 14px 34px -22px rgba(21, 23, 28, 0.55);
  --shadow-lg: 0 30px 70px -40px rgba(21, 23, 28, 0.6);

  --z-sticky: 40;
  --z-header: 50;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.62;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  /* Faint ruled-paper texture: the table motif, dialled all the way down. */
  background-image: linear-gradient(to right, rgba(185, 176, 160, 0.16) 1px, transparent 1px);
  background-size: 7.5rem 100%;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.22; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); }

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-3); top: -100%;
  z-index: 100; background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--sp-2); color: var(--paper); }

/* --------------------------------- Layout -------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.shell--narrow { max-width: 50rem; }

.section { padding-block: var(--sp-6); }
.section--alt { background: var(--paper-deep); border-block: 1px solid var(--rule); }
.section--form { padding-block: var(--sp-6) var(--sp-5); }

.section__title { margin-bottom: var(--sp-3); }
.section__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: var(--sp-2);
  background: var(--accent);
}
.section__lede {
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  margin-bottom: var(--sp-4);
}

.subhead {
  font-size: var(--step-2);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
}
/* The first subhead of a section sits right under its lede. */
.subhead--first { margin-top: var(--sp-4); }
.subhead + .table-note { margin-top: calc(var(--sp-3) * -1 + 0.2rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/* --------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 54px; padding: 0.95rem 1.65rem; font-size: 1.0625rem; }
.btn--sm { min-height: 42px; padding: 0.5rem 1rem; font-size: 0.95rem; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink-faint); }

.btn--invert {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--invert:hover { background: var(--mark); color: var(--ink); border-color: var(--mark); }

.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; cursor: progress; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--mark);
}
.link-arrow::after { content: "\2193"; font-size: 1.05em; }
.link-arrow:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------- Header -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 244, 237, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 66px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__glyph { width: 30px; height: 23px; color: var(--accent); flex: none; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.12; }
.wordmark__eyebrow {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.wordmark__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

@media (max-width: 34rem) {
  .wordmark__name { font-size: 0.9rem; max-width: 11.5rem; }
}

/* ---------------------------------- Hero --------------------------------- */
.hero {
  padding-block: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(60rem 32rem at 85% -12%, var(--mark-tint) 0%, transparent 62%),
    radial-gradient(42rem 26rem at 8% 6%, rgba(168, 50, 30, 0.07) 0%, transparent 60%);
}

.hero__grid { display: grid; gap: var(--sp-5); align-items: start; }

@media (min-width: 62rem) {
  .hero { padding-block: var(--sp-7) var(--sp-6); }
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: var(--sp-5); }
  .hero__sheet { margin-top: 1.5rem; }
}

.hero h1 { margin-bottom: var(--sp-3); }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: var(--sp-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.microcopy {
  font-size: 0.9375rem;
  color: var(--ink-faint);
  max-width: 30rem;
}

/* Hero "sheet": a miniature of the comparison table. Decorative. */
.sheet {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute; inset: 0.45rem 0.45rem -0.45rem -0.45rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.sheet__head {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0.9rem;
}
.sheet__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.sheet__stamp {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}
.sheet__rows { display: grid; gap: 0.55rem; }
.sheet__row {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.sheet__row--mark { background: var(--mark-tint); border-color: var(--mark); }
.sheet__label { font-size: 0.82rem; font-weight: 650; color: var(--ink-soft); }
.sheet__bar {
  display: block;
  height: 0.5rem;
  width: var(--w);
  background: repeating-linear-gradient(
    90deg, var(--ink) 0 14px, transparent 14px 20px
  );
  opacity: 0.62;
  border-radius: 2px;
}
.sheet__row--mark .sheet__bar { background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 20px); opacity: 0.8; }
.sheet__legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin-top: 0.9rem;
  padding-top: 0.8rem; border-top: 1px dashed var(--rule-strong);
}
.sheet__legend li {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}

/* -------------------------------- Trust bar ------------------------------ */
.trustbar {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: var(--sp-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  overflow: hidden;
}
.trustbar li {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.trustbar li:last-child { border-bottom: 0; }
.trustbar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.trustbar span { font-size: 0.9375rem; color: var(--ink-soft); }

@media (min-width: 48rem) {
  .trustbar { grid-template-columns: repeat(3, 1fr); }
  .trustbar li { border-bottom: 0; border-right: 1px solid var(--rule); }
  .trustbar li:last-child { border-right: 0; }
}

/* ---------------------------------- Steps -------------------------------- */
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; }

.step {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: 0.35rem var(--sp-4);
}
.step:last-child { border-bottom: 1px solid var(--rule-strong); }

.step__n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--ink-soft); max-width: 46rem; }

@media (min-width: 48rem) {
  .step { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; }
  .step__n { grid-row: span 2; }
}

.note {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--mark-tint);
  border-left: 4px solid var(--mark);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 48rem;
}

/* ------------------------------ Comparison table ------------------------- */
.table-hint {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
@media (min-width: 52rem) { .table-hint { display: none; } }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}

/* A short line under a table heading, before the table itself. */
.table-note {
  max-width: 44rem;
  margin-bottom: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.cmp {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  caption-side: bottom;
}
/* The gestión table has one column more and needs a little more room. */
.cmp--wide { min-width: 52rem; }

.cmp caption {
  text-align: left;
  padding: var(--sp-3);
  font-size: 0.85rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
}
.cmp th, .cmp td {
  text-align: left;
  padding: 0.95rem var(--sp-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cmp thead th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  border-bottom: 0;
}
.cmp tbody th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--paper-deep);
  border-right: 1px solid var(--rule);
}
.cmp tbody td { color: var(--ink-soft); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

.cmp tbody tr.is-marked th { background: var(--mark); color: var(--ink); }
.cmp tbody tr.is-marked td { background: var(--mark-tint); color: var(--ink); }

.cmp .na {
  color: var(--accent);
  font-style: italic;
}
.cmp .na::before {
  content: "\2014\00a0";
  font-style: normal;
}

/* ---------------------------------- Chips -------------------------------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chips li {
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}

/* --------------------------------- Pillars ------------------------------- */
.pillars { display: grid; gap: var(--sp-4); }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border-top: 3px solid var(--ink);
  background: linear-gradient(180deg, var(--paper-raised), transparent 70%);
}
.pillar__icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: var(--sp-3); }
.pillar h3 { margin-bottom: var(--sp-2); }
.pillar p { color: var(--ink-soft); font-size: 0.9375rem; }

/* ----------------------------------- FAQ --------------------------------- */
.faq { border-top: 1px solid var(--rule-strong); }

.faq__item { border-bottom: 1px solid var(--rule-strong); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 0.85rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 0.85rem no-repeat;
  transition: transform 220ms ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--accent); }

.faq__body {
  padding: 0 0 var(--sp-3);
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  animation: faq-in 240ms ease both;
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------- Disclosure ------------------------------ */
.disclosure {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  position: relative;
}
.disclosure::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.55rem 0;
  height: 0.55rem;
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px);
  opacity: 0.22;
}
.disclosure__title {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}
.disclosure p { color: var(--ink-soft); font-size: 0.9375rem; }

/* --------------------------------- Formulario ---------------------------- */
.noscript-note {
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--accent-dark);
}

.formcard {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.formcard__progress {
  padding: var(--sp-3) clamp(1.1rem, 4vw, 2rem) var(--sp-2);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
.progress {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.progress__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.progress__item.is-current, .progress__item.is-done { color: var(--ink); }
.progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--paper-raised);
}
.progress__item.is-current .progress__dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.progress__item.is-done .progress__dot { background: var(--ok); border-color: var(--ok); color: #fff; }

.progress__track { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.progress__fill {
  height: 100%;
  width: 50%;
  background: var(--accent);
  transition: width 260ms ease;
}
.progress__caption { font-size: 0.8rem; color: var(--ink-faint); margin: var(--sp-1) 0 0; }

form { padding: clamp(1.1rem, 4vw, 2rem); }

.fstep { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.fstep.is-active { display: block; animation: step-in 260ms ease both; }
@keyframes step-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

.field { margin-bottom: var(--sp-3); }
/* :not(.check) so the consent checkbox keeps its own grid layout and weight. */
.field > label:not(.check) {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.tag-opt {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.3rem;
  vertical-align: 0.1em;
}
.field__help {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.8rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
/* Focus is ink + a warm halo; red borders are reserved for errors only. */
input:focus, select:focus, textarea:focus {
  background: var(--paper-raised);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--mark);
  outline: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); background: #FDF4F2; }

.field__error {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--danger);
}
.field__error::before { content: "\26A0\FE0E\00a0\00a0"; }
.field.has-error .field__error { display: block; }

.grid-2 { display: grid; gap: 0 var(--sp-3); }

@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; }

  /* Keep both inputs of a row on the same baseline even when one help text
     wraps to two lines and the other does not. Each .field lays its four
     parts (label, help, control, error) on the parent's rows. */
  @supports (grid-template-rows: subgrid) {
    .grid-2 { grid-template-rows: auto auto auto auto; }
    .grid-2 > .field {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      align-content: start;
    }
  }
}

/* Service picker: the first answer of step 1, one card per service */
.field--choice { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-inline-size: 0; }
.field--choice > legend {
  padding: 0;
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.choices { display: grid; gap: 0.5rem; }
.choice {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.choice:hover { border-color: var(--ink-faint); }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
}
.choice__box {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.1rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper-raised);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.choice input:checked + .choice__box {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: inset 0 0 0 3px var(--paper-raised), inset 0 0 0 1rem var(--accent);
}
.choice input:focus-visible + .choice__box { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice__text { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--mark-tint); }
.choice:has(input:checked) .choice__text { color: var(--ink); font-weight: 600; }
.field--choice.has-error .choice { border-color: var(--danger); }

/* Consent checkbox */
.field--consent {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.check {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
}
.check__box {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--paper-raised);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.check input:checked + .check__box {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23FFF7F3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.check input:focus-visible + .check__box { outline: 3px solid var(--accent); outline-offset: 2px; }
.check__text { font-size: 0.82rem; font-weight: 400; line-height: 1.55; color: var(--ink-soft); }
.check__text a { font-weight: 650; }

.field--consent.has-error { border-color: var(--danger); background: #FDF4F2; }

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.formnav__note {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.form-status {
  margin: var(--sp-3) 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  display: none;
}
.form-status.is-error {
  display: block;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
}
.form-status.is-info {
  display: block;
  background: var(--mark-tint);
  border: 1px solid var(--mark);
  color: var(--ink);
}

/* Success state */
.success {
  padding: clamp(1.4rem, 5vw, 2.5rem);
  animation: step-in 300ms ease both;
}
.success__mark { width: 52px; height: 52px; color: var(--ok); margin-bottom: var(--sp-3); }
.success h3 { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.success > p { color: var(--ink-soft); font-size: 0.9375rem; }
.success__next {
  list-style: none;
  margin: var(--sp-3) 0 0;
  border-top: 1px solid var(--rule);
}
.success__next li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.success__next li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--accent);
  border-radius: 2px;
}
.success__foot { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-faint); }

/* -------------------------------- CTA final ------------------------------ */
.section--cta {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--sp-6);
}
.cta { text-align: center; }
.cta h2 { color: var(--paper); }
.cta h2::after { content: none; }
.cta p { color: #C9CBD2; max-width: 40rem; margin-inline: auto; }
.cta .btn { margin-top: var(--sp-3); }
.cta__micro { margin-top: var(--sp-3); font-size: 0.85rem; color: #9BA0AA; }

/* --------------------------------- Footer -------------------------------- */
.site-footer {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule-strong);
  padding-block: var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.site-footer__disclosure { max-width: 52rem; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.site-footer__nav a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__legal { color: var(--ink-faint); font-size: 0.8rem; }

/* ------------------------------ Legal pages ------------------------------ */
.legal { padding-block: var(--sp-5) var(--sp-6); }
.legal h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.legal h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.legal h2::after { content: none; }
.legal p { color: var(--ink-soft); font-size: 0.9375rem; max-width: 46rem; }

.legal__todo {
  padding: var(--sp-3);
  background: var(--mark-tint);
  border: 1px solid var(--mark);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.legal__todo p { color: var(--ink); margin: 0; }

.legal__data {
  list-style: none;
  margin: 0 0 var(--sp-3);
  border-top: 1px solid var(--rule);
  max-width: 46rem;
}
.legal__data li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink);
}
.legal__data li span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (min-width: 40rem) {
  .legal__data li { grid-template-columns: 15rem 1fr; align-items: baseline; gap: var(--sp-3); }
}

.legal__updated {
  margin-top: var(--sp-4);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.link-arrow--back::after { content: "\2192"; }

/* ------------------------------- Sticky CTA ------------------------------ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 244, 237, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule-strong);
  transform: translateY(110%);
  transition: transform 260ms ease;
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: none; }

@media (min-width: 52rem) { .sticky-cta { display: none; } }

body.has-sticky-cta { padding-bottom: 4.75rem; }
@media (min-width: 52rem) { body.has-sticky-cta { padding-bottom: 0; } }

/* ---------------------------- Reveal animations -------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-in 620ms cubic-bezier(0.22, 0.68, 0.32, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Páginas de ciudad, hub y normativa.
   Same dossier system as the landing: warm paper, hairline rules, stamped
   vermilion, highlighter amber. The one new gesture is .datacard — the local
   data card, an index card clipped to the top of every city page.
   ========================================================================= */

/* ------------------------------- Breadcrumb ------------------------------ */
.crumbs { margin-bottom: var(--sp-3); }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before {
  content: "\203A";
  color: var(--rule-strong);
  font-weight: 700;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumbs [aria-current="page"] { font-weight: 650; color: var(--ink); }

/* ---------------------------- Cabecera de ciudad ------------------------- */
.citytop {
  padding-block: var(--sp-4) var(--sp-5);
  background:
    radial-gradient(56rem 30rem at 88% -14%, var(--mark-tint) 0%, transparent 60%),
    radial-gradient(38rem 24rem at 4% 4%, rgba(168, 50, 30, 0.06) 0%, transparent 58%);
}
.citytop__grid { display: grid; gap: var(--sp-4); align-items: start; }
.citytop h1 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.citytop .lede { max-width: 38rem; }
.citytop__copy--wide .lede { max-width: 46rem; }
.citytop .hero__actions { margin-top: var(--sp-4); }
.citytop .trustbar { margin-top: var(--sp-5); }

@media (min-width: 62rem) {
  .citytop { padding-block: var(--sp-5) var(--sp-6); }
  .citytop__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr); gap: var(--sp-5); }
  .citytop .datacard { margin-top: 2.6rem; }
}

/* ------------------------- Ficha local de datos -------------------------- */
.datacard {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-top: 5px solid var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
/* Second sheet peeking out below: the same trick as the hero sheet. */
.datacard::before {
  content: "";
  position: absolute;
  inset: 0.5rem -0.5rem -0.5rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.datacard__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--rule-strong);
  margin-bottom: var(--sp-3);
}
.datacard__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.datacard__stamp {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
}

.datacard__figure { margin-bottom: var(--sp-3); }
.datacard__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.datacard__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.datacard__unit {
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.datacard__value--na {
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink-soft);
  font-weight: 600;
}
.datacard__cite {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.datacard__figure--empty { padding-bottom: 0.2rem; }

.datacard__rows { list-style: none; border-top: 1px solid var(--rule); }
.datacard__rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.datacard__rows li:last-child { border-bottom: 0; }
.datacard__k { color: var(--ink-faint); }
.datacard__v { font-weight: 650; text-align: right; }
.datacard__v small { font-weight: 400; color: var(--ink-faint); }
/* A row that carries a short explanation under the value. */
.datacard__rows li.is-stacked { display: grid; grid-template-columns: 1fr auto; }
.datacard__hint {
  grid-column: 1 / -1;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ------------------------- Drivers de demanda ---------------------------- */
.drivers { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 52rem) {
  .drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
}
.driver { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.driver__type {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-bottom: 0.45rem;
}
.driver__name { font-size: var(--step-1); margin-bottom: 0.3rem; }
.driver__note { font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.driver__cite { margin: 0; font-size: 0.76rem; color: var(--ink-faint); }

/* =========================================================================
   Media: el recurso real cuando existe, una caja de wireframe cuando no.
   La caja reserva siempre la misma proporción que tendrá la imagen final,
   así que soltar el archivo en assets/img/ no mueve nada de sitio.
   ========================================================================= */
.media {
  margin: 0;
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 9);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
}
.media img,
.media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reduced motion: el vídeo se oculta y queda el póster como fondo. */
.media--video { background-image: var(--media-poster, none); background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) {
  .media video { display: none; }
}

/* Botón de sonido sobre el vídeo (autoplay siempre va silenciado). */
.media__sound {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 18, 16, 0.72);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.media__sound svg { width: 1.1em; height: 1.1em; }
.media__sound:hover,
.media__sound:focus-visible { background: rgba(20, 18, 16, 0.9); outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .media__sound { display: none; }
}

/* ----------------------------- Hueco reservado --------------------------- */
.media--slot {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--rule-strong);
  border-radius: var(--radius);
}
.media__cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  opacity: 0.18;
}
.media__caption {
  position: relative;
  z-index: 1;
  max-width: 90%;
  padding: 0.3rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.4;
}
.media__label { display: block; font-weight: 400; letter-spacing: 0; }

/* --------------------------- Bandas de cabecera -------------------------- */
.media-band { padding-block: 0 var(--sp-5); }
.hero .media-band { padding-block: var(--sp-5) 0; }
.media-band .media { box-shadow: var(--shadow-md); }

/* La imagen de un paso de "Cómo funciona" va sobre el texto en móvil y al
   lado en escritorio, sin tocar la rejilla de .step. */
.step__media { margin-bottom: var(--sp-3); }
@media (min-width: 48rem) {
  .step--media { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 0.55fr); }
  .step--media .step__n { grid-row: span 3; }
  .step__media { grid-column: 3; grid-row: 1 / span 3; margin-bottom: 0; align-self: start; }
}

/* ------------------- Los dos servicios, uno al lado del otro ------------- */
.ways { display: grid; gap: var(--sp-4); }
@media (min-width: 52rem) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-top: 4px solid var(--accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.way__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.way__title { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.way p:not(.way__kicker) { font-size: 0.9375rem; color: var(--ink-soft); }
.way .link-arrow { margin-top: var(--sp-3); }

/* --------------- Qué debe llevar una gestora: checklist ------------------ */
.checklist { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 52rem) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
}
.checklist > li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) 1.9rem;
  border-bottom: 1px solid var(--rule);
}
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.55rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--accent);
  border-radius: 2px;
}
.checklist h3 { font-size: var(--step-1); margin-bottom: 0.3rem; }
.checklist p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* -------------------- Enlace al otro servicio de la ciudad --------------- */
.sibling {
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--paper-raised);
  border: 1px dashed var(--rule-strong);
  border-left: 4px solid var(--mark);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.sibling__title { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.sibling p { font-size: 0.9375rem; color: var(--ink-soft); }
.sibling .link-arrow { margin-top: var(--sp-3); }

/* --------------------------------- Barrios ------------------------------- */
.barrios { list-style: none; display: grid; gap: var(--sp-3); }
@media (min-width: 44rem) { .barrios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .barrios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.barrio {
  padding: var(--sp-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--mark);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.barrio__name { font-size: var(--step-1); margin-bottom: 0.35rem; }
.barrio__why { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------ Bloques legales -------------------------- */
.lawbox {
  padding: var(--sp-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.lawbox p { font-size: 0.9375rem; color: var(--ink-soft); }
.lawbox__note { font-size: 0.82rem; color: var(--ink-faint); }
.lawbox .link-arrow { margin-top: var(--sp-2); }
.lawbox--warn {
  margin-top: var(--sp-4);
  background: var(--mark-tint);
  border-color: var(--mark);
}
.lawbox--warn p { color: var(--ink); }

.lawblock {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-3);
}
.lawblock:last-child { border-bottom: 0; }
.lawblock h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.lawblock p { font-size: 0.9375rem; color: var(--ink-soft); }
.lawblock__impact { color: var(--ink); }
.lawblock__cite { margin: var(--sp-2) 0 0; font-size: 0.78rem; color: var(--ink-faint); }
.lawblock__verdict { margin-bottom: var(--sp-2); }
.lawblock .legal__data { margin-bottom: var(--sp-2); }

.sourcelist { list-style: none; border-top: 1px solid var(--rule); }
.sourcelist li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8rem;
  word-break: break-word;
}

/* -------------------------- Rejilla de ciudades -------------------------- */
.comgroup { margin-bottom: var(--sp-5); }
.comgroup__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--step-2);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink);
}
.comgroup__law {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.citygrid { list-style: none; display: grid; gap: var(--sp-2); }
@media (min-width: 40rem) { .citygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .citygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.citycard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem var(--sp-2);
  min-height: 52px;
  padding: 0.7rem var(--sp-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.citycard:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-sm); }
.citycard__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-decoration: none;
  color: var(--ink);
}
a.citycard__name:hover { color: var(--accent); }

/* A card that offers both pages of a city (normativa). */
.citycard--two { align-items: start; flex-direction: column; gap: 0.35rem; }
.citycard__links { display: flex; flex-wrap: wrap; gap: 0.15rem 0.85rem; }
.citycard__links a { font-size: 0.82rem; font-weight: 600; }

.badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}
.badge--yes { color: var(--ok); background: var(--ok-tint); border-color: var(--ok); }

.citylinks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.citylinks li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}
.citylinks a { font-weight: 650; text-decoration: none; }
.citylinks a:hover { text-decoration: underline; }

/* ---------------------------------- Print -------------------------------- */
@media print {
  .site-header, .sticky-cta, .section--cta, form { display: none; }
  body { background: #fff; }
}