/* ══════════════════════════════════════════════════════════════════════════
   Abraham Piano Studio — hoja de estilos única.
   Paleta y tipografía tomadas del diseño aprobado por el cliente.
   Sin frameworks, sin build de CSS: se edita este archivo y listo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías, alojadas en el propio sitio ───────────────────────────────
   Barlow y Barlow Condensed (subset latin: cubre inglés y español) servidas
   desde assets/fonts/ en vez de Google Fonts. Así el texto no depende de un
   tercero, no hay petición extra a fonts.gstatic.com y el sitio sigue
   viéndose igual aunque Google Fonts esté bloqueado.
   ──────────────────────────────────────────────────────────────────────── */
/* `font-display: optional` y no `swap`, y esto NO es un detalle de estilo.
   Medido el 2026-09-21: con la tipografia de reserva el menu ocupa 890 px y la
   cabecera envuelve a DOS filas (120 px de alto); cuando entra Barlow —un 29 %
   mas estrecha— cabe en UNA (69 px), la cabecera encoge 51 px y arrastra toda
   la pagina hacia arriba. Un solo desplazamiento de CLS 0,5924, con el umbral
   en 0,1.
   `optional` le da al navegador una ventana corta: si la fuente llega, se usa
   desde el primer pintado y no hay intercambio; si no llega, se queda la de
   reserva durante esa visita y tampoco lo hay. En los dos casos el
   desplazamiento desaparece. Las fuentes estan auto-alojadas y precargadas, asi
   que llegan a tiempo salvo en una primera visita muy lenta. El precio de
   `swap` era medio segundo de salto en cada primera carga. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: optional;
  src: url('fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: optional;
  src: url('fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: optional;
  src: url('fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: optional;
  src: url('fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: optional;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: optional;
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
}

:root {
  /* Azules — estructura */
  --ink: #16232f;           /* texto principal */
  /* El tono oscuro cuando es FONDO (pie, marco de video, aviso). Va aparte de
     `--ink` porque en modo oscuro `--ink` se vuelve CLARO —es texto— y estos
     fondos tienen que seguir siendo oscuros. */
  --surface-dark: #16232f;
  --footer-text: #9fb6c9;
  --nf-code: #6b88a4;       /* el «404» gigante · 3,37:1, mínimo de texto grande */
  --red-waiting: #b31e1e;   /* el CTA que aún no se puede pulsar, sobre --red-pale */
  --ink-soft: #3c4c59;      /* texto de párrafo */
  --ink-mute: #5c6b78;      /* texto secundario */
  /* Los tres tonos de abajo se oscurecieron el 2026-09-21 para alcanzar el
     mínimo AA de 4,5:1. Medido antes: el apagado daba entre 3,03:1 y 3,49:1
     según el fondo, y se usa justo donde más importa —etiquetas de 9 a 13 px:
     eyebrows, nombres de campo, la firma del artículo, "min de lectura"—.
     Los valores nuevos son el mínimo cambio que cumple sobre los CINCO fondos
     claros del sitio (blanco, --bg, --bg-blue, --tint, --chip), conservando el
     tono: no es un repinte, es bajar la luminosidad lo justo. */
  --ink-faint: #606e7b;     /* etiquetas pequeñas · 4,54:1 en el peor fondo */
  --navy: #2f5578;          /* azul de marca, como FONDO (con texto blanco encima) */
  /* El mismo azul cuando es TEXTO o enlace. En claro es idéntico; en oscuro
     tiene que aclararse, porque ahí vive sobre una superficie oscura. Sin esta
     separación un solo token tendría que ser legible sobre blanco Y sobre
     negro, que es imposible. */
  --navy-text: #2f5578;
  --navy-deep: #26425c;     /* franjas oscuras, como FONDO */
  /* …y el mismo tono cuando es TEXTO (etiqueta de modalidad, pin del mapa).
     En claro, idéntico; en oscuro daba 1,13:1, o sea invisible. */
  --navy-deep-text: #26425c;
  --navy-darker: #1d3345;

  /* Fondos */
  --bg: #f5f8fa;
  --bg-blue: #e8f0f7;
  --bg-cream: #fdf3e7;
  --white: #fff;

  /* Bordes y superficies frías */
  --line: #e3eaf0;
  --line-strong: #d7e2eb;
  --line-navy: #c3d5e4;
  --chip: #eef3f7;
  --chip-hover: #dce6ee;
  --tint: #f1f6fa;

  /* Acentos */
  --red: #d92b2b;           /* CTA principal, como FONDO (texto blanco encima) */
  /* El mismo rojo como TEXTO. En claro es idéntico; en oscuro tiene que
     aclararse. Medido: el rojo del botón sobre la superficie oscura daba
     3,49:1 en los números de paso, por debajo del mínimo AA. */
  --red-text: #d92b2b;
  --red-dark: #b31e1e;
  --red-pale: #f7d9d9;      /* el mismo CTA, todavía no disponible */
  --orange: #c4611a;        /* acento cálido, SOLO sobre fondo oscuro o como relleno */
  --orange-ink: #ab5517;    /* el mismo acento como TEXTO sobre fondo claro · 4,51:1 */
  --orange-on-dark: #ea985d; /* y como texto sobre el pie oscuro · 4,54:1 */
  --orange-deep: #a8500f;
  --orange-soft: #fdf1e3;
  --orange-line: #f0dfc9;
  --star: #e68a2e;
  --green: #1c7b51;         /* "libre" en el horario · 4,56:1 en el peor fondo */
  --whatsapp: #25d366;

  --wrap: 1180px;
  --pad: clamp(16px, 4vw, 44px);
  --gap-section: clamp(44px, 6vw, 80px);

  --font-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 3px rgba(22, 35, 47, 0.05);
  --shadow-card: 0 2px 8px rgba(22, 35, 47, 0.05);
  --shadow-hover: 0 10px 26px rgba(22, 35, 47, 0.1);
  --shadow-lift: 0 6px 16px rgba(217, 43, 43, 0.26);

  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 20px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap-section); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 12px var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
}
.logo { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.logo-name {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 21px;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05;
}
.logo-sub {
  display: block; font-weight: 600; font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 2px;
}
.site-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 14px; font-weight: 600;
}
.site-nav a { color: var(--ink-soft); white-space: nowrap; }
.site-nav a:hover { color: var(--orange-ink); }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* En móvil la cabecera fija se compacta a dos filas: arriba marca + idioma +
   CTA, abajo el menú en una sola línea que se desliza en horizontal. Así la
   barra no se come media pantalla. */
