/* =============================================================
   GURENERGÍAS — hoja de estilos de la web pública
   =============================================================

   Rediseño de fondo claro (septiembre 2026). Lo que cambió y por qué:

   La web nacía de noche: fondo azul marino, texto claro, halos de color. Se
   veía bien pero pesaba, y una empresa que entra en casa de alguien a cambiar
   la calefacción se lee mejor en claro: blanco, aire y una tipografía grande.
   La referencia de distribución es una web de fabricante del sector — bandas
   anchas a todo el ancho, titulares enormes alineados a la izquierda, mucho
   espacio en blanco entre secciones y un pie oscuro que cierra.

   Tres reglas que conviene no romper:

   1. **El ámbar es RELLENO, nunca texto.** #F5821F sobre blanco da 2,4:1 de
      contraste: ilegible. Para texto naranja está `--accent-ink`, que es el
      mismo color oscurecido hasta pasar el mínimo. Si escribes
      `color: var(--accent)` sobre fondo claro, lo estás rompiendo.
   2. **Las bandas alternan: blanca, tintada, oscura.** No es decoración: es lo
      que separa una sección de la siguiente sin necesidad de líneas.
   3. **El movimiento es adorno y se apaga entero** con `prefers-reduced-motion`.
      Nada de lo que se mueve puede hacer falta para leer la página.

   Las clases NO se han renombrado a propósito: `main.js`, `anim.js`, `i18n.js`
   y las 7 landings generadas dependen de ellas.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  /* Los colores siguen saliendo del logo: sol naranja (#F5821F), placa azul
     (#0BA9EA) y la "e" verde. Lo que cambia es el papel: antes el azul marino
     era el fondo, ahora es la tinta y el pie. */
  --bg: #FFFFFF;
  --bg-2: #F5F8FA;          /* tarjetas */
  --bg-3: #E8F0F6;          /* tarjeta al pasar por encima, campos */
  --bg-tint: #EDF3F9;       /* la banda tintada que separa secciones */
  --bg-deep: #04283A;       /* la banda oscura y el pie */
  --bg-deep-2: #063850;

  --ink: #0F2430;
  --ink-mute: #4C6270;
  /* Este es el gris más claro que se permite para texto. Medido: 5,3:1 sobre
     blanco y 4,74:1 sobre la banda tintada, que son los dos fondos donde
     aparece. Un tono más claro (el #6B7F8B de la primera versión) se quedaba
     en 4,17:1 y no pasaba. */
  --ink-dim: #5C6E79;
  --ink-on-deep: #EFF6FA;   /* texto sobre la banda oscura */
  --ink-on-deep-mute: #A9C1CE;

  --accent: #F5821F;        /* RELLENO */
  --accent-hi: #FFB25C;
  --accent-ink: #B45A00;    /* TEXTO: el mismo naranja hasta 5,2:1 sobre blanco */
  --accent-2: #0BA9EA;      /* el azul de la placa, RELLENO */
  --accent-2-ink: #0A6E96;  /* y su versión para texto */
  --accent-3: #0BA9EA;      /* alias histórico: lo usan las landings */
  --on-accent: #04283A;     /* lo que se escribe ENCIMA del naranja */
  /* La "e" verde del logo, oscurecida hasta leerse sobre blanco: el verde de
     marca da 4,07:1 y este 5,31:1. Se usa para el ahorro y para "cobertura
     total", que son cifras y estados, no adornos. */
  --eco: #107C35;

  --accent-rgb: 245,130,31;
  --accent-2-rgb: 255,178,92;
  --accent-3-rgb: 11,169,234;
  --on-accent-rgb: 4,40,58;
  --glow-rgb: 11,169,234;

  --line: #E3EAEF;
  --line-strong: #CBD8E0;
  --line-on-deep: rgba(239,246,250,.16);

  /* Sin ficheros de fuente en el servidor y con `font-src 'self'`, cargar una
     webfont sería una promesa que el navegador no puede cumplir: se elige la
     del sistema a propósito. En Mac e iPhone sale San Francisco, en Windows
     Segoe UI; las dos son grotescas limpias y encajan con el diseño. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --radius: 16px;
  --radius-lg: 24px;

  /* El aire entre secciones. Una sola variable para que la página respire igual
     de arriba abajo; si se toca aquí, cambia el ritmo entero. */
  --aire: clamp(76px, 9vw, 132px);
  --sombra-card: 0 1px 2px rgba(15,36,48,.04), 0 8px 24px rgba(15,36,48,.06);
  --sombra-card-hover: 0 2px 4px rgba(15,36,48,.05), 0 18px 44px rgba(15,36,48,.11);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body{
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* =============================================================
   LOGO DE FONDO
   El SVG lo inyecta logo-scroll.js. Sobre blanco tiene que ser casi
   un fantasma: lo que en el fondo oscuro era una marca de agua a la
   vista, aquí a la misma opacidad ensuciaría el texto.
   ============================================================= */
.logo-fondo{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.logo-fondo.cargado{ opacity: .05; }
.logo-fondo svg{
  width: min(92vw, 1180px);
  height: auto;
  overflow: visible;
}
@media (max-width: 640px){
  .logo-fondo.cargado{ opacity: .04; }
  .logo-fondo svg{ width: 96vw; }
}
.logo-fondo.oculto{ opacity: 0; }

svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }

.skip-link{
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.2rem; background: var(--accent); color: var(--on-accent);
  border-radius: 8px; font-weight: 700; transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

body.nav-lock{ overflow: hidden; }
body.nav-lock .chat-widget{ opacity: 0; pointer-events: none; transition: opacity .2s; }
/* Rellenando un formulario en el móvil, el chat se aparta: fijo abajo a la
   derecha y con el teclado abierto tapaba el campo o el botón de enviar.
   main.js (initFormActivo) pone la clase; el campo del propio chat no cuenta. */
@media (max-width: 860px){
  body.form-activo .chat-widget{ opacity: 0; pointer-events: none; transition: opacity .2s; }
}
/* Con el chat abierto en el móvil bloqueamos el fondo. En iOS `overflow: hidden`
   no basta (la página se sigue arrastrando y el chat se va de la pantalla), así
   que fijamos el body; main.js guarda y restaura la posición del scroll. */
body.chat-lock{ position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 18px;
}
.eyebrow::before{ content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }

.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Botones: píldora naranja lisa (manual de marca: el único degradado de la
   marca es el del lema). El texto va en azul marino, no en blanco — sobre
   naranja, el blanco se queda en 2,6:1 y no se lee. */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-weight: 700; font-size: 15.5px; font-family: var(--sans); line-height: 1.2;
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background .25s, color .25s, border-color .25s;
}
.btn-primary{
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(245,130,31,.24), 0 10px 26px rgba(245,130,31,.22);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(245,130,31,.26), 0 18px 40px rgba(245,130,31,.3); }
.btn-ghost{
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--sombra-card); }
.btn-block { width: 100%; justify-content: center; }

/* Sobre la banda oscura los botones fantasma se invierten. */
.section-deep .btn-ghost,
footer .btn-ghost{ color: var(--ink-on-deep); background: transparent; border-color: var(--line-on-deep); }
.section-deep .btn-ghost:hover,
footer .btn-ghost:hover{ border-color: var(--ink-on-deep); box-shadow: none; }

/* =============================================================
   4. Reveal (movimiento funcional, escalonado con --i)
   ============================================================= */
[data-reveal]{
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 85ms);
}
[data-reveal].is-revealed{ opacity: 1; transform: none; }
/* Un bloque que ha salido por ARRIBA se aparca por encima: al volver a él
   subiendo, baja hacia su sitio. Sin esto, todo entraría siempre desde abajo,
   incluso lo que estás recuperando al subir, y el movimiento va en contra de
   tu dedo. El :not() no es adorno: esta regla va DESPUÉS de .is-revealed y, a
   igual especificidad, la última gana. */
[data-reveal].reveal-desde-arriba:not(.is-revealed){ transform: translateY(-28px); }
.reveal[data-split]{ opacity: 1; transform: none; }

/* Las fotos entran con un acercamiento muy corto. No es un efecto: es lo que
   hace que una rejilla de imágenes no aparezca de golpe como un mosaico. */
[data-reveal] .gallery-item img,
[data-reveal] .blog-card2-img img{ transform: scale(1.06); transition: transform 1.1s var(--ease-soft); }
[data-reveal].is-revealed .gallery-item img,
[data-reveal].is-revealed .blog-card2-img img{ transform: none; }

/* =============================================================
   4a. Vídeo de intro (se muestra al cargar la página)
   ============================================================= */
.intro{
  position: fixed; inset: 0; z-index: 10001;
  background: var(--bg-deep);
  overflow: hidden;
  opacity: 1;
  transition: opacity .7s var(--ease-soft);
}
.intro.is-out{ opacity: 0; pointer-events: none; }
.intro-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: introZoom 5s var(--ease-soft) forwards;
}
/* Autoplay bloqueado (iOS/Ahorro de energía): ocultamos el vídeo para que no
   aparezca el botón de play nativo; queda la intro de marca (fondo + logo). */
