/* =============================================================================
   PPAM — hoja de estilos de la web (hecha a mano, fuera del motor)

   Sale del <style> de la web antigua (original/web-antigua/index.html,
   líneas 39-1217), con LOS MISMOS NOMBRES DE CLASE para poder compararla
   con la original. Cambios respecto a la antigua: capturas/CAMBIOS-VISIBLES.md.

   ÍNDICE
     0. Fuentes (archivos propios, nunca Google Fonts)
     1. Colores (variables) — claro
     2. Colores — modo oscuro (solo redefine variables)
     3. Base, accesibilidad (foco, saltar al contenido)
     4. Botón flotante de WhatsApp
     5. Barra superior (logo + idiomas)
     6. Portada (hero)
     7. Fila de píldoras
     8. Secciones: comunes
     9. Servicios: bloque azul, desplegables y tarjetas
    10. Valores
    11. Garantías ("Todo en regla")
    12. Reseñas
    13. Idiomas
    14. Bloque final de contacto
    15. Pie
    16. Páginas de texto (aviso legal, privacidad) y 404
    17. Móvil (hasta 600 px)
    17b. Escritorio (desde 1024 px)
    18. Reducir movimiento

   REGLA: ningún color en hexadecimal fuera de las secciones 1 y 2. Todo
   color nuevo, como variable. Así el modo oscuro sale solo (bash comprobar.sh
   lo vigila).
   ========================================================================== */

/* 0. FUENTES ----------------------------------------------------------------
   Archivo Black se declara con peso 400, como la servía Google Fonts: los
   titulares piden 900 y el navegador la engruesa igual que en la web antigua. */
@font-face {
  font-family: 'Archivo Black';
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url("/assets/fonts/bebas-neue-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url("/assets/fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* 1. COLORES — CLARO ------------------------------------------------------- */
:root {
  /* Paleta de la web antigua (no cambia entre claro y oscuro) */
  --navy: #0f1a4e;
  --navy-dark: #080e2e;
  --navy-pie: #05081a;
  --navy-profundo: #071247;
  --violeta-noche: #120f2f;
  --gold: #e8a820;
  --orange: #f05a28;
  --cyan: #00c5d0;
  --purple: #7b3fe4;
  --rosa: #e94f8a;
  --azul-bloque: #0757b8;
  --azul-info: #2f7dff;
  --rojo-urgente: #c81424;
  --white: #ffffff;
  --negro-hero: #050505;
  --titular: #f4f4f1;
  --titular-span: #f1f1ee;
  --titular-borde: #151515;
  --titular-sombra-1: #2b2b2b;
  --titular-sombra-2: #111111;
  --wa-green: #25D366;
  --wa-dark: #128C7E;

  /* Colores con papel (estos SÍ cambian en modo oscuro) */
  --superficie: #ffffff;          /* fondo de Servicios, Garantías, Reseñas */
  --superficie-2: #f8f7f2;        /* crema: fondo general, Idiomas, desplegables */
  --superficie-tarjeta: #ffffff;  /* tarjeta de reseña, banderitas */
  --borde-suave: #eceef2;
  --texto-fuerte: #111827;
  --texto-cuerpo: #4b5563;
  --texto-titulo: #0f1a4e;
  --texto-antetitulo: #c8461a;    /* antes #f05a28: 3,4:1 sobre blanco; ahora 4,8:1 */
  --titulo-bloque-abierto: #05081a;
  --subtitulo-bloque-abierto: rgba(5,8,26,0.62);
  --estrella: #9a6800;             /* estrellas de la reseña: 4,8:1 sobre blanco */

  color-scheme: light;
}

/* 2. COLORES — MODO OSCURO --------------------------------------------------
   Solo se redefinen variables (nunca reglas nuevas para el mismo selector:
   trampa 10 de CONTEXTO-DEL-PROYECTO.md). Las secciones que ya eran oscuras
   (portada, valores, bloque final, pie) no cambian. */
@media (prefers-color-scheme: dark) {
  :root {
    --superficie: #0b1236;
    --superficie-2: #080d2a;
    --superficie-tarjeta: #121b4a;
    --borde-suave: #26316a;
    --texto-fuerte: #eceef2;
    --texto-cuerpo: #c3c8d6;
    --texto-titulo: #f4f4f1;
    --texto-antetitulo: #ff8f63;
    --titulo-bloque-abierto: #f4f4f1;
    --subtitulo-bloque-abierto: rgba(244,244,241,0.72);
    --estrella: #e8a820;
    color-scheme: dark;
  }
}

/* 3. BASE ------------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--superficie-2);
  color: var(--texto-fuerte);
  overflow-x: hidden;   /* red de seguridad; la web no depende de ella (prueba A9) */
}

img { max-width: 100%; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(232,168,32,0.22);
}

.service-group summary:focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 5px rgba(232,168,32,0.55);
}

