/* =========================================================
   Clínica Dental Almenara — tema Clínico, acento turquesa
   Nombres de token del sistema de diseño de Clave Digital
   (SISTEMA DE DISEÑO/FOUNDATIONS). Aquí arriba solo cambian los
   valores; los componentes de abajo usan siempre var(--…).

   CONTRASTES (WCAG, calculados el 25/09/2026 con script de luminancia;
   los cuatro pares obligatorios de 01 - color.md van marcados con ★):

   ★ text-heading #0C2B3C sobre bg-page #F6FAFC ......... 14,02:1
     text-heading sobre bg-page-alt #E9F2F7 ............. 12,98:1
     text-heading sobre bg-surface #FFFFFF .............. 14,72:1
   ★ text-neutral #33505F sobre bg-page .................. 8,15:1
     text-neutral sobre bg-page-alt ...................... 7,54:1
     text-neutral sobre bg-surface ....................... 8,56:1
     text-subtle  #566E7C sobre bg-page .................. 5,11:1
     text-subtle  sobre bg-page-alt ...................... 4,73:1
     text-subtle  sobre bg-surface ....................... 5,36:1
   ★ text-brand   #0B6E77 sobre bg-page .................. 5,70:1
     text-brand   sobre bg-surface ....................... 5,98:1
     text-brand   sobre bg-surface-raised #EEF5F9 ........ 5,43:1
     text-brand   sobre bg-page-alt ...................... 5,27:1
   ★ text-inverse #FFFFFF sobre bg-brand-bold #0B6E77 .... 5,98:1
     text-inverse sobre bg-brand-hover #095E66 ........... 7,49:1
     text-on-dark #F6FAFC sobre bg-dark #0C2B3C ......... 14,02:1
     text-on-dark-subtle #AFC6D2 sobre bg-dark ........... 8,29:1
     text-danger  #B3261E sobre bg-surface ............... 6,54:1
     text-success #0F7A4D sobre bg-surface ............... 5,37:1

   BORDE DE CAMPO (≥ 3:1): border-input #6F8794
     sobre bg-surface #FFFFFF ............................ 3,77:1
     sobre bg-page #F6FAFC ............................... 3,59:1
     sobre bg-surface-raised #EEF5F9 ..................... 3,42:1

   Nota de la ficha de estilo: el turquesa claro tipo #2BD9B4 con texto
   blanco da 1,80:1 y NO se usa. Aquí el acento es #0B6E77, que con
   blanco encima da 5,98:1.
   ========================================================= */