@media (max-width: 900px) {
  html { scroll-padding-top: 128px; }
  .header-inner { padding-block: 10px; gap: 10px 16px; }
  .logo { flex: 1 1 auto; }
  .header-actions { order: 2; }
  .site-nav {
    order: 3; flex-basis: 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }

  /* Los dos botones nuevos hacían que la fila de acciones midiera 479 px en
     una pantalla de 390. Dos ajustes, en este orden de importancia:

     1. El CTA de la cabecera SOBRA en móvil: la barra fija de abajo lleva el
        mismo botón, a la vista todo el rato y más a mano que la cabecera. Solo
        se esconde cuando esa barra existe de verdad. Ahí estaban 227 px.
     2. El buscador se queda en icono. El texto no cabe, y la tecla que
        anunciaba ya estaba oculta porque en un teléfono no hay Ctrl+K. */
  .has-sticky-bar .header-actions .btn-sm { display: none; }
  .header-actions { gap: 8px; }
  .palette-open { width: 44px; padding: 0; justify-content: center; }
  .palette-open span { display: none; }
}
@media (max-width: 420px) {
  .logo-mark { width: 32px; height: 32px; font-size: 19px; border-radius: 10px; }
  .logo-name { font-size: 18px; }
  .header-actions .btn-sm { padding: 14px 12px; font-size: 13px; }
}

.lang-switch {
  display: inline-flex; background: var(--chip); border-radius: 999px; padding: 3px;
}
.lang-switch a, .lang-switch span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 13px; border-radius: 999px; color: var(--ink-soft);
}
.lang-switch [aria-current='true'] { background: var(--navy); color: #fff; }
.lang-switch a:hover { background: var(--chip-hover); }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-align: center; white-space: nowrap;
  font-weight: 700; border: 0; cursor: pointer;
  border-radius: var(--r-md); transition: background 0.15s ease, color 0.15s ease;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
/* El botón de reservar nace en rojo pálido: se ve que la acción existe y que
   falta un paso, en vez de aparecer de la nada al elegir. Al elegir la hora pasa
   a rojo fuerte, y la transición de .btn hace que el cambio se note. El texto va
   en rojo oscuro para que se lea sobre el pálido. */
.btn-red.is-waiting {
  background: var(--red-pale); color: var(--red-waiting); cursor: not-allowed;
}
.btn-red.is-waiting:hover { background: var(--red-pale); color: var(--red-waiting); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline {
  background: var(--white); color: var(--navy-text);
  border: 1.5px solid var(--line-navy);
}
.btn-outline:hover { background: var(--tint); border-color: var(--navy); }
/* El atributo `hidden` del HTML vale display:none, pero lo pone el navegador con
   menos peso que cualquier clase: `.btn { display: inline-block }` lo anulaba y
   un botón con `hidden` seguía viéndose. Le pasó al "Cambiar" del calendario. */
.btn[hidden] { display: none; }
.btn-sm { font-size: 14px; padding: 11px 20px; border-radius: var(--r-sm); }
.btn-md { font-size: 15px; padding: 12px 22px; }
.btn-lg { font-size: 16px; padding: 15px 26px; }
.btn-hero { box-shadow: var(--shadow-lift); }
.btn-block { display: block; width: 100%; }
/* Un boton NO puede sobresalir de su columna. A 320 px el CTA del hero medía
   342 px dentro de una columna de 330 y arrastraba la pagina entera 38 px en
   horizontal: el borde derecho del boton principal quedaba fuera de pantalla.

   Encontrado el 2026-09-22 midiendo a 320, 360, 375, 390 y 414. La
   comprobacion anterior solo llegaba a 390, donde no pasa — y 390 es un
   iPhone 14, no "el movil": un iPhone SE de primera generacion y muchos
   Android son 320. */
.btn { max-width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { background: var(--bg-blue); }
.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) var(--pad) clamp(44px, 6vw, 72px);
  /* `min(330px, 100%)` y no `330px` a secas. Un `minmax(330px, 1fr)` NO puede
     bajar de 330 ni cuando su contenedor mide 288, que es lo que hay a 320 px
     de pantalla: la columna sobresalia y arrastraba la pagina entera en
     horizontal. Con `min()` el minimo es el MENOR de los dos y la columna
     encoge cuando hace falta. Por encima del umbral no cambia nada.
     Las veinte rejillas del archivo llevan la misma forma, a proposito. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: start;
}
.kicker-pill {
  display: inline-block; background: var(--orange-soft); color: var(--orange-deep);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 64px); line-height: 1.03;
  letter-spacing: -0.01em; margin: 20px 0 0;
}
.hero-tagline {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(22px, 3vw, 30px); color: var(--orange-ink); margin: 14px 0 0;
}
.hero-body { margin: 18px 0 0; max-width: 48ch; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.profile-card {
  background: var(--white); border-radius: var(--r-xl);
  padding: clamp(18px, 2.5vw, 26px); box-shadow: 0 12px 30px rgba(22, 35, 47, 0.08);
}
.profile-card h2 { font-size: 28px; margin: 18px 0 0; }
.profile-role { font-size: 15px; color: var(--ink-mute); margin: 2px 0 0; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.badge {
  background: var(--chip); color: var(--navy-text); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
}
.trial-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
}
.trial-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.trial-price {
  font-family: var(--font-head); font-weight: 700; font-size: 40px;
  color: var(--red-text); line-height: 1;
}
.trial-price span {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--ink-mute);
}
.reply-note { font-size: 14px; color: var(--ink-mute); margin: 12px 0 0; flex-basis: 100%; }

/* — marco de foto pendiente — */
.photo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  min-height: 240px; border-radius: var(--r-lg);
  background: #dfe7ee; border: 1.5px dashed var(--line-navy);
  color: var(--ink-mute); font-size: 14px;
}
.photo-slot svg { opacity: 0.5; }
.photo-slot.on-dark { background: #22384c; border-color: #3d5a74; color: #9fb6c9; }
.photo-slot.tall { min-height: 320px; }

/* Cuando la foto real está puesta, ocupa el mismo hueco que ocupaba el marco. */
.photo-real { width: 100%; border-radius: var(--r-lg); object-fit: cover; }
.photo-real.tall { aspect-ratio: 4 / 5; }
.photo-real.on-dark { border-radius: var(--r-md); aspect-ratio: 4 / 5; }

/* ── Franja de argumentos ─────────────────────────────────────────────── */
.glance { background: var(--navy-deep); color: #fff; }
.glance ul {
  max-width: var(--wrap); margin: 0 auto;
  padding: 22px var(--pad); list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px 28px;
}
.glance li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
}
.glance li::before {
  content: '✓'; color: var(--star); font-weight: 700; flex: 0 0 auto;
}

/* ── Títulos de sección ───────────────────────────────────────────────── */
.section-title { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; }
.section-intro { color: var(--ink-mute); max-width: 56ch; margin: 10px 0 0; }
.kicker {
  display: inline-block; background: var(--chip); color: var(--navy-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.note-box {
  background: var(--orange-soft); border: 1px solid var(--orange-line);
  color: var(--orange-deep); font-size: 14px;
  padding: 12px 16px; border-radius: var(--r-sm); margin-top: 18px; max-width: 62ch;
}

/* ── Sobre el profesor ────────────────────────────────────────────────── */
.about { background: var(--bg); }
.about-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.about h2 { font-size: clamp(30px, 4.2vw, 44px); margin: 14px 0 0; }
.about p { color: var(--ink-soft); margin: 16px 0 0; }
.point-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.point-list li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 18px; font-size: 15px;
}
.point-num { font-family: var(--font-head); font-weight: 700; color: var(--red-text); flex: 0 0 auto; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Clases ───────────────────────────────────────────────────────────── */
.lessons { background: var(--white); }
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-top: clamp(22px, 3vw, 32px); padding: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 380px; min-width: 0; }
.chip {
  font-size: 14px; font-weight: 700; padding: 9px 16px;
  border: 1.5px solid var(--line-strong); background: var(--white); color: var(--ink-soft);
  border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--navy); color: var(--navy-text); }
.chip[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }

.seg { display: inline-flex; background: var(--bg-blue); border-radius: 999px; padding: 4px; flex: 0 0 auto; }
.seg button {
  font-size: 14px; font-weight: 700; padding: 9px 18px;
  border: 0; background: transparent; color: var(--ink-soft);
  border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed='true'] {
  background: var(--white); color: var(--navy-deep-text); box-shadow: 0 1px 3px rgba(22, 35, 47, 0.12);
}

.mode-note { font-size: 14px; color: var(--ink-mute); margin: 14px 0 0; }

.lesson-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: clamp(16px, 2vw, 22px); margin-top: clamp(20px, 3vw, 28px);
}
.lesson-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lesson-card:hover { border-color: var(--line-navy); box-shadow: var(--shadow-hover); }
.lesson-card[hidden] { display: none; }
.lesson-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.len-pill {
  background: var(--chip); color: var(--navy-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.tag-pill {
  background: var(--orange-soft); color: var(--orange-deep);
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.lesson-title { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.15; margin: 0; }
.lesson-note { font-size: 14px; color: var(--ink-mute); margin: 0; }
.lesson-price {
  font-family: var(--font-head); font-weight: 700; font-size: 32px;
  color: var(--ink); margin: 4px 0 0; line-height: 1;
}
.lesson-cta {
  margin-top: auto; padding-top: 12px;
}
.lesson-cta a {
  display: block; text-align: center; font-size: 15px; font-weight: 700;
  padding: 12px 18px; background: var(--tint); color: var(--navy-text);
  border-radius: var(--r-sm);
}
.lesson-cta a:hover { background: var(--bg-blue); }

/* ── Para quién ───────────────────────────────────────────────────────── */
.who { background: var(--bg); }
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2vw, 22px); margin-top: clamp(22px, 3vw, 32px);
}
.level-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px);
}
.level-sign {
  width: 54px; height: 54px; border-radius: var(--r-md);
  background: var(--bg-blue); color: var(--navy-text);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: 24px;
}
.level-kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange-ink); margin-top: 18px;
}
.level-card h3 { font-size: 25px; margin: 6px 0 0; }
.level-card p { color: var(--ink-mute); font-size: 15px; margin: 10px 0 0; }

