/* =============================================================================
   Bloq Web Studio — Web base para negocios locales
   Unica hoja de estilos del sitio. Mobile-first. Sin @import, sin dependencias.

   INDICE
   0. Variables de marca (se rellenan desde CONFIGURACION.js)
   1. Tokens derivados
   1b. Modo oscuro (solo si marca.modoOscuro es 'auto')
   2. Fuentes
   3. Reset y base
   4. Tipografia
   5. Layout (contenedor, secciones, rejillas)
   6. Botones
   7. Navegacion (pildora)
   8. Hero
   9. Franja de confianza
  10. Tarjetas (servicios, ventajas, resenas)
  11. FAQ
  12. Formulario de contacto
  13. Bloques de contacto y mapa
  14. Paginas legales y 404
  15. Footer
  16. Animaciones de aparicion
  17. Utilidades
  18. Preferencias de movimiento e impresion
============================================================================= */

/* -----------------------------------------------------------------------------
   0. VARIABLES DE MARCA
   Estos seis valores NO se editan aqui: salen de la seccion "marca" de
   CONFIGURACION.js y los escribe "bash generar.sh".
-------------------------------------------------------------------------- */
:root {
  --color-acento: #1257A8;
  --color-acento-oscuro: #0E4483;
  --color-fondo: #FFFFFF;
  --color-texto: #1B2432;
  --radio: 14px;
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   1. TOKENS DERIVADOS — normalmente no hace falta tocarlos
-------------------------------------------------------------------------- */
:root {
  /* Color */
  --color-texto-suave: #5A6672;     /* 5.9:1 sobre blanco — AA */
  --color-superficie: #F5F8FB;
  --color-superficie-2: #ECF2F8;
  --color-borde: #E2E8F0;
  --color-borde-fuerte: #CBD5E1;
  /* Borde de controles interactivos (campos, boton secundario): WCAG 2.1
     SC 1.4.11 exige 3:1 minimo para los limites de un componente de interfaz. */
  --color-borde-control: #808D9E;   /* 3.4:1 sobre blanco, 3.2:1 sobre el gris */
  --color-acento-suave: #EAF1FA;
  --color-acento-texto: #fff;       /* texto de los botones sobre --color-acento */
  --color-estrella: #C77700;        /* estrellas de valoracion — 4.6:1 sobre blanco */
  --color-error: #B3261E;
  --color-error-fondo: #FDF2F1;
  --color-exito: #1B6B45;
  --color-exito-fondo: #EFF7F2;
  --color-aviso-fondo: #FFF8E6;
  --color-aviso-borde: #E5C97B;
  --color-aviso-texto: #6A4E06;      /* 7.3:1 sobre --color-aviso-fondo — AAA */

  /* Espaciado (escala 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96) */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e6: 24px;
  --e8: 32px; --e12: 48px; --e16: 64px; --e20: 80px; --e24: 96px;

  /* Radios */
  --radio-s: calc(var(--radio) * 0.5);
  --radio-l: calc(var(--radio) * 1.6);
  --radio-pill: 999px;

  /* Sombras (muy sutiles) */
  --sombra-1: 0 1px 2px rgba(20, 32, 48, .05), 0 1px 3px rgba(20, 32, 48, .04);
  --sombra-2: 0 4px 14px rgba(20, 32, 48, .07), 0 1px 3px rgba(20, 32, 48, .04);
  --sombra-3: 0 12px 30px rgba(20, 32, 48, .11), 0 2px 6px rgba(20, 32, 48, .05);

  /* Layout */
  --ancho: 1160px;
  --ancho-texto: 68ch;
  --nav-top: 12px;
  --nav-alto: 62px;

  /* Movimiento */
  --dur-rapida: 150ms;
  --dur: 220ms;
  --dur-lenta: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -----------------------------------------------------------------------------
   1b. MODO OSCURO
   Solo se emite si marca.modoOscuro es 'auto'. El generador ya ha calculado
   el acento adaptado (y el color de su texto) para que contrasten bien
   contra este fondo: aqui SOLO se redefinen tokens, ninguna regla de layout.
   Las sombras casi no se ven en oscuro, asi que se convierten en un borde de
   1px (mismo token --sombra-*, sin tocar donde se usa).
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #12161C;
    --color-texto: #E7ECF2;
    --color-texto-suave: #A9B4C0;
    --color-superficie: #1A2029;
    --color-superficie-2: #222A35;
    --color-borde: #2C3542;
    --color-borde-fuerte: #5C6B7D;
    --color-borde-control: #828FA3;
    --color-acento: #247ee8;
    --color-acento-oscuro: #247ee8;
    --color-acento-suave: rgba(36, 126, 232, 0.18);
    --color-acento-texto: #12161C;
    --color-error: #FF7B72;
    --color-error-fondo: #3A2020;
    --color-exito: #5FD98A;
    --color-exito-fondo: #1C3327;
    --color-aviso-fondo: #3A2F10;
    --color-aviso-borde: #8A6B2E;
    --color-aviso-texto: #F0C766;    /* 8.2:1 sobre --color-aviso-fondo — AAA */

    --sombra-1: 0 0 0 1px var(--color-borde);
    --sombra-2: 0 0 0 1px var(--color-borde-fuerte);
    --sombra-3: 0 0 0 1px var(--color-borde-fuerte);
  }

  /* El mapa estatico tiene fondo blanco y canta mucho sobre fondo oscuro. */
  .mapa img, .pie__mapa img { filter: brightness(.82) contrast(1.05); }
}

