/* =========================================================
   Persianas Metálicas Catalunya
   Hoja de estilos única. Móvil primero.
   ========================================================= */

:root {
  --azul: #0b2a33;
  --azul-2: #113b48;
  --azul-3: #17505f;
  --amarillo: #f5c518;
  --amarillo-2: #ffd84d;
  --texto: #1d2b30;
  --texto-claro: #5b6b71;
  --gris: #f4f7f8;
  --gris-2: #e3eaec;
  --blanco: #fff;
  --verde: #25d366;
  --radio: 10px;
  --sombra: 0 4px 18px rgba(11, 42, 51, .10);
  --sombra-alta: 0 12px 34px rgba(11, 42, 51, .18);
  --ancho: 1180px;
  --barra-movil: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.65;
  font-size: 17px;
  padding-bottom: var(--barra-movil);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 6.2vw, 52px); }
h2 { font-size: clamp(25px, 4.4vw, 38px); }
h3 { font-size: clamp(19px, 2.6vw, 23px); }
p { margin-bottom: 16px; }

.seccion { padding: 62px 0; }
.seccion--gris { background: var(--gris); }
.seccion--azul { background: var(--azul); color: #dff0f4; }
.seccion--azul h2, .seccion--azul h3 { color: #fff; }

.antetitulo {
  display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul-3); margin-bottom: 10px;
}
.seccion--azul .antetitulo { color: var(--amarillo); }
.centrado { text-align: center; }
.entradilla { font-size: 18px; color: var(--texto-claro); max-width: 720px; }
.centrado .entradilla { margin-left: auto; margin-right: auto; }
.seccion--azul .entradilla { color: #b9d4dc; }

/* ---------- Textura de lamas de persiana (se reutiliza) ---------- */
.lamas {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, .10) 0px,
    rgba(255, 255, 255, .10) 1px,
    rgba(0, 0, 0, .16) 2px,
    rgba(0, 0, 0, .05) 9px,
    rgba(255, 255, 255, .07) 15px,
    rgba(0, 0, 0, .13) 17px
  );
  background-size: 100% 18px;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 27px; border-radius: var(--radio); font-weight: 800; font-size: 17px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.btn--grande svg { width: 22px; height: 22px; flex: 0 0 22px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.btn:active { transform: translateY(0); }
.btn--principal { background: var(--amarillo); color: var(--azul); }
.btn--principal:hover { background: var(--amarillo-2); }
.btn--fantasma { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--fantasma:hover { background: rgba(255, 255, 255, .12); }
.btn--oscuro { background: var(--azul); color: #fff; }
.btn--wa { background: var(--verde); color: #fff; }
.btn--grande { padding: 18px 34px; font-size: 18px; }
.botonera { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
.centrado .botonera { justify-content: center; }

/* =========================================================
   CABECERA
   ========================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 90; background: var(--azul);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.marca__icono { width: 38px; height: 38px; flex: 0 0 38px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.12; }
.marca__nombre { font-weight: 900; font-size: 16px; letter-spacing: .02em; }
.marca__lema { font-size: 11.5px; color: var(--amarillo); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.menu { display: none; }
.menu a {
  text-decoration: none; color: #d7e8ed; font-weight: 700; font-size: 15px;
  padding: 8px 2px; position: relative; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2.5px;
  background: var(--amarillo); transition: right .25s ease;
}
.menu a:hover::after, .menu a[aria-current="page"]::after { right: 0; }
.menu a[aria-current="page"] { color: #fff; }

.cabecera__tel {
  display: none; align-items: center; gap: 8px; background: var(--amarillo); color: var(--azul);
  padding: 10px 17px; border-radius: var(--radio); text-decoration: none; font-weight: 900; font-size: 16px;
}
.cabecera__tel:hover { background: var(--amarillo-2); }
.cabecera__tel svg { width: 19px; height: 19px; flex: 0 0 19px; }

.hamburguesa {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 9px;
}
.hamburguesa span { display: block; height: 3px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* menú móvil: baja como una persiana */
.menu-movil {
  background: var(--azul-2); overflow: hidden; max-height: 0;
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1);
}
.menu-movil.abierto { max-height: 520px; }
.menu-movil a {
  display: block; padding: 15px 18px; color: #dceaee; text-decoration: none;
  font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.menu-movil a[aria-current="page"] { color: var(--amarillo); }

/* =========================================================
   PERSIANA DE ENTRADA (animación de carga)
   ========================================================= */
/* Un operario sube la persiana y descubre la web */
.persiana-carga {
  position: fixed; inset: 0; z-index: 999; overflow: hidden;
  background: var(--azul);
  animation: apagarCarga .45s ease 2.95s forwards;
}
/* la animación se ve cada vez que se carga la página de inicio */

/* el local que hay detrás de la persiana */
.persiana-carga__local {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #17505f 0%, #0b2a33 70%);
}
.persiana-carga__logo {
  color: #fff; font-weight: 900; letter-spacing: .16em;
  font-size: 15px; text-transform: uppercase; text-align: center;
}
.persiana-carga__logo small { display: block; color: var(--amarillo); font-size: 11px; margin-top: 6px; letter-spacing: .3em; }

/* la hoja de la persiana: baja del todo y sube */
/* la persiana NO se mueve hasta que el operario tira de ella */
.persiana-carga__hoja {
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  animation: subirPersiana 1.7s cubic-bezier(.42, 0, .3, 1) .95s forwards;
}
.persiana-carga__lamas {
  position: absolute; inset: 0;
  background-color: #93a9b1;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, .34) 0px,
    rgba(255, 255, 255, .12) 2px,
    rgba(0, 0, 0, .30) 13px,
    rgba(0, 0, 0, .13) 15px
  );
  background-size: 100% 17px;
}
.persiana-carga__perfil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: linear-gradient(180deg, #8ba0a8, #4d646d);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .55);
}

/* el operario */
.persiana-carga__persona {
  position: absolute; bottom: 0; left: 50%; width: 215px; height: 358px;
  transform: translateX(-50%) translateX(-215px);
  animation: irseOperario .45s ease 2.62s forwards;
}

/* --- el gesto: llega de pie, se agacha, agarra, tira y se estira --- */
/* Los tiempos de los keyframes (duración 2,5 s):
     0-24 %  se agacha
     24-34 % coge fuerza (flexiona un poco más)
     34-100 % tira hacia arriba  <- aquí es cuando sube la persiana  */
.persiana-carga__persona g { transform-box: view-box; }

.op-piernas {
  transform-origin: 88px 279px;
  animation: opPiernas 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards;
}
.op-tronco, .op-tronco-mov {
  transform-origin: 88px 180px;
  animation: opTronco 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards;
}
.op-cabeza {
  transform-origin: 87px 108px;
  animation: opCabeza 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards;
}
.op-brazo-izq {
  transform-origin: 66px 130px;
  animation: opBrazoIzq 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards;
}
.op-brazo-der {
  transform-origin: 110px 130px;
  animation: opBrazoDer 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards;
}
.op-sombra { animation: opSombra 2.5s cubic-bezier(.4, 0, .3, 1) .15s forwards; }

@keyframes subirPersiana { to { height: 0%; } }

/* rodillas: de pie -> muy flexionadas -> estiradas */
@keyframes opPiernas {
  0%   { transform: scaleY(1); }
  24%  { transform: scaleY(.60); }    /* bien agachado */
  34%  { transform: scaleY(.55); }    /* coge fuerza */
  100% { transform: scaleY(1); }
}
/* el cuerpo baja mucho al agacharse y se inclina hacia delante */
@keyframes opTronco {
  0%   { transform: translateY(0) rotate(0deg); }
  24%  { transform: translateY(64px) rotate(9deg); }
  34%  { transform: translateY(74px) rotate(11deg); }
  100% { transform: translateY(-10px) rotate(0deg); }
}
/* mira al tirador y luego levanta la vista siguiendo la persiana */
@keyframes opCabeza {
  0%   { transform: rotate(0deg); }
  24%  { transform: rotate(14deg); }
  34%  { transform: rotate(16deg); }
  100% { transform: rotate(-9deg); }
}
/* los brazos bajan a agarrar y suben por los lados */
@keyframes opBrazoIzq {
  0%   { transform: rotate(0deg); }
  24%  { transform: rotate(9deg); }
  34%  { transform: rotate(13deg); }
  100% { transform: rotate(148deg); }
}
@keyframes opBrazoDer {
  0%   { transform: rotate(0deg); }
  24%  { transform: rotate(-9deg); }
  34%  { transform: rotate(-13deg); }
  100% { transform: rotate(-148deg); }
}
/* la sombra se agranda al agacharse y se encoge al ponerse de puntillas */
@keyframes opSombra {
  0%   { transform: scaleX(1); opacity: .38; }
  30%  { transform: scaleX(1.12); opacity: .46; }
  100% { transform: scaleX(.8); opacity: .28; }
}

@keyframes irseOperario {
  to { opacity: 0; transform: translateX(-50%) translateX(-215px) translateY(24px); }
}
@keyframes apagarCarga { to { opacity: 0; visibility: hidden; } }

@media (max-width: 620px) {
  .persiana-carga__persona { width: 142px; height: 236px; transform: translateX(-50%) translateX(-92px); }
  @keyframes irseOperario {
    to { opacity: 0; transform: translateX(-50%) translateX(-92px) translateY(20px); }
  }
}

/* =========================================================
   ANIMACIÓN DE MONTAJE (solo en la página de instalación)
   Se va montando la persiana lama a lama y, al acabar, sube.
   ========================================================= */
.montaje-carga {
  position: fixed; inset: 0; z-index: 999; overflow: hidden;
  background: var(--azul);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  animation: apagarMontaje .45s ease 3.5s forwards;
}
.montaje-carga__local {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, #17505f 0%, #0b2a33 72%);
}

/* el hueco donde se monta */
.montaje-carga__hueco {
  position: relative; width: min(560px, 82vw); height: min(340px, 44vh);
  animation: subirMontada 1.05s cubic-bezier(.5, 0, .25, 1) 2.5s forwards;
}

/* cajón superior: aparece el primero */
.montaje-carga__cajon {
  position: absolute; top: 0; left: -12px; right: -12px; height: 24px; border-radius: 4px;
  background: linear-gradient(180deg, #2b7085, #1d5766);
  transform: scaleX(0); transform-origin: center;
  animation: aparecerCajon .34s cubic-bezier(.3, 1.4, .5, 1) .1s forwards;
}
/* guías laterales: crecen de arriba abajo */
.montaje-carga__guia {
  position: absolute; top: 24px; width: 13px; height: calc(100% - 24px);
  transform: scaleY(0); transform-origin: top center;
  animation: crecerGuia .42s cubic-bezier(.4, 0, .3, 1) .38s forwards;
}
.montaje-carga__guia--izq { left: -12px; background: linear-gradient(90deg, #35707f, #1b4d5b); }
.montaje-carga__guia--der { right: -12px; background: linear-gradient(90deg, #1b4d5b, #35707f); }

/* la persiana que se va montando */
.montaje-carga__persiana {
  position: absolute; top: 24px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
}
/* cada lama cae desde el cajón y encaja en su sitio */
.montaje-carga__lama {
  flex: 1; display: block; border-bottom: 2px solid #526b74;
  background: linear-gradient(180deg, #dce8ec 0%, #b7c9d0 18%, #8ea6ae 58%, #647e88 100%);
  opacity: 0; transform: translateY(-34px) scaleY(.5);
  animation: caerLama .3s cubic-bezier(.35, 1.3, .5, 1) forwards;
  animation-delay: calc(.62s + var(--n) * .085s);
}
.montaje-carga__perfil {
  display: block; height: 15px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #8ba0a8, #4d646d);
  opacity: 0; transform: translateY(-30px);
  animation: caerLama .32s cubic-bezier(.35, 1.3, .5, 1) 2.02s forwards;
}
/* destello al encajar la última pieza */
.montaje-carga__chispa {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(245, 197, 24, 0);
  animation: destelloMontaje .55s ease 2.2s forwards;
}

.montaje-carga__texto {
  position: relative; text-align: center; color: #fff;
  animation: desvanecerTexto .4s ease 2.5s forwards;
}
.montaje-carga__texto span {
  display: block; font-weight: 900; letter-spacing: .1em; font-size: 14.5px; text-transform: uppercase;
}
.montaje-carga__texto small { display: block; color: var(--amarillo); font-size: 11.5px; margin-top: 6px; letter-spacing: .26em; }

@keyframes aparecerCajon { to { transform: scaleX(1); } }
@keyframes crecerGuia { to { transform: scaleY(1); } }
@keyframes caerLama { to { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes destelloMontaje {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 24, .55); }
  100% { box-shadow: 0 0 0 26px rgba(245, 197, 24, 0); }
}
@keyframes subirMontada { to { transform: translateY(-125%); } }
@keyframes desvanecerTexto { to { opacity: 0; transform: translateY(10px); } }
@keyframes apagarMontaje { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) { .montaje-carga { display: none; } }

/* =========================================================
   ANIMACIÓN DE REPARACIÓN (solo en la página de reparación)
   Persiana averiada -> se arregla -> sube.
   ========================================================= */
.reparar-carga {
  position: fixed; inset: 0; z-index: 999; overflow: hidden; background: var(--azul);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  animation: apagarMontaje .45s ease 3.7s forwards;
}
.reparar-carga__local { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #17505f 0%, #0b2a33 72%); }
.reparar-carga__hueco {
  position: relative; width: min(560px, 82vw); height: min(340px, 44vh);
  animation: subirMontada 1.05s cubic-bezier(.5, 0, .25, 1) 2.7s forwards;
}
.reparar-carga__cajon {
  position: absolute; top: 0; left: -12px; right: -12px; height: 24px; border-radius: 4px;
  background: linear-gradient(180deg, #2b7085, #1d5766);
}
.reparar-carga__guia { position: absolute; top: 24px; width: 13px; height: calc(100% - 24px); }
.reparar-carga__guia--izq { left: -12px; background: linear-gradient(90deg, #35707f, #1b4d5b); }
.reparar-carga__guia--der { right: -12px; background: linear-gradient(90deg, #1b4d5b, #35707f); }
.reparar-carga__persiana { position: absolute; top: 24px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }

.reparar-carga__lama {
  flex: 1; display: block; border-bottom: 2px solid #526b74;
  background: linear-gradient(180deg, #dce8ec 0%, #b7c9d0 18%, #8ea6ae 58%, #647e88 100%);
}
/* las lamas averiadas: torcidas, hundidas y con tono oxidado */
.reparar-carga__lama.rota {
  animation: arreglarLama .55s cubic-bezier(.34, 1.4, .5, 1) forwards;
  animation-delay: calc(1.05s + var(--n) * .075s);
  transform-origin: center;
}
.rota--a { transform: skewY(-2.6deg) translateX(-16px); filter: hue-rotate(-28deg) saturate(1.7) brightness(.82); }
.rota--b { transform: skewY(2.2deg) translateX(13px) scaleY(.82); filter: hue-rotate(-34deg) saturate(1.8) brightness(.78); }
.rota--c { transform: skewY(-3.4deg) translateX(-22px) scaleY(.86); filter: hue-rotate(-24deg) saturate(1.6) brightness(.8); }

.reparar-carga__perfil {
  display: block; height: 15px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #8ba0a8, #4d646d);
}
/* la llave que repara: va bajando de avería en avería */
.reparar-carga__llave {
  position: absolute; width: 74px; height: 74px; left: 50%; top: 0; z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
  animation: repararLlave 2.6s ease-in-out .2s forwards;
}
.reparar-carga__chispa {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  animation: destelloMontaje .6s ease 2.35s forwards;
}
.reparar-carga__texto { position: relative; text-align: center; color: #fff; animation: desvanecerTexto .4s ease 2.7s forwards; }
.reparar-carga__texto span { display: block; font-weight: 900; letter-spacing: .1em; font-size: 14.5px; text-transform: uppercase; }
.reparar-carga__texto small { display: block; color: var(--amarillo); font-size: 11.5px; margin-top: 6px; letter-spacing: .26em; }

@keyframes arreglarLama {
  to { transform: none; filter: none; }
}
/* la llave se pasea por las averías y al final se retira */
@keyframes repararLlave {
  0%   { transform: translate(-160%, 30px) rotate(-30deg); opacity: 0; }
  10%  { transform: translate(-150%, 62px) rotate(-14deg); opacity: 1; }
  30%  { transform: translate(-140%, 78px) rotate(16deg); opacity: 1; }
  46%  { transform: translate(30%, 150px) rotate(-16deg); opacity: 1; }
  62%  { transform: translate(40%, 168px) rotate(14deg); opacity: 1; }
  78%  { transform: translate(-120%, 240px) rotate(-12deg); opacity: 1; }
  90%  { transform: translate(-110%, 250px) rotate(10deg); opacity: 1; }
  100% { transform: translate(-90%, 300px) rotate(40deg); opacity: 0; }
}

/* =========================================================
   ANIMACIÓN DE MOTORIZACIÓN (solo en esa página)
   Persiana + circuito + alguien pulsa el botón -> sube.
   ========================================================= */
.motor-carga {
  position: fixed; inset: 0; z-index: 999; overflow: hidden; background: var(--azul);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: apagarMontaje .45s ease 3.6s forwards;
}
.motor-carga__local { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #17505f 0%, #0b2a33 72%); }

.motor-carga__hueco {
  position: relative; width: min(520px, 74vw); height: min(300px, 38vh);
  margin-bottom: 130px;
  animation: subirMontada 1.25s cubic-bezier(.45, 0, .25, 1) 2.15s forwards;
}
.motor-carga__cajon {
  position: absolute; top: 0; left: -12px; right: -12px; height: 30px; border-radius: 4px;
  background: linear-gradient(180deg, #2b7085, #1d5766);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 12px;
}
.motor-carga__engranaje { width: 22px; height: 22px; animation: girarMotor 1.1s linear 1.75s infinite; }
.motor-carga__guia { position: absolute; top: 30px; width: 13px; height: calc(100% - 30px); }
.motor-carga__guia--izq { left: -12px; background: linear-gradient(90deg, #35707f, #1b4d5b); }
.motor-carga__guia--der { right: -12px; background: linear-gradient(90deg, #1b4d5b, #35707f); }
.motor-carga__persiana {
  position: absolute; top: 30px; left: 0; right: 0; bottom: 0;
  background-color: #93a9b1;
  background-image: repeating-linear-gradient(180deg,
    rgba(255,255,255,.34) 0px, rgba(255,255,255,.12) 2px, rgba(0,0,0,.30) 13px, rgba(0,0,0,.13) 15px);
  background-size: 100% 17px;
  border-bottom: 15px solid #4d646d;
}

/* el pulsador de la pared */
.motor-carga__pulsador {
  position: absolute; z-index: 3;
  left: calc(50% - min(178px, 32vw)); top: calc(50% + min(104px, 14vh));
  width: 46px; height: 62px; border-radius: 7px;
  background: #0e3543; border: 2px solid #2a6d80;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}

/* las ondas que salen del pulsador hacia el motor */
.motor-carga__ondas {
  position: absolute; width: 300px; height: 300px; pointer-events: none;
  left: 50%; top: 50%;
  /* nacen en el botón y apuntan hacia arriba a la derecha, donde está el motor */
  transform: translate(-50%, -50%) rotate(50deg);
  overflow: visible;
}
.motor-carga__onda {
  opacity: 0; transform-origin: 120px 120px;
  filter: drop-shadow(0 0 8px rgba(245, 197, 24, .9));
  animation: emitirOnda 1.25s ease-out infinite;
}
.motor-carga__onda--1 { animation-delay: 1.45s; }
.motor-carga__onda--2 { animation-delay: 1.66s; }
.motor-carga__onda--3 { animation-delay: 1.87s; }
.motor-carga__pulsador span {
  width: 24px; height: 24px; border-radius: 50%; background: #4d646d;
  animation: encenderBoton .3s ease 1.42s forwards;
}

.motor-carga__persona {
  position: absolute; z-index: 3; width: 168px; height: 280px;
  left: calc(50% - min(300px, 52vw)); bottom: 8%;
  animation: irseMotorista .45s ease 2.75s forwards;
}
.motor-carga__brazo {
  transform-box: view-box; transform-origin: 110px 130px;
  animation: pulsarBoton 1.6s cubic-bezier(.4, 0, .3, 1) .25s forwards;
}

.motor-carga__texto {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  text-align: center; color: #fff; animation: desvanecerTexto .4s ease 2.6s forwards;
}
.motor-carga__texto span { display: block; font-weight: 900; letter-spacing: .1em; font-size: 14.5px; text-transform: uppercase; }
.motor-carga__texto small { display: block; color: var(--amarillo); font-size: 11.5px; margin-top: 6px; letter-spacing: .26em; }

@keyframes pulsarBoton {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(-72deg); }   /* estira el brazo hacia el pulsador */
  72%  { transform: rotate(-79deg); }   /* lo pulsa */
  100% { transform: rotate(-73deg); }
}
@keyframes encenderBoton {
  to { background: var(--amarillo); box-shadow: 0 0 16px 4px rgba(245, 197, 24, .75); }
}
@keyframes emitirOnda {
  0%   { opacity: 0; transform: scale(.3); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.75); }
}
@keyframes girarMotor { to { transform: rotate(360deg); } }
@keyframes irseMotorista { to { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  .reparar-carga, .motor-carga { display: none; }
}

/* =========================================================
   PORTADA (hero)
   ========================================================= */
.portada { position: relative; background: var(--azul); color: #fff; overflow: hidden; }
.portada__fondo { position: absolute; inset: 0; opacity: .5; }
.portada__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(23, 80, 95, .95) 0%, rgba(11, 42, 51, .97) 62%);
}
.portada__contenido { position: relative; padding: 58px 0 66px; max-width: 760px; }
.portada__etiqueta {
  display: inline-flex; align-items: center; gap: 9px; background: rgba(245, 197, 24, .14);
  border: 1px solid rgba(245, 197, 24, .45); color: var(--amarillo);
  padding: 7px 15px; border-radius: 100px; font-weight: 800; font-size: 13.5px; margin-bottom: 20px;
}
.punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amarillo);
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .7); }
  70% { box-shadow: 0 0 0 9px rgba(245, 197, 24, 0); }
}
.portada h1 { color: #fff; margin-bottom: 16px; }
.portada h1 em { font-style: normal; color: var(--amarillo); }
.portada__texto { font-size: 18.5px; color: #c8dfe6; margin-bottom: 6px; max-width: 640px; }

.avales { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .13); }
.aval { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: #d5e8ed; }
.aval svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--amarillo); }

/* =========================================================
   TIRA DE CONFIANZA
   ========================================================= */
.tira { background: var(--amarillo); color: var(--azul); padding: 15px 0; }
.tira__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; font-weight: 800; font-size: 15.5px; text-align: center; }
.tira__lista span { display: inline-flex; align-items: center; gap: 8px; }
.tira__lista svg { width: 21px; height: 21px; flex: 0 0 21px; }

/* =========================================================
   REJILLAS Y TARJETAS
   ========================================================= */
.rejilla { display: grid; gap: 22px; margin-top: 38px; }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
.rejilla--4 { grid-template-columns: 1fr 1fr; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--gris-2); border-radius: var(--radio);
  padding: 26px 24px; box-shadow: var(--sombra); position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta__icono {
  width: 54px; height: 54px; border-radius: 12px; background: var(--azul);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.tarjeta__icono svg { width: 30px; height: 30px; color: var(--amarillo); }
.tarjeta h3 { margin-bottom: 9px; }
.tarjeta p { color: var(--texto-claro); font-size: 16px; margin-bottom: 14px; }
.tarjeta__enlace { font-weight: 800; text-decoration: none; color: var(--azul-3); display: inline-flex; align-items: center; gap: 6px; }
.tarjeta__enlace::after { content: "→"; transition: transform .2s ease; }
.tarjeta:hover .tarjeta__enlace::after { transform: translateX(5px); }

/* tarjeta de servicio: al pasar el ratón, una persiana sube por la cabecera */
.tarjeta-serv__cabecera {
  position: relative; height: 132px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(160deg, var(--azul-3), var(--azul)); margin-bottom: 18px;
}
.tarjeta-serv__cabecera .lamas { position: absolute; inset: 0; }
.tarjeta-serv__persiana {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, #9fb3ba, #6f8a93);
  transform-origin: top center; transition: transform .55s cubic-bezier(.5, 0, .2, 1);
}
.tarjeta-serv:hover .tarjeta-serv__persiana,
.tarjeta-serv:focus-within .tarjeta-serv__persiana { transform: scaleY(.12); }
.tarjeta-serv__icono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tarjeta-serv__icono svg { width: 58px; height: 58px; color: var(--amarillo); }

/* lista de comprobación */
.lista { list-style: none; display: grid; gap: 11px; margin: 20px 0; }
.lista li { display: flex; gap: 11px; align-items: flex-start; font-size: 16.5px; }
.lista li::before {
  content: "✓"; flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: var(--amarillo); color: var(--azul); font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center; margin-top: 3px;
}
.seccion--azul .lista li { color: #d4e7ec; }

/* pasos numerados */
.pasos { counter-reset: paso; display: grid; gap: 18px; margin-top: 34px; }
.paso { display: flex; gap: 17px; align-items: flex-start; }
.paso__num {
  counter-increment: paso; flex: 0 0 46px; height: 46px; border-radius: 50%;
  background: var(--amarillo); color: var(--azul); font-weight: 900; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.paso__num::before { content: counter(paso); }
.paso h3 { font-size: 19px; margin-bottom: 4px; }
.paso p { font-size: 16px; color: var(--texto-claro); margin: 0; }
.seccion--azul .paso p { color: #b9d4dc; }

/* cifras */
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.cifra { text-align: center; padding: 20px 10px; background: rgba(255, 255, 255, .06); border-radius: var(--radio); }
.cifra__num { font-size: clamp(30px, 6vw, 44px); font-weight: 900; color: var(--amarillo); line-height: 1; }
.cifra__txt { font-size: 14.5px; color: #c2dbe2; margin-top: 7px; font-weight: 600; }

/* hueco para foto real */
.foto {
  position: relative; border-radius: var(--radio); overflow: hidden; min-height: 240px;
  background: linear-gradient(160deg, var(--azul-3), var(--azul)); display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 26px;
}
.foto .lamas { position: absolute; inset: 0; opacity: .55; }
.foto__nota { position: relative; color: #cfe4ea; font-size: 14px; font-weight: 700; max-width: 260px; }
.foto__nota svg { width: 34px; height: 34px; margin: 0 auto 10px; display: block; color: var(--amarillo); }

/* =========================================================
   PREGUNTAS FRECUENTES (se abren como una persiana)
   ========================================================= */
.faq { margin-top: 34px; display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--gris-2); border-radius: var(--radio); background: #fff; overflow: hidden; }
.faq__boton {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 52px 18px 20px; font-size: 17.5px; font-weight: 800; color: var(--texto);
  position: relative; font-family: inherit; line-height: 1.4;
}
.faq__boton::after {
  content: ""; position: absolute; right: 21px; top: 50%; width: 11px; height: 11px;
  border-right: 3px solid var(--azul-3); border-bottom: 3px solid var(--azul-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s ease;
}
.faq__boton[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.faq__boton:hover { background: var(--gris); }
.faq__panel { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4, 0, .2, 1); }
.faq__panel p { padding: 0 20px 20px; margin: 0; color: var(--texto-claro); font-size: 16.5px; }

/* =========================================================
   DESPLEGABLES (acordeón reutilizable)
   ========================================================= */
.desplegables { display: grid; gap: 12px; margin-top: 32px; }
.desplegable {
  border: 1px solid var(--gris-2); border-radius: var(--radio); background: #fff;
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.desplegable:has(.desplegable__boton[aria-expanded="true"]) { border-color: var(--azul-3); box-shadow: var(--sombra); }
.desplegable__boton {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 56px 18px 20px; font-size: 17.5px; font-weight: 800; color: var(--texto);
  position: relative; font-family: inherit; line-height: 1.4; display: flex; align-items: center; gap: 13px;
}
.desplegable__boton:hover { background: var(--gris); }
.desplegable__boton:focus-visible { outline: 3px solid var(--azul-3); outline-offset: -3px; }
.desplegable__icono {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: var(--azul);
  display: flex; align-items: center; justify-content: center;
}
.desplegable__icono svg { width: 21px; height: 21px; color: var(--amarillo); }
.desplegable__texto { flex: 1; }
.desplegable__pista { display: block; font-size: 14px; font-weight: 600; color: var(--texto-claro); margin-top: 2px; }

/* la flecha: dos lamas que giran */
.desplegable__flecha {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--gris);
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.desplegable__flecha::before {
  content: ""; width: 9px; height: 9px; border-right: 2.6px solid var(--azul);
  border-bottom: 2.6px solid var(--azul); transform: translateY(-2px) rotate(45deg);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.desplegable__boton[aria-expanded="true"] .desplegable__flecha { background: var(--amarillo); }
.desplegable__boton[aria-expanded="true"] .desplegable__flecha::before { transform: translateY(2px) rotate(-135deg); }

.desplegable__panel { max-height: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.4, 0, .2, 1); }
.desplegable__cuerpo { padding: 2px 20px 22px; color: var(--texto-claro); font-size: 16.5px; }
.desplegable__cuerpo > :last-child { margin-bottom: 0; }
.desplegable__cuerpo strong { color: var(--texto); }

/* variante sobre fondo azul */
.seccion--azul .desplegable { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.seccion--azul .desplegable__boton { color: #fff; }
.seccion--azul .desplegable__boton:hover { background: rgba(255, 255, 255, .07); }
.seccion--azul .desplegable__cuerpo { color: #bcd7de; }
.seccion--azul .desplegable__cuerpo strong { color: #fff; }
.seccion--azul .desplegable__flecha { background: rgba(255, 255, 255, .14); }
.seccion--azul .desplegable__flecha::before { border-color: #fff; }
.seccion--azul .desplegable__pista { color: #9dbfc8; }

/* =========================================================
   PESTAÑAS
   ========================================================= */
.pestanas { margin-top: 34px; }
.pestanas__lista {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  border-bottom: 2px solid var(--gris-2); margin-bottom: 26px; scrollbar-width: thin;
}
.pestanas__lista button {
  flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 17px; font-family: inherit; font-size: 16.5px; font-weight: 800;
  color: var(--texto-claro); cursor: pointer; margin-bottom: -2px; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.pestanas__lista button:hover { color: var(--azul); }
.pestanas__lista button[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--amarillo); }
.pestanas__panel[hidden] { display: none; }
.entra { animation: entrar .38s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* dibujo de la lama según el tipo */
.lama-muestra { height: 128px; border-radius: 8px; overflow: hidden; position: relative; background: #7d949c; margin-bottom: 18px; }
.lama-muestra--ciega { background: repeating-linear-gradient(180deg, #93a9b1 0 12px, #7a9199 12px 14px); }
.lama-muestra--micro {
  background: repeating-linear-gradient(180deg, #93a9b1 0 12px, #7a9199 12px 14px);
}
.lama-muestra--micro::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(11, 42, 51, .85) 1.6px, transparent 1.7px);
  background-size: 11px 14px;
}
.lama-muestra--ballesta {
  background:
    repeating-linear-gradient(90deg, #93a9b1 0 4px, transparent 4px 22px),
    repeating-linear-gradient(180deg, #93a9b1 0 4px, #0b2a33 4px 26px);
}
.lama-muestra--lacada { background: repeating-linear-gradient(180deg, #f5c518 0 12px, #d9ad12 12px 14px); }

/* =========================================================
   SIMULADOR DE PERSIANA
   ========================================================= */
.simulador { display: grid; gap: 20px; }
.simulador__marco {
  position: relative; height: 300px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #14424f 0%, #0b2a33 100%);
  border: 4px solid #24606f; box-shadow: inset 0 0 40px rgba(0, 0, 0, .5);
}
/* el escaparate que hay detrás de la persiana */
.simulador__local {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
}
.simulador__rotulo {
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amarillo); font-size: 15px; border: 2px solid var(--amarillo);
  padding: 8px 18px; border-radius: 6px;
}
.simulador__local small { color: #9dc4cf; font-size: 13.5px; }
/* la hoja de la persiana */
.simulador__hoja {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, #a8bcc3 0%, #8ba0a8 45%, #728c95 100%);
  border-bottom: 5px solid #4d646d; will-change: height;
}
/* la textura de lamas va en el pseudoelemento: el fondo de arriba la taparía */
.simulador__hoja::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, .34) 0px,
    rgba(255, 255, 255, .12) 2px,
    rgba(0, 0, 0, .30) 13px,
    rgba(0, 0, 0, .13) 15px
  );
  background-size: 100% 16px;
}
.simulador__guia { position: absolute; top: 0; bottom: 0; width: 11px; z-index: 2; }
.simulador__guia--izq { left: 0; background: linear-gradient(90deg, #35707f, #1b4d5b); }
.simulador__guia--der { right: 0; background: linear-gradient(90deg, #1b4d5b, #35707f); }
.simulador__mandos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.simulador__mandos .btn { padding: 12px 20px; font-size: 16px; }
.simulador__mandos .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.simulador__estado {
  font-weight: 800; color: var(--amarillo); background: rgba(255, 255, 255, .07);
  padding: 10px 16px; border-radius: 8px; font-size: 15px; min-width: 150px; text-align: center;
}
.simulador__motor { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: #a8c9d2; font-weight: 700; }
.simulador__motor svg { width: 24px; height: 24px; color: var(--amarillo); transition: transform .2s; }
.simulador__motor.girando svg { animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   DIAGNÓSTICO INTERACTIVO
   ========================================================= */
.diagnostico { margin-top: 34px; }
.diagnostico__opciones { display: grid; gap: 12px; grid-template-columns: 1fr; }
.diagnostico__opcion {
  display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--gris-2); border-radius: var(--radio);
  padding: 15px 17px; font-family: inherit; font-size: 16.5px; font-weight: 700; color: var(--texto);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.diagnostico__opcion:hover { border-color: var(--azul-3); transform: translateY(-2px); box-shadow: var(--sombra); }
.diagnostico__opcion.activa { border-color: var(--amarillo); background: #fffdf3; }
.diagnostico__opcion svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--azul-3); }
.diagnostico__opcion.activa svg { color: #b98f00; }

.diagnostico__resultado { margin-top: 22px; }
.diagnostico__ficha { background: var(--azul); color: #d6eaf0; border-radius: var(--radio); padding: 26px 24px; box-shadow: var(--sombra-alta); }
.diagnostico__ficha h3 { color: #fff; margin: 8px 0 12px; }
.diagnostico__ficha p { font-size: 16.5px; }
.diagnostico__ficha strong { color: var(--amarillo); }
.diagnostico__etiqueta {
  display: inline-block; background: var(--amarillo); color: var(--azul);
  padding: 5px 13px; border-radius: 100px; font-size: 13px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em;
}
.diagnostico__ojo { font-size: 15px; color: #9dc4cf; font-style: italic; border-left: 3px solid var(--azul-3); padding-left: 13px; }
.diagnostico__ojo:empty { display: none; }

/* =========================================================
   ESCAPARATE DE TIPOS DE LAMA
   Eliges la lama abajo, la persiana cambia, y al subirla
   se descubre la información.
   ========================================================= */
.escaparate { margin-top: 34px; }

.escaparate__marco {
  position: relative; border-radius: 12px; overflow: hidden;
  min-height: 430px; background: linear-gradient(180deg, #14424f 0%, #0b2a33 100%);
  border: 4px solid #24606f; box-shadow: inset 0 0 44px rgba(0, 0, 0, .5), var(--sombra-alta);
}

/* la información, detrás de la persiana */
.escaparate__fondo { position: relative; z-index: 1; padding: 34px 34px 30px; color: #d6eaf0; }
.escaparate__ficha[hidden] { display: none; }
.escaparate__ficha { animation: entrar .45s ease both; }
.escaparate__ficha h3 { color: #fff; font-size: clamp(21px, 3.2vw, 27px); margin-bottom: 10px; }
.escaparate__intro { font-size: 17px; color: #bcd7de; margin-bottom: 16px; }
.escaparate__ficha .lista { margin: 0 0 18px; }
.escaparate__ficha .lista li { color: #d6eaf0; font-size: 16px; }
.escaparate__ideal {
  background: rgba(245, 197, 24, .12); border-left: 4px solid var(--amarillo);
  padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 0; font-size: 15.5px; color: #e7f2f5;
}
.escaparate__ideal strong { color: var(--amarillo); }

/* cajón superior */
.escaparate__cajon {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 4;
  background: linear-gradient(180deg, #2b7085, #1d5766);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

/* la persiana */
.escaparate__persiana {
  position: absolute; top: 22px; left: 0; right: 0; z-index: 3;
  height: calc(100% - 22px); overflow: hidden; will-change: height;
}
.escaparate__lamas {
  position: absolute; inset: 0;
  background-repeat: repeat-y; background-position: top center; background-size: 100% auto;
  background-image: url('/assets/img/textura-ciega.svg');
  transition: opacity .25s ease;
}
.escaparate__perfil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: linear-gradient(180deg, #8ba0a8, #4d646d);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.escaparate__tirador { width: 60px; height: 6px; border-radius: 3px; background: #33474f; }

/* guías */
.escaparate__guia { position: absolute; top: 0; bottom: 0; width: 13px; z-index: 5; }
.escaparate__guia--izq { left: 0; background: linear-gradient(90deg, #35707f, #1b4d5b); }
.escaparate__guia--der { right: 0; background: linear-gradient(90deg, #1b4d5b, #35707f); }

/* aviso mientras está bajada */
.escaparate__aviso {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: rgba(11, 42, 51, .86); color: var(--amarillo); font-weight: 800; font-size: 16px;
  padding: 13px 22px; border-radius: 100px; border: 2px solid rgba(245, 197, 24, .5);
  text-align: center; transition: opacity .3s ease; pointer-events: none;
}
.escaparate.abierta .escaparate__aviso { opacity: 0; }

/* mandos */
.escaparate__mandos { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin-top: 18px; }
.escaparate__mandos .btn { padding: 12px 20px; font-size: 16px; }
.escaparate__mandos .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.escaparate__estado {
  font-weight: 800; font-size: 15px; color: var(--azul-3);
  background: var(--gris); padding: 10px 16px; border-radius: 8px;
}
.seccion--azul .escaparate__estado, .seccion--gris .escaparate__estado { background: rgba(11, 42, 51, .08); }
.escaparate__pista { margin: 14px 0 0; font-size: 15px; color: var(--texto-claro); font-weight: 600; }
/* cuando la fila va arriba, la pista la precede */
.escaparate__pista--arriba { margin: 0 0 12px; text-align: center; }

/* ---------- la fila (tabla) de tipos de lama ---------- */
.tabla-lamas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 22px;
}
.tabla-lamas__celda {
  display: flex; flex-direction: column; gap: 0; cursor: pointer; overflow: hidden;
  background: #fff; border: 2px solid var(--gris-2); border-radius: 10px;
  padding: 0 0 12px; font-family: inherit; text-align: center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tabla-lamas__celda:hover { border-color: var(--azul-3); transform: translateY(-3px); box-shadow: var(--sombra); }
.tabla-lamas__celda.activa { border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(245, 197, 24, .28); }
.tabla-lamas__celda:focus-visible { outline: 3px solid var(--azul-3); outline-offset: 2px; }

.tabla-lamas__muestra {
  display: block; height: 62px; margin-bottom: 10px;
  background-repeat: repeat-y; background-position: top center; background-size: 100% auto;
  transition: transform .4s ease;
}
.tabla-lamas__celda:hover .tabla-lamas__muestra { transform: scale(1.06); }
.tabla-lamas__nombre { font-weight: 800; font-size: 16px; color: var(--texto); padding: 0 8px; }
.tabla-lamas__pista { font-size: 13px; color: var(--texto-claro); padding: 2px 8px 0; line-height: 1.35; }
.tabla-lamas__celda.activa .tabla-lamas__nombre { color: var(--azul); }

@media (min-width: 760px) {
  .tabla-lamas { grid-template-columns: repeat(4, 1fr); }
  .escaparate__marco { min-height: 400px; }
  .escaparate__fondo { padding: 40px 46px; }
}

/* =========================================================
   CARRUSEL DE IMÁGENES
   ========================================================= */
.carrusel { margin-top: 30px; }
.carrusel__vista {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--azul); box-shadow: var(--sombra-alta); aspect-ratio: 8 / 5;
}
.carrusel__lamina {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transform: scale(1.06);
  transition: opacity .7s ease, transform 1.1s ease, visibility 0s linear .7s;
}
.carrusel__lamina.activa {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity .7s ease, transform 5.5s ease, visibility 0s;
}
.carrusel__lamina img { width: 100%; height: 100%; object-fit: cover; }
.carrusel__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(7, 26, 33, .93));
  color: #fff; display: grid; gap: 3px;
}
.carrusel__pie strong { font-size: 19px; font-weight: 800; }
.carrusel__pie span { font-size: 15px; color: #c3dce3; }

.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11, 42, 51, .68); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease; backdrop-filter: blur(3px);
}
.carrusel__flecha:hover { background: var(--amarillo); color: var(--azul); transform: translateY(-50%) scale(1.08); }
.carrusel__flecha svg { width: 22px; height: 22px; }
.carrusel__flecha--izq { left: 14px; }
.carrusel__flecha--der { right: 14px; }

.carrusel__puntos { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.carrusel__punto {
  width: 34px; height: 6px; border-radius: 3px; border: 0; cursor: pointer;
  background: var(--gris-2); transition: background .25s ease, width .25s ease;
}
.carrusel__punto:hover { background: #b9c9ce; }
.carrusel__punto.activo { background: var(--amarillo); width: 52px; }
.seccion--azul .carrusel__punto { background: rgba(255, 255, 255, .22); }
.seccion--azul .carrusel__punto.activo { background: var(--amarillo); }

/* =========================================================
   GALERÍA CON EFECTO AL PASAR EL CURSOR
   ========================================================= */
.galeria { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 34px; }
.galeria__pieza {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  box-shadow: var(--sombra); cursor: pointer; aspect-ratio: 8 / 5;
}
.galeria__pieza img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.3, 0, .2, 1), filter .45s ease;
}
.galeria__pieza:hover img, .galeria__pieza:focus-within img { transform: scale(1.09); filter: brightness(1.12); }
.galeria__capa {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px 20px 18px; color: #fff;
  background: linear-gradient(180deg, transparent 38%, rgba(7, 26, 33, .92));
  transform: translateY(28px); opacity: .92;
  transition: transform .42s ease, opacity .42s ease;
}
.galeria__pieza:hover .galeria__capa, .galeria__pieza:focus-within .galeria__capa { transform: none; opacity: 1; }
.galeria__capa strong { font-size: 18px; font-weight: 800; }
.galeria__capa span {
  font-size: 14.5px; color: #bcd7de; max-height: 0; overflow: hidden;
  transition: max-height .42s ease, margin-top .42s ease;
}
.galeria__pieza:hover .galeria__capa span, .galeria__pieza:focus-within .galeria__capa span { max-height: 90px; margin-top: 5px; }
/* barrido metálico al pasar el cursor */
.galeria__pieza::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.galeria__pieza:hover::after { animation: barrido .85s ease; }
@keyframes barrido { to { left: 130%; } }

/* =========================================================
   IMAGEN CON MARCO
   ========================================================= */
.imagen-marco {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  box-shadow: var(--sombra-alta); border: 3px solid var(--azul-3);
}
.imagen-marco img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.3, 0, .2, 1); }
.imagen-marco:hover img { transform: scale(1.05); }
.imagen-marco figcaption {
  background: var(--azul); color: #c3dce3; font-size: 14.5px; padding: 12px 16px; text-align: center; font-weight: 600;
}

/* =========================================================
   BOTÓN VOLVER ARRIBA
   ========================================================= */
.arriba {
  position: fixed; right: 22px; bottom: calc(var(--barra-movil) + 16px); z-index: 93;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-alta); opacity: 0; pointer-events: none;
  transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.arriba.visible { opacity: 1; pointer-events: auto; transform: none; }
.arriba svg { width: 22px; height: 22px; }

/* cabecera que se esconde */
.cabecera { transition: transform .32s ease, box-shadow .25s ease; }
.cabecera--oculta { transform: translateY(-100%); }
.cabecera--pegada { box-shadow: 0 4px 22px rgba(0, 0, 0, .34); }

/* =========================================================
   ZONAS
   ========================================================= */
.zonas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.zonas span {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 8px 15px; border-radius: 100px; font-size: 15px; font-weight: 600; color: #d3e7ec;
}

/* =========================================================
   LLAMADA A LA ACCIÓN FINAL
   ========================================================= */
.cta { position: relative; background: var(--azul-2); color: #fff; overflow: hidden; }
.cta .lamas { position: absolute; inset: 0; opacity: .45; }
.cta__contenido { position: relative; text-align: center; padding: 58px 0; }
.cta h2 { color: #fff; margin-bottom: 12px; }
.cta p { color: #c3dce3; font-size: 18px; max-width: 620px; margin: 0 auto 8px; }

/* =========================================================
   FORMULARIO
   ========================================================= */
.formulario { display: grid; gap: 16px; margin-top: 10px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 800; font-size: 15px; }
.campo input, .campo textarea, .campo select {
  font-family: inherit; font-size: 16.5px; padding: 13px 15px; border: 2px solid var(--gris-2);
  border-radius: 8px; background: #fff; color: var(--texto); width: 100%;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--azul-3); }
.campo textarea { min-height: 128px; resize: vertical; }
.campo--fila { display: grid; gap: 16px; }
.campo__ayuda { font-size: 13.5px; color: var(--texto-claro); }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--texto-claro); }
.acepto input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.aviso-envio { margin-top: 4px; padding: 14px 16px; border-radius: 8px; font-size: 16px; }
.aviso-envio--ok { background: #e8f6ec; color: #1c5c31; border: 1px solid #a9dcb9; }
.aviso-envio--error { background: #fdecec; color: #8a1f1f; border: 1px solid #f0b4b4; }

/* fichas de contacto */
.contacto-datos { display: grid; gap: 14px; margin-top: 26px; }
.contacto-dato {
  display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gris-2);
  border-radius: var(--radio); padding: 18px; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s;
}
.contacto-dato:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.contacto-dato svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--azul-3); margin-top: 3px; }
.contacto-dato strong { display: block; font-size: 17px; }
.contacto-dato span { color: var(--texto-claro); font-size: 15px; }

/* =========================================================
   TEXTO LEGAL
   ========================================================= */
.legal { max-width: 820px; }
.legal h2 { font-size: 24px; margin: 34px 0 12px; }
.legal h3 { font-size: 19px; margin: 24px 0 8px; }
.legal p, .legal li { color: #3d4d53; font-size: 16.5px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; display: grid; gap: 7px; }
.legal__fecha { color: var(--texto-claro); font-size: 15px; font-style: italic; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15.5px; }
.legal th, .legal td { border: 1px solid var(--gris-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--gris); font-weight: 800; }
.aviso-revisar {
  background: #fff8e1; border: 1px solid #f0d27a; border-radius: 8px;
  padding: 14px 16px; font-size: 15.5px; color: #6b5310; margin: 18px 0;
}

/* =========================================================
   PIE
   ========================================================= */
.pie { background: var(--azul); color: #b7d2d9; padding: 52px 0 26px; font-size: 15.5px; }
.pie__rejilla { display: grid; gap: 32px; }
.pie h4 { color: #fff; font-size: 16px; margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase; }
.pie a { color: #b7d2d9; text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
.pie ul { list-style: none; display: grid; gap: 9px; }
.pie__legal {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 14px; color: #8fb2bb;
}

/* =========================================================
   BARRA FIJA MÓVIL
   ========================================================= */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex;
  background: var(--azul); border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -3px 16px rgba(0, 0, 0, .22);
}
.barra-movil a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 9px 4px; text-decoration: none; font-weight: 800; font-size: 12.5px; color: #fff; min-height: var(--barra-movil);
}
.barra-movil a svg { width: 22px; height: 22px; }
.barra-movil .bm--tel { background: var(--amarillo); color: var(--azul); }
.barra-movil .bm--wa { background: var(--verde); }

/* botón flotante de WhatsApp (escritorio) */
.wa-flotante {
  display: none; position: fixed; right: 22px; bottom: 22px; z-index: 94;
  width: 58px; height: 58px; border-radius: 50%; background: var(--verde);
  align-items: center; justify-content: center; box-shadow: var(--sombra-alta);
  animation: flotar 2.6s ease-in-out infinite;
}
.wa-flotante svg { width: 31px; height: 31px; color: #fff; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* =========================================================
   MIGAS DE PAN
   ========================================================= */
.migas { font-size: 14.5px; color: #9dbfc8; padding: 14px 0 0; }
.migas a { color: #cfe4ea; text-decoration: none; }
.migas a:hover { color: var(--amarillo); }

/* =========================================================
   APARICIÓN AL HACER SCROLL
   ========================================================= */
.aparece { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }

/* =========================================================
   ESCRITORIO
   ========================================================= */
@media (min-width: 700px) {
  .galeria { grid-template-columns: 1fr 1fr; }
  .diagnostico__opciones { grid-template-columns: 1fr 1fr; }
  .simulador { grid-template-columns: 1fr; }
  .simulador__marco { height: 360px; }
  .rejilla--2 { grid-template-columns: 1fr 1fr; }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .campo--fila { grid-template-columns: 1fr 1fr; }
  .contacto-datos { grid-template-columns: 1fr 1fr; }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
  .portada__contenido { padding: 82px 0 92px; }
  .seccion { padding: 78px 0; }
}

@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .menu { display: flex; gap: 26px; }
  .cabecera__tel { display: inline-flex; }
  .hamburguesa, .menu-movil, .barra-movil { display: none; }
  .wa-flotante { display: flex; }
  .arriba { bottom: 100px; }
  .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* =========================================================
   ACCESIBILIDAD: sin animaciones si el usuario lo pide
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .persiana-carga { display: none; }
  .aparece { opacity: 1; transform: none; }
}

/* Impresión */
@media print {
  .cabecera, .barra-movil, .wa-flotante, .cta, .persiana-carga { display: none !important; }
  body { padding: 0; font-size: 12pt; }
}