/* ── Cómo funciona ────────────────────────────────────────────────────── */
.how { background: var(--bg-cream); }
.step-card {
  background: var(--white); border: 1px solid var(--orange-line);
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px);
}
.step-num {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
}
.step-card h3 { font-size: 22px; margin: 16px 0 0; }
.step-card p { color: var(--ink-mute); font-size: 15px; margin: 8px 0 0; }

/* ── Horarios ─────────────────────────────────────────────────────────── */
.schedule { background: var(--white); }
.day-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 16px; margin-top: clamp(22px, 3vw, 32px);
}
.day-card { background: var(--bg); border-radius: var(--r-lg); padding: 18px; }
.day-card h3 { font-size: 20px; }
.day-part {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 14px;
}
.slot-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.slot {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 14px; cursor: pointer; text-align: left;
}
.slot:hover:not(:disabled) { border-color: var(--navy); }
.slot-time { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.slot-state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green);
}
.slot:disabled { opacity: 0.55; cursor: not-allowed; }
.slot:disabled .slot-state { color: var(--ink-faint); }
.slot[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.slot[aria-pressed='true'] .slot-state { color: #cfe0ee; }

.slot-readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 22px; padding: 18px 20px;
  background: var(--bg-blue); border-radius: var(--r-lg);
}
.slot-readout .eyebrow { flex-basis: 100%; }
.slot-chosen { font-family: var(--font-head); font-weight: 700; font-size: 24px; }
/* Sin hora elegida ese hueco lleva una instrucción, no un dato: se escribe como
   instrucción para que nadie la confunda con una reserva ya hecha. */
.slot-chosen.is-empty {
  font-family: inherit; font-weight: 400; font-size: 16px; color: var(--ink-mute);
}
.schedule-note { color: var(--ink-mute); font-size: 15px; margin: 22px 0 0; max-width: 62ch; }

/* ── Videos y fotos ───────────────────────────────────────────────────── */
.media { background: var(--navy-deep); color: #fff; }
.media .section-intro { color: #c6d6e4; }
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px); margin-top: clamp(22px, 3vw, 32px);
}
.video-grid { align-items: start; }
.video-grid > .video-item:first-child { grid-column: span 2; }
/* Con menos de tres videos, el "span 2" del diseño dejaba una columna vacía:
   dos tarjetas se reparten el ancho, la horizontal doble que la vertical. */
.video-grid-par { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.video-grid-par > .video-item:first-child { grid-column: auto; }
@media (max-width: 720px) {
  .video-grid > .video-item:first-child { grid-column: auto; }
  .video-grid-par { grid-template-columns: 1fr; }
}
.video-frame {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--r-lg); background: var(--navy-darker);
  aspect-ratio: 16 / 9;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Un video vertical ocupa media columna, no la columna entera: si no, la
   tarjeta se vuelve una torre de 900 px en escritorio. */
.video-item.vertical .video-frame { max-width: 320px; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--navy-deep-text);
  display: flex; align-items: center; justify-content: center;
}
.video-dur {
  position: absolute; top: 12px; right: 12px;
  background: rgba(22, 35, 47, 0.8); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
}
.video-credit {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(22, 35, 47, 0.72); color: #e4edf4;
  font-size: 11px; padding: 3px 8px; border-radius: 5px;
}
.video-caption { font-family: var(--font-head); font-weight: 700; font-size: 19px; margin: 12px 0 0; }

.photo-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: clamp(28px, 4vw, 44px);
}
.photo-head .eyebrow { color: #9fb6c9; }
.photo-note { font-size: 14px; color: #9fb6c9; }
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px; margin-top: 14px;
}
.photo-grid img { border-radius: var(--r-md); aspect-ratio: 4 / 5; object-fit: cover; }
/* Las columnas no crecen sin límite: con dos fotos, un `1fr` las estiraba a
   media página y el grano de la imagen se hacía evidente. */
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 250px)); }