.intro-novideo .intro-video{ display: none; }
@keyframes introZoom{ to{ transform: scale(1); } }
.intro-veil{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(var(--on-accent-rgb),.55) 100%),
    linear-gradient(to bottom, rgba(var(--on-accent-rgb),.25), rgba(var(--on-accent-rgb),.7));
  pointer-events: none;
}
.intro-logo{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  height: 78px; width: auto;
  opacity: 0;
  filter: drop-shadow(0 0 40px rgba(var(--accent-rgb),.45));
  animation: introLogo 1.1s var(--ease-out) 1s forwards;
}
@keyframes introLogo{ to{ opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 600px){ .intro-logo{ height: 56px; } }

/* =============================================================
   4b. Splash
   Va en blanco como el resto de la web: si fuera oscuro, la página
   daría un fogonazo al descubrirse.
   ============================================================= */
.splash{
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-soft), clip-path .9s var(--ease-soft);
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out{ opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety{ to{ opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-inner{ display: flex; flex-direction: column; align-items: center; gap: 24px; }
.splash-logo{ opacity: 0; animation: splashFadeIn .6s var(--ease-out) .15s forwards; }
.splash-logo img{ height: 58px; width: auto; display: block; }
@media (max-width: 600px){ .splash-logo img{ height: 44px; } }
.splash-bar{ width: 150px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.splash-bar span{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: splashLoad 1.15s var(--ease-out) .1s forwards;
}
@keyframes splashLoad{ to{ width: 100%; } }
@keyframes splashFadeIn{ to{ opacity: 1; } }

/* =============================================================
   4c. Barra de progreso del scroll
   ============================================================= */
.scroll-progress{ position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; }
.scroll-progress span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 0; transform: scaleX(0);
}

/* =============================================================
   5. Nav
   Dos alturas: una barra fina de utilidades arriba (que se pliega al
   bajar) y la cabecera blanca pegada. Es la distribución de las webs
   de fabricante del sector, y resuelve el problema real de tener
   demasiadas cosas que enseñar en una sola fila.
   ============================================================= */
.nav{
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, box-shadow .4s;
}
.nav.is-scrolled{ border-color: var(--line); box-shadow: 0 6px 24px rgba(15,36,48,.06); }

/* Barra de confianza. Colapsa sola al hacer scroll para no robar altura.
   En móvil se desliza en horizontal. Las cifras (4,9/5, +400) son
   afirmaciones de la empresa: revísalas antes de publicar. */
.topbar{
  position: relative; z-index: 1;
  max-height: 44px; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  transition: max-height .4s var(--ease-out), opacity .3s var(--ease-out), border-color .4s;
}
.nav.is-scrolled .topbar{ max-height: 0; opacity: 0; border-color: transparent; }
.topbar-inner{
  display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  max-width: 1240px; margin: 0 auto; padding: 10px 32px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-mute); white-space: nowrap;
}
.topbar-item{ display: inline-flex; align-items: center; gap: 7px; }
.topbar-item b{ color: var(--ink); font-weight: 700; }
.topbar-item .ic{ width: 15px; height: 15px; color: var(--accent-2-ink); }
.topbar-stars{ color: #F5A623; letter-spacing: 1px; font-size: 12px; }
.topbar-rating b{ margin-left: 1px; }
.topbar-sep{ width: 1px; height: 13px; background: var(--line-strong); flex: none; border-radius: 0; }
/* Idioma y área de cliente, empujados al extremo derecho. Están aquí y no en la
   fila del logo porque allí no cabían: siete enlaces + teléfono + botón en un
   portátil de 1280 px partían el texto en tres líneas. */
.topbar-actions{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-actions .nav-account{ padding: 5px 13px; font-size: 12.5px; border-color: var(--line-strong); }
.topbar-actions .lang-switch{ padding: 2px; }
.topbar-actions .lang-switch button{ padding: 4px 9px; font-size: 11px; }
@media (max-width: 1040px){
  /* En pantalla estrecha las ventajas se van de la barra de arriba y queda solo
     lo accionable. No se pierde nada: las mismas cuatro se leen enteras en la
     barra de confianza que hay justo debajo del hero. */
  .topbar-item, .topbar-sep{ display: none; }
  .topbar-inner{ justify-content: flex-end; padding: 6px 18px; }
  .topbar-actions{ margin-left: 0; gap: 8px; }
}
/* La barra recorta a `max-height` para poder plegarse con una transición. Si el
   contenido es más alto que ese tope, no se pliega: se queda cortado por arriba
   y por abajo, que es lo que pasaba en el móvil. Aquí se aprieta hasta caber. */
@media (max-width: 560px){
  .topbar{ max-height: 40px; }
  .topbar-actions .nav-account{ padding: 4px 10px; font-size: 11.5px; gap: 6px; }
  .topbar-actions .nav-account .ic{ width: 14px; height: 14px; }
  /* Los botones de idioma se quedaban en 29×17 px: por debajo de los 24 px
     que pide WCAG 2.5.8, y fáciles de fallar con el dedo. Se les da su alto
     quitándoselo al relleno de la barra, que así sigue midiendo lo mismo (la
     cabecera de 100 px de la que cuelga el botón de pausa del vídeo). */
  .topbar-inner{ padding-top: 3px; padding-bottom: 3px; }
  .topbar-actions .lang-switch button{ display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 30px; padding: 0 8px; font-size: 11px; }
}

.nav-inner{ display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1240px; margin: 0 auto; }
.logo{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; }
/* El logotipo lleva aire propio dentro del PNG, así que a 38px la palabra
   se quedaba en 10px de alto y no se leía. */
.logo-img{ height: 46px; width: auto; display: block; }
@media (max-width: 600px){ .logo-img{ height: 34px; } }
.logo-mark{
  width: 34px; height: 34px; border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, var(--accent-hi), var(--accent));
  display: flex; align-items: center; justify-content: center; color: var(--on-accent);
}

.nav-links{ display: flex; gap: 30px; font-size: 15px; font-weight: 600; }
.nav-link{ position: relative; padding: 6px 0; color: var(--ink); transition: color .25s; }
.nav-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav-link:hover{ color: var(--accent-ink); }
.nav-link:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-cta{ display: flex; align-items: center; gap: 16px; }
.nav-cta .btn{ padding: 12px 24px; font-size: 14.5px; }
.nav-phone{ display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.nav-phone:hover{ color: var(--accent-ink); }
.nav-cta .btn{ white-space: nowrap; }
/* Entre 1040 y 1200 px el teléfono se queda en el icono: prefiero perder el
   número escrito a que el botón de presupuesto se parta en dos líneas. */
@media (min-width: 1041px) and (max-width: 1200px){
  .nav-links{ gap: 22px; font-size: 14.5px; }
  .nav-phone span{ display: none; }
}
.nav-menu{ display: flex; align-items: center; gap: 28px; margin-left: auto; }

.lang-switch{ display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--bg); }
.lang-switch button{ padding: 5px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-mute); line-height: 1; transition: color .2s, background .2s; }
.lang-switch button:hover{ color: var(--ink); }
.lang-switch button.active{ background: var(--accent); color: var(--on-accent); }

.nav-toggle{ display: none; position: relative; width: 28px; height: 28px; color: var(--ink); z-index: 210; }
.nav-toggle .ic{ position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; transition: opacity .2s; }
.nav-ic-close{ opacity: 0; }
.nav.nav-open .nav-ic-open{ opacity: 0; }
.nav.nav-open .nav-ic-close{ opacity: 1; }
.nav-backdrop{ position: fixed; inset: 0; background: rgba(15,36,48,.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 190; opacity: 0; pointer-events: none; transition: opacity .3s; }
.nav.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

.nav-actions{ display: flex; align-items: center; gap: 10px; margin-left: 14px; }
.nav-account{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1;
  border: 1px solid var(--line-strong); background: var(--bg);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.nav-account .ic{ width: 17px; height: 17px; color: var(--accent-ink); }
.nav-account:hover{ border-color: var(--ink); transform: translateY(-1px); }
@media (max-width: 360px){ .nav-account span{ display: none; } .nav-account{ padding: 9px; } }

@media (max-width: 1040px){
  .nav-toggle{ display: block; }
  .nav-menu{
    position: fixed; top: 0; right: 0; bottom: 0; margin-left: 0;
    width: min(340px, 84vw);
    background: var(--bg); border-left: 1px solid var(--line);
    box-shadow: -20px 0 60px rgba(15,36,48,.12);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 92px 26px 32px;
    transform: translateX(100%); transition: transform .38s var(--ease-out);
    overflow-y: auto; z-index: 200;
  }
  .nav.nav-open .nav-menu{ transform: translateX(0); }
  .nav-links{ display: flex; flex-direction: column; gap: 0; }
  .nav-link{ padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav-link::after{ display: none; }
  .nav-cta{ flex-direction: column; align-items: stretch; gap: 14px; margin-top: 20px; }
  .nav-phone{ justify-content: center; font-size: 16px; }
  .nav-cta .btn{ width: 100%; justify-content: center; padding: 15px 24px; font-size: 15.5px; }
  /* El selector de idioma ya no vive en este cajón (está en la barra de
     utilidades), así que aquí no lleva nada: la regla que tenía —un
     `margin-top` pensado para el menú desplegable— lo descolocaba media barra
     hacia abajo y hacía que se cortara. */
}

/* =============================================================
   6. Hero
   A todo el ancho, titular grande alineado a la izquierda y el resto
   respirando. El degradado sigue el puntero (--mx/--my los pone
   main.js), pero en claro va muy suave: sobre blanco, un halo fuerte
   se lee como una mancha.
   ============================================================= */
.hero{
  position: relative; isolation: isolate; overflow: clip;
  min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
  padding: 190px 0 100px;
  background: var(--bg);
}
.hero-gradient{
  position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(circle 700px at var(--mx, 70%) var(--my, 30%), rgba(var(--accent-3-rgb),.16) 0%, transparent 60%),
    radial-gradient(circle 620px at calc(var(--mx, 70%) - 30%) calc(var(--my, 30%) + 30%), rgba(var(--accent-rgb),.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 62%);
  filter: blur(0);
}
.hero-logo-bg{ display: none; }
.hero-inner{ position: relative; }
.hero-title{
  font-size: clamp(2.9rem, 7vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 15ch;
  margin-bottom: 26px;
}
/* La primera parte del titular va en el naranja del sol, como en la
   referencia. Es un degradado sobre texto, así que el mínimo de contraste lo
   marca el extremo más claro: por eso arranca en --accent-ink y no en el
   ámbar de relleno. */
.hero-title .grad{
  background: linear-gradient(100deg, var(--accent-ink) 5%, var(--accent) 55%, var(--accent-2-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub{ font-size: 19px; color: var(--ink-mute); max-width: 54ch; margin-bottom: 38px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats{ display: flex; gap: 56px; flex-wrap: wrap; }
.hero-stat b{ font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--ink); display: block; letter-spacing: -.03em; line-height: 1; }
.hero-stat b .unit{ font-size: 22px; color: var(--accent-ink); }
.hero-stat span{ font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
/* La portada tuvo el hero centrado. Ahora va a la izquierda, como las
   landings: en pantalla ancha un párrafo centrado obliga al ojo a volver al
   centro en cada línea. La clase se queda por si alguna página la usa. */
.hero-centrada .hero-inner{ text-align: left; }
.hero-centrada .hero-actions,
.hero-centrada .hero-stats{ justify-content: flex-start; }

/* --- Hero con vídeo de fondo ---
   El vídeo sale de las fotos reales de la empresa, animadas: no es una
   instalación inventada, es la suya moviéndose. Va mudo, en bucle y sin
   controles, así que es decoración: todo lo que hay que leer está en el texto
   de encima, y si el vídeo no carga queda el póster (una de esas mismas fotos)
   y la página se lee igual.

   Sobre vídeo el texto pasa a blanco y hace falta un velo oscuro: sin él, una
   nube clara detrás de un titular blanco lo borra. El velo es más denso en el
   centro, que es donde va el texto. */
.hero-con-video{ background: var(--bg-deep); }
/* El hero de la portada, centrado (07-10-2026, Joao): titular, párrafo,
   botones y cifras en el eje, como el resto de las secciones. El párrafo
   va con text-wrap: balance y a 54ch, que es lo que evita el problema de
   leer un bloque centrado largo. */
.hero-con-video .hero-inner,
.hero-landing .wrap{ text-align: center; }
.hero-con-video .hero-title,
.hero-con-video .hero-sub,
.hero-landing .hero-title,
.hero-landing .hero-sub{ margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero-con-video .hero-actions,
.hero-con-video .hero-stats,
.hero-landing .hero-actions,
.hero-landing .hero-stats,
.hero-landing .crumbs{ justify-content: center; }
.hero-con-video .hero-gradient{ display: none; }
.hero-video{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Un pelín de escala evita que se vea el borde si el vídeo trae bandas. */
  transform: scale(1.02);
}
.hero-video-veil{
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Con el texto centrado, el velo se oscurece en el centro y no a la
       izquierda: es ahí donde tiene que leerse el titular blanco. */
    radial-gradient(ellipse 62% 70% at 50% 52%, rgba(4,40,58,.78) 0%, rgba(4,40,58,.6) 55%, rgba(4,40,58,.42) 100%),
    linear-gradient(180deg, rgba(4,40,58,.55) 0%, transparent 28%, transparent 62%, rgba(4,40,58,.55) 100%);
}
@media (max-width: 860px){
  /* En vertical el texto ocupa el ancho entero, así que el velo también. */
  .hero-video-veil{ background: linear-gradient(180deg, rgba(4,40,58,.72) 0%, rgba(4,40,58,.62) 45%, rgba(4,40,58,.78) 100%); }
}

/* Pausa del vídeo (WCAG 2.2.2). Arriba a la derecha, en el hueco entre la
   cabecera fija y el texto: abajo a la izquierda lo tapaba el aviso de cookies
   en la primera visita (y con teclado quedaba oculto del todo, WCAG 2.4.11), y
   abajo a la derecha va el robot del chat. Oculto hasta que el vídeo se mueve. */
.hero-pausa{
  position: absolute; right: 16px; top: 112px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(4,40,58,.55);
  color: var(--ink-on-deep); font: 600 12.5px/1 var(--sans); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.hero-pausa[hidden]{ display: none; }
.hero-pausa:hover{ background: rgba(4,40,58,.8); border-color: rgba(255,255,255,.6); }
.hero-pausa:focus-visible{ outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.hero-pausa-ic{ width: 13px; height: 13px; fill: currentColor; flex: none; }
.hero-pausa-ic-play,
.hero-pausa.is-pausado .hero-pausa-ic-pausa{ display: none; }
.hero-pausa.is-pausado .hero-pausa-ic-play{ display: block; }
/* Los cortes son los de la cabecera (100 px hasta 560, 117 por encima) y los
   del relleno del hero (150 px hasta 640, 190 por encima). */
@media (min-width: 561px){ .hero-pausa{ top: 125px; } }
@media (min-width: 641px){ .hero-pausa{ top: 132px; } }
@media (min-width: 861px){ .hero-pausa{ right: 24px; } }

.hero-con-video .hero-title{ color: var(--ink-on-deep); }
.hero-con-video .hero-sub{ color: var(--ink-on-deep-mute); }
.hero-con-video .eyebrow{ color: var(--ink-on-deep-mute); }
.hero-con-video .hero-stat b{ color: var(--ink-on-deep); }
.hero-con-video .hero-stat b .unit{ color: var(--accent-hi); }
.hero-con-video .hero-stat span{ color: var(--ink-on-deep-mute); }
/* El degradado del titular se aclara: los tonos pensados para leerse sobre
   blanco se apagan encima del vídeo. */
.hero-con-video .hero-title .grad{
  background: linear-gradient(100deg, var(--accent-hi) 5%, var(--accent) 55%, #7FD8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-con-video .btn-ghost{ color: #FFFFFF; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-con-video .btn-ghost:hover{ background: rgba(255,255,255,.2); border-color: #FFFFFF; box-shadow: none; }

/* =============================================================
   7. Trust strip
   ============================================================= */
.trust{ position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.trust-row{ position: relative; z-index: 1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 26px 0; }
/* Cuando no cabe en una fila (tableta, móvil), centrada: con space-between el
   último elemento se quedaba solo a la izquierda en la segunda fila. */
@media (max-width: 1040px){ .trust-row{ justify-content: center; column-gap: 30px; } }
.trust-item{ display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink-mute); transition: color .25s; }
.trust-item .ic{ color: var(--accent-ink); width: 19px; height: 19px; transition: transform .3s var(--ease-out); }
.trust-item:hover{ color: var(--ink); }
.trust-item:hover .ic{ transform: scale(1.15) rotate(-6deg); }

/* =============================================================
   8. Section shell
   El titular es la pieza que más cambia respecto al diseño viejo:
   enorme y con mucho aire debajo. Es lo que da el ritmo de la
   referencia — cada sección empieza con una afirmación, no con una
   etiqueta pequeña.
   Centrado desde el 07-10-2026 (Joao): a la izquierda dejaba casi medio
   ancho vacío a la derecha mientras el contenido de debajo —tarjetas,
   simulador— va centrado, y la página se veía descuadrada. La etiqueta
   lleva entonces una raya a cada lado, para que no quede coja.
   ============================================================= */
.section{ padding: var(--aire) 0; position: relative; }
.section-head{ max-width: 22ch; margin-bottom: 56px; }
.section-head h2{
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 800; letter-spacing: -.035em;
  color: var(--accent-ink);
  margin-bottom: 18px;
}
.section-head p{ color: var(--ink-mute); font-size: 17px; max-width: 58ch; }
/* Un `p` largo no cabe en las 22ch del titular. */
.section-head{ max-width: none; text-align: center; }
.section-head h2{ max-width: 20ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.section-head p{ margin-left: auto; margin-right: auto; text-wrap: balance; }
.section-head .eyebrow::after,
.hero-con-video .eyebrow::after,
.hero-landing .eyebrow::after{ content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }

/* La banda tintada. Va a todo el ancho aunque el contenido siga centrado:
   la sangría completa es lo que separa una sección de la siguiente sin
   necesidad de una línea. */
.section-alt{ background: var(--bg-tint); }
.section-alt + .section-alt{ padding-top: 0; }

/* La banda oscura: se usa una sola vez por página, para el cierre. Dos ya
   serían un patrón y perdería el golpe. */
.section-deep{ background: var(--bg-deep); color: var(--ink-on-deep); }
.section-deep .section-head h2{ color: var(--accent-hi); }
.section-deep .section-head p,
.section-deep p{ color: var(--ink-on-deep-mute); }
.section-deep .eyebrow{ color: var(--ink-on-deep-mute); }

/* =============================================================
   9. Calculadora
   ============================================================= */
/* La calculadora, en dos columnas: a la izquierda dónde estás y qué llevas
   elegido; a la derecha los campos. El carril se queda a la vista mientras se
   rellena, que era el sentido del cambio. */
.calc-box{
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--sombra-card);
  border-radius: var(--radius-lg);
  max-width: 1000px; margin: 0 auto;
  position: relative; overflow: clip;
  display: grid; grid-template-columns: 300px 1fr;
}
/* El carril de la izquierda es más alto que casi todos los pasos, así que la
   columna de la derecha se quedaba con un socavón de blanco debajo. Centrar el
   paso activo reparte ese hueco arriba y abajo en vez de dejarlo todo al pie. */
.calc-panels{ padding: 44px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.calc-panels > .calc-step.active{ width: 100%; }

.calc-rail{
  background: var(--bg-deep); color: var(--ink-on-deep);
  padding: 40px 30px;
  display: flex; flex-direction: column; gap: 26px;
}
.calc-rail-title{ font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.calc-rail-sub{ font-size: 14px; line-height: 1.55; margin: 0; color: var(--ink-on-deep-mute); }

.calc-steps{ display: flex; flex-direction: column; gap: 2px; margin: 0; }
.calc-steps .dot{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-size: 14.5px; color: var(--ink-on-deep-mute);
  transition: color .25s var(--ease-soft);
}
.calc-steps .dot-num{
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,.28);
  transition: background .25s var(--ease-soft), color .25s, border-color .25s;
}
.calc-steps .dot.active{ color: var(--ink-on-deep); font-weight: 600; }
.calc-steps .dot.active .dot-num{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.calc-steps .dot.hecho .dot-num{ background: rgba(255,255,255,.16); border-color: transparent; color: var(--ink-on-deep); }

.calc-resumen{ display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.calc-resumen:empty{ display: none; }
.calc-resumen .res-linea{ display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.calc-resumen .res-clave{ color: var(--ink-on-deep-mute); }
.calc-resumen .res-valor{ color: var(--ink-on-deep); text-align: right; font-weight: 500; }
.calc-resumen .res-precio{
  margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16);
}
.calc-resumen .res-precio .res-valor{ font-size: 19px; font-variant-numeric: tabular-nums; }

.calc-rail-foot{ margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.calc-rail-ayuda{ font-size: 13px; color: var(--ink-on-deep-mute); margin: 0 0 4px; }
.calc-rail-tel{
  color: var(--ink-on-deep); font-size: 20px; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.calc-rail-tel:hover, .calc-rail-tel:focus-visible{ color: var(--accent); }

/* En móvil el carril va arriba y no se pega: pegado taparía los campos y los
   botones, que es justo lo que no puede pasar en un formulario. */
@media (max-width: 860px){
  .calc-box{ grid-template-columns: 1fr; }
  .calc-panels{ padding: 30px 22px 34px; }
  .calc-rail{ padding: 26px 22px; gap: 18px; }
  .calc-rail-title{ font-size: 24px; }
  .calc-rail-sub{ display: none; }
  .calc-steps{ flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .calc-steps .dot{ padding: 0; gap: 7px; font-size: 13px; white-space: nowrap; }
  .calc-steps .dot .dot-label{ display: none; }
  .calc-steps .dot.active .dot-label{ display: inline; }
  .calc-rail-foot{ margin-top: 0; padding-top: 16px; }
  .calc-rail-tel{ font-size: 18px; }
  /* En móvil el carril va ENCIMA del paso, y su resumen repetía servicio y
     precio justo antes de que el paso de la derecha los enseñara otra vez:
     el resultado y el botón quedaban una pantalla más abajo. Aquí sobra; en
     escritorio, al lado, sigue siendo útil. */
  .calc-resumen{ display: none; }
  .calc-rail-foot{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .calc-rail-ayuda{ margin: 0; }
}
.calc-step{ display: none; }
.calc-step.active{ display: block; animation: fadein .35s var(--ease-soft); }
@keyframes fadein{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.calc-step h3{ font-size: 24px; text-align: center; margin-bottom: 28px; }

.service-pick{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.service-pick .opt{
  border: 1.5px solid var(--line); border-radius: 16px; padding: 30px 12px; text-align: center; cursor: pointer;
  background: var(--bg-2); min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  transition: border-color .25s, background .25s, transform .25s;
}
.service-pick .opt .ic{ margin: 0; color: var(--ink-mute); width: 30px; height: 30px; transition: color .25s; }
.service-pick .opt span{ font-size: 14px; font-weight: 600; }
.service-pick .opt:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.service-pick .opt.selected{ border-color: var(--accent); background: rgba(var(--accent-rgb),.09); }
.service-pick .opt.selected .ic{ color: var(--accent-ink); }
@media (max-width: 560px){ .service-pick{ grid-template-columns: repeat(2,1fr); }
  .service-pick .opt{ min-height: 108px; padding: 22px 10px; } }

.field{ margin-bottom: 26px; }
.field label{ display: block; font-weight: 700; font-size: 13px; margin-bottom: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.choice-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.choice-row .chip{ border: 1.5px solid var(--line-strong); background: var(--bg); padding: 10px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.choice-row .chip:hover{ border-color: var(--ink-dim); }
.choice-row .chip.selected{ border-color: var(--accent); background: rgba(var(--accent-rgb),.1); color: var(--accent-ink); }
.range-wrap{ display: flex; align-items: center; gap: 16px; }
.range-wrap input[type=range]{ flex: 1; accent-color: var(--accent); height: 4px; }
.range-val{ font-family: var(--mono); font-weight: 700; font-size: 15px; min-width: 60px; text-align: right; color: var(--accent-ink); }

.calc-nav{ display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.link-back{ font-weight: 600; font-size: 14px; color: var(--ink-dim); }
.link-back:hover{ color: var(--ink); }

.result-card{ border: 1px solid var(--line); border-radius: 18px; padding: 32px; text-align: center; background: var(--bg-2); margin-bottom: 20px; }
.result-price{ font-family: var(--display); font-weight: 800; font-size: 48px; letter-spacing: -.035em; color: var(--accent-ink); }
.result-price span{ font-size: 15px; color: var(--ink-dim); font-weight: 500; }
.result-note{ font-size: 13px; color: var(--ink-dim); margin-top: 8px; }
.result-subsidy{ margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 8px; }
.result-subsidy[hidden]{ display: none; }
.result-subsidy-row{ display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-mute); }
.result-subsidy-row b{ font-family: var(--mono); color: var(--ink); font-weight: 700; }
.result-subsidy-row.result-final{ font-size: 16px; }
.result-subsidy-row.result-final b{ color: var(--eco); font-size: 20px; }
#result-breakdown{ font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#result-breakdown span{ background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid input{
  grid-column: span 1; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  font-size: 15px; font-family: inherit; background: var(--bg); color: var(--ink);
}
.form-grid input::placeholder{ color: var(--ink-dim); }
.form-grid input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.form-grid .full{ grid-column: 1/-1; }
.rgpd{ display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-mute); margin: 18px 0; }
.rgpd input{ flex: none; width: 18px; height: 18px; accent-color: var(--accent); }

/* =============================================================
   9b. Simulador de ahorro
   ============================================================= */
.sim-box{
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px 44px; align-items: center;
  padding: 44px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--sombra-card);
}
.section-alt .sim-box{ background: var(--bg); }
.sim-system{ grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.sim-system label,
.sim-input label{ display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); margin-bottom: 12px; }
.sim-amount{ display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.sim-amount b{ font-family: var(--display); font-size: 52px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); line-height: 1; }
.sim-amount span{ font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.sim-input input[type=range]{
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 100px;
  background: var(--line-strong); outline-offset: 6px; cursor: pointer;
}
.sim-input input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15,36,48,.22); transition: transform .15s;
}
.sim-input input[type=range]::-webkit-slider-thumb:active{ transform: scale(1.12); }
.sim-input input[type=range]::-moz-range-thumb{
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 2px 8px rgba(15,36,48,.22);
}
.sim-scale{ display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-dim); margin-top: 10px; }
.sim-flow{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sim-result{
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 3px;
}
.sim-result-label{ font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); }
.sim-result-val{ font-size: 16px; color: var(--ink-mute); }
.sim-result-val b{ font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-right: 3px; }
.sim-result-big{ border-color: rgba(var(--accent-3-rgb),.4); background: rgba(var(--accent-3-rgb),.08); }
/* El ahorro va en el verde de la "e" del logo: es la cifra de dinero que se
   queda en casa. Oscurecido para leerse sobre claro. */
.sim-result-big .sim-result-val b{ font-size: 42px; color: var(--eco); }
.sim-arrow{ width: 22px; height: 22px; color: var(--accent-2-ink); margin: -2px auto; opacity: .8; }
.sim-foot{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.sim-note{ font-size: 13px; color: var(--ink-dim); max-width: 460px; margin: 0; }
@media (max-width: 760px){
  .sim-box{ grid-template-columns: 1fr; padding: 28px 22px; gap: 26px; }
  .sim-foot{ flex-direction: column; align-items: stretch; }
}

/* =============================================================
   10. Servicios — lista vertical con panel fijo
   El esquema técnico queda pegado (sticky) mientras la lista pasa por
   delante. El panel se queda OSCURO a propósito aunque la web sea
   clara: los esquemas son líneas blancas sobre negro y se montan con
   `mix-blend-mode: screen`; sobre blanco desaparecerían del todo.
   ============================================================= */
.svc-scroll{
  display: grid;
  grid-template-columns: minmax(300px, 470px) 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.svc-visual{
  position: sticky;
  top: calc(50vh - min(230px, 19vw));
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 120% at 30% 20%, var(--bg-deep-2), var(--bg-deep));
  overflow: hidden;
  box-shadow: var(--sombra-card);
}
.svc-visual img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity .7s var(--ease-soft), transform .9s var(--ease-soft);
  mix-blend-mode: screen;
}
.svc-visual img.visible{ opacity: 1; transform: none; }
.svc-visual .svc-num{
  position: absolute; right: 20px; bottom: 10px;
  font-family: var(--mono); font-size: 46px; font-weight: 700;
  color: rgba(var(--accent-rgb), .45);
}
/* Filas altas: cada una ocupa buena parte de la pantalla para que el
   recorrido se sienta como capítulos, no como una lista. */
.svc-scroll .service-row{ min-height: 44vh; transition: opacity .5s var(--ease-soft), background .3s, padding-left .3s; }
/* El :not() sube la especificidad por encima de [data-reveal].is-revealed,
   que si no re-encendería las filas apagadas al entrar en pantalla. */
.svc-scroll .service-row.is-revealed:not(.is-activo){ opacity: .35; }
.svc-scroll .service-row.is-activo{ opacity: 1; }
.svc-scroll .service-row .service-name{ transition: color .5s; }
.svc-scroll .service-row.is-activo .service-name{ color: var(--accent-ink); }

.service-list{ border-top: 1px solid var(--line); }
.service-row{
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 24px;
  padding: 30px 20px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .3s var(--ease-out), padding-left .3s var(--ease-out);
}
.service-row:hover{ background: var(--accent); padding-left: 34px; }
.service-row:hover .service-num,
.service-row:hover .service-name,
.service-row:hover .service-brief,
.service-row:hover .service-arrow{ color: var(--on-accent); }
.service-num{ font-family: var(--mono); font-size: 14px; color: var(--ink-dim); transition: color .3s; }
.service-name{ font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.4rem, 2.8vw, 2.15rem); transition: color .3s; }
.service-meta{ display: flex; flex-direction: column; gap: 5px; }
.service-brief{ font-size: 14.5px; color: var(--ink-mute); transition: color .3s; }
.service-arrow{ color: var(--ink-dim); transition: color .3s, transform .3s; }
.service-row:hover .service-arrow{ transform: translateX(6px); }

@media (max-width: 900px){
  /* En móvil no hay sitio para el panel fijo: quedaban huecos enormes y el
     número salía dos veces. La lista vuelve al formato normal, compacta. */
  .svc-scroll{ grid-template-columns: 1fr; gap: 0; }
  .svc-visual{ display: none; }
  .svc-scroll .service-row{ min-height: 0; }
  .svc-scroll .service-row.is-revealed:not(.is-activo){ opacity: 1; }
  .svc-scroll .service-row.is-activo .service-name{ color: inherit; }
}
@media (prefers-reduced-motion: reduce){
  .svc-visual img{ transition: none; transform: none; }
  .svc-scroll .service-row{ transition: none; opacity: 1; }
}

/* =============================================================
   10b. Galería
   ============================================================= */
.gallery-film{
  margin: 0 0 18px; border-radius: var(--radius-lg); overflow: clip;
  aspect-ratio: 16/9; background: var(--bg-deep); box-shadow: var(--sombra-card);
}
.gallery-film video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.gallery-item{ position: relative; border-radius: var(--radius); overflow: clip; aspect-ratio: 4/3; background: var(--bg-3); box-shadow: var(--sombra-card); transition: box-shadow .35s, transform .35s var(--ease-soft); }
.gallery-item:hover{ box-shadow: var(--sombra-card-hover); transform: translateY(-3px); }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-soft); }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
  font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(0deg, rgba(4,40,58,.85), transparent);
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* Acordeón de trabajos por servicio */
.trabajos-acordeon{ display: flex; flex-direction: column; gap: 14px; }
.trabajo-grupo{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); overflow: clip; box-shadow: var(--sombra-card);
}
.trabajo-grupo[open]{ border-color: var(--line-strong); }
.trabajo-head{
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 22px 24px; list-style: none; user-select: none;
  font-family: var(--display); transition: background .2s;
}
.trabajo-head::-webkit-details-marker{ display: none; }
.trabajo-head:hover{ background: var(--bg-2); }
.trabajo-titulo{ font-size: 20px; font-weight: 700; letter-spacing: -.02em; flex: 1 1 auto; }
.trabajo-conteo{ font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.trabajo-chevron{ width: 20px; height: 20px; fill: none; stroke: var(--accent-ink); stroke-width: 2; transition: transform .3s var(--ease-soft); flex: none; }
.trabajo-grupo[open] .trabajo-chevron{ transform: rotate(180deg); }
.trabajo-grupo .gallery-grid{ padding: 0 24px 24px; }
@media (max-width: 600px){
  .trabajo-head{ padding: 16px; }
  .trabajo-titulo{ font-size: 17px; }
  .trabajo-grupo .gallery-grid{ padding: 0 16px 16px; }
}

/* =============================================================
   11. Proceso
   ============================================================= */
.steps-row{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: clip; }
/* Las step-card viven en una rejilla con overflow:clip, así que no las movemos
   en vertical (se cortarían): se "elevan" solo con fondo y sombra interior. */
.step-card{ padding: 34px 28px; background: var(--bg); transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.step-card:hover{ background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.28); }
.step-card .num{ font-family: var(--mono); color: var(--accent-ink); font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.step-card h4{ font-size: 19px; margin-bottom: 9px; }
.step-card p{ font-size: 14.5px; color: var(--ink-mute); }
@media (max-width: 900px){ .steps-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps-row{ grid-template-columns: 1fr; } }

/* =============================================================
   12. Equipo
   ============================================================= */
/* Ficha de equipo: la foto manda.
   Antes era un círculo de 68 px con un retrato retocado al lado del texto. En
   una empresa que entra en casa del cliente, la cara de quien va a entrar es
   justo lo que hay que enseñar grande, así que la foto pasa a ocupar el ancho
   entero de la tarjeta y el texto va debajo. Se mantiene el lenguaje del resto
   de tarjetas de la web: fondo blanco, filete fino, sombra suave y el mismo
   levantarse al pasar por encima. */
/* ---- Equipo -----------------------------------------------------------
   Texto a la izquierda, retratos a la derecha y desiguales de altura: es lo
   que hace que dos fotos parezcan una composición y no una tabla. La tarjeta
   la sigue pintando `loadTeam` con lo que hay en el panel, así que aquí solo
   cambia cómo se ve, nunca qué se enseña. */
.team-split{ display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 60px; align-items: center; }
.team-intro{ max-width: 420px; }
.team-titular{
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em;
  margin: 14px 0 24px; text-wrap: balance;
}
.team-titular span{ display: block; color: var(--ink-dim); }
.team-texto{ font-size: 16.5px; line-height: 1.65; color: var(--ink-mute); margin: 0 0 26px; max-width: 38ch; }
.team-enlace{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.team-enlace::after{ content: "↗"; font-size: .9em; }
.team-enlace:hover, .team-enlace:focus-visible{ color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

.team-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; align-items: start; }
.team-grid .team-card:nth-child(even){ margin-top: 56px; }
.team-card{
  background: transparent; border: 0; border-radius: 0;
  padding: 0; display: flex; flex-direction: column; overflow: visible;
  box-shadow: none; transition: transform .3s var(--ease-soft);
}
.team-card:hover{ transform: translateY(-4px); }
.avatar{
  width: 100%; aspect-ratio: 4 / 5; border-radius: 0; flex: none;
  background: var(--bg-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font-weight: 800; font-family: var(--display); font-size: 44px;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-soft); }
.team-card:hover .avatar img{ transform: scale(1.04); }
.team-datos{ padding: 18px 2px 0; }
.team-card h4{ font-size: 21px; margin-bottom: 4px; letter-spacing: -.01em; }
.team-card .role{ font-family: var(--mono); color: var(--accent-ink); font-size: 12px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.team-card p{ font-size: 15.5px; color: var(--ink-mute); }
@media (max-width: 700px){ .team-grid{ grid-template-columns: 1fr; } .team-datos{ padding: 22px 22px 26px; } }

/* =============================================================
   13. Zonas
   ============================================================= */
.zone-box{ border-radius: var(--radius-lg); padding: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sombra-card); position: relative; overflow: clip; }
.zone-box > * { position: relative; z-index: 1; }
.zone-box h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.zone-box p{ color: var(--ink-mute); margin-bottom: 22px; font-size: 16px; }
.zone-tags{ display: flex; gap: 10px; flex-wrap: wrap; }
.zone-tags span{ display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); padding: 9px 17px; border-radius: 100px; font-size: 13.5px; font-weight: 700; }
.zone-tags .ic{ width: 15px; height: 15px; color: var(--accent-ink); }
.zone-cities{ display: flex; flex-direction: column; gap: 15px; }
.zone-city{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 15px; font-weight: 700; font-size: 15.5px; }
.zone-city .ok{ color: var(--eco); font-family: var(--mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
@media (max-width: 800px){ .zone-box{ grid-template-columns: 1fr; padding: 32px; } }

/* Mapa y oficina */
.map-block{ margin-top: 26px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: stretch; }
.map-info{ border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; background: var(--bg); box-shadow: var(--sombra-card); display: flex; flex-direction: column; justify-content: center; }
.map-info h3{ font-size: 24px; margin-bottom: 18px; }
.map-address{ display: flex; gap: 9px; color: var(--ink-mute); font-size: 16px; line-height: 1.55; margin-bottom: 26px; }
.map-address .ic{ width: 18px; height: 18px; color: var(--accent-ink); flex-shrink: 0; margin-top: 3px; }
.map-info .btn{ align-self: flex-start; }
.map-embed{ border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: clip; min-height: 340px; box-shadow: var(--sombra-card); }
/* Sin filtros de color: el mapa se enseña como es. El invert que llevaba antes
   servía para que encajase en el fondo oscuro; sobre blanco lo estropea. */
.map-embed iframe{ width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* Lo que se ve mientras el mapa no se ha pedido: ocupa el mismo hueco que el
   iframe, así que al cargarlo no salta nada de sitio. */
.map-cargar{ width: 100%; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 26px; text-align: center; background: var(--bg-2); color: var(--ink-mute); cursor: pointer; transition: background .2s, color .2s; }
.map-cargar:hover{ background: var(--bg-3); color: var(--ink); }
.map-cargar .ic{ width: 30px; height: 30px; color: var(--accent-ink); }
.map-cargar-titulo{ font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); }
.map-cargar-nota{ font-size: 13px; max-width: 34ch; line-height: 1.5; }
@media (max-width: 800px){ .map-block{ grid-template-columns: 1fr; } .map-embed, .map-cargar{ min-height: 280px; } }

/* =============================================================
   14. FAQ
   ============================================================= */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width: 100%; text-align: left; padding: 26px 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; font-family: var(--display); display: flex; justify-content: space-between; align-items: center; gap: 18px; transition: color .25s; }
.faq-q:hover{ color: var(--accent-ink); }
.faq-q .ic{ color: var(--accent-ink); transition: transform .3s; width: 19px; height: 19px; }
.faq-item.open .ic{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-soft); }
.faq-a p{ padding-bottom: 26px; color: var(--ink-mute); font-size: 16px; max-width: 72ch; }
.faq-item.open .faq-a{ max-height: 340px; }
.faq-a strong{ color: var(--ink); font-weight: 700; }

/* =============================================================
   15. Blog
   ============================================================= */
.blog-filters{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; justify-content: center; }
.filter-chip{ border: 1.5px solid var(--line-strong); background: var(--bg); padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; color: var(--ink-mute); transition: border-color .2s, color .2s, background .2s; }
.filter-chip:hover{ border-color: var(--ink-dim); color: var(--ink); }
.filter-chip.active{ border-color: var(--accent); color: var(--accent-ink); background: rgba(var(--accent-rgb),.09); }

.blog-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.blog-card2{ display: block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; box-shadow: var(--sombra-card); transition: box-shadow .3s, transform .3s var(--ease-soft); }
.blog-card2:hover{ box-shadow: var(--sombra-card-hover); transform: translateY(-4px); }
.blog-card2[hidden]{ display: none; }
.blog-card2-img{ aspect-ratio: 16/10; overflow: hidden; background: var(--bg-3); }
.blog-card2-img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-soft); }
.blog-card2:hover .blog-card2-img img{ transform: scale(1.06); }
.blog-card2-body{ padding: 22px; }
.tag-badge{ display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); border: 1px solid var(--line-strong); padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; }
.blog-card2 h3{ font-size: 17px; margin-bottom: 10px; line-height: 1.3; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.blog-card2 p{ font-size: 13.5px; color: var(--ink-mute); margin-bottom: 14px; line-height: 1.55; }
.blog-date{ font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .blog-grid{ grid-template-columns: 1fr; } }

/* =============================================================
   15b. Página de artículo
   ============================================================= */
/* Artículo del blog. La cabecera mide 120 px con la topbar (100 en el móvil):
   el hueco va aquí, no en un style= de cada artículo, que con la cabecera de
   julio dejaba «Volver al blog» metido debajo de la topbar. */
.articulo{ padding-top: 164px; }
.articulo .back-link{ display: flex; width: fit-content; }
.back-link{ display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ink-mute); margin-bottom: 8px; }
.back-link:hover{ color: var(--accent-ink); }
.article-title{ font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; margin: 18px 0 14px; }
.article-meta{ color: var(--ink-dim); font-size: 13px; margin-bottom: 32px; }
.article-hero-img{ border-radius: var(--radius-lg); overflow: clip; margin-bottom: 44px; aspect-ratio: 16/9; background: var(--bg-2); box-shadow: var(--sombra-card); }
.article-hero-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Las cabeceras generadas lo dicen (manual de marca: una imagen generada no
   se hace pasar por una obra nuestra). Va pegada a la imagen. */
.article-hero-img:has(+ .article-hero-nota){ margin-bottom: 10px; }
.article-hero-nota{ font-size: 13px; color: var(--ink-dim); margin: 0 0 40px; }
.article-body{ font-size: 17.5px; line-height: 1.78; color: var(--ink-mute); max-width: 68ch; }
.article-body h2{ font-size: 26px; color: var(--ink); margin: 46px 0 16px; font-weight: 700; }
.article-body h3{ font-size: 20px; color: var(--ink); margin: 34px 0 12px; font-weight: 700; }
.article-body p{ margin-bottom: 20px; }
.article-body ul{ margin: 0 0 20px 20px; }
.article-body li{ margin-bottom: 9px; }
.article-body strong{ color: var(--ink); font-weight: 700; }

/* =============================================================
   16. CTA final
   Va sobre la banda oscura: es el último bloque antes del pie y el
   cambio de fondo funciona como punto final.
   ============================================================= */
.cta-final{ padding: 20px 0; text-align: center; position: relative; }
.cta-final h2{ font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; color: var(--ink-on-deep); margin-bottom: 14px; }
.cta-final p{ color: var(--ink-on-deep-mute); margin-bottom: 32px; font-size: 17px; }
.cta-final-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =============================================================
   17. Pie
   Oscuro, con una fila de contacto arriba y las columnas de enlaces
   debajo. El pie es lo único que se repite en todas las páginas del
   sitio: si cambia aquí, cambia también en scripts/gen-landings.js.
   ============================================================= */
footer{ background: var(--bg-deep); color: var(--ink-on-deep); padding: 72px 0 28px; }
.foot-contact{
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding-bottom: 40px; margin-bottom: 44px; border-bottom: 1px solid var(--line-on-deep);
}
.foot-contact-label{ font-size: 13px; color: var(--ink-on-deep-mute); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 10px; }
.foot-email{
  font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em;
  display: inline-block; position: relative; color: var(--ink-on-deep);
}
.foot-email::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.foot-email:hover::after{ transform: scaleX(1); transform-origin: left; }
.foot-email:hover{ color: var(--accent-hi); }

.foot-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.foot-grid h4{ font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-on-deep); margin-bottom: 18px; font-weight: 700; }
.foot-grid ul{ list-style: none; }
.foot-grid li{ margin-bottom: 12px; font-size: 14.5px; color: var(--ink-on-deep-mute); display: flex; align-items: center; gap: 9px; }
.foot-grid li a{ transition: color .2s; }
.foot-grid li a:hover{ color: var(--accent-hi); }
.foot-grid .ic{ width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.foot-grid > div > p{ font-size: 14.5px; color: var(--ink-on-deep-mute); }
.cargando{ color: var(--ink-dim); }
.foot-sat{ display: inline-flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 14px; padding: 12px 18px 9px; background: #fff; border-radius: 12px; }
.foot-sat img{ width: 96px; height: auto; display: block; }
.foot-sat span{ font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #15202b; }
.foot-redes{ display: flex; gap: 10px; margin-top: 18px; }
.foot-redes a{ width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-on-deep); border-radius: 10px; color: var(--ink-on-deep-mute); transition: color .2s, border-color .2s, transform .2s; }
.foot-redes a:hover{ color: var(--accent-hi); border-color: var(--accent-hi); transform: translateY(-2px); }
.foot-redes svg{ width: 17px; height: 17px; fill: currentColor; }
.foot-bottom{ border-top: 1px solid var(--line-on-deep); padding-top: 22px; display: flex; justify-content: space-between; font-size: 12.5px; flex-wrap: wrap; gap: 10px; color: var(--ink-on-deep-mute); }
/* El crédito del estudio: presente pero sin pelearse con el aviso legal. Sin
   enlace a propósito — no hay una web de TAP Digital que verificar. */
.foot-credito{ opacity: .62; }
.foot-credito a{ color: inherit; text-decoration: none; }
.foot-credito a:hover, .foot-credito a:focus-visible{ text-decoration: underline; }
.foot-credito::before{ content: " \00B7 "; }
/* Enlaces de una línea de 12,5 px: sin relleno, 15 px de alto para el dedo. */
.foot-bottom a{ display: inline-block; padding: 5px 0; }
.foot-bottom a:hover{ color: var(--accent-hi); }
@media (max-width: 800px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }

/* =============================================================
   18. Landings locales (servicio × municipio)
   ============================================================= */
.hero-landing{ min-height: auto; padding: 190px 0 84px; }
.crumbs{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 20px; }
.crumbs a{ color: var(--ink-mute); padding: 4px 0; }
.crumbs a:hover{ color: var(--accent-ink); }
.landing-grid{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.landing-main h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 18px; color: var(--accent-ink); }
.landing-main p{ color: var(--ink-mute); font-size: 17px; margin-bottom: 18px; max-width: 62ch; }
.landing-list{ list-style: none; margin-top: 8px; display: grid; gap: 13px; }
.landing-list li{ display: flex; align-items: flex-start; gap: 11px; color: var(--ink); font-size: 16px; }
.landing-list .ic{ color: var(--eco); width: 21px; height: 21px; flex: none; margin-top: 2px; }
.landing-aside{ position: sticky; top: 120px; }
.price-card{
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px;
  background: var(--bg); box-shadow: var(--sombra-card);
}
.price-card-label{ font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-dim); }
.price-card-num{ font-family: var(--display); font-weight: 800; font-size: 46px; letter-spacing: -.035em; color: var(--accent-ink); margin: 6px 0 12px; }
.price-card-note{ font-size: 13.5px; color: var(--ink-mute); margin-bottom: 22px; }
.btn-block{ display: flex; justify-content: center; width: 100%; margin-bottom: 10px; }
.btn-block:last-child{ margin-bottom: 0; }
.related-links{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.related-links a,
.zone-links-row a{
  padding: 11px 19px; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--bg);
  font-size: 14px; font-weight: 600; color: var(--ink-mute); transition: color .25s, border-color .25s, background .25s;
}
.related-links a:hover,
.zone-links-row a:hover{ color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.zone-links{ margin: 32px 0 8px; text-align: center; }
.zone-links .eyebrow{ margin-bottom: 16px; }
.zone-links .eyebrow::after{ content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
.zone-links-row{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 820px){
  .landing-grid{ grid-template-columns: 1fr; gap: 34px; }
  .landing-aside{ position: static; }
}

/* Aviso de que el envío ha fallado y acuse de que ha salido bien. */
.lead-error{ margin: 0 0 12px; padding: 11px 15px; border-radius: 12px; font-size: 14px;
  background: #FCEBEA; border: 1px solid #F1C4C1; color: #B3261E; }
.lead-done{ text-align: center; padding: 28px 20px; }
.lead-done .ic{ width: 46px; height: 46px; stroke: var(--eco); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.lead-done h4{ font-family: var(--display); font-size: 24px; margin: 0 0 9px; }
.lead-done p{ color: var(--ink-mute); font-size: 15.5px; margin: 0; }

/* =============================================================
   19. Reseñas de Google (las pinta main.js desde /api/reviews)
   ============================================================= */
.reviews-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .reviews-grid{ grid-template-columns: 1fr; } }

.rev-card{
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 13px;
  box-shadow: var(--sombra-card); transition: box-shadow .3s, transform .3s var(--ease-soft);
}
.rev-card:hover{ box-shadow: var(--sombra-card-hover); transform: translateY(-3px); }
.rev-head{ display: flex; align-items: center; gap: 12px; }
.rev-quien{ flex: 1 1 auto; min-width: 0; }
.rev-foto, .rev-inicial{
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; object-fit: cover;
  background: var(--bg-3); color: var(--accent-ink);
  font-family: var(--display); font-size: 16px; font-weight: 700;
}
.rev-autor{ display: block; font-weight: 700; font-size: 15px; }
.rev-cuando{ display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }
/* La "G" de Google, arriba a la derecha de cada tarjeta, como en el widget real. */
.rev-g{ width: 20px; height: 20px; flex: none; align-self: flex-start; }
.stars{ display: flex; gap: 2px; }
.star{ width: 16px; height: 16px; fill: #dadce0; stroke: none; }
/* La estrella llena va en amarillo Google (#FBBC04): es la estética que la gente
   reconoce de una reseña real de Google. */
.star.on{ fill: #fbbc04; }
.rev-texto{
  font-size: 14.5px; line-height: 1.65; color: var(--ink-mute); margin: 0;
  /* Una reseña larga no puede reventar la altura de la tarjeta y descuadrar la
     rejilla: se corta a 6 líneas y el resto se lee en Google. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-enlace{ margin-top: auto; padding: 5px 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); transition: color .25s; }
.rev-card:hover .rev-enlace{ color: var(--accent-ink); }
.reviews-foot{ margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.reviews-attrib{ font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }

/* =============================================================
   20. Capa inmersiva (anim.js)
   Todo lo de aquí es adorno: si el usuario pide reducir movimiento,
   se apaga entero al final del bloque y la web se lee igual.
   ============================================================= */

/* --- Titulares palabra a palabra --- */
/* La máscara recorta por abajo; la palabra sube desde fuera de ella. Sin la
   máscara la palabra "aparecería" flotando en mitad del hueco. */
.w-mask{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.w-word{
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .7s var(--ease-soft), opacity .7s var(--ease-soft);
}
.is-in .w-word{ transform: none; opacity: 1; }
/* Titular que salió por arriba: las palabras se esconden por ENCIMA de su
   máscara (-105%) en vez de por debajo, para caer al recuperarlo subiendo. */
.desde-arriba:not(.is-in) .w-word{ transform: translateY(-105%); }

/* --- Cinta de municipios --- */
.towns{
  margin-top: 26px;
  overflow: hidden;
  /* Se difumina en los bordes en vez de cortarse en seco: así parece que
     los nombres siguen más allá de la pantalla, que es la idea. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.towns-row{
  display: flex;
  gap: 10px;
  width: max-content;
  margin-bottom: 10px;
  animation: townsSlide 46s linear infinite;
}
.towns-row-rev{ animation-duration: 58s; animation-direction: reverse; margin-bottom: 0; }
.towns:hover .towns-row,
.towns.is-pausado .towns-row{ animation-play-state: paused; }
/* El botón de pausa (main.js, initTownsPausa): pasar el ratón no sirve con
   teclado ni en el móvil. Pequeño y a la derecha, debajo de la cinta. */
.towns-pausa{
  display: block; margin: 10px 0 0 auto; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--bg);
  font: 600 12px/1 var(--sans); color: var(--ink-mute); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.towns-pausa:hover{ color: var(--ink); border-color: var(--ink-dim); }
.towns-pausa:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.towns-row span{
  flex: none;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}
/* Cada fila lleva sus nombres duplicados: al desplazar exactamente el 50% del
   ancho, la segunda copia queda donde empezaba la primera y el bucle no tiene
   costura visible. */
@keyframes townsSlide{ to{ transform: translateX(-50%); } }

/* --- Tarjetas que se inclinan con el puntero --- */
.tiltable{
  position: relative;
  transition: transform .4s var(--ease-soft), box-shadow .3s;
  transform-style: preserve-3d;
}
.tiltable::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(circle 240px at var(--mx) var(--my), rgba(var(--accent-rgb), .10), transparent 65%);
}
.tiltable:hover::after{ opacity: 1; }

/* --- La línea del proceso se dibuja al bajar --- */
.steps-row.has-line{ position: relative; }
.steps-row.has-line::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: var(--linea, 0%);
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  pointer-events: none;
  z-index: 2;
}

.hero-inner{ will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce){
  .w-word{ transform: none; opacity: 1; transition: none; }
  .towns-row{ animation: none; }
  .towns-pausa{ display: none; }
  .tiltable{ transition: none; }
  .steps-row.has-line::after{ display: none; }
  .hero-gradient{ transition: none; }
}

/* =============================================================
   21. Chatbot
   ============================================================= */
.chat-widget{ position: fixed; right: 22px; bottom: 22px; z-index: 300; font-family: var(--sans); }
.chat-launcher{ position: relative; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-hi), var(--accent)); box-shadow: 0 10px 30px rgba(15,36,48,.24); display: flex; align-items: center; justify-content: center; color: var(--on-accent); transition: transform .25s var(--ease-out); }
.chat-launcher:hover{ transform: scale(1.06); }
.chat-launcher svg{ width: 26px; height: 26px; stroke: var(--on-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: absolute; transition: opacity .2s, transform .2s; }
.chat-ic-close{ opacity: 0; transform: rotate(-45deg); }
.chat-widget.open .chat-ic-open{ opacity: 0; transform: rotate(45deg); }
.chat-widget.open .chat-ic-close{ opacity: 1; transform: rotate(0); }
.chat-launcher-badge{ position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E5312B; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.chat-widget.open .chat-launcher-badge{ display: none; }

.chat-panel{ position: absolute; right: 0; bottom: 74px; width: min(390px, calc(100vw - 32px)); height: min(580px, calc(100vh - 120px)); background: var(--bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 28px 70px rgba(15,36,48,.24); animation: chatIn .3s var(--ease-out); }
.chat-panel[hidden]{ display: none; }
@keyframes chatIn{ from{ opacity: 0; transform: translateY(16px) scale(.97); } to{ opacity: 1; transform: none; } }

.chat-head{ display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.chat-head-avatar{ width: 40px; height: 40px; border-radius: 12px; background: radial-gradient(circle at 30% 30%, var(--accent-hi), var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-head-info{ flex: 1; display: flex; flex-direction: column; }
.chat-head-info strong{ font-size: 15px; font-family: var(--display); }
.chat-head-info span{ font-size: 11.5px; color: var(--ink-mute); display: flex; align-items: center; gap: 6px; }
.chat-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--eco); }
.chat-min{ color: var(--ink-mute); width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-right: -6px; }
.chat-min:hover{ color: var(--ink); background: var(--bg-3); }

.chat-body{ flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg{ max-width: 85%; padding: 12px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.chat-msg.bot{ align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.chat-msg.user{ align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; font-weight: 600; }
.chat-typing{ align-self: flex-start; display: flex; gap: 4px; padding: 13px 15px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-typing i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); animation: chatBlink 1.2s infinite; }
.chat-typing i:nth-child(2){ animation-delay: .2s; }
.chat-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes chatBlink{ 0%,60%,100%{ opacity: .3; } 30%{ opacity: 1; } }

.chat-suggestions{ display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.chat-chip{ text-align: left; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); border-radius: 100px; padding: 10px 15px; font-size: 13.5px; font-weight: 600; transition: border-color .2s, background .2s; }
.chat-chip:hover{ border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }

.chat-input{ display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat-input input{ flex: 1; padding: 12px 15px; border: 1.5px solid var(--line-strong); border-radius: 100px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 14.5px; }
.chat-input input:focus{ outline: none; border-color: var(--accent); }
.chat-input button{ width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.chat-input button:hover{ background: var(--accent-hi); }

/* Aviso de privacidad del chat. Va debajo del campo de escribir, dentro del
   panel: se ve al abrirlo, antes de escribir nada, y no tapa la conversación.
   El color es --ink-mute y no --ink-dim a propósito: este es justo el texto
   que no puede costar leer. */
.chat-aviso{ margin: 0; padding: 0 16px 12px; background: var(--bg-2); color: var(--ink-mute); font-size: 12px; line-height: 1.5; }
.chat-aviso a{ color: var(--accent-ink); text-decoration: underline; }
.chat-aviso a:hover{ color: var(--ink); }

@media (max-width: 560px){
  /* En el móvil el chat ocupa toda la pantalla. Como tarjeta anclada a una
     esquina dejaba ver la web por detrás (franja a la derecha, hueco abajo, el
     robot asomando). A pantalla completa no asoma nada.

     La altura la fija main.js con --chat-vh a partir de visualViewport: cuando
     sale el teclado, iOS NO encoge el 100dvh (el input quedaba tapado), así que
     ajustamos la caja al alto realmente visible. Sin JS, cae al 100dvh. */
  .chat-panel{
    position: fixed;
    /* --chat-top: donde empieza lo visible cuando iOS desplaza la pantalla
       al sacar el teclado (main.js, fitToViewport). */
    top: var(--chat-top, 0); left: 0; right: 0;
    width: 100%;
    height: var(--chat-vh, 100dvh);
    border: 0;
    border-radius: 0;
  }
  /* Respeta el notch y la barra de gestos del iPhone. */
  .chat-head{ padding: calc(16px + env(safe-area-inset-top)) 16px 16px 18px; }
  .chat-input{ padding-bottom: 10px; }
  .chat-aviso{ padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* 16px es el mínimo que evita el zoom automático de Safari al enfocar el input
     (con menos, iOS hace zoom y se salen elementos de la pantalla). */
  .chat-input input{ font-size: 16px; }
  .chat-min{ width: 48px; height: 48px; margin-right: -8px; }
  .chat-min .ic{ width: 26px !important; height: 26px !important; }
}
/* La página del chat (/chat/): el chat a pantalla completa, sin la web
   detrás. Es lo que abre el robot en el móvil (main.js, initChat). En un
   ordenador, si alguien llega aquí, una columna centrada. */
body.chat-pagina{ background: var(--bg-2); overflow: hidden; }
.chat-pagina .chat-widget{ position: static; }
.chat-pagina .chat-panel{
  position: fixed; top: var(--chat-top, 0); left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 760px; height: var(--chat-vh, 100dvh);
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 0; box-shadow: none; animation: none;
}
.chat-pagina .chat-head{ padding-top: calc(14px + env(safe-area-inset-top)); }
.chat-pagina .chat-aviso{ padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.chat-pagina .chat-input input{ font-size: 16px; }
.chat-volver{
  width: 44px; height: 44px; flex-shrink: 0; margin-left: -10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink);
}
.chat-volver:hover{ background: var(--bg-3); }
@media (max-width: 760px){
  .chat-pagina .chat-panel{ border-left: 0; border-right: 0; }
}
.chat-msg.bot a{ color: var(--accent-ink); text-decoration: underline; }
.chat-msg.bot strong{ color: var(--ink); font-weight: 700; }
.chat-cta{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--accent); color: var(--on-accent); border-radius: 100px; padding: 13px 18px; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(245,130,31,.28); transition: transform .2s var(--ease-out); }
.chat-cta:hover{ transform: translateY(-2px); }
.chat-cta .ic{ stroke: var(--on-accent); }

/* El robot ES el botón del chat */
.chat-mascot{ position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: bottom right; animation: mascotIn .5s var(--ease-out) both; }
.chat-widget.open .chat-mascot{ opacity: 0; transform: scale(.6) translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s; }
.chat-mascot-bubble{ position: absolute; right: 4px; bottom: 78px; background: var(--bg-deep); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 14px; border-bottom-right-radius: 4px; box-shadow: 0 8px 22px rgba(15,36,48,.24); white-space: nowrap; animation: mascotBubble 3s ease-in-out 1; transition: opacity .3s, transform .3s; }
.chat-mascot.is-quiet .chat-mascot-bubble{ opacity: 0; transform: scale(.7) translateY(6px); pointer-events: none; }
.chat-mascot-badge{ position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E5312B; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); z-index: 2; }
/* El cuerpo del robot es --on-accent (azul marino) con el trazo en ámbar: sobre
   blanco, un robot blanco desaparecería.
   Los gestos se repiten unas cuantas veces y paran antes de 5 s (WCAG 2.2.2:
   lo que se mueve solo más tiempo junto a texto tiene que poder pararse, y un
   robot saludando sin fin al lado del formulario distrae). Todos los
   fotogramas clave acaban como empiezan, así que se para en reposo. */
.chat-mascot-bot{ width: 74px; height: 84px; overflow: visible; animation: mascotBob 2.4s ease-in-out 2; transition: transform .25s var(--ease-out); filter: drop-shadow(0 6px 16px rgba(15,36,48,.18)); }
.chat-mascot:hover .chat-mascot-bot{ transform: scale(1.08); }
/* transform-box: view-box es imprescindible para que Safari iOS anime las
   partes internas del SVG (brazo, mano, ojos). Sin él, iOS toma el origen
   respecto al border-box y el brazo/mano no giran → "el bot no se mueve en
   móvil". Los transform-origin numéricos están en coordenadas del viewBox. */
.bot-arm, .bot-hand, .bot-antenna-dot, .bot-eye{ transform-box: view-box; }
.bot-arm{ transform-origin: 16px 40px; animation: mascotWave .7s ease-in-out 6; }
.bot-hand{ transform-origin: 5px 18px; animation: mascotHand .35s ease-in-out 12; }
.bot-antenna-dot{ transform-origin: 36px 8px; animation: mascotBlink 1.6s ease-in-out 3; }
.bot-eye{ transform-origin: center; animation: mascotEyes 4s ease-in-out 1; }
@keyframes mascotIn{ from{ opacity: 0; transform: scale(.4) translateY(20px); } to{ opacity: 1; transform: scale(1) translateY(0); } }
@keyframes mascotBob{ 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-5px) rotate(2deg); } }
@keyframes mascotWave{ 0%,100%{ transform: rotate(-6deg); } 50%{ transform: rotate(26deg); } }
@keyframes mascotHand{ 0%,100%{ transform: rotate(-16deg); } 50%{ transform: rotate(16deg); } }
@keyframes mascotBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
@keyframes mascotEyes{ 0%,90%,100%{ transform: scaleY(1); } 95%{ transform: scaleY(.15); } }
@keyframes mascotBubble{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
/* Con "reduce motion" activado (frecuente en móviles) no lo congelamos del todo:
   quitamos los gestos enérgicos (saludo, parpadeo) y queda un único balanceo
   lento al aparecer, para que se note que está ahí sin marear. */
@media (prefers-reduced-motion: reduce){
  .bot-arm, .bot-hand, .bot-antenna-dot, .bot-eye, .chat-mascot-bubble{ animation: none; }
  .chat-mascot-bot{ animation: mascotBob 4.8s ease-in-out 1; }
}
@media (max-width: 560px){ .chat-mascot-bubble{ font-size: 11.5px; } .chat-mascot-bot{ width: 64px; height: 74px; } }

/* =============================================================
   22. Ajustes de móvil (evitar solapes y ahogos)
   ============================================================= */
/* Los bloques de dos columnas (equipo, vídeo, cobertura, oficina) van a la
   izquierda en escritorio porque comparten fila con su foto o su mapa. En el
   móvil se apilan y se quedaban solos a la izquierda entre secciones
   centradas: se centran como el resto (07-10-2026, Joao). */
@media (max-width: 860px){
  .team-intro, .video-texto, .zone-box > :first-child, .map-info{ text-align: center; }
  .team-intro .eyebrow::after, .video-texto .eyebrow::after,
  .zone-box .eyebrow::after, .map-info .eyebrow::after{
    content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none;
  }
  .team-intro p, .video-texto p, .zone-box > :first-child p{ margin-left: auto; margin-right: auto; }
  .zone-tags, .map-info .eyebrow, .map-address{ justify-content: center; }
  .map-info .btn{ width: fit-content; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px){
  body{ font-size: 16px; }
  .wrap{ padding: 0 20px; }
  .section-head{ margin-bottom: 34px; }
  /* `.section-head p` le pone a la etiqueta (que es un <p>) el tamaño del
     párrafo; en el móvil una larga («También te puede interesar») se partía
     en dos líneas con las rayas descolgadas. Aquí, el tamaño de etiqueta. */
  .section-head .eyebrow{ font-size: 12.5px; }
  .section-head h2{ max-width: none; }
  .hero{ padding: 150px 0 66px; min-height: auto; }
  .hero-sub{ font-size: 17px; }
  .hero-actions{ gap: 12px; margin-bottom: 44px; }
  .hero-actions .btn{ flex: 1 1 auto; }
  .hero-stats{ gap: 22px 30px; }
  .hero-stat b{ font-size: 32px; }
  .calc-box{ padding: 26px 20px; border-radius: 20px; }
  .calc-step h3{ font-size: 20px; }
  .form-grid{ grid-template-columns: 1fr; }
  .zone-box{ padding: 26px 20px; }
  .map-info{ padding: 28px 22px; }
  .cta-final-actions .btn{ flex: 1 1 auto; }
  .foot-contact{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-bottom{ justify-content: center; text-align: center; }
  .service-row{ padding: 24px 4px; gap: 16px; }
  .hero-landing{ padding: 150px 0 60px; }
  .articulo{ padding-top: 136px; }
}
@media (max-width: 540px){ .service-row{ grid-template-columns: 36px 1fr; } .service-arrow{ display: none; } }
@media (max-width: 400px){
  .foot-grid{ grid-template-columns: 1fr; }
  .hero-stat{ min-width: 42%; }
}

/* =============================================================
   23. Empresas (/empresas)
   La página para el cliente industrial. Va aparte de la portada
   porque quien llega aquí busca otra cosa: no "cuánto me cuesta
   poner placas", sino "quién me lo legaliza y quién me lo mantiene".
   ============================================================= */

/* --- El reloj de potencia instalada ---
   Un instrumento de medida, no un contador: esfera con marcas finas, arco de
   recorrido y aguja. La aguja barre 270° (de -135° a +135°), que es el
   recorrido de un manómetro o un vatímetro de verdad.

   La cifra la pone Ajustes. Si está vacía, `initReloj` deja el bloque oculto
   y aquí no se pinta nada: antes que un número inventado, ninguno. */
.reloj{ position: relative; width: min(360px, 78vw); aspect-ratio: 1; display: grid; place-items: center; }
.reloj[hidden]{ display: none; }
.reloj-esfera{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reloj-pista,
.reloj-marcas,
.reloj-arco{ fill: none; stroke-linecap: round; }
.reloj-pista{ stroke: rgba(255,255,255,.14); stroke-width: 10; }
/* Las marcas son la MISMA curva que la pista, cortada a rayas: 20 marcas sin
   veinte elementos. `pathLength="100"` normaliza la longitud, así que el patrón
   se escribe en porcentaje y no depende del radio. */
.reloj-marcas{ stroke: rgba(255,255,255,.30); stroke-width: 16; stroke-dasharray: 0.5 4.5; }
.reloj-arco{
  stroke: url(#reloj-degradado); stroke-width: 10;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s var(--ease-soft);
}
.reloj-aguja-g{
  /* view-box es imprescindible en Safari iOS: sin él el giro toma como origen
     la caja del elemento y la aguja sale disparada fuera de la esfera. */
  transform-box: view-box;
  transform-origin: 150px 150px;
  transform: rotate(-135deg);
  transition: transform 1.6s var(--ease-soft);
}
.reloj-aguja{ stroke: var(--accent-hi); stroke-width: 5; stroke-linecap: round; }
/* La lectura va en el centro y no la tapa nada.
   La aguja NO nace en el eje: es un índice corto que corre por el aro
   exterior, como el de un manómetro de precisión. Por eso todo el disco
   interior queda libre en cualquier ángulo, y no hay que ir moviendo el
   número para que no se cruce con ella. Fue el segundo intento: con una
   aguja desde el centro, el número no cabía sin achicarlo hasta no leerse. */
.reloj-lectura{ position: relative; text-align: center; line-height: 1; }
.reloj-cifra{
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.8rem, 7.5vw, 4.2rem); letter-spacing: -.04em;
  color: var(--ink-on-deep); font-variant-numeric: tabular-nums;
}
.reloj-unidad{ display: block; font-size: 19px; font-weight: 800; color: var(--accent-hi); letter-spacing: .06em; margin-top: 4px; }
.reloj-pie{ display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-on-deep-mute); margin-top: 12px; }
@media (prefers-reduced-motion: reduce){
  .reloj-arco, .reloj-aguja-g{ transition: none; }
}

/* --- Cabecera de la página --- */
.emp-hero{ background: var(--bg-deep); color: var(--ink-on-deep); padding: 170px 0 var(--aire); }
.emp-hero-grid{ display: grid; grid-template-columns: 1.15fr auto; gap: clamp(32px, 6vw, 80px); align-items: center; }
.emp-hero h1{ font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 800; letter-spacing: -.035em; color: var(--ink-on-deep); margin-bottom: 22px; }
.emp-hero h1 .grad{
  background: linear-gradient(100deg, var(--accent-hi) 5%, var(--accent) 55%, #7FD8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.emp-hero p{ font-size: 18.5px; color: var(--ink-on-deep-mute); max-width: 56ch; margin-bottom: 32px; }
.emp-hero .eyebrow{ color: var(--ink-on-deep-mute); }
.emp-hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px){
  /* Apilado, el hero de Empresas va al eje como el de la portada: alineado a
     la izquierda y con el reloj debajo quedaba todo descolgado a un lado. */
  .emp-hero-grid{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .emp-hero h1, .emp-hero p{ margin-left: auto; margin-right: auto; text-wrap: balance; }
  .emp-hero .eyebrow::after{ content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
  .emp-hero-actions{ justify-content: center; }
  .emp-hero{ padding: 150px 0 var(--aire); }
}
@media (max-width: 640px){ .emp-hero-actions .btn{ flex: 1 1 auto; justify-content: center; } }

/* --- Cifras de apoyo, bajo la cabecera --- */
.emp-cifras{ background: var(--bg-deep-2); color: var(--ink-on-deep); }
/* `padding-block` y no `padding: 34px 0`: el atajo reinicia también el
   izquierdo y el derecho, y como esta fila ES el .wrap, se llevaba por
   delante su margen lateral y las cifras salían pegadas al borde. */
.emp-cifras-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 34px; text-align: center; }
.emp-cifra b{ display: block; font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-on-deep); }
.emp-cifra span{ display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-on-deep-mute); margin-top: 6px; }
@media (max-width: 700px){ .emp-cifras-row{ grid-template-columns: 1fr 1fr; gap: 22px; } }

/* --- Rejilla de soluciones --- */
.emp-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.emp-card{
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 32px; box-shadow: var(--sombra-card);
  transition: box-shadow .3s, transform .3s var(--ease-soft);
}
.emp-card:hover{ box-shadow: var(--sombra-card-hover); transform: translateY(-3px); }
.emp-card .ic{ width: 30px; height: 30px; color: var(--accent-ink); margin-bottom: 18px; }
.emp-card h3{ font-size: 21px; margin-bottom: 10px; }
.emp-card p{ font-size: 15.5px; color: var(--ink-mute); }
@media (max-width: 780px){ .emp-grid{ grid-template-columns: 1fr; } }

/* --- Cómo se trabaja: pasos numerados ---
   Aquí la numeración SÍ significa algo: es el orden real en que ocurre un
   proyecto, y el cliente necesita saber qué va antes de qué. */
.emp-pasos{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--line); }
.emp-paso{ padding: 28px 24px 0 0; position: relative; }
.emp-paso::before{
  content: ""; position: absolute; top: -2px; left: 0; width: 42px; height: 2px; background: var(--accent);
}
.emp-paso b{ display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-ink); margin-bottom: 12px; }
.emp-paso h4{ font-size: 18px; margin-bottom: 8px; }
.emp-paso p{ font-size: 14.5px; color: var(--ink-mute); }
@media (max-width: 900px){ .emp-pasos{ grid-template-columns: 1fr 1fr; row-gap: 26px; } }
@media (max-width: 560px){ .emp-pasos{ grid-template-columns: 1fr; } }

/* --- Ayudas y fiscalidad --- */
.emp-lista{ list-style: none; display: grid; gap: 16px; max-width: 68ch; margin: 0 auto; padding: 0; }
.emp-lista li{ display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; color: var(--ink-mute); }
.emp-lista .ic{ width: 21px; height: 21px; color: var(--eco); flex: none; margin-top: 3px; }
.emp-lista strong{ color: var(--ink); font-weight: 700; }

/* --- Formulario de empresa --- */
/* Centrado y más ancho (07-10-2026, Joao): a la izquierda dejaba media
   pantalla vacía. Los campos siguen alineados a la izquierda dentro, que es
   como se rellena un formulario; solo el titular va al centro. */
.emp-form-box{
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 48px; max-width: 860px; margin: 0 auto; box-shadow: var(--sombra-card);
}
.emp-form-box h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--ink); margin-bottom: 10px; text-align: center; }
.emp-form-box > p{ color: var(--ink-mute); margin-bottom: 28px; text-align: center; }
@media (max-width: 640px){ .emp-form-box{ padding: 26px 20px; } }

/* ---- El reconocimiento, debajo del equipo -----------------------------
   Sobrio a propósito: un premio se cree por quién lo da y por poder
   comprobarlo, no por el tamaño de la letra. */
/* Una banda ancha bajo el equipo, no una tarjeta: el premio acompaña a las
   personas, no compite con ellas. El enlace lleva al vídeo del propio canal
   de Gurenergías, que es sobre este premio — comprobable, no autoproclamado. */
.premio{
  margin: 64px 0 0; padding: 30px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 22px;
}
.premio-icono{
  width: 34px; height: 34px; flex: none;
  fill: none; stroke: var(--accent-ink); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.premio-eyebrow{
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 6px; font-weight: 600;
}
.premio-titulo{ font-size: 21px; font-weight: 500; color: var(--ink); margin: 0; line-height: 1.3; letter-spacing: -.015em; }
.premio-enlace{
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none;
  padding-bottom: 7px; border-bottom: 1px solid var(--ink);
}
.premio-enlace::after{ content: "↗"; font-size: .9em; }
.premio-enlace:hover, .premio-enlace:focus-visible{ color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
@media (max-width: 760px){
  .premio{ margin-top: 44px; grid-template-columns: auto 1fr; gap: 16px; row-gap: 20px; }
  .premio-titulo{ font-size: 18px; }
  .premio-enlace{ grid-column: 1 / -1; }
}

/* Móvil: el texto encima y las fotos a la par, sin el escalonado, que en una
   columna estrecha solo deja un hueco raro. */
@media (max-width: 900px){
  .team-split{ grid-template-columns: 1fr; gap: 34px; }
  .team-intro{ max-width: none; }
  .team-grid .team-card:nth-child(even){ margin-top: 0; }
}
@media (max-width: 560px){
  .team-grid{ grid-template-columns: 1fr; gap: 30px; }
  .team-titular{ font-size: 34px; }
}

/* ---- Vídeo de presentación --------------------------------------------
   El marco es nuestro hasta que alguien pulsa: ni una petición a Google antes
   de eso. El `iframe` entra después y ocupa el mismo hueco, así que la página
   no da un salto al cargarlo. */
.video-split{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: center; }
.video-marco{
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-deep);
  display: grid; place-items: center;
  box-shadow: var(--sombra-card);
}
.video-foto{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Un velo por encima del fotograma: sin él, ni el botón ni el pie se leen
   sobre una foto clara. Con él, el contraste no depende de la imagen. */
.video-marco::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,40,58,.24) 0%, rgba(4,40,58,.16) 45%, rgba(4,40,58,.72) 100%);
  pointer-events: none;   /* el velo no puede comerse el clic del play */
}
.video-play, .video-pie{ position: relative; z-index: 1; }
.video-marco iframe{ position: relative; z-index: 2; width: 100%; height: 100%; border: 0; display: block; }
.video-play{
  width: 82px; height: 82px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 0;
  transition: transform .25s var(--ease-soft), background .25s;
}
.video-play:hover{ transform: scale(1.06); background: rgba(255,255,255,.3); }
.video-play:focus-visible{ outline: 3px solid var(--accent); outline-offset: 4px; }
.video-icono{ width: 30px; height: 30px; fill: #fff; stroke: none; margin-left: 4px; }
.video-pie{
  position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-on-deep); font-weight: 600;
}
.video-titular{ font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin: 12px 0 20px; }
.video-cuerpo{ font-size: 16.5px; line-height: 1.65; color: var(--ink-mute); margin: 0 0 26px; max-width: 40ch; }
.video-enlace{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding-bottom: 7px; border-bottom: 1px solid var(--ink);
}
.video-enlace::after{ content: "↗"; font-size: .9em; }
.video-enlace:hover, .video-enlace:focus-visible{ color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce){
  .video-play{ transition: none; }
  .video-play:hover{ transform: none; }
}
@media (max-width: 900px){
  .video-split{ grid-template-columns: 1fr; gap: 30px; }
  .video-marco{ aspect-ratio: 16 / 9; }
  .video-play{ width: 68px; height: 68px; }
  .video-icono{ width: 26px; height: 26px; }
}

/* El botón de "ver más" del blog. Centrado y con aire: es el final de la
   sección, no un control perdido en una esquina. */
.blog-mas-wrap{ display: flex; justify-content: center; margin-top: 38px; }
.blog-mas-wrap[hidden]{ display: none; }

/* Aviso de cookies (cookies.js). Abajo a la izquierda, lejos del botón del
   chat, y sin tapar nada: se puede seguir leyendo sin contestar. Los dos
   botones son iguales a propósito: rechazar no puede costar más que aceptar,
   que es lo que pide la AEPD. */
.cookies-aviso{
  position: fixed; left: 22px; bottom: 22px; z-index: 400;
  width: min(420px, calc(100vw - 44px));
  background: var(--bg-deep); color: var(--ink-on-deep);
  border: 1px solid var(--line-on-deep); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: 0 18px 48px rgba(4,40,58,.28);
  font-family: var(--sans);
}
.cookies-titulo{ margin: 0 0 6px; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.cookies-texto{ margin: 0 0 8px; font-size: .9rem; line-height: 1.55; color: var(--ink-on-deep-mute); }
.cookies-mas{ font-size: .875rem; color: var(--ink-on-deep); text-decoration: underline; text-underline-offset: 3px; }
.cookies-mas:hover{ color: var(--accent-hi); }
.cookies-botones{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cookies-boton{
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink-on-deep); background: var(--ink-on-deep); color: var(--bg-deep);
  font: 600 .95rem/1 var(--sans);
}
.cookies-boton:hover{ background: #fff; }
.cookies-boton:focus-visible, .cookies-mas:focus-visible{ outline: 2px solid var(--accent-hi); outline-offset: 3px; }
@media (max-width: 600px){
  .cookies-aviso{ left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; }
}

/* Accesibilidad (R25). Las opciones de la calculadora y del simulador son
   botones: heredan la tipografía de la página y enseñan el foco del teclado.
   Cada campo de formulario lleva su etiqueta encima, siempre visible: el
   placeholder desaparece en cuanto se escribe y no todos los lectores de
   pantalla lo leen. .sr-only es para la etiqueta que no cabe a la vista (el
   campo del chat) pero que un lector de pantalla sí tiene que oír. */
.choice-row .chip{ font-family: inherit; color: var(--ink); line-height: 1.2; }
.choice-row .chip:focus-visible{ outline: 2px solid var(--accent-2-ink); outline-offset: 2px; }
.form-grid .campo{ display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-mute); }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }