/*
  Valedi: estilos del sitio.
  Todos los colores, tipografías, tamaños, espaciados, radios, bordes y
  duraciones salen de tokens.css (cargado antes que este archivo).
*/

/* ---------- Fuentes locales ---------- */

@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-400.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
}

/* ---------- Contexto de color ---------- */
/*
  Los componentes leen estas variables de contexto y no los colores
  directos. Así .on-dark cambia todo el bloque (texto, líneas, acento,
  enlaces, foco) sin competir en especificidad con las reglas internas.
*/

:root {
  --surface: var(--color-bg);
  --ink: var(--color-text);
  --ink-muted: var(--color-text-muted);
  --rule: var(--color-line);
  --rule-strong: var(--color-line-strong);
  --accent: var(--color-accent);
  --link: var(--color-accent);
  --link-hover: var(--color-accent-hover);
  --focus: var(--color-accent);
}

.on-dark,
.page-simple {
  --surface: var(--color-dark);
  --ink: var(--color-on-dark);
  --ink-muted: var(--color-on-dark-muted);
  --rule: var(--color-line-on-dark);
  --rule-strong: var(--color-line-on-dark);
  --accent: var(--color-accent-on-dark);
  --link: var(--color-accent-on-dark);
  --link-hover: var(--color-on-dark);
  --focus: var(--color-accent-on-dark);
  background: var(--surface);
  color: var(--ink);
}

/* Patrón de retícula sutil para separar secciones */
.section-alt {
  --surface: var(--color-bg-alt);
  background: url("/assets/img/valedi-patron-reticula.svg") 0 0 / var(--size-patron) repeat, var(--surface);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  background: var(--surface);
  color: var(--ink);
}

main {
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-lg);
}

p,
ul,
ol {
  margin: 0;
}

/* Enlaces: especificidad cero para que botones y navegación los sobrescriban */
:where(a) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-thin);
  text-underline-offset: var(--space-1);
}

:where(a):hover {
  color: var(--link-hover);
}

/* Foco visible en todo elemento interactivo, sobre claro y oscuro */
:focus-visible {
  outline: var(--border-mark) solid var(--focus);
  outline-offset: var(--space-1);
}

/* El sprite del logo no ocupa espacio */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo-rule {
  fill: var(--color-accent-on-dark);
}

.logo {
  --logo-height: var(--space-7);
  display: block;
  flex: none;
  height: var(--logo-height);
  width: calc(var(--logo-height) * 999 / 320);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
  color: inherit;
  text-decoration: none;
}

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

/* ---------- Enlace para saltar al contenido ---------- */

.skip-link {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

.skip-link:focus-visible {
  outline-color: var(--color-accent-on-dark);
}

/* ---------- Botones ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control);
  padding: var(--space-3) var(--space-5);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:disabled {
  cursor: progress;
}

.button-light {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-dark);
}

.button-light:hover {
  background: var(--color-accent-on-dark);
  border-color: var(--color-accent-on-dark);
  color: var(--color-dark);
}

.button-outline {
  background: transparent;
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.button-outline:hover {
  border-color: var(--color-accent-on-dark);
  color: var(--color-accent-on-dark);
}

.button-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.button-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* ---------- Encabezado y navegación ---------- */

.site-header {
  padding-block: var(--space-5);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-5);
}

.header-row .logo-link {
  margin-inline-end: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--border-thin);
  text-underline-offset: var(--space-1);
}

/* ---------- Secciones ---------- */

.section {
  scroll-margin-top: var(--space-4);
}

.section {
  padding-block: var(--space-section);
}

.section-head {
  margin-bottom: var(--space-8);
}

/* Marca de acento: solo sobre cada h2 */
h2::before {
  content: "";
  display: block;
  width: var(--size-mark-width);
  height: var(--border-mark);
  margin-bottom: var(--space-5);
  background: var(--accent);
}

