/* Fuentes servidas desde el propio dominio (sin llamadas a Google Fonts). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("/static/fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

/* Kodelectric — generated from tokens.json */
:root, [data-theme="claro"] {
  --fase: #141412;
  --cal: #F4F1EA;
  --voltio: #CFF23B;
  --surface: #F4F1EA;
  --surface-raised: #FBFAF6;
  --surface-sunken: #EAE6DC;
  --surface-inverse: #141412;
  --ink: #141412;
  --ink-muted: #5C5D57;
  --ink-inverse: #F4F1EA;
  --line: #D6D2C7;
  --line-strong: #8A8B84;
  --accent: #CFF23B;
  --on-accent: #141412;
  --accent-ink: #4D6300;
  --focus: #141412;
  --success: #1F7A43;
  --warning: #9A5B00;
  --danger: #B3261E;
  --info: #2A63C4;
  --cond-fase-l1: #A0522D;
  --cond-fase-l2: var(--fase);
  --cond-fase-l3: #76797A;
  --cond-neutro: #2F6FD6;
  --cond-tierra-verde: #2E9A55;
  --cond-tierra-amarillo: #F2C21B;
  --shadow-overlay: 0 12px 32px rgba(20, 20, 18, 0.16);
}
[data-theme="oscuro"] {
  --surface: #141412;
  --surface-raised: #1E1F1C;
  --surface-sunken: #0D0E0C;
  --surface-inverse: #F4F1EA;
  --ink: #F4F1EA;
  --ink-muted: #A6A79F;
  --ink-inverse: #141412;
  --line: #33352F;
  --line-strong: #74756E;
  --accent: #CFF23B;
  --on-accent: #141412;
  --accent-ink: #CFF23B;
  --focus: #CFF23B;
  --success: #5FD38E;
  --warning: #F2B23A;
  --danger: #FF8A7A;
  --info: #8DB5FF;
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-full: 9999px;
  --stroke-hair: 1px;
  --stroke-trace: 2px;
  --stroke-control: 1.5px;
  --node-s: 8px;
  --node-m: 12px;
  --node-l: 20px;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.display { font-family: var(--font-sans); font-size: 72px; line-height: 72px; font-weight: 800; letter-spacing: -0.025em; }
.h1 { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.015em; }
.h3 { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.005em; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }


/* Kodelectric — componentes CSS (prefijo kd-). Cargar después de tokens.css. */

body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.label { text-transform: uppercase; }

/* ---------- Node: aro del color de la tinta + núcleo de estado ---------- */
.kd-node { display: inline-block; flex: none; box-sizing: border-box; width: var(--node-m); height: var(--node-m); border-radius: var(--radius-full); background: var(--accent); box-shadow: inset 0 0 0 2px currentColor; vertical-align: middle; }
.kd-node--s { width: var(--node-s); height: var(--node-s); box-shadow: inset 0 0 0 1.5px currentColor; }
.kd-node--l { width: var(--node-l); height: var(--node-l); box-shadow: inset 0 0 0 4px currentColor; }
.kd-node--off { background: transparent; }
.kd-node--success { background: var(--success); }
.kd-node--warning { background: var(--warning); }
.kd-node--danger { background: var(--danger); }
.kd-node--info { background: var(--info); }

/* ---------- Button ---------- */
.kd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); box-sizing: border-box; min-height: 48px; padding: 0 var(--space-5); border: var(--stroke-control) solid transparent; border-radius: var(--radius-s); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, filter .15s ease; }
.kd-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kd-btn[disabled], .kd-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.kd-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kd-btn--primary:hover { background: var(--ink-muted); border-color: var(--ink-muted); }
.kd-btn--accent { background: var(--accent); border-color: var(--on-accent); color: var(--on-accent); }
.kd-btn--accent:hover { filter: brightness(1.05) saturate(1.1); }
.kd-btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.kd-btn--outline:hover { background: var(--surface-sunken); }
.kd-btn--ghost { background: transparent; color: var(--ink); padding: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.kd-btn--ghost:hover { text-decoration-thickness: 2px; }
.kd-btn--block { display: flex; width: 100%; }

/* ---------- Status ---------- */
.kd-status { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 28px; padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-raised); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Eyebrow ---------- */
.kd-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.kd-eyebrow__num { color: var(--ink-muted); }

/* ---------- Field ---------- */
.kd-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.kd-field__label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.kd-field__input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 var(--space-4); border: var(--stroke-control) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
textarea.kd-field__input { min-height: 112px; padding: var(--space-3) var(--space-4); resize: vertical; }
.kd-field__input::placeholder { color: var(--ink-muted); }
.kd-field__input:hover { border-color: var(--ink); }
.kd-field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.kd-field__hint { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.kd-field--error .kd-field__input { border-color: var(--danger); }
.kd-field--error .kd-field__hint { color: var(--danger); }

/* ---------- Card ---------- */
.kd-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-raised); color: var(--ink); }
.kd-card__title { margin: 0; font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.kd-card__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.kd-card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 16px; line-height: 24px; }
.kd-card__list li { display: flex; align-items: center; gap: var(--space-3); }
.kd-card__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ---------- Spec: anotación técnica ---------- */
.kd-spec { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.kd-spec__row { display: flex; align-items: baseline; gap: var(--space-3); }
.kd-spec dt { flex: 1; display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kd-spec dt::after { content: ""; flex: 1; min-width: var(--space-5); border-bottom: var(--stroke-hair) dotted var(--line-strong); }
.kd-spec dd { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Trace: proceso con nodos ---------- */
.kd-trace { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.kd-trace__step { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: calc(var(--node-l) + var(--space-3)) var(--space-5) 0 0; }
.kd-trace__step::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--node-l) / 2 - 1px); height: var(--stroke-trace); background: var(--ink); }
.kd-trace__step:last-child::before { display: none; }
.kd-trace__step > .kd-node { position: absolute; left: 0; top: 0; z-index: 1; }
.kd-trace__step > .kd-node--off { background: var(--kd-trace-ground, var(--surface)); }
.kd-trace__num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; color: var(--ink-muted); }
.kd-trace__title { font-size: 16px; line-height: 24px; font-weight: 700; }
.kd-trace__text { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.kd-trace--vertical { grid-auto-flow: row; }
.kd-trace--vertical .kd-trace__step { padding: 0 0 var(--space-5) calc(var(--node-l) + var(--space-4)); }
.kd-trace--vertical .kd-trace__step::before { left: calc(var(--node-l) / 2 - 1px); right: auto; top: 0; bottom: 0; width: var(--stroke-trace); height: auto; }
@media (max-width: 640px) {
  .kd-trace { grid-auto-flow: row; }
  .kd-trace .kd-trace__step { padding: 0 0 var(--space-5) calc(var(--node-l) + var(--space-4)); }
  .kd-trace .kd-trace__step::before { left: calc(var(--node-l) / 2 - 1px); right: auto; top: 0; bottom: 0; width: var(--stroke-trace); height: auto; }
}

/* ---------- Table: presupuestos y partidas ---------- */
.kd-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); }
.kd-table th { padding: var(--space-2) var(--space-3); border-bottom: var(--stroke-control) solid var(--ink); text-align: left; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kd-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.kd-table .kd-num { text-align: right; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-table .kd-ref { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.kd-table tfoot td { border-bottom: 0; font-weight: 600; }
.kd-table tr.kd-total td { background: var(--accent); color: var(--on-accent); font-size: 16px; line-height: 24px; font-weight: 700; }

/* ---------- Retícula de puntos ---------- */
.kd-dotgrid { background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px); background-size: var(--space-5) var(--space-5); }

/* Kodelectric — maquetación de la web. Va después de tokens.css y de los componentes kd-. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 16px; line-height: 24px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-theme] { background: var(--surface); color: var(--ink); }
.num, .data { font-variant-numeric: tabular-nums; }
.ico { flex: none; }
.cont { width: 100%; max-width: 1136px; margin: 0 auto; padding: 0 var(--space-5); }
.cont--estrecho { max-width: 800px; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--surface-inverse); color: var(--ink-inverse); }
.saltar:focus { left: 0; }

/* Aviso de borrador (solo sin --publicar) */
.borrador { padding: var(--space-2) var(--space-5); background: var(--warning); color: #fff; font-size: 14px; line-height: 20px; }
.borrador .label { margin-right: var(--space-2); }

/* Franja superior y cabecera */
.topbar { padding: var(--space-2) 0; }
.topbar .cont { display: flex; align-items: center; gap: var(--space-2); }
.topbar .label { font-size: 11px; }
.cabecera { border-bottom: 1px solid var(--line); background: var(--surface); }
.cabecera .cont { display: flex; align-items: center; gap: var(--space-5); min-height: 72px; }
.logo { display: block; flex: none; }
.logo img { width: 183px; height: auto; }
.idiomas { display: flex; gap: var(--space-1); margin-left: auto; }
.idiomas a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.idiomas a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.idiomas a:hover { color: var(--ink); }
.cabecera__cta { display: flex; align-items: center; gap: var(--space-5); }
.cabecera:not(:has(.idiomas)) .cabecera__cta { margin-left: auto; }
.tel { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.tel:hover .num { text-decoration: underline; }
.tel__txt { display: flex; flex-direction: column; line-height: 1.1; }
.tel__nota { margin-top: 3px; font-size: 10px; line-height: 12px; color: var(--ink-muted); }

/* Botones en fila */
.cta-fila { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cta-fila--bloque { margin-top: var(--space-7); }
.kd-btn .num { font-weight: 800; }
[data-theme="oscuro"] .kd-btn--outline:hover { background: var(--surface-raised); }

/* Primera pantalla */
.hero { padding: var(--space-8) 0 0; }
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); align-items: center; }
.hero .h1 { margin-top: var(--space-4); font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; text-wrap: balance; }
.hero__promesa { margin-top: var(--space-5); max-width: 24em; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.hero .lead { margin-top: var(--space-3); max-width: 34em; font-size: 18px; line-height: 27px; color: var(--ink-muted); }
.hero__nota { margin-top: var(--space-4); max-width: 34em; color: var(--ink-muted); }
.hero__nota a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.resenas-resumen { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.resenas-resumen .ico { fill: var(--accent); }
.sin { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-weight: 600; }
.sin li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__foto { position: relative; }
.hero__foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-m); border: 1px solid var(--line); }
.hero__reticula { position: absolute; inset: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-7) var(--space-7); border-radius: var(--radius-m); }
.hero__foto figcaption { position: relative; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--ink-muted); }
.prueba { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-8); border-top: var(--stroke-control) solid var(--ink); }
.prueba__dato { padding: var(--space-4) var(--space-4) var(--space-5) 0; }
.prueba__dato + .prueba__dato { padding-left: var(--space-4); border-left: 1px solid var(--line); }
.prueba dt { color: var(--ink-muted); }
.prueba dd { margin-top: var(--space-1); font-size: 16px; line-height: 24px; }

/* Secciones */
.seccion { padding: var(--space-9) 0; border-top: 1px solid var(--line); }
.seccion--hundida { background: var(--surface-sunken); }
.seccion .h2 { margin-top: var(--space-3); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; text-wrap: balance; }
.seccion__intro { margin-top: var(--space-4); max-width: 38em; color: var(--ink-muted); }

/* Tres hechos */
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.tres__item { padding-top: var(--space-4); border-top: var(--stroke-trace) solid var(--ink); }
.tres__num { color: var(--ink-muted); }
.tres__item .h4 { margin-top: var(--space-2); }
.tres__item .body { margin-top: var(--space-2); color: var(--ink-muted); }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-top: var(--space-7); }
.servicio { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-5); }
.servicio__num { grid-row: 1 / 3; padding-top: 5px; color: var(--ink-muted); }
.servicio .h4 { margin: 0; }
.tambien__titulo { margin-top: var(--space-7); color: var(--ink-muted); }
.tambien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); }
.tambien .small { margin-top: var(--space-1); color: var(--ink-muted); }

/* Proceso */
.kd-trace { margin-top: var(--space-7); --kd-trace-ground: var(--surface); }

/* Reseñas destacadas (solo si sitio.json las trae) */
.citas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.cita { padding: var(--space-5); border-left: var(--stroke-trace) solid var(--ink); background: var(--surface-raised); }
.cita figcaption { margin-top: var(--space-3); color: var(--ink-muted); }