:root {
  /* ---- Color: primitivos (no se usan directamente abajo) ---- */
  --turquesa-700: #0B6E77;
  --turquesa-800: #095E66;
  --turquesa-100: #D7EDEF;
  --turquesa-300: #8FC3C9;
  --tinta-900:    #0C2B3C;
  --tinta-700:    #33505F;
  --tinta-500:    #566E7C;
  --tinta-400:    #6F8794;
  --tinta-200:    #AFC6D2;
  --hielo-100:    #F6FAFC;
  --hielo-200:    #EEF5F9;
  --hielo-300:    #E9F2F7;
  --hielo-400:    #DCE7EE;
  --blanco:       #FFFFFF;
  --rojo-600:     #B3261E;
  --verde-700:    #0F7A4D;

  /* ---- Color: tokens semánticos (01 - color.md) ---- */
  --bg-page:           var(--hielo-100);
  --bg-page-alt:       var(--hielo-300);
  --bg-surface:        var(--blanco);
  --bg-surface-raised: var(--hielo-200);
  --bg-brand-soft:     var(--turquesa-100);   /* solo fondos de icono y pastillas pequeñas */
  --bg-brand-bold:     var(--turquesa-700);   /* blanco encima: 5,98:1 */
  --bg-brand-hover:    var(--turquesa-800);
  --bg-dark:           var(--tinta-900);      /* bandas y pie; texto claro encima: 14,02:1 */
  --bg-danger-subtle:  rgba(179, 38, 30, 0.08);
  --bg-success-subtle: rgba(15, 122, 77, 0.08);
  --text-heading:      var(--tinta-900);
  --text-neutral:      var(--tinta-700);
  --text-subtle:       var(--tinta-500);
  --text-brand:        var(--turquesa-700);
  --text-inverse:      var(--blanco);
  --text-on-dark:      var(--hielo-100);
  --text-on-dark-subtle: var(--tinta-200);
  --text-danger:       var(--rojo-600);
  --text-success:      var(--verde-700);
  --border-neutral:    var(--hielo-400);
  --border-brand:      var(--turquesa-700);   /* anillo de foco */
  --border-brand-soft: var(--turquesa-300);   /* decorativo: la línea curva de los 3 pasos */
  --border-input:      var(--tinta-400);      /* 3,77:1 sobre blanco */
  --border-on-dark:    rgba(246, 250, 252, 0.16);

  /* Alpha: solo capas sobre imagen y estados (01 - color.md, «Alpha: dónde sí») */
  --bg-overlay:        rgba(246, 250, 252, 0.92);
  --bg-dark-overlay:   rgba(12, 43, 60, 0.62);
  --bg-dark-overlay-2: rgba(12, 43, 60, 0.18);
  --success-halo:      rgba(15, 122, 77, 0.18);

  /* ---- Tipografía (02 - tipografia.md) ----
     Cada token trae peso, tamaño e interlineado: se usa con font: var(--…).
     Tema Clínico: una sola familia sans, nada de serif, nada de mayúsculas
     en titulares (solo en la etiqueta pequeña de sección). */
  --font-titular: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cuerpo:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:    800 clamp(2.125rem, 4.6vw, 3.75rem) / 1.08 var(--font-titular);
  --font-heading-l:  800 clamp(1.75rem, 3.1vw, 2.625rem) / 1.14 var(--font-titular);
  --font-heading-m:  700 clamp(1.25rem, 1.8vw, 1.5rem) / 1.25 var(--font-titular);
  --font-heading-s:  700 1.0625rem / 1.35 var(--font-titular);
  --font-body-l:     400 1.125rem / 1.65 var(--font-cuerpo);
  --font-body-m:     400 1rem / 1.65 var(--font-cuerpo);
  --font-body-m-strong: 600 1.0625rem / 1.45 var(--font-cuerpo);
  --font-body-s:     400 0.9375rem / 1.6 var(--font-cuerpo);
  --font-label:      700 0.875rem / 1.3 var(--font-titular);
  --font-metric-l:   800 clamp(2.25rem, 3.8vw, 3rem) / 1 var(--font-titular);
  --font-metric-s:   800 clamp(1.75rem, 2.6vw, 2.25rem) / 1 var(--font-titular);
  --tracking-titular: -0.02em;
  --tracking-label:   0.14em;

  /* ---- Escala de espacio, base 4 (03 - escalas y forma.md) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Forma: el tema Clínico va redondeado ---- */
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 22px;
  --radio-full: 999px;
  --borde-fino: 1px;
  --borde-grueso: 2px;
  --sombra-sm: 0 1px 2px rgba(12, 43, 60, 0.06);
  --sombra-md: 0 10px 30px rgba(12, 43, 60, 0.08);
  --sombra-lg: 0 28px 70px rgba(12, 43, 60, 0.16);

  /* ---- Layout (04 - layout y breakpoints.md) ---- */
  --cont-max: 1140px;
  --cont-estrecho: 720px;
  --margen-lateral: 20px;
  --seccion: var(--sp-16);
  --barra-alto: 0px;
  --cabecera-alto: 68px;
  --cabecera-total: calc(var(--barra-alto) + var(--cabecera-alto));
  --paso-circulo: 88px;
  --transicion: 0.25s ease;

  /* ---- Chat (COMPONENTES/chat-web.md) ---- */
  --chat-avatar: url('https://images.unsplash.com/photo-1760351561005-718d0e766dac?w=160&h=160&fit=crop&crop=faces&q=75');
}

@media (min-width: 768px)  { :root { --margen-lateral: 32px; } }
@media (min-width: 1024px) {
  :root {
    --margen-lateral: 48px;
    --seccion: var(--sp-24);
    --barra-alto: 40px;
    --cabecera-alto: 76px;
    --paso-circulo: 152px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-total) + var(--sp-4)); }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-neutral);
  font: var(--font-body-m);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--text-heading); letter-spacing: var(--tracking-titular); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Foco visible en todo lo que se pulsa (01 - color.md: nunca outline: none sin sustituto) */
:focus-visible { outline: var(--borde-grueso) solid var(--border-brand); outline-offset: 3px; }

.saltar {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-brand-bold); color: var(--text-inverse);
  font: var(--font-label); border-radius: var(--radio-sm);
}
.saltar:focus { top: var(--sp-4); }

/* Los hijos de rejilla no empujan el ancho de la página en móvil */
.contacto-bloque > *, .razones > *, .faq > *, .cabeza-seccion > *, .precios > *,
.opiniones > *, .equipo > *, .tratamientos > *, .pasos__lista > *,
.formulario__fila > *, .formulario > *, .banda-cifras__fila > * { min-width: 0; }
.formulario input, .formulario select, .formulario textarea { min-width: 0; max-width: 100%; }

.contenedor { width: 100%; max-width: calc(var(--cont-max) + 2 * var(--margen-lateral)); margin: 0 auto; padding: 0 var(--margen-lateral); }
.seccion { padding: var(--seccion) 0; }
.seccion--alterna { background: var(--bg-page-alt); }
.seccion--blanca { background: var(--bg-surface); }

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-brand); margin-bottom: var(--sp-4);
}
.etiqueta::before { content: ''; width: 7px; height: 7px; border-radius: var(--radio-full); background: var(--text-brand); }
.etiqueta--clara { color: var(--text-on-dark); }
.etiqueta--clara::before { background: var(--text-on-dark); }

.titulo-seccion { font: var(--font-heading-l); max-width: 18ch; }
.titulo-seccion em { font-style: normal; color: var(--text-brand); }
.cabeza-seccion--centro .titulo-seccion { max-width: 24ch; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-8);
  flex: none;
  background: var(--bg-brand-bold); color: var(--text-inverse);
  border: var(--borde-fino) solid var(--bg-brand-bold); border-radius: var(--radio-full);
  font: var(--font-label); cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { background: var(--bg-brand-hover); border-color: var(--bg-brand-hover); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.boton--pequeno { min-height: 44px; padding: var(--sp-2) var(--sp-5); }
.boton--contorno { background: var(--bg-surface); color: var(--text-brand); border-color: var(--border-input); }
.boton--contorno:hover { background: var(--bg-surface); color: var(--text-brand); border-color: var(--border-brand); }
.boton--claro { background: var(--bg-surface); color: var(--text-brand); border-color: var(--bg-surface); }
.boton--claro:hover { background: var(--bg-surface-raised); border-color: var(--bg-surface-raised); color: var(--text-brand); }
.boton--ancho { width: 100%; text-align: center; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  font: var(--font-label); color: var(--text-brand);
  transition: gap var(--transicion);
}
.enlace-flecha:hover { gap: var(--sp-3); }

/* ---------- Barra superior ---------- */
.barra {
  display: none;
  height: var(--barra-alto); background: var(--bg-dark); color: var(--text-on-dark-subtle);
}
.barra__fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); font: var(--font-body-s); }
.barra__datos { display: flex; align-items: center; gap: var(--sp-6); }
.barra__datos span, .barra__datos a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.barra__datos a:hover { color: var(--text-on-dark); }
.barra svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .barra { display: block; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--bg-overlay); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--borde-fino) solid transparent;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.cabecera.con-fondo { border-color: var(--border-neutral); box-shadow: var(--sombra-sm); }
.cabecera__fila { height: var(--cabecera-alto); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text-heading); }
.logo__marca {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radio-md); background: var(--bg-brand-bold); color: var(--text-inverse);
}
.logo__marca svg { width: 22px; height: 22px; }
.logo__texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo__texto strong { font: var(--font-heading-s); font-size: 1.0625rem; letter-spacing: var(--tracking-titular); }
.logo__texto span { font: var(--font-body-s); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }

.menu { display: none; gap: var(--sp-8); }
.menu > a { font: var(--font-body-m); font-weight: 600; color: var(--text-neutral); transition: color var(--transicion); }
.menu > a:hover { color: var(--text-brand); }
.cabecera__acciones { display: none; align-items: center; gap: var(--sp-4); }
.cabecera__tel { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--font-body-m-strong); color: var(--text-heading); }
.cabecera__tel svg { color: var(--text-brand); width: 20px; height: 20px; }

