/* ══════════════════════════════════════════════════════════════
   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}
/* Subido de 60 a 76 px el 24/08: a 60 se veía pequeño y el nombre bajo el
   símbolo casi no se leía. La barra crece sola, no hay nada que recolocar. */
.barra .marca img{height:76px;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:58px}}

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}
  /* En el móvil se toca con el dedo, no con el ratón: 36x34 px se falla.
     44 es lo que piden Apple y las pautas de accesibilidad. El texto no
     cambia de tamaño, solo la zona sensible. */
  .idiomas a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;padding:.32rem .4rem;
  }
}

/* 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:
    /* ⚠️ Antes valía .34 al 58% del ancho, y ahí es justo donde termina el
       párrafo de entrada. Cuando el reel pasaba por un fotograma claro —la
       pared blanca de Colors English— el texto se perdía. Subidos los tramos
       centrales; del 82% en adelante se deja casi limpio, que es lo que
       aprobó Silvia: la sombra donde van las letras, el vídeo a la derecha. */
    linear-gradient(100deg,
      rgba(16,17,20,.92) 0%,
      rgba(16,17,20,.82) 40%,
      rgba(16,17,20,.58) 62%,
      rgba(16,17,20,.22) 85%,
      rgba(16,17,20,.06) 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}
/* La sombra del titular es la segunda red de seguridad: el velo se calcula para
   un fotograma cualquiera, pero el reel tiene planos muy claros. */
.portada h1{font-size:clamp(2.4rem,6.5vw,4.2rem);max-width:15ch;
  text-shadow:0 2px 20px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
/* 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:#EFEDE9;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.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}

/* ⚠️ 26/08/2026. Silvia: «me gustaría remarcar más las separaciones entre
   secciones». Y tenía razón: las bandas llevaban border-top:0, así que lo
   ÚNICO que separaba un bloque del siguiente era el cambio de color — y entre
   blanco y #EFEBE3 apenas se aprecia.

   No se añade una raya gruesa, que abarataría el conjunto. Se le pone a cada
   banda gris un filo arriba y abajo, y una sombra corta hacia dentro: el bloque
   parece hundido y el borde se lee solo. Es el mismo recurso que ya usa la
   portada con el velo, aplicado en pequeño. */
main > section.banda{
  box-shadow:
    inset 0  1px 0 rgba(43,44,46,.10),
    inset 0 -1px 0 rgba(43,44,46,.10),
    inset 0  18px 20px -20px rgba(43,44,46,.16),
    inset 0 -18px 20px -20px rgba(43,44,46,.10);
}
/* 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. */
/* ⚠️ El degradado empezaba transparente justo a la altura del título, y en los
   fotogramas con el fondo claro —Takkure, Yuropay— el nombre en blanco se
   perdía. Ahora oscurece antes y más, y además cada línea lleva su sombra:
   con 18 miniaturas distintas no vale confiar en que el fotograma sea oscuro. */
.video figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.55) 38%,rgba(0,0,0,.92));
  font-size:.92rem;text-align:left;pointer-events:none;color:#fff}
.video figcaption b{display:block;font-weight:600;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.video figcaption em{font-style:normal;color:rgba(255,255,255,.88);font-size:.84rem;
  text-shadow:0 1px 3px rgba(0,0,0,.85)}

/* 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. */
/* EL BLOQUE DE PRESUPUESTO
   ⚠️ 26/08/2026. Silvia: «que se diferencie más el bloque de presupuesto». Es
   la sección que convierte y se veía igual que las demás: una tarjeta blanca
   con borde gris sobre una sección blanca, o sea, invisible.

   Se separa con el naranja de marca, no inventando un color nuevo:
     · la sección entera pasa al naranja suave que ya usa el aviso de envío
     · la tarjeta se queda BLANCA, así destaca contra ese fondo
     · y lleva un filo naranja arriba, que es la señal de «aquí se actúa»
   En el ritmo de bandas queda: quien gris → presupuesto naranja → contacto
   oscuro. El bloque que importa es el único que no es ni blanco ni gris. */
main > section#presupuesto{
  background:var(--naranja-suave);
  box-shadow:
    inset 0  1px 0 rgba(230,125,33,.22),
    inset 0 -1px 0 rgba(230,125,33,.22),
    inset 0  18px 22px -20px rgba(230,125,33,.20);
}
.presupuesto{
  background:#fff;border:1px solid rgba(230,125,33,.22);border-radius:var(--radio);
  padding:2rem;display:grid;gap:1.5rem;position:relative;overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(43,44,46,.45);
}
.presupuesto::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--naranja);
}
.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)}
/* LA PLANTILLA DE GUION, PARA DESCARGAR
   ⚠️ Va DESPUÉS de enviar el cuestionario, nunca antes. Dos motivos:
     1. La regla de _base/boton-enviando.md, nacida en el check-in de Natur
        León: primero salen los datos, la descarga se ofrece al final. Si se
        ofrece antes, la gente se lleva el PDF y no manda nada.
     2. Así la plantilla no queda suelta en la web para que la copie cualquiera.
   El enlace lleva data-cuenta: sin medirlo no hay forma de saber si funciona. */