/* Fotos de obra */
.obra { display: grid; grid-template-columns: 4fr 3fr 3fr 3fr; gap: var(--space-4); margin-top: var(--space-7); align-items: start; }
.obra__foto img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-m); border: 1px solid var(--line); }
.obra__foto figcaption { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-strong); color: var(--ink-muted); }

/* Quiénes somos */
.quien { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: var(--space-8); align-items: start; }
.personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.persona .body { margin-top: var(--space-2); color: var(--ink-muted); }
.quien__legal { margin-top: var(--space-6); padding: var(--space-4); border-left: var(--stroke-trace) solid var(--ink); background: var(--surface-raised); }
.quien .kd-card .label { color: var(--ink-muted); }

/* Zonas */
.local { margin-top: var(--space-6); max-width: 44em; }
.local .body { margin-top: var(--space-2); }
.zonas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.zonas li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-raised); font-weight: 600; }
.zonas a { display: inline-flex; align-items: center; min-height: 44px; }

/* Preguntas frecuentes */
.faq { margin-top: var(--space-6); border-top: var(--stroke-control) solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-3) 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
.faq__item[open] summary::after { content: "–"; }
.faq__item .body { padding: 0 var(--space-7) var(--space-5) 0; color: var(--ink-muted); }

/* Contacto */
.contacto { border-top: 0; }
.contacto__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.contacto__datos { margin-top: var(--space-7); max-width: 28em; }
.contacto__datos a { text-decoration: none; }
.contacto__datos a:hover { text-decoration: underline; }
.contacto__form { scroll-margin-top: var(--space-5); }
.formulario__cab .small { margin-top: var(--space-2); color: var(--ink-muted); }
.formulario { display: flex; flex-direction: column; gap: var(--space-4); }
.trampa { position: absolute; left: -9999px; }
.acepto { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-muted); }
.acepto input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.formulario__nota { color: var(--ink-muted); text-align: center; }