.lead {
  max-width: var(--width-text);
  text-wrap: pretty;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

/* ---------- 1. Hero ---------- */
/*
  Una sola estructura en home, edificios, casas y oficinas: <picture> real a
  todo el ancho, velo oscuro encima y el texto arriba de ambos. `isolation`
  deja foto y velo sobre el fondo de la banda (el color de respaldo mientras
  carga la foto) y bajo el texto. El encuadre va en --hero-foco, por página y
  por tamaño, porque la CSP no admite estilos en línea.
*/

.hero {
  --ink-muted: var(--color-on-dark);
  --link: var(--color-on-dark);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--height-hero);
  overflow: hidden;
  scroll-margin-top: var(--space-4);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-hero);
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-foco, center);
}

.hero-home { --hero-foco: 50% 62%; }
.hero-edificios { --hero-foco: 50% 24%; }
.hero-casas { --hero-foco: 50% 70%; }
.hero-oficinas { --hero-foco: 50% 30%; }

.hero-body {
  padding-block: var(--space-6);
}

.hero-copy {
  max-width: var(--width-hero-copy);
}

.hero .breadcrumb {
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
}

.hero-text {
  text-wrap: pretty;
  margin-top: var(--space-4);
  color: var(--ink-muted);
}

.hero-line {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- 2. Franja de confianza, íconos y tarjetas ---------- */

.icono {
  display: block;
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  color: var(--accent);
}

.franja {
  border-bottom: var(--border-thin) solid var(--rule);
}

.franja-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-block: 0;
  padding-block: var(--space-5);
  list-style: none;
}

.franja-lista li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tarjetas-linea,
.tarjetas ul,
.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--width-card), 100%), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjetas {
  margin-top: var(--space-5);
}

.tarjetas-linea > li,
.tarjetas li {
  padding: var(--space-5);
  border: var(--border-thin) solid var(--rule);
  background: var(--color-bg);
}

.prose .tarjetas ul {
  margin: 0;
  padding: 0;
}

.prose .tarjetas li + li {
  margin-top: 0;
}

.tarjetas-linea .icono,
.tarjetas .icono,
.values .icono {
  margin-bottom: var(--space-3);
}

.tarjetas-linea p {
  margin-top: var(--space-2);
  color: var(--ink-muted);
}

.beneficios li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Enlace a la cotización dentro del texto */
.cta-linea {
  margin-top: var(--space-5);
}

/* ---------- 3. Cómo trabajamos ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-thin) solid var(--rule);
  counter-reset: paso;
}

.steps > li {
  padding-top: var(--space-5);
  counter-increment: paso;
}

.steps > li::before {
  content: counter(paso);
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--accent);
}

.steps p {
  margin-top: var(--space-2);
  color: var(--ink-muted);
}

/* ---------- 4. Valores ---------- */

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.values > li {
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--rule-strong);
}

.values p {
  margin-top: var(--space-2);
  color: var(--ink-muted);
}

/* ---------- 5. Quiénes somos ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

/* Mismo marco para las dos fotos: unifica fondos distintos sin tocar la imagen */
.photo {
  flex: none;
  width: var(--width-photo);
  height: var(--height-photo);
  padding: var(--space-1);
  border: var(--border-thin) solid var(--rule-strong);
  background: var(--color-bg-alt);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.person-info {
  flex: 1;
  min-width: 0;
}

.role {
  margin-top: var(--space-2);
  color: var(--accent);
}

.bio {
  margin-top: var(--space-3);
  color: var(--ink-muted);
}

.placeholder {
  padding: 0 var(--space-1);
  outline: var(--border-thin) dashed currentColor;
  outline-offset: 0;
}

/* ---------- 6. Contacto ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: var(--space-8);
  align-items: start;
}

.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.field {
  min-width: 0;
}

.f2,
.form-note,
.form-status,
.contact-form .button {
  grid-column: 1 / -1;
}

.contact-form .button {
  justify-self: start;
}

.contact-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  min-height: var(--size-control);
  margin: 0;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form [aria-invalid="true"] {
  border-color: var(--color-error);
}

.field-error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.field-error:empty {
  display: none;
}

[data-solo][hidden] {
  display: none;
}

/* Verificador anti-spam, a todo el ancho del formulario */
.turnstile-caja {
  grid-column: 1 / -1;
  min-height: var(--height-turnstile);
}

.form-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.form-status {
  font-weight: var(--weight-medium);
}

.form-status.is-success {
  color: var(--color-success);
}

.form-status.is-error {
  color: var(--color-error);
}

/* Trampa para bots: fuera de pantalla y recortada, sin display:none */
.hp {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -100vw;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- 7. Pie de página ---------- */

.site-footer {
  padding-block: var(--space-8);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
}

.footer-row p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Enlaces sueltos: objetivo táctil de al menos 24 px */
.footer-row a,
.page-simple p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-target);
}