/* Enlace "Saltar al contenido": solo aparece al llegar con el tabulador */
.saltar {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 10000;
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 900;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* El atributo "hidden" del <svg class="iconos"> (los símbolos reutilizables,
   como el de WhatsApp) no basta en Chrome para sacarlo del flujo: se queda
   como línea de texto vacía de 0×0 y añade una franja del color de fondo
   encima de la barra superior (hallazgo H1, 25/09/2026). Con position:
   absolute deja de ocupar espacio en el documento. */
.iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.emoji { font-style: normal; }

/* 4. BOTÓN FLOTANTE DE WHATSAPP -------------------------------------------- */
.wa-sticky {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa-green);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 50px;
  box-shadow: 0 6px 28px rgba(37,211,102,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-sticky:hover { transform: scale(1.05); box-shadow: 0 8px 36px rgba(37,211,102,0.65); }
.wa-sticky svg { width: 24px; height: 24px; fill: var(--white); flex-shrink: 0; }
.wa-label { display: inline-block; }

/* 5. BARRA SUPERIOR ---------------------------------------------------------- */
.lang-bar {
  background: var(--navy-dark);
  padding: 8px 24px 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12);
}
.header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.header-logo img {
  width: auto;
  height: 44px;
  display: block;
}
.lang-bar-phone {
  display: none;
  color: rgba(255,255,255,0.85);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.lang-bar-phone:hover,
.lang-bar-phone:focus-visible { color: var(--gold); }
.lang-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.lang-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.lang-btn.active, .lang-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-dark);
}
/* Banderas en SVG (los emojis de bandera no se ven en Windows) */
.bandera {
  display: inline-block;
  width: 17px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

/* 6. PORTADA ----------------------------------------------------------------- */
.hero {
  --hero-bg-y: 50%;
  background-color: var(--negro-hero);
  /* Reserva para navegadores sin image-set() (T1): JPG normal. La segunda
     declaración la sustituye entera en cuanto el navegador entiende
     image-set(); si no la entiende, esta declaración se queda tal cual. */
  background-image: url("/assets/img/portada.jpg");
  background-image: image-set(
    url("/assets/img/portada.avif") type("image/avif"),
    url("/assets/img/portada.webp") type("image/webp"),
    url("/assets/img/portada.jpg") type("image/jpeg"));
  background-position: center var(--hero-bg-y);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  overflow: hidden;
  padding: 60px 24px 80px;
  text-align: center;
}

/* Vídeo de fondo (opcional, apagado por defecto): capas de atrás hacia
   delante = foto (background-image de .hero, arriba) → vídeo → velo negro
   (antes iba mezclado en el background-image; ahora es un pseudo-elemento
   para que tape también al vídeo) → contenido. Con el vídeo apagado esto
   no cambia nada visible: la foto se ve exactamente igual que antes. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.32);
  pointer-events: none;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-video.esta-activo { opacity: 1; }

.hero-video-pausa {
  position: absolute;
  z-index: 2;
  /* Arriba-izquierda (no abajo-izquierda): ahí es donde va el monigote
     decorativo (6b), y así nunca se tapan (hallazgo previsto, Fase 5). */
  left: 16px;
  top: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  background: rgba(5,8,26,0.55);
  color: rgba(255,255,255,0.92);
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.hero-video-pausa:hover { background: rgba(5,8,26,0.75); }

/* 6b. MONIGOTE DECORATIVO ----------------------------------------------------
   Debajo y a la izquierda del botón verde, inclinado. Variable única para
   poder retocar el ángulo desde un solo sitio. position:absolute: no empuja
   nada ni mueve la página (CLS 0). pointer-events:none: no roba clics al
   botón. También visible en móvil (más pequeño), decisión de Valentín
   27/09/2026: no hace falta que respete el borde izquierdo del resto. */
.hero-monigote {
  --monigote-giro: -40deg;
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  width: 54px;
  height: auto;
  pointer-events: none;
  transform: rotate(var(--monigote-giro));
  transform-origin: center;
}
.hero-monigote img { display: block; width: 100%; height: auto; }

/* El resto del contenido de la portada, siempre encima del velo. Se excluyen
   el vídeo, su botón de pausa y el monigote: cada uno lleva su propia
   posición y z-index (arriba / sección 6b). */
.hero > :not(.hero-video):not(.hero-video-pausa):not(.hero-monigote) {
  position: relative;
  z-index: 2;
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.logo-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: 92vw;
  height: 230px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.84) 30%,
    rgba(255,255,255,0.46) 54%,
    rgba(255,255,255,0.18) 72%,
    rgba(255,255,255,0) 100%);
  border-radius: 999px;
  box-shadow: 0 0 55px rgba(255,255,255,0.28);
  z-index: 0;
  pointer-events: none;
}
.logo-wrap img {
  height: 125px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
}

