/* ==========================================================================
   Ilumenlux — hoja de estilos principal
   Paleta heredada de la identidad original:
   #1E2029 antracita · #D3C1B5 arena · #D3AF94 cobre · #F4DD81 luz · #F7F7F7 nieve
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --antracita: #1e2029;
  --antracita-90: rgba(30, 32, 41, 0.96);
  --antracita-suave: #2a2930;
  --arena: #d3c1b5;
  --cobre: #d3af94;
  /* Mismo matiz, oscurecido para cumplir contraste AA sobre fondo claro. */
  --cobre-texto: #94643b;
  --luz: #f4dd81;
  --nieve: #f7f7f7;
  --papel: #ffffff;

  --texto: #1e2029;
  --texto-suave: #55565f;
  --borde: rgba(30, 32, 41, 0.12);
  --fondo: #ffffff;
  --fondo-alt: rgba(211, 193, 181, 0.1);

  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --ancho: 1240px;
  --radio: 4px;
  --radio-lg: 10px;

  --sombra-sm: 0 2px 8px rgba(30, 32, 41, 0.08);
  --sombra: 0 12px 36px rgba(30, 32, 41, 0.12);
  --sombra-lg: 0 24px 60px rgba(30, 32, 41, 0.18);

  --transicion: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --header-alto: 84px;
}

/* --- 2. Reinicio --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sin esto, el overflow-x del body no llega a cortar el scroll del
     viewport y la página se desplaza de lado en móvil. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Con el deslizamiento por JS activo, esta clase lo desactiva
     para que las dos animaciones no compitan. */
  scroll-padding-top: calc(var(--header-alto) + 16px);
  -webkit-text-size-adjust: 100%;
}

html.desliza-por-js,
html.desliza-por-js body {
  scroll-behavior: auto;
}

body {
  margin: 0;
  max-width: 100%;
  /* El aviso de cookies reserva su espacio por JS; la transición evita
     que el pie dé un salto al aceptarlo. */
  transition: padding-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  background: var(--fondo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion);
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
}

h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

strong {
  font-weight: 800;
}

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

::selection {
  background: var(--luz);
  color: var(--antracita);
}

/* --- 3. Utilidades de estructura ----------------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.seccion {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  position: relative;
}

.seccion--alt {
  background: var(--fondo-alt);
}

.seccion--oscura {
  background: var(--antracita);
  color: var(--nieve);
}

.seccion + .seccion {
  border-top: 1px solid var(--borde);
}

.seccion--oscura + .seccion,
.seccion + .seccion--oscura {
  border-top: 0;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--antracita);
  color: var(--nieve);
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--radio) 0;
}

.salto-contenido:focus {
  left: 0;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Marca superior de sección */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1.1rem;
}

.etiqueta::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--cobre);
}

.seccion--oscura .etiqueta {
  color: var(--arena);
}

/* Bloque de titular sobre fondo antracita, como en el diseño original */
.titular-bloque {
  background: var(--antracita);
  color: var(--nieve);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radio);
  position: relative;
  overflow: hidden;
}

.titular-bloque::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    rgba(244, 221, 129, 0.16),
    transparent 62%
  );
  pointer-events: none;
}

.titular-bloque h2,
.titular-bloque h3 {
  margin: 0;
  color: var(--nieve);
  position: relative;
}

.destacado {
  color: var(--cobre-texto);
}

/* Sobre fondos oscuros el cobre claro sí contrasta de sobra (8:1). */
.hero .destacado,
.cta .destacado,
.pie .destacado,
.seccion--oscura .destacado,
.titular-bloque .destacado {
  color: var(--cobre);
}

/* --- 4. Botones ---------------------------------------------------------- */
.boton {
  --boton-bg: var(--antracita);
  --boton-color: var(--nieve);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 2.1rem;
  background: var(--boton-bg);
  color: var(--boton-color);
  border: 0;
  border-radius: var(--radio);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 30px rgba(30, 32, 41, 0.22);
  transition: transform var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion), color var(--transicion);
}

/* Barrido de luz en hover: guiño al sector de la iluminación */
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--cobre), var(--luz));
  opacity: 0;
  transition: opacity var(--transicion);
}