/* -----------------------------------------------------------------------------
   2. FUENTES (auto-alojadas, woff2, variable 400–800)
-------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   3. RESET Y BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-top) + var(--nav-alto) + var(--e6));
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;             /* 17px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
li { list-style: none; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-acento-oscuro); }

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

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

/* Enlace de salto: solo visible al tabular */
.skip-link {
  position: absolute;
  top: var(--e2);
  left: var(--e2);
  z-index: 200;
  padding: var(--e3) var(--e4);
  background: var(--color-fondo);
  border: 2px solid var(--color-acento);
  border-radius: var(--radio-s);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   4. TIPOGRAFIA
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;   /* una palabra larguisima nunca desborda */
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 1.42rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.32rem + 1.25vw, 2.25rem); }
h3 { font-size: clamp(1.18rem, 1.1rem + 0.35vw, 1.375rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

p { text-wrap: pretty; }
p + p { margin-top: var(--e4); }

strong, b { font-weight: 700; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--e3);
  color: var(--color-acento);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--color-texto-suave);
  max-width: var(--ancho-texto);
}

.seccion__intro { max-width: 62ch; margin-bottom: var(--e8); }
.seccion__intro p { margin-top: var(--e3); color: var(--color-texto-suave); }
.seccion--centrada .seccion__intro { margin-left: auto; margin-right: auto; text-align: center; }

/* -----------------------------------------------------------------------------
   5. LAYOUT
-------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - (2 * var(--e4)), var(--ancho));
  margin-inline: auto;
}

.pagina { padding-top: calc(var(--nav-top) + var(--nav-alto) + var(--e4)); }
/* Primera seccion de las paginas interiores: respira sin dejar un hueco enorme */
.seccion--primera { padding-top: var(--e8); }

.seccion { padding-block: var(--e16); }
.seccion--compacta { padding-block: var(--e12); }
.seccion--gris { background: var(--color-superficie); }
.seccion + .seccion--gris,
.seccion--gris + .seccion { border-top: 1px solid var(--color-borde); }

.rejilla { display: grid; gap: var(--e4); }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .contenedor { width: min(100% - (2 * var(--e8)), var(--ancho)); }
  .rejilla { gap: var(--e6); }
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .seccion { padding-block: var(--e20); }
}
@media (min-width: 1024px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .seccion { padding-block: var(--e24); }
  .seccion--primera { padding-top: var(--e12); }
}