.footer-comunas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.footer-comunas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.footer-comunas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-target);
}

/* ---------- Páginas simples (gracias, 404, error del servidor) ---------- */

/* El pie común va después del contenido y el conjunto llena la pantalla */
body:has(> .page-simple) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.page-simple {
  flex: 1;
  padding-block: var(--space-6) var(--space-section);
  padding-inline: max(var(--space-gutter), calc((100% - var(--width-page)) / 2 + var(--space-gutter)));
}

.page-simple .logo-link {
  margin-bottom: var(--space-8);
}

.page-simple h1 {
  font-size: var(--text-2xl);
}

.page-simple p,
.page-simple ul,
.page-simple ol {
  max-width: var(--width-text);
  margin-top: var(--space-4);
}

.page-simple h1 + p,
.page-simple h1 + ul,
.page-simple h1 + ol {
  margin-top: var(--space-5);
}

.page-simple ul,
.page-simple ol {
  padding-inline-start: var(--space-5);
}

.page-simple li + li {
  margin-top: var(--space-2);
}

/* Tabla de cookies de la política, sobre fondo oscuro */
.page-simple .tabla-scroll {
  max-width: var(--width-page);
}

.page-simple table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.page-simple th,
.page-simple td {
  padding: var(--space-2);
  border-bottom: var(--border-thin) solid var(--rule);
  text-align: left;
  vertical-align: top;
}

/* ---------- Aviso de cookies: barra inferior, no bloquea la página ---------- */

.aviso-cookies {
  position: sticky;
  inset-block-end: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  padding-inline: max(var(--space-gutter), calc((100% - var(--width-page)) / 2 + var(--space-gutter)));
  border-top: var(--border-thin) solid var(--rule);
  font-size: var(--text-sm);
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies p {
  flex: 1 1 var(--width-card);
}

.aviso-botones {
  display: flex;
  gap: var(--space-3);
}

.aviso-botones .button {
  flex: 1;
  min-width: var(--width-boton-aviso);
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button {
    transition:
      background-color var(--duration-fast),
      border-color var(--duration-fast),
      color var(--duration-fast);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 64em) {
  .site-nav ul {
    column-gap: var(--space-4);
  }
}

@media (max-width: 52em) {
  /* Navegación: logo y botón en una fila, enlaces en la segunda */
  .header-row .logo-link {
    order: 1;
  }

  .header-row > .button {
    order: 2;
  }

  .site-nav {
    order: 3;
    flex: 0 0 100%;
  }

  .site-nav ul {
    column-gap: var(--space-5);
  }

  /* Hero: foto _mobile con el texto arriba; el velo acompaña al bloque de texto
     y deja libre lo que queda debajo */
  .hero {
    align-items: flex-start;
    min-height: var(--height-hero-small);
  }

  .hero::before {
    content: none;
  }

  .hero-home { --hero-foco: 50% 100%; }
  .hero-edificios { --hero-foco: 100% 100%; }
  .hero-casas { --hero-foco: 60% 100%; }
  .hero-oficinas { --hero-foco: 100% 100%; }

  .hero-body {
    padding-block: var(--space-5) var(--space-8);
    background: var(--gradient-hero-small);
  }

  .hero-copy {
    max-width: var(--width-text);
  }

  .hero h1 {
    font-size: var(--text-hero-small);
  }

  .hero-text {
    font-size: var(--text-sm);
  }

  .franja-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pasos en vertical, con la línea a la izquierda */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    border-top: 0;
    border-left: var(--border-thin) solid var(--rule);
  }

  .steps > li {
    padding: 0 0 0 var(--space-5);
  }

  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-7);
  }
}