.boton:hover,
.boton:focus-visible {
  transform: translateY(-3px);
  color: var(--antracita);
  box-shadow: 0 18px 44px rgba(244, 221, 129, 0.42);
}

.boton:hover::before,
.boton:focus-visible::before {
  opacity: 1;
}

.boton:active {
  transform: translateY(-1px);
}

.boton--claro {
  --boton-bg: var(--nieve);
  --boton-color: var(--antracita);
}

.boton--contorno {
  --boton-bg: transparent;
  --boton-color: currentColor;
  border: 1.5px solid currentColor;
  box-shadow: none;
}

.boton--bloque {
  width: 100%;
}

.boton[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.boton .icono {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --- 5. Cabecera --------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-alto);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--transicion), box-shadow var(--transicion),
    height var(--transicion);
}

/* Estas dos propiedades aligeran el repintado durante el scroll, pero
   convierten la cabecera en contenedor de sus descendientes fijos. Solo se
   aplican en escritorio, donde el panel de navegación no es fijo. */
@media (min-width: 861px) {
  .cabecera {
    transform: translateZ(0);
    contain: layout paint;
  }
}

.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cabecera__logo {
  position: relative;
  display: block;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* Halo cálido detrás del logo: es la "luz" que se enciende. */
.cabecera__logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 320%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(
    ellipse at center,
    rgba(244, 221, 129, 0.55) 0%,
    rgba(244, 221, 129, 0.28) 32%,
    rgba(211, 175, 148, 0.12) 55%,
    transparent 72%
  );
  opacity: 0;
  pointer-events: none;
  filter: blur(14px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cabecera__logo:hover::before,
.cabecera__logo:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  /* Parpadeo breve al encender, como un filamento que prende. */
  animation: prender 0.62s ease-out;
}

@keyframes prender {
  0% { opacity: 0; }
  18% { opacity: 1; }
  28% { opacity: 0.35; }
  42% { opacity: 1; }
  55% { opacity: 0.7; }
  100% { opacity: 1; }
}

.cabecera__logo img {
  height: 34px;
  width: auto;
  transition: height var(--transicion), filter 0.45s ease;
}

/* El propio logo también irradia, no solo el fondo. */
.cabecera__logo:hover img,
.cabecera__logo:focus-visible img {
  filter: drop-shadow(0 0 6px rgba(244, 221, 129, 0.75))
    drop-shadow(0 0 18px rgba(244, 221, 129, 0.45));
}

/* Estado tras hacer scroll o en páginas interiores */
.cabecera.es-solida,
body.tiene-cabecera-solida .cabecera {
  background: var(--antracita-90);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.25);
}

.cabecera.es-solida {
  height: 70px;
}

.cabecera.es-solida .cabecera__logo img {
  height: 29px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__enlace {
  color: var(--nieve);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  padding: 0.4rem 0;
}

.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--luz);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}

.nav__enlace:hover::after,
.nav__enlace:focus-visible::after,
.nav__enlace[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__enlace:hover {
  color: var(--luz);
}

.nav .boton {
  padding: 0.7rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  --boton-bg: var(--nieve);
  --boton-color: var(--antracita);
}

/* Teléfono y correo de la cabecera: solo en móvil.
   ------------------------------------------------------------------
   En el panel desplegable de móvil son el pie del menú, y allí están
   resueltos, dentro del @media (max-width: 860px).

   En escritorio no se muestran: la cabecera ya lleva el botón "Contactar", y
   el teléfono y el correo están en la portada, en la sección de contacto y en
   el pie. Se quedan en el HTML porque el panel de móvil los necesita.

   Este display:none NO es decorativo, hace falta. Los iconos son SVG con
   viewBox pero sin width/height, así que caen en la regla global
   `svg { max-width: 100%; height: auto }` y se dibujan al tamaño por defecto
   de un SVG sin dimensiones —300 px—. Sin esta regla, en escritorio salen dos
   iconos gigantes desbordando la cabecera. */
@media (min-width: 861px) {
  .nav__contacto {
    display: none;
  }
}

/* Botón hamburguesa */
.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 110;
}