/* ── Opiniones ────────────────────────────────────────────────────────── */
.voices { background: var(--white); }
.opinion-card {
  background: var(--bg); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-top: clamp(22px, 3vw, 30px); max-width: 640px;
}
.star-row { display: flex; gap: 6px; margin: 6px 0 20px; }
.star-btn { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; }
.star-btn svg { width: 30px; height: 30px; fill: var(--line-strong); transition: fill 0.12s ease; }
.star-btn[aria-pressed='true'] svg,
.star-btn.is-lit svg { fill: var(--star); }

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.input:focus-visible { border-color: var(--navy); outline-offset: 0; }
textarea.input { min-height: 120px; resize: vertical; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-fine { font-size: 14px; color: var(--ink-mute); }
/* Va DEBAJO del boton, no al lado: quien duda de que pasa con sus datos duda
   en el momento de pulsar, y a esa altura la linea tiene que estar entera y
   legible, no partida en el hueco que quede. */
.form-privacy { font-size: 13px; line-height: 1.5; color: var(--ink-mute); margin: 12px 0 0; max-width: 52ch; }
.form-privacy a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 2px; }
/* La nota legal bajo la tabla de precios: mismo peso visual que la del
   formulario, porque cumple el mismo papel en el mismo momento de la decisión. */
.rate-legal { font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin: 18px 0 0; max-width: 56ch; }
.rate-legal a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 2px; }
.form-thanks {
  background: var(--bg-blue); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-top: clamp(22px, 3vw, 30px); max-width: 640px;
}
.form-thanks h3 { font-size: 26px; }
.form-thanks p { color: var(--ink-soft); margin: 8px 0 18px; }
.form-error { color: var(--red-text); font-size: 14px; font-weight: 600; margin: 12px 0 0; }

.review-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px; margin-top: 28px;
}
.review-card {
  background: var(--bg); border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 20px 22px;
}
.review-card blockquote { margin: 0; font-size: 16px; color: var(--ink-soft); }
.review-who { font-size: 13px; font-weight: 700; color: var(--ink-faint); margin: 12px 0 0; }

/* ── Recorrido / mapa ─────────────────────────────────────────────────── */
.route { background: var(--bg-blue); }
.route-panel {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 0; margin-top: clamp(22px, 3vw, 32px);
  background: var(--white); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 12px 30px rgba(22, 35, 47, 0.08);
}
/* Sin altura fija y sin scroll dentro. La columna tenía su propio desplazamiento
   porque llevaba 28 fichas de barrio; con la lista fuera, el contenido cabe y un
   contenedor que se desplaza dentro de una página que también se desplaza solo
   estorbaba —en el teléfono se peleaban los dos gestos—. */
.route-side { padding: clamp(20px, 2.5vw, 28px); }
@media (max-width: 820px) {
  .route-panel { grid-template-columns: 1fr; }
  #route-map { min-height: 340px; }
}
.route-side h3 { font-size: 26px; margin: 8px 0 0; }
.route-side > p { color: var(--ink-mute); font-size: 14px; margin: 8px 0 0; }
.route-readout {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; margin-top: 18px;
}
.route-readout h4 { font-size: 19px; }
/* Cuatro datos —tiempo, distancia, traslado y total— en dos filas de dos. En una
   sola fila, dentro de una columna de 380 px, cada celda queda a 95 px y
   "tiempo de viaje" se parte en tres líneas. */
.route-figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 12px 0 14px;
}
.route-figs .eyebrow { display: block; line-height: 1.25; }
.route-fig {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 21px;
  white-space: nowrap; margin-top: 2px;
}
@media (max-width: 420px) {
  .route-fig { font-size: 19px; }
}
/* De dónde sale la cifra: la ciudad del código postal y, cuando los minutos de
   puente se heredaron, desde qué barrio calibrado. Una cifra sin procedencia no
   se puede comprobar ni corregir. */
.route-where {
  font-size: 13px; color: var(--ink-mute); margin: 2px 0 0;
}
.route-where[hidden] { display: none; }
#route-map { min-height: 460px; background: #dde5eb; }
.route-note { font-size: 14px; color: var(--ink-mute); margin: 20px 0 0; max-width: 70ch; }
.leaflet-pin {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--surface-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.leaflet-pin.is-dest { background: #a62b27; }

/* ── Zonas ────────────────────────────────────────────────────────────── */
.areas { background: var(--white); }
.areas > .wrap > p { color: var(--ink-soft); max-width: 68ch; margin: 14px 0 0; }
.areas-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 44px); margin-top: clamp(26px, 3.5vw, 40px);
}
.plain-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.plain-list li {
  background: var(--bg); border-radius: var(--r-sm);
  padding: 13px 16px; font-size: 15px; color: var(--ink-soft);
}
.plain-list.numbered li { display: flex; gap: 14px; align-items: flex-start; }

/* ── Precios ──────────────────────────────────────────────────────────── */
.rates { background: var(--bg); }
.rates-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(22px, 3vw, 32px);
}
.rate-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px);
}
.rate-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.rate-table caption {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); padding-bottom: 10px;
}
.rate-table td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table td:last-child {
  text-align: right; font-weight: 700; white-space: nowrap;
}
.rate-highlight {
  background: var(--orange-soft); border: 1px solid var(--orange-line);
  border-radius: var(--r-lg); padding: 20px 22px; margin-top: 18px;
}
.rate-highlight h3 { font-size: 22px; color: var(--orange-deep); }
.rate-highlight p { font-size: 15px; color: var(--ink-soft); margin: 8px 0 0; }
.rate-example { font-size: 14px; color: var(--ink-mute); margin: 16px 0 0; }