/* -----------------------------------------------------------------------------
   6. BOTONES
-------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e6);
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn svg { flex: none; }

.btn--primario {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-acento-texto);
  box-shadow: var(--sombra-1);
}
.btn--primario:hover {
  background: var(--color-acento-oscuro);
  border-color: var(--color-acento-oscuro);
  color: var(--color-acento-texto);
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}
.btn--primario:active { transform: translateY(0); }

.btn--secundario {
  background: var(--color-fondo);
  border-color: var(--color-borde-control);
  color: var(--color-texto);
}
.btn--secundario:hover {
  border-color: var(--color-acento);
  color: var(--color-acento);
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}
.btn--secundario:active { transform: translateY(0); }

.btn--fantasma { background: transparent; border-color: transparent; color: var(--color-acento); }
.btn--fantasma:hover { background: var(--color-acento-suave); }

.btn--bloque { width: 100%; }
.btn--grande { min-height: 56px; padding-inline: var(--e8); font-size: 1.0625rem; }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.enlace-flecha svg { transition: transform var(--dur) var(--ease); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* -----------------------------------------------------------------------------
   7. NAVEGACION (pildora flotante)
-------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--nav-top) var(--e4);
  pointer-events: none;                 /* solo la pildora recibe clics */
}
.cabecera > * { pointer-events: auto; }

.nav__pildora {
  width: min(100%, var(--ancho));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e2) var(--e2) var(--e4);
  background: var(--color-fondo);       /* fallback solido */
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--dur) var(--ease);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .nav__pildora {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}
.nav__pildora.esta-desplazada { box-shadow: var(--sombra-3); }
.nav__pildora.esta-abierta { border-radius: var(--radio-l); }

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-right: auto;
  min-height: 44px;
  padding-right: var(--e2);
  color: var(--color-texto);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__logo:hover { color: var(--color-texto); }
.nav__logo-marca { flex: none; width: 30px; height: 30px; border-radius: 9px; }
.nav__logo-texto { overflow: hidden; text-overflow: ellipsis; }

/* Boton hamburguesa (solo movil y solo con JS) */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__toggle:hover { background: var(--color-superficie); border-color: var(--color-borde-fuerte); }
:root.js .nav__toggle { display: inline-flex; }

.nav__burger { position: relative; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-texto);
  transition: transform var(--dur) var(--ease), opacity var(--dur-rapida) var(--ease);
}
.nav__burger span:nth-child(1) { top: 1px; }
.nav__burger span:nth-child(2) { bottom: 1px; }
.esta-abierta .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.esta-abierta .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* Panel de enlaces.
   Sin JS: visible siempre (la pildora nace expandida y los enlaces se usan igual).
   Con JS: colapsado hasta pulsar la hamburguesa. La clase `js` la pone un script
   de una linea en el <head>, asi que no hay parpadeo. */
.nav__menu {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  width: 100%;
  padding: var(--e3) var(--e2) var(--e2);
}
:root.js .nav__menu { display: none; }
:root.js .esta-abierta .nav__menu {
  display: flex;
  animation: menu-entra var(--dur) var(--ease) both;
}
@keyframes menu-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nav__enlaces { display: flex; flex-direction: column; gap: var(--e1); width: 100%; }

.nav__enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-pill);
  color: var(--color-texto);
  font-size: 0.9688rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__enlace:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.nav__enlace[aria-current='page'] { background: var(--color-acento-suave); color: var(--color-acento-oscuro); }

.nav__cta { width: 100%; margin-top: var(--e2); min-height: 44px; }

/* Selector de idioma (solo aparece si la web tiene mas de un idioma activo) */
.nav__idiomas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }
.nav__idiomas a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pill);
  color: var(--color-texto-suave);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__idiomas a:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.nav__idiomas a[aria-current='true'] { background: var(--color-acento-suave); color: var(--color-acento-oscuro); }

@media (min-width: 1024px) {
  :root { --nav-top: 16px; }
  .cabecera { padding-inline: var(--e8); }
  .nav__pildora { flex-wrap: nowrap; padding: var(--e2) var(--e2) var(--e2) var(--e6); }
  .nav__toggle, :root.js .nav__toggle { display: none; }
  .nav__menu, :root.js .nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--e2);
    width: auto;
    padding: 0;
    animation: none;
  }
  .nav__enlaces { flex-direction: row; width: auto; gap: var(--e1); }
  .nav__cta { width: auto; margin-top: 0; margin-left: var(--e3); }
  .nav__logo { margin-right: var(--e6); }
}

/* -----------------------------------------------------------------------------
   8. HERO
-------------------------------------------------------------------------- */
.hero { padding-top: var(--e2); padding-bottom: var(--e12); }
.hero__rejilla { display: grid; gap: var(--e8); align-items: center; }
.hero__contenido { max-width: 40rem; }
.hero h1 { margin-bottom: var(--e4); }
.hero .lead { margin-bottom: var(--e6); }

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.hero__acciones .btn { flex: 1 1 auto; min-width: 13.5rem; }