@media (max-width: 30em) {
  .logo {
    --logo-height: var(--space-6);
  }

  /* Los seis enlaces no caben en una fila: tres columnas parejas */
  .site-header {
    padding-block: var(--space-3);
  }

  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    column-gap: var(--space-2);
  }

  .header-row {
    column-gap: var(--space-3);
  }

  .header-row > .button {
    padding-inline: var(--space-4);
  }

  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .person {
    flex-direction: column;
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Páginas de contenido (guías, quiénes somos) ---------- */

.prose {
  max-width: var(--width-text);
  overflow-wrap: break-word;
}

.prose h1 {
  font-size: var(--text-2xl);
}

.prose h2 {
  margin-top: var(--space-8);
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
}

/* La tabla ancha se desplaza dentro de su bloque; el foco permite moverla con teclado */
.tabla-scroll {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.tabla-scroll table {
  min-width: var(--width-text);
  margin-top: 0;
}

.prose th,
.prose td {
  padding: var(--space-2);
  border-bottom: var(--border-thin) solid currentColor;
  text-align: left;
  vertical-align: top;
}

/* Índice de guías */
.guia-cards { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(var(--width-card), 100%), 1fr)); }
.guia-card { border: var(--border-thin) solid var(--color-line); background: var(--color-bg); padding: var(--space-5); }
.guia-card h2 { font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-heading); margin: 0 0 var(--space-2); }
.guia-card a { color: var(--color-accent); }
.guia-card a:hover { color: var(--color-accent-hover); }
.guia-card p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* Bloques .prose dentro de la home: mantener el ancho y la alineación del resto de secciones */
.container.prose { max-width: var(--width-page); }
.container.prose > * { max-width: var(--width-text); }
.container.prose > .ancho { max-width: none; }

/* Casilla de privacidad: el control en su columna y el texto de corrido al lado. Con flex o
   grid el texto y el enlace se parten en columnas; por eso va posicionada sobre el relleno. */
.contact-form .field-check label { position: relative; margin: 0; padding-inline-start: calc(var(--size-target) + var(--space-3)); font-weight: var(--weight-regular); }
.contact-form .field-check input[type="checkbox"] { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--size-target); height: var(--size-target); min-height: 0; padding: 0; }

/* ---------- Ruta (breadcrumb) ---------- */
.breadcrumb { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--ink-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: inline; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-inline: var(--space-2); color: var(--ink-muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--size-target); color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-muted); }
.prose .breadcrumb ol, .prose .breadcrumb li + li { margin: 0; }

/* ---------- Íconos de tarjetas de guías ---------- */
.guia-icono { display: block; width: var(--size-icon); height: var(--size-icon); margin-bottom: var(--space-3); color: var(--color-accent); }

/* ---------- Cierre de cada página ---------- */
.cierre { padding-block: var(--space-8); }
.cierre p { max-width: var(--width-text); margin-top: var(--space-4); }
.guia-card h2::before { display: none; }
.guia-card .icono { margin-bottom: var(--space-3); }