/* ── Artículos ────────────────────────────────────────────────────────── */
.articles { background: var(--white); }
.article-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2vw, 24px);
}
a.article-card:hover { border-color: var(--line-navy); box-shadow: var(--shadow-hover); }
.article-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange-ink);
}
.article-card h3 { font-size: 21px; }
.article-card p { font-size: 14px; color: var(--ink-mute); margin: 0; }
.article-read { font-size: 12px; font-weight: 700; color: var(--ink-faint); margin-top: auto; padding-top: 10px; }

.asked { margin-top: clamp(34px, 4.5vw, 52px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.asked h3 { font-size: 26px; margin: 10px 0 0; }
.asked > p { color: var(--ink-mute); max-width: 62ch; margin: 8px 0 0; }
.query-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.query-list li { background: var(--bg); border-radius: var(--r-md); padding: 16px 18px; }
.query-list strong { display: block; font-size: 16px; }
.query-list span { font-size: 14px; color: var(--ink-mute); }

.subscribe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px; align-items: center;
  background: var(--bg-blue); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-top: clamp(28px, 4vw, 40px);
}
.subscribe h3 { font-size: 26px; }
.subscribe p { color: var(--ink-soft); font-size: 15px; margin: 8px 0 0; }
.subscribe form { display: flex; flex-wrap: wrap; gap: 10px; }
.subscribe .input { flex: 1 1 200px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { background: var(--bg-blue); }
.faq-card {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 26px);
}
.faq-card h3 { font-size: 21px; }
.faq-card p { font-size: 15px; color: var(--ink-mute); margin: 8px 0 0; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contact { background: var(--white); }
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px); margin-top: clamp(22px, 3vw, 32px);
}
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
/* Un hijo de rejilla o de flex nace con `min-width: auto`, o sea que NO baja de
   su ancho de contenido mínimo. A 280 px (un Galaxy Fold plegado) eso sacaba
   9 px de «WhatsApp — la vía más rápida» fuera de la pantalla. Con `min-width: 0`
   el elemento puede encoger y el texto parte la línea, que es lo que se espera. */
.contact-list li { min-width: 0; }
.contact-list a, .contact-list span { min-width: 0; }
.contact-list a, .contact-list span {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: var(--r-sm);
  padding: 14px 18px; font-size: 15px; color: var(--ink-soft);
}
.contact-list a:hover { background: var(--bg-blue); color: var(--navy-text); }
.contact-note { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }

.contact-form {
  background: var(--bg); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px);
}
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 20px; }
select.input { appearance: auto; }
.contact-form .form-foot { margin-top: 6px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--surface-dark); color: var(--footer-text); }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 34px var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer .logo-name { color: #fff; }
.site-footer .logo-sub { color: var(--orange-on-dark); }
.footer-right { display: grid; gap: 6px; justify-items: end; }
.footer-line { font-size: 14px; max-width: 46ch; text-align: right; }
/* El enlace legal es el unico enlace del pie, asi que va subrayado: sin nada
   alrededor con lo que contrastar, el color solo no basta para que se lea como
   enlace. Altura minima de 44 px para el pulgar; el subrayado se separa para
   que no muerda las descendentes. */
/* Seis enlaces, no uno: se reparten en una fila que se pliega. A la derecha
   en escritorio para seguir la línea del pie, y a la izquierda en el móvil,
   donde el texto centrado o alineado a la derecha se lee peor. */
.footer-legal {
  font-size: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 0 20px; max-width: 52ch;
}
.footer-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #cfe0ee; text-decoration: underline; text-underline-offset: 3px;
}
.footer-legal a:hover { color: #fff; }
@media (max-width: 640px) { .footer-legal { justify-content: flex-start; } }
@media (max-width: 640px) {
  .footer-line { text-align: left; }
  .footer-right { justify-items: start; }
}

/* ── Barra fija inferior ──────────────────────────────────────────────── */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(245, 248, 250, 0.97) 60%, rgba(245, 248, 250, 0));
  pointer-events: none;
}
.sticky-bar > * { pointer-events: auto; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--whatsapp); color: #fff; font-size: 15px; font-weight: 700;
  padding: 12px 22px; border-radius: var(--r-md);
}
.btn-whatsapp:hover { background: #1eb857; color: #fff; }
body.has-sticky-bar { padding-bottom: 84px; }

/* ── Aviso de reserva reciente ────────────────────────────────────────── */
.booking-toast {
  position: fixed; left: 16px; bottom: 92px; z-index: 25;
  display: flex; align-items: center; gap: 12px; max-width: 340px;
  background: var(--white); border-left: 4px solid var(--red);
  border-radius: var(--r-sm); padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(22, 35, 47, 0.16);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.booking-toast[hidden] { display: none; }
.booking-toast.is-on { opacity: 1; transform: none; }
.booking-avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: 0 0 auto;
  background: var(--orange-soft); color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
}
.booking-text { font-size: 14px; line-height: 1.4; }
.booking-meta {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 3px;
}

/* ── Modal de video ───────────────────────────────────────────────────── */
.video-modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(22, 35, 47, 0.9);
  border: 0;
}
.video-modal[hidden] { display: none; }
.video-modal-inner {
  background: var(--white); border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px); max-width: 720px; width: 100%;
}
.video-modal-inner .eyebrow { color: var(--orange-deep); }
.video-modal-inner h3 {
  font-size: clamp(24px, 3.2vw, 32px); color: var(--ink); margin: 10px 0 12px;
}
.video-modal-inner p { font-size: 15px; color: var(--ink-mute); margin: 0; }
.video-embed { aspect-ratio: 16 / 9; margin: 6px 0 0; max-height: 70vh; margin-inline: auto; }
.video-embed iframe,
.video-embed video {
  width: 100%; height: 100%; border: 0; border-radius: var(--r-md);
  background: var(--surface-dark); object-fit: contain;
}

/* ── Lista de barrios con scroll propio ───────────────────────────────────
   Con 28 zonas la lista empujaba la página hacia abajo y dejaba el resultado
   fuera de vista. Ahora la lista se desplaza sola y el panel con el tiempo, la
   distancia y el precio se queda arriba, visible mientras eliges. */
/* Buscador de barrios: con 28 zonas, escribir es más rápido que recorrer. */
/* El buscador es ahora el control principal de la sección, no un atajo para
   filtrar una lista: por eso lleva etiqueta visible y una pista debajo. */
.area-search { margin-top: 18px; }
.area-label {
  display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px;
}
.area-field { position: relative; }
.area-hint { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; }
.area-search .input { padding-right: 38px; }
/* Un input type="search" trae su propia × en Chrome y salían dos botones de
   borrar pegados. Se quita la nativa y queda solo la del sitio. */
