/* ==========================================================
   WEB ENERGEA PROJECTS (estética IA) · estilos
   Las variables de marca están arriba: cambia un color aquí
   y cambia en toda la web.
   Punto de corte móvil / escritorio: 900 px.
   ========================================================== */

/* Poppins alojada en la propia web (licencia libre OFL, en fonts/) */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}


:root {
  /* Paleta web: degradado corporativo del logo, azul petróleo → verde (24/10/2026; antes violeta y azul) */
  --negro: #0A0A0B;
  --azul: #2A8BAF;
  --verde: #88AE27;
  --turquesa: #2A9A78;        /* tono intermedio del degradado del logo */
  --blanco: #F5F5F5;
  --gris: #B4B4BE;            /* texto secundario: ≈ 10:1 sobre el negro */
  --gris-apagado: #8A8A94;    /* texto atenuado: ≈ 5,6:1 sobre el negro */
  --borde: rgba(255, 255, 255, 0.1);
  --degradado: linear-gradient(90deg, var(--azul), var(--turquesa), var(--verde));

  /* Sistema de movimiento (propuesta 29/10/2026): las mismas cuatro curvas y cuatro duraciones que
     animaciones.js (CURVA y DUR_BASE). Sin rebotes: ninguna curva pasa de 1 */
  --ea-sale: cubic-bezier(0.16, 1, 0.3, 1);     /* entra y se posa: titulares, apariciones */
  --ea-suave: cubic-bezier(0.25, 1, 0.5, 1);    /* fundidos y pequeños desplazamientos */
  --ea-cruce: cubic-bezier(0.76, 0, 0.24, 1);   /* cambios de estado: abrir, cerrar, recolocar */
  --ea-telon: cubic-bezier(0.4, 0, 0.1, 1);     /* lo que se dibuja o se descubre: líneas, fotos */
  --dur-ui: 0.45s;
  --dur-bloque: 0.9s;
  --dur-linea: 1.1s;
  --dur-foto: 1.4s;

  --fuente: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --radio: 24px;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* que el menú fijo no tape el título al saltar a una sección */
}
/* Con el scroll suave (ScrollSmoother) ya suaviza GSAP: el del navegador iría encima y
   haría que cada salto (scrollTo de ScrollSmoother) se arrastrase dos veces */
html.scroll-suave {
  scroll-behavior: auto;
}
/* Salto del menú con fundido a negro (crearSaltos en animaciones.js, Enrique 1/11/2026): el salto,
   tapado por la capa negra, tiene que ser inmediato (sin el scroll suave del navegador) */
html.saltando {
  scroll-behavior: auto !important;
}
/* Capa negra del fundido: la crea animaciones.js (sin JavaScript no existe); no recibe clics */
.velo-salto {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--negro);
  pointer-events: none;
}

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--negro);
  color: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

/* E24 Luz de fondo que cambia de tono según la sección.
   animaciones.js cambia --tono (un color en RGB); sin JavaScript se queda azul.
   Intensidad baja (0,14) para que los textos grises sigan por encima de 4,5:1 */
:root {
  --tono: 42 139 175;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, rgb(var(--tono) / 0.14), transparent 70%);
}
/* Con JavaScript, la luz es una capa fija con un degradado por tono que se funde con opacidad
   (animaciones.js, E24): así el cambio de sección no recalcula los estilos de toda la página */
.con-tonos body::before {
  display: none;
}
.tonos-fondo,
.tonos-fondo__luz {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.tonos-fondo__luz {
  background: radial-gradient(70% 55% at 50% 0%, rgb(var(--tono) / 0.14), transparent 70%);
  will-change: opacity;
}

/* E17 Hilo de energía: va detrás de todo el contenido de <main> y no recibe clics */
main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;       /* la pista del Proceso (E14) no crea scroll lateral; clip no rompe el fijado */
}
.hilo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: none;          /* solo lo enseña animaciones.js, en escritorio */
  overflow: visible;
  pointer-events: none;
}
.hilo--activo {
  display: block;
}
/* El color sigue al tono de la sección (--tono, E24): cambia con la misma transición suave */
.hilo__tono {
  stop-color: rgb(var(--tono));
}
.hilo path {
  fill: none;
  stroke-linecap: round;
}
/* Recorrido completo, muy tenue: la parte que falta */
.hilo__base path {
  stroke: rgb(var(--tono) / 0.16);
  stroke-width: 1;
}
/* Estela: la parte ya recorrida, algo más luminosa */
.hilo__estelas path {
  stroke: url(#grad-estela);
  stroke-width: 1.25;
}
/* Nodos de sección: anillo pequeño con el centro negro, como una cuenta en el hilo */
.hilo__nodo {
  fill: var(--negro);
  stroke-width: 1;
}
.hilo__onda {
  fill: none;
  stroke-width: 1;
}
.hilo__punto {
  fill: #F5F5F5;
}
/* Porcentaje de lectura bajo el punto del hilo (como era-residence.com): pequeño, cifras tabulares,
   con el estilo de los rótulos del mapa de la intro (contorno oscuro que corta la línea) */
.hilo__cifra {
  font-family: var(--fuente);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  fill: #A9C3CC;
  stroke: rgba(10, 10, 11, 0.9);
  stroke-width: 4px;
  paint-order: stroke;
}
.hilo__cifra-signo {
  font-size: 8px;
  fill-opacity: 0.6;
}
/* Proceso fijado: el hilo pasa por detrás de las tarjetas de cristal; sin porcentaje y con el punto tenue */
.hilo__cifra,
.hilo__punto {
  transition: opacity 0.4s ease;
}
.hilo--tras .hilo__cifra {
  opacity: 0;
}
.hilo--tras .hilo__punto {
  opacity: 0.4;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace «Saltar al contenido»: solo aparece al navegar con teclado */
.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--blanco);
  color: var(--negro);
  border-radius: 8px;
}
.saltar:focus {
  top: 16px;
}

/* ---------- Piezas comunes ---------- */

.seccion {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--margen);
}

.cabeza {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.etiqueta {
  margin: 0 0 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul);
}

.titulo-seccion {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.entradilla {
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--gris);
}

/* Botones (E7 microinteracciones) */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.boton:hover {
  transform: translateY(-2px);
}
/* E18 Botón magnético (escritorio): GSAP mueve el botón; sin transición de transform que lo frene */
.boton.con-iman {
  transition: box-shadow 0.25s ease;
}
/* Texto negro sobre el degradado: blanco no llega al contraste mínimo */
.boton--principal {
  background: var(--degradado);
  color: var(--negro);
}
.boton--principal:hover {
  box-shadow: 0 10px 30px rgba(42, 139, 175, 0.35);
}
.boton--pequeno {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.9rem;
}
/* «Contactar» de la barra: del tamaño de ES / EN (Enrique, 28/10/2026); en táctil sigue con 44 px de alto */
.cabecera__barra .boton--pequeno {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.85rem;
}
.boton--vidrio {
  color: var(--blanco);
}

/* Tarjeta de cristal (base del bento, E11) */
.tarjeta {
  position: relative;
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borde);
  border-radius: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.tarjeta:hover {
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(42, 139, 175, 0.15);
}
.tarjeta:hover > .aro {
  opacity: 1;
}

/* Borde con el degradado del logo para los recuadros resaltados (hover, paso actual…).
   Es un <span class="aro"> dentro del recuadro (sus ::before y ::after ya están ocupados):
   aro de 1 px recortado con máscara, oculto hasta que el recuadro lo enciende con opacity.
   Al encenderlo, el recuadro pone su borde transparente para que no se vean dos líneas. */
.aro {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tarjeta h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.tarjeta p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gris);
  transition: color 0.3s ease;
}

/* E10 Brillo que sigue al cursor (las variables --x e --y las pone animaciones.js) */
.foco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, -20%), rgba(42, 139, 175, 0.16), transparent 60%);
}
.foco > :not(.solo-lector, .aro) {
  position: relative;   /* el texto queda por encima del brillo */
}

/* Marco de foto con borde luminoso */
.marco {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 0 80px rgba(42, 139, 175, 0.12);
}
.marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* E8 Parallax: la foto es algo más alta que su marco y se mueve dentro */
.parallax img {
  position: relative;
  top: -8%;
  height: 116%;
}

/* ---------- E13 Liquid glass ---------- */

.vidrio {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 40px rgba(0, 0, 0, 0.45);
}
.vidrio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%, transparent 65%, rgba(255, 255, 255, 0.06));
}
/* Refracción: solo la activa js/animaciones.js en navegadores Chromium,
   que son los que la muestran bien. En el resto queda el cristal base. */
.refraccion .vidrio--liquido {
  backdrop-filter: url(#refraccion) blur(16px) saturate(160%);
}
/* E13+ Paneles con la lente de bisel nueva (escritorio, Chrome / Edge; la clase y el filtro los
   pone animaciones.js con crearLente): el fondo se curva en el borde en vez de ondular entero */
.refraccion .vidrio--liquido.con-lente {
  backdrop-filter: blur(16px) saturate(160%) var(--cristal-lente, );
}

/* ---------- E13+ Cristal líquido «tipo Apple» (base reutilizable) ----------
   Se añade a un .vidrio: <x class="vidrio cristal">. Capas:
   · fondo: velo claro arriba + tinte oscuro (--tinte, 0–1). animaciones.js lo sube
     cuando pasa una foto clara por detrás, para que el texto siga en AA;
     --tinte-extra oscurece aún más (p. ej., menú móvil abierto).
   · desenfoque y saturación del fondo (todos los navegadores) y, solo en Chrome y Edge,
     la lente: --cristal-lente = url(#filtro) con un mapa de bisel generado en canvas
     (refracción en el borde + leve aberración cromática). Lo pone animaciones.js.
   · reflejos especulares: línea fina arriba y otra tenue abajo (box-shadow inset).
   · ::before: brillo curvo del borde superior. ::after: aro de luz de 1 px cuyo punto más
     brillante sigue a --luz-x / --luz-y (el ratón, solo escritorio). Sin JS: luz arriba al centro.
   Ojo: usa ::after, así que no se combina con .foco (E10) en el mismo elemento. */
.vidrio.cristal {
  --tinte: 0.34;
  --tinte-extra: 0;
  --desenfoque: 14px;
  --luz-x: 50%;
  --luz-y: -10%;
  border: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03) 55%, rgb(255 255 255 / 0.06)),
    linear-gradient(rgb(10 10 14 / var(--tinte-extra)), rgb(10 10 14 / var(--tinte-extra))),
    linear-gradient(rgb(12 12 16 / var(--tinte)), rgb(12 12 16 / var(--tinte)));
  -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(185%) brightness(1.04);
  backdrop-filter: blur(var(--desenfoque)) saturate(185%) brightness(1.04) var(--cristal-lente, );
  box-shadow:
    inset 0 1px 0.5px rgb(255 255 255 / 0.5),    /* reflejo fino del borde superior */
    inset 0 -1px 0.5px rgb(255 255 255 / 0.14),  /* reflejo tenue del borde inferior */
    inset 0 0 14px rgb(255 255 255 / 0.05),      /* luz interior */
    0 1px 2px rgb(0 0 0 / 0.35),
    0 14px 36px -10px rgb(0 0 0 / 0.6);          /* profundidad */
}
/* Sin JavaScript no se sabe qué pasa por detrás: tinte más seguro */
html:not(.js) .vidrio.cristal {
  --tinte: 0.78;
}
.vidrio.cristal::before {
  background:
    radial-gradient(90% 70% at 50% -30%, rgb(255 255 255 / 0.16), transparent 70%),
    linear-gradient(135deg, rgb(255 255 255 / 0.08), transparent 35%, transparent 70%, rgb(255 255 255 / 0.04));
}
.vidrio.cristal::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(220px 90px at var(--luz-x) var(--luz-y), rgb(255 255 255 / 0.85), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.07) 45%, rgb(255 255 255 / 0.16));
  /* Solo se ve el aro de 1 px: la máscara recorta el interior */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- Menú superior ---------- */

.cabecera {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 var(--margen);
}
.cabecera__barra {
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  position: relative;
}
/* E13+ La capa de cristal ocupa toda la barra, por detrás del contenido (va primera en el HTML
   y el contenido lleva position: relative, así se pinta encima sin crear otro contexto).
   Al compactarse con el scroll, animaciones.js la encoge en vertical (scaleY): solo transform */
.cabecera__cristal {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.cabecera__barra > :not(.cabecera__cristal) {
  position: relative;
}
/* «Gota» de cristal que se desliza entre los enlaces del menú (escritorio; la crea animaciones.js).
   Ocupa todo el menú y se recorta con clip-path a la forma de pastilla del enlace señalado */
.menu__gota {
  position: absolute;
  inset: -7px -14px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 50% 0%, rgb(255 255 255 / 0.16), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.05));
  clip-path: inset(0 calc(100% - var(--gota-d, 0px)) 0 var(--gota-i, 0px) round 999px);
  visibility: hidden;
  opacity: 0;
}
.cabecera__logo {
  flex-shrink: 0;
}
.cabecera__logo img {
  width: 140px;
  height: auto;
}
.menu {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 24px;
}
.menu > nav:first-child {
  margin: 0 auto;       /* enlaces centrados en la barra */
  position: relative;   /* referencia de la gota (E13+) */
}
.menu__enlaces {
  position: relative;   /* los enlaces, por encima de la gota */
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--gris);
  transition: color 0.2s ease;
}
.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--blanco);
}
.idiomas {
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
}
.idiomas a[aria-current="page"] {
  font-weight: 700;
}
/* ES / EN son palabras cortas: zona de clic más grande sin mover nada */
.idiomas a {
  position: relative;
}
.idiomas a::after {
  content: "";
  position: absolute;
  inset: -10px -5px;
}
.boton-menu {
  display: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--blanco);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 899px) {
  .cabecera__barra {
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 16px;
    border-radius: 28px;
  }
  .cabecera__barra .boton--pequeno,
  .boton-menu {
    padding: 0 12px;
    font-size: 0.85rem;
  }
  .cabecera__logo {
    margin-right: auto;
  }
  .cabecera__logo img {
    width: 96px;
  }
  /* Sin JavaScript: el menú se ve entero en una segunda fila */
  .menu {
    order: 5;
    flex-basis: 100%;
    flex-wrap: wrap;
    padding: 4px 4px 8px;
  }
  .menu > nav:first-child {
    margin: 0;
  }
  .menu__enlaces {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  /* Con JavaScript: menú plegado tras el botón «Menú» */
  .js .boton-menu {
    display: inline-flex;
    align-items: center;
  }
  .js .menu {
    display: none;
  }
  .js.menu-abierto .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 8px 16px;
    border-top: 1px solid var(--borde);
    margin-top: 8px;
  }
  .js.menu-abierto .menu__enlaces {
    flex-direction: column;
    gap: 14px;
  }
  .js.menu-abierto .menu a {
    font-size: 1.15rem;
    color: var(--blanco);
  }
  /* Con el menú abierto la barra sigue siendo liquid glass (E13), pero más oscura
     y más desenfocada, para que los enlaces se lean sobre cualquier foto */
  .js.menu-abierto .cabecera__cristal {
    --tinte-extra: 0.6;
    --desenfoque: 22px;
  }
  .js.menu-abierto .menu {
    overflow: hidden;      /* GSAP lo despliega desde altura 0 */
  }
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  isolation: isolate;          /* los orbes quedan detrás, sin salirse */
  overflow: hidden;
  padding: 140px var(--margen) 24px;
}

/* E9 Orbes de luz: degradado radial (más ligero que filter: blur).
   La capa se apaga hacia abajo con una máscara: así la luz se difumina antes del final
   de la portada y no queda el borde recto que dejaría el recorte (overflow: hidden) */
.orbes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
}
/* closest-side: el degradado llega a transparente justo en el borde del círculo */
.orbe {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  opacity: 0.55;
}
.orbe--azul {
  background: radial-gradient(closest-side, var(--azul) 0%, rgba(42, 139, 175, 0.35) 45%, transparent 100%);
  top: -25%;
  left: -20%;
}
.orbe--verde {
  background: radial-gradient(closest-side, var(--verde) 0%, rgba(136, 174, 39, 0.35) 45%, transparent 100%);
  top: 30%;
  right: -20%;
}

.portada__rejilla {
  max-width: var(--ancho);
  min-height: calc(100svh - 300px);
  margin: 0 auto;
  display: grid;
  gap: 48px;
  align-items: center;
}
/* Misma letra que el resto de títulos (Poppins 700), en grande */
.portada__titulo {
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.portada__texto {
  max-width: 46ch;
  margin: 28px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--gris);
}
.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
/* Icono del logo: el azul marino no se lee sobre negro, por eso va en un disco blanco */
.portada__icono {
  position: relative;
  justify-self: center;
  /* Pequeño a propósito: la isla de detrás (Ibiza y Formentera) tiene que leerse alrededor del disco */
  width: min(170px, 44vw);
  aspect-ratio: 1;
}
.icono-disco,
.intro__disco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10%;
  border-radius: 50%;
  background: #fff;   /* blanco puro, igual que el fondo de la imagen */
  box-shadow:
    0 0 60px rgba(42, 139, 175, 0.45),
    0 0 140px rgba(136, 174, 39, 0.3),
    inset 0 -12px 30px rgba(10, 10, 11, 0.12);
}
.icono-disco img,
.intro__disco img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
/* Anillo de luz azul-verde que gira alrededor del disco */
.portada__icono::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--azul), transparent 30%, var(--verde) 50%, transparent 80%, var(--azul));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 8px var(--azul));
  /* Gira muy despacio (solo transform: lo mueve la tarjeta gráfica). Antes además latía cada 5 s */
  animation: girar-anillo 24s linear infinite;
}
@keyframes girar-anillo {
  to { transform: rotate(360deg); }
}

/* Indicador para bajar: ratón fino con una gota de luz (solo escritorio; GSAP mueve la gota) */
.bajar {
  display: none;
}

@media (min-width: 900px) {
  .portada__rejilla {
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    min-height: calc(100svh - 324px);   /* deja sitio al indicador para bajar, sin empujar la cinta */
  }
  .portada__icono {
    width: min(300px, 24vw);
  }
  .bajar {
    display: flex;
    justify-content: center;
    height: 48px;
    margin-top: 24px;
    pointer-events: none;
  }
  .bajar__raton {
    position: relative;
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(245, 245, 245, 0.32);
    border-radius: 999px;
  }
  .bajar__gota {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 4px;
    height: 9px;
    margin-left: -2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--azul), var(--verde));
    box-shadow: 0 0 8px rgba(42, 139, 175, 0.8);
  }
  .portada .cinta {
    margin-top: 24px;
  }
}

/* E12 Palabra con degradado en movimiento */
.texto-degradado {
  background: linear-gradient(90deg, var(--azul), var(--verde), var(--azul));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* (propuesta 29/10/2026: el degradado queda quieto; antes corría en bucle y repintaba el texto) */
}
/* «EA» del nombre de marca: degradado azul-verde del logo, igual que el resto de la web */
.texto-degradado--marca {
  background-image: linear-gradient(90deg, #2A8BAF, #2A9A78, #88AE27, #2A9A78, #2A8BAF);
}

/* E12 Cinta de servicios */
.cinta {
  overflow: hidden;
  margin: 72px calc(var(--margen) * -1) 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cinta__pista {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--gris);
}
.cinta__pista span {
  padding-right: 0.3em;
}

/* Confianza: tres tarjetas de liquid glass bajo la cinta (una columna en móvil, tres en escritorio) */
.confianza__lista {
  max-width: var(--ancho);
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.confianza .tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* títulos y textos alineados abajo en las tres tarjetas */
  padding: 30px 28px;
  border-radius: var(--radio);
}
/* Sin cristal (31/10/2026, Enrique: el desenfoque recogía el orbe verde de la derecha y las tarjetas
   no se veían nítidas). Fondo propio casi opaco y un toque del degradado de la marca arriba a la izquierda,
   como las tarjetas de Climatización; se conservan borde, reflejos, sombra, brillo y aro de .vidrio */
.confianza .tarjeta.vidrio {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(150deg, rgb(42 139 175 / 0.10), rgb(42 154 120 / 0.03) 45%, transparent 75%),
    rgb(8 9 11 / 0.94);
}
.confianza .tarjeta h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}
.confianza .tarjeta p {
  font-size: 1rem;
}
/* Cifra grande con el degradado de la web, encima del título */
.cifra {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(3.4rem, 6vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Icono de línea fina de las tarjetas sin cifra: mide lo que el «12» y lleva el degradado en el trazo */
.confianza__icono {
  display: block;
  width: clamp(3.6rem, 6vw, 4.8rem);
  height: clamp(3.6rem, 6vw, 4.8rem);
  margin-bottom: 6px;
  overflow: visible;
}
/* «Telegrama» que recorre el bus: un trazo corto y claro (la posición la mueve animaciones.js) */
.confianza__icono .ic-pulso {
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 10 90;
  stroke-opacity: 0; /* decorativo: solo se ve cuando JS lo enciende, así sin JS no queda un trozo suelto */
}
@media (min-width: 900px) {
  .confianza__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
  }
  .confianza .tarjeta {
    min-height: 250px;
    padding: 36px 32px;
  }
}

/* Menos hueco entre la portada y Servicios: la sección de después sube por detrás de la
   línea de energía (E2), que queda igual; el contenido empieza 48 px por debajo de ella */
.portada + .conector {
  margin-bottom: calc(48px - clamp(72px, 10vw, 140px));
}

/* E2 Línea de energía entre secciones */
.conector {
  display: flex;
  justify-content: center;
}
.linea-conducto {
  width: 2px;
  height: 160px;
  overflow: visible;
}


/* ---------- Servicios: bento ---------- */

.bento {
  display: grid;
  gap: 16px;
}
.bento__cabeza {
  order: -1;            /* en móvil, el título va antes que la foto */
  padding: 8px 0 16px;
}
.bento__foto {
  aspect-ratio: 4 / 3;
}
.bento__tarjetas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr;
  }
  .bento__foto {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    min-height: 520px;
  }
  .bento__cabeza {
    grid-column: 3 / 5;
    grid-row: 1;
    padding: 8px 0 8px 24px;
  }
  .bento__tarjetas {
    grid-column: 3 / 5;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
  }
  /* Si queda una tarjeta suelta en la última fila (Climatización tiene 5), ocupa el ancho completo */
  .bento__tarjetas > .tarjeta:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  /* Wellness en espejo: foto a la derecha */
  .pilar--espejo .bento__foto {
    grid-column: 3 / 5;
  }
  .pilar--espejo .bento__cabeza,
  .pilar--espejo .bento__tarjetas {
    grid-column: 1 / 3;
  }
  .pilar--espejo .bento__cabeza {
    padding: 8px 24px 8px 0;
  }
}

.nota {
  margin: 16px 0 0;
  font-size: 0.95rem;
  color: var(--blanco);
}

/* Selector Frío / Calor */
.modo {
  margin-top: 28px;
}
.selector {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
}
.selector button {
  position: relative;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gris);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.selector button[aria-pressed="true"] {
  background: var(--degradado);
  color: var(--negro);
}

/* Fotos de los dos modos, una encima de otra: se cruzan al cambiar */
.fotos-modo img {
  position: absolute;
  inset: 0;
  transition: opacity 0.8s ease;
}
.fotos-modo .foto-calor {
  opacity: 0;
  /* Misma foto que en Frío, con luz cálida de tarde (Enrique, 24/10/2026) */
  filter: sepia(0.14) saturate(1.08) hue-rotate(-4deg) brightness(0.98) contrast(1.02);
}
[data-modo="calor"] .fotos-modo .foto-calor {
  opacity: 1;
}
[data-modo="frio"] .nota-calor,
[data-modo="calor"] .nota-frio {
  display: none;
}

/* Servicios del modo elegido: sin borde encendido (31/10/2026, Enrique: como las tarjetas de la
   portada, solo se marcan al pasar el ratón); los del otro modo, atenuados */
[data-modo="frio"] [data-modo-servicio="calor"] h3,
[data-modo="frio"] [data-modo-servicio="calor"] p,
[data-modo="calor"] [data-modo-servicio="frio"] h3,
[data-modo="calor"] [data-modo-servicio="frio"] p {
  color: var(--gris-apagado);
}

/* ---- Climatización: tono del modo (Frío azul / Calor ámbar) ----
   --clima es un color en RGB. Sin JavaScript (o con «reducir movimiento») cambia de golpe
   con data-modo; animaciones.js lo pasa de un tono a otro con suavidad (estilo en línea). */
.pilar[data-modo] {
  --clima: 96 178 255;
  position: relative;
  isolation: isolate;
  /* Sitio libre abajo para la franja de emisores del esquema de fondo (ondas del suelo radiante) */
  padding-bottom: calc(clamp(24px, 3vw, 48px) + 7vw); /* más pegado al contenido (Enrique) */
  /* ...y arriba, para el esquema de principio (230 de alto en un dibujo de 1280 de ancho) */
  padding-top: calc(17.5vw + var(--ce-baja)); /* justo debajo del depósito de inercia: la foto ya no lo tapa (Enrique) */
  /* El esquema de arriba baja un poco para quedar dentro de la sección (Enrique) */
  --ce-baja: clamp(48px, 6vw, 110px);
}
.pilar[data-modo="calor"] {
  --clima: 255 168 88;
}
/* Luz suave del modo detrás de la sección (degradados radiales, sin desenfoque) */
.pilar[data-modo]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 45% at 28% 50%, rgb(var(--clima) / 0.11), transparent 70%),
    radial-gradient(40% 40% at 80% 75%, rgb(var(--clima) / 0.07), transparent 70%);
}
/* Foto: borde y brillo del modo, tinte de color y sombra suave en la esquina del número */
.pilar[data-modo] .fotos-modo {
  border-color: rgb(var(--clima) / 0.28);
  box-shadow: 0 0 80px rgb(var(--clima) / 0.18);
}
.clima-tinte {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(200deg, rgb(var(--clima) / 0.45), rgb(var(--clima) / 0.08) 55%, transparent);
  mix-blend-mode: soft-light;
}
.fotos-modo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 100% 0%, rgba(10, 10, 11, 0.5), transparent 70%);
}
.clima-particulas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Temperatura decorativa: rodillo de dígitos. La pista tiene 0–9 dos veces;
   Frío enseña el 2 de la primera vuelta (22°) y Calor el 4 de la segunda (24°) */
.clima-temp {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 3;
  display: flex;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem); /* más pequeño: ahora es una franja 23–25° (Enrique, 28/10/2026) */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(245 245 245 / 0.94);
  /* Brillo del modo con drop-shadow (no text-shadow: el rodillo lo recortaría en forma de caja) */
  filter: drop-shadow(0 0 18px rgb(var(--clima) / 0.55));
  pointer-events: none;
  user-select: none;
}
.clima-temp__rodillo {
  display: block;
  height: 1em;
  overflow: hidden;
}
.clima-temp__pista {
  display: flex;
  flex-direction: column;
}
/* Sin JS: Verano 23–25°, Invierno 21–23° */
.clima-temp__pista--desde { transform: translateY(-15%); }
.clima-temp__pista--hasta { transform: translateY(-25%); }
.pilar[data-modo="calor"] .clima-temp__pista--desde { transform: translateY(-55%); }
.pilar[data-modo="calor"] .clima-temp__pista--hasta { transform: translateY(-65%); }
.clima-temp__guion { margin: 0 0.08em; opacity: 0.7; }
.clima-temp__pista span {
  display: block;
  height: 1em;
}
.clima-temp__grado {
  font-size: 0.6em;
  line-height: 1.1;
  color: rgb(var(--clima));
}
/* Tarjetas teñidas por el modo (base .vidrio: borde, reflejos y sombra). Sin desenfoque del fondo
   (29/10/2026, Enrique: el cristal frenaba la sección): un fondo propio casi opaco imita lo que se
   veía a través del cristal (el tono del modo arriba a la izquierda, oscuro abajo a la derecha) */
.tarjeta--clima.vidrio {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(160deg, rgb(var(--clima) / 0.07), rgba(255, 255, 255, 0.03) 60%),
    linear-gradient(150deg, rgb(var(--clima) / 0.13), rgb(var(--clima) / 0.03) 45%, transparent 75%),
    linear-gradient(rgb(var(--clima) / 0.04), rgb(var(--clima) / 0.04)),
    rgb(6 7 9 / 0.93);
}
.tarjeta--clima.foco::after {
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, -20%), rgb(var(--clima) / 0.16), transparent 60%);
}
.tarjeta__icono {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  color: rgb(var(--clima));
}
.pilar[data-modo="frio"] [data-modo-servicio="calor"] .tarjeta__icono,
.pilar[data-modo="calor"] [data-modo-servicio="frio"] .tarjeta__icono {
  color: var(--gris-apagado);
}
/* Selector: el botón elegido toma el color del modo (texto negro: contraste > 7:1) */
.pilar[data-modo] .selector button[aria-pressed="true"] {
  background: linear-gradient(90deg, rgb(var(--clima)), color-mix(in srgb, rgb(var(--clima)) 65%, white));
  color: var(--negro);
}
/* Frase del modo, más grande, con una barra del color del modo */
.pilar[data-modo] .nota {
  position: relative;
  margin-top: 20px;
  padding-left: 16px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
}
.pilar[data-modo] .nota::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 3px;
  background: rgb(var(--clima));
}
/* Desplegable «Cómo funciona» de cada tarjeta (E13: la tarjeta es el cristal; el botón y el
   texto abierto llevan el mismo reflejo, sin desenfoque propio para no acumular coste).
   Sin JavaScript se abre de golpe; animaciones.js anima la altura y las frases */
.tarjeta--clima {
  display: flex;
  flex-direction: column;
}
.clima-detalle {
  margin-top: auto;          /* el botón queda abajo aunque la tarjeta vecina sea más alta */
  padding-top: 18px;
}
.clima-detalle__boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px 4px 16px;
  border: 1px solid rgb(var(--clima) / 0.35);
  border-radius: 999px;
  background: rgb(var(--clima) / 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;          /* sin el triángulo del navegador */
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.clima-detalle__boton::-webkit-details-marker {
  display: none;
}
.clima-detalle__boton::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 45%);
}
.clima-detalle__boton:hover {
  border-color: rgb(var(--clima) / 0.75);
  background: rgb(var(--clima) / 0.12);
}
.clima-detalle__boton:focus-visible {
  outline: 2px solid rgb(var(--clima));
  outline-offset: 2px;
}
/* Cerrado: «Cómo funciona»; abierto: «Cerrar» (el primero sigue para el lector de pantalla) */
.clima-detalle__menos {
  display: none;
}
.clima-detalle[open]:not(.cerrando) .clima-detalle__menos {
  display: inline;
}
.clima-detalle[open]:not(.cerrando) .clima-detalle__mas {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Indicador «+» que gira hasta «×» al abrir (como las ideas KNX) */
.clima-detalle__icono {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--blanco);
  transition: transform var(--dur-ui) var(--ea-cruce), background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.clima-detalle__icono::before,
.clima-detalle__icono::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.clima-detalle__icono::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.clima-detalle[open]:not(.cerrando) .clima-detalle__icono {
  transform: rotate(135deg);
  border-color: transparent;
  background: rgb(var(--clima));
  color: var(--negro);
}
.clima-detalle__cuerpo {
  overflow: hidden;          /* GSAP anima su altura al abrir y cerrar */
}
.clima-detalle__lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 0 2px;
  list-style: none;
}
.clima-detalle__lista li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gris);
}
.clima-detalle__lista li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--clima));
  box-shadow: 0 0 8px rgb(var(--clima));
}
/* Fondo «esquema de principio hidráulico» (mismo lenguaje que el plano del Proceso):
   rejilla de plano y línea fina a baja opacidad, con el color del modo. Va detrás de todo
   (z-index -1 dentro de la sección, que está aislada). Sin JavaScript se ve ya dibujado;
   el flujo (trazos discontinuos) solo aparece cuando animaciones.js lo activa (.clima-fondo--vivo) */
.clima-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;   /* las bajantes se colocan en unidades del ancho (cqw), como los SVG */
  opacity: 0.75; /* más visible (Enrique) */
}
.clima-fondo__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--clima) / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--clima) / 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  /* Se apaga hacia los bordes: sin cantos rectos */
  -webkit-mask-image: radial-gradient(farthest-side at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(farthest-side at 50% 50%, #000 50%, transparent 100%);
}
.clima-esquema {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
.clima-esquema--arriba {
  top: var(--ce-baja, 0px);
}
.clima-esquema--abajo {
  bottom: 0;
}
/* Franja de emisores: solo las ondas de calor/frescor sobre el suelo radiante.
   Se apoya justo encima de la franja de abajo (140 de alto en un dibujo de 1280 de ancho) */
.clima-esquema--emisores {
  bottom: calc(140 / 1280 * 100cqw);
}
.ce-trazo,
.ce-tubo {
  stroke: rgb(var(--clima) / 0.75);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ce-serpentin {
  stroke: rgb(var(--clima) / 0.5);
}
/* Retorno más tenue que la ida (la ida va en trazo continuo y pleno) */
.ce-tubo--ret {
  stroke: rgb(var(--clima) / 0.45);
}
.ce-nodo {
  fill: rgb(var(--clima) / 0.8);
  stroke: none;
}
/* Depósito de inercia / separador, estratificado: en CALOR ida e impulsión por ARRIBA, en FRÍO por ABAJO.
   Las conexiones del otro modo quedan muy tenues; el cambio es un fundido suave */
.ce-m--calor,
.ce-m--frio {
  transition: opacity 0.9s ease;
}
.pilar[data-modo="frio"] .ce-m--calor,
.pilar[data-modo="calor"] .ce-m--frio {
  opacity: 0.1 !important;   /* gana al opacity en línea que deja el fundido de las flechas */
}
/* Detentores de las salidas del colector C-01 (válvula de dos triángulos) */
.ce-valvula {
  stroke: rgb(var(--clima) / 0.7);
  stroke-width: 1;
}
/* Ondas del suelo radiante: sutiles; animaciones.js las mueve según el modo */
.ce-onda {
  stroke: rgb(var(--clima) / 0.55);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-opacity: 0.4;
}
@media (max-width: 899px) {
  /* En móvil, más simple: sin ondas */
  .ce-ondas {
    display: none;
  }
}
.ce-flecha {
  fill: none;
  stroke: rgb(var(--clima));
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ce-rotulo {
  fill: rgb(var(--clima) / 0.8);
  stroke: none;
  font-family: var(--fuente);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.ce-flujos {
  display: none;
}
.clima-fondo--vivo .ce-flujos {
  display: inline;
}
.ce-flujo {
  stroke: rgb(var(--clima));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 22;        /* animaciones.js mueve stroke-dashoffset: el trazo corre por el tubo */
}
/* El retorno va más tenue que la ida: agua ya enfriada o calentada */
.ce-flujo--ret {
  stroke-opacity: 0.5;
}
/* Bajantes por el margen derecho: ida (x 1257) y retorno (x 1273) del dibujo de 1280 de ancho */
.ce-bajante {
  position: absolute;
  top: calc(130 / 1280 * 100cqw + var(--ce-baja, 0px));
  bottom: calc(140 / 1280 * 100cqw);
  left: calc(1257 / 1280 * 100%);
  /* Mismo grosor que el trazo de los SVG (1,2 del dibujo, que escala con el ancho) y centrada en su eje:
     con 1px fijo desde el borde izquierdo quedaba medio píxel corrida y no casaba con los codos (31/10/2026).
     Con margin y no con transform: animaciones.js anima el transform (scaleY) */
  width: calc(1.2 / 1280 * 100cqw);
  margin-left: calc(-0.6 / 1280 * 100cqw);
  background: rgb(var(--clima) / 0.75);
  transform-origin: top;
}
.ce-bajante--ret {
  top: calc(180 / 1280 * 100cqw + var(--ce-baja, 0px));
  left: calc(1273 / 1280 * 100%);
  transform-origin: bottom;
}
@media (max-width: 899px) {
  /* En móvil, más tenue (y sin flujo: lo decide animaciones.js) */
  .clima-fondo {
    opacity: 0.35;
  }
}

/* (Tarjetas de Climatización sin cristal desde el 29/10/2026: ver .tarjeta--clima.vidrio) */
@media (max-width: 899px) {
  .clima-temp {
    top: 10px;
    right: 14px;
  }
}
@media (min-width: 900px) {
  /* La foto acompaña al bajar (fija dentro de su hueco) y nunca pasa del alto de la pantalla:
     así no se estira ni se recorta de más cuando un desplegable alarga la columna de tarjetas */
  .pilar[data-modo] .bento__foto,
  #wellness .bento__foto {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
  }
  /* Wellness (Enrique): la foto entera siempre a la vista; se pega arriba y no se estira con la columna */
  #wellness .bento__foto {
    align-self: start;
    height: min(calc(100vh - 120px), 720px);
    min-height: 0;
  }
  .clima-detalle__lista {
    max-width: 64ch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clima-detalle__boton,
  .clima-detalle__icono {
    transition: none;
  }
}

/* Wellness: el mismo desplegable («Beneficios y uso») en cada tarjeta, en el tono cálido de la
   sección. Va por encima de la capa del botón que cambia la foto (.tarjeta__elegir::before,
   z-index 2), así abrirlo o pulsar una fuente no cambia la foto */
#wellness .tarjeta--elegible {
  --clima: 255 170 110;
  display: flex;
  flex-direction: column;
}
.tarjeta--elegible .clima-detalle {
  position: relative;
  z-index: 3;
}
.clima-detalle__subtitulo {
  margin: 18px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--clima));
}
.clima-detalle__subtitulo + .clima-detalle__lista {
  padding-top: 10px;
}
.clima-detalle__ref {
  font-size: 0.75rem;
  color: var(--gris-apagado);
  white-space: nowrap;
}
/* (con «.clima-detalle» delante para ganar a «.tarjeta p») */
.clima-detalle .clima-detalle__nota,
.clima-detalle .clima-detalle__aviso {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gris-apagado);
}
.clima-detalle__lista .clima-detalle__medico {
  color: var(--blanco);
}
.clima-detalle .clima-detalle__fuentes-titulo {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gris);
}
.clima-detalle__fuentes {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  line-height: 1.45;
}
.clima-detalle__fuentes a {
  color: var(--gris);
  text-decoration: underline;
  text-decoration-color: rgb(var(--clima) / 0.4);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.clima-detalle__fuentes a:hover {
  color: var(--blanco);
  text-decoration-color: rgb(var(--clima));
}
.clima-detalle__fuentes a:focus-visible {
  outline: 2px solid rgb(var(--clima));
  outline-offset: 2px;
  border-radius: 2px;
}
.clima-detalle .clima-detalle__aviso {
  margin: 12px 0 4px;
  font-style: italic;
}
@media (min-width: 900px) {
  /* Como en Climatización: con un desplegable abierto, las tarjetas pasan a ancho completo
     y la foto acompaña al bajar sin estirarse */
  .bento__tarjetas:has(.clima-detalle[open]) > .tarjeta--elegible {
    grid-column: 1 / -1;
  }
  #wellness .bento__foto {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
  }
}

/* Wellness: una foto por servicio, una encima de otra. Se ve la que lleva «visible»
   (sin JavaScript, la sauna); al cambiar, la vieja («saliendo») queda debajo mientras
   la nueva aparece con un fundido (animaciones.js) */
.fotos-servicio img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fotos-servicio img.saliendo {
  opacity: 1;
}
.fotos-servicio img.visible {
  z-index: 1;
  opacity: 1;
}
/* Rótulo de cristal con el servicio que se ve (la foto no es la única pista) */
.foto-rotulo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.55);
  font-size: 0.85rem;
  font-weight: 600;
  pointer-events: none;
}
.pilar--espejo .foto-rotulo {
  left: auto;
  right: 16px;
}
/* Tarjetas que eligen foto: el botón está en el título y su capa ::before
   cubre toda la tarjeta, así se puede pulsar en cualquier parte */
.tarjeta--elegible.foco > h3 {
  position: static;
}
.tarjeta__elegir {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tarjeta__elegir::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 20px;
}
.tarjeta__elegir:focus-visible {
  outline: none;
}
.tarjeta__elegir:focus-visible::before {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}
/* La tarjeta de la foto que se ve: borde cálido (tono de Wellness) */
.tarjeta--elegible.activa {
  border-color: rgba(255, 170, 110, 0.55);
  background-color: rgba(255, 170, 110, 0.05);
  box-shadow: 0 0 40px rgba(255, 170, 110, 0.12);
}
/* La elegida (pulsada) lleva además un punto de luz junto al título */
.tarjeta__elegir[aria-pressed="true"]::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-radius: 50%;
  vertical-align: middle;
  background: rgb(255, 170, 110);
  box-shadow: 0 0 10px rgb(255, 170, 110);
}

/* ---------- Control KNX: «todo en un solo sistema» (escenario con plano, sistemas y panel; E3 en escritorio alto) ---------- */

.control {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.control__dentro {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(64px, 8vw, 80px) var(--margen);
  display: grid;
  gap: 24px;
}
.control__escenario {
  display: grid;
  gap: 20px;
}
.control__cabeza .entradilla {
  margin-top: 14px;
}

/* Fondo: rejilla de plano (azul), muy tenue, abajo a la derecha */
.control__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.control__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 139, 175, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 139, 175, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 78% 78%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 78% 78%, #000 15%, transparent 72%);
}


/* Plano de la villa: mesa de cristal oscura con la foto del pulsador como textura y rejilla que se
   ilumina bajo el ratón. El plano es una planta técnica ORTOGONAL (sin inclinación: así se lee y las
   estancias se pueden tocar). Colores de capa como el plano CAD de Proceso (clases cad-*). */
.plano {
  --c-muro: 205 210 255;
  --c-eje: 170 160 255;
  --c-cota: 110 231 160;
  --c-clima: 92 225 240;
  --c-vent: 74 222 128;
  --c-agua: 250 204 21;
  --c-ilum: 255 214 170;
  --c-knx: 150 210 228;
  --c-calor: 255 170 110;
  --c-frio: 166 201 74;
  --fl-hvac: var(--c-calor);       /* color del agua de clima: naranja en calor, azul en frío */
  position: relative;
  isolation: isolate;
  aspect-ratio: 720 / 540;
  min-height: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 62%, rgba(166, 201, 74, 0.1), transparent 70%),
    #0c0c13;
}
.plano[data-modo="frio"] {
  --fl-hvac: var(--c-frio);
}
.plano > .plano__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.1;
}
/* Velo: la foto queda como textura y el plano se lee encima */
.plano::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.5), rgba(10, 10, 11, 0.86) 85%),
    radial-gradient(ellipse at 50% 120%, rgba(42, 139, 175, 0.14), transparent 60%);
}
/* Rejilla de plano. La capa de encima, más luminosa, solo se ve alrededor del ratón (--gx, --gy) */
.plano__rejilla,
.plano__rejilla::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(42, 139, 175, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 139, 175, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 40%, transparent 100%);
}
.plano__rejilla::after {
  content: "";
  background-image:
    linear-gradient(rgba(140, 175, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 175, 255, 0.35) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(170px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 75%);
  mask-image: radial-gradient(170px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 75%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.plano--cursor .plano__rejilla::after {
  opacity: 1;
}
/* Mesa: el lienzo conserva la proporción de lo que enseña el plano (--vw × --vh, el viewBox) y cabe entero */
.plano__mesa {
  position: absolute;
  inset: 8% 1.5% 1.5%;
  display: grid;
  place-items: center;
  container-type: size;
}
.plano__lienzo {
  --vx: 0;
  --vy: 0;
  --vw: 720;
  --vh: 470;
  position: relative;
  width: min(100cqw, 100cqh * var(--vw) / var(--vh));
  aspect-ratio: var(--vw) / var(--vh);
}
.plano__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plano__svg text {
  stroke: none;
}
/* El dibujo del plano (muros, capas, equipos, redes y escenas) está en knx.css, que se carga después */

/* ---- Estancias que se tocan: botones HTML encima del lienzo (posición en unidades del plano) ---- */
.plano__zonas {
  position: absolute;
  inset: 0;
}
.zona {
  position: absolute;
  left: calc((var(--x) - var(--vx)) / var(--vw) * 100%);
  top: calc((var(--y) - var(--vy)) / var(--vh) * 100%);
  width: calc(var(--w) / var(--vw) * 100%);
  height: calc(var(--h) / var(--vh) * 100%);
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Zona táctil de al menos 44 × 44 px aunque la estancia se vea más pequeña (margen invisible) */
.zona::after {
  content: "";
  position: absolute;
  inset: min(0px, calc(50% - 22px));
}
.zona__nombre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (hover: hover) {
  .zona:hover {
    background: rgb(42 139 175 / 0.07);
    box-shadow: inset 0 0 0 1px rgb(42 139 175 / 0.35);
  }
}
.zona:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
  background: rgb(42 139 175 / 0.1);
}
.zona[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1.5px rgb(150 210 228 / 0.85);
}
/* Globo al pasar el ratón: nombre y consigna (escritorio) */
.plano__globo {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blanco);
  white-space: nowrap;
  background: rgb(18 18 28 / 0.88);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 8px));
  transition: opacity 0.2s ease, visibility 0.2s;
}
.plano__globo.visible {
  opacity: 1;
  visibility: visible;
}
.plano__globo small {
  display: block;
  font-weight: 400;
  color: var(--gris);
}
/* Lista de estancias en chips (móvil): acceso alternativo al plano */
.plano__chips {
  display: none;
}

/* ---- Ficha de la estancia (cristal líquido): se ancla junto a la estancia, sin salirse de la tarjeta ---- */
.ficha {
  position: absolute;
  z-index: 5;
  left: var(--fx, 12px);
  top: var(--fy, 12px);
  width: min(276px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: rgb(14 14 22 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 18px 50px rgb(0 0 0 / 0.55);
  font-size: 0.8rem;
  scrollbar-width: thin;
}
.ficha[hidden] {
  display: none;
}
.ficha > * {
  position: relative;
}
.ficha__cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ficha__titulo {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.ficha__codigo {
  margin-left: 6px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gris-apagado);
}
.ficha__cerrar {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.05);
  color: var(--blanco);
  cursor: pointer;
}
.ficha__cerrar span::before,
.ficha__cerrar span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ficha__cerrar span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ficha__cerrar:hover {
  border-color: var(--azul);
}
.ficha__bloque {
  display: grid;
  gap: 6px;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.ficha__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}
.ficha__etq {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-apagado);
}
.ficha__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--blanco);
}
.ficha__nota {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--gris-apagado);
}
.ficha__ilu {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--gris-apagado);
}
.ficha label {
  display: grid;
  gap: 2px;
  font-size: 0.72rem;
  color: var(--gris);
}
.ficha input[type="range"] {
  width: 100%;
  min-height: 24px;
  margin: 0;
  accent-color: var(--azul);
}
/* Interruptor (aria-pressed) */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 10px 3px 4px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  color: var(--gris);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.interruptor::before {
  content: "";
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 9px 50%, #fff 0 6px, transparent 6.5px) rgb(255 255 255 / 0.14);
  transition: background-position 0.25s ease, background-color 0.25s ease;
}
.interruptor[aria-pressed="true"] {
  color: var(--blanco);
  border-color: rgb(42 139 175 / 0.55);
}
.interruptor[aria-pressed="true"]::before {
  background-color: var(--azul);
  background-position: 12px 0;
}
/* Consigna con − y + */
.consigna {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.consigna button,
.segmento button {
  min-width: 30px;
  min-height: 30px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  color: var(--blanco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consigna button:hover,
.segmento button:hover {
  border-color: var(--azul);
}
.segmento {
  display: inline-flex;
  gap: 4px;
}
.segmento button[aria-pressed="true"] {
  color: var(--negro);
  border-color: transparent;
  background: var(--degradado);
}
/* Nivel de calidad del aire o humedad (barra de 3 tramos, ilustrativo) */
.nivel {
  display: flex;
  gap: 3px;
  width: 96px;
}
.nivel i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.12);
}
.nivel[data-n="0"] i:nth-child(1) { background: rgb(110 231 160); }
.nivel[data-n="1"] i:nth-child(-n + 2) { background: rgb(250 204 21); }
.nivel[data-n="2"] i { background: rgb(255 130 120); }

.hud__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 8px var(--azul);
}
.hud__hora {
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
/* Temperatura con rodillo: cada cifra es una columna 0–9 que se desplaza --d líneas */
.hud__cifra {
  display: inline-block;
  width: 0.62em;
  text-align: center;
  height: 1.2em;
  overflow: hidden;
}
.hud__rodillo {
  display: block;
  transform: translateY(calc(var(--d, 2) * -1.2em));
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.hud__rodillo span {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
}
/* (El punto del HUD ya no respira en bucle: propuesta 29/10/2026) */

/* ---- Plano a pantalla completa: botón «Abrir plano» y diálogo de cristal ----
   interacciones.js mueve el plano (con sus estancias y su ficha) dentro del diálogo mientras está abierto
   y deja un hueco del mismo tamaño en su sitio. Sin JavaScript el botón no se enseña */
.plano__abrir {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 13px 4px 10px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  background: rgb(20 20 32 / 0.72);
  color: var(--blanco);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px rgb(0 0 0 / 0.35);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.plano__abrir svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.plano__abrir:hover {
  border-color: rgb(42 139 175 / 0.7);
  background: rgb(36 32 64 / 0.85);
}
.plano__abrir:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
html:not(.js) .plano__abrir,
.plano-dialogo .plano__abrir {
  display: none;
}
.plano-dialogo {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 14px;
  padding: 0;
  border: 0; /* sin el marco por defecto del <dialog> */
  border-radius: 26px;
  color: var(--blanco);
  background: rgb(12 12 20 / 0.74);
  overflow: hidden;
  overscroll-behavior: contain;
}
.plano-dialogo[open] {
  display: flex;
  flex-direction: column;
}
.plano-dialogo::backdrop {
  background: rgb(5 5 10 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.plano-dialogo__barra {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px 10px 22px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.plano-dialogo__textos {
  flex: 1;
  min-width: 0;
}
.plano-dialogo__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.plano-dialogo__ayuda {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gris);
}
.plano-dialogo__zoom {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
}
.plano-dialogo__zoom button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--blanco);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.plano-dialogo__zoom button[data-zoom="-1"],
.plano-dialogo__zoom button[data-zoom="1"] {
  font-size: 1.1rem;
  padding: 0;
}
.plano-dialogo__zoom button:hover {
  background: rgb(42 139 175 / 0.18);
}
.plano-dialogo__cerrar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: var(--blanco);
  cursor: pointer;
}
.plano-dialogo__cerrar span::before,
.plano-dialogo__cerrar span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.8px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.plano-dialogo__cerrar span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.plano-dialogo__cerrar:hover {
  border-color: var(--azul);
}
.plano-dialogo :is(button, input):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.plano-dialogo__sitio {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
/* El plano dentro del diálogo: ocupa todo el sitio; el lienzo recorta lo que se sale al acercar */
.plano-dialogo .control__plano {
  position: relative;
  top: auto;
  align-self: stretch;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.plano-dialogo .plano__mesa {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 0;
  padding: 10px;
  display: grid;
  place-items: center;
  container-type: size;
}
.plano--pantalla .plano__lienzo {
  overflow: hidden;
  border-radius: 10px;
  touch-action: none;
  cursor: grab;
}
.plano--pantalla .plano__lienzo.arrastrando {
  cursor: grabbing;
}
.plano--pantalla .zona {
  touch-action: none;
}
/* En el diálogo (escritorio) la ficha va fija a la derecha y el plano se encuadra a su izquierda */
@media (min-width: 900px) {
  .plano-dialogo .ficha {
    left: auto;
    right: 14px;
    top: 14px;
    width: 290px;
    max-height: calc(100% - 28px);
  }
}
@media (max-width: 899px) {
  .plano__abrir {
    left: 10px;
    transform: none;
  }
  .plano-dialogo {
    margin: 0;
    border-radius: 0;
  }
  .plano-dialogo__barra {
    position: static;
    z-index: auto; /* sin contexto propio: los botones de zoom flotan encima del plano */
    flex-wrap: wrap;
    padding: 10px 10px 8px 14px;
  }
  .plano-dialogo__textos {
    flex-basis: calc(100% - 60px);
  }
  /* El plano de la página se recorta a la casa: lo de fuera (piscina) no pisa los chips */
  .plano__lienzo {
    overflow: hidden;
  }
  .plano-dialogo__ayuda {
    font-size: 0.72rem;
  }
  /* Zoom: botones flotando abajo a la derecha (se apartan con la ficha abierta) */
  .plano-dialogo__zoom {
    position: absolute;
    right: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom)); /* encima de los chips */
    z-index: 6;
    background: rgb(16 16 26 / 0.85);
  }
  .plano-dialogo:has(.plano--zona) .plano-dialogo__zoom {
    display: none;
  }
  .plano-dialogo .plano--zona .plano__mesa {
    place-items: start center;
  }
  .plano-dialogo__zoom button {
    min-width: 44px;
    min-height: 44px;
  }
  .plano-dialogo .plano__mesa {
    padding: 6px;
  }
  /* Ficha: panel inferior encima del plano */
  .plano-dialogo .ficha {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    max-height: 50%;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .plano-dialogo[open] {
    animation: plano-dialogo-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@keyframes plano-dialogo-entra {
  from { opacity: 0; transform: scale(0.97); }
}

/* ---- Sistemas conectados al bus: botones con icono de línea; cada uno cuelga del bus ---- */
.sistemas__titulo {
  margin: 0;
  text-wrap: balance; /* en inglés, «BUS» no se queda solo en la segunda línea */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
}
.sistemas__ayuda {
  margin: 4px 0 12px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--gris-apagado);
}
.sistemas__red {
  position: relative;
}
.sistemas__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sistema {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sistema__boton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--gris);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  /* Sin «transform» en la transición: GSAP mide la posición al recalcular y una transición
     a medias le hacía guardar un desplazamiento falso (los botones quedaban 24 px más abajo) */
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.sistema__boton:hover,
.sistema__boton[aria-pressed="true"] {
  color: var(--blanco);
  border-color: rgba(42, 139, 175, 0.6);
  background: rgba(42, 139, 175, 0.12);
}
.sistema__boton[aria-pressed="true"] {
  box-shadow: 0 0 0 1px rgba(42, 139, 175, 0.5), 0 6px 20px rgba(42, 139, 175, 0.25);
}
/* Recorrido con el scroll (31/10/2026): el sistema que se va «seleccionando» se ve como pulsado
   (sin aria-pressed: no lo ha elegido el visitante) */
.sistema.en-secuencia .sistema__boton {
  background: rgba(42, 139, 175, 0.12);
  border-color: rgba(42, 139, 175, 0.6);
  box-shadow: 0 0 0 1px rgba(42, 139, 175, 0.5), 0 6px 20px rgba(42, 139, 175, 0.25);
}
.sistema__boton:active {
  transform: scale(0.96);
}
.sistema__icono {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
.sistema__nota {
  display: block;
  margin-top: 1px;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--gris-apagado);
}
/* Sistema que mueve la escena puesta: icono azul y línea al bus encendida */
.sistema:is(.activo, .en-secuencia) .sistema__boton {
  color: var(--blanco);
  border-color: rgba(42, 139, 175, 0.4);
}
.sistema:is(.activo, .en-secuencia) .sistema__icono {
  stroke: #96D2E4;
}
.sistema__linea,
.sistema__nodo,
.sistemas__bus,
.sistemas__union,
.sistemas__telegrama {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .plano *,
  .plano *::after,
  .sistemas *,
  .panel-knx * {
    transition: none !important;
  }
}

/* ---- Panel de control: pantalla de pared de cristal líquido (E13) ---- */
.panel-knx {
  display: grid;
  gap: 12px;
  padding: 14px 16px 18px;
  border-radius: 28px;
  background: rgba(16, 16, 26, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 6px rgba(255, 255, 255, 0.025),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(42, 139, 175, 0.1);
}
.panel-knx > * {
  position: relative;   /* por encima del reflejo del cristal */
}
.panel-knx__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gris);
}
.panel-knx__hora {
  margin-left: auto;
}
.panel-knx__senal {
  width: 14px;
  height: 14px;
  stroke: var(--gris);
  stroke-width: 2;
  stroke-linecap: round;
}
.panel-knx__ayuda {
  margin: -8px 0 0;
  font-size: 0.8rem;
  color: var(--gris-apagado);
}
/* Pestañas del panel: «Escenas» y «Día a día» (role="tablist"; las flechas mueven entre ellas) */
.panel-knx__pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
}
.pestana {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gris);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.pestana:hover {
  color: var(--blanco);
}
.pestana[aria-selected="true"] {
  color: var(--negro);
  background: var(--degradado);
}
.panel-knx__vista {
  display: grid;
  gap: 8px;
  align-content: start;
}
.panel-knx__vista + .panel-knx__vista {
  margin-top: 12px;
}
.panel-knx--pestanas .panel-knx__vista + .panel-knx__vista {
  margin-top: 0;
}
/* Con JavaScript solo se ve la pestaña elegida; con «Día a día» el consumo deja sitio a la explicación */
.panel-knx__vista.oculta,
.panel-knx--dia .panel-knx__energia {
  display: none;
}
.panel-knx__vista .panel-knx__ayuda {
  margin: 0;
}
/* Día a día: las ideas (títulos cortos) y, debajo, la explicación de la elegida */
.panel-knx__ideas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* todas las filas igual de altas (con una línea o con dos) */
  gap: 5px;
}
.idea-boton {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.04);
  color: var(--gris);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.idea-boton:hover {
  color: var(--blanco);
  border-color: rgb(42 139 175 / 0.45);
}
.idea-boton[aria-pressed="true"] {
  color: var(--negro);
  border-color: transparent;
  background: var(--degradado);
}
.panel-knx__explicaciones {
  display: grid;
}
.panel-knx--pestanas .panel-knx__idea {
  display: none;
}
.panel-knx--pestanas .panel-knx__idea.activa {
  display: block;
}
.panel-knx__quiero {
  margin: 2px 0 4px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}
.panel-knx__acciones {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel-knx__acciones li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--gris);
}
.panel-knx__acciones li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--degradado);
  box-shadow: 0 0 8px var(--azul);
}
.panel-knx__escenas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.escena-boton {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 8px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--gris);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.escena-boton:hover {
  color: var(--blanco);
  border-color: rgba(42, 139, 175, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.escena-boton:active {
  transform: scale(0.95);
}
/* Escena activa: degradado de la marca con texto negro (el blanco no llega al contraste mínimo) */
.escena-boton[aria-pressed="true"] {
  color: var(--negro);
  border-color: transparent;
  background: var(--degradado);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 26px rgba(42, 139, 175, 0.35);
}
.escena-boton__icono {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.escena-boton__nombre {
  position: relative;
}
/* Onda de la pulsación (la mueve animaciones.js) */
.escena-boton__onda {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.panel-knx__etiqueta {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-apagado);
}
/* Clima: icono, temperatura con rodillo y dial real (input range; sus estilos, en knx.css) */
.panel-knx__clima {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.panel-knx__mini {
  width: 16px;
  height: 16px;
  stroke: var(--gris);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.panel-knx__temp {
  display: flex;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
/* Consumo ilustrativo: curva del día y barras por sistema (sin cifras) */
.panel-knx__energia {
  display: grid;
  gap: 8px;
}
.energia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.energia__curva {
  width: 100%;
  height: 64px;
  overflow: visible;
}
.energia__rejilla {
  stroke: rgba(255, 255, 255, 0.07);
  vector-effect: non-scaling-stroke;
}
.energia__area {
  fill: url(#en-grad-area);
}
.energia__linea {
  stroke: url(#en-grad-linea);
  stroke-width: 1.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.energia__ahora {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.energia__punto,
.energia__halo {
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.energia__halo {
  stroke: var(--azul);
  stroke-width: 14;
  opacity: 0.35;
}
.energia__barras {
  display: flex;
  gap: 6px;
  height: 64px;
}
.energia__barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 12px;
}
.energia__barra i {
  flex: 1;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(0deg, var(--verde), var(--azul));
  transform: scaleY(var(--v, 0.5));
  transform-origin: 50% 100%;
  transition: transform var(--dur-bloque) var(--ea-sale);
}
.energia__icono {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  stroke: var(--gris-apagado);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Centrada en la página, en dos líneas como el lema que sigue: la frase entera (alargada) y debajo
   el remate. Cada palabra empieza como un contorno (lo que no se ve: la instalación oculta) y se
   rellena al pasar (animaciones.js) */
.franja {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.9rem, 4.1vw, 4.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.franja .palabra {
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.55);
}
.franja__frase {
  display: block;
}
@media (min-width: 900px) {
  .franja__frase { white-space: nowrap; }
}
.franja__remate {
  display: block;
  margin-top: 0.12em;
}
.franja .palabra--clave {
  -webkit-text-stroke-color: rgb(42 139 175 / 0.75);
}
/* «diseña» y «disfruta»: las palabras importantes, con el degradado morado (se encienden después) */
.franja .palabra--clave {
  background: var(--degradado);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 899px) {
  /* Móvil: apilado (cabeza, plano, panel; la lista de sistemas no se enseña: knx.css). El plano baja con
     la página como cualquier otro bloque: nada pegado ni fijado (1/11, Enrique: con sticky o pin, en el
     iPhone daba saltos). El plano se recorta a la casa y la terraza (lo hace interacciones.js con el
     viewBox; aquí, la proporción) */
  .control__escenario > .control__cabeza { order: 1; }
  .control__escenario > .control__plano { order: 2; }
  .control__escenario > .control__panel { order: 3; }
  .control__escenario > .control__sistemas { order: 4; }
  .control__plano {
    position: relative;
    z-index: 3;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
  }
  .plano__mesa {
    position: relative;
    inset: auto;
    display: block;
    padding: 40px 6px 4px;
    container-type: normal;
  }
  .plano__lienzo {
    width: 100%;
  }
  .js .plano__lienzo {
    --vx: 52;
    --vy: 48;
    --vw: 556;
    --vh: 292;
  }
  .plano__globo { display: none; }
  .plano__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 10px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .plano__chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.05);
    color: var(--gris);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    scroll-snap-align: start;
    cursor: pointer;
  }
  .chip[aria-expanded="true"] {
    color: var(--negro);
    border-color: transparent;
    background: var(--degradado);
  }
  /* Ficha: panel inferior dentro de la tarjeta (el plano se acerca a la estancia) */
  .ficha {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-height: 44svh;
    margin: 0 8px 8px;
    border-radius: 18px;
  }
  .ficha__cerrar,
  .consigna button,
  .segmento button {
    min-width: 44px;
    min-height: 44px;
  }
  .interruptor,
  .pestana,
  .idea-boton {
    min-height: 44px;
  }
  .ficha input[type="range"] {
    min-height: 44px;
  }
}
@media (min-width: 900px) {
  /* Escritorio: el escenario ocupa una pantalla (se fija con E3). Sistemas a la izquierda colgando
     del bus, plano en el centro y panel (con «Escenas» y «Día a día») a la derecha. Todo a la vez */
  .control__dentro {
    padding-top: 0;
    padding-bottom: clamp(56px, 7vw, 88px);
    gap: 28px;
  }
  .control__escenario {
    min-height: 100svh;
    grid-template-columns: 176px minmax(0, 1fr) clamp(286px, 23vw, 320px);
    grid-template-rows: auto auto;
    grid-template-areas:
      "cabeza cabeza cabeza"
      "sistemas plano panel";
    align-content: start;      /* anclado arriba: al cambiar de pestaña o abrir una idea solo cambia el panel (antes, centrado, saltaba ~34 px) */
    gap: 14px 22px;
    padding: 92px 0 24px;      /* el menú fijo */
  }
  .control__cabeza { grid-area: cabeza; }
  .control__cabeza .titulo-seccion { font-size: clamp(2rem, 3.2vw, 3rem); }
  /* Entradilla de una línea: tamaño normal de entradilla (antes 0,88–0,98 rem, parecía una nota al pie) */
  .control__cabeza .entradilla { margin-top: 12px; font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 64ch; }
  /* El marco se ajusta al plano (apaisado) y queda centrado en su hueco */
  .control__plano {
    grid-area: plano;
    align-self: start;
    aspect-ratio: 720 / 500;
    max-height: calc(100svh - 250px);   /* el menú, la cabeza y los márgenes */
  }
  .control__panel {
    grid-area: panel;
    align-self: start;
  }
  .control__sistemas {
    grid-area: sistemas;
    align-self: start;
    padding-top: 8px;
  }
  /* Lista en columna, como un esquema unifilar: filas de alto fijo (--fila) y píldoras del mismo
     ancho, así todas las derivaciones nacen en la misma x y llegan al bus justo a media fila, donde
     hay un nodo cuadrado. El bus (línea vertical en el borde derecho) va del primer nodo al último y
     sistemas__union lo lleva hasta el bus del plano (interacciones.js) */
  .sistemas__red {
    --fila: 34px;          /* alto de cada fila (caben dos líneas de texto) */
    --fila-hueco: 5px;     /* hueco entre filas */
    --derivacion: 16px;    /* de la píldora al bus */
    /* --ajuste (de 0 a una fila; lo pone interacciones.js): baja la lista para que la unión con
       el plano entre en el bus a media distancia entre dos derivaciones */
    transform: translateY(var(--ajuste, 0px));
    z-index: 2;            /* la unión (dentro) se pinta encima del marco del plano */
  }
  .sistemas__lista {
    grid-template-columns: 1fr;
    gap: var(--fila-hueco);
  }
  .sistema {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--derivacion);
    align-items: center;
    height: var(--fila);
  }
  .sistema__boton {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 12px 0 7px;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1.15;
    overflow: hidden;
  }
  /* La nota («integración») sigue al nombre: si no cabe, pasa a la segunda línea */
  .sistema__nota {
    display: inline;
    margin: 0 0 0 3px;
  }
  /* Derivación: 1 px a media fila, desde el borde de la píldora hasta el eje del bus */
  .sistema__linea {
    display: block;
    height: 1px;
    margin-right: 1px;     /* acaba en el eje del bus (2 px de ancho) */
    background: linear-gradient(90deg, rgba(42, 139, 175, 0.25), rgba(42, 139, 175, 0.6));
    transform-origin: 0 50%;
    transition: background 0.4s ease;
  }
  .sistema:is(.activo, .en-secuencia) .sistema__linea {
    background: linear-gradient(90deg, rgba(150, 210, 228, 0.6), #96D2E4);
  }
  /* Nodo cuadrado sobre el bus, centrado en la derivación (como los nodos del plano) */
  .sistema__nodo {
    display: block;
    position: absolute;
    right: -2px;
    top: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 1.5px;
    background: #0d0d14;
    border: 1px solid rgba(42, 139, 175, 0.85);
    box-sizing: border-box;
    z-index: 1;
  }
  .sistema:is(.activo, .en-secuencia) .sistema__nodo {
    background: #96D2E4;
    border-color: #96D2E4;
  }
  /* Bus: del centro de la primera fila al de la última (ni más ni menos) */
  .sistemas__bus {
    display: block;
    position: absolute;
    top: calc(var(--fila) / 2);
    bottom: calc(var(--fila) / 2);
    right: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--azul), var(--turquesa), var(--verde)); /* el bus lleva el degradado del logo, igual que en el plano */
    transform-origin: 50% 0;
    /* El destello no se sale por arriba ni por abajo del bus */
    clip-path: inset(0 -4px);
  }
  /* Entrada del bus al plano. Sin JavaScript, un tramo corto; con él, sistemas__union llega hasta el
     bus de la casa (lo calcula interacciones.js) y este tramo se quita */
  .sistemas__bus::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 24px;
    height: 2px;
    background: var(--azul);
  }
  .sistemas__red--unida .sistemas__bus::after {
    display: none;
  }
  .sistemas__union {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
  }
  .sistemas__red--unida .sistemas__union {
    display: block;
  }
  .sistemas__union-linea {
    fill: none;
    stroke: var(--azul);
    stroke-width: 2;
    stroke-linejoin: miter;
    stroke-linecap: square;
  }
  .sistemas__union-nodo {
    fill: #0d0d14;
    stroke: #2A8BAF;
    stroke-width: 1;
  }
  .sistemas__destello {
    position: absolute;
    left: -2px;
    top: 0;
    width: 6px;
    height: 26px;
    border-radius: 3px;
    background: linear-gradient(180deg, transparent, #fff, transparent);
    opacity: 0;
  }
  /* Telegrama: punto que recorre derivación → bus → unión (lo coloca animaciones.js, centrado) */
  .sistemas__telegrama {
    display: block;
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(42, 139, 175, 0.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3;
  }
  .franja {
    font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  }
}
/* Escritorio con pantalla baja (se fija desde 700 px de alto): escenario más compacto para que quepa */
@media (min-width: 900px) and (max-height: 940px) {
  .control__escenario {
    padding-top: 80px;
    padding-bottom: 12px;
    gap: 10px 22px;
  }
  .control__cabeza .titulo-seccion { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
  .control__cabeza .entradilla { font-size: clamp(1rem, 1.5vw, 1.15rem); margin-top: 12px; }
  .control__plano { max-height: calc(100svh - 210px); }
  .sistemas__ayuda { display: none; }
  .sistemas__titulo { margin-bottom: 8px; }
  .sistemas__red { --fila: 30px; --fila-hueco: 3px; }
  .sistema__boton { font-size: 0.7rem; gap: 6px; padding-right: 8px; }
  .panel-knx { gap: 8px; padding: 10px 12px 12px; }
  .panel-knx__barra { padding-bottom: 6px; }
  .escena-boton { min-height: 58px; padding: 7px 9px; gap: 4px; }
  .idea-boton { min-height: 28px; padding: 4px 8px; font-size: 0.7rem; }
  .panel-knx__acciones li { font-size: 0.75rem; line-height: 1.35; }
  .panel-knx__quiero { font-size: 0.8rem; }
  .panel-knx__clima { padding: 6px 10px 8px; }
  .panel-knx__temp { font-size: 1.2rem; }
  .energia__curva,
  .energia__barras { height: 48px; }
}
/* Escritorio táctil (tableta apaisada): filas de 44 px para el dedo, con el mismo ritmo */
@media (min-width: 900px) and (pointer: coarse) {
  .sistemas__red { --fila: 44px; --fila-hueco: 4px; }
}
/* Pantallas anchas (desde 1600 px): la sección KNX usa más ancho y el plano crece (1440 no cambia) */
@media (min-width: 1600px) {
  .control__dentro {
    max-width: min(1760px, 100%);
  }
  .control__escenario {
    grid-template-columns: 196px minmax(0, 1fr) 330px;
    gap: 14px 28px;
  }
  /* La cabeza (etiqueta, titular y entradilla) sigue en la columna común de la web (1200 px) */
  .control__cabeza {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
  }
}
/* Móvil: aire entre la lista de sistemas y la frase grande */
@media (max-width: 899px) {
  .franja { margin-top: 48px; }
}
@media (min-width: 900px) and (max-height: 800px) {
  /* 1366 × 768 y parecidos: la explicación de la idea necesita el sitio del consumo */
  .panel-knx__energia { display: none; }
}

/* ---------- Proceso: «del plano a la realidad» ---------- */

.proceso {
  position: relative;
}
/* Todo el contenido va por encima del fondo decorativo */
.proceso > .cabeza,
.proceso > .recorrido {
  position: relative;
  z-index: 1;
}

/* Fondo: rejilla de plano azul y resplandor (el plano de la casa va en proceso.css).
   Ocupa todo el ancho de la ventana (main recorta lo que sobra: sin scroll lateral) */
.proceso__fondo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
}
.proceso__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(166, 201, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 201, 74, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 45% at var(--rejilla-centro, 50% 68%), #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 45% at var(--rejilla-centro, 50% 68%), #000 20%, transparent 70%);
}
.proceso__resplandor {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 9% at 50% 88%, rgba(255, 196, 140, 0.12), transparent 70%),
    radial-gradient(50% 12% at 50% 86%, rgba(42, 139, 175, 0.14), transparent 70%);
}

/* Marcador «01 / 05» con rodillo: solo con el scroll horizontal (E14) */
.proceso__marcador {
  display: none;
}
.rodillo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: bottom;
}
.rodillo__cinta {
  display: flex;
  flex-direction: column;
}
.rodillo__cinta > span {
  height: 1em;
}

.recorrido {
  position: relative;
}
.recorrido__linea {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
}
/* Línea de energía con un destello que la recorre en bucle */
.recorrido__relleno {
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%),
    var(--degradado);
  background-size: 35% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 16px rgba(42, 139, 175, 0.6);
  /* El destello blanco queda fuera de la línea (antes la recorría en bucle; propuesta 29/10/2026) */
  background-position: -100% -100%, 0 0;
}
/* Chispa en la punta de la línea (móvil y pantalla baja; con E14 la pone el hilo E17) */
.recorrido__chispa {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 2px, rgba(42, 139, 175, 0.75) 3px, rgba(42, 139, 175, 0) 70%);
  pointer-events: none;
}
.con-chispa .recorrido__chispa {
  display: block;
}
.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 40px;
}
.paso h3 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 600;
}
.paso p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gris);
}

/* Escena de cristal de cada paso (sin desenfoque de fondo: se mueve y sería caro) */
.paso__escena {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 55%),
    rgba(14, 14, 22, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.45);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
}
/* Reflejo diagonal del cristal */
.paso__escena::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%, transparent 70%, rgba(255, 255, 255, 0.04));
}
.paso.activo .paso__escena,
.paso.actual .paso__escena {
  border-color: transparent;
}
.paso.activo .paso__escena > .aro {
  opacity: 0.45;
}
.paso.actual .paso__escena > .aro {
  opacity: 1;
}
.paso.actual .paso__escena {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(42, 139, 175, 0.2);
}

/* Número gigante en contorno; al llegar la línea se rellena de luz de abajo arriba */
.paso__escena > .paso__cifra {
  position: absolute;
  top: 4px;
  right: 28px;
  font-size: clamp(4.25rem, 6.5vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  user-select: none;
}
.paso__cifra::after {
  content: attr(data-cifra);
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #F5F5F5 0%, var(--azul) 50%, var(--verde) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.paso.activo .paso__cifra::after {
  clip-path: inset(0 0 0 0);
}

/* Icono de línea fina: gris hasta que se enciende */
.paso__icono {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  color: var(--gris-apagado);
  transition: color 0.6s ease, filter 0.6s ease;
}
.paso.activo .paso__icono {
  color: #96D2E4;
  filter: drop-shadow(0 0 6px rgba(42, 139, 175, 0.6));
}

/* Remate con el botón de contacto */
.proceso__remate {
  position: relative;
  z-index: 1;
  margin: 48px 0 0;
}
.paso__numero {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--negro);
  font-weight: 600;
  color: var(--gris);
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* El paso se enciende cuando la línea llega a él (animaciones.js) */
.paso.activo .paso__numero {
  border-color: transparent;
  background: var(--degradado);
  color: var(--negro);
  box-shadow: 0 0 24px rgba(42, 139, 175, 0.55);
}
.paso.actual .paso__numero {
  box-shadow: 0 0 0 6px rgba(42, 139, 175, 0.14), 0 0 32px rgba(42, 139, 175, 0.65);
}

/* Móvil: pasos en columna y línea vertical a la izquierda */
@media (max-width: 899px) {
  .recorrido__linea {
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
  }
  .recorrido__relleno {
    transform-origin: top;
    background-image:
      linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%),
      linear-gradient(180deg, var(--azul), var(--verde));
    background-size: 100% 35%, 100% 100%;
  }
  .recorrido__chispa {
    left: 1px;
  }
  .pasos {
    gap: 28px;
  }
  .paso {
    position: relative;
    padding-left: 72px;
    min-height: 56px;
  }
  .paso__numero {
    position: absolute;
    left: 0;
    top: 0;
  }
  .paso__escena {
    padding: 22px;
  }
  .paso__escena > .paso__cifra {
    font-size: 4rem;
  }
  .paso__icono {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
  }
  .proceso__remate .boton {
    width: 100%;
  }
}
/* Móvil en horizontal: el botón a todo el ancho medía ≈ 776 px */
@media (max-width: 899px) and (orientation: landscape) {
  .proceso__remate .boton {
    max-width: 360px;
  }
}
/* Escritorio: cinco pasos en fila y línea horizontal */
@media (min-width: 900px) {
  .recorrido__linea {
    left: 28px;
    right: 28px;
    top: 27px;
    height: 2px;
  }
  .recorrido__relleno {
    transform-origin: left;
  }
  .pasos {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  .paso__numero {
    position: relative;
    margin-bottom: 24px;
  }
  /* Las escenas de una fila miden lo mismo de alto */
  .paso {
    display: flex;
    flex-direction: column;
  }
  .paso__escena {
    flex: 1;
  }
  /* Cinco columnas estrechas (pantalla baja, sin fijar): escenas más compactas */
  .proceso:not(.proceso--horizontal) .paso__escena {
    padding: 22px;
  }
  .proceso:not(.proceso--horizontal) .paso__escena > .paso__cifra {
    font-size: 3.6rem;
  }

  /* E14 Scroll horizontal: la clase la pone animaciones.js solo en escritorio
     con pantalla alta y sin «reducir movimiento». La sección ocupa la pantalla,
     se fija y la pista de pasos (más ancha que la pantalla) pasa de lado. */
  .proceso--horizontal {
    --ancho-paso: clamp(300px, 32vw, 440px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    --proceso-arriba: clamp(88px, 12vh, 110px);
    padding-top: var(--proceso-arriba);
    /* Sin el sitio que se reservaba para el botón «Contactar» del remate (quitado el 26/10/2026):
       menos hueco negro antes de Espacios (Enrique, 1/11/2026) */
    padding-bottom: clamp(28px, 4vh, 44px);
  }
  .proceso--horizontal .recorrido {
    width: max-content;
  }
  .proceso--horizontal .pasos {
    display: flex;
    gap: 48px;
  }
  .proceso--horizontal .paso {
    flex: none;
    width: var(--ancho-paso);
  }
  /* La línea va del primer círculo al último */
  .proceso--horizontal .recorrido__linea {
    right: calc(var(--ancho-paso) - 28px);
  }
  /* La escena actual manda; las demás se atenúan (la escala la pone animaciones.js).
     0,72 y no menos: con 0,5 el texto gris bajaba a ≈ 3,1:1; así queda en ≈ 5:1 (mínimo 4,5:1) */
  .proceso--horizontal .paso:not(.actual) .paso__escena {
    opacity: 0.72;
  }
  .proceso--horizontal .paso__escena {
    padding: 32px;
  }
  /* Marcador «01 / 05» arriba a la derecha, a la altura del título */
  .proceso--horizontal .proceso__marcador {
    position: absolute;
    z-index: 1;
    top: calc(var(--proceso-arriba) + 8px);
    right: var(--margen);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .proceso__cuenta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .proceso__cuenta .rodillo {
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
    letter-spacing: -0.03em;
    color: var(--blanco);
  }
  .proceso__total {
    font-size: 1rem;
    color: var(--gris-apagado);
  }
  .proceso__barra {
    position: relative;
    width: 160px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
  }
  .proceso__barra-relleno {
    position: absolute;
    inset: 0;
    transform-origin: left;
    background: var(--degradado);
    box-shadow: 0 0 10px rgba(42, 139, 175, 0.7);
  }
  /* Fondo con el scroll horizontal: la rejilla, centrada en el plano (arriba a la derecha) */
  .proceso--horizontal .proceso__fondo {
    --rejilla-centro: 72% 38%;
  }
  .proceso--horizontal .proceso__resplandor {
    background:
      radial-gradient(22% 22% at 70% 36%, rgba(255, 196, 140, 0.12), transparent 70%),
      radial-gradient(40% 36% at 68% 38%, rgba(42, 139, 175, 0.14), transparent 70%);
  }
  /* Remate: abajo a la derecha, aparece al llegar al último paso */
  .proceso--horizontal .proceso__remate {
    position: absolute;
    right: var(--margen);
    bottom: clamp(20px, 3.5vh, 40px);
    margin: 0;
  }
}

/* Escritorio con pantalla baja (E14 desde 720 px de alto): todo algo más compacto para que quepa */
@media (min-width: 900px) and (max-height: 860px) {
  .proceso--horizontal .cabeza {
    margin-bottom: 32px;
  }
  .proceso--horizontal .paso__numero {
    margin-bottom: 16px;
  }
  .proceso--horizontal .paso__escena {
    padding: 22px 24px;
  }
  .proceso--horizontal .paso__icono {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
  }
  .proceso--horizontal .paso__escena > .paso__cifra {
    font-size: clamp(3.5rem, 5vw, 5rem);
  }
}

/* «Reducir movimiento»: con los números ya rellenos de luz */
@media (prefers-reduced-motion: reduce) {
  .paso__cifra::after {
    clip-path: none;
    transition: none;
  }
  .paso__escena,
  .paso__icono {
    transition: none;
  }
}

/* ---------- Espacios: cuatro apartados con galería ---------- */

.nota-inspiracion {
  margin: 12px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-apagado);
}

.apartados {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apartado {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: #111114;
  color: var(--blanco);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.apartado:hover > .aro,
.mosaico__boton:hover > .aro {
  opacity: 1;
}
.apartado:hover {
  border-color: transparent;
  box-shadow: 0 16px 50px rgba(42, 139, 175, 0.2);
}
.apartado__foto {
  position: absolute !important;   /* gana a «.foco > *», que pone position: relative */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.apartado:hover .apartado__foto,
.apartado:focus-visible .apartado__foto {
  transform: scale(1.06);
}
/* Velo oscuro abajo: el rótulo se lee sobre cualquier foto */
.apartado::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 11, 0.88) 100%);
}
.apartado__rotulo {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2vw, 22px);
}
.apartado__titulo {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
}
.apartado__ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gris);
}
.apartado__ver svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  transition: transform 0.3s ease;
}
.apartado:hover .apartado__ver svg {
  transform: translateX(4px);
}
/* En móvil la tarjeta es estrecha: solo «10 fotos →» */
@media (max-width: 899px) {
  .apartado__ver-texto {
    display: none;
  }
}
/* El brillo del cursor (E10) por encima de la foto */
.apartado.foco::after {
  z-index: 2;
}
@media (min-width: 900px) {
  .apartados {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* Apartado sin fotos todavía: «en preparación», con la cinta de obra del 404 (no se pulsa) */
.apartado--preparacion {
  cursor: default;
  background: #0d0e11;
}
.apartado--preparacion:hover {
  border-color: var(--borde);
  box-shadow: none;
}
/* Papel de plano: rejilla fina y una más marcada cada 5 cuadros */
.apartado__plano {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(150, 210, 228, 0.09) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(150, 210, 228, 0.09) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(rgba(150, 210, 228, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(150, 210, 228, 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(circle at 30% 30%, rgba(42, 139, 175, 0.16), transparent 60%);
}
/* Cinta de obra cruzada, en el degradado corporativo, con rayas de aviso arriba y abajo */
.apartado__cinta {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 38%;
  transform: rotate(-14deg);
  overflow: hidden;
  padding: 9px 0;
  background:
    repeating-linear-gradient(-45deg, #0a0a0b 0 6px, transparent 6px 12px) top / 100% 5px no-repeat,
    repeating-linear-gradient(-45deg, #0a0a0b 0 6px, transparent 6px 12px) bottom / 100% 5px no-repeat,
    var(--degradado);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.apartado__cinta > span {
  display: inline-block;
  padding-left: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0a0b;
  /* (quieta: antes corría en bucle; propuesta 29/10/2026) */
}
.apartado__consola {
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  top: 62%;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  color: var(--gris-apagado);
}
.apartado__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.15em;
  background: var(--verde);
  /* (fijo: antes parpadeaba en bucle) */
}
/* Móvil: tarjeta estrecha; la cinta sube y la consola va en una línea para no pisar el título */
@media (max-width: 899px) {
  .apartado__cinta {
    top: 26%;
    padding: 7px 0;
  }
  .apartado__cinta > span {
    font-size: 0.62rem;
  }
  .apartado__consola {
    top: 56%;
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
}

/* Panel con la galería: hoja de liquid glass (E13) sobre la página desenfocada */
.panel {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: clamp(8px, 3vw, 40px);
  border: 0;
  background: transparent;
  color: var(--blanco);
}
.panel[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La página de detrás, oscurecida y desenfocada; aparece y se va con un fundido */
.panel::backdrop {
  background: rgba(5, 5, 6, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: fundir-fondo 0.4s ease both;
  transition: opacity 0.3s ease;
}
.panel--cerrando::backdrop {
  opacity: 0;
}
@keyframes fundir-fondo {
  from { opacity: 0; }
}
.panel__hoja {
  width: min(100%, 1180px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 28px;
  background: rgba(18, 18, 24, 0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 139, 175, 0.5) transparent;
}
.panel__cabeza {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--borde);
  background: rgba(18, 18, 24, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.panel__titulo {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
.panel__cuenta {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--gris);
}
.panel__cerrar {
  flex-shrink: 0;
}

/* Mosaico: columnas de fotos de distinto alto (cada una con su proporción real,
   así al abrirla en el visor no se deforma) */
.mosaico {
  columns: 2;
  column-gap: 10px;
  padding: clamp(12px, 2.4vw, 28px) clamp(12px, 3vw, 32px) clamp(20px, 3vw, 36px);
}
.mosaico__item {
  break-inside: avoid;
  margin: 0 0 14px;
}
.mosaico__boton {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #111114;
  cursor: zoom-in;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mosaico__boton:hover {
  border-color: transparent;
  box-shadow: 0 12px 36px rgba(42, 139, 175, 0.18);
}
.mosaico__img {
  width: 100%;
  height: auto;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mosaico__boton:hover .mosaico__img {
  transform: scale(1.04);
}
/* Descripción sobre la foto: capa de cristal en la parte baja, solo en escritorio,
   al pasar el ratón o con foco de teclado. En móvil no se muestra (está en el visor) */
.mosaico__marco {
  position: relative;
}
.mosaico__desc {
  display: none;
}
@media (min-width: 900px) {
  .mosaico__desc {
    display: block;
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)), rgba(10, 10, 11, 0.45);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    color: var(--blanco);
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .mosaico__marco:hover .mosaico__desc,
  .mosaico__boton:focus-visible + .mosaico__desc {
    opacity: 1;
    transform: none;
  }
}
.mosaico__item figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--gris);
}
@media (min-width: 640px) {
  .mosaico {
    columns: 3;
    column-gap: 14px;
  }
}

/* Visor a pantalla completa: foto grande, pie, contador y flechas */
.visor {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--blanco);
}
.visor[open] {
  display: grid;
  grid-template-rows: 1fr auto auto;
}
.visor__desc {
  justify-self: center;
  max-width: min(60ch, calc(100vw - 32px));
  margin: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gris);
}
.visor__desc[hidden] {
  display: none;
}
/* Con descripción, la foto cede algo de alto */
.visor:has(.visor__desc:not([hidden])) .visor__img {
  max-height: calc(100dvh - 280px);
}
.visor::backdrop {
  background: rgba(5, 5, 6, 0.9);
  animation: fundir-fondo 0.45s ease both;
  transition: opacity 0.4s ease;
}
.visor--cerrando::backdrop {
  opacity: 0;
}
.visor__escena {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 72px clamp(12px, 4vw, 48px) 12px;
  touch-action: pinch-zoom;   /* el arrastre de lado lo gestiona interacciones.js */
  cursor: grab;
}
.visor__escena:active {
  cursor: grabbing;
}
.visor__img {
  width: auto;
  height: auto;
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 190px);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-drag: none;
}
.visor__cerrar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.visor__barra {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  margin: 8px 12px 20px;
  padding: 6px;
  border-radius: 999px;
}
.visor__texto {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  line-height: 1.3;
}
.visor__pie {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.visor__cuenta {
  font-size: 0.8rem;
  color: var(--gris);
}
.visor__flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanco);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.visor__flecha:hover {
  border-color: var(--azul);
  background: rgba(42, 139, 175, 0.18);
}
.visor__flecha:active {
  transform: scale(0.92);
}
.visor__flecha svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* Con el panel abierto, la página de detrás no se mueve */
.panel-abierto {
  overflow: hidden;
}


/* Espacios sube tras el Proceso fijado (Enrique, 1/11/2026): la escena fijada ya deja su propio aire
   debajo de las tarjetas, así que aquí basta un relleno corto (la clase la pone animaciones.js solo
   con el scroll horizontal del Proceso; en móvil y sin JS, el relleno de siempre) */
@media (min-width: 900px) {
  #espacios.espacios--tras-fijado {
    padding-top: clamp(24px, 3vh, 40px);
  }
}
/* ---------- energEA ---------- */

.empresa {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 64px;
  align-items: center;
}
.empresa__figura {
  position: relative;
}
.empresa__foto {
  aspect-ratio: 4 / 5;
  max-height: 80svh;
}
/* Detalle de plano: cotas con marcas inclinadas en los extremos y esquinas de encuadre */
.empresa__cotas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cota {
  position: absolute;
  background: rgb(var(--tono) / 0.6);
}
.cota--h {
  left: 0;
  right: 0;
  bottom: -20px;
  height: 1px;
  transform-origin: left center;
}
.cota--v {
  display: none;
  top: 0;
  bottom: 0;
  right: -22px;
  width: 1px;
  transform-origin: center top;
}
.cota::before,
.cota::after {
  content: "";
  position: absolute;
  background: inherit;
}
.cota--h::before,
.cota--h::after {
  top: -6px;
  width: 1px;
  height: 13px;
  transform: rotate(45deg);
}
.cota--h::before { left: 0; }
.cota--h::after { right: 0; }
.cota--v::before,
.cota--v::after {
  left: -6px;
  width: 13px;
  height: 1px;
  transform: rotate(45deg);
}
.cota--v::before { top: 0; }
.cota--v::after { bottom: 0; }
.esquina {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid rgb(var(--tono) / 0.7);
}
.esquina--sup {
  top: -9px;
  right: -9px;
  border-top-width: 1px;
  border-right-width: 1px;
}
.esquina--inf {
  bottom: -9px;
  left: -9px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.empresa__texto {
  position: relative;
}
/* Párrafos unidos por un eje de luz con un nodo por párrafo (se dibuja al aparecer, animaciones.js) */
.empresa__parrafos {
  position: relative;
  margin-top: 28px;
  padding-left: 28px;
}
.empresa__eje {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgb(var(--tono) / 0.8), rgb(var(--tono) / 0.2) 70%, transparent);
  transform-origin: center top;
}
.empresa__parrafos > p {
  position: relative;
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--gris);
}
.empresa__parrafos > .entradilla {
  margin-top: 0;
  color: var(--blanco);
}
.empresa__parrafos > p::before {
  content: "";
  position: absolute;
  left: -32.5px;
  top: calc(0.8em - 4.5px);
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid rgb(var(--tono));
  border-radius: 50%;
  background: var(--negro);
  box-shadow: 0 0 0 4px rgb(var(--tono) / 0.12);
  transform: scale(calc(0.4 + 0.6 * var(--nodo, 1)));
}
@media (min-width: 900px) {
  .empresa {
    grid-template-columns: 5fr 7fr;
    gap: 80px;
  }
  .empresa__texto {
    grid-column: 2;
    grid-row: 1;
  }
  .cota--h { bottom: -22px; }
  .cota--v { display: block; }
  .esquina--sup { top: -12px; right: -12px; }
  .esquina--inf { bottom: -12px; left: -12px; }
}

/* ---------- Fondo CAD energEA ----------
   «Espacio de modelo» de AutoCAD a sangre (todo el ancho de la ventana) detrás de la sección: cuadrícula
   doble en CSS (menor cada 24 px, mayor cada 120 px), unas pocas líneas de construcción en los márgenes
   (lejos del texto), icono de ejes (SCP) y una mira en cruz que sigue al ratón (solo escritorio con ratón).
   Decorativo y aria-hidden. Sin JavaScript o con «reducir movimiento» se ve quieto y completo;
   animaciones.js oculta y dibuja las líneas al entrar. */
.cadf {
  /* --pad: el mismo relleno vertical que .seccion; --borde: distancia del borde de la ventana al contenido */
  --pad: clamp(72px, 10vw, 140px);
  --borde: max(var(--margen), calc(50% - 600px));
  --cad-azul: rgb(42 139 175 / 0.32);
  --cad-verde: rgb(136 174 39 / 0.36);
  position: absolute;
  inset: 0 calc(50% - 50vw); /* a sangre: html y body recortan el desborde lateral */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  color: var(--cad-azul);
}
.cadf__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(42 139 175 / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(42 139 175 / 0.1) 1px, transparent 1px),
    linear-gradient(rgb(42 139 175 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(42 139 175 / 0.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 50% 0; /* centrada: las dos rejillas coinciden ((120 − 24) / 2 = 48, múltiplo de 24) */
  /* Se funde arriba y abajo con las secciones vecinas */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
/* Líneas de referencia largas y discontinuas (azul) y línea de eje de trazo y punto (verde) */
.cadf__ref,
.cadf__eje {
  position: absolute;
}
.cadf__ref--h {
  left: 0;
  right: 0;
  top: calc(var(--pad) * 0.4);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--cad-azul) 0 10px, transparent 10px 16px);
  transform-origin: left center;
}
.cadf__ref--v {
  top: 0;
  bottom: 0;
  right: calc(var(--borde) / 2);
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--cad-azul) 0 10px, transparent 10px 16px);
  transform-origin: center top;
}
.cadf__eje {
  left: 0;
  right: 0;
  bottom: calc(var(--pad) * 0.2);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--cad-verde) 0 18px, transparent 18px 22px, var(--cad-verde) 22px 25px, transparent 25px 29px);
  transform-origin: right center;
}
/* Piezas en SVG: trazo fino de 1 px */
.cadf svg {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
}
.cadf__trazo--fino { stroke-dasharray: 3 3; }
.cadf__trazo--verde { stroke: var(--cad-verde); }
.cadf text {
  fill: currentColor;
  stroke: none;
  font: 500 10px/1 "Poppins", system-ui, sans-serif;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Arco de puerta: en el margen izquierdo, centrado en él y por debajo de la barra del menú */
.cadf__arco {
  left: calc(var(--borde) / 2 - 42px);
  top: calc(var(--pad) * 0.15 + 90px);
  width: 84px;
  height: 84px;
}
/* Círculo de centro con cruz: en el margen derecho, centrado sobre la línea vertical de referencia */
.cadf__centro {
  right: calc(var(--borde) / 2 - 32px);
  top: calc(var(--pad) * 0.4 + 58px);
  width: 64px;
  height: 64px;
}
/* Escritorio estrecho: los márgenes no caben el arco ni el círculo sin pisar la foto o el texto */
@media (min-width: 900px) and (max-width: 1399px) {
  .cadf__arco,
  .cadf__centro { display: none; }
}
/* Cota «12.00»: abajo a la derecha, en el relleno inferior, bajo la columna de texto */
.cadf__cota {
  right: var(--borde);
  bottom: calc(var(--pad) * 0.2 + 14px);
  width: 240px;
  height: 40px;
  color: var(--cad-verde);
}
.cadf__cota text { fill: rgb(42 139 175 / 0.55); }
/* Icono de ejes (SCP) en la esquina inferior izquierda, como en AutoCAD */
.cadf__ucs {
  left: max(12px, calc(var(--borde) / 2 - 24px));
  bottom: calc(var(--pad) * 0.2 + 12px);
  width: 48px;
  height: 48px;
}
.cadf__ucs text { font-size: 9px; fill: rgb(42 139 175 / 0.5); }
/* Mira en cruz tipo AutoCAD: oculta por defecto; solo existe en escritorio con ratón y movimiento.
   animaciones.js la enciende con autoAlpha (visibility + opacidad) al pasar el ratón por la sección. */
.cadf__mira {
  display: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.cadf__mira-h,
.cadf__mira-v,
.cadf__mira-punto {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.cadf__mira-h {
  right: 0;
  height: 1px;
  background: rgb(42 139 175 / 0.3);
}
.cadf__mira-v {
  bottom: 0;
  width: 1px;
  background: rgb(42 139 175 / 0.3);
}
.cadf__mira-caja {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid rgb(42 139 175 / 0.6);
}
.cadf__mira-lectura {
  position: absolute;
  left: 14px;
  top: 12px;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgb(42 139 175 / 0.75);
}
.cadf__mira--izq .cadf__mira-lectura {
  left: auto;
  right: 14px;
}
/* Sobre el texto, la lectura se apaga (la opacidad de la lectura solo la lleva el CSS) */
.cadf__mira-lectura { transition: opacity var(--dur-xs, 0.2s) cubic-bezier(0.37, 0, 0.63, 1); }
.cadf__mira--texto .cadf__mira-lectura { opacity: 0; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cadf__mira { display: block; }
}
/* Móvil: solo la cuadrícula y cuatro líneas (referencia, eje, centro y cota), más pequeñas; sin mira */
@media (max-width: 899px) {
  .cadf__ref--v,
  .cadf__arco,
  .cadf__ucs { display: none; }
  .cadf__centro {
    right: calc(var(--margen) + 8px);
    top: calc(var(--pad) * 0.4 - 20px);
    width: 40px;
    height: 40px;
  }
  .cadf__cota {
    bottom: calc(var(--pad) * 0.2 + 6px);
    width: 168px;
    height: 28px;
  }
  /* Los SVG se encogen: trazo algo más grueso para que siga midiendo ≈ 1 px en pantalla */
  .cadf__centro { stroke-width: 1.6; }
  .cadf__cota { stroke-width: 1.4; }
}

/* ---------- KNX: solo el logo oficial, centrado sobre la línea de energía ---------- */

.sellos {
  padding-top: 0;
  padding-bottom: 24px;
}
.sello {
  display: flex;
  justify-content: center;
  align-items: stretch;   /* placas de la misma altura (KNX manda) */
  flex-wrap: wrap;
  gap: 16px;
}
/* Rótulo pequeño sobre la fila de marcas (solo con MARCA_PANASONIC en generar.mjs) */
.sellos__rotulo {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Móvil: la línea entre el sello y Contacto, más corta (160 px de línea sola abarataban el ritmo).
   El SVG se acorta solo en vertical (preserveAspectRatio="none" en generar.mjs): el grosor de la línea no cambia */
@media (max-width: 899px) {
  .sellos + .conector .linea-conducto {
    height: 72px;
  }
}
.sello__logo {
  width: 160px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;   /* el logo oficial es sobre blanco */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 8px 30px rgba(42, 139, 175, 0.22);
}
.sello__logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Panasonic: logotipo oficial facilitado por Panasonic, tal cual y con sus colores, en la misma placa blanca
   y centrado en altura sobre la placa de KNX (misma altura de placa; «Panasonic» ≈ alto de «KNX») */
.sello__logo--ancho {
  width: auto;
  display: flex;
  align-items: center;
  padding: 12px 18px;
}
.sello__logo--ancho img {
  width: 200px;
}
@media (max-width: 479px) {
  .sello { gap: 12px; }
  .sello__logo { width: 128px; padding: 10px; border-radius: 12px; }
  .sello__logo--ancho { width: auto; padding: 10px 14px; }
  .sello__logo--ancho img { width: 164px; }
}

/* ---------- Contacto ---------- */

.contacto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 var(--margen) clamp(96px, 12vw, 160px);   /* la línea de energía (E2) baja hasta tocar el panel */
}
/* Los orbes se funden arriba y abajo: sin bordes rectos al cortarse con la sección */
.contacto .orbes {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.contacto__panel {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px);
  border-radius: 32px;
}
/* Sin cristal (1/11/2026, Enrique: como en las tarjetas de «Por qué energEA», el desenfoque recogía
   el orbe verde de detrás y el panel se veía difuminado). Fondo propio casi opaco con un toque del
   degradado de la marca arriba a la izquierda; se conservan borde, reflejos, sombra y brillo de .vidrio */
.contacto__panel.vidrio {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(150deg, rgb(42 139 175 / 0.10), rgb(42 154 120 / 0.03) 45%, transparent 75%),
    rgb(8 9 11 / 0.94);
}
.contacto__titulo {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.contacto__detalle {
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: var(--gris);
}
.contacto__correo {
  display: inline-block;
  margin-top: 36px;
  font-size: clamp(1.25rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 8px;
}
.contacto__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
/* Detalle de plano: anillos de señal que laten despacio y una cruz de ejes (solo escritorio ancho) */
.contacto__panel > .contacto__senal {
  display: none;
  position: absolute;
  top: clamp(40px, 6vw, 72px);
  right: clamp(40px, 6vw, 72px);
  width: clamp(180px, 22vw, 270px);
  aspect-ratio: 1;
  pointer-events: none;
}
.contacto__senal i {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(var(--tono) / 0.4);
  border-radius: 50%;
  /* Tres aros quietos (antes se expandían en bucle; propuesta 29/10/2026) */
  opacity: 0.5;
}
.contacto__senal i:nth-child(1) { transform: scale(0.4); }
.contacto__senal i:nth-child(2) { transform: scale(0.7); opacity: 0.35; }
.contacto__senal i:nth-child(3) { opacity: 0.2; }
.contacto__senal b {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgb(var(--tono)) 0 3px, rgb(var(--tono) / 0.25) 4px 9px, transparent 10px),
    linear-gradient(90deg, transparent, rgb(var(--tono) / 0.35) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgb(var(--tono) / 0.35) 50%, transparent) center / 1px 100% no-repeat;
}
@media (min-width: 1000px) {
  .contacto__panel > .contacto__senal { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .contacto__senal i:nth-child(1) { transform: scale(0.45); }
  .contacto__senal i:nth-child(2) { transform: scale(0.72); }
  .contacto__senal i:nth-child(3) { transform: scale(1); }
}

/* Botones de contacto: icono de línea, foco visible y estados de cristal coherentes */
.boton__icono {
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton--vidrio.vidrio {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.boton--vidrio.vidrio.con-iman {
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.boton--vidrio.vidrio:hover {
  border-color: rgba(42, 139, 175, 0.6);
  background: rgba(255, 255, 255, 0.1);
}
.boton:focus-visible,
.contacto__correo:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(42, 139, 175, 0.5);
}
/* «Copiar correo» en pequeño, abajo a la derecha del panel (Enrique, 1/11/2026); al copiar dice «Correo copiado» */
.contacto__panel > .contacto__copiar {
  position: absolute;
  right: clamp(24px, 4vw, 44px);
  bottom: clamp(20px, 3vw, 32px);
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-apagado);
  cursor: pointer;
  transition: color var(--dur-ui) var(--ea-suave);
}
.contacto__copiar:hover,
.contacto__copiar.copiado { color: var(--blanco); }
.contacto__copiar:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Pie: cierra la web con la línea de energía donde termina el hilo (E17) ---------- */

.pie {
  position: relative;
  isolation: isolate;
  --carril: var(--margen);   /* lo pone animaciones.js: la x donde llega el hilo */
}
/* Rejilla de plano y luz que baja desde la línea, con el tono de la sección */
.pie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(var(--tono) / 0.1), transparent 55%),
    linear-gradient(rgb(var(--tono) / 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(var(--tono) / 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.pie__energia {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}
.pie__linea {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0, rgb(var(--tono) / 0.9) var(--carril), rgb(var(--tono) / 0.4) 55%, transparent 100%);
  box-shadow: 0 0 18px rgb(var(--tono) / 0.35);
}
.pie__nodo,
.pie__onda {
  position: absolute;
  left: var(--carril);
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  box-sizing: border-box;
  border: 1px solid rgb(var(--tono));
  border-radius: 50%;
}
.pie__nodo {
  background: var(--negro);
}
.pie__onda {
  opacity: 0;
}
.pie__dentro {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 64px var(--margen) 40px;
  display: grid;
  gap: 32px;
  font-size: 1rem;
  color: var(--gris);
}
.pie__marca img {
  width: 160px;
  height: auto;
}
.pie__marca p {
  margin: 12px 0 0;
}
.pie__contacto,
.pie__legal {
  display: grid;
  gap: 4px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Enlaces con zona de pulsación cómoda y un subrayado de degradado al señalarlos */
.pie a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  width: fit-content;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pie a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--degradado);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.pie a:hover,
.pie a:focus-visible {
  color: var(--blanco);
}
.pie a:hover::after,
.pie a:focus-visible::after {
  transform: scaleX(1);
}
.pie__derechos {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--gris-apagado);
}
@media (min-width: 900px) {
  .pie__dentro {
    grid-template-columns: 2fr 1.5fr 1fr;
  }
  .pie__derechos {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pie a::after { transition: none; }
}


/* Contacto (variante 1, elegida): línea con el degradado bajo el correo, que animaciones.js dibuja
   con la variable --linea (0 → 1, se aplica como scaleX). Sin JavaScript no hay línea */
.contacto__correo--linea {
  position: relative;
}
.contacto__correo--linea::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--turquesa), var(--verde));
  opacity: 0.85;
  transform: scaleX(var(--linea, 1));
  transform-origin: left center;
}
/* ---------- Páginas legales ---------- */

.legal {
  max-width: calc(800px + 2 * var(--margen));
  min-height: 70svh;
  margin: 0 auto;
  padding: 180px var(--margen) 120px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 32px;
}
.legal__pendiente {
  margin: 0;
  padding: 20px 24px;
  border: 1px dashed rgba(42, 139, 175, 0.6);
  border-radius: 16px;
  color: var(--gris);
}

.legal__bloque h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 600;
}
.legal__bloque p {
  margin: 0 0 12px;
  color: var(--gris);
  line-height: 1.65;
}

/* ---------- Móvil ---------- */

@media (max-width: 899px) {
  .orbe {
    width: 120vw;
    height: 120vw;
  }
  .portada {
    padding-top: 120px;
  }
  .cinta {
    margin-top: 56px;
  }
  /* El desenfoque es caro: en móvil, más suave */
  .vidrio {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
  /* E13+ cristal líquido en móvil: mismo aspecto, desenfoque más suave y sin lente SVG */
  .vidrio.cristal {
    --desenfoque: 10px;
  }
  /* (Tarjetas de Confianza sin cristal desde el 31/10/2026: ver 02-portada.css) */
}

/* ---------- Reducir movimiento: sin animaciones CSS ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .texto-degradado,
  .portada__icono::before,
  .panel::backdrop,
  .visor::backdrop {
    animation: none;
  }
  .boton,
  .tarjeta,
  .menu a,
  .selector button,
  .fotos-modo img,
  .apartado,
  .apartado__foto,
  .paso__numero,
  .idea-boton,
  .mosaico__boton,
  .mosaico__img,
  .visor__flecha,
  .panel::backdrop,
  .visor::backdrop {
    transition: none;
  }
  .boton:hover,
  .apartado:hover .apartado__foto,
  .mosaico__boton:hover .mosaico__img,
  .visor__flecha:active {
    transform: none;
  }
}

/* ---------- E25 Intro «red de energía» (solo portada) ----------
   No hay nada en el HTML: la tapa provisional la pone un script del <head> (clase
   «intro-tapa», con seguro de 4 s) y la capa animada la crea animaciones.js.
   Sin JavaScript o con «reducir movimiento», no existe. */
html.intro-tapa body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--negro);
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  touch-action: none;
}
.intro__escena {
  position: absolute;
  inset: 0;
}
/* Fondo negro que se abre desde el centro: máscara radial con un radio (--r) que anima GSAP.
   Borde difuminado de 160 px: el iris se abre como una onda de luz, sin corte duro */
.intro__fondo {
  --r: -200px;
  position: absolute;
  inset: 0;
  background: var(--negro);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + 160px));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r), #000 calc(var(--r) + 160px));
}
/* Resplandor azul-verde detrás del logo (degradado radial, sin blur) */
.intro__resplandor {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: min(110vw, 1000px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 139, 175, 0.32), rgba(136, 174, 39, 0.14) 45%, transparent);
  opacity: 0;
}
/* Red mundial y puntos del mapa en canvas (E25): debajo del SVG del mapa, a pantalla completa
   (los puntos, encima de la red; animaciones.js les da su medida en px) */
.intro__malla,
.intro__puntos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.intro__red {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.intro__lejos circle {
  fill: #F5F5F5;
}
.intro__lineas path,
.intro__rayos path,
.intro__chispa,
.intro__chispa-halo,
.intro__enlace,
.intro__enlace-halo,
.intro__onda {
  fill: none;
  stroke-linecap: round;
}
.intro__lineas path {
  stroke: url(#intro-grad);
  stroke-width: 1;
  stroke-opacity: 0.55;
}
.intro__rayos path {
  stroke: url(#intro-grad);
  stroke-width: 1.2;
  stroke-opacity: 0.8;
}
/* Destello que viaja: trazo corto blanco con un halo azul más ancho y tenue */
.intro__chispa,
.intro__enlace {
  stroke: #F5F5F5;
  stroke-width: 1.8;
}
.intro__chispa-halo,
.intro__enlace-halo {
  stroke: #5FB3CF;
  stroke-width: 7;
  stroke-opacity: 0.3;
}
.intro__enlace {
  stroke: url(#intro-grad);
  stroke-width: 1.5;
}
.intro__nucleo {
  fill: #F5F5F5;
}
.intro__onda {
  stroke: url(#intro-grad);
  stroke-width: 2;
}
/* Centrado desde GSAP (xPercent / yPercent): GSAP anula la propiedad CSS «translate» */
.intro__destello {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(95, 179, 207, 0.55) 30%, rgba(136, 174, 39, 0.15) 60%, transparent);
  pointer-events: none;
}
/* Disco del logo: mismo tamaño que el de la portada, reducido con scale en el centro.
   Flip lo lleva hasta .portada__icono (allí queda a escala 1, nítido) */
.intro__logo {
  position: absolute;
  transform-origin: 50% 50%;
}
.intro__anillo {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  overflow: visible;
}
.intro__anillo circle {
  fill: none;
  stroke: url(#intro-grad-anillo);
  stroke-linecap: round;
}
.intro__anillo-linea {
  stroke-width: 3;
}
.intro__anillo-halo {
  stroke-width: 14;
  stroke-opacity: 0.22;
}
.intro__nombre {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  white-space: pre;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blanco);
}
/* El nombre sube entero desde una rendija (máscara), como los titulares (propuesta 29/10/2026) */
.intro__nombre {
  overflow: hidden;
  padding: 0.06em 0 0.16em;
}
.intro__nombre-linea {
  display: inline-block;
}
/* Escena «mapa»: la cámara (grupo SVG con zoom) recibe --px = 1 px de pantalla en unidades
   del mapa, y cada grosor se multiplica por él: puntos y líneas miden lo mismo con cualquier zoom.
   Los puntos son trazos de largo cero con punta redonda (un solo <path> por capa) */
.intro__camara {
  --px: 0.03px;
}
.intro__camara path {
  fill: none;
  stroke-linecap: round;
}
/* Los puntos del mapa (Europa, España, Baleares, Ibiza y Formentera) se dibujan en un canvas
   desde el 29/10/2026 (.intro__puntos): sus colores, brillos y tamaños están en puntosMapa (animaciones.js) */
.mapa__lineas path {
  stroke: url(#mapa-grad);
  stroke-width: calc(var(--px) * 1.1);
  stroke-opacity: 0.75;
}
.mapa__chispa {
  stroke: #F5F5F5;
  stroke-width: calc(var(--px) * 2);
}
.mapa__chispa-halo {
  stroke: #5FB3CF;
  stroke-opacity: 0.32;
  stroke-width: calc(var(--px) * 9);
}
/* Nodo: tres puntos superpuestos (halo exterior, halo interior y núcleo); --k es su
   diámetro en px de pantalla y lo anima GSAP */
.mapa__nodo {
  color: #2A8BAF;
}
.mapa__nodo--verde {
  color: #A6C94A;
}
.mapa__nodo--raiz {
  color: #5FB3CF;
}
.mapa__halo-ext {
  stroke: currentColor;
  stroke-opacity: 0.16;
  stroke-width: calc(var(--px) * var(--k, 24));
}
.mapa__halo-int {
  stroke: currentColor;
  stroke-opacity: 0.5;
  stroke-width: calc(var(--px) * var(--k, 9));
}
.mapa__nucleo {
  stroke: #F5F5F5;
  stroke-width: calc(var(--px) * var(--k, 3));
}
/* Rótulos de las capitales (decorativos, en pantalla: no escalan con el zoom). Plano / centro de datos:
   Poppins 500 pequeño, mayúsculas espaciadas, gris azulado tenue; el contorno oscuro los separa de los puntos */
.mapa__rotulo text,
.mapa__rotulos-isla text {
  font-family: var(--fuente);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  fill: #A9C3CC;
  stroke: rgba(10, 10, 11, 0.85);
  stroke-width: 3px;
  paint-order: stroke;
  stroke-linejoin: round;
}
.mapa__rotulo--d text { transform: translate(9px, 3.5px); text-anchor: start; }
.mapa__rotulo--i text { transform: translate(-7px, 3.5px); text-anchor: end; }
.mapa__rotulo--a text { transform: translate(0, -9px); text-anchor: middle; }
.mapa__rotulo--bm text { transform: translate(-6px, 17px); text-anchor: start; }
.mapa__rotulos-isla .mapa__ibiza {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-anchor: middle;
  fill: #F5F5F5;
}
.mapa__rotulos-isla .mapa__formentera {
  font-size: 9px;
  text-anchor: end;
}
@media (max-width: 899px) {
  .mapa__rotulo text { font-size: 8.5px; letter-spacing: 0.1em; stroke-width: 2.5px; }
  .mapa__rotulo--d text { transform: translate(7px, 3px); }
  .mapa__rotulo--i text { transform: translate(-6px, 3px); }
  .mapa__rotulo--bm text { transform: translate(-4px, 14px); }
  .mapa__rotulos-isla .mapa__ibiza { font-size: 12.5px; letter-spacing: 0.34em; }
  .mapa__rotulos-isla .mapa__formentera { font-size: 7.5px; }
}
/* Isla de la portada: Ibiza (y Formentera, más tenue) en puntos detrás del disco del logo,
   a modo de halo, y la sede como punto de luz. Lo crea animaciones.js (con «reducir movimiento»
   también, pero quieta). La máscara solo apaga el borde inferior de la portada */
.portada__rastro {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.portada__rastro-puntos {
  fill: none;
  stroke-linecap: round;
}
.portada__rastro-puntos--ibiza {
  stroke: rgba(245, 245, 245, 0.78);
  stroke-width: calc(var(--punto, 3) * 1px);
}
.portada__rastro-puntos--brillo {
  stroke: rgba(42, 139, 175, 0.2);
  stroke-width: calc(var(--punto, 3) * 3.4px);
}
.portada__rastro-puntos--formentera {
  /* Formentera marcada igual que Ibiza (Enrique) */
  stroke: rgba(245, 245, 245, 0.78);
  stroke-width: calc(var(--punto, 3) * 1px);
}
@media (max-width: 899px) {
  /* En móvil, estática y algo más tenue */
  .portada__rastro-puntos--ibiza { stroke: rgba(245, 245, 245, 0.55); }
  .portada__rastro-puntos--brillo { stroke: rgba(42, 139, 175, 0.12); }
  .portada__rastro-puntos--formentera { stroke: rgba(245, 245, 245, 0.55); }
}

/* Sede (Port des Torrent): punto de luz con anillo que pulsa y rótulo pequeño. Decorativo
   (aria-hidden); lo crea animaciones.js junto al rastro */
.portada__sede-punto {
  fill: #F5F5F5;
}
.portada__sede-anillo {
  fill: none;
  stroke: #5FB3CF;
  stroke-width: 1.2;
  stroke-opacity: 0.7;
}
.portada__sede-onda {
  /* Latido doble más visible (28/10/2026): azul claro del logo y algo más grueso */
  fill: none;
  stroke: #5FB3CF;
  stroke-width: 1.6;
}
/* Rótulo «PORT DES TORRENT» (ROTULO_SEDE en animaciones.js): como FORMENTERA en la intro,
   mayúsculas espaciadas y tenue, con contorno oscuro para leerse sobre los puntos */
.portada__sede-rotulo {
  font-family: var(--fuente);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  fill: #A9C3CC;
  fill-opacity: 0.9;
  stroke: rgba(10, 10, 11, 0.85);
  stroke-width: 3px;
  paint-order: stroke;
  stroke-linejoin: round;
}
@media (max-width: 899px) {
  /* La sede también late en móvil (28/10/2026), algo más suave */
  .portada__sede-onda { stroke-width: 1.3; }
  .portada__sede-rotulo { font-size: 8px; letter-spacing: 0.12em; stroke-width: 2.5px; }
}
/* Rótulo bajo el nombre en la intro (pequeño, decorativo, aria-hidden por la capa) */
.intro__sede {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(245 245 245 / 0.6);
}

/* Botón «Saltar intro»: pastilla de cristal pequeña, abajo a la derecha */
.intro__saltar {
  position: absolute;
  right: var(--margen);
  bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 44px;     /* zona de toque cómoda (antes 42 px) */
  padding: 10px 18px;
  border-radius: 999px;
  font: 400 0.85rem/1 var(--fuente);
  letter-spacing: 0.04em;
  color: var(--gris);
  cursor: pointer;
  transition: color 0.2s ease;
}
.intro__saltar:hover,
.intro__saltar:focus-visible {
  color: var(--blanco);
}
@media (max-width: 899px) {
  .intro__lineas path {
    stroke-opacity: 0.65;
  }
  /* Centrado sin «translate» (GSAP lo anula al mover el botón) */
  .intro__saltar {
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-tapa body::after,
  .intro {
    display: none;
  }
}

/* Sello de confianza de la portada: cápsula de cristal sobre el titular */
.portada__sello {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1.4rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(245 245 245 / 0.85);
}
.portada__sello span:first-child { color: #fff; font-weight: 700; }
.portada__sello i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A8BAF, #88AE27);
  box-shadow: 0 0 8px rgb(42 139 175 / 0.8);
}
@media (max-width: 899px) {
  .portada__sello { font-size: 0.7rem; padding: 0.45rem 0.9rem; gap: 0.3rem 0.55rem; }
}
/* Móvil: el sello largo va en dos líneas ordenadas, sin punto colgando (28/10/2026):
   «Desde 2014 · Experiencia contrastada» arriba y «Servicio técnico directo» debajo */
@media (max-width: 599px) {
  .portada__sello {
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(0.6rem, 2.7vw, 0.7rem);
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    gap: 0.3rem 0.5rem;
    border-radius: 18px;
    text-align: center;
  }
  .portada__sello i:last-of-type { display: none; }
  .portada__sello span:last-child { flex-basis: 100%; }
}

/* ---- Wellness: fondo de agua ----
   Dos capas detrás del contenido, con poca intensidad para no competir con textos y fotos:
   la luz del sol en el fondo de una piscina (canvas que pinta animaciones.js) y el esquema
   de principio de la piscina en estilo plano, como el fondo del Proceso. Ocupa todo el ancho
   de la ventana (main recorta lo que sobra: sin scroll lateral) */
#wellness {
  position: relative;
  isolation: isolate;
  /* sitio para el esquema debajo de las tarjetas. 31/10/2026 (Enrique): el esquema se metía por
     debajo de las últimas tarjetas y de la foto (cotas, «desbordante», llenado y EV quedaban tapados).
     Ahora el hueco sale del propio dibujo: lo que se ve del esquema (de la cota de arriba, y = 62,
     al pie del viewBox, 470) mide su ancho × 408/1260 ≈ 0,324; más los 24 px de «bottom» y un
     respiro entre las tarjetas y el dibujo */
  padding-bottom: calc(min(1100px, 104vw) * 0.324 + 24px + clamp(32px, 4vw, 56px));
}
.wellness__fondo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
}
/* (La luz del agua de Wellness es ahora el lienzo único .agua-bienestar, ver «Lema de Wellness») */
.wellness__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 85%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 40% at 50% 85%, #000 20%, transparent 70%);
}
.wellness__esquema {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(1100px, 104vw);
  height: auto;
  margin-left: max(-550px, -52vw);
  opacity: 0.5;
}
/* Esquema de principio de la piscina: mismo lenguaje que el de Climatización (trazo fino, rótulos
   tipo plano, chevrons de sentido). Aspiración en turquesa e impulsión en azul, los dos suaves */
.piscina__cota {
  stroke: rgba(166, 201, 74, 0.45);
  stroke-width: 0.8;
}
.piscina__trazo {
  stroke: rgba(200, 225, 255, 0.7);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.piscina__ola {
  stroke: rgba(94, 234, 212, 0.75);
}
.piscina__agua {
  fill: url(#piscina-agua);
}
.piscina__tubo {
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.piscina__tubo--asp { stroke: rgba(94, 234, 212, 0.55); }
.piscina__tubo--imp { stroke: rgba(125, 170, 255, 0.6); }
.piscina__tubo--des,
.piscina__tubo--red { stroke: rgba(200, 225, 255, 0.4); }
/* Señales eléctricas y piezas vistas por dentro: discontinuas (no se trazan con DrawSVG, se funden) */
.piscina__senal {
  stroke: rgba(200, 225, 255, 0.4);
  stroke-width: 0.9;
  stroke-dasharray: 3 3;
}
.piscina__nodo {
  fill: rgba(200, 225, 255, 0.75);
}
/* Agua que circula: puntos que corren por el tubo (animaciones.js mueve stroke-dashoffset) */
.piscina__flujo {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 2 22;
}
.piscina__flujo--asp { stroke: rgb(94, 234, 212); }
.piscina__flujo--imp { stroke: rgb(140, 185, 255); }
.piscina__flujo--tenue { stroke-opacity: 0.4; }   /* bypass de la BC-P: pasa poca agua */
.piscina__flujo--vaso {
  stroke-width: 1.3;
  stroke-opacity: 0.5;
}
.piscina__flecha {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.piscina__flecha--asp { stroke: rgb(94, 234, 212); }
.piscina__flecha--imp { stroke: rgb(140, 185, 255); }
.piscina__flecha--dos { stroke: rgba(200, 225, 255, 0.7); }  /* dosificación, desagüe y llenado */
.piscina__rotulo {
  fill: rgba(190, 210, 235, 0.8);
  font-family: var(--fuente);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.piscina__rotulo--fin { text-anchor: end; }
.piscina__rotulo--nota {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
/* En móvil el esquema se ve a un tercio de su tamaño: trazo algo más grueso y sin rótulos
   (a ese tamaño no se leen y solo ensucian) */
@media (max-width: 899px) {
  .piscina__trazo,
  .piscina__tubo { stroke-width: 2; }
  .piscina__flujo { stroke-width: 2.8; }
  .piscina__rotulo { display: none; }
}


/* Por qué energEA: el icono y el «12» van centrados en su tarjeta (Enrique) */
.confianza__icono {
  margin-inline: auto;
}
.confianza .cifra {
  width: fit-content;
  margin-inline: auto;
}
/* Etiqueta pequeña encima del año («Desde» 2014) */
.confianza .cifra-antes {
  display: block;
  width: fit-content;
  margin: 0 auto 4px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Bajantes del esquema de Climatización: el agua también corre por ellas (Enrique), como puntos
   que bajan por la ida y suben por el retorno. Solo con el flujo activo (escritorio, sección en pantalla) */
.ce-bajante::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 3px;
  top: 0;
  bottom: 0;
  opacity: 0;
  background-image: linear-gradient(to bottom, rgb(var(--clima)) 0 3px, transparent 3px 24px);
  background-size: 3px 24px;
  border-radius: 2px;
  transition: opacity 0.6s;
}
.ce-bajante--ret::after {
  opacity: 0;
}
.clima-fondo--vivo .ce-bajante::after {
  opacity: 1;
  animation: ce-baja-agua 1.6s linear infinite;
}
.clima-fondo--vivo .ce-bajante--ret::after {
  opacity: 0.5;
  animation-direction: reverse;
}
@keyframes ce-baja-agua {
  to { background-position: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .clima-fondo--vivo .ce-bajante::after { animation: none; }
}

/* Aspas de los ventiladores (fancoil y unidad exterior) (esquema de Climatización): quietas (antes
   giraban en bucle; propuesta 29/10/2026). Mientras corre el agua, el esquema va en su propia capa:
   al moverse el agua solo se vuelve a pintar el esquema, no la sección */
.ce-aspas {
  transform-box: view-box; /* gira sobre el buje (transform-origin va en el propio SVG) */
}
.clima-fondo--vivo .clima-esquema {
  will-change: transform;
}

/* Emisores según el modo (Enrique): en FRÍO trabaja solo el fancoil y el suelo radiante queda parado;
   en CALOR trabaja solo el suelo radiante y el fancoil queda parado. Lo inactivo se queda tenue y sin agua.
   Se usa `filter` (no `opacity`) porque GSAP ya anima la opacidad de estas piezas al dibujarlas */
.ce-sr,
.ce-fc {
  transition: filter 0.9s ease;
}
.pilar[data-modo="frio"] .ce-sr,
.pilar[data-modo="calor"] .ce-fc {
  filter: opacity(0.14);
}
.pilar[data-modo="frio"] .ce-onda.ce-sr {
  filter: opacity(0);
}
.pilar[data-modo="frio"] .ce-flujo.ce-sr,
.pilar[data-modo="calor"] .ce-flujo.ce-fc {
  visibility: hidden;
}
.pilar[data-modo="calor"] .ce-aspas.ce-fc {
  animation-play-state: paused;
}
/* Válvulas de 3 vías (Enrique, 28/10/2026): la vía CERRADA va rellena, como en un plano.
   V3V de emisores: en frío cierra B (colector), en calor cierra A (fancoil).
   V3V de producción: la vía al serpentín de ACS queda cerrada en los dos modos */
.ce-via {
  transition: fill 0.9s ease;
}
.pilar[data-modo="frio"] .ce-via--b,
.pilar[data-modo="calor"] .ce-via--a,
.ce-via--acs {
  fill: rgb(var(--clima) / 0.75);
}
/* Válvulas de zona del colector: cerradas (rellenas) en frío, sin agua en el suelo */
.ce-zona {
  transition: fill 0.9s ease;
}
.pilar[data-modo="frio"] .ce-zona {
  fill: rgb(var(--clima) / 0.7);
}
/* Ramal de producción de ACS: sin caudal mientras la V3V de arriba manda el agua al depósito de inercia */
.ce-acs {
  filter: opacity(0.3);
}
.ce-flujo.ce-acs {
  visibility: hidden;
}

/* ---------- Lema de Wellness: «El nuevo lujo es el bienestar.» ----------
   Interludio a pantalla completa entre Control KNX y Wellness. Detrás, agua con luz cálida
   (lienzo .agua-bienestar, compartido con Wellness, lo pinta animaciones.js) y un resplandor fijo
   (.lema__velo, se ve sin JS).
   La frase se ve siempre entera; animaciones.js la oculta y la hace subir solo si hay movimiento.
   La palabra clave va en su propia línea, enorme, con degradado cálido que fluye; con la clase
   .lema--agua (la pone animaciones.js) se ve primero su contorno (.lema__hueco) y se llena. */
.lema {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 78vh;
  min-height: 78svh;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--margen) clamp(24px, 4vh, 48px);
  text-align: center;
}
/* La frase abre Wellness: la sección empieza casi pegada a ella */
.lema + #wellness {
  padding-top: clamp(24px, 4vw, 56px);
}
.lema__fondo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  /* sin bordes: se funde con Control KNX arriba y con Wellness abajo */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
/* Agua con luz del lema y de Wellness: un solo lienzo (un solo contexto WebGL) fijo a la pantalla.
   animaciones.js lo pinta según el scroll: el agua va «pegada» a la página, cálida en el lema y azul
   en Wellness, y se funde arriba (Control KNX) y abajo (Proceso). Oculto hasta que animaciones.js lo
   enciende (.agua-bienestar--visible) solo mientras el lema o Wellness están en pantalla: sin
   JavaScript no hay nada que pintar. Va detrás del contenido (z-index -1 dentro del lema; Wellness,
   que viene después, se pinta encima) y no recibe clics. */
.agua-bienestar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* alto grande del móvil: no cambia al esconderse la barra del navegador */
  pointer-events: none;
  visibility: hidden;
  /* Viñeta muy suave: el agua llega entera a los bordes izquierdo y derecho y solo se apaga un
     poco en las esquinas (antes, 92 % / 42 %, los lados quedaban medio apagados y parecían quietos) */
  -webkit-mask-image: radial-gradient(ellipse 125% 90% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 125% 90% at 50% 50%, #000 58%, transparent 100%);
}
.agua-bienestar--visible {
  visibility: visible;
}
/* Encima del agua: calma la luz justo detrás de la frase (se lee mejor) y deja un resplandor cálido */
.lema__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 20% at 50% 50%, rgba(10, 10, 11, 0.6), transparent 100%),
    radial-gradient(ellipse 46% 34% at 50% 54%, rgba(255, 150, 90, 0.14), transparent 72%);
}
.lema__frase {
  margin: 0;
  max-width: var(--ancho);
  font-size: clamp(1.6rem, 5.4vw, 5.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--blanco);
  text-wrap: balance;
}
/* Ventana de cada palabra: lo que sube desde abajo no se ve hasta asomar (el margen negativo
   compensa el hueco que se deja para los rasgos que bajan de la línea, como la «j» o la «g») */
.lema__palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.04em 0.16em;
  margin: -0.06em -0.04em -0.16em;
}
.lema__tinta {
  display: inline-block;
}
/* La palabra clave, sola en su línea */
.lema__palabra--clave {
  display: block;
  width: fit-content;
  margin: 0.02em auto -0.16em;
  font-size: min(16.5vw, 11.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.lema__clave {
  position: relative;
  display: inline-block;
}
/* El punto final, en el tono claro del degradado */
.lema__palabra--clave .lema__tinta {
  color: #FFD7A8;
}
.lema__lleno {
  display: inline-block;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  background: linear-gradient(100deg, #FF9A62 0%, #FFD7A8 22%, #FF7A59 48%, #FFC890 74%, #FF9A62 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* (quieto: el agua ya se mueve con la ola; antes el degradado corría además en bucle) */
}
/* Contorno de la palabra vacía: solo con JavaScript y movimiento */
.lema__hueco {
  display: none;
  position: absolute;
  inset: 0 0 auto;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 196, 150, 0.8);
  user-select: none;
  pointer-events: none;
}
.lema--agua .lema__hueco {
  display: block;
  transition: opacity 0.6s ease;
}
/* Ya llena: el contorno sobra (asomaría un hilo de luz en los bordes de las letras) */
.lema--llena .lema__hueco {
  opacity: 0;
}
/* Línea de agua bajo la frase */
.lema__linea {
  display: block;
  width: min(520px, 70%);
  height: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  background: linear-gradient(90deg, transparent, rgba(255, 180, 120, 0.85), transparent);
}
@media (max-width: 899px) {
  .lema {
    min-height: 64vh;
    min-height: 64svh;
  }
}

/* Cabecera de Wellness a todo el ancho (escritorio), encima de la foto y las tarjetas */
@media (min-width: 900px) {
  #wellness .bento__cabeza {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 8px 0 24px;
  }
  #wellness .bento__foto,
  #wellness .bento__tarjetas {
    grid-row: 2;
  }
}
/* Legibilidad sobre el agua (más luminosa desde el 22/10/2026): tarjetas con fondo oscuro
   translúcido (sin desenfoque: el agua se mueve debajo y repintarlo costaría mucho) y una sombra
   suave detrás de los textos de la cabecera */
#wellness .tarjeta--elegible {
  background-color: rgba(10, 10, 14, 0.62);
}
#wellness .tarjeta--elegible.activa {
  background-color: rgba(28, 18, 14, 0.66);
}
#wellness .bento__cabeza {
  position: relative;
}
/* Sombra suave detrás de la cabecera: el agua brilla alrededor, no detrás de las letras */
#wellness .bento__cabeza::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 32% 50%, rgba(10, 10, 11, 0.6), transparent 72%);
}
#wellness .bento__cabeza .etiqueta,
#wellness .bento__cabeza .entradilla {
  text-shadow: 0 1px 18px rgba(10, 10, 11, 0.9), 0 0 2px rgba(10, 10, 11, 0.6);
}

/* Wellness: coletilla bajo los beneficios («respaldados por estudios… Ver fuentes») */
.clima-detalle .clima-detalle__respaldo {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--gris-apagado);
}
.clima-detalle__respaldo a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---------- Wellness en móvil (menos de 900 px): una foto por tarjeta ----------
   La foto grande quedaba encima de seis tarjetas (unos 1550 px) y cambiaba fuera de la pantalla al
   tocar una. En móvil se quita y cada tarjeta lleva arriba la foto de su servicio, a sangre con sus
   esquinas de arriba. El título es texto (sin el botón que cambia la foto) y no hay tarjeta «activa».
   En escritorio la foto de tarjeta no se ve ni se descarga (<source> vacía en generar.mjs) */
.tarjeta__foto,
.tarjeta__nombre {
  display: none;
}
@media (max-width: 899px) {
  #wellness .bento__foto,
  #wellness .tarjeta__elegir {
    display: none;
  }
  #wellness .tarjeta__nombre {
    display: inline;
  }
  #wellness .tarjeta__foto {
    display: block;
    order: -1;               /* arriba, aunque en el código va detrás del título (se lee después) */
    margin: -28px -28px 20px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 19px 19px 0 0; /* el de la tarjeta (20 px) menos su borde de 1 px */
    background: rgba(255, 255, 255, 0.03);
  }
  #wellness .tarjeta__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Sin estado «activa» ni aro encendido al tocar: aquí la tarjeta no elige nada */
  #wellness .tarjeta--elegible.activa,
  #wellness .tarjeta--elegible:hover {
    border-color: var(--borde);
    background-color: rgba(10, 10, 14, 0.62);
    box-shadow: none;
  }
  #wellness .tarjeta--elegible:hover > .aro {
    opacity: 0;
  }
}
/* ==========================================================
   Adaptativo (móvil, tableta, horizontal y navegadores) · 22/10/2026
   Reglas agrupadas por sección. Casi todas van dentro de @media que no
   afectan al escritorio de 1200 px o más, para no cambiar lo que ya funciona.
   No toca Control KNX (#control-knx), que se está rehaciendo aparte.
   ========================================================== */

/* Base: iOS no agranda el texto al girar el teléfono */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Zonas seguras del iPhone (muesca e isla, con viewport-fit=cover en el <meta>): el margen
   lateral nunca es menor que la zona segura. En ordenadores env() vale 0 y no cambia nada */
:root {
  --margen: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.cabecera {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

/* Respaldo para navegadores sin unidades svh/dvh (iOS 15.0–15.3, Samsung Internet antiguo):
   usan vh, que en el móvil incluye la barra del navegador */
@supports not (height: 1svh) {
  .portada__rejilla { min-height: calc(100vh - 300px); }
  .empresa__foto { max-height: 80vh; }
  .legal { min-height: 70vh; }
  .panel,
  .visor { height: 100vh; max-height: 100vh; }
  .visor__img { max-height: calc(100vh - 190px); }
}
@media (min-width: 900px) {
  @supports not (height: 1svh) {
    .portada__rejilla { min-height: calc(100vh - 324px); }
  }
}

/* Diálogos de Espacios (panel y visor): botones lejos de la muesca y de la barra de inicio */
.visor__cerrar {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}
.visor__barra {
  margin-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.panel {
  padding-top: max(clamp(8px, 3vw, 40px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(8px, 3vw, 40px), env(safe-area-inset-bottom, 0px));
}

/* Botones «Cómo funciona» / «Beneficios y uso»: el texto no se parte en dos líneas */
.clima-detalle__boton {
  white-space: nowrap;
}

/* ---------- Móvil (< 900 px) ---------- */
@media (max-width: 899px) {
  /* Zonas táctiles de 44 px como mínimo (WCAG 2.5.5 y guía de Apple) */
  .cabecera__barra .boton--pequeno,
  .boton-menu,
  .selector button,
  .clima-detalle__boton {
    min-height: 44px;
  }
  .pie a {
    min-height: 44px;
  }
  .cabecera__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pie__contacto,
  .pie__legal {
    gap: 0;
  }
}

/* Teléfonos estrechos (iPhone SE 1.ª, Android básico de 320–374 px):
   logo, «Contactar» y «Menú» caben en una sola línea */
@media (max-width: 374px) {
  .cabecera__barra {
    gap: 6px;
    padding-left: 14px;
  }
  .cabecera__logo img {
    width: 84px;
  }
  .cabecera__barra .boton--pequeno,
  .boton-menu {
    padding: 0 10px;
  }
}

/* Teléfonos en vertical (< 600 px) */
@media (max-width: 599px) {
  /* Contacto: el panel con menos relleno, el titular y el correo caben sin cortarse
     (el correo se parte, si hace falta, justo después de la @) */
  .contacto__panel {
    padding: 32px 22px;
    border-radius: 26px;
  }
  .contacto__titulo {
    font-size: min(3rem, 12.5vw);
  }
  /* «Copiar correo»: debajo de los botones, en su sitio, sin flotar */
  .contacto__panel > .contacto__copiar {
    position: static;
    display: block;
    margin: 16px 0 0 auto;
  }
  .contacto__correo {
    /* En una sola línea en el teléfono (Enrique, 1/11/2026): el tamaño se ajusta al ancho */
    font-size: min(1.25rem, 4.2vw);
    white-space: nowrap;
  }
  /* Cuatro botones de contacto: uno por línea, a todo el ancho y alineados */
  .contacto__botones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Espacios: en tarjetas de 140 px de ancho, «automatización» cabe entera */
  .apartado__rotulo {
    padding: 12px;
  }
  .apartado__titulo {
    font-size: clamp(0.85rem, 4.2vw, 1rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* ---------- Tableta vertical y móvil horizontal (600–899 px) ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  /* Tarjetas de Climatización y Wellness en dos columnas: menos scroll y líneas más cómodas */
  .bento__tarjetas {
    grid-template-columns: 1fr 1fr;
  }
  .bento__tarjetas:has(.clima-detalle[open]) > .tarjeta {
    grid-column: 1 / -1;
  }
  /* Foto principal más apaisada: con el móvil girado cabe en la pantalla */
  .bento__foto {
    aspect-ratio: 16 / 9;
  }
  /* Espacios: tarjetas apaisadas (en vertical 3:4 cada una ocupaba más de media pantalla) */
  .apartado {
    aspect-ratio: 4 / 3;
  }
  /* Contacto: los cuatro botones en una rejilla de 2 × 2 */
  .contacto__botones {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}
/* Móvil girado (poca altura): la foto de energEA no pasa del alto de la pantalla */
@media (max-width: 899px) and (max-height: 500px) {
  .bento__foto {
    max-height: 80vh;
    max-height: 80svh;
  }
  .empresa__foto {
    max-height: 85vh;
    max-height: 85svh;
    margin-inline: auto;
  }
}

/* ---------- Tableta horizontal y portátil pequeño (900–1199 px) ---------- */
@media (min-width: 900px) and (max-width: 1199px) {
  /* Con la foto al lado solo queda media pantalla: tarjetas en una columna
     (en dos, cada una medía unos 190 px y el texto quedaba en líneas de 2–3 palabras) */
  .bento__tarjetas {
    grid-template-columns: 1fr;
  }
}

/* Contacto en escritorio: con el botón de Instagram son cuatro; en una rejilla de 2 × 2
   quedan alineados en vez de dejar uno solo en la segunda línea */
@media (min-width: 900px) {
  .contacto__botones {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }
}

/* Pantallas táctiles grandes (iPad en horizontal, portátiles táctiles): zonas de 44 px */
@media (min-width: 900px) and (pointer: coarse) {
  .boton--pequeno,
  .selector button,
  .clima-detalle__boton {
    min-height: 44px;
  }
}

/* Móvil sin JavaScript: el menú se ve entero (no se puede plegar) y, fijo arriba, tapaba
   el titular de la portada. Sin JS la cabecera va en su sitio y se va con el scroll */
@media (max-width: 899px) {
  html:not(.js) .cabecera {
    position: relative;
    top: auto;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  html:not(.js) .portada {
    padding-top: 40px;
  }
  html:not(.js) .legal {
    padding-top: 64px;
  }
}

/* ---------- Control KNX en móvil (solo zonas táctiles; misma apariencia) ---------- */
@media (max-width: 899px) {
  /* Sistemas conectados: 44 px de alto para el dedo */
  .sistema__boton {
    min-height: 44px;
  }
  /* «Abrir plano» se queda pequeño para no tapar el plano, pero su zona táctil
     invisible llega a 44 px de alto */
  .plano__abrir::after {
    content: "";
    position: absolute;
    inset: -7px -4px;
  }
}

/* Menú móvil abierto: cada enlace (y ES / EN) con 44 px de zona táctil; el hueco entre
   enlaces se reduce para que el menú ocupe lo mismo que antes */
@media (max-width: 899px) {
  .js.menu-abierto .menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .js.menu-abierto .menu__enlaces {
    gap: 0;
  }
  .js.menu-abierto .menu {
    gap: 8px;
  }
  .js.menu-abierto .idiomas {
    gap: 4px;
  }
  .js.menu-abierto .idiomas a {
    min-width: 44px;
    justify-content: center;
  }
}

/* ---------- Zonas táctiles de 44 px en pantallas táctiles (QA 28/10/2026) ---------- */
@media (pointer: coarse) {
  /* Referencias científicas de Wellness y «Ver fuentes» */
  .clima-detalle__fuentes { gap: 0; }
  .clima-detalle__fuentes a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .clima-detalle__respaldo a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -14px; /* el área crece sin mover el texto */
  }
  /* «Abrir plano»: sube 9 px para no tapar más plano al crecer */
  .plano__abrir {
    min-height: 44px;
    top: 1px;
    padding-inline: 16px 18px;
  }
  /* Botones de estancia del plano KNX: el cuadro invisible no baja de 44 px (centrado en la estancia) */
  .zona {
    min-width: 44px;
    min-height: 44px;
    translate: min(0px, calc(50% - 22px)) 0;
  }
}

/* Portada en móvil: velo suave tras el subtítulo para que los puntos del mapa no ensucien la lectura */
@media (max-width: 899px) {
  .portada__texto {
    background: rgba(10, 10, 11, 0.78);
    box-shadow: 0 0 16px 14px rgba(10, 10, 11, 0.78);
    border-radius: 10px;
  }
}