.hamburguesa {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
}
.hamburguesa span { width: 24px; height: 2px; border-radius: 2px; background: var(--text-heading); transition: transform var(--transicion), opacity var(--transicion); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: pantalla completa, enlaces grandes, CTA y teléfono abajo (COMPONENTES/menu-movil.md) */
.menu__pie { display: none; }
@media (max-width: 1023.98px) {
  .menu.abierto {
    display: flex; flex-direction: column;
    position: fixed; top: var(--cabecera-total); left: 0; right: 0; bottom: 0;
    padding: var(--sp-6) var(--margen-lateral) var(--sp-8);
    background: var(--bg-page); border-top: var(--borde-fino) solid var(--border-neutral);
    overflow-y: auto;
  }
  .menu.abierto > a {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: var(--borde-fino) solid var(--border-neutral);
    font: var(--font-heading-m); font-size: clamp(1.375rem, 6vw, 1.75rem); color: var(--text-heading);
    opacity: 0; transform: translateY(12px); animation: menu-entra 0.4s ease forwards;
  }
  .menu.abierto > a::after { content: '→'; margin-left: auto; font: var(--font-body-l); color: var(--text-brand); transition: transform var(--transicion); }
  .menu.abierto > a:hover::after, .menu.abierto > a:focus-visible::after { transform: translateX(4px); }
  .menu.abierto > a:nth-child(2) { animation-delay: 0.04s; }
  .menu.abierto > a:nth-child(3) { animation-delay: 0.08s; }
  .menu.abierto > a:nth-child(4) { animation-delay: 0.12s; }
  .menu.abierto > a:nth-child(5) { animation-delay: 0.16s; }
  .menu.abierto .menu__pie {
    display: flex; flex-direction: column; gap: var(--sp-4);
    margin-top: auto; padding-top: var(--sp-8);
    opacity: 0; animation: menu-entra 0.4s ease 0.22s forwards;
  }
  .menu.abierto .menu__pie p { font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
  .menu.abierto .menu__pie p a { font: var(--font-body-m-strong); color: var(--text-heading); }
}

@keyframes menu-entra { to { opacity: 1; transform: none; } }
html.menu-abierto { overflow: hidden; }
html.menu-abierto .chat-window-wrapper { display: none; }   /* el botón del chat no tapa el menú */

@media (min-width: 1024px) {
  .menu, .menu.abierto { display: flex; flex-direction: row; position: static; padding: 0; background: none; border: 0; overflow: visible; }
  .menu__pie, .menu.abierto .menu__pie { display: none; }
  .cabecera__acciones { display: flex; }
  .hamburguesa { display: none; }
}

/* ---------- Portada ---------- */
.portada { padding: calc(var(--cabecera-total) + var(--sp-10)) 0 0; background: var(--bg-page); }
.portada__rejilla { display: grid; gap: var(--sp-10); align-items: center; }
.portada__titulo { font: var(--font-display); max-width: 15ch; }
.portada__titulo em { font-style: normal; color: var(--text-brand); }
.portada__sub { margin-top: var(--sp-5); max-width: 46ch; font: var(--font-body-l); color: var(--text-neutral); }
.portada__botones { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.portada__confianza {
  margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-6); border-top: var(--borde-fino) solid var(--border-neutral);
  font: var(--font-body-s); color: var(--text-neutral);
}
.portada__confianza div { display: flex; align-items: center; gap: var(--sp-2); }
.portada__confianza strong { color: var(--text-heading); }
.estrellas { color: var(--text-brand); letter-spacing: 0.1em; }

.portada__foto { position: relative; }
.portada__marco { border-radius: var(--radio-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--sombra-md); background: var(--bg-surface-raised); }
.portada__marco img { width: 100%; height: 100%; object-fit: cover; }
.portada__tarjeta {
  position: relative; z-index: 1;
  margin: calc(-1 * var(--sp-8)) var(--sp-4) 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--radio-md);
  background: var(--bg-surface); box-shadow: var(--sombra-md);
}
.portada__tarjeta svg { flex: none; width: 26px; height: 26px; color: var(--text-brand); }
.portada__tarjeta strong { display: block; font: var(--font-heading-s); color: var(--text-heading); }
.portada__tarjeta span { font: var(--font-body-s); color: var(--text-subtle); }

@media (min-width: 900px) {
  .portada__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); }
  .portada__marco { aspect-ratio: 4 / 5; }
  .portada__tarjeta { position: absolute; left: calc(-1 * var(--sp-6)); bottom: var(--sp-8); margin: 0; max-width: 300px; }
}
@media (min-width: 1024px) { .portada { padding-top: calc(var(--cabecera-total) + var(--sp-16)); } }

/* ---------- Banda de cifras ---------- */
.banda-cifras { margin-top: var(--seccion); background: var(--bg-dark); color: var(--text-on-dark); }
.banda-cifras__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.banda-cifras__fila > div { display: flex; flex-direction: column; gap: var(--sp-1); }
.banda-cifras__num { font: var(--font-metric-s); color: var(--text-on-dark); }
.banda-cifras__txt { font: var(--font-body-s); color: var(--text-on-dark-subtle); }
@media (min-width: 768px) {
  .banda-cifras__fila { grid-template-columns: repeat(4, 1fr); }
  .banda-cifras__fila > div + div { padding-left: var(--sp-6); border-left: var(--borde-fino) solid var(--border-on-dark); }
}

/* ---------- Cabeza de sección ---------- */
.cabeza-seccion { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-12); }
.cabeza-seccion__lado { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: 46ch; }
.cabeza-seccion--centro { text-align: center; justify-items: center; }
.cabeza-seccion--centro .etiqueta { margin-inline: auto; }
@media (min-width: 1024px) {
  .cabeza-seccion { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; gap: var(--sp-10); }
  .cabeza-seccion--centro { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tratamientos ---------- */
.tratamientos { display: grid; gap: var(--sp-5); }
.tratamiento {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-8); background: var(--bg-surface);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tratamiento:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: var(--border-brand-soft); }
.tratamiento__icono {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--sp-2);
  border-radius: var(--radio-md); background: var(--bg-brand-soft); color: var(--text-brand);
}
.tratamiento__icono svg { width: 26px; height: 26px; }
.tratamiento h3 { font: var(--font-heading-s); font-size: 1.1875rem; }
.tratamiento p { font: var(--font-body-s); flex: 1; }
.tratamiento__desde { font: var(--font-label); color: var(--text-brand); }
@media (min-width: 640px) { .tratamientos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tratamientos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }

/* ---------- Los 3 pasos de la primera visita ---------- */
.pasos { position: relative; }
.pasos__linea { display: none; }
.pasos__lista { display: grid; gap: var(--sp-8); position: relative; z-index: 1; }

.paso { position: relative; display: grid; grid-template-columns: var(--paso-circulo) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.paso__figura { position: relative; grid-row: 1 / span 2; width: var(--paso-circulo); height: var(--paso-circulo); }
.paso__foto {
  width: 100%; height: 100%; border-radius: var(--radio-full); overflow: hidden;
  background: var(--bg-surface-raised);
  box-shadow: 0 0 0 4px var(--bg-page), 0 0 0 5px var(--border-brand-soft), var(--sombra-sm);
}
.paso__foto img { width: 100%; height: 100%; object-fit: cover; }
.paso__num {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 34px; height: 34px; padding: 0 var(--sp-2);
  display: grid; place-items: center; border-radius: var(--radio-full);
  background: var(--bg-brand-bold); color: var(--text-inverse);
  font: var(--font-label); box-shadow: 0 0 0 3px var(--bg-page);
}
.paso__texto h3 { font: var(--font-heading-m); margin-bottom: var(--sp-2); }
.paso__texto p { font: var(--font-body-m); }

/* Línea de unión vertical en móvil */
.paso::before {
  content: ''; position: absolute; z-index: -1;
  left: calc(var(--paso-circulo) / 2 - 1px); top: var(--paso-circulo);
  width: 2px; bottom: calc(-1 * var(--sp-8));
  border-left: var(--borde-grueso) dashed var(--border-brand-soft);
}
.paso:last-child::before { display: none; }

.pasos__nota { margin-top: var(--sp-10); text-align: center; font: var(--font-body-s); color: var(--text-subtle); }

@media (min-width: 1024px) {
  .pasos__linea {
    display: block; position: absolute; top: -22px; left: 0; width: 100%; height: 196px;
    stroke: var(--border-brand-soft); stroke-width: 2; stroke-dasharray: 7 9; fill: none;
    z-index: 0; pointer-events: none;
  }
  .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); align-items: start; }
  .paso { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; justify-items: center; text-align: center; gap: var(--sp-6); }
  .paso__figura { grid-row: auto; }
  .paso::before { display: none; }
  .paso__texto p { max-width: 34ch; margin-inline: auto; }
}

/* ---------- Razones para elegirnos ---------- */
.razones { display: grid; gap: var(--sp-10); align-items: start; }
.razones__texto p { margin-top: var(--sp-5); max-width: 42ch; }
.razones__lista { display: grid; gap: var(--sp-5); }
.razones__lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start;
  padding: var(--sp-6); background: var(--bg-surface);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md);
}
.razones__marca {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radio-full); background: var(--bg-brand-soft); color: var(--text-brand);
}
.razones__marca svg { width: 18px; height: 18px; stroke-width: 2.4; }
.razones__lista h3 { font: var(--font-heading-s); margin-bottom: var(--sp-1); }
.razones__lista p { font: var(--font-body-s); }
@media (min-width: 1024px) { .razones { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--sp-16); } }

/* ---------- Equipo ---------- */
.equipo { display: grid; gap: var(--sp-8); }
.profesional {
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra-sm);
}
.profesional__foto { aspect-ratio: 4 / 5; background: var(--bg-surface-raised); }
.profesional__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.profesional__datos { padding: var(--sp-6); }
.profesional h3 { font: var(--font-heading-s); font-size: 1.1875rem; }
.profesional__rol { margin-top: var(--sp-1); font: var(--font-label); color: var(--text-brand); }
.profesional__colegiado { margin-top: var(--sp-3); font: var(--font-body-s); color: var(--text-subtle); }
@media (min-width: 768px) { .equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }

/* ---------- Precios ---------- */
.precios { display: grid; gap: var(--sp-8) var(--sp-6); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8); background: var(--bg-surface);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.plan__nombre { font: var(--font-heading-m); }
.plan__desc { font: var(--font-body-s); }
.plan__precio { font: var(--font-body-s); color: var(--text-subtle); padding-bottom: var(--sp-6); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.plan__desde { display: block; font: var(--font-label); color: var(--text-subtle); margin-bottom: var(--sp-1); }
.plan__cifra { display: block; font: var(--font-metric-l); color: var(--text-heading); white-space: nowrap; }
.plan__lista { display: grid; gap: var(--sp-3); flex: 1; margin-bottom: var(--sp-2); }
.plan__lista li { position: relative; padding-left: var(--sp-8); font: var(--font-body-s); }
.plan__lista li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px;
  border-radius: var(--radio-full); background: var(--bg-brand-soft);
}
.plan__lista li::after {
  content: ''; position: absolute; left: 5px; top: 9px; width: 8px; height: 4px;
  border-left: var(--borde-grueso) solid var(--text-brand); border-bottom: var(--borde-grueso) solid var(--text-brand);
  transform: rotate(-45deg);
}
.plan--destacado { border-color: var(--bg-brand-bold); border-width: var(--borde-grueso); box-shadow: var(--sombra-md); }
.plan__insignia {
  position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-8);
  padding: var(--sp-1) var(--sp-4); border-radius: var(--radio-full);
  background: var(--bg-brand-bold); color: var(--text-inverse); font: var(--font-label);
}
.precios__otros {
  margin-top: var(--sp-10); padding: var(--sp-6) var(--sp-8);
  background: var(--bg-surface-raised); border-radius: var(--radio-lg);
}
.precios__otros h3 { font: var(--font-heading-s); margin-bottom: var(--sp-4); }
.precios__otros dl { display: grid; gap: var(--sp-3) var(--sp-8); margin: 0; }
.precios__otros div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: var(--borde-fino) solid var(--border-neutral); font: var(--font-body-s); }
.precios__otros dt { color: var(--text-neutral); }
.precios__otros dd { margin: 0; font-weight: 700; color: var(--text-heading); white-space: nowrap; }
.precios__nota { margin-top: var(--sp-6); font: var(--font-body-s); color: var(--text-subtle); }
@media (min-width: 640px) { .precios__otros dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .precios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan--destacado { transform: translateY(calc(-1 * var(--sp-4))); }
}

/* ---------- Opiniones ---------- */
.opiniones { display: grid; gap: var(--sp-6); }
.opinion {
  margin: 0; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-8); background: var(--bg-surface);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.opinion blockquote { margin: 0; flex: 1; color: var(--text-heading); font: var(--font-body-m); }
.opinion figcaption { display: flex; align-items: center; gap: var(--sp-3); }
.opinion__inicial {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radio-full);
  background: var(--bg-brand-soft); color: var(--text-brand); font: var(--font-heading-s);
}
.opinion figcaption strong { display: block; color: var(--text-heading); font: var(--font-body-s); font-weight: 700; }
.opinion figcaption span { font: var(--font-body-s); color: var(--text-subtle); }
.opiniones__nota { margin-top: var(--sp-8); text-align: center; font: var(--font-body-s); color: var(--text-subtle); }
@media (min-width: 1024px) { .opiniones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: var(--sp-8); }
.faq__lista { display: grid; gap: var(--sp-3); }
.faq__item {
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  border-radius: var(--radio-md); padding: 0 var(--sp-6);
}
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 44px; padding: var(--sp-5) 0; color: var(--text-heading); font: var(--font-body-m-strong);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: none; font: var(--font-heading-m); color: var(--text-brand); transition: transform var(--transicion); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: var(--sp-5); max-width: 62ch; font: var(--font-body-s); }
@media (min-width: 1024px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); } }

/* ---------- Banda de llamada a la acción ---------- */
.llamada { background: var(--bg-dark); color: var(--text-on-dark); padding: var(--seccion) 0; }
.llamada__contenido { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.llamada h2 { font: var(--font-heading-l); color: var(--text-on-dark); max-width: 20ch; }
.llamada p { margin-top: var(--sp-3); font: var(--font-body-l); color: var(--text-on-dark-subtle); max-width: 50ch; }
@media (min-width: 900px) { .llamada__contenido { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-10); } }

/* ---------- Horario, ubicación y contacto ---------- */
.contacto-bloque { display: grid; gap: var(--sp-10); align-items: start; }
.mapa { border-radius: var(--radio-lg); overflow: hidden; border: var(--borde-fino) solid var(--border-neutral); background: var(--bg-surface-raised); }
.mapa iframe { display: block; width: 100%; height: 320px; border: 0; }
.datos { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.datos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; font: var(--font-body-m); color: var(--text-heading); }
.datos svg { flex: none; color: var(--text-brand); margin-top: 2px; }
.datos a:hover { color: var(--text-brand); }
.datos strong { display: block; font: var(--font-heading-s); margin-bottom: var(--sp-1); }
.horario-tabla { margin-top: var(--sp-2); display: grid; gap: var(--sp-2); font: var(--font-body-s); color: var(--text-neutral); }
.horario-tabla div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: var(--borde-fino) solid var(--border-neutral); }
.horario-tabla div:last-child { border-bottom: 0; }
.horario-tabla dt { margin: 0; }
.horario-tabla dd { margin: 0; font-weight: 700; color: var(--text-heading); }
@media (min-width: 1024px) {
  .contacto-bloque { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-12); }
  .mapa iframe { height: 380px; }
}

/* ---------- Formulario ---------- */
.formulario {
  display: grid; gap: var(--sp-4); padding: var(--sp-6);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-sm);
}
.formulario h2 { font: var(--font-heading-m); }
.formulario__intro { font: var(--font-body-s); color: var(--text-neutral); margin-bottom: var(--sp-2); }
.formulario__fila { display: grid; gap: var(--sp-4); }
.formulario label { display: grid; gap: var(--sp-2); font: var(--font-label); color: var(--text-neutral); }
.formulario input:not([type="checkbox"]), .formulario select, .formulario textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); color: var(--text-heading);
  border: var(--borde-fino) solid var(--border-input); border-radius: var(--radio-sm);
  font: var(--font-body-m);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.formulario input:hover, .formulario select:hover, .formulario textarea:hover { border-color: var(--text-subtle); }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible {
  outline: var(--borde-grueso) solid var(--border-brand); outline-offset: 0; border-color: var(--border-brand);
}
.formulario .invalido { border-color: var(--text-danger); }
.formulario textarea { resize: vertical; }
.campo__ayuda { font: var(--font-body-s); font-weight: 400; color: var(--text-subtle); }
.casilla { display: flex !important; align-items: flex-start; gap: var(--sp-3) !important; font: var(--font-body-s) !important; color: var(--text-neutral) !important; }
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bg-brand-bold); }
.casilla.invalido span { color: var(--text-danger); }
.casilla a { color: var(--text-brand); text-decoration: underline; }
.formulario__error { font: var(--font-body-s); color: var(--text-danger); }
.formulario__legal { font: var(--font-body-s); color: var(--text-subtle); }
.formulario__legal strong { color: var(--text-neutral); font-weight: 700; }
.formulario__legal a { color: var(--text-neutral); text-decoration: underline; }
.formulario__ok { padding: var(--sp-6); border-radius: var(--radio-md); background: var(--bg-success-subtle); border: var(--borde-fino) solid var(--text-success); }
.formulario__ok strong { display: block; color: var(--text-heading); font: var(--font-heading-s); margin-bottom: var(--sp-1); }
.formulario__ok p { font: var(--font-body-s); }
@media (min-width: 640px) { .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .formulario { padding: var(--sp-8); } }