#area-search::-webkit-search-cancel-button,
#area-search::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none;
}
.area-field button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--chip); color: var(--ink-mute); font-size: 18px; line-height: 1;
}
.area-field button:hover { background: var(--chip-hover); }
/* Sugerencias mientras se escribe: completan el nombre y ya traen el condado,
   el tiempo y el precio, para decidir sin pulsar nada. Van flotando sobre la
   lista, no empujándola, para que el sitio no salte mientras se teclea. */
/* Anclado a la ventana y no al panel: la tarjeta de la ruta recorta lo que se
   sale de ella (overflow:hidden) y la columna de zonas tiene su propio scroll,
   así que un menú absoluto quedaba cortado a los tres resultados. Con position
   fixed no lo recorta nadie; la posición y el alto los pone el JS. El z-index
   va sobre la barra fija de abajo (30) y bajo el visor de vídeo (40). */
.area-sug {
  position: fixed; z-index: 35;
  margin: 0; padding: 4px; list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(16, 42, 67, 0.16);
}
.area-sug[hidden] { display: none; }
.area-sug li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.area-sug li.is-on, .area-sug li:hover { background: var(--tint); }
.area-sug .sug-name { font-size: 15px; color: var(--ink); }
.area-sug .sug-name b { font-weight: 700; color: var(--navy-text); }
.area-sug .sug-dato { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.area-empty {
  font-size: 14px; color: var(--ink-mute); background: var(--tint);
  border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0 0;
}


/* El precio en el panel de resultado: es el dato que el alumno viene a buscar. */
.route-price { color: var(--orange-deep); }
.route-price-cell small {
  display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px;
}

/* ── Campo trampa para bots ───────────────────────────────────────────────
   Fuera de la vista sin usar display:none ni visibility:hidden, que es lo
   primero que comprueban los bots que saben de honeypots. Para una persona es
   inalcanzable: está fuera de pantalla y sin foco de teclado (tabindex="-1"). */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Páginas de artículo (ADR-0033) ───────────────────────────────────── */
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-inline: var(--pad); }
.article-page { padding-block: clamp(28px, 4vw, 56px) clamp(44px, 6vw, 80px); background: var(--white); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-faint); }
.crumbs a { color: var(--navy-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.article-page h1 {
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08;
  margin: 18px 0 0; color: var(--ink);
}
.article-meta { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }
.article-lede {
  font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--ink-soft);
  border-left: 3px solid var(--orange); padding-left: 18px;
  margin: clamp(22px, 3vw, 30px) 0 0;
}

/* Una palabra sin espacios mas ancha que su columna saca la pagina de la
   pantalla: `contact@estudioabrahampiano.com` son 31 caracteres y 344 px, y a
   280 px la columna mide 248. Pasaba en las DOCE paginas legales, que es donde
   vive esa direccion.

   `anywhere` y NO `break-word`, y la diferencia no es de matiz: `break-word`
   solo parte para evitar el desborde VISUAL, pero no cambia el ancho minimo
   intrinseco que el motor usa para maquetar. Medido con las tres opciones:
   `break-word` da exactamente el mismo resultado que `normal` (107 px de
   desborde a 280, 67 a 320, 12 a 375) y solo `anywhere` queda a cero en los
   tres. Cubre cualquier correo o URL larga que se escriba en el futuro.

   Y de paso destapa que esto NO era un defecto nuevo: con `normal` la pagina
   de privacidad ya desbordaba 67 px a 320. El barrido anterior no lo vio
   porque midio con la tipografia ya cargada, y con la de reserva la direccion
   es mas ancha. Una medicion que depende de si la fuente llego a tiempo es una
   medicion que miente la mitad de las veces. */
.prose, .article-lede { overflow-wrap: anywhere; }
.prose { margin-top: clamp(26px, 3.4vw, 38px); }
.prose h2 {
  font-size: clamp(23px, 2.8vw, 30px); line-height: 1.15; color: var(--ink);
  margin: clamp(30px, 4vw, 44px) 0 0;
}
.prose p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 16px 0 0; }
.prose ul { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 12px; }
.prose li { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 2px; }

.article-note {
  background: var(--orange-soft); border: 1px solid var(--orange-line);
  color: var(--orange-deep); border-radius: var(--r-md);
  padding: clamp(16px, 2vw, 22px); margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: 16px; line-height: 1.6;
}
.article-note strong { color: var(--orange-deep); }

.table-scroll { overflow-x: auto; margin: clamp(20px, 2.6vw, 28px) 0 0; }
.article-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 320px; }
.article-table th, .article-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article-table th {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--tint);
}
.article-table td { color: var(--ink-soft); }

.article-cta {
  margin: clamp(38px, 5vw, 60px) 0 0; background: var(--bg-blue);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px);
}
.article-cta h2 { font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); }
.article-cta p { font-size: 16px; color: var(--ink-soft); margin: 10px 0 0; max-width: 54ch; }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.article-sources { margin: clamp(34px, 4.5vw, 52px) 0 0; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.article-sources h2 { font-size: 22px; color: var(--ink); }
.article-sources-note { font-size: 14px; color: var(--ink-mute); margin: 8px 0 0; max-width: 62ch; }
.article-sources ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.article-sources li { font-size: 14px; }
.article-sources a { color: var(--navy-text); overflow-wrap: anywhere; }

.article-more { margin: clamp(34px, 4.5vw, 52px) 0 0; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.article-more h2 { font-size: 22px; color: var(--ink); }
.article-more .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.article-more .article-card h3 { font-size: 18px; }
.article-back { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--navy-text); }


/* ── Interruptor de tema ──────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--ink-mute); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--navy); color: var(--navy-text); }
.theme-toggle svg { width: 19px; height: 19px; }
/* Se enseña el icono de LO QUE PASARÍA al pulsar, no el del tema actual: es
   la pregunta que el visitante se hace mirando el botón. */
.theme-toggle .i-luna { display: block; }
.theme-toggle .i-sol { display: none; }
[data-theme='dark'] .theme-toggle .i-luna { display: none; }
[data-theme='dark'] .theme-toggle .i-sol { display: block; }

/* ── Paleta de comandos ───────────────────────────────────────────────── */
.palette-open {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px;
  background: var(--chip); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--ink-mute); font: inherit; font-size: 14px; cursor: pointer;
}
.palette-open:hover { border-color: var(--navy); color: var(--navy-text); }
.palette-open kbd {
  font: inherit; font-size: 12px; padding: 2px 6px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-faint);
}
.palette-open span { white-space: nowrap; }
@media (max-width: 900px) { .palette-open kbd { display: none; } }