/* ---------- Acordeones y preguntas frecuentes ---------- */
.acordeon { margin-top: var(--space-4); border-top: var(--border-thin) solid var(--rule); }
.acordeon-item,
.faq { border-bottom: var(--border-thin) solid var(--rule); }
h2 + .faq,
p + .acordeon-item,
h2 + .acordeon-item { margin-top: var(--space-4); border-top: var(--border-thin) solid var(--rule); }
.fases { margin-top: var(--space-7); border-top: var(--border-thin) solid var(--rule); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-control);
  padding-block: var(--space-3);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: none;
  width: var(--size-flecha);
  height: var(--size-flecha);
  border-right: var(--border-thin) solid currentColor;
  border-bottom: var(--border-thin) solid currentColor;
  transform: rotate(45deg);
}
details[open] > summary::after { transform: rotate(-135deg); }
.prose details > p:first-of-type { margin-top: 0; }
details > :last-child { margin-bottom: var(--space-4); }

/* ---------- Dato legal ---------- */
.dato-legal {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-mark) solid var(--accent);
  background: var(--color-bg-alt);
}
.section-alt .dato-legal { background: var(--color-bg); }
.prose .dato-legal p { margin-top: 0; }

/* ---------- Tabla "Lo que incluye" ---------- */
.tabla-incluye .tabla-scroll table { min-width: 0; }
.tabla-incluye td:first-child { position: relative; width: 34%; padding-inline-start: var(--space-6); font-weight: var(--weight-medium); }
.icono-check { width: var(--size-icon-small); height: var(--size-icon-small); }
.tabla-incluye .icono-check { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-1); }

/* ---------- Lista de verificación ---------- */
.checklist ul { margin: 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding-inline-start: var(--space-6); }
.checklist .icono-check { position: absolute; inset-block-start: var(--space-1); inset-inline-start: 0; margin: 0; }

/* ---------- Problemas típicos ---------- */
.problemas dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); margin: var(--space-5) 0 0; border-top: var(--border-thin) solid var(--rule-strong); }
.problemas dt,
.problemas dd { margin: 0; padding-block: var(--space-4); border-bottom: var(--border-thin) solid var(--rule); }
.problemas dt { padding-inline-end: var(--space-5); font-family: var(--font-heading); }
.problemas dd { color: var(--ink-muted); }

/* ---------- Foto de sección ---------- */
.foto-seccion { display: block; margin-top: var(--space-6); }
.foto-seccion img { display: block; width: 100%; max-width: var(--width-foto); height: auto; }
.foto-chica img { max-width: var(--width-text); }

/* ---------- Proceso en 4 pasos ---------- */
.proceso { margin: var(--space-5) 0 0; }
.proceso-h { display: block; width: 100%; height: auto; }
.proceso-v { display: none; }
.proceso-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-3) 0 0; padding: 0; color: var(--ink-muted); font-size: var(--text-sm); list-style: none; text-align: center; }
.proceso-pasos strong { display: block; color: var(--ink); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-regular); }
.prose .proceso-pasos li + li { margin-top: 0; }

/* ---------- Reporte mensual ---------- */
.reporte { display: grid; grid-template-columns: minmax(0, var(--width-reporte)) minmax(0, 1fr); gap: var(--space-7); align-items: center; margin: 0; }
.reporte svg { display: block; width: 100%; height: auto; }
.reporte ul { margin-top: var(--space-4); padding-inline-start: var(--space-5); }
.reporte li + li { margin-top: var(--space-2); }