.menu-boton span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--nieve);
  transition: transform var(--transicion), opacity var(--transicion);
}

.menu-boton span:nth-child(1) {
  top: 16px;
}
.menu-boton span:nth-child(2) {
  top: 22px;
}
.menu-boton span:nth-child(3) {
  top: 28px;
}

.menu-boton[aria-expanded="true"] span {
  background: var(--luz);
}

.menu-boton[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-boton[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-boton[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- 6. Hero con formulario ---------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-alto) + 3rem) 0 4rem;
  background: var(--antracita);
  color: var(--nieve);
  overflow: hidden;
}

.hero__media,
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      105deg,
      rgba(30, 32, 41, 0.94) 0%,
      rgba(30, 32, 41, 0.74) 46%,
      rgba(30, 32, 41, 0.5) 100%
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(244, 221, 129, 0.16),
      transparent 55%
    );
}

.hero__interior {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.hero__marca {
  height: 48px;
  width: auto;
  margin-bottom: 1.8rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  margin-bottom: 1.2rem;
  color: var(--nieve);
}

.hero h1 strong {
  color: var(--cobre);
}

.hero__entradilla {
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  color: rgba(247, 247, 247, 0.82);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero__ventajas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  margin-bottom: 2.2rem;
}

.hero__ventajas li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(247, 247, 247, 0.92);
}

.hero__ventajas svg {
  width: 17px;
  height: 17px;
  color: var(--luz);
  flex: none;
}

.hero__contactos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.hero__contacto {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--nieve);
}

.hero__contacto svg {
  width: 19px;
  height: 19px;
  color: var(--cobre);
  flex: none;
}

.hero__contacto:hover {
  color: var(--luz);
}

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 247, 247, 0.6);
}

.hero__scroll span {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--luz), transparent);
  animation: bajar 2.2s ease-in-out infinite;
}

@keyframes bajar {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* --- 7. Tarjeta de formulario -------------------------------------------- */
.tarjeta-formulario {
  background: rgba(255, 255, 255, 0.97);
  color: var(--texto);
  border-radius: var(--radio-lg);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  box-shadow: var(--sombra-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}

.tarjeta-formulario::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(244, 221, 129, 0.75),
    rgba(211, 175, 148, 0.25) 45%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tarjeta-formulario h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  margin-bottom: 0.35rem;
}

.tarjeta-formulario__nota {
  font-size: 0.88rem;
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
}

.formulario {
  display: grid;
  gap: 1.05rem;
}

.campo-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem;
}

.campo {
  position: relative;
  display: grid;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.95rem;
  transition: border-color var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion);
}

.campo textarea {
  resize: vertical;
  min-height: 118px;
  line-height: 1.6;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(85, 86, 95, 0.55);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cobre);
  box-shadow: 0 0 0 4px rgba(211, 175, 148, 0.22);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}

.campo__error {
  font-size: 0.78rem;
  font-weight: 600;
  color: #c0392b;
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.campo__error.es-visible {
  opacity: 1;
  transform: none;
}

/* Casilla de privacidad */
.campo-consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.campo-consentimiento input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--antracita);
  cursor: pointer;
  flex: none;
}

.campo-consentimiento a {
  color: var(--texto);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.campo-consentimiento a:hover {
  color: var(--cobre-texto);
}

/* Trampa antispam: invisible para personas, rellenable por bots */
.campo-trampa {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Mensaje de respuesta del envío */
.formulario__aviso {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio);
  font-size: 0.88rem;
  font-weight: 600;
  border-left: 3px solid;
}

.formulario__aviso.es-visible {
  display: block;
  animation: aparecer 0.4s var(--transicion) both;
}

.formulario__aviso--error {
  background: rgba(192, 57, 43, 0.08);
  border-color: #c0392b;
  color: #96271c;
}

.formulario__aviso--ok {
  background: rgba(39, 122, 71, 0.08);
  border-color: #277a47;
  color: #1d5c35;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --- 8. Rejillas de contenido -------------------------------------------- */
.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}

.dos-columnas--arriba {
  align-items: start;
}

.lista-servicios {
  display: grid;
  gap: 0.9rem;
  margin: 1.8rem 0 2.2rem;
}

.lista-servicios li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
}

.lista-servicios li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lista-servicios svg {
  width: 21px;
  height: 21px;
  color: var(--cobre);
  margin-top: 2px;
  flex: none;
}

.figura {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.figura:hover img {
  transform: scale(1.04);
}

/* Galería tipo mosaico */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.galeria .figura {
  aspect-ratio: 3 / 4;
}

.galeria .figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 32, 41, 0.45),
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--transicion);
}

.galeria .figura:hover::after {
  opacity: 1;
}

/* --- 9. Marcas ----------------------------------------------------------- */
.marcas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: stretch;
  margin-top: 2.8rem;
}

/* Con dos columnas, la tercera ocuparía la casilla izquierda y quedaría
   descolgada: pasa a ocupar el ancho completo y se centra bajo las otras. */
@media (max-width: 900px) {
  .marcas {
    grid-template-columns: repeat(2, 1fr);
  }

  .marca:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, calc(50% - clamp(0.6rem, 1.5vw, 1.25rem)));
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .marcas {
    grid-template-columns: 1fr;
  }

  .marca:last-child:nth-child(odd) {
    width: 100%;
  }
}

.marca {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.marca:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 221, 129, 0.6);
  box-shadow: 0 18px 40px rgba(244, 221, 129, 0.25);
}

.marca img {
  max-height: 62px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--transicion), opacity var(--transicion);
}

.marca:hover img {
  filter: none;
  opacity: 1;
}

.marca__texto {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: 0;
}

.marcas__pie {
  margin: 2.5rem 0 0;
  text-align: center;
}

.marca__enlace {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.marca:hover .marca__enlace {
  color: var(--cobre-texto);
}

/* --- 10. Llamada final --------------------------------------------------- */
.cta {
  background: var(--antracita);
  color: var(--nieve);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(244, 221, 129, 0.16),
    transparent 60%
  );
}

.cta__interior {
  position: relative;
}

.cta h2 {
  color: var(--nieve);
  max-width: 22ch;
  margin-inline: auto;
}

.cta p {
  color: rgba(247, 247, 247, 0.75);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 2.2rem;
}

.cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* --- 11. Pie ------------------------------------------------------------- */
.pie {
  background: var(--antracita);
  color: rgba(247, 247, 247, 0.72);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(247, 247, 247, 0.1);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.pie h3 {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nieve);
  margin-bottom: 1.2rem;
}

.pie__logo img {
  height: 40px;
  width: auto;
  margin-bottom: 1.2rem;
}

.pie__lista {
  display: grid;
  gap: 0.75rem;
}

.pie__lista a:hover {
  color: var(--luz);
}

.pie__contacto {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.pie__contacto svg {
  width: 16px;
  height: 16px;
  color: var(--cobre);
  flex: none;
}

.pie__legal {
  border-top: 1px solid rgba(247, 247, 247, 0.1);
  padding: 1.4rem 0;
  /* Tres columnas con anclaje explícito: con flex y space-between, el texto
     central se descolocaba según lo que midieran los laterales. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem 1.6rem;
  align-items: center;
  font-size: 0.82rem;
}

.pie__legal > *:first-child {
  justify-self: start;
}

.pie__legal > *:nth-child(2) {
  justify-self: center;
  text-align: center;
}

.pie__autoria {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.pie__autoria a {
  color: var(--nieve);
  font-weight: 700;
  position: relative;
}

.pie__autoria a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--luz);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}

.pie__autoria a:hover {
  color: var(--luz);
}

.pie__autoria a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- 12. Migas de pan ---------------------------------------------------- */
.migas {
  padding-top: calc(var(--header-alto) + 1.6rem);
  padding-bottom: 0.6rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.migas li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--cobre);
}

.migas a:hover {
  color: var(--cobre-texto);
}

/* --- 13. Cabecera de página interior ------------------------------------- */
.encabezado-pagina {
  padding: 2.5rem 0 clamp(2.5rem, 5vw, 4rem);
}

.encabezado-pagina h1 {
  font-size: clamp(1.9rem, 3.7vw, 2.85rem);
  max-width: 26ch;
}

.encabezado-pagina p {
  max-width: 62ch;
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* Contenido legal / texto largo */
.prosa {
  max-width: 74ch;
}

.prosa h2 {
  margin-top: 2.5rem;
}

.prosa ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0 0 1.2rem;
  display: grid;
  gap: 0.5rem;
}

.prosa a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prosa a:hover {
  color: var(--cobre-texto);
}

/* Mapa del sitio */
.mapa-sitio {
  display: grid;
  gap: 0.9rem;
  max-width: 620px;
}

.mapa-sitio a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-weight: 700;
  transition: transform var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion);
}

.mapa-sitio a:hover {
  transform: translateX(5px);
  border-color: var(--cobre);
  box-shadow: var(--sombra-sm);
}

.mapa-sitio a::after {
  content: "→";
  color: var(--cobre);
}

/* Bloque de datos de contacto */
.datos-contacto {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.dato {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.3rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: border-color var(--transicion), transform var(--transicion);
}

.dato:hover {
  border-color: var(--cobre);
  transform: translateY(-2px);
}

.dato__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--antracita);
  color: var(--luz);
}

.dato__icono svg {
  width: 19px;
  height: 19px;
}

.dato__etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.dato__valor {
  font-weight: 700;
  font-size: 1.02rem;
}

.dato__valor:hover {
  color: var(--cobre-texto);
}

/* --- 14. Página de error / gracias --------------------------------------- */
.pagina-centrada {
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-alto) + 3rem) 0 4rem;
}

.pagina-centrada__interior {
  max-width: 620px;
}

.pagina-centrada p {
  color: var(--texto-suave);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.icono-exito {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--antracita);
  color: var(--luz);
  animation: pulso 2.4s ease-in-out infinite;
}

.icono-exito svg {
  width: 34px;
  height: 34px;
}

@keyframes pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(244, 221, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 18px rgba(244, 221, 129, 0);
  }
}

/* --- 15. Animaciones de entrada al hacer scroll -------------------------- */
[data-animar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retardo, 0ms);
  will-change: opacity, transform;
}

[data-animar="izquierda"] {
  transform: translateX(-34px);
}

[data-animar="derecha"] {
  transform: translateX(34px);
}

/* En pantallas estrechas no hay sitio para un desplazamiento lateral: los
   elementos pendientes asomaban por la derecha y provocaban scroll
   horizontal. Entran desde abajo, que además se lee mejor en vertical. */
@media (max-width: 1080px) {
  [data-animar="izquierda"],
  [data-animar="derecha"] {
    transform: translateY(26px);
  }
}

[data-animar="zoom"] {
  transform: scale(0.94);
}

[data-animar].es-visible {
  opacity: 1;
  transform: none;
  /* Cumplida la animación, se libera la capa de composición. */
  will-change: auto;
}

/* Entrada del hero, sin esperar al scroll */
.hero [data-entrada] {
  opacity: 0;
  transform: translateY(26px);
  animation: entradaHero 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--retardo, 0ms);
}

@keyframes entradaHero {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- 16. Aviso de cookies ------------------------------------------------ */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(110%);
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(24, 26, 34, 0.97);
  color: rgba(247, 247, 247, 0.85);
  border-top: 1px solid rgba(247, 247, 247, 0.14);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  font-size: 0.82rem;
  line-height: 1.5;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookies.es-visible {
  transform: translateY(0);
}

.cookies__acciones {
  flex: none;
}

.cookies p {
  margin: 0;
}

.cookies a {
  color: var(--luz);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies__acciones {
  display: flex;
  gap: 0.6rem;
}

.cookies .boton {
  padding: 0.55rem 1.15rem;
  font-size: 0.76rem;
  box-shadow: none;
}

/* --- 17. Barra de progreso de lectura ------------------------------------ */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--cobre), var(--luz));
  z-index: 101;
  will-change: transform;
}

/* --- 18. Adaptación a pantallas pequeñas --------------------------------- */
@media (max-width: 1080px) {
  .hero__interior {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero {
    min-height: auto;
  }

  .hero__scroll {
    display: none;
  }

  .pie__rejilla {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --header-alto: 70px;
  }

  .menu-boton {
    display: block;
  }

  /* Panel de navegación a pantalla completa */
  .nav {
    position: fixed;
    inset: 0;
    /* Cubre la página, pero por debajo del logo y del aspa de cerrar. */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-alto) + 2rem) 1.6rem 2rem;
    background: var(--antracita);
    background-image: radial-gradient(
      ellipse at 85% 0%,
      rgba(244, 221, 129, 0.13),
      transparent 58%
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
  }

  .nav.es-abierta {
    transform: none;
    visibility: visible;
  }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__lista li {
    border-bottom: 1px solid rgba(247, 247, 247, 0.1);
  }

  /* Cada entrada ocupa toda la fila: área de toque amplia y alineación
     limpia a la izquierda, en lugar de textos sueltos centrados. */
  .nav__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.15rem 0.2rem;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
  }

  /* La flecha indica que lleva a una sección de la propia página. */
  .nav__enlace::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--cobre);
    border-right: 2px solid var(--cobre);
    transform: rotate(45deg);
    opacity: 0.55;
    order: 2;
    flex: none;
  }

  /* El subrayado animado es un gesto de escritorio: aquí estorba. */
  .nav__enlace::after {
    display: none;
  }

  .nav .boton {
    width: 100%;
    margin-top: 1.8rem;
    padding: 1.05rem 1.5rem;
    font-size: 0.9rem;
  }

  /* Vías de contacto directas al pie del panel */
  .nav__contacto {
    display: grid;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 2.2rem;
  }

  .nav__contacto a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(247, 247, 247, 0.9);
  }

  .nav__contacto svg {
    width: 18px;
    height: 18px;
    color: var(--cobre);
    flex: none;
  }

  .nav__contacto a:hover {
    color: var(--luz);
  }

  /* Entrada escalonada de cada elemento al abrir */
  .nav.es-abierta .nav__lista li,
  .nav.es-abierta .boton,
  .nav.es-abierta .nav__contacto {
    animation: entrarMenu 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nav.es-abierta .nav__lista li:nth-child(1) { animation-delay: 0.06s; }
  .nav.es-abierta .nav__lista li:nth-child(2) { animation-delay: 0.12s; }
  .nav.es-abierta .nav__lista li:nth-child(3) { animation-delay: 0.18s; }
  .nav.es-abierta .boton { animation-delay: 0.24s; }
  .nav.es-abierta .nav__contacto { animation-delay: 0.3s; }

  @keyframes entrarMenu {
    from {
      opacity: 0;
      transform: translateX(22px);
    }
  }

  /* El logo y el aspa se mantienen visibles sobre el panel. */
  .cabecera__logo {
    position: relative;
    z-index: 2;
  }

  .menu-boton {
    z-index: 3;
  }

  body.menu-abierto .cabecera {
    background: transparent;
    box-shadow: none;
  }

  body.menu-abierto {
    overflow: hidden;
  }

  .campo-doble {
    grid-template-columns: 1fr;
  }

  .cookies {
    flex-direction: column;
    text-align: center;
  }

  .cookies__acciones {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .cabecera__logo img,
  .cabecera.es-solida .cabecera__logo img {
    height: 26px;
  }

  .pie__logo img {
    height: 32px;
  }

  .pie__rejilla {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pie__legal {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
  }

  .pie__legal > *:first-child,
  .pie__autoria {
    justify-self: center;
    text-align: center;
  }

  .hero__marca {
    height: 40px;
  }

  .boton {
    width: 100%;
  }

  .cta__acciones .boton {
    width: auto;
  }
}

/* --- 20. Cifras: cadena de luces ----------------------------------------- *
   Cuatro focos colgados de un mismo cable. Sustituye a las antiguas tarjetas:
   el icono explica el dato antes de leer el número.
   ------------------------------------------------------------------------- */
.cadena {
  background: var(--antracita);
  color: var(--nieve);
  overflow: hidden;
  position: relative;
}

/* Resplandor superior, como luz que baja del techo */
.cadena::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(244, 221, 129, 0.13),
    transparent 62%
  );
  transform: translateX(-50%) translateZ(0);
  pointer-events: none;
}