.plantilla{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;margin-top:1rem;padding:1.1rem 1.3rem;
  background:#fff;border:1px solid rgba(230,125,33,.32);
  border-radius:12px;
}
.plantilla-txt{max-width:52ch}
.plantilla-txt b{display:block;font-size:1.02rem;color:var(--hueso);margin-bottom:.25rem}
.plantilla-txt span{font-size:.92rem;color:var(--hueso-apagado);line-height:1.55}
.plantilla-btn{
  display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:var(--naranja);color:#2A1605;font-weight:600;font-size:.94rem;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:999px;
  transition:background .2s,transform .2s;white-space:nowrap;
}
.plantilla-btn em{font-style:normal;font-size:.78rem;opacity:.75;font-weight:500}
.plantilla-btn:hover{background:#F09846;transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.plantilla-btn{transition:none}}
@media(max-width:620px){
  .plantilla{flex-direction:column;align-items:stretch}
  .plantilla-btn{justify-content:center}
}

.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:.95rem 1.1rem;border-radius:0 8px 8px 0;
}
.tras-envio > p{margin: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)}

/* EL PIE
   ⚠️ Rehecho el 26/08/2026. Silvia: «el logo de Shyn en el footer enorme
   comparado con el de Magnet y hay espacio en blanco». Y era verdad: el logo
   del cliente medía 38x38 y la firma de Shyn 126x26 — tres veces más ancha
   que la marca del dueño de la web. Además el pie ocupaba 177 px en dos filas
   con la segunda medio vacía.

   Tres cosas cambiaron:
     1. El logo de Magnet sube a 56 px, para que se lea su nombre.
     2. La firma de Shyn baja a 16 px, la medida validada en Natur León, y
        pasa al PNG recortado de _base/firma/ (el que tenía llevaba medio
        lienzo vacío dentro: por eso se veía desproporcionada).
     3. Las dos filas se juntan en una: marca a la izquierda, enlaces en el
        medio, firma y «Acceso» a la derecha.

   Es solo para Magnet, por decisión suya: _base/pie-panel.html NO se toca. */
footer{padding:1.8rem 0;border-top:1px solid var(--linea);color:var(--hueso-apagado);font-size:.88rem}
footer .env{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 2.5rem;flex-wrap:wrap;
}
.pie-alto{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;
  margin-bottom:0;flex:1 1 auto}
.pie-alto img{height:56px;width:auto}
/* Centrados dentro de su hueco: si van pegados al logo, queda un claro grande
   entre ellos y la firma, que es parte del «espacio en blanco» que se veía. */
.pie-redes{display:flex;gap:1.2rem;font-size:.9rem;flex-wrap:wrap;margin-inline:auto}
.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 ────────── */
/* Ya no es una fila aparte centrada: va a la derecha, en la misma línea que
   todo lo demás. Por eso deja de ser rejilla de tres columnas. */
.pie-shyn{
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-shrink: 0;
}
/* 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{
  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: 16px; 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{
  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; }
/* En el móvil el pie se apila: marca y enlaces arriba, firma y «Acceso»
   debajo. Ya no hay rejilla que deshacer, solo dejar que envuelva. */
@media (max-width: 720px){
  footer .env{ align-items: flex-start; gap: 1.4rem; }
  .pie-alto{ flex-direction: column; align-items: flex-start; gap: .9rem; }
  .pie-shyn{ width: 100%; justify-content: space-between; }
}