/* ══════════════════════════════════════════════════════════════
   MAGNET VIDEOS · hoja de estilo única
   ──────────────────────────────────────────────────────────
   La usan las tres versiones: español, inglés y alemán.
   Se toca AQUÍ una vez, no en tres archivos.
   ══════════════════════════════════════════════════════════ */

:root{
  --naranja:#E67D21;          /* el de marca: titulares y llamadas */
  --naranja-texto:#B45C0F;    /* mismo naranja oscurecido, para texto pequeño sobre blanco */
  --naranja-suave:#FDF3EA;
  --grafito:#4F5050;          /* el gris de marca */
  --tinta:#FFFFFF;            /* fondo */
  --tinta-2:#FAF9F7;          /* tarjetas */
  --tinta-3:#F2F0EC;          /* tarjeta destacada */
  --gris-banda:#EFEBE3;       /* las bandas que separan bloques */
  --hueso:#2B2C2E;            /* texto principal */
  --hueso-apagado:#66686C;    /* texto secundario */
  --linea:rgba(43,44,46,.14);
  --ancho:1140px;
  --radio:14px;
}
*{box-sizing:border-box}
/* overflow-x:clip y no hidden: hidden convertiría el body en contenedor de
   scroll y rompería la cabecera fija. */
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--tinta);color:var(--hueso);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
.env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
section{padding:5.5rem 0;border-top:1px solid var(--linea)}
h1,h2,h3{line-height:1.18;font-weight:700;margin:0 0 .6em;letter-spacing:-.01em}
h1,h2{color:var(--naranja)}
h2{font-size:clamp(1.7rem,4vw,2.4rem)}
h3{font-size:1.15rem;margin-bottom:.4em;color:var(--hueso)}
p{margin:0 0 1rem}
.rotulo{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja-texto);font-weight:600;margin-bottom:1rem;
}
.apagado{color:var(--hueso-apagado)}
main a{color:var(--naranja-texto)}

/* CABECERA
   Transparente encima del vídeo, y sólida en cuanto se pasa la portada.
   Si no, al llegar al blanco los enlaces blancos desaparecerían. */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
header.solido{
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom-color:var(--linea);
}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.barra .marca{display:block;position:relative;line-height:0}
.barra .marca img{height:60px;width:auto;transition:opacity .3s}
.barra .marca .oscuro{position:absolute;inset:0;opacity:0}
header.solido .marca .claro{opacity:0}
header.solido .marca .oscuro{opacity:1}
@media(max-width:520px){.barra .marca img{height:48px}}