.cadena .etiqueta {
  color: var(--arena);
}

.cadena h2 {
  color: var(--nieve);
  max-width: 24ch;
}

.cadena__entrada {
  color: rgba(247, 247, 247, 0.62);
  max-width: 48ch;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.cadena__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.foco {
  position: relative;
  /* Solo 'layout': con 'paint' se recortaban el haz de luz y el halo. */
  contain: layout;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0 0.5rem;
}

/* Casquillo: el círculo con el icono */
.foco__lampara {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 1.4rem;
  color: var(--luz);
  background: radial-gradient(
    circle at 50% 35%,
    rgba(244, 221, 129, 0.22),
    rgba(30, 32, 41, 0.9) 70%
  );
  border: 1px solid rgba(244, 221, 129, 0.35);
  box-shadow: 0 0 0 8px rgba(30, 32, 41, 1), 0 0 34px rgba(244, 221, 129, 0.22);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.foco__lampara svg {
  width: 32px;
  height: 32px;
}

.foco:hover .foco__lampara {
  transform: translateY(-4px);
  border-color: rgba(244, 221, 129, 0.75);
  box-shadow: 0 0 0 8px rgba(30, 32, 41, 1), 0 0 52px rgba(244, 221, 129, 0.5);
}

/* Haz de luz que cae bajo cada foco */
.foco::after {
  content: "";
  position: absolute;
  top: 74px;
  left: 50%;
  width: 150px;
  height: 190px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(244, 221, 129, 0.16),
    transparent 72%
  );
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  opacity: 0.5;
  pointer-events: none;
  transform: translateX(-50%) translateZ(0);
  transition: opacity var(--transicion);
}

.foco:hover::after {
  opacity: 1;
}

.foco__cifra {
  position: relative;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--luz);
  font-variant-numeric: tabular-nums;
}

.foco__titulo {
  position: relative;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobre);
  margin-top: 0.5rem;
}

.foco__texto {
  position: relative;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(247, 247, 247, 0.62);
  max-width: 24ch;
  margin-top: 0.3rem;
}

@media (max-width: 860px) {
  .cadena__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1rem;
  }

  .foco::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .cadena__lista {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .foco__lampara {
    margin-bottom: 1rem;
  }
}

/* --- 21. Sección de contacto de la landing ------------------------------- */
.contacto {
  background: var(--fondo-alt);
}

.contacto__entrada {
  color: var(--texto-suave);
  max-width: 62ch;
}

.contacto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .contacto__rejilla {
    grid-template-columns: 1fr;
  }
}

/* --- 22. Notificación flotante ------------------------------------------- */
/* Confirmación de envío del formulario. Aparece abajo a la derecha y se
   retira sola a los pocos segundos.

   Se apila SOBRE el botón de WhatsApp, no a su lado: por eso el bottom suma
   los 58 px del botón, además de `--alto-aviso`, que es la altura que ocupa
   el aviso de cookies mientras está a la vista (la fija main.js). Sin esa
   suma, el aviso taparía el botón o quedaría debajo de la franja de cookies.

   z-index 118: por encima del WhatsApp (115) y por debajo del aviso de
   cookies (120), que es el que debe mandar mientras esté sin responder. */
.notificacion {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--alto-aviso, 0px) + 58px + 0.9rem);
  z-index: 118;

  width: min(360px, calc(100vw - 2rem));
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;

  background: var(--antracita);
  color: var(--nieve);
  border-radius: var(--radio-lg);
  border: 1px solid rgba(247, 247, 247, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);

  font-size: 0.9rem;
  line-height: 1.5;

  /* Parte fuera de pantalla y sin capturar clics hasta que se muestra. */
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion),
    bottom var(--transicion);
}

.notificacion.es-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Franja de color a la izquierda: verde si fue bien, cobre si hubo fallo. */
.notificacion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radio-lg) 0 0 var(--radio-lg);
  background: #3fbf72;
}

.notificacion--error::before {
  background: var(--cobre);
}

.notificacion__icono {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #3fbf72;
}

.notificacion--error .notificacion__icono {
  color: var(--cobre);
}

.notificacion__texto {
  flex: 1;
  margin: 0;
}