.palette[hidden] { display: none; }
.palette {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 16, 23, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(50px, 12vh, 130px) 16px 16px;
}
.palette-box {
  width: 100%; max-width: 560px; background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(10, 16, 23, .35);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.palette-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-field svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.palette-input {
  flex: 1; font: inherit; font-size: 17px; color: var(--ink);
  background: none; border: 0; outline: none; min-width: 0;
}
.palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.palette-list li { margin: 0; }
.palette-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.palette-item[aria-selected='true'] { background: var(--chip); }
.palette-item .p-kind { font-size: 12px; color: var(--ink-faint); margin-left: auto; flex: none; }
/* Los títulos de artículo llegan a tres líneas y la lista deja de poder
   recorrerse de un vistazo. Dos líneas y puntos suspensivos. */
.palette-item .p-name {
  font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.palette-item .p-sub { display: block; font-size: 13px; color: var(--ink-mute); font-weight: 400; }
.palette-empty { padding: 26px 16px; text-align: center; color: var(--ink-mute); font-size: 15px; }
.palette-foot {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint);
}
.palette-foot kbd {
  font: inherit; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px;
}

/* ── Esqueletos de carga ──────────────────────────────────────────────── */
/* Solo donde algo LLEGA de fuera: el mapa y los vídeos incrustados. En el
   resto de la página el contenido ya está en el HTML, y un esqueleto ahí no
   informaría de nada: sería una animación fingiendo una espera que no existe. */
.skel {
  position: relative; overflow: hidden;
  background: var(--chip); border-radius: var(--r-sm);
}
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-100%); animation: skel-pasa 1.4s ease-in-out infinite;
}
[data-theme='dark'] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
}
@keyframes skel-pasa { to { transform: translateX(100%); } }
.skel-map { position: absolute; inset: 0; z-index: 1; }
.skel-map-txt {
  position: absolute; inset: auto 0 14px; text-align: center;
  font-size: 13px; color: var(--ink-mute); z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ── Botón trabajando ─────────────────────────────────────────────────── */
.btn[aria-busy='true'] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy='true']::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: gira .7s linear infinite;
}
.btn-outline[aria-busy='true']::after { border-color: var(--line-navy); border-top-color: var(--navy-text); }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy='true']::after { animation-duration: 2.4s; } }

/* El error del formulario, con su botón de reintentar. */
/* El `display` del autor GANA al `[hidden] { display: none }` del navegador,
   así que sin esta línea el mensaje de error se veía siempre —encontrado por
   el medidor de contraste, que lo leyó en una página recién cargada—. La misma
   trampa que tiene cualquier `hidden` al que se le pone un display. */
.form-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-error[hidden] { display: none; }
.form-retry {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--navy-text);
  background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline;
}

/* ── Compartir ────────────────────────────────────────────────────────── */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(26px, 3vw, 34px); padding-top: 20px; border-top: 1px solid var(--line);
}
.share-label { font-size: 14px; color: var(--ink-mute); }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--chip); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--navy-text); cursor: pointer;
}
.share-btn:hover { background: var(--chip-hover); }
.share-btn svg { width: 17px; height: 17px; }
.share-ok { font-size: 14px; color: var(--green); font-weight: 600; }

/* ── Página 404 ───────────────────────────────────────────────────────── */
.nf { padding: clamp(60px, 10vw, 120px) 0 clamp(50px, 8vw, 90px); }
.nf-code {
  font-family: var(--font-head); font-size: clamp(64px, 14vw, 128px); line-height: 1;
  color: var(--nf-code); letter-spacing: -.02em;
}
/* El «404» de 128 px deja un hueco de casi cien píxeles bajo su línea base,
   porque la caja mide lo que el tamaño de fuente y las cifras no la llenan.
   Se sube el título en vez de recortar la cifra. */
.nf h1 { margin-top: -10px; }
.nf-lede { font-size: 18px; color: var(--ink-soft); margin: 16px 0 0; max-width: 54ch; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nf-otro { margin-top: 22px; font-size: 15px; }
.nf-otro a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px; }
.nf-links { margin-top: clamp(36px, 5vw, 54px); }
.nf-links h2 { font-size: 20px; }
.nf-links ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.nf-links a {
  display: block; padding: 11px 0; color: var(--navy-text); font-weight: 600;
  border-bottom: 1px solid var(--line);
}

/* ── Modo oscuro ──────────────────────────────────────────────────────────
   Dos bloques con los MISMOS valores, y no es descuido:

   · El primero atiende la preferencia del sistema operativo, y funciona
     SIN JavaScript. Se excluye a quien haya pedido claro a mano.
   · El segundo atiende el interruptor, que gana sobre el sistema.

   No hay forma en CSS de aplicar las mismas variables desde dentro y desde
   fuera de una media query con una sola regla. Para que no se separen con el
   tiempo, `build.mjs` COMPRUEBA en cada compilación que los dos bloques son
   idénticos y falla si no lo son.

   `color-scheme: dark` no es decorativo: pone en oscuro las barras de scroll,
   los desplegables y el calendario nativos, que si no se quedan blancos.
   ────────────────────────────────────────────────────────────────────────── */

/* INICIO TEMA OSCURO A */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  color-scheme: dark;

  /* Textos: lo que era oscuro sobre claro ahora es claro sobre oscuro. */
  --ink: #e9eff5;
  --ink-soft: #c5d2de;
  --ink-mute: #a2b3c2;
  --ink-faint: #93a6b6;
  --navy-text: #8bbae8;      /* el azul de marca, aclarado para leerse aquí */

  /* Superficies. `--white` se llama así por historia: es la superficie de las
     tarjetas, y aquí deja de ser blanca. Renombrarla tocaría 60 reglas. */
  --bg: #0f1720;
  --bg-blue: #162330;
  --bg-cream: #241c12;
  --white: #17222e;
  --surface-dark: #0a1017;
  --footer-text: #a8bccd;
  --nf-code: #55708a;        /* 3,4:1 sobre el fondo oscuro */
  --red-waiting: #f2706b;    /* 4,8:1 sobre --red-pale oscuro */

  /* El azul de marca como FONDO se aclara un punto: sobre negro, el de modo
     claro se confunde con el fondo. Sigue llevando texto blanco encima. */
  --navy: #3b6b96;
  --navy-deep: #0d1620;
  --navy-deep-text: #b9d2e8;  /* el mismo papel, legible sobre superficie oscura */
  --navy-darker: #080f16;

  --line: #26333f;
  --line-strong: #32424f;
  --line-navy: #3e5567;
  --chip: #1d2937;
  --chip-hover: #273544;
  --tint: #142029;

  --red: #cf4440;
  --red-text: #f2706b;       /* 5,6:1 sobre la superficie oscura */
  --red-dark: #ab3330;
  --red-pale: #4a211f;
  --orange: #d4772e;
  --orange-ink: #eda265;
  --orange-deep: #e8a05e;    /* 7,3:1 · el anterior daba 4,03:1 y no pasaba */
  --orange-soft: #2b2015;
  --orange-line: #3f2f1d;
  --star: #f0a83f;
  --green: #4cbf87;
  }
}
/* FIN TEMA OSCURO A */