nav{display:flex;align-items:center;gap:1.9rem;font-size:1rem}
nav a{text-decoration:none;color:#fff;font-weight:500;transition:color .25s;position:relative}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--naranja);transition:right .25s}
nav a:hover::after,nav a:focus-visible::after{right:0}
header.solido nav a{color:var(--hueso)}
nav .cta{
  background:var(--naranja);color:#2A1605;font-weight:700;
  padding:.72rem 1.6rem;border-radius:999px;
}
nav .cta::after{display:none}
nav .cta:hover{background:var(--naranja-claro)}
header.solido nav .cta{color:#2A1605}

/* SELECTOR DE IDIOMA
   Tres letras, sin banderas: una bandera no es un idioma. El alemán se habla
   en tres países y el inglés en medio mundo. */
.idiomas{display:flex;align-items:center;gap:.1rem;font-size:.86rem;letter-spacing:.05em}
.idiomas a{
  padding:.32rem .52rem;border-radius:6px;font-weight:600;opacity:.6;
  transition:opacity .2s,background .2s;
}
.idiomas a::after{display:none}
.idiomas a:hover,.idiomas a:focus-visible{opacity:1;background:rgba(255,255,255,.14)}
.idiomas a.aqui{opacity:1;color:var(--naranja)}
header.solido .idiomas a:hover{background:rgba(43,44,46,.08)}
header.solido .idiomas a.aqui{color:var(--naranja-texto)}

/* En móvil se esconde el menú, pero el idioma NO: es lo que más falta hace a
   quien llega y no lee español. */
@media(max-width:900px){
  nav a:not(.cta):not(.idiomas a){display:none}
  nav{gap:.8rem}
  .idiomas{display:flex}
  .idiomas a{display:inline-block}
}

/* PORTADA CON PARALLAX
   El reel se queda quieto al fondo (position:fixed) y todo lo demás sube por
   encima al hacer scroll. Es el parallax de verdad y no cuesta ni una línea
   de JavaScript de más. */
.portada{
  position:relative;border-top:0;padding:0;
  min-height:clamp(430px,64svh,640px);display:grid;align-items:end;
  isolation:isolate;overflow:clip;
}
/* Mientras el reel no ha entrado, el telón es color de marca — nunca un
   fotograma de un cliente. */
.telon{
  position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(230,125,33,.55), transparent 62%),
    radial-gradient(90% 70% at 12% 88%, rgba(230,125,33,.22), transparent 60%),
    #2E3033;
}
.telon iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100svh;min-width:177.78svh;
  max-width:none;object-fit:cover;border:0;
}
/* EL VELO, EN DIAGONAL
   Antes oscurecía la pantalla entera y el reel quedaba apagado de lado a lado.
   Ahora la sombra cae SOLO donde va el texto —la izquierda— y se abre hacia la
   derecha para que el vídeo se vea limpio. Van tres capas:
     1. la diagonal, que es la que sostiene el titular
     2. un velo arriba, o el menú blanco se pierde sobre un fotograma claro
     3. un velo abajo, para entrar en la franja oscura de clientes sin salto */
.velo{
  position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(16,17,20,.90) 0%,
      rgba(16,17,20,.74) 30%,
      rgba(16,17,20,.34) 58%,
      rgba(16,17,20,.10) 82%,
      rgba(16,17,20,.04) 100%),
    linear-gradient(180deg, rgba(16,17,20,.55) 0%, rgba(16,17,20,0) 22%),
    linear-gradient(0deg,   rgba(16,17,20,.72) 0%, rgba(16,17,20,0) 26%);
}
/* En móvil la columna ocupa todo el ancho: la diagonal no vale, hace falta
   velo entero o el texto se come el fotograma. */