.hero h1 {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 6.6vw, 78px);
  line-height: 1.02;
  color: var(--titular);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-shadow:
    -2px -2px 0 var(--titular-borde),
    0 -2px 0 var(--titular-borde),
    2px -2px 0 var(--titular-borde),
    -2px 0 0 var(--titular-borde),
    2px 0 0 var(--titular-borde),
    -2px 2px 0 var(--titular-borde),
    0 2px 0 var(--titular-borde),
    2px 2px 0 var(--titular-borde),
    4px 4px 0 var(--titular-sombra-1),
    7px 7px 0 var(--titular-sombra-2),
    10px 12px 20px rgba(0,0,0,0.58);
}
.hero h1 span {
  color: var(--titular-span);
  display: inline-block;
}
.hero h1 .hero-title-line {
  display: block;
  /* Antes "nowrap": en móviles de 320 px el titular se cortaba por el borde
     (ya pasaba en la web antigua en español). Ahora cada línea solo se parte
     si no cabe; donde cabe, se ve exactamente igual. */
  white-space: normal;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(16px, 3vw, 22px);
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  margin-bottom: 8px;
}
.hero-sub strong {
  font-weight: 900;
  color: rgba(255,255,255,0.9);
}
.hero-location {
  font-size: 19px;
  font-weight: 800;
  color: rgba(255,255,255,0.8);   /* antes 0.5: poco legible sobre la foto */
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-location svg { width: 20px; height: 20px; fill: var(--cyan); flex-shrink: 0; }

.hero-info {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 10px 22px;
  border: 2px solid var(--azul-info);
  border-radius: 8px;
  background: rgba(15,54,128,0.34);
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  box-shadow: 0 0 24px rgba(47,125,255,0.16);
  position: relative;
  z-index: 1;
}
.hero-info strong {
  font-weight: 900;
}
.hero-info-title {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(11px, 3.3vw, 16px);
}
.hero-info-copy {
  display: block;
  margin-top: 2px;
  font-size: clamp(11px, 2.85vw, 16px);
  line-height: 1.24;
}
.hero-info-copy-line {
  display: block;
  white-space: normal;   /* antes nowrap: se cortaba a 320 px (ver .hero-title-line) */
  text-wrap: balance;
}
.hero-info-action {
  display: inline-block;
  margin-top: 6px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--wa-green);
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
  padding: 18px 34px;
  border-radius: 60px;
  box-shadow: 0 8px 40px rgba(37,211,102,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 1;
}
.hero-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 50px rgba(37,211,102,0.55); }
.hero-cta svg { width: 38px; height: 38px; fill: var(--white); flex-shrink: 0; }

.hero-phone {
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,0.8);   /* antes 0.55 */
  font-size: 15px;
  position: relative;
  z-index: 1;
}
.hero-phone a { color: var(--gold); text-decoration: none; font-weight: 700; }

/* 7. PÍLDORAS -------------------------------------------------------------- */
/* Ya no son píldoras (prohibido nº 4): una tira de cinta dorada, un poco
   torcida, que pisa el borde entre la portada y Servicios. Se inclina con
   skewY (no con rotate): así no ensancha la página ni deja esquinas vacías. */
.pills-row {
  position: relative;
  z-index: 2;
  margin: -30px 0 -14px;
  padding: 18px 24px;
  background: var(--gold);
  transform: skewY(-1.4deg);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
}
.pill {
  display: flex;
  align-items: center;
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--navy-dark);
  white-space: nowrap;
}
.pill + .pill::before {
  content: '/';
  margin: 0 0.55em;
  color: var(--navy-dark);
  opacity: 0.4;
}

/* 8. SECCIONES: COMUNES ---------------------------------------------------- */
section { padding: 70px 24px; }

.section-inner { max-width: 1100px; margin: 0 auto; }

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  color: var(--texto-titulo);
  line-height: 1;
  margin-bottom: 14px;
}
.section-desc {
  font-size: 16px;
  color: var(--texto-cuerpo);
  max-width: 540px;
  line-height: 1.7;
}

/* 9. SERVICIOS ------------------------------------------------------------- */
.services {
  --pad-seccion: 24px;   /* igual que el padding lateral de "section" */
  background: var(--superficie);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 22px;
}

/* El bloque azul. En la antigua medía "100vw", que en ordenadores con barra
   de desplazamiento visible es más ancho que la ventana. Ahora es hijo
   directo de la sección, y "--vista" = ancho de la sección + sus márgenes =
   ancho real de la ventana sin la barra. Mismo efecto, sin desbordar. */
.services-accordions {
  --vista: calc(100% + 2 * var(--pad-seccion));
  width: min(calc(var(--vista) - 32px), 1040px);
  max-width: 1040px;
  margin: 16px 0 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 22px;
  background: var(--azul-bloque);
  border-radius: 30px;
  padding: 48px 34px 34px;
  box-sizing: border-box;
  box-shadow: 0 18px 42px rgba(7,87,184,0.18);
  isolation: isolate;
  overflow: hidden;
  transition: width 0.34s ease, max-width 0.34s ease, padding 0.34s ease, border-radius 0.34s ease, box-shadow 0.34s ease;
}
/* Sin la cabecera "NUESTROS SERVICIOS" de fuera (Fase 3), el margen de
   16px que dejaba aire bajo ese título sobra por debajo de 1024px (donde
   no hay retícula de escritorio: sección 17b): sin él, el hueco entre la
   cinta dorada y este bloque queda entre 28 y 40px, como el de las demás
   secciones. Desde 1024px ya estaba entre 40 y 60px sin tocar nada. */
@media (max-width: 1023px) {
  .services-accordions { margin-top: 0; }
}

.services-accordions::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s ease;
  z-index: 0;
}

.services-accordions.is-expanded {
  width: var(--vista);
  max-width: var(--vista);
  border-radius: 0;
  padding-left: clamp(10px, 2vw, 24px);
  padding-right: clamp(10px, 2vw, 24px);
  box-shadow: 0 24px 56px rgba(7,87,184,0.26);
}

.services-accordions.is-expanded::before {
  opacity: 1;
}

.services-accordion-title {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 100%;
  max-width: 1240px;
  justify-self: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: color 0.34s ease;
}

.services-accordions.is-expanded .services-accordion-title {
  color: var(--titulo-bloque-abierto);
}

.services-accordion-subtitle {
  color: rgba(255,255,255,0.82);
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-align: center;
  text-transform: uppercase;
  margin: -14px 0 4px;
  position: relative;
  z-index: 1;
  transition: color 0.34s ease;
}