.hero__apunte {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e6);
  color: var(--color-texto-suave);
  font-size: 0.9375rem;
}
.hero__apunte svg { flex: none; color: var(--color-acento); }

.hero__figura { margin: 0; }
.hero__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-2);
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--e6); padding-bottom: var(--e16); }
  .hero__rejilla { grid-template-columns: 1.05fr 1fr; gap: var(--e16); }
  .hero__acciones .btn { flex: 0 1 auto; }
}

/* -----------------------------------------------------------------------------
   9. FRANJA DE CONFIANZA
-------------------------------------------------------------------------- */
.confianza {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
  padding: var(--e6);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
}
.confianza__dato { text-align: center; padding-block: var(--e3); }
.confianza__cifra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.confianza__etiqueta { color: var(--color-texto-suave); font-size: 0.9375rem; }
.estrellas { display: inline-flex; gap: 2px; color: var(--color-estrella); }
.estrellas svg { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .confianza { grid-template-columns: repeat(3, 1fr); padding: var(--e8) var(--e6); }
  .confianza__dato + .confianza__dato { border-left: 1px solid var(--color-borde); }
}

/* -----------------------------------------------------------------------------
   10. TARJETAS
-------------------------------------------------------------------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--e6);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--color-borde-fuerte); }
.tarjeta h3 { margin-bottom: var(--e2); }
.tarjeta p { color: var(--color-texto-suave); }
.tarjeta__pie { margin-top: auto; padding-top: var(--e4); }

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--e4);
  background: var(--color-acento-suave);
  border-radius: var(--radio-s);
  color: var(--color-acento);
}
.tarjeta__icono svg { width: 24px; height: 24px; }

/* Ventajas: sin caja, mas ligeras */
.ventaja { display: flex; gap: var(--e4); }
.ventaja__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--color-acento-suave);
  border-radius: var(--radio-pill);
  color: var(--color-acento);
}
.ventaja__icono svg { width: 22px; height: 22px; }
.ventaja h3 { margin-bottom: var(--e1); }
.ventaja p { color: var(--color-texto-suave); font-size: 1rem; }

/* Resenas */
.resena { display: flex; flex-direction: column; gap: var(--e3); }
.resena__texto { color: var(--color-texto); font-size: 1rem; }
.resena__autor { display: flex; align-items: center; gap: var(--e3); margin-top: auto; padding-top: var(--e4); }
.resena__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--color-superficie-2);
  border-radius: var(--radio-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
}
.resena__nombre { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.resena__fecha { color: var(--color-texto-suave); font-size: 0.8125rem; }

/* Bloque CTA final */
.cta-final {
  padding: var(--e12) var(--e6);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  text-align: center;
}
.cta-final p { max-width: 52ch; margin: var(--e3) auto 0; color: var(--color-texto-suave); }
.cta-final__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e8);
}
.cta-final__acciones .btn { flex: 1 1 auto; min-width: 13.5rem; }
@media (min-width: 768px) {
  .cta-final { padding: var(--e16) var(--e12); }
  .cta-final__acciones .btn { flex: 0 1 auto; }
}

/* -----------------------------------------------------------------------------
   11. FAQ (details/summary nativos)
-------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--e3); max-width: 52rem; }

.faq__item {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item:hover { border-color: var(--color-borde-fuerte); }
.faq__item[open] { border-color: var(--color-acento); box-shadow: var(--sombra-1); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 56px;
  padding: var(--e4) var(--e6);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ''; }
.faq__pregunta:hover { color: var(--color-acento); }

.faq__signo { flex: none; width: 22px; height: 22px; color: var(--color-acento); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__signo { transform: rotate(180deg); }

.faq__respuesta { padding: 0 var(--e6) var(--e6); color: var(--color-texto-suave); }
.faq__item[open] .faq__respuesta { animation: faq-entra var(--dur) var(--ease) both; }
@keyframes faq-entra {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   12. FORMULARIO
-------------------------------------------------------------------------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  padding: var(--e6);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
}
@media (min-width: 768px) { .formulario { padding: var(--e8); } }

.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo label { font-size: 0.9375rem; font-weight: 600; }
.campo__ayuda { color: var(--color-texto-suave); font-size: 0.875rem; }

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e3) var(--e4);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde-control);
  border-radius: var(--radio-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo textarea:hover { border-color: var(--color-texto-suave); }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px var(--color-acento-suave);
}
.campo input[aria-invalid='true'], .campo textarea[aria-invalid='true'] { border-color: var(--color-error); }

.campo__error { color: var(--color-error); font-size: 0.875rem; font-weight: 600; }
.campo__error:empty { display: none; }

.campo--check { flex-direction: row; align-items: flex-start; gap: var(--e3); }
.campo--check input[type='checkbox'] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--color-acento);
  cursor: pointer;
}
/* La casilla se dibuja a 24 px (minimo de WCAG 2.2), pero el area pulsable real
   es su etiqueta, que se mantiene siempre por encima de 44 px de alto. */