/* ---------- Pie ---------- */
.pie { background: var(--bg-dark); color: var(--text-on-dark-subtle); padding: var(--sp-16) 0 var(--sp-24); }   /* abajo, sitio para el botón del chat */
.pie__fila { display: grid; gap: var(--sp-8); }
.pie__fila > div { display: flex; flex-direction: column; gap: var(--sp-3); font: var(--font-body-s); }
.pie__fila h3 { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-dark); }
.pie__fila a:hover { color: var(--text-on-dark); }
.pie .logo { color: var(--text-on-dark); }
.pie .logo__texto span { color: var(--text-on-dark-subtle); }
.pie__marca p { max-width: 34ch; }
.redes { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.redes a { width: 44px; height: 44px; display: grid; place-items: center; border: var(--borde-fino) solid var(--border-on-dark); border-radius: var(--radio-full); transition: border-color var(--transicion), color var(--transicion); }
.redes a:hover { border-color: var(--text-on-dark); color: var(--text-on-dark); }
.redes svg { width: 18px; height: 18px; }
.pie__registro { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: var(--borde-fino) solid var(--border-on-dark); font: var(--font-body-s); }
.pie__legal { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3) var(--sp-6); font: var(--font-body-s); }
.pie__legal div { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
@media (min-width: 768px) { .pie__fila { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-6); } }

/* ---------- Páginas legales ---------- */
.pagina-legal { background: var(--bg-page); }
.pagina-legal .cabecera { position: sticky; }
.legal { padding: calc(var(--cabecera-alto) + var(--sp-10)) 0 var(--sp-16); }
.legal__contenedor { max-width: calc(var(--cont-estrecho) + 2 * var(--margen-lateral)); margin: 0 auto; padding: 0 var(--margen-lateral); }
.legal__titulo { font: var(--font-heading-l); }
.legal__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-12); }
.legal__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-5);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-full);
  font: var(--font-label); color: var(--text-neutral);
}
.legal__nav a:hover { color: var(--text-brand); border-color: var(--border-brand-soft); }
.legal__nav a[aria-current="page"] { background: var(--bg-brand-soft); color: var(--text-brand); border-color: var(--border-brand-soft); }
.legal__texto { font: var(--font-body-m); color: var(--text-neutral); }
.legal__texto > * + * { margin-top: var(--sp-4); }
.legal__texto h2 { margin-top: var(--sp-12); font: var(--font-heading-s); font-size: 1.25rem; color: var(--text-heading); }
.legal__texto p:first-child em { color: var(--text-subtle); font-style: normal; font: var(--font-body-s); }
.legal__texto strong { color: var(--text-heading); }
.legal__texto a { color: var(--text-brand); text-decoration: underline; text-underline-offset: 3px; }
.legal__texto ul { padding-left: var(--sp-6); list-style: disc; }
.legal__texto li + li { margin-top: var(--sp-2); }
.legal__tabla { overflow-x: auto; background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-md); }
.legal__tabla table { width: 100%; border-collapse: collapse; font: var(--font-body-s); }
.legal__tabla th, .legal__tabla td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: var(--borde-fino) solid var(--border-neutral); }
.legal__tabla th { background: var(--bg-surface-raised); color: var(--text-heading); font-weight: 700; }
.legal__tabla tr:last-child td { border-bottom: 0; }
.pie--legal { padding: var(--sp-10) 0 var(--sp-12); }

/* ---------- Aparición suave ---------- */
.revelar { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.revelar.visible { opacity: 1; transform: none; }
.sin-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revelar { opacity: 1; transform: none; }
  .menu.abierto > a, .menu.abierto .menu__pie { opacity: 1; transform: none; }
}

/* ---------- Chat de n8n (COMPONENTES/chat-web.md) ----------
   Van en body y no en :root: así ganan a los del widget aunque su hoja de
   estilos cargue después de la nuestra. Es una VENTANA encima de la web:
   la página de detrás no se oscurece, y la cabecera del chat nunca va
   entera del color de acento. */
body {
  --chat--color--primary: var(--bg-brand-bold);
  --chat--color--primary-shade-50: var(--bg-brand-hover);
  --chat--color--primary--shade-100: var(--bg-brand-hover);
  --chat--color--secondary: var(--bg-brand-bold);
  --chat--color-secondary-shade-50: var(--bg-brand-hover);
  --chat--color-white: var(--bg-surface);
  --chat--color-light: var(--bg-surface);
  --chat--color-dark: var(--text-heading);
  --chat--color-medium: var(--border-neutral);
  --chat--font-family: var(--font-cuerpo);
  --chat--border-radius: var(--radio-md);
  --chat--window--width: 380px;
  --chat--window--height: 560px;
  --chat--window--border: var(--borde-fino) solid var(--border-neutral);
  --chat--window--border-radius: var(--radio-lg);
  --chat--header--background: var(--bg-surface-raised);
  --chat--header--color: var(--text-heading);
  --chat--header-height: auto;
  --chat--body--background: var(--bg-surface);
  --chat--footer--background: var(--bg-surface);
  --chat--footer--border-top: var(--borde-fino) solid var(--border-neutral);
  --chat--message--bot--background: var(--bg-surface-raised);
  --chat--message--bot--color: var(--text-heading);
  --chat--message--user--background: var(--bg-brand-bold);
  --chat--message--user--color: var(--text-inverse);
  --chat--message--border-radius: var(--radio-md);
  --chat--input--background: var(--bg-surface);
  --chat--input--text-color: var(--text-heading);
  --chat--input--border: var(--borde-fino) solid var(--border-input);
  --chat--input--container--background: var(--bg-surface);   /* sin esto, la zona del botón enviar sale gris claro */
  --chat--input--container--border: var(--borde-fino) solid var(--border-neutral);
  --chat--input--send--button--color: var(--text-brand);
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--background-hover: var(--bg-brand-soft);
  --chat--input--send--button--color-hover: var(--bg-brand-hover);
  --chat--toggle--background: var(--bg-brand-bold);
  --chat--toggle--hover--background: var(--bg-brand-hover);
  --chat--toggle--active--background: var(--bg-brand-hover);
  --chat--toggle--color: var(--text-inverse);
  --chat--toggle--size: 60px;
}

/* Lo que el widget no deja cambiar con variables */
.chat-window { box-shadow: var(--sombra-lg); }
.n8n-chat .chat-layout .chat-header {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: 3px solid var(--bg-brand-bold);
  border-bottom: var(--borde-fino) solid var(--border-neutral);
}
.n8n-chat .chat-layout .chat-header::before {
  content: ''; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--radio-full);
  background: var(--chat-avatar) center / cover;
  box-shadow: 0 0 0 2px var(--bg-surface-raised), 0 0 0 3px var(--border-neutral);
}
.n8n-chat .chat-layout .chat-header .chat-heading { grid-column: 2; }
.n8n-chat .chat-layout .chat-header h1 { font: var(--font-heading-s); color: var(--text-heading); }
.n8n-chat .chat-layout .chat-header p {
  grid-column: 2; display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; font: var(--font-body-s); color: var(--text-neutral);
}
.n8n-chat .chat-layout .chat-header p::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--radio-full);
  background: var(--text-success); box-shadow: 0 0 0 3px var(--success-halo);
}
.n8n-chat .chat-footer .chat-aviso { margin: var(--sp-2) 0 0; font: var(--font-body-s); color: var(--text-subtle); text-align: center; }
.n8n-chat .chat-footer .chat-aviso a { color: var(--text-neutral); text-decoration: underline; }
.chat-window * { scrollbar-width: thin; scrollbar-color: var(--bg-surface-raised) transparent; }

/* ---------- Demo (01/10/2026): franja fija, avisos de ejemplo y hueco del mapa ----------
   Contraste: --text-on-dark #F6FAFC / --bg-dark #0C2B3C 14,02:1 (franja)
              --text-neutral / --bg-surface-raised: el de la propia web */
:root { --franja-demo: 36px; }
.franja-demo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--franja-demo);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--margen-lateral);
  background: var(--bg-dark); color: var(--text-on-dark); font: var(--font-body-s); font-weight: 600; text-align: center;
}
body { padding-top: var(--franja-demo); }
.cabecera { top: var(--franja-demo); }
html { scroll-padding-top: calc(var(--franja-demo) + var(--cabecera-total) + var(--sp-4)); }
@media (max-width: 1023.98px) { .menu.abierto { top: calc(var(--franja-demo) + var(--cabecera-total)); } }
.pagina-legal .cabecera { top: var(--franja-demo); }
.aviso-demo {
  display: inline-block; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border: var(--borde-fino) solid var(--border-neutral); border-radius: var(--radio-sm);
  background: var(--bg-surface-raised); color: var(--text-neutral); font: var(--font-body-s);
}
.mapa--demo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 220px; padding: var(--sp-8); text-align: center; color: var(--text-subtle); font: var(--font-body-s);
}
.mapa--demo svg { width: 32px; height: 32px; color: var(--text-brand); fill: none; stroke: currentColor; stroke-width: 1.8; }
.mapa--demo p { max-width: 32ch; }