.notificacion__titulo {
  display: block;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.notificacion__detalle {
  display: block;
  color: rgba(247, 247, 247, 0.78);
}

.notificacion__cerrar {
  flex: none;
  width: 26px;
  height: 26px;
  margin: -2px -4px 0 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radio);
  color: rgba(247, 247, 247, 0.6);
  cursor: pointer;
  transition: color var(--transicion), background-color var(--transicion);
}

.notificacion__cerrar:hover,
.notificacion__cerrar:focus-visible {
  color: var(--nieve);
  background: rgba(247, 247, 247, 0.1);
}

.notificacion__cerrar svg {
  width: 15px;
  height: 15px;
}

/* En móvil ocupa el ancho disponible; el WhatsApp sigue debajo. */
@media (max-width: 480px) {
  .notificacion {
    left: clamp(1rem, 3vw, 1.75rem);
    width: auto;
  }
}

/* --- 22b. Botón flotante de WhatsApp ------------------------------------- */
.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  /* Sube cuando el aviso de cookies ocupa la franja inferior. */
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--alto-aviso, 0px));
  z-index: 115;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform var(--transicion), box-shadow var(--transicion),
    bottom var(--transicion);
  -webkit-tap-highlight-color: transparent;
}

.whatsapp svg {
  width: 32px;
  height: 32px;
}

/* Halo que late, para que se vea sin resultar molesto */
.whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: latido 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes latido {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.whatsapp:hover,
.whatsapp:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.28);
}

.whatsapp:active {
  transform: scale(0.97);
}

/* Etiqueta que se despliega al pasar el ratón */
.whatsapp__texto {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  background: var(--antracita);
  color: var(--nieve);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}

.whatsapp:hover .whatsapp__texto,
.whatsapp:focus-visible .whatsapp__texto {
  opacity: 1;
  transform: none;
}

@media (max-width: 560px) {
  .whatsapp {
    width: 52px;
    height: 52px;
  }

  .whatsapp svg {
    width: 29px;
    height: 29px;
  }

  /* En móvil la etiqueta estorba más de lo que aporta. */
  .whatsapp__texto {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp::before {
    animation: none;
  }
}

/* --- 23. Formulario plegable del hero (solo en móvil) -------------------- *
   En escritorio la tarjeta se comporta como siempre: el resumen se oculta y
   el formulario queda a la vista. En pantallas pequeñas se pliega para que
   el titular y las vías de contacto se vean sin desplazarse.
   ------------------------------------------------------------------------- */
.tarjeta-formulario--plegable > summary {
  display: none;
}

.tarjeta-formulario--plegable::-webkit-details-marker,
.tarjeta-formulario--plegable summary::-webkit-details-marker,
.tarjeta-formulario--plegable summary::marker {
  display: none;
  content: "";
}

@media (max-width: 1080px) {
  .tarjeta-formulario--plegable {
    padding: 0;
    overflow: hidden;
  }

  .tarjeta-formulario--plegable > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .tarjeta-formulario__titulo {
    display: block;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--texto);
  }

  .tarjeta-formulario__pista {
    display: block;
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-top: 0.15rem;
  }

  .tarjeta-formulario__flecha {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--cobre);
    transition: transform var(--transicion);
  }

  .tarjeta-formulario--plegable[open] .tarjeta-formulario__flecha {
    transform: rotate(180deg);
  }

  /* Abierta, el resumen hace de cabecera y el titular interno sobra. */
  .tarjeta-formulario--plegable[open] > summary {
    border-bottom: 1px solid var(--borde);
  }

  .tarjeta-formulario__encabezado,
  .tarjeta-formulario--plegable > .tarjeta-formulario__nota {
    display: none;
  }

  .tarjeta-formulario--plegable > .formulario {
    padding: 1.35rem;
    animation: desplegar 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes desplegar {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

/* --- 19. Preferencias de accesibilidad ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-animar],
  .hero [data-entrada] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .cabecera,
  .cookies,
  .notificacion,
  .progreso,
  .hero__media,
  .hero__scroll,
  .menu-boton {
    display: none !important;
  }

  body {
    color: #000;
  }
}