.services-accordions.is-expanded .services-accordion-subtitle {
  color: var(--subtitulo-bloque-abierto);
}

.service-group {
  background: var(--superficie-2);
  border: 2px solid rgba(255,255,255,0.78);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(3,13,52,0.18);
  width: 100%;
  max-width: 1240px;
  justify-self: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: max-width 0.34s ease;
}

.service-group summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 12px 18px 22px;
  background: var(--navy);
  color: var(--white);
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.05;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.service-group summary > span {
  white-space: normal;   /* antes nowrap: en francés a 320 px se salía por el borde */
  text-wrap: balance;
}

.service-group-urgent summary {
  background: var(--rojo-urgente);
  color: var(--white);
}

.service-group-advice summary {
  font-size: clamp(15px, 2.4vw, 22px);
}

.service-group summary::-webkit-details-marker {
  display: none;
}

.service-group summary::after {
  content: '';
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-image: url("/assets/img/flecha.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s;
}

.service-group[open]:not([data-cerrando]) summary::after {
  transform: rotate(180deg);
}

.service-group-body {
  padding: 0 4px 12px;
  overflow: hidden;
}

.service-group-body .services-grid {
  margin-top: 12px;
}

.service-card {
  --service-accent: var(--navy);
  /* Reserva para navegadores sin image-set() (T1): --service-image-jpg. La
     segunda declaración la sustituye entera en cuanto el navegador entiende
     image-set(), usando --service-image (avif+webp+jpg en 1x/2x). */
  background-image:
    linear-gradient(180deg, rgba(5,8,26,0.02), rgba(5,8,26,0.12)),
    var(--service-image-jpg, linear-gradient(135deg, var(--borde-suave), var(--superficie-2)));
  background-image:
    linear-gradient(180deg, rgba(5,8,26,0.02), rgba(5,8,26,0.12)),
    var(--service-image, linear-gradient(135deg, var(--borde-suave), var(--superficie-2)));
  background-position: var(--service-position, center);
  background-size: cover;
  border-radius: 16px;
  min-height: 215px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5,8,26,0.88) 0%,
    rgba(5,8,26,0.68) 42%,
    rgba(5,8,26,0.24) 100%);
  z-index: 0;
  pointer-events: none;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  opacity: 0.95;
  background: var(--service-accent);
  transition: opacity 0.2s;
  z-index: 1;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 42px rgba(15,26,78,0.18); }
.service-card:hover::after { opacity: 1; }

.service-card:nth-child(2) { --service-accent: var(--orange); }
.service-card:nth-child(3) { --service-accent: var(--cyan); }
.service-card:nth-child(4) { --service-accent: var(--purple); }
.service-card:nth-child(5) { --service-accent: var(--gold); }
.service-card:nth-child(6) { --service-accent: var(--rosa); }

/* Foto de cada tarjeta. En la antigua las ponía un JavaScript desde
   data-bg; ahora es CSS puro (se ven sin JavaScript, y las de un desplegable
   cerrado no se descargan hasta abrirlo). Selector doble (.service-card.x)
   para ganar a los :nth-child de arriba, igual que ganaba el style="" antiguo.
   Cada tarjeta define dos variables: --service-image-jpg (reserva, un solo
   tamaño) y --service-image (image-set con AVIF+WebP+JPG en 1x/2x): entre
   las dos las usa la regla común de arriba (T1, T2). */
.service-card.servicio-fachadas {
  --service-image-jpg: url("/assets/img/servicios/fachadas-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/fachadas-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/fachadas-1046.avif") 2x type("image/avif"),
    url("/assets/img/servicios/fachadas-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/fachadas-1046.webp") 2x type("image/webp"),
    url("/assets/img/servicios/fachadas-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/fachadas-1046.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-gotele {
  --service-image-jpg: url("/assets/img/servicios/gotele-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/gotele-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/gotele-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/gotele-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/gotele-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/gotele-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/gotele-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-grietas {
  --service-image-jpg: url("/assets/img/servicios/grietas-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/grietas-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/grietas-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/grietas-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/grietas-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/grietas-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/grietas-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-metalicas {
  --service-image-jpg: url("/assets/img/servicios/metalicas-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/metalicas-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/metalicas-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/metalicas-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/metalicas-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/metalicas-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/metalicas-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-marmol {
  --service-image-jpg: url("/assets/img/servicios/efectos-marmol-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/efectos-marmol-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/efectos-marmol-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/efectos-marmol-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/efectos-marmol-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/efectos-marmol-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/efectos-marmol-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-lacado {
  --service-image-jpg: url("/assets/img/servicios/lacado-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/lacado-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/lacado-1072.avif") 2x type("image/avif"),
    url("/assets/img/servicios/lacado-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/lacado-1072.webp") 2x type("image/webp"),
    url("/assets/img/servicios/lacado-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/lacado-1072.jpg") 2x type("image/jpeg"));
  --service-position: 88% center;
}
.service-card.servicio-fontaneria {
  --service-image-jpg: url("/assets/img/servicios/fontaneria-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/fontaneria-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/fontaneria-1086.avif") 2x type("image/avif"),
    url("/assets/img/servicios/fontaneria-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/fontaneria-1086.webp") 2x type("image/webp"),
    url("/assets/img/servicios/fontaneria-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/fontaneria-1086.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-cerrajeria {
  --service-image-jpg: url("/assets/img/servicios/cerrajeria-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/cerrajeria-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/cerrajeria-1086.avif") 2x type("image/avif"),
    url("/assets/img/servicios/cerrajeria-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/cerrajeria-1086.webp") 2x type("image/webp"),
    url("/assets/img/servicios/cerrajeria-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/cerrajeria-1086.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-electricidad {
  --service-image-jpg: url("/assets/img/servicios/electricidad-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/electricidad-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/electricidad-1086.avif") 2x type("image/avif"),
    url("/assets/img/servicios/electricidad-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/electricidad-1086.webp") 2x type("image/webp"),
    url("/assets/img/servicios/electricidad-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/electricidad-1086.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-montajes {
  --service-image-jpg: url("/assets/img/servicios/montajes-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/montajes-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/montajes-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/montajes-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/montajes-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/montajes-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/montajes-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-reparaciones {
  --service-image-jpg: url("/assets/img/servicios/reparaciones-592.jpg");
  --service-image: image-set(
    url("/assets/img/servicios/reparaciones-592.avif") 1x type("image/avif"),
    url("/assets/img/servicios/reparaciones-1184.avif") 2x type("image/avif"),
    url("/assets/img/servicios/reparaciones-592.webp") 1x type("image/webp"),
    url("/assets/img/servicios/reparaciones-1184.webp") 2x type("image/webp"),
    url("/assets/img/servicios/reparaciones-592.jpg") 1x type("image/jpeg"),
    url("/assets/img/servicios/reparaciones-1184.jpg") 2x type("image/jpeg"));
}
.service-card.servicio-asesoramiento {
  --service-image-jpg: radial-gradient(circle at 18% 20%, rgba(37,211,102,0.42), transparent 34%), linear-gradient(135deg, var(--navy-profundo) 0%, var(--azul-bloque) 100%);
  --service-image: var(--service-image-jpg);
}
.service-card.servicio-urgente-pintura {
  --service-accent: var(--rojo-urgente);
  --service-image-jpg: radial-gradient(circle at 18% 18%, rgba(200,20,36,0.5), transparent 34%), linear-gradient(135deg, var(--navy-profundo) 0%, var(--azul-bloque) 100%);
  --service-image: var(--service-image-jpg);
}
.service-card.servicio-urgente-manitas {
  --service-accent: var(--rojo-urgente);
  --service-image-jpg: radial-gradient(circle at 82% 18%, rgba(200,20,36,0.48), transparent 34%), linear-gradient(135deg, var(--violeta-noche) 0%, var(--navy) 100%);
  --service-image: var(--service-image-jpg);
}

.service-card h3 {
  position: relative;
  z-index: 2;
  font-size: 19px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.service-card p {
  position: relative;
  z-index: 2;
  font-size: 14px;
  color: rgba(255,255,255,0.86);
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.service-card-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 18px;
  background: var(--wa-green);
  color: var(--white);
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
  padding: 13px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(37,211,102,0.38);
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(37,211,102,0.5);
}
.service-card-cta svg {
  width: 20px;
  height: 20px;
  fill: var(--white);
  flex-shrink: 0;
}

.urgent-services-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 22px;
}

.urgent-service-card {
  min-height: 0;
  padding: 18px 22px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 12px;
  row-gap: 12px;
}

.urgent-service-card h3 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 0;
  align-self: center;
}

.urgent-service-card p {
  grid-column: 1 / -1;
  font-size: 16px;
  max-width: 520px;
}

.urgent-service-card p strong {
  display: block;
  margin-top: 6px;
  color: var(--white);
  font-weight: 900;
}

.urgent-service-mini-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 100%;
  margin-top: 0;
  list-style: none;
}

.urgent-service-mini-card {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  background: rgba(255,255,255,0.13);
  color: var(--white);
  font-size: clamp(13px, 2.7vw, 15px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.urgent-service-mini-card-featured {
  min-height: 84px;
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.5);
  font-size: clamp(14px, 3vw, 17px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.service-card-cta-icon {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
}

.service-card-cta-icon svg {
  width: 25px;
  height: 25px;
}

.urgent-service-card .service-card-cta-icon {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 88px;
  height: 48px;
  gap: 8px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  margin-top: 0;
}

.urgent-service-card .service-card-cta-icon svg {
  width: 24px;
  height: 24px;
}

/* "WH" del botón urgente: lo pinta el CSS, como en la antigua. El nombre
   que lee un lector de pantalla va en el aria-label del enlace. */
.urgent-service-card .service-card-cta-icon::after {
  content: 'WH';
  color: var(--white);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.5px;
}

/* 10. VALORES -------------------------------------------------------------- */
/* Titular a la izquierda y la frase a la derecha (retícula 5/7). Tres
   trozos de la frase llevan un brochazo dorado debajo (el oficio: pintar)
   y el remate va en dorado. Sin tarjetas, sin emojis, sin halo de color. */
.values { background: var(--navy); position: relative; overflow: hidden; }

.values .section-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 30px 0;
}
.values .section-title { grid-column: 1 / -1; }
.values-phrase { grid-column: 2; max-width: 820px; }

.values .section-title {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0;
}

.values-phrase {
  padding-left: 28px;
  border-left: 1px solid rgba(232,168,32,0.5);
  font-weight: 900;
  font-size: clamp(22px, 2.9vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--white);
}
.brochazo {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% 0.16em;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.values-remate {
  display: block;
  margin-top: 0.5em;
  color: var(--gold);
  font-weight: 900;
}

/* 11. GARANTÍAS -------------------------------------------------------------- */
/* Titular a todo el ancho; debajo, el sello a la izquierda y las cuatro
   cláusulas a la derecha (3/9), en dos columnas, con número grande al lado (nunca encima: sin antetítulos)
   y filetes finos de 1px. El sello es decorativo (aria-hidden): repite
   con otras palabras lo que ya dicen las cláusulas. */
.trust { background: var(--superficie); }
.trust .section-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 34px 48px;
}
.trust .section-title { grid-column: 1 / -1; grid-row: 1; }
.trust .section-title {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.trust-sello {
  grid-column: 1;
  grid-row: 2;
  width: 150px;
  height: 150px;
  margin-top: 6px;
  transform: rotate(-9deg);
  color: var(--texto-antetitulo);
}
.trust-sello circle { fill: none; stroke: currentColor; }
.trust-sello text {
  fill: currentColor;
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
}
.trust-sello-borde { font-size: 10px; letter-spacing: 0.04em; }
.trust-sello-centro { font-size: 23px; }

.trust-list {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  list-style: none;
  border-top: 2px solid var(--texto-titulo);
}
.trust-list li {
  position: relative;
  padding: 26px 0 28px 62px;
  border-bottom: 1px solid var(--borde-suave);
}
.trust-item-title {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: 19px;
  line-height: 1.2;
  color: var(--texto-titulo);
}
.trust-num {
  position: absolute;
  left: 0;
  top: 22px;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--texto-antetitulo);
}
.trust-item-detail {
  margin-top: 8px;
  font-size: 15px;
  color: var(--texto-cuerpo);
  line-height: 1.5;
}

/* 12. RESEÑAS -------------------------------------------------------------- */
/* La reseña real de Google, grande y entre comillas españolas, a la
   izquierda (7/5). A la derecha, el aviso de pedir reseña, sin caja con
   sombra ni botón en píldora. */
.reviews {
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
}
.reviews .section-title {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.reviews .section-desc {
  max-width: 650px;
}
.reviews-panel {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 64px;
  align-items: start;
}

.review-quote {
  position: relative;
  padding: 34px 0 0 0;
  border-top: 2px solid var(--texto-titulo);
}
.review-quote blockquote p {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--texto-titulo);
  text-indent: -0.42em;
}
.review-quote figcaption {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 15px;
  color: var(--texto-cuerpo);
}
.review-stars {
  font-size: 22px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--estrella);
}
.review-author {
  font-weight: 900;
  color: var(--texto-fuerte);
}

.review-card {
  padding: 22px 0 26px;
  border-top: 1px solid var(--borde-suave);
}
.review-card:last-child { border-bottom: 1px solid var(--borde-suave); }
.review-card h3 {
  color: var(--texto-titulo);
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 6px;
}
.review-card p {
  color: var(--texto-cuerpo);
  font-size: 15px;
  line-height: 1.55;
}
.google-review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--texto-titulo);
  color: var(--superficie);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.google-review-link:hover { background: var(--texto-fuerte); }
.review-whatsapp-link {
  background: var(--wa-green);
  color: var(--white);
}
.review-whatsapp-link:hover { background: var(--wa-dark); }
.google-review-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* 13. IDIOMAS -------------------------------------------------------------- */
.langs-section { background: var(--superficie-2); padding: 40px 24px; }
.langs-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.langs-inner p {
  color: var(--texto-cuerpo);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
}
.lang-flags { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; list-style: none; }
.flag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie-tarjeta);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-titulo);
  border: 1px solid var(--borde-suave);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.flag-item .bandera { width: 26px; height: 19px; border-radius: 3px; }

/* 14. BLOQUE FINAL DE CONTACTO --------------------------------------------- */
.contact-bottom {
  background: var(--navy-dark);
  padding: 60px 24px;
  text-align: center;
}
/* El teléfono hace de titular (P7): número enorme, con el mismo trazo
   grueso que la portada, en vez de una frase de cierre genérica. */
.contact-bottom h2 {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 9vw, 92px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.contact-bottom h2 a {
  color: var(--white);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.contact-bottom h2 a:hover,
.contact-bottom h2 a:focus-visible { color: var(--gold); }
.contact-bottom p {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  margin-bottom: 36px;
}
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--wa-green);
  color: var(--white);
  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  padding: 20px 44px;
  border-radius: 60px;
  box-shadow: 0 8px 40px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.contact-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 50px rgba(37,211,102,0.55); }
.contact-cta svg { width: 28px; height: 28px; fill: var(--white); }

.contact-info {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.contact-info a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.contact-info a:hover { color: var(--gold); }

/* 15. PIE ------------------------------------------------------------------ */
footer {
  background: var(--navy-pie);
  padding: 20px 24px;
  text-align: center;
  color: rgba(255,255,255,0.5);   /* antes 0.25: 2,1:1, ilegible; ahora 5:1 */
  font-size: 12px;
}
.pie-legal { margin-top: 6px; }
.pie-legal a { color: inherit; }
.pie-legal a:hover { color: var(--gold); }

/* 15b. AVISO DE COOKIES -----------------------------------------------------
   Lo monta assets/js/anuncios.js a partir del <template id="aviso-cookies">
   de cada portada, y solo si la etiqueta de Google Ads está encendida (ver
   ese archivo). Con la etiqueta apagada, esta clase nunca llega a usarse. */
.aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  max-width: 640px;
  margin: 0 auto;
  background: var(--navy-dark);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  font-size: 14px;
  line-height: 1.5;
}
.aviso-cookies a { color: var(--gold); }
.aviso-cookies-botones {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* Mismo tamaño, color y posición en los dos botones (guía de cookies de la
   AEPD): ninguno destaca sobre el otro, para no inducir a aceptar. */
.aviso-cookies-btn {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.aviso-cookies-btn:hover { background: rgba(255,255,255,0.1); }

/* Mientras el aviso está a la vista, el botón flotante de WhatsApp sube lo
   que mida de verdad el aviso (--alto-aviso-cookies, calculado por
   assets/js/anuncios.js: en pantallas estrechas el texto ocupa más líneas
   y el aviso es más alto). Con el aviso apagado, esta variable no existe:
   28px es el valor de siempre (sección 4). */
.con-aviso-cookies .wa-sticky { bottom: calc(var(--alto-aviso-cookies, 0px) + 28px); }

/* Botón "Configurar cookies" del pie: mismo aspecto que los enlaces legales
   de al lado. Solo se ve (assets/js/anuncios.js quita el "hidden") si la
   etiqueta de Google Ads está encendida. */
.pie-cookies-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.pie-cookies-btn:hover { color: var(--gold); }

/* 16. PÁGINAS DE TEXTO Y 404 ----------------------------------------------- */
.pagina-texto {
  background: var(--superficie);
  padding: 56px 24px 72px;
}
.pagina-texto .section-inner { max-width: 760px; }
.pagina-texto h1 {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--texto-titulo);
  margin-bottom: 8px;
}
.pagina-texto h2 {
  font-size: 19px;
  font-weight: 900;
  color: var(--texto-titulo);
  margin: 32px 0 10px;
}
.pagina-texto p,
.pagina-texto li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-cuerpo);
}
.pagina-texto p + p { margin-top: 10px; }
.pagina-texto ul { padding-left: 22px; margin: 8px 0; }
.pagina-texto dl { margin: 12px 0; }
.pagina-texto dt { font-weight: 900; color: var(--texto-fuerte); margin-top: 10px; }
.pagina-texto dd { color: var(--texto-cuerpo); line-height: 1.6; }
.pagina-texto a { color: var(--texto-titulo); font-weight: 700; }
.pagina-texto .aviso-idioma {
  font-size: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
}
.pagina-texto .fecha { font-size: 14px; margin-bottom: 24px; }

.error-404 {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 80px 24px 96px;
}
.error-404 h1 {
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.error-404 p { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.6; margin-bottom: 6px; }
.error-404 .otros-idiomas { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 16px; }
.error-404 .acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.error-404 .google-review-link { margin-top: 0; }

/* 17. MÓVIL ---------------------------------------------------------------- */
/* Tablet: Valores, Garantías y Reseñas pasan a una sola columna */
@media (max-width: 900px) {
  .values .section-inner,
  .trust .section-inner,
  .reviews-panel { grid-template-columns: minmax(0, 1fr); }
  .trust .section-inner { grid-template-rows: auto; }
  .trust .section-title { grid-column: 1; grid-row: 1; }
  .trust-sello {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: 118px;
    height: 118px;
    margin-top: 0;
  }
  .trust-list { grid-column: 1; grid-row: 2; margin-top: 0; }
  .review-quote { margin-bottom: 30px; }
  .values-phrase { grid-column: 1; }
}

@media (max-width: 600px) {
  .values-phrase { padding-left: 18px; }
  /* «PROFESSIONNELLES» (francés) es la palabra más larga: manda el tamaño */
  .values .section-title,
  .trust .section-title,
  .reviews .section-title { font-size: clamp(26px, 7.6vw, 32px); }
  .trust-sello { width: 96px; height: 96px; }
  .trust-list { grid-template-columns: minmax(0, 1fr); }
  .trust-list li { padding: 20px 0 22px 52px; }
  .trust-num { font-size: 28px; top: 18px; }
  .trust-item-title { font-size: 17px; }
  .review-quote blockquote p { font-size: clamp(26px, 7.4vw, 34px); text-indent: 0; }
}

@media (max-width: 600px) {
  .wa-label { display: none; }
  .wa-sticky { padding: 14px; }
  .hero {
    background-size: auto 100%;
  }
  .lang-bar {
    padding: 8px 12px 8px 8px;
    gap: 8px;
  }
  .header-logo img {
    height: 34px;
  }
  .lang-btn {
    padding: 4px 9px;
    font-size: 12px;
  }
  /* En el móvil la tira parte en varias líneas: sin barras (quedarían al
     principio de línea), solo hueco entre palabras. */
  .pills-row {
    padding: 20px 12px;
    gap: 4px 16px;
  }
  .pill { font-size: 14px; }
  .pill + .pill::before { content: none; }
  .hero h1 {
    font-size: clamp(23px, 6.4vw, 42px);
  }
  .hero-info {
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 24px;
  }
  .services {
    --pad-seccion: 16px;
  }
  .services-accordions {
    border-radius: 26px;
    width: calc(var(--vista) - 24px);
    padding: 34px 18px 26px;
    gap: 20px;
  }
  .services-accordions.is-expanded {
    width: var(--vista);
    padding-left: 10px;
    padding-right: 10px;
  }
  .services-accordion-title,
  .service-group {
    width: 100%;
    margin-left: 0;
  }
  .services-accordion-title {
    font-size: clamp(18px, 5.8vw, 34px);
    margin-bottom: 12px;
    white-space: nowrap;
  }
  .service-group summary {
    padding: 18px 8px 18px 18px;
    gap: 6px;
    font-size: clamp(16px, 4.5vw, 22px);
  }
  .service-group summary::after {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }
  .service-group-advice summary {
    font-size: clamp(13px, 3.8vw, 18px);
  }
  .logo-wrap::before {
    width: 92vw;
    height: 210px;
  }
  section { padding: 50px 16px; }
  /* Que el botón flotante no tape los enlaces legales al final */
  footer { padding-bottom: 92px; }
}

/* 17b. ESCRITORIO (desde 1024 px) -------------------------------------------
   Por debajo de 1024px no cambia ni un píxel: es el mismo corte que usa
   web.js para elegir el vídeo de móvil (max-width: 1023px). Solo la
   portada pasa a dos columnas (7/5); si Valentín lo aprobó, también
   Idiomas y Contacto final (más abajo). Todo con grid-template-areas sobre
   el HTML que ya hay, sin cambiar su orden (el móvil depende de ese orden).
   Altura de la barra superior medida con Chrome a 1440px: 60px. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "titulo  logo"
      "sub     logo"
      "lugar   info"
      "cta     info"
      "tel     info";
    column-gap: 48px;
    align-content: center;
    align-items: center;
    justify-items: start;
    text-align: left;
    /* Mismo borde izquierdo que .section-inner (max-width:1100px, margen
       automático) pero con padding: .hero no puede tener un envoltorio
       nuevo (haría más estrecho su fondo a pantalla completa). */
    padding-inline: max(24px, calc((100% - 1100px) / 2));
    padding-block: 40px;
    min-height: min(calc(100svh - 60px), 900px);
    background-size: cover;
  }
  .hero::before {
    /* Degradado en vez del velo plano: más oscuro bajo el texto (izquierda),
       más claro hacia la derecha, para que la foto (o el vídeo) se vea. */
    background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.25) 100%);
  }
  /* .hero-video y .hero-video-pausa son position:absolute (sección 6): un
     hijo con position absolute nunca participa en la retícula del grid, así
     que siguen ocupando la portada entera sin tocarlos aquí. */
  .hero h1 {
    grid-area: titulo;
    font-size: clamp(40px, 4.2vw, 72px);
    margin-bottom: 8px;
  }
  .hero-sub { grid-area: sub; }
  .hero-location { grid-area: lugar; justify-content: flex-start; }
  .hero-cta { grid-area: cta; }
  .hero-phone { grid-area: tel; margin-top: 8px; }
  .logo-wrap {
    grid-area: logo;
    align-self: center;
    justify-self: center;
    margin-bottom: 0;
  }
  .logo-wrap::before {
    width: min(460px, 100%);
    height: 190px;
  }
  .hero-info {
    grid-area: info;
    max-width: none;
    margin: 0;
    align-self: center;
  }
  .hero-info-title {
    white-space: normal;
    font-size: clamp(15px, 1.3vw, 17px);
  }
  .hero-monigote {
    left: max(24px, calc((100% - 1100px) / 2));
    bottom: 14px;
    width: 58px;
  }

  /* Servicios en ordenador (5.4): tras la Fase 3 ya no hay cabecera fuera
     del bloque azul. Cerrado, mide lo mismo que el contenedor común
     (1100px en vez de 1040px), para que sus bordes caigan en la misma
     vertical que el resto. Al abrir un desplegable sigue ensanchándose a
     todo el ancho como hoy (.is-expanded tiene más especificidad que esto
     y gana igual). */
  .services-accordions {
    width: min(calc(var(--vista) - 48px), 1100px);
    max-width: 1100px;
  }

  /* Idiomas y Contacto final a dos lados (5.5, aprobado por Valentín
     27/09/2026). Mismo borde que el resto: padding-inline con la fórmula
     de arriba, sin envoltorio nuevo. */
  .langs-inner {
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 24px;
  }
  .langs-inner p { margin-bottom: 0; }
  .lang-flags { justify-content: flex-end; }

  .contact-bottom {
    padding-inline: max(24px, calc((100% - 1100px) / 2));
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    grid-template-areas:
      "tel   boton"
      "frase info";
    align-items: start;
    text-align: left;
  }
  .contact-bottom h2 { grid-area: tel; }
  .contact-bottom p { grid-area: frase; margin-bottom: 0; }
  .contact-cta { grid-area: boton; justify-self: start; }
  .contact-info { grid-area: info; justify-content: flex-start; align-self: start; }

  /* Teléfono en la barra superior, solo en ordenador (Fase 6, aprobado por
     Valentín 27/09/2026): por debajo de 1024px la barra ya va justa. */
  .lang-bar-phone { display: inline-flex; align-items: center; }
}

/* 18. REDUCIR MOVIMIENTO --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .wa-sticky:hover,
  .hero-cta:hover,
  .service-card:hover,
  .service-card-cta:hover,
  .google-review-link:hover,
  .contact-cta:hover { transform: none; }
}