@media(max-width:820px){
  .velo{
    background:
      linear-gradient(180deg, rgba(16,17,20,.62) 0%, rgba(16,17,20,.70) 50%, rgba(16,17,20,.86) 100%);
  }
}
.portada{color:#F6F5F3}
.portada .env{padding:7rem 0 3.5rem}
.portada h1{font-size:clamp(2.4rem,6.5vw,4.2rem);max-width:15ch;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
/* El nombre de la marca DENTRO del h1: es lo primero que lee Google, y al
   quitar el logo de la portada se había quedado fuera. Pequeño, para que el
   titular siga mandando. */
.h1-marca{
  display:block;font-size:.9rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#F6F5F3;opacity:.75;margin-bottom:.6rem;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* La ® de marca registrada: pequeña y levantada, nunca al tamaño del texto.
   Va SOLO en el primer uso destacado de cada página — repetirla en cada
   mención es lo que hace que una marca parezca de teletienda. */
.reg{font-size:.55em;vertical-align:super;letter-spacing:0;opacity:.85;margin-left:.15em}
.portada .rotulo{color:var(--naranja)}
.portada .entrada{font-size:clamp(1.05rem,2vw,1.28rem);max-width:48ch;color:#E7E5E1}
.portada .datos{border-top-color:rgba(246,245,243,.22)}
.portada .datos span{color:#C9C7C2}
.portada .rotulo-reel{color:#C9C7C2}

.rotulo-reel{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:2rem;font-size:.85rem;color:var(--hueso-apagado);
}
.punto{width:9px;height:9px;border-radius:50%;background:var(--naranja);animation:latir 2s infinite}
@keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.con-sonido{
  background:rgba(255,255,255,.10);border:1px solid rgba(246,245,243,.32);color:#F6F5F3;
  font:inherit;font-size:.82rem;padding:.4rem 1rem;border-radius:99px;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.con-sonido:hover{border-color:var(--naranja);background:var(--naranja);color:#2A1605}

/* CARRUSEL DE CLIENTES
   Banda oscura pegada a la portada. Los nombres desfilan solos, en blanco.
   La lista va DUPLICADA en el HTML: es lo que hace que el bucle no dé un
   salto al volver a empezar. */
main > section.franja-clientes{
  background:#1B1C1F;color:#fff;padding:2.4rem 0;overflow:hidden;
  border-top:0;position:relative;z-index:1;
}
.franja-clientes .titulo{
  text-align:center;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--naranja);font-weight:600;margin:0 0 1.6rem;
}
.cinta{display:flex;width:max-content;animation:desfilar 42s linear infinite}
.franja-clientes:hover .cinta{animation-play-state:paused}
.cinta ul{display:flex;gap:3.4rem;list-style:none;margin:0;padding:0 1.7rem}
.cinta li{
  font-size:clamp(1.15rem,2.4vw,1.65rem);font-weight:600;white-space:nowrap;
  color:#FFFFFF;opacity:.92;letter-spacing:.01em;
}
.cinta li.destacado{color:var(--naranja);opacity:1}
@keyframes desfilar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .cinta{animation:none;width:100%;overflow-x:auto}
  .cinta ul:last-child{display:none}
}
/* difuminado en los bordes, para que no se corten de golpe */
.franja-clientes::before,.franja-clientes::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.franja-clientes::before{left:0;background:linear-gradient(90deg,#1B1C1F,transparent)}
.franja-clientes::after{right:0;background:linear-gradient(270deg,#1B1C1F,transparent)}

/* todo lo que viene después tapa el telón */
/* OJO al :not(.banda): esta regla tiene más especificidad que
   «main > section.banda», así que sin la excepción se comía las bandas grises
   y la página entera salía blanca. Si añades otro fondo, exclúyelo aquí. */
main > section:not(.portada):not(.franja-clientes):not(.oscura):not(.banda),
footer{position:relative;z-index:1;background:var(--tinta)}
main > section.banda{position:relative;z-index:1}

/* BANDAS ALTERNAS
   Un bloque blanco, el siguiente gris. Así cada sección se separa sola y no
   hace falta una raya que las divida. */
main > section.banda{background:var(--gris-banda);border-top:0}
main > section.banda + section{border-top:0}
/* dentro del gris, las tarjetas van en blanco: si no, se confunden con el fondo */
.banda .tarjeta{background:#fff}
.banda .tarjeta.destacada{background:#fff;border-color:var(--naranja)}
.banda .clientes li{background:#fff}
footer{background:var(--gris-banda);border-top:0}

/* Los tres datos, en una tira fina. Antes ocupaban media pantalla para decir
   tres cosas. */
.datos{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;font-size:.95rem}
.datos div{display:flex;align-items:baseline;gap:.5rem}
.datos b{font-size:1.05rem;font-weight:700;color:var(--naranja);white-space:nowrap}
.datos span{color:var(--hueso-apagado)}
.datos .sep{color:var(--linea);font-size:1.2rem;line-height:1}
@media(max-width:640px){.datos .sep{display:none}.datos{gap:.35rem 1.4rem}}

/* vídeo: portada estática hasta que se pulsa, para que cargue rápido */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;background:var(--tinta-2);border:1px solid var(--linea);cursor:pointer;width:100%;padding:0;color:inherit;font:inherit}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.video:hover img{transform:scale(1.03);opacity:.75}
.video .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video .play span{
  width:74px;height:74px;border-radius:50%;background:var(--naranja);
  display:grid;place-items:center;box-shadow:0 6px 30px rgba(0,0,0,.45);
}
.video .play span::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* El pie va SIEMPRE en blanco: se apoya en un degradado oscuro, así que no
   puede heredar el color de la sección — en las claras se volvía gris oscuro
   sobre negro y no se leía. */
.video figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:.92rem;text-align:left;
  pointer-events:none;color:#fff}
.video figcaption b{display:block;font-weight:600;color:#fff}
.video figcaption em{font-style:normal;color:rgba(255,255,255,.78);font-size:.84rem}

/* CARRUSEL DE TRABAJOS
   Scroll horizontal con anclaje: se arrastra con el dedo en el móvil y con las
   flechas en el ordenador. Sin librerías: el navegador ya sabe hacer esto. */
.carrusel{position:relative;margin-top:2.5rem}
.pista{
  display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:1rem;
  scrollbar-width:thin;scrollbar-color:var(--naranja) transparent;
}
.pista::-webkit-scrollbar{height:6px}
.pista::-webkit-scrollbar-thumb{background:var(--naranja);border-radius:99px}
.pista::-webkit-scrollbar-track{background:var(--gris-banda);border-radius:99px}
.pista > *{flex:0 0 clamp(260px,32%,380px);scroll-snap-align:start}
.flechas{display:flex;gap:.6rem;margin-top:.4rem}
.flecha{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--hueso);cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s,color .2s;
}
.flecha:hover{background:var(--naranja);border-color:var(--naranja);color:#2A1605}
.flecha:disabled{opacity:.35;cursor:default}
.flecha:disabled:hover{background:#fff;border-color:var(--linea);color:var(--hueso)}

/* rejillas */
.rejilla{display:grid;gap:1.5rem}
.r2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* tarjetas */
.tarjeta{background:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--radio);padding:1.8rem}
.tarjeta.destacada{border-color:var(--naranja);background:var(--tinta-3)}
.insignia{display:inline-block;background:var(--naranja);color:#2A1605;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.3rem .7rem;border-radius:99px;margin-bottom:.9rem}
.precio{font-size:1.55rem;font-weight:600;color:var(--naranja);margin:.8rem 0 .1rem}
.precio small{font-size:.82rem;font-weight:400;color:var(--hueso-apagado);display:block;margin-top:.2rem}
.lista{list-style:none;padding:0;margin:1.1rem 0 0;font-size:.93rem;color:var(--hueso-apagado)}
.lista li{padding-left:1.4rem;position:relative;margin-bottom:.45rem}
.lista li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--naranja)}

/* SECTORES
   Cada uno con el cliente real que lo respalda. Eso es lo que ninguna
   plataforma puede enseñar: nombres. */
.sector{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .25s,transform .25s;
}
.sector:hover{border-color:var(--naranja);transform:translateY(-3px)}
.sector .num{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--naranja);
}
/* La pieza gráfica de cada sector: dibujo de trazo, en el naranja de marca,
   sobre una placa clara. Van dentro del HTML, no como archivos sueltos: son
   cuatro líneas cada una y así no hay nada más que descargar. */
.sector .pieza{
  width:64px;height:64px;border-radius:14px;background:var(--naranja-suave);
  display:grid;place-items:center;margin-bottom:.4rem;
}
.sector .pieza svg{width:34px;height:34px;stroke:var(--naranja);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sector:hover .pieza{background:var(--naranja)}
.sector:hover .pieza svg{stroke:#fff}
.sector h3{margin:0 0 .2em}
.sector p{font-size:.94rem;color:var(--hueso-apagado);margin:0}
.sector .quien{
  margin-top:auto;padding-top:1rem;font-size:.82rem;color:var(--hueso-apagado);
  border-top:1px solid var(--linea);
}
.sector .quien b{color:var(--hueso);font-weight:600}

/* PRECIOS: el 3D manda.
   Ocupa una columna entera y con los números grandes; los otros dos van
   apilados al lado y más discretos. Si los tres se ven igual, el cliente elige
   el más barato por defecto. */
.precios-cuadro{display:grid;grid-template-columns:1.15fr 1fr;gap:1.5rem;margin-top:2.5rem;align-items:start}
.precios-otros{display:grid;gap:1.5rem}
@media(max-width:820px){.precios-cuadro{grid-template-columns:1fr}}
.tarjeta.estrella{padding:2.2rem 2rem}
.precios-grandes li{padding-left:0;display:flex;flex-direction:column;gap:.1rem;
  margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--linea)}
.precios-grandes li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.precios-grandes li::before{display:none}
.precios-grandes b{font-size:1.8rem;font-weight:700;color:var(--naranja);line-height:1.1}
.precios-grandes span{font-size:.9rem;color:var(--hueso-apagado)}

/* proceso */
.paso{counter-increment:paso}
.paso .num{font-size:.8rem;letter-spacing:.14em;color:var(--naranja);font-weight:700;margin-bottom:.5rem}

/* clientes */
.clientes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.clientes li{list-style:none;border:1px solid var(--linea);border-radius:99px;padding:.45rem 1.1rem;font-size:.92rem;color:var(--hueso-apagado)}
.clientes li.fuerte{border-color:var(--naranja);color:var(--hueso)}

/* PRESUPUESTO GUIADO
   No manda nada a ningún servidor: arma el correo con las respuestas y lo abre
   en el programa de correo del visitante. Así no se guarda ni un dato en
   ninguna parte y la web sigue sin necesitar formulario ni consentimiento. */
.presupuesto{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:2rem;display:grid;gap:1.5rem;
}
.campo{display:grid;gap:.55rem}
.campo > .titulo{font-weight:600;font-size:.98rem}
.campo > .pista{font-size:.85rem;color:var(--hueso-apagado);margin:-.35rem 0 0}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.opciones label{
  border:1px solid var(--linea);border-radius:999px;padding:.5rem 1.1rem;
  font-size:.92rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s;
  user-select:none;
}
.opciones input{position:absolute;opacity:0;width:0;height:0}
.opciones label:hover{border-color:var(--naranja)}
.opciones input:checked + span,
.opciones label:has(input:checked){
  background:var(--naranja);border-color:var(--naranja);color:#2A1605;font-weight:600;
}
.opciones label:has(input:focus-visible){outline:2px solid var(--naranja);outline-offset:2px}
.presupuesto textarea{
  width:100%;border:1px solid var(--linea);border-radius:10px;padding:.9rem 1rem;
  font:inherit;font-size:.95rem;resize:vertical;min-height:110px;background:#fff;color:var(--hueso);
}
.presupuesto textarea:focus{outline:2px solid var(--naranja);outline-offset:1px;border-color:var(--naranja)}
.resumen{
  background:var(--gris-banda);border-radius:10px;padding:1rem 1.2rem;
  font-size:.92rem;color:var(--hueso-apagado);
}
/* Aparece al pulsar «mandarme esto por correo». Aquí no vale la ruedecita de
   «Enviando…» de _base: esto no envía al servidor, abre el programa de correo.
   Si no hay ninguno configurado no pasa nada visible, y esto lo explica. */
.tras-envio{
  margin:0;font-size:.9rem;line-height:1.6;color:var(--hueso);
  background:#FDF3E7;border-left:3px solid var(--naranja);
  padding:.85rem 1.1rem;border-radius:0 8px 8px 0;
}
.tras-envio[hidden]{display:none}
.resumen b{color:var(--hueso)}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.boton-linea{
  display:inline-block;border:2px solid var(--naranja);color:var(--naranja-texto);
  background:none;font:inherit;font-weight:700;text-decoration:none;
  padding:.9rem 1.8rem;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;
}
.boton-linea:hover{background:var(--naranja);color:#2A1605}

/* contacto: banda oscura de cierre, como la cabecera. Cierra el círculo. */
.contacto{text-align:center}
main > section.oscura{
  background:#1B1C1F;color:#F6F5F3;border-top:0;position:relative;z-index:1;
}
.oscura h2{color:#fff}
.oscura .rotulo{color:var(--naranja)}
.oscura .apagado{color:#BFBDB8}
.boton{display:inline-block;background:var(--naranja);color:#2A1605;font-weight:600;
  text-decoration:none;padding:1rem 2.2rem;border-radius:99px;transition:background .2s}
.boton:hover,.boton:focus-visible{background:var(--naranja-claro)}

/* pie */
footer{padding:2.5rem 0;border-top:1px solid var(--linea);color:var(--hueso-apagado);font-size:.88rem}
.pie-alto{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;margin-bottom:2rem}
.pie-alto img{height:38px;width:auto}
.pie-redes{display:flex;gap:1.2rem;font-size:.9rem}
.pie-redes a{text-decoration:none}
.pie-redes a:hover{color:var(--naranja)}

/* la capa que se abre al pulsar «verlo entero» */
.capa-reel{
  position:fixed;inset:0;z-index:100;background:rgba(16,17,20,.92);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
}
.capa-reel iframe{width:min(100%,1200px);aspect-ratio:16/9;border:0;border-radius:10px}
.capa-reel .cerrar{
  position:absolute;top:1.1rem;right:1.2rem;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:0;color:#fff;font-size:1.1rem;cursor:pointer;
}
.capa-reel .cerrar:hover{background:var(--naranja);color:#2A1605}

/* EL AVISO DE IDIOMA
   Una barra abajo, discreta. No tapa el contenido ni pide permiso para nada:
   solo ofrece. Ver el porqué de no redirigir en idioma.js */
.aviso-idioma{
  position:fixed;left:50%;bottom:1.2rem;z-index:90;
  transform:translate(-50%,140%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  background:#1B1C1F;color:#F6F5F3;border:1px solid rgba(246,245,243,.16);
  padding:.85rem 1.1rem;border-radius:999px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-size:.9rem;max-width:calc(100% - 2rem);
}
.aviso-idioma.visible{transform:translate(-50%,0);opacity:1}
.aviso-idioma .ir{
  background:var(--naranja);color:#2A1605;font-weight:700;text-decoration:none;
  padding:.5rem 1.1rem;border-radius:999px;white-space:nowrap;
}
.aviso-idioma .ir:hover{background:var(--naranja-claro)}
.aviso-idioma .no{
  background:none;border:0;color:#B9B5AE;font:inherit;font-size:.85rem;
  cursor:pointer;text-decoration:underline;padding:.3rem;
}
.aviso-idioma .no:hover{color:#F6F5F3}
@media(max-width:560px){
  .aviso-idioma{left:1rem;right:1rem;transform:translateY(140%);border-radius:14px}
  .aviso-idioma.visible{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.aviso-idioma{transition:opacity .2s}}

:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ── el pie: firma de Shyn Design y acceso al panel ────────── */
.pie-shyn{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* La firma va con el LOGOTIPO, no con texto. Decidido el 17/08/2026 y
   aplicado a todas las webs. Es un PNG a propósito: el SVG pesa 105 KB
   porque lleva las tipografías dentro, y a tamaño de pie son 3 KB.
   Sin subrayado fijo: sale solo al pasar por encima. */
.pie-firma{
  grid-column: 2;
  text-align: center;
  color: inherit;
  opacity: .5;
  font-size: .76rem;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: opacity .2s;
}
.pie-firma:hover{ opacity: .85; }
.pie-by{ font-size: .74rem; opacity: .75; }
.pie-marca{
  height: 26px; width: auto; flex-shrink: 0; display: block;
  transition: transform .25s ease;
}
.pie-firma a:hover .pie-marca,
.pie-firma a:focus-visible .pie-marca{ transform: scale(1.07); }
.pie-firma a{ color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce){
  .pie-firma a, .pie-marca{ transition: none; }
}
.pie-panel{
  grid-column: 3;
  justify-self: end;
  color: inherit;
  opacity: .35;
  font-size: .75rem;
  letter-spacing: .04em;
  text-decoration: none;
}
.pie-panel:hover,
.pie-panel:focus-visible{ opacity: 1; text-decoration: underline; }
@media (max-width: 420px){
  .pie-shyn{ grid-template-columns: 1fr; gap: 8px; }
  .pie-firma{ grid-column: 1; }
  .pie-panel{ grid-column: 1; }
}