/* ---------- Comunas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.prose .chips { padding: 0; }
.prose .chips li + li { margin-top: 0; }
.chips a { display: inline-flex; align-items: center; min-height: var(--size-control); padding-inline: var(--space-4); border: var(--border-thin) solid var(--rule-strong); border-radius: var(--radius); text-decoration: none; }

/* ---------- Infografía de la Ley 21.442 ---------- */
.ley-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--width-card), 100%), 1fr)); gap: var(--space-4); margin-top: var(--space-5); padding: 0; list-style: none; }
.prose .ley-grid { padding: 0; }
.ley-item { padding: var(--space-5); border: var(--border-thin) solid var(--rule); }
.prose .ley-item + .ley-item { margin-top: 0; }
.prose .ley-item h3 { margin-top: var(--space-3); font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.prose .ley-item p { margin-top: var(--space-2); }
.prose .ley-fuente { color: var(--ink-muted); font-size: var(--text-xs); }
.prose .ley-nota { color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- Diagrama de gastos comunes ---------- */
.flujo { margin: var(--space-4) 0 0; }
.flujo figcaption { font-weight: var(--weight-medium); }
.flujo-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.prose .flujo-pasos { padding: 0; }
.flujo-pasos li { position: relative; padding: var(--space-4); border: var(--border-thin) solid var(--rule); color: var(--ink-muted); font-size: var(--text-sm); }
.prose .flujo-pasos li + li { margin-top: 0; }
.flujo-pasos strong { display: block; margin-top: var(--space-2); color: var(--ink); }
.flujo-pasos li:not(:last-child)::after { content: "→"; content: "→" / ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--space-5) * -1); transform: translateY(-50%); color: var(--accent); }

/* ---------- Pasos para cambiar de administrador ---------- */
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); padding: 0; list-style: none; counter-reset: paso; }
.prose .stepper { padding: 0; }
.stepper li { position: relative; padding-top: var(--space-7); counter-increment: paso; font-size: var(--text-sm); }
.prose .stepper li + li { margin-top: 0; }
.stepper li::before { content: counter(paso); position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--size-paso); height: var(--size-paso); border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--weight-semibold); }
.stepper li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: calc(var(--size-paso) / 2); inset-inline: 0 calc(var(--space-3) * -1); border-top: var(--border-thin) solid var(--rule-strong); }
h2[id^="paso-"] { scroll-margin-top: var(--space-4); }

/* ---------- Trayectoria de los socios ---------- */
.trayectorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.linea-tiempo { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.prose .linea-tiempo { padding: 0; }
.linea-tiempo li { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-left: var(--border-thin) solid var(--rule-strong); }
.prose .linea-tiempo li + li { margin-top: 0; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; inset-block-start: var(--space-2); inset-inline-start: calc(var(--size-punto) / -2); width: var(--size-punto); height: var(--size-punto); border-radius: 50%; background: var(--accent); }
.linea-tiempo strong { display: block; font-size: var(--text-xs); text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Componentes en pantallas medianas y chicas ---------- */
@media (max-width: 52em) {
  .flujo-pasos { grid-template-columns: minmax(0, 1fr); }
  .flujo-pasos li:not(:last-child)::after { content: "↓"; content: "↓" / ""; inset-block-start: auto; inset-block-end: calc(var(--space-6) * -1 + var(--space-1)); inset-inline: 0; transform: none; text-align: center; }
  .stepper { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .stepper li { display: flex; align-items: center; min-height: var(--size-paso); padding: 0 0 0 calc(var(--size-paso) + var(--space-3)); }
  .stepper li:not(:last-child)::after { inset-block: var(--size-paso) calc(var(--space-4) * -1); inset-inline: calc(var(--size-paso) / 2) auto; border-top: 0; border-left: var(--border-thin) solid var(--rule-strong); }
  .reporte,
  .trayectorias { grid-template-columns: minmax(0, 1fr); }
  .problemas dl { grid-template-columns: minmax(0, 1fr); }
  .problemas dt { padding-block-end: 0; border-bottom: 0; }
}

@media (max-width: 45em) {
  .proceso { display: grid; grid-template-columns: calc(var(--proceso-fila) * 0.8) minmax(0, 1fr); gap: var(--space-4); }
  .proceso-h { display: none; }
  .proceso-v { display: block; width: 100%; height: auto; }
  .proceso-pasos { grid-template-columns: minmax(0, 1fr); grid-auto-rows: var(--proceso-fila); gap: 0; align-items: center; margin: 0; text-align: left; }
}

/* Pantallas muy angostas: logo y botón siguen cabiendo en una fila */
@media (max-width: 22.5em) {
  .logo {
    --logo-height: var(--space-5);
  }

  .header-row > .button {
    padding-inline: var(--space-3);
  }
}