/* INICIO TEMA OSCURO B */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Textos: lo que era oscuro sobre claro ahora es claro sobre oscuro. */
  --ink: #e9eff5;
  --ink-soft: #c5d2de;
  --ink-mute: #a2b3c2;
  --ink-faint: #93a6b6;
  --navy-text: #8bbae8;      /* el azul de marca, aclarado para leerse aquí */

  /* Superficies. `--white` se llama así por historia: es la superficie de las
     tarjetas, y aquí deja de ser blanca. Renombrarla tocaría 60 reglas. */
  --bg: #0f1720;
  --bg-blue: #162330;
  --bg-cream: #241c12;
  --white: #17222e;
  --surface-dark: #0a1017;
  --footer-text: #a8bccd;
  --nf-code: #55708a;        /* 3,4:1 sobre el fondo oscuro */
  --red-waiting: #f2706b;    /* 4,8:1 sobre --red-pale oscuro */

  /* El azul de marca como FONDO se aclara un punto: sobre negro, el de modo
     claro se confunde con el fondo. Sigue llevando texto blanco encima. */
  --navy: #3b6b96;
  --navy-deep: #0d1620;
  --navy-deep-text: #b9d2e8;  /* el mismo papel, legible sobre superficie oscura */
  --navy-darker: #080f16;

  --line: #26333f;
  --line-strong: #32424f;
  --line-navy: #3e5567;
  --chip: #1d2937;
  --chip-hover: #273544;
  --tint: #142029;

  --red: #cf4440;
  --red-text: #f2706b;       /* 5,6:1 sobre la superficie oscura */
  --red-dark: #ab3330;
  --red-pale: #4a211f;
  --orange: #d4772e;
  --orange-ink: #eda265;
  --orange-deep: #e8a05e;    /* 7,3:1 · el anterior daba 4,03:1 y no pasaba */
  --orange-soft: #2b2015;
  --orange-line: #3f2f1d;
  --star: #f0a83f;
  --green: #4cbf87;
}
/* FIN TEMA OSCURO B */

/* En oscuro las fotos a pleno brillo queman. Un punto menos de brillo y de
   contraste las integra sin que se vean sucias. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) img:not(.no-dim) { filter: brightness(.88) contrast(1.02); }
}
:root[data-theme='dark'] img:not(.no-dim) { filter: brightness(.88) contrast(1.02); }

/* ── Impresión ────────────────────────────────────────────────────────── */
/* ── Objetivos táctiles en móvil ──────────────────────────────────────────
   Medido el 2026-09-21 a 390 px: los ocho enlaces del menú medían 23 px de
   alto, el conmutador de idioma 42×32, el CTA de cabecera 174×41 y los filtros
   de clase 79×43. Todos por debajo de los 44 px que un pulgar acierta sin
   fallar — y el menú, además, se desplaza en horizontal, donde un toque
   impreciso arrastra en vez de pulsar.

   Este bloque va al FINAL a propósito. El primer intento lo puso junto a la
   cabecera y no sirvió de nada: la regla del componente aparece más abajo con
   la misma especificidad y su `padding` corto ganaba por orden de cascada. Se
   crece solo el área de toque; ni la tipografía ni el aspecto cambian. */
/* ── Telefonos estrechos (320-400 px) ─────────────────────────────────── */
/* Pantallas de menos de 300 px: un Galaxy Fold plegado, y no mucho mas.
   Se resuelve SIN tocar los 44 px de los objetivos tactiles: encogerlos por
   debajo del minimo seria cambiar dos pixeles de scroll por un problema de
   accesibilidad, que es un mal trato. Se deja que las filas se plieguen y se
   recorta el hueco entre elementos, no los elementos. */
@media (max-width: 300px) {
  .sticky-bar { flex-wrap: wrap; gap: 8px; padding-inline: 10px; }
  .sticky-bar .btn, .sticky-bar .btn-whatsapp { flex: 1 1 auto; min-width: 0; }
  .star-row { gap: 0; }
  .star-btn { padding: 7px 2px; }
}

@media (max-width: 400px) {
  /* El CTA principal a todo el ancho. No es solo el arreglo del desbordamiento:
     es el patron habitual en movil, se acierta mejor con el pulgar, y un boton
     que ocupa su columna entera no puede sobresalir de ella por definicion. */
  .hero-actions .btn, .nf-actions .btn, .article-cta-actions .btn { width: 100%; }
  /* Y la red para cualquier otro boton con una etiqueta larga: antes de
     sobresalir, que parta la linea. Dos lineas es feo; arrastrar la pagina en
     horizontal es un defecto. */
  .btn { white-space: normal; }
}

@media (max-width: 900px) {
  .site-nav a { display: block; padding-block: 11px; }
  /* `min-width` y no solo relleno: con `font-display: optional` la fuente
     puede no llegar nunca, y entonces las letras miden distinto según la
     página. Medido: 46 px en la portada y 42 en el artículo, la misma regla.
     El mínimo no depende de qué fuente acabe pintándose. */
  .lang-switch a, .lang-switch span {
    padding: 12px 13px; min-width: 44px; justify-content: center;
  }
  .lang-switch { display: flex; }
  .header-actions .btn-sm { padding: 14px 20px; }
  .logo { padding-block: 4px; }
  .filter-bar button, .chip { min-height: 44px; }
  /* Las migas median 45x21. No se habian medido nunca: la auditoria de tactiles
     del 2026-09-21 solo recorrio la portada, y las migas solo existen en los
     articulos y en el aviso de privacidad. Se centran para que el separador no
     quede colgado arriba al crecer el enlace. */
  .crumbs { align-items: center; }
  .crumbs a { display: inline-block; padding-block: 12px; }
  /* Las estrellas median 34x34: el SVG es de 30 px y el relleno era de 2. Se
     crece el relleno, no la estrella. */
  .star-btn { padding: 7px; }
}

@media print {
  .site-header, .sticky-bar, .booking-toast, .video-modal, .filter-bar { display: none !important; }
  body { padding-bottom: 0; }
  .section { padding-block: 20px; }
}