.campo--check label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.campo--check .campo__error { flex-basis: 100%; }

/* Honeypot: oculto para humanos, alcanzable para bots */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.formulario__aviso {
  padding: var(--e4) var(--e6);
  border-radius: var(--radio-s);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  font-size: 0.9375rem;
}
.formulario__aviso:empty { display: none; }
.formulario__aviso--exito { border-color: var(--color-exito); background: var(--color-exito-fondo); color: var(--color-exito); }
.formulario__aviso--error { border-color: var(--color-error); background: var(--color-error-fondo); color: var(--color-error); }
.formulario__aviso a { color: inherit; font-weight: 700; }

/* El widget de Turnstile mide 300 px fijos y no se puede encoger. En pantallas
   estrechas le devolvemos el padding del formulario para que quepa sin provocar
   scroll horizontal. */
.turnstile { display: flex; justify-content: center; min-height: 65px; }
@media (max-width: 430px) {
  .turnstile { margin-inline: calc(var(--e6) * -1); }
}

/* -----------------------------------------------------------------------------
   13. CONTACTO Y MAPA
-------------------------------------------------------------------------- */
.contacto__rejilla { display: grid; gap: var(--e8); align-items: start; }
@media (min-width: 1024px) { .contacto__rejilla { grid-template-columns: 1.15fr 1fr; gap: var(--e16); } }

.datos { display: flex; flex-direction: column; gap: var(--e6); }
.dato { display: flex; gap: var(--e4); }
.dato__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--color-acento-suave);
  border-radius: var(--radio-pill);
  color: var(--color-acento);
}
.dato__icono svg { width: 20px; height: 20px; }
.dato h3 { font-size: 1rem; margin-bottom: 2px; }
.dato p, .dato address { color: var(--color-texto-suave); font-size: 0.9688rem; font-style: normal; }
.dato a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.horario { display: flex; flex-direction: column; gap: var(--e1); }
.horario__fila { display: flex; justify-content: space-between; gap: var(--e4); font-size: 0.9688rem; }
.horario__fila dt { color: var(--color-texto-suave); }
.horario__fila dd { margin: 0; font-weight: 600; }

.mapa { display: block; border-radius: var(--radio-l); overflow: hidden; border: 1px solid var(--color-borde); }
.mapa img { width: 100%; height: auto; transition: transform var(--dur-lenta) var(--ease); }
.mapa:hover img { transform: scale(1.02); }

/* -----------------------------------------------------------------------------
   14. PAGINAS LEGALES Y 404
-------------------------------------------------------------------------- */
.legal { max-width: var(--ancho-texto); }
.legal h2 { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem); margin-top: var(--e12); margin-bottom: var(--e3); }
.legal h3 { margin-top: var(--e6); margin-bottom: var(--e2); }
.legal p, .legal ul { color: var(--color-texto-suave); }
.legal ul { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.legal li { padding-left: var(--e6); position: relative; }
.legal li::before {
  content: '';
  position: absolute;
  left: var(--e2);
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-acento);
}
.legal__actualizado { margin-top: var(--e8); font-size: 0.9375rem; color: var(--color-texto-suave); }

.error404 { text-align: center; padding-block: var(--e20); }
.error404__codigo {
  font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-acento);
  letter-spacing: -0.04em;
}
.error404 p { max-width: 48ch; margin: var(--e4) auto 0; color: var(--color-texto-suave); }
.error404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); margin-top: var(--e8); }