/* Pie */
.pie { padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--line); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.pie__rejilla .body { margin-top: var(--space-4); max-width: 22em; color: var(--ink-muted); }
.pie .label { color: var(--ink-muted); }
.pie__lista { display: flex; flex-direction: column; margin-top: var(--space-2); }
.pie__lista li { display: flex; align-items: center; min-height: 36px; }
.pie__lista a { text-decoration: none; }
.pie__lista a:hover { text-decoration: underline; }
.pie__nota { margin-top: var(--space-3); color: var(--ink-muted); }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-muted); }
.enlace { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.enlace:hover { text-decoration: underline; }

/* Barra fija en móvil */
.barra-movil { display: none; }

/* Aviso de cookies */
.cookies { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 60; width: min(420px, calc(100vw - 2 * var(--space-4))); padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.cookies[hidden] { display: none; }
.cookies .small { margin-top: var(--space-2); color: var(--ink-muted); }
.cookies__botones { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.cookies__botones .kd-btn { flex: 1; }

/* Páginas simples: gracias, legales, 404 */
.simple { padding: var(--space-8) 0 var(--space-9); min-height: 60vh; }
.simple .h1 { margin-top: var(--space-3); font-size: clamp(32px, 5vw, 48px); line-height: 1.08; }
.simple .lead { margin-top: var(--space-5); }
.simple .lead + .body { margin-top: var(--space-3); color: var(--ink-muted); }
.simple .cta-fila + p, .simple .gracias ~ p { margin-top: var(--space-6); }
.gracias { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: var(--space-7); align-items: start; margin-top: var(--space-6); }
.gracias__pasos { border-top: var(--stroke-control) solid var(--ink); }
.gracias__pasos li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.gracias__pasos .label { padding-top: 4px; color: var(--ink-muted); }
.gracias__foto-aviso { margin-top: var(--space-5); }
.gracias__prisa { margin-top: var(--space-3); color: var(--ink-muted); }
.gracias__quien img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-m); border: 1px solid var(--line); }
.gracias__quien figcaption { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--ink-muted); }
.legal h2 { margin-top: var(--space-7); }
.legal p, .legal ul { margin-top: var(--space-3); }
.legal ul { padding-left: var(--space-5); list-style: disc; }
.legal .small { color: var(--ink-muted); }
.legal code { font-family: var(--font-mono); font-size: 14px; }
.tabla { margin-top: var(--space-4); overflow-x: auto; }
.tabla .kd-table { min-width: 640px; }

/* ---------- Tableta ---------- */
@media (max-width: 960px) {
  .hero__rejilla, .quien, .contacto__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .hero__foto { max-width: 520px; }
  .obra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tambien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra__foto img { height: 300px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .seccion { padding: var(--space-8) 0; }
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  body { padding-bottom: 76px; }
  .cont { padding: 0 var(--space-4); }
  .topbar .label { font-size: 10px; letter-spacing: 0.04em; }
  .cabecera .cont { min-height: 60px; gap: var(--space-3); }
  .logo img { width: 150px; }
  .cabecera__cta { display: none; }
  .hero { padding-top: var(--space-6); }
  .hero__promesa { font-size: 20px; }
  .hero .lead { font-size: 16px; line-height: 24px; }
  .hero__nota a { white-space: normal; }
  .cta-fila--bloque { display: none; }
  .tambien, .citas, .gracias { grid-template-columns: minmax(0, 1fr); }
  .tambien { gap: var(--space-4); }
  .gracias__quien { max-width: 260px; }
  .hero .cta-fila .kd-btn { flex: 1 1 100%; }
  .hero__reticula { inset: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-7) var(--space-6); }
  .prueba { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-7); }
  .prueba__dato:nth-child(odd) { padding-left: 0; border-left: 0; }
  .prueba__dato:nth-child(n+3) { border-top: 1px solid var(--line); }
  .seccion { padding: var(--space-7) 0; }
  .tres, .personas, .servicios { grid-template-columns: minmax(0, 1fr); }
  .tres, .personas { gap: var(--space-5); }
  .obra__foto img { height: 220px; }
  .faq__item .body { padding-right: 0; }
  .pie__rejilla { grid-template-columns: 1fr; gap: var(--space-6); }
  .pie { padding-bottom: var(--space-5); }
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .barra-movil .kd-btn { padding: 0 var(--space-3); }
  .cookies { left: var(--space-3); bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100vw - 2 * var(--space-3)); }
}