/* -----------------------------------------------------------------------------
   15. FOOTER
-------------------------------------------------------------------------- */
.pie {
  margin-top: var(--e16);
  padding-block: var(--e16) var(--e8);
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
}
.pie__rejilla { display: grid; gap: var(--e12); }
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: repeat(2, 1fr); gap: var(--e8); } }
@media (min-width: 1024px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e8); } }

.pie h2 { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--e4); }
.pie__marca { display: inline-flex; align-items: center; min-height: 44px; gap: var(--e2); margin-bottom: var(--e4); font-size: 1.0625rem; font-weight: 800; color: var(--color-texto); text-decoration: none; }
.pie__marca img { width: 30px; height: 30px; border-radius: 9px; }
.pie p, .pie address, .pie li { color: var(--color-texto-suave); font-size: 0.9688rem; font-style: normal; }
.pie ul { display: flex; flex-direction: column; gap: var(--e2); }
.pie a { color: var(--color-texto-suave); text-decoration: none; }
.pie a:hover { color: var(--color-acento); text-decoration: underline; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; }

.pie__mapa { display: block; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--color-borde); }
.pie__mapa img { width: 100%; height: auto; }

.pie__redes { flex-direction: row; gap: var(--e2); margin-top: var(--e4); }
.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pill);
  color: var(--color-texto-suave);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pie__redes a:hover { color: var(--color-acento); border-color: var(--color-acento); transform: translateY(-2px); }
.pie__redes svg { width: 20px; height: 20px; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-top: var(--e12);
  padding-top: var(--e6);
  border-top: 1px solid var(--color-borde);
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}
.pie__legal ul { flex-direction: row; flex-wrap: wrap; gap: var(--e4); }
.pie__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; }
.pie__legal a[aria-current='true'] { color: var(--color-texto); font-weight: 700; }

/* -----------------------------------------------------------------------------
   16. ANIMACIONES DE APARICION
   El estado oculto SOLO existe si <html> tiene la clase `js`. Sin JS todo es
   visible. Ademas, la animacion de seguridad `revelar-red` muestra el contenido
   a los 4 s aunque main.js no llegue a cargarse nunca.
-------------------------------------------------------------------------- */
:root.js .revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease);
  animation: revelar-red 1ms linear 4s forwards;
}
:root.js .revelar--d1 { transition-delay: 80ms; }
:root.js .revelar--d2 { transition-delay: 160ms; }
:root.js .revelar.es-visible { opacity: 1; transform: none; animation: none; }
@keyframes revelar-red { to { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
   17. UTILIDADES
-------------------------------------------------------------------------- */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.centrado { text-align: center; }
.sin-js-aviso {
  display: block;
  padding: var(--e4) var(--e6);
  background: var(--color-aviso-fondo);
  border: 1px solid var(--color-aviso-borde);
  border-radius: var(--radio-s);
  color: var(--color-aviso-texto);
  font-size: 0.9375rem;
}

/* -----------------------------------------------------------------------------
   18. PREFERENCIAS DE MOVIMIENTO E IMPRESION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  :root.js .revelar { opacity: 1; transform: none; animation: none; }
  .btn:hover, .tarjeta:hover, .pie__redes a:hover { transform: none; }
  .mapa:hover img { transform: none; }
}

@media print {
  .cabecera, .pie__redes, .btn, .mapa { display: none; }
  body { color: #000; font-size: 11pt; }
  .pagina { padding-top: 0; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* Enlace al perfil de Google bajo las resenas */
.mas-resenas { margin-top: var(--e8); text-align: center; }

/* En /servicios/ cada tarjeta es un bloque de primer nivel: su titulo es un h2
   con el mismo aspecto que los h3 de las demas tarjetas. */
.tarjeta__titulo {
  font-size: clamp(1.18rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 700;
  margin-bottom: var(--e2);
}
.resena__texto { margin: 0; }

/* Pie: separar el bloque de horario de la direccion y que quepa en una linea */
.pie address { margin-bottom: var(--e4); }
.pie__titulo-horario { margin-top: var(--e6); }
.pie .horario__fila { font-size: 0.875rem; gap: var(--e3); }