/* Clic 24 · Cabecera · paleta «Nogal y latón» */
:root{
  --noche:#0A0D14; --noche-2:#141A24; --nogal-osc:#2A1B12; --nogal:#5A3A22;
  --laton:#C9A24A; --oro:#F3D58A; --texto:#F4EEE3; --tenue:rgba(244,238,227,.42); --wa:#25D366;
  --f-titular:"Fraunces", Georgia, serif; --f-texto:"Manrope", system-ui, sans-serif; --f-mono:"JetBrains Mono", ui-monospace, monospace;
  /* variables animadas por js/cabecera.js (0 → 1) */
  --p:0; --t1:1; --t2:0; --oro-a:0; --pista:1; --video-a:1;
  --alto-cine:300vh;
  /* Estado final del resplandor: la siguiente escena (faros del coche) arranca de este color */
  --resplandor:0; --resplandor-centro:#FFF4D6; --resplandor-oro:#F3D58A; --resplandor-borde:#E4C171;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--noche);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--texto);font-family:var(--f-texto);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

/* ---------- Barra superior ---------- */
.barra{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:60px;padding:0 clamp(1.1rem,3.4vw,3rem);
  background:linear-gradient(180deg,rgba(10,13,20,.72),rgba(10,13,20,.28));
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid rgba(201,162,74,.14)}
.barra__logo{display:flex;align-items:center;text-decoration:none}
.logo{display:block;height:34px;width:auto;overflow:visible;filter:drop-shadow(0 0 8px rgba(243,213,138,.22))}
.logo text{font-family:var(--f-titular)}
.barra__menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);font-size:.88rem;font-weight:600;letter-spacing:.02em}
.barra__menu a{text-decoration:none;opacity:.78;transition:opacity .25s,color .25s;position:relative}
.barra__menu a:not(.barra__llamar)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--laton);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.barra__menu a:hover{opacity:1;color:var(--oro)}
.barra__menu a:hover::after{transform:scaleX(1)}
.barra__llamar{opacity:1!important;display:inline-flex;align-items:center;gap:.5rem;padding:.48rem .95rem;border:1px solid rgba(201,162,74,.55);border-radius:99px;color:var(--oro)}
.barra__llamar:hover{background:rgba(201,162,74,.12)}
.punto{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:latido 2.2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Escena de scroll ---------- */
.cine{position:relative;height:var(--alto-cine);background:var(--noche)}
.cine__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noche);isolation:isolate}
.cine__poster,.cine__poster img,.cine__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.cine__poster{z-index:0}
.cine__poster img{transform:scale(calc(1.06 - var(--p) * .06));transform-origin:62% 50%}
.cine__video{z-index:1;opacity:var(--video-a);transform:scale(calc(1.06 - var(--p) * .06));transform-origin:62% 50%;will-change:transform}
.cine__capa{position:absolute;inset:0;pointer-events:none}
/* sombra lateral: refuerza el tercio izquierdo oscuro para el texto */
.cine__sombra{z-index:2;opacity:calc(1 - var(--oro-a) * .9);
  background:linear-gradient(90deg,rgba(10,13,20,.86) 0%,rgba(10,13,20,.55) 30%,rgba(10,13,20,0) 58%),
             linear-gradient(180deg,rgba(10,13,20,.5) 0%,rgba(10,13,20,0) 22%,rgba(10,13,20,0) 70%,rgba(10,13,20,.55) 100%)}
/* penumbra que tapa la ganzúa suelta (vídeo PC, seg. ~5,3–6,3, esquina inferior izquierda). --ganzua en js/cabecera.js */
.cine__ganzua{z-index:2;opacity:var(--ganzua,0);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(ellipse 46vw 58vh at 0% 100%,#000 0%,#000 55%,rgba(0,0,0,.6) 75%,transparent 100%);
          mask-image:radial-gradient(ellipse 46vw 58vh at 0% 100%,#000 0%,#000 55%,rgba(0,0,0,.6) 75%,transparent 100%);
  background:radial-gradient(ellipse 46vw 58vh at 0% 100%,rgba(8,10,16,.96) 0%,rgba(8,10,16,.93) 50%,rgba(8,10,16,.6) 72%,rgba(8,10,16,0) 100%)}
/* destello suave en la cerradura al ceder (--clic, js/cabecera.js): funde la salida de las manos del plano */
.cine__clic{z-index:3;opacity:var(--clic,0);mix-blend-mode:screen;
  background:radial-gradient(circle at var(--clic-x,53%) var(--clic-y,55%),rgba(255,244,214,.95) 0%,rgba(243,213,138,.75) 12%,rgba(201,162,74,.35) 30%,rgba(90,58,34,.08) 52%,rgba(10,13,20,0) 70%)}
/* resplandor dorado que llena la pantalla al abrirse la puerta (nace de la luz del propio vídeo) */
.cine__oro{z-index:3;opacity:var(--oro-a);mix-blend-mode:screen;
  background:radial-gradient(ellipse 75% 85% at 34% 40%,rgba(255,240,200,.95) 0%,rgba(243,213,138,.85) 26%,rgba(201,162,74,.55) 52%,rgba(90,58,34,.25) 78%,rgba(10,13,20,0) 100%)}
/* resplandor final: oro suave a pantalla completa. Su borde inferior es plano (--resplandor-borde)
   para empalmar sin corte con .cine__fundido, que lo lleva hasta la noche (#0A0D14). */
.cine__resplandor{z-index:4;opacity:var(--resplandor);
  background:
    linear-gradient(180deg,rgba(228,193,113,0) 62%,var(--resplandor-borde) 100%),
    radial-gradient(ellipse 90% 100% at 36% 40%,var(--resplandor-centro) 0%,var(--resplandor-oro) 42%,var(--resplandor-borde) 100%)}
.cine__grano{z-index:5;opacity:calc(.09 * (1 - var(--resplandor)));mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Texto ---------- */
.cine__texto{position:absolute;z-index:6;left:clamp(1.25rem,6vw,6.5rem);top:50%;transform:translateY(-46%);width:min(36rem,40vw)}
.kicker{margin:0 0 1.3rem;display:flex;align-items:center;gap:.8rem;font-family:var(--f-mono);font-weight:500;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laton);
  opacity:var(--t1);transform:translateY(calc((1 - var(--t1)) * -14px))}
.kicker__linea{width:34px;height:1px;background:linear-gradient(90deg,var(--laton),transparent)}
.titular{margin:0;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.6rem,5.4vw,5.4rem);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.titular__l{display:block;opacity:var(--t1);filter:blur(calc((1 - var(--t1)) * 8px));transform:translateY(calc((1 - var(--t1)) * -22px))}
.titular__l--oro{font-style:italic;font-weight:500;margin-top:.08em;
  background:linear-gradient(100deg,#B88D3A 0%,var(--oro) 38%,#FFF4D6 50%,var(--oro) 62%,#B88D3A 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 6s ease-in-out infinite}
@keyframes brillo{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.cine__segundo{margin-top:1.6rem;opacity:var(--t2);transform:translateY(calc((1 - var(--t2)) * 26px));filter:blur(calc((1 - var(--t2)) * 6px))}
.subtitulo{margin:0 0 1.7rem;max-width:30rem;font-size:clamp(1rem,1.2vw,1.14rem);color:rgba(244,238,227,.86)}
.botones{display:flex;flex-wrap:wrap;gap:.8rem}
.cine__segundo[data-oculto] .botones{pointer-events:none}

.boton{position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.45rem;border-radius:999px;text-decoration:none;font-weight:800;font-size:.95rem;letter-spacing:.01em;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,filter .3s}
.boton svg{width:18px;height:18px;flex:none}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(0) scale(.98)}
.boton--laton{color:#1A120A;background:linear-gradient(180deg,#F3D58A 0%,#C9A24A 55%,#A9822F 100%);box-shadow:0 10px 30px -8px rgba(243,213,138,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.boton--laton::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);transform:translateX(-120%);animation:barrido 4.5s 1.5s infinite}
@keyframes barrido{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.boton--laton:hover{box-shadow:0 16px 40px -8px rgba(243,213,138,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.boton--wa{color:#fff;background:var(--wa);box-shadow:0 10px 28px -10px rgba(37,211,102,.6)}
.boton--wa:hover{filter:brightness(1.06);box-shadow:0 16px 36px -10px rgba(37,211,102,.75)}
.boton .onda{position:absolute;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(255,255,255,.55);transform:scale(0);animation:onda .7s ease-out forwards;pointer-events:none}
@keyframes onda{to{transform:scale(28);opacity:0}}
.js-boton:focus-visible,.barra a:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- Pista de scroll ---------- */
.pista{position:absolute;z-index:6;left:50%;bottom:clamp(1.2rem,4vh,2.4rem);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;opacity:var(--pista);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,238,227,.7)}
.pista__riel{position:relative;width:1px;height:58px;background:linear-gradient(180deg,rgba(201,162,74,0),rgba(201,162,74,.7),rgba(201,162,74,0))}
.pista__llave{position:absolute;left:50%;top:0;width:12px;height:30px;margin-left:-6px;color:var(--oro);filter:drop-shadow(0 0 6px rgba(243,213,138,.7));animation:llave 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes llave{0%{transform:translateY(-8px);opacity:0}25%{opacity:1}70%{transform:translateY(34px);opacity:1}100%{transform:translateY(40px);opacity:0}}

/* ---------- Símbolo del hero: «clic» cuando cede la cerradura ---------- */
.sello{display:block;width:58px;height:58px;margin:0 0 1.1rem -4px;overflow:visible;opacity:var(--t1);
  filter:drop-shadow(0 0 10px rgba(243,213,138,.25));transition:filter .5s}
.sello__bocallave{transform-box:view-box;transform-origin:24px 24px}
.sello__chispa{opacity:.35;transform-box:view-box;transform-origin:24px 24px;transition:opacity .4s}
.sello__destello{opacity:0;transform-box:view-box;transform-origin:24px 24px}
.clic .sello{filter:drop-shadow(0 0 16px rgba(243,213,138,.75))}
.clic .sello__bocallave{animation:giro .7s cubic-bezier(.3,1.6,.4,1) both}
.clic .sello__chispa{opacity:1;animation:chispa .6s ease-out both}
.clic .sello__destello{animation:destello .8s ease-out both}
@keyframes giro{0%{transform:rotate(0)}45%{transform:rotate(-24deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
@keyframes chispa{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes destello{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}

/* ---------- Fundido: del resplandor a la noche, sin corte ---------- */
.cine__fundido{height:70vh;margin-top:-1px;pointer-events:none;
  background:linear-gradient(180deg,var(--resplandor-borde) 0%,#D9B25F 8%,#B98C45 20%,#8A6233 33%,#5A3A22 47%,#33231A 61%,#1A1A1E 76%,#0E1118 89%,#0A0D14 100%)}


/* ---------- Móvil ---------- */
@media (max-width:760px){
  .cine__ganzua{display:none}
  :root{--alto-cine:220vh}
  .barra{height:54px}
  .barra__logo{font-size:.98rem}
  .barra__menu a:not(.barra__llamar){display:none}
  .barra__llamar{padding:.4rem .8rem;font-size:.82rem}
  .cine__poster,.cine__poster img,.cine__video{object-position:50% 50%}
  .cine__video,.cine__poster img{transform-origin:50% 50%}
  .cine__clic{--clic-x:76%;--clic-y:45%}
  .cine__sombra{background:linear-gradient(180deg,rgba(10,13,20,.6) 0%,rgba(10,13,20,0) 22%,rgba(10,13,20,.1) 40%,rgba(10,13,20,.78) 66%,rgba(10,13,20,.94) 100%)}
  .cine__oro{background:radial-gradient(ellipse 100% 70% at 40% 34%,rgba(255,240,200,.95) 0%,rgba(243,213,138,.85) 28%,rgba(201,162,74,.5) 55%,rgba(90,58,34,.2) 80%,rgba(10,13,20,0) 100%)}
  .cine__texto{left:1.25rem;right:1.25rem;width:auto;top:auto;bottom:max(6.2rem,calc(env(safe-area-inset-bottom) + 5.6rem));transform:none}
  .kicker{font-size:.68rem;margin-bottom:.9rem}
  .titular{font-size:clamp(2.3rem,10.6vw,3.1rem)}
  .cine__segundo{margin-top:1.1rem}
  .subtitulo{font-size:.98rem;margin-bottom:1.2rem}
  .botones{flex-direction:column;gap:.6rem}
  .boton{justify-content:center;padding:.9rem 1.2rem}
  .pista{bottom:1.1rem}
  .logo{height:28px}
  .sello{width:44px;height:44px;margin-bottom:.8rem}
  .cine__resplandor{background:linear-gradient(180deg,rgba(228,193,113,0) 62%,var(--resplandor-borde) 100%),radial-gradient(ellipse 120% 80% at 42% 36%,var(--resplandor-centro) 0%,var(--resplandor-oro) 42%,var(--resplandor-borde) 100%)}
  .cine__fundido{height:55vh}
}

/* ---------- Movimiento reducido: póster + texto, sin scroll ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--alto-cine:100vh;--t1:1;--t2:1;--oro-a:0;--resplandor:0;--pista:0;--p:0}
  .cine__video,.cine__ganzua{display:none}
  .cine__pin{position:relative}
  .cine__pin::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:4;background:linear-gradient(180deg,rgba(228,193,113,0),rgba(228,193,113,.35) 45%,var(--resplandor-borde))}
  .sello__chispa{opacity:1}
  .pista{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =====================================================================
   PARTE DOS · Escena de coches (js/coche.js)
   Arranca del oro final de la cabecera (--resplandor-borde) y termina en la caja fuerte
   fundida a la noche. Variables animadas por js/coche.js (0 → 1): --c-k, --c-t, --c-vin, --vx, --vy
   ===================================================================== */
/* puerta → coche (31/10/2026): relevo EN EL SITIO, como coche → caja (punto 2). .coche se superpone al final de .cine
   (margin-top: -100vh − 14 % del recorrido de la cabecera) y su pin aparece de golpe (.activa, js/coche.js) cuando la
   cabecera llega a p = 0.86 (fin del vídeo, resplandor ya completo), sin esperar a que el pin de la cabecera se suelte:
   arranca con el MISMO resplandor de la cabecera (::before = .cine__resplandor), así que no se ve ninguna sección subir ni borde. */
.coche{position:relative;z-index:1;height:var(--alto-coche,320vh);margin-top:calc(-100vh - (var(--alto-cine) - 100vh) * .14);margin-top:calc(-100svh - (var(--alto-cine) - 100vh) * .14);pointer-events:none;--c-k:0;--c-t:0;--c-vin:0;--vx:20%;--vy:50%}
.coche__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noche);isolation:isolate;opacity:0;visibility:hidden}
.coche.activa .coche__pin{opacity:1;visibility:visible;pointer-events:auto}
.coche__capa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* el oro de arranque: mismo color con que acaba la cabecera, por si el canvas aún no ha pintado */
.coche__pin::before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--c-oro0,1);
  background:
    linear-gradient(180deg,rgba(228,193,113,0) 62%,var(--resplandor-borde) 100%),
    radial-gradient(ellipse 90% 100% at 36% 40%,var(--resplandor-centro) 0%,var(--resplandor-oro) 42%,var(--resplandor-borde) 100%)}
/* tres planos con el mismo encuadre (js/coche.js): fotograma 0 → vídeo → último fotograma */
.coche__inicio-marco{z-index:1}
.coche__fin-marco{z-index:3;opacity:0}
.coche__plano{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0;will-change:transform,opacity}
.coche__video{z-index:2}
.coche__sombra{z-index:4;opacity:max(var(--c-k),var(--c-t));
  background:linear-gradient(0deg,rgba(10,13,20,.88) 0%,rgba(10,13,20,.55) 30%,rgba(10,13,20,0) 55%),
             linear-gradient(90deg,rgba(10,13,20,.6) 0%,rgba(10,13,20,0) 45%)}
.coche__luz{z-index:5;mix-blend-mode:screen}
/* viñeta noche alrededor del punto de luz: lleva la mirada al faro */
.coche__vineta{z-index:4;opacity:var(--c-vin);
  background:radial-gradient(ellipse 70% 75% at var(--vx) var(--vy),rgba(10,13,20,0) 30%,rgba(10,13,20,.55) 62%,rgba(10,13,20,.95) 100%)}
/* punto 2: la caja queda BAJO la luz (z 5): el resplandor la cubre y se disipa revelándola, sin agujero oscuro */
.coche__caja{z-index:4;object-fit:cover;object-position:60% 50%;opacity:0;will-change:transform,filter}
.coche__grano{z-index:8;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* textos en el tercio izquierdo oscuro, abajo (el faro queda por encima) */
.coche__texto{position:absolute;z-index:9;left:clamp(1.25rem,6vw,6.5rem);bottom:clamp(3rem,11vh,7rem);width:min(34rem,38vw)}
.coche .coche__kicker{opacity:var(--c-k);transform:translateY(calc((1 - var(--c-k)) * 14px));filter:blur(calc((1 - var(--c-k)) * 4px));margin-bottom:1rem}
.coche__bloque{opacity:var(--c-t);transform:translateY(calc((1 - var(--c-t)) * 24px));filter:blur(calc((1 - var(--c-t)) * 8px))}
.coche__titular{margin:0;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance;color:var(--texto)}
.coche__titular-oro{display:block;font-style:italic;font-weight:500;margin-top:.08em;
  background:linear-gradient(100deg,#B88D3A 0%,var(--oro) 38%,#FFF4D6 50%,var(--oro) 62%,#B88D3A 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 6s ease-in-out infinite}
.coche__linea{margin:1.1rem 0 0;max-width:28rem;font-size:clamp(1rem,1.15vw,1.12rem);color:rgba(244,238,227,.86)}

@media (max-width:760px){
  .coche{--alto-coche:285vh}
  .coche__pin::before{background:linear-gradient(180deg,rgba(228,193,113,0) 62%,var(--resplandor-borde) 100%),radial-gradient(ellipse 120% 80% at 42% 36%,var(--resplandor-centro) 0%,var(--resplandor-oro) 42%,var(--resplandor-borde) 100%)}
  .coche__texto{left:1.25rem;right:1.25rem;width:auto;bottom:max(3.2rem,calc(env(safe-area-inset-bottom) + 2.6rem))}
  .coche__titular{font-size:clamp(2.1rem,9.6vw,2.8rem)}
  .coche__linea{font-size:.98rem}
  .coche__caja{object-position:62% 50%}
}

/* Movimiento reducido: imágenes fijas + textos, unidas por degradados */
@media (prefers-reduced-motion:reduce){
  .coche{height:auto;margin-top:0;pointer-events:auto}
  .coche__pin{position:relative;opacity:1;visibility:visible;--c-k:1;--c-t:1;
    background:linear-gradient(180deg,var(--resplandor-borde) 0%,rgba(228,193,113,.35) 14%,rgba(10,13,20,0) 32%),url("../img/coche/coche-faros.webp") 60% 50%/cover no-repeat,var(--noche)}
  .coche__pin::before,.coche__inicio-marco,.coche__fin-marco,.coche__video,.coche__luz,.coche__vineta,.coche__caja{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .coche__pin{background:linear-gradient(180deg,var(--resplandor-borde) 0%,rgba(228,193,113,.35) 14%,rgba(10,13,20,0) 32%),url("../img/coche/coche-faros-movil.webp") 64% 50%/cover no-repeat,var(--noche)}
}

/* =====================================================================
   PARTE TRES · Cajas fuertes (js/caja.js)
   Se superpone al final de .coche (margin-top:-100vh) y aparece cuando .coche suelta su pin:
   mismo fotograma de la caja, así que el relevo no se ve. Termina en #0A0D14 (.fin-caja).
   Variables animadas (0 → 1): --k-k, --k-t, --k-l, --k-anillo, --k-giro (deg), --k-clave
   ===================================================================== */
.caja{position:relative;z-index:1;height:var(--alto-caja,250vh);margin-top:-100vh;margin-top:-100svh;pointer-events:none;
  --k-k:0;--k-t:0;--k-l:0;--k-anillo:0;--k-giro:0deg;--k-clave:0;--gx:80%;--gy:50%;--ix:72%;--iy:48%}
.caja__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noche);isolation:isolate;opacity:0;visibility:hidden}
/* punto 2: relevo instantáneo (mismo fotograma que el final de .coche); un fundido dejaba ver el borde del pin del coche al subir (línea horizontal) */
.caja.activa .caja__pin{opacity:1;visibility:visible;pointer-events:auto}
.caja__capa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.caja__still,.caja__video{object-fit:cover;object-position:60% 50%;transform-origin:50% 50%;will-change:transform,filter}
.caja__still{z-index:0}
.caja__video{z-index:1;transition:opacity .4s ease}  /* punto 3: js/caja.js lo muestra (opacity) cuando el primer fotograma está listo */
.caja__sombra{z-index:2;opacity:max(var(--k-k),var(--k-t));
  background:linear-gradient(90deg,rgba(10,13,20,.82) 0%,rgba(10,13,20,.5) 28%,rgba(10,13,20,0) 52%),
             linear-gradient(0deg,rgba(10,13,20,.55) 0%,rgba(10,13,20,0) 30%)}
.caja__luz{z-index:3;mix-blend-mode:screen}
/* velo de luz opaco: tapa el salto del vídeo (puerta cerrada → abierta) */
.caja__velo{z-index:4;opacity:0;
  background:radial-gradient(ellipse 60% 75% at var(--gx) var(--gy),#FFF4D6 0%,#F3D58A 38%,#E4C171 70%,#C9A24A 100%)}
/* luz interior de la caja que llena la pantalla al final */
.caja__oro{z-index:5;opacity:0;
  background:radial-gradient(ellipse 70% 80% at var(--ix) var(--iy),#FFF4D6 0%,#F3D58A 30%,#C9A24A 62%,#6E4E22 100%)}
.caja__noche{z-index:6;opacity:0;background:var(--noche)}
.caja__grano{z-index:7;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* anillo de latón: medio fuera de pantalla a la izquierda, detrás del texto */
.caja__anillo{position:absolute;z-index:8;width:min(86vh,780px);height:min(86vh,780px);left:calc(min(86vh,780px) * -.5 + 4vw);top:50%;
  transform:translateY(-50%) scale(calc(.94 + var(--k-anillo) * .06));opacity:calc(var(--k-anillo) * .55);overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(243,213,138,.25))}
.caja__anillo-giro{transform:rotate(var(--k-giro));transform-origin:0 0}
.caja__anillo .t{stroke:#C9A24A;stroke-width:.35;stroke-linecap:round}
.caja__anillo .t--m{stroke:#F3D58A;stroke-width:.6}
.caja__anillo .n{fill:#C9A24A;font-family:var(--f-mono);font-size:5.2px;letter-spacing:.06em;text-anchor:middle;dominant-baseline:middle}
.caja__anillo .c{fill:none;stroke:rgba(201,162,74,.55);stroke-width:.3}
.caja__indice{fill:#F3D58A}

.caja__texto{position:absolute;z-index:9;left:clamp(1.25rem,6vw,6.5rem);top:50%;transform:translateY(-46%);width:min(34rem,38vw)}
.caja .caja__kicker{opacity:var(--k-k);transform:translateY(calc((1 - var(--k-k)) * 14px));filter:blur(calc((1 - var(--k-k)) * 4px));margin-bottom:1rem}
.caja__titular{margin:0;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance;color:var(--texto);
  opacity:var(--k-t);transform:translateY(calc((1 - var(--k-t)) * 24px));filter:blur(calc((1 - var(--k-t)) * 8px))}
.caja__t1{display:inline-block}
.caja__titular-oro{display:block;font-style:italic;font-weight:500;margin-top:.08em;
  background:linear-gradient(100deg,#B88D3A 0%,var(--oro) 38%,#FFF4D6 50%,var(--oro) 62%,#B88D3A 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 6s ease-in-out infinite}
.caja__linea{margin:1.1rem 0 0;max-width:28rem;font-size:clamp(1rem,1.15vw,1.12rem);color:rgba(244,238,227,.86);
  opacity:var(--k-l);transform:translateY(calc((1 - var(--k-l)) * 18px));filter:blur(calc((1 - var(--k-l)) * 6px))}
/* combinación: cada número se enciende al avanzar la rueda */
.caja__clave{margin:1.5rem 0 0;display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.2em;color:rgba(201,162,74,.38);opacity:var(--k-l)}
.caja__clave i{width:18px;height:1px;background:rgba(201,162,74,.35)}
.caja__clave span{transition:color .4s,text-shadow .4s}
.caja__clave span.on{color:#F3D58A;text-shadow:0 0 10px rgba(243,213,138,.6)}
.caja__abierta-estatica{display:none}

@media (max-width:760px){
  .caja{--alto-caja:230vh}
  .caja__still,.caja__video{object-position:62% 50%}
  .caja__sombra{background:linear-gradient(0deg,rgba(10,13,20,.92) 0%,rgba(10,13,20,.7) 30%,rgba(10,13,20,0) 58%)}
  .caja__texto{left:1.25rem;right:1.25rem;width:auto;top:auto;transform:none;bottom:max(3.2rem,calc(env(safe-area-inset-bottom) + 2.6rem))}
  .caja__titular{font-size:clamp(2.1rem,9.6vw,2.8rem)}
  .caja__linea{font-size:.98rem}
  .caja__anillo{width:120vw;height:120vw;left:-60vw;top:auto;bottom:-14vw;transform:scale(calc(.94 + var(--k-anillo) * .06));opacity:calc(var(--k-anillo) * .4)}
}

/* Movimiento reducido: la caja cerrada con los textos y, debajo, la caja abierta fundida a la noche */
@media (prefers-reduced-motion:reduce){
  .caja{height:auto;margin-top:0;pointer-events:auto}
  .caja__pin{position:relative;opacity:1;visibility:visible;--k-k:1;--k-t:1;--k-l:1;--k-anillo:0;
    background:linear-gradient(180deg,#0A0D14 0%,rgba(10,13,20,0) 26%),url("../img/caja/caja-inicio.webp") 60% 50%/cover no-repeat,var(--noche)}
  .caja__still,.caja__video,.caja__luz,.caja__velo,.caja__oro,.caja__noche,.caja__anillo{display:none}
  .caja__abierta-estatica{display:block;height:85vh;
    background:linear-gradient(180deg,#0A0D14 0%,rgba(10,13,20,0) 22%,rgba(10,13,20,0) 50%,rgba(201,162,74,.25) 72%,#0A0D14 100%),url("../img/caja/caja-abierta.webp") 72% 50%/cover no-repeat,var(--noche)}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .caja__abierta-estatica{background:linear-gradient(180deg,#0A0D14 0%,rgba(10,13,20,0) 22%,rgba(10,13,20,0) 50%,rgba(201,162,74,.25) 72%,#0A0D14 100%),url("../img/caja/caja-abierta-movil.webp") 74% 50%/cover no-repeat,var(--noche)}
}

/* =====================================================================
   PARTE CUATRO · Tarjetas: cerraduras, seguridad y copias (js/tarjetas.js)
   Se superpone al final de .caja (margin-top negativo) y nace de su luz dorada. Sin fondo propio.
   PC: escena fijada (sticky) con tres tarjetas en fila. Móvil: pila, sin pin (solo la luz acompaña).
   Variables por tarjeta (js): --e (entrada 0 → 1), --x (salida 0 → 1)
   ===================================================================== */
.tarjetas{position:relative;z-index:2;overflow-x:clip;height:240vh;margin-top:-115vh;pointer-events:none}
.tarjetas__luz{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;pointer-events:none}
/* oro a pantalla completa: el mismo de .caja__oro, encima de él; luego se retira */
.tarjetas__oro{--rt:0;position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 80% 90% at var(--ix,72%) var(--iy,48%),#FFF4D6 0%,#F7E2A6 30%,#F3D58A 58%,#E4C171 100%);
  /* al retirarse se recoge hacia el punto de luz (borde blando), sin pasar por un velo marrón a media opacidad */
  -webkit-mask-image:radial-gradient(ellipse calc(170% - var(--rt) * 135%) calc(170% - var(--rt) * 125%) at var(--ix,72%) var(--iy,48%),#000 calc(62% - var(--rt) * 50%),transparent 100%);
          mask-image:radial-gradient(ellipse calc(170% - var(--rt) * 135%) calc(170% - var(--rt) * 125%) at var(--ix,72%) var(--iy,48%),#000 calc(62% - var(--rt) * 50%),transparent 100%)}
/* halo: blando, sin borde; se recoge desde toda la pantalla hasta quedarse detrás de las tarjetas */
.tarjetas__halo{position:absolute;left:50%;top:50%;width:min(1500px,118vw);height:min(1000px,96vh);margin:calc(min(1000px,96vh) * -.5) 0 0 calc(min(1500px,118vw) * -.5);opacity:0;
  background:radial-gradient(closest-side,rgba(255,240,200,.62) 0%,rgba(243,213,138,.42) 20%,rgba(201,162,74,.24) 42%,rgba(138,100,40,.1) 66%,rgba(90,58,34,.035) 84%,rgba(10,13,20,0) 100%);
  will-change:transform,opacity}

.tarjetas__escena{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px clamp(1.25rem,5vw,5rem) 0}
.tarjetas .tarjetas__kicker{justify-content:center;margin-bottom:2.2rem;opacity:var(--e,1);transform:translateY(calc((1 - var(--e,1)) * 14px))}
.kicker__linea--der{background:linear-gradient(270deg,var(--laton),transparent)}

/* ---- Panel de llaves (recursos: img/panel-llaves/, README de Pixel) ----
   Todo se dibuja en px de diseño (tablero 1240 × 660, ganchos cada 360 px) y se escala con --s (lo calcula js/tarjetas.js
   según la ventana). Por estación: --e (encendido 0 → 1, js), --x (salida 0 → 1, js). Panel: --pe (entrada), --px (salida).
   Solo se animan transform y opacity; los filtros son fijos. */
.panel{--s:1;--pe:1;--px:0;position:relative;flex:none;width:calc(1240px * var(--s));height:calc(660px * var(--s))}
.panel__tablero{position:absolute;left:0;top:0;width:1240px;height:660px;transform:scale(var(--s));transform-origin:0 0;border-radius:14px;overflow:hidden;
  background:url("../img/panel-llaves/panel-nogal.svg") center/100% 100% no-repeat,#2A1B12;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(243,213,138,.14),inset 0 0 0 10px rgba(0,0,0,.18),inset 0 0 120px rgba(0,0,0,.55);
  opacity:calc(var(--pe) * (1 - var(--px)));will-change:transform,opacity}
/* luz cálida del flexo desde arriba, fija */
.panel__tablero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 380px at 50% -6%,rgba(243,213,138,.16),transparent 70%)}
.tarjetas__lista{list-style:none;margin:0;padding:0;position:absolute;inset:0}

/* estación = gancho + llave + etiqueta; el li se coloca en el gancho (80 × 120) */
.tarjeta{--e:1;--x:0;opacity:calc(1 - var(--x));transform:scale(calc(1 - var(--x) * .1));transform-origin:40px 240px;will-change:transform,opacity}
.estacion{position:absolute;top:44px;width:80px;height:600px;outline:none;pointer-events:none}
.estacion:nth-child(1){left:262px;--r0:1.5deg;--t0:-7deg}
.estacion:nth-child(2){left:622px;--r0:-1deg;--t0:-4deg}
.estacion:nth-child(3){left:982px;--r0:.8deg;--t0:-6deg}
.panel.activa .estacion{pointer-events:auto}
.estacion__marco{position:absolute;left:0;top:0;width:80px;height:600px}
/* halo del flexo detrás de cada llave: se enciende con --e */
.estacion__halo{position:absolute;left:-170px;top:-84px;width:420px;height:560px;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(243,213,138,.24),rgba(201,162,74,.09) 55%,transparent);opacity:var(--e)}
.estacion__gancho{position:absolute;left:0;top:0;width:80px;height:120px;z-index:1;filter:drop-shadow(3px 6px 4px rgba(0,0,0,.6))}
/* copia delantera del gancho: la punta queda por delante de la anilla */
.estacion__gancho--frente{z-index:3;filter:none;clip-path:inset(56% 14% 22% 62%)}
.estacion__llave{position:absolute;left:-41px;top:54px;width:180px;height:468px;z-index:2;transform-origin:90px 63px;transform:rotate(var(--r0))}
.estacion__llave img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(10px 16px 9px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(243,213,138,.12))}
/* apagado: sombra con la silueta exacta de la llave (máscara = el propio SVG) que se retira al encenderse */
.estacion__sombra,.etiqueta__sombra{position:absolute;inset:0;pointer-events:none;background:#0B0806;
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.estacion__sombra{opacity:calc(.66 * (1 - var(--e)))}
.estacion:nth-child(1) .estacion__sombra{--m:url("../img/panel-llaves/llave-1.svg")}
.estacion:nth-child(2) .estacion__sombra{--m:url("../img/panel-llaves/llave-2.svg")}
.estacion:nth-child(3) .estacion__sombra{--m:url("../img/panel-llaves/llave-3.svg")}

/* etiqueta de cartón (184 × 345 = 1,15 × viewBox): dos caras en HTML; gira desde el extremo del cordel */
.etiqueta{--tag:1;position:absolute;left:40px;top:121px;width:184px;height:345px;z-index:4;transform-origin:92px 2px;transform-style:preserve-3d;
  transform:perspective(1100px) rotate(var(--t0)) rotateY(0deg) scale(var(--tag));transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.etiqueta__cara{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.etiqueta__cara--dorso{transform:rotateY(180deg)}
.etiqueta__carton{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(8px 12px 8px rgba(0,0,0,.55))}
.etiqueta__sombra{--m:url("../img/panel-llaves/etiqueta.svg");opacity:calc(.6 * (1 - var(--e)))}
.etiqueta__texto{position:absolute;left:22px;right:22px;top:116px;bottom:24px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#3A2614}
.etiqueta__num{font:500 11px/1 var(--f-mono);letter-spacing:.24em;color:#6B4A2A;padding-left:.24em}
.etiqueta__raya{width:34px;height:1px;background:#6B4A2A;opacity:.6;margin:14px auto 16px}
.etiqueta__nombre{font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 72;font-size:25px;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.etiqueta .tarjeta__titulo{margin:12px 0 9px;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 48;font-size:19px;line-height:1.08;letter-spacing:-.01em;color:#3A2614;text-wrap:balance}
.etiqueta .tarjeta__texto{margin:0;font-size:12.5px;line-height:1.46;color:#3A2614;text-wrap:pretty}

/* ratón: la llave se balancea y la etiqueta se da la vuelta (también con el teclado) */
@keyframes vaiven{0%{transform:rotate(var(--r0))}25%{transform:rotate(calc(var(--r0) + 4deg))}50%{transform:rotate(calc(var(--r0) - 3deg))}
  75%{transform:rotate(calc(var(--r0) + 1.5deg))}100%{transform:rotate(var(--r0))}}
@media (hover:hover) and (pointer:fine){
  .estacion:hover .estacion__llave{animation:vaiven 1.2s ease-out}
  .estacion:hover .etiqueta{transform:perspective(1100px) rotate(-1.5deg) rotateY(180deg) scale(var(--tag))}
}
.estacion:focus-visible .estacion__llave{animation:vaiven 1.2s ease-out}
.estacion:focus-visible .etiqueta{transform:perspective(1100px) rotate(-1.5deg) rotateY(180deg) scale(var(--tag))}
.estacion:focus-visible .etiqueta__carton{filter:drop-shadow(0 0 2px #F3D58A) drop-shadow(8px 12px 8px rgba(0,0,0,.55))}
/* táctil: sin hover, la etiqueta ya enseña el dorso (nombre + texto) */
@media (hover:none),(pointer:coarse){
  .etiqueta__cara--frente{display:none}
  .etiqueta__cara--dorso{transform:none}
  .estacion:focus-visible .etiqueta{transform:perspective(1100px) rotate(var(--t0)) scale(var(--tag))}
}

/* tablet vertical: el tablero se estrecha; la etiqueta crece para que el texto se lea (cabe entre ganchos) */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .etiqueta{--tag:1.34}
  .estacion:nth-child(n){--t0:-3deg}
}

@media (max-width:760px){
  .tarjetas{height:auto;margin-top:-113vh;padding:0 0 22vh}
  .tarjetas__escena{position:relative;height:auto;display:block;padding:0 1rem;margin-top:125vh}
  .tarjetas .tarjetas__kicker{margin-bottom:1.6rem}
  .tarjetas__halo{width:150vw;height:80vh;margin:-40vh 0 0 -75vw}
  /* un tablero largo, una llave por fila (sin escalar el tablero: se escala cada estación con --s) */
  .panel{width:auto;height:auto}
  .panel__tablero{position:relative;width:auto;height:auto;transform:none;padding:18px 0 6px;border-radius:12px;
    background:radial-gradient(120% 22% at 50% 0,rgba(243,213,138,.1),transparent 70%),
      repeating-linear-gradient(178deg,rgba(90,58,34,0) 0 9px,rgba(90,58,34,.18) 10px 11px,rgba(0,0,0,0) 12px 23px),
      linear-gradient(180deg,#2E1D12,#2A1B12 50%,#1F140C)}
  .panel__tablero::before{display:none}
  .tarjetas__lista{position:relative;inset:auto}
  .estacion,.estacion:nth-child(n){position:relative;left:auto;top:auto;width:auto;height:calc(540px * var(--s));pointer-events:auto}
  .estacion:nth-child(n){--t0:-3deg}
  .tarjeta{transform-origin:50% 35%}
  .estacion__marco{left:calc(50% - 92px * var(--s));top:0;transform:scale(var(--s));transform-origin:0 0}
}

/* Movimiento reducido: sin pin ni superposición; tablero quieto, llaves encendidas y etiquetas por el dorso */
@media (prefers-reduced-motion:reduce){
  .tarjetas{height:auto;margin-top:0;padding:14vh 0 18vh}
  .tarjetas__luz{position:absolute;inset:0;height:auto;margin:0}
  .tarjetas__halo{opacity:.55}
  .tarjetas__oro{display:none}
  .tarjetas__escena{position:relative;height:auto;margin-top:0}
  .estacion,.estacion:nth-child(n){pointer-events:auto}
  .estacion__llave,.estacion:hover .estacion__llave,.estacion:focus-visible .estacion__llave{animation:none}
  .etiqueta,.estacion:hover .etiqueta,.estacion:focus-visible .etiqueta{transition:none;transform:rotate(var(--t0)) scale(var(--tag))}
  .etiqueta__cara--frente{display:none}
  .etiqueta__cara--dorso{transform:none}
}

/* =====================================================================
   PARTE CINCO · Bloque de confianza #como-trabajamos (js/mapa-cuenca.js + js/confianza.js)
   Mapa real de Cuenca (OSM) en latón al ~20 %, sobre la noche continua (sin fondo propio).
   PC: 235 vh con escena fijada; se superpone al final de .tarjetas y recoge su halo (.confianza__foco),
       que baja hasta ser la luz de la llave. Al llegar: giro de 90°, destello y «¡Hemos llegado!»;
       el destello se abre en un resplandor cálido (.confianza__calor, idea --bg-warm).
   Móvil: mapa cuadrado arriba, ruta más corta, sin pin; la animación (3,6 s) arranca al entrar en pantalla.
   Variables (js): --ek, --et, --ep, --eb, --eg (entrada de cada bloque de texto 0 → 1); en .mapa: --u (metros por píxel)
   ===================================================================== */
.confianza{position:relative;z-index:3;overflow-x:clip;height:235vh;margin-top:-105vh;pointer-events:none}
.confianza__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.confianza__luz{position:absolute;inset:0;pointer-events:none}
.confianza__foco{position:absolute;left:0;top:0;width:1200px;height:800px;margin:-400px 0 0 -600px;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(255,240,200,.62) 0%,rgba(243,213,138,.42) 20%,rgba(201,162,74,.24) 42%,rgba(138,100,40,.1) 66%,rgba(90,58,34,.035) 84%,rgba(10,13,20,0) 100%)}
.confianza__calor{position:absolute;left:0;top:0;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:0;transform:scale(.02);will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(255,238,196,.5) 0%,rgba(243,213,138,.3) 14%,rgba(201,162,74,.17) 34%,rgba(122,82,40,.1) 58%,rgba(70,44,26,.05) 80%,rgba(10,13,20,0) 100%)}

/* mapa */
.confianza__mapa{position:absolute;inset:0;margin:0}
/* punto 5: velo de salida hacia «Partes resueltos»: al soltar el pin el borde inferior del mapa se funde con la noche (js/confianza.js) */
.confianza__velo{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:3;pointer-events:none;opacity:0;will-change:opacity;
  background:linear-gradient(180deg,rgba(10,13,20,0) 0%,rgba(10,13,20,.55) 45%,var(--noche) 92%)}
.mapa{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;--u:1;
  -webkit-mask-image:radial-gradient(ellipse var(--mw,46%) var(--mh,62%) at var(--mx,68%) var(--my,52%),#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:radial-gradient(ellipse var(--mw,46%) var(--mh,62%) at var(--mx,68%) var(--my,52%),#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
.mapa path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mapa__base{opacity:var(--em,0)}
.mapa__mayor{stroke:var(--laton);stroke-width:calc(var(--u) * 1.5px);opacity:.42}
.mapa__menor{stroke:var(--laton);stroke-width:calc(var(--u) * .9px);opacity:.25}
.mapa__senda{stroke:var(--laton);stroke-width:calc(var(--u) * .6px);opacity:.12}
.mapa__cortado{stroke:#D8C79A;stroke-width:calc(var(--u) * 1.1px);stroke-dasharray:calc(var(--u) * .5px) calc(var(--u) * 4px);opacity:.28}
.mapa__rio-cauce{stroke:#6F8DAA;stroke-width:calc(var(--u) * 11px);opacity:.1}
.mapa__rio{stroke:#8FA9C2;stroke-width:calc(var(--u) * 1.5px);opacity:.42}
.mapa__agua{stroke:#8FA9C2;stroke-width:calc(var(--u) * .8px);opacity:.22}
.mapa__guia{stroke:none}
.mapa__rotulo-rio{font-family:var(--f-titular);font-style:italic;font-weight:500;font-size:calc(var(--u) * 13px);letter-spacing:.08em;fill:#A9BCCF;opacity:.8}
.mapa__zona{opacity:calc(var(--ez,0) * 1)}
.mapa__zona-borde{stroke:var(--laton);stroke-width:calc(var(--u) * 1px);stroke-dasharray:calc(var(--u) * 2px) calc(var(--u) * 7px);opacity:calc(var(--ez,0) * .35);fill:none}
.mapa__plan{stroke:var(--oro);stroke-width:calc(var(--u) * 1.6px);stroke-dasharray:calc(var(--u) * .5px) calc(var(--u) * 6px);opacity:calc(var(--ez,0) * .45)}
.mapa__ruta{stroke:var(--oro);stroke-width:calc(var(--u) * 3.2px)}
.mapa__ruta-brillo{stroke:#F3D58A;stroke-width:calc(var(--u) * 13px);opacity:.16}

/* capa en píxeles: llave, marcas, destello, rótulos */
.mapa__capa{position:absolute;inset:0;pointer-events:none}
.mapa__capa > *{position:absolute;left:0;top:0;will-change:transform,opacity}
.mapa__punto{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--laton);background:rgba(10,13,20,.8);opacity:var(--ez,0)}
.mapa__punto--fin{border-color:var(--oro);box-shadow:0 0 0 4px rgba(243,213,138,.12),0 0 14px rgba(243,213,138,.45)}
.mapa__punto--fin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(243,213,138,.6);animation:mapaLatido 2.4s ease-out infinite}
@keyframes mapaLatido{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.mapa__lugar{font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(201,162,74,.85);white-space:nowrap;opacity:var(--ez,0);text-shadow:0 0 10px rgba(10,13,20,.9),0 0 3px rgba(10,13,20,.9)}
.mapa__lugar--fin{opacity:calc(var(--ez,0) * (1 - var(--fuera,0)))}
.mapa__llave{width:60px;height:26px;margin:-13px 0 0 -30px;opacity:0}
.mapa__llave svg{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px rgba(243,213,138,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.mapa__llave-giro{transform-box:view-box;transform-origin:32px 14px;transform:rotate(calc(var(--giro,0) * 90deg))}
.mapa__llave-luz{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,200,.55),rgba(243,213,138,.26) 35%,rgba(201,162,74,.08) 68%,rgba(201,162,74,0))}
.mapa__destello{width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,#FFFBEF 0%,rgba(255,244,214,.9) 18%,rgba(243,213,138,.55) 42%,rgba(201,162,74,.15) 72%,rgba(201,162,74,0) 100%)}
.mapa__llegado{margin:0;transform-origin:50% 100%;font-family:var(--f-titular);font-style:italic;font-weight:600;font-size:clamp(1.3rem,1.7vw,1.7rem);line-height:1;white-space:nowrap;color:var(--oro);opacity:0;
  text-shadow:0 0 18px rgba(243,213,138,.55),0 2px 10px rgba(10,13,20,.9)}
.mapa__osm{position:absolute;right:clamp(1rem,2.4vw,2rem);bottom:.9rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;color:rgba(244,238,227,.4);pointer-events:auto}
.mapa__osm a{text-decoration:none}
.mapa__osm a:hover{color:var(--oro)}

/* texto: el lema y los dos botones llevan el peso (no hay teléfono visible) */
.confianza__texto{position:absolute;z-index:4;left:clamp(1.25rem,6vw,6.5rem);top:50%;transform:translateY(-46%);width:min(35rem,40vw)}
.confianza__texto[data-oculto]{visibility:hidden}
.confianza__texto > *{opacity:var(--e,1);transform:translateY(calc((1 - var(--e,1)) * 18px));filter:blur(calc((1 - var(--e,1)) * 5px))}
.confianza .confianza__kicker{--e:var(--ek,1);margin-bottom:1.1rem}
.confianza__titulo{--e:var(--et,1);margin:0 0 1.3rem;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.7rem,5vw,5.1rem);line-height:.96;letter-spacing:-.024em;text-wrap:balance}
.confianza__l{display:block}
.confianza__l--oro{font-style:italic;font-weight:500;margin-top:.06em;padding-bottom:.08em;
  background:linear-gradient(100deg,#B88D3A 0%,var(--oro) 38%,#FFF4D6 50%,var(--oro) 62%,#B88D3A 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 6s ease-in-out infinite}
.confianza__parrafo{--e:var(--ep,1);margin:0 0 1.9rem;max-width:30rem;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.6;color:rgba(244,238,227,.84)}
.confianza__botones{--e:var(--eb,1);margin-bottom:2rem}
.confianza__botones .boton{pointer-events:auto;padding:1.05rem 1.6rem;font-size:1rem}
.confianza__botones .boton svg{width:20px;height:20px}
.confianza__garantias{--e:var(--eg,1);list-style:none;margin:0;padding:1.3rem 0 0;border-top:1px solid rgba(201,162,74,.2);display:flex;flex-wrap:wrap;gap:.7rem 1.6rem}
.confianza__garantias li{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:700;letter-spacing:.01em;color:rgba(244,238,227,.88)}
.confianza__garantias svg{width:20px;height:20px;flex:none;filter:drop-shadow(0 0 5px rgba(243,213,138,.3))}

@media (max-width:760px){
  .confianza{height:auto;margin-top:-6vh;padding:0 0 16vh}
  .confianza__escena{position:relative;height:auto;overflow:visible;padding:0 1.25rem}
  .confianza__luz{inset:-10vh -1.25rem -16vh}
  .confianza__mapa{position:relative;inset:auto;width:100%;aspect-ratio:1/1;margin:0 0 1.9rem}
  .confianza__velo{display:none}
  .mapa{--mw:56%;--mh:56%;--mx:50%;--my:50%}
  .mapa__osm{right:.2rem;bottom:.2rem}
  .mapa__llegado{font-size:1.25rem}
  .confianza__texto{position:relative;left:auto;top:auto;transform:none;width:auto}
  .confianza__texto > *{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
  .confianza__titulo{font-size:clamp(2.35rem,11vw,3rem);margin-bottom:1rem}
  .confianza__parrafo{margin-bottom:1.5rem}
  .confianza__botones{flex-direction:column;margin-bottom:1.6rem}
  .confianza__botones .boton{justify-content:center;width:100%}
  .confianza__garantias{flex-direction:column;gap:.75rem}
}

/* Movimiento reducido: sin pin ni superposición; mapa con la ruta ya dibujada y la llave en destino */
@media (prefers-reduced-motion:reduce){
  .confianza{height:auto;margin-top:0;padding:10vh 0 14vh}
  .confianza__escena{position:relative;height:auto;min-height:100vh;overflow:visible}
  .confianza__texto > *{filter:none}
  .mapa__punto--fin::after,.confianza__l--oro{animation:none}
  .confianza__velo{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .confianza__escena{min-height:0}
}

/* fundido inferior de la luz del bloque de confianza: su resplandor cálido no corta en plano al soltar el pin;
   lo recoge .partes__calor en la sección siguiente */
.confianza__luz{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}

/* =====================================================================
   PARTE SEIS · Opiniones en forma de partes de avería · #opiniones «Partes resueltos» (js/partes.js)
   Hojas de albarán en papel (formulario impreso en tinta azul + letra a boli en Caveat, fonts/, OFL)
   clavadas con chinchetas en un tablón de corcho hecho con CSS/SVG (feTurbulence) con marco de madera.
   Sin fondo propio: .partes__calor recoge arriba el resplandor cálido de #como-trabajamos y lo funde con la noche.
   Estados (js, por hoja): .vuela (vuelo 3D con WAAPI) → .clavada (chincheta) → .escrita (letra) → .sellada (sello)
   Sin JS o con movimiento reducido: todas las hojas clavadas, escritas y selladas desde el principio.
   ===================================================================== */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/caveat-latin.woff2") format("woff2")}
.partes{--tinta:#24408C;--boli:#1A3796;--rojo:#C2232F;--f-mano:"Caveat","Segoe Print","Bradley Hand",cursive;
  position:relative;z-index:4;overflow-x:clip;padding:4vh clamp(1.25rem,5vw,5rem) 18vh}
.partes__calor{position:absolute;left:50%;top:-38vh;width:min(1700px,140vw);height:120vh;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 42%,rgba(243,213,138,.13) 0%,rgba(201,162,74,.08) 34%,rgba(122,82,40,.04) 62%,rgba(10,13,20,0) 100%)}
.partes__contenido{position:relative;width:min(1180px,100%);margin:0 auto}
.partes__cabeza{text-align:center;max-width:44rem;margin:0 auto clamp(2.4rem,4.5vw,3.6rem)}
.partes .partes__kicker{justify-content:center}
.partes__titulo{margin:0 0 1.1rem;font-family:var(--f-titular);font-weight:700;font-variation-settings:"opsz" 144;font-size:clamp(2.5rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.022em;color:var(--texto);text-wrap:balance}
.partes__entradilla{margin:0;font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6;color:rgba(244,238,227,.74);text-wrap:pretty}
.partes__nota{margin:2.4rem 0 0;text-align:center;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:rgba(244,238,227,.32)}

/* ---- tablón de corcho con marco de madera (la lista misma es el tablón) ---- */
.partes__lista{position:relative;list-style:none;margin:0;
  padding:clamp(3rem,5vw,4.6rem) clamp(2rem,4vw,3.8rem) clamp(3.2rem,5vw,4.8rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.2rem);row-gap:0;
  perspective:1500px;border-radius:10px;
  border:clamp(12px,1.3vw,18px) solid #5B3A1F;
  border-image:linear-gradient(135deg,#7A5230 0%,#4E3119 22%,#6E4727 45%,#3F2713 70%,#6A4426 100%) 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(255,226,170,.22),rgba(255,226,170,0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,0,0,0) 55%,rgba(30,16,6,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .16 0 0 0 0 .06 -2.4 0 0 0 1.45'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .8 0 0 0 0 .56 2.6 0 0 0 -1.62'/%3E%3C/filter%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .07 1.4 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),
    #B27E4B;
  background-size:auto,auto,260px 260px,auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 50px 90px -40px rgba(0,0,0,.95),0 0 120px -20px rgba(201,162,74,.14),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 10px 30px rgba(0,0,0,.45)}
/* filete de luz en el canto del marco */
.partes__lista::before{content:"";position:absolute;inset:calc(-1 * clamp(12px,1.3vw,18px));pointer-events:none;border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,220,170,.28),inset 0 -1px 0 rgba(0,0,0,.6)}

/* ---- cada hoja: posición suelta, como clavadas a mano ---- */
.parte{--g:-1.8deg;position:relative;z-index:1;transform:rotate(var(--g));transform-origin:50% 8%;
  filter:drop-shadow(0 1px 1px rgba(30,16,6,.45)) drop-shadow(0 14px 16px rgba(20,10,2,.42))}
.parte:nth-child(1){--g:-1.8deg;margin:0 0 0 .4rem}
.parte:nth-child(2){--g:1.5deg;margin:2.2rem .2rem 0 0;z-index:2}
.parte:nth-child(3){--g:1.1deg;margin:-.5rem 0 0 1.6rem;z-index:3}
.parte:nth-child(4){--g:-1.4deg;margin:.9rem 1rem 0 -.6rem;z-index:4}
.partes--anima .parte:not(.vuela){visibility:hidden}
/* sombra que se proyecta en el corcho durante el vuelo (solo opacidad/transform) */
.parte__sombra{position:absolute;inset:4% 2% -2%;border-radius:8px;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(20,8,0,.55),rgba(20,8,0,0) 72%)}

/* ---- la hoja de papel ---- */
.parte__ficha{position:relative;height:100%;color:var(--tinta);
  padding:clamp(1.5rem,2.2vw,1.9rem) clamp(1.2rem,2vw,1.8rem) clamp(1.3rem,2vw,1.7rem);
  background:
    radial-gradient(ellipse 60% 40% at 92% 96%,rgba(36,64,140,.07),rgba(36,64,140,0) 70%),
    linear-gradient(172deg,#FBF7EC 0%,#F4EDDC 55%,#EEE5D0 100%);
  /* borde superior perforado: arrancada del talonario */
  -webkit-mask:radial-gradient(circle 3.4px at 50% 0,#0000 96%,#000) 0 0/11px 100% repeat-x;
          mask:radial-gradient(circle 3.4px at 50% 0,#0000 96%,#000) 0 0/11px 100% repeat-x}
/* textura de papel + esquina levantada (curl) */
.parte__ficha::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background:
    linear-gradient(135deg,rgba(0,0,0,0) 86%,rgba(90,70,40,.10) 93%,rgba(255,255,255,.5) 97%,rgba(120,95,60,.22) 100%),
    linear-gradient(90deg,rgba(0,0,0,0) 48%,rgba(120,100,70,.06) 50%,rgba(0,0,0,0) 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 -1.3 0 0 0 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
/* fina línea de perforación bajo el borde */
.parte__ficha::after{content:"";position:absolute;left:0;right:0;top:9px;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(36,64,140,.28) 0 3px,transparent 3px 7px)}
.parte__ficha>*{position:relative}

/* formulario impreso */
.parte__membrete{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin-top:.35rem;padding-bottom:.5rem;
  border-bottom:3px double rgba(36,64,140,.7)}
.parte__marca{font-family:var(--f-titular);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--tinta)}
.parte__tipo{font-family:var(--f-texto);font-weight:800;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);text-align:right}
.parte__cabeza{display:flex;align-items:stretch;justify-content:space-between;gap:.9rem;margin:.9rem 0 .75rem}
.parte__numero{margin:0;display:flex;align-items:center;gap:.55rem;padding:.3rem .65rem;border:1.5px solid rgba(36,64,140,.75);border-radius:3px;white-space:nowrap}
.parte__nlabel{font-family:var(--f-texto);font-weight:800;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
/* número de talonario: tinta roja de numeradora, algo corrida */
.parte__n{font-family:var(--f-mono);font-weight:700;font-size:1.12rem;letter-spacing:.12em;color:var(--rojo);text-shadow:.4px .3px 0 rgba(194,35,47,.45);opacity:.92}
.parte__etq{font-family:var(--f-texto);font-weight:800;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.parte__hora{margin:0;flex:1;display:flex;align-items:flex-end;gap:.6rem;padding:0 .2rem .2rem;border-bottom:1px solid rgba(36,64,140,.45);max-width:15rem;white-space:nowrap}
/* letra a boli */
.mano{font-family:var(--f-mano);font-weight:500;color:var(--boli);text-shadow:0 0 .4px rgba(26,55,150,.6)}
.parte__hora .mano{display:inline-block;font-size:1.55rem;line-height:1;transform:rotate(-2deg) translateY(.12rem)}
.parte__datos{margin:0 0 .9rem;display:grid;gap:.25rem}
.parte__fila{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;align-items:start}
.parte__fila dt{padding-top:.68rem}
/* renglones impresos: la letra cae sobre la línea */
.parte__fila dd,.parte__cita p{margin:0;font-size:1.42rem;line-height:2.05rem;
  background:linear-gradient(180deg,transparent calc(2.05rem - 1px),rgba(36,64,140,.32) calc(2.05rem - 1px)) 0 0/100% 2.05rem}
.parte__fila dd{padding-left:.15rem}
.parte__cliente{margin:0;padding:.55rem .8rem .7rem;border:1.5px solid rgba(36,64,140,.6);border-radius:3px}
.parte__etq--caja{margin:0 0 .1rem}
.parte__cita{margin:0}
.parte__cita p{font-weight:600;text-wrap:pretty}
.parte__firma{display:flex;align-items:flex-end;gap:.7rem;margin-top:.5rem;padding-right:2.5rem}
.parte__firma .parte__etq{padding-bottom:.35rem}
.parte__nombre{display:inline-block;flex:1;font-weight:700;font-size:1.75rem;line-height:1;padding:0 .2rem .15rem;border-bottom:1px solid rgba(36,64,140,.45);
  transform:rotate(-3deg);transform-origin:0 100%;letter-spacing:.01em;white-space:nowrap}

/* sello de goma «RESUELTO»: tinta roja irregular, algo transparente, multiplicada sobre el papel */
.parte__sello{position:absolute;right:clamp(.9rem,1.8vw,1.5rem);bottom:clamp(1rem,1.9vw,1.5rem);z-index:3;margin:0;pointer-events:none;
  padding:.45rem .85rem .4rem;border:3px solid currentColor;border-radius:7px;outline:1.5px solid currentColor;outline-offset:3px;
  font-family:var(--f-mono);font-weight:700;font-size:clamp(1.05rem,1.35vw,1.25rem);letter-spacing:.24em;text-transform:uppercase;line-height:1;
  color:var(--rojo);mix-blend-mode:multiply;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.1 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 100%);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.1 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:0;transform:rotate(-11deg) scale(2.3);transform-origin:50% 50%}
.parte__sello span{display:block;transform:translateX(.12em)}
.parte:nth-child(even) .parte__sello{--rs:-6deg}
.parte:nth-child(3) .parte__sello{--rs:-14deg}
.parte.sellada .parte__sello{animation:sello .42s cubic-bezier(.5,0,.75,0) both,selloAsienta .5s .42s cubic-bezier(.2,1.4,.4,1) both}
@keyframes sello{0%{opacity:0;transform:rotate(-24deg) scale(2.3)}70%{opacity:.95}100%{opacity:.94;transform:rotate(var(--rs,-11deg)) scale(.94)}}
@keyframes selloAsienta{0%{opacity:.94;transform:rotate(var(--rs,-11deg)) scale(.94)}100%{opacity:.9;transform:rotate(var(--rs,-11deg)) scale(1)}}
.parte.sellada .parte__ficha{animation:golpe .32s .38s cubic-bezier(.3,1.6,.5,1) both}
@keyframes golpe{0%{transform:none}35%{transform:translateY(2px) scale(.995)}100%{transform:none}}

/* chincheta de latón clavada arriba, con sombra en el papel */
.parte__chincheta{position:absolute;left:50%;top:-6px;width:24px;height:24px;margin-left:-12px;z-index:5;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#FFF3C4 0 8%,#F3D58A 18%,#C9A24A 48%,#8A6526 78%,#5E4216 100%);
  box-shadow:inset 0 -2px 3px rgba(60,35,5,.55),inset 0 1px 1px rgba(255,255,255,.5),3px 5px 5px -1px rgba(20,8,0,.55)}
.parte__chincheta::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#F7E2A3,#A27A32 70%);box-shadow:0 0 0 1px rgba(90,62,20,.4)}
.parte:nth-child(2) .parte__chincheta{left:46%}
.parte:nth-child(3) .parte__chincheta{left:54%}
.partes--anima .parte:not(.clavada) .parte__chincheta{opacity:0}

/* la letra se «escribe» (máscara que barre de izquierda a derecha) */
.partes--anima .parte .mano{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/230% 100% no-repeat;mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/230% 100% no-repeat}
.partes--anima .parte.escrita .mano{animation:escribe .55s var(--d,0s) cubic-bezier(.4,.1,.6,1) both}
.parte__fila:nth-child(1) .mano{--d:.12s}
.parte__fila:nth-child(2) .mano{--d:.42s}
.parte__cita .mano{--d:.68s;animation-duration:.75s!important}
.parte__nombre.mano{--d:1.12s}
@keyframes escribe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

@media (max-width:760px){
  .partes{padding:2vh 1rem 14vh}
  .partes__calor{top:-30vh;height:90vh;width:180vw}
  .partes__lista{grid-template-columns:1fr;row-gap:1.9rem;padding:2.2rem .85rem 2.4rem;border-width:10px;perspective:900px}
  .parte:nth-child(n){margin:0;--g:-.9deg}
  .parte:nth-child(even){--g:.8deg}
  .parte__ficha{padding:1.3rem 1rem 1.2rem}
  .parte__membrete{flex-direction:column;align-items:flex-start;gap:.15rem}
  .parte__tipo{text-align:left}
  .parte__cabeza{flex-wrap:wrap;gap:.6rem}
  .parte__hora{max-width:none}
  .parte__fila{grid-template-columns:1fr;gap:0}
  .parte__fila dt{padding-top:.35rem}
  .parte__fila dd,.parte__cita p{font-size:1.32rem;line-height:1.9rem;background-size:100% 1.9rem;
    background-image:linear-gradient(180deg,transparent calc(1.9rem - 1px),rgba(36,64,140,.32) calc(1.9rem - 1px))}
  .parte__sello{right:.8rem;bottom:.9rem;font-size:.92rem}
  .parte__firma{padding-right:2rem}
  .parte__nombre{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .partes--anima .parte:not(.vuela){visibility:visible}
  .parte .parte__sello,.parte.sellada .parte__sello{animation:none;opacity:.9;transform:rotate(var(--rs,-11deg))}
  .parte.sellada .parte__ficha,.parte .mano{animation:none!important;-webkit-mask:none!important;mask:none!important}
}

/* =====================================================================
   PARTE SIETE · Cierre «¿Puerta cerrada? Nosotros la abrimos.» (#cierre, js/cierre.js) + pie de página
   PC: escena fijada (sticky). js/cierre.js mueve solo transform/opacity: cámara hacia la cerradura (.cierre__zoom)
   → dentro del mecanismo (.cierre__meca) las letras encajan como pistones → sacudida y estallido (.cierre__fragmentos)
   → .abierto: texto, botones y línea. Móvil: misma historia por tiempo, sin pin. Movimiento reducido: estado final.
   Arriba no hay corte: la escena es noche pura en su borde superior, igual que el final de «Partes resueltos».
   ===================================================================== */
.cierre{position:relative;z-index:4;height:400vh;margin-top:-6vh}
.cierre__escena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7vh);mask-image:linear-gradient(180deg,transparent 0,#000 7vh)}
/* puerta de nogal oscuro tras la cerradura, con luz cálida rasante */
.cierre__puerta{position:absolute;inset:-4%;
  background:
    radial-gradient(ellipse 38% 46% at 50% 50%,rgba(243,213,138,.16),rgba(201,162,74,.05) 55%,rgba(10,13,20,0) 80%),
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(10,13,20,0) 40%,rgba(10,13,20,.92) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,rgba(0,0,0,0) 2px 9px,rgba(255,220,170,.025) 9px 10px,rgba(0,0,0,0) 10px 23px),
    linear-gradient(90deg,#1A110B 0%,#2A1B12 30%,#24170F 60%,#170F09 100%)}
.cierre__zoom{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cerradura{width:min(72vh,74vw);height:min(72vh,74vw);transform-origin:50% 51.5%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.cerradura__marca{font-family:var(--f-titular);font-weight:800}
.cierre__meca{position:absolute;inset:0;opacity:0}
.meca{width:100%;height:100%;display:block}
.meca__camara{fill:#07080A;stroke:rgba(201,162,74,.28);stroke-width:2}
.meca__muelle,.meca__driver,.meca__llavin{transform-box:fill-box}
.meca__muelle{transform-origin:50% 0}
.meca__corte{opacity:.35}
.cierre__fragmentos{position:absolute;inset:0;perspective:700px;pointer-events:none;z-index:3}
.frag{position:absolute;left:50%;top:50%;opacity:0;will-change:transform,opacity}
.frag--pin{width:16px;height:52px;margin:-26px 0 0 -8px;border-radius:7px;background:linear-gradient(90deg,#6E4F1C,#F3D58A 32%,#C9A24A 58%,#5E4216)}
.frag--esquirla{width:70px;height:54px;margin:-27px 0 0 -35px;background:linear-gradient(135deg,#FFF1C1,#C9A24A 40%,#7A5520 80%,#3E2A0E)}
.frag--muelle{width:28px;height:70px;margin:-35px 0 0 -14px}
.frag--muelle svg{width:100%;height:100%;display:block}
.frag--chispa{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#FFF4D6;box-shadow:0 0 10px 3px rgba(243,213,138,.85)}

.cierre__contenido{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:80px clamp(1.25rem,5vw,4rem) 6vh}
.cierre__titulo{margin:0 0 1.4rem;font-family:var(--f-titular);font-weight:800;font-variation-settings:"opsz" 144;font-size:clamp(2.7rem,5.6vw,5.6rem);line-height:1.04;letter-spacing:-.025em;color:var(--texto);text-wrap:balance}
.cierre__frase{display:block}
.cierre__frase--oro{color:var(--oro);font-style:italic;font-weight:700}
.cierre__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cierre__palabra{display:inline-block;white-space:nowrap}
.cierre__letra{display:inline-block;will-change:transform,opacity}
.cierre__letra.encaja{animation:encaja .38s ease-out}
@keyframes encaja{0%{text-shadow:0 0 0 rgba(243,213,138,0)}25%{text-shadow:0 0 22px rgba(243,213,138,.95),0 0 4px #FFF4D6}100%{text-shadow:0 0 0 rgba(243,213,138,0)}}
.cierre__texto{margin:0 0 2rem;max-width:36rem;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;color:rgba(244,238,227,.8);text-wrap:balance}
.cierre__botones{justify-content:center;gap:1rem}
.cierre .boton{padding:1.2rem 2rem;font-size:1.06rem}
.cierre .boton svg{width:21px;height:21px}
.cierre .boton--laton{animation:pulsoLaton 2.6s 1.2s ease-in-out infinite}
@keyframes pulsoLaton{0%,100%{box-shadow:0 10px 30px -8px rgba(243,213,138,.5),inset 0 1px 0 rgba(255,255,255,.55)}50%{box-shadow:0 12px 44px -6px rgba(243,213,138,.85),inset 0 1px 0 rgba(255,255,255,.55)}}
.cierre__linea{margin:1.6rem 0 0;font-size:.92rem;color:rgba(244,238,227,.55)}
/* antes de abrir: solo el titular (letra a letra); el resto espera */
.cierre--anima .cierre__texto,.cierre--anima .cierre__botones,.cierre--anima .cierre__linea{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.cierre--anima.abierto .cierre__texto{opacity:1;transform:none;transition-delay:.55s}
.cierre--anima.abierto .cierre__botones{opacity:1;transform:none;transition-delay:.75s}
.cierre--anima.abierto .cierre__linea{opacity:1;transform:none;transition-delay:.95s}
.cierre__contenido{transition:transform 1s cubic-bezier(.2,.8,.2,1) .35s}
.cierre.abierto .cierre__zoom,.cierre.abierto .cierre__meca{visibility:hidden}
.cierre.abierto .cierre__puerta{opacity:.55}

/* ---------- Pie de página ---------- */
.pie{position:relative;z-index:4;padding:3.2rem clamp(1.25rem,5vw,4rem) 2.6rem;background:linear-gradient(180deg,var(--noche),#07090E);
  border-top:1px solid rgba(201,162,74,.22)}
.pie::before{content:"";position:absolute;left:50%;top:-1px;width:min(560px,70vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.7}
.pie__dentro{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center}
.pie__marca{margin:0;display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;color:rgba(244,238,227,.85)}
.pie__marca svg{width:22px;height:22px;flex:none}
.pie__legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.pie__legal a,.pie__osm a{color:rgba(244,238,227,.6);text-decoration:none;font-size:.86rem;transition:color .2s}
.pie__legal a:hover,.pie__osm a:hover{color:var(--oro)}
.pie__creditos{grid-column:1/-1;margin:.6rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(244,238,227,.07);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;color:rgba(244,238,227,.4)}
.pie__osm a{font-size:.7rem;color:rgba(244,238,227,.4)}

@media (max-width:760px){
  .cierre{height:auto;margin-top:0}
  .cierre__escena{position:relative;height:auto;min-height:100svh;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6vh);mask-image:linear-gradient(180deg,transparent 0,#000 6vh)}
  .cierre__contenido{position:relative;inset:auto;min-height:100svh;padding:12vh 1.25rem 9vh}
  .cierre__titulo{font-size:clamp(2.3rem,10.5vw,3rem)}
  .cierre__botones{flex-direction:column;align-items:stretch;width:100%;max-width:24rem}
  .cierre .boton{justify-content:center;min-height:62px;font-size:1.08rem}
  .cerradura{width:80vw;height:80vw}
  .pie__dentro{grid-template-columns:1fr}
  .pie__creditos{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .cierre{height:auto;margin-top:0}
  .cierre__escena{position:relative;height:auto;min-height:100vh}
  .cierre__contenido{position:relative;min-height:100vh;transition:none}
  .cierre__zoom,.cierre__meca,.cierre__fragmentos{display:none}
  .cierre .boton--laton{animation:none}
}

/* =====================================================================
   PARTE CUATRO BIS · «Conócenos» (#conocenos, js/conocenos.js)
   Se superpone al final de .tarjetas (margin-top:-80vh: entra cuando sus tarjetas ya se van) y .confianza se superpone a su final.
   Sin fondo propio: el vídeo tiene los bordes difuminados (máscara) sobre la noche continua.
   .conocenos__fijo: mientras la escena aún sube (u < 0) js la contrarresta para que el plano no entre como un bloque.
   Variables (js): --v (vídeo/plano 0 → 1), --cab (kicker + H2), --tj (salto de la tarjeta, con rebote), --p1…--p4 (piezas).
   ===================================================================== */
.conocenos{position:relative;z-index:3;overflow-x:clip;height:330vh;margin-top:-80vh;pointer-events:none}
.conocenos__escena{position:sticky;top:0;height:100vh;height:100svh}
.conocenos__fijo{position:absolute;inset:0;will-change:transform}
.conocenos__halo{position:absolute;left:50%;top:50%;width:min(1500px,118vw);height:min(1000px,96vh);margin:calc(min(1000px,96vh) * -.5) 0 0 calc(min(1500px,118vw) * -.5);opacity:0;
  background:radial-gradient(closest-side,rgba(255,240,200,.5) 0%,rgba(243,213,138,.34) 20%,rgba(201,162,74,.2) 42%,rgba(138,100,40,.08) 66%,rgba(10,13,20,0) 100%);will-change:transform,opacity}
.conocenos__medio{position:absolute;inset:0;opacity:var(--v,1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);
  mask-composite:intersect}
.conocenos__plano{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 42%;display:block}
/* punto 5: destello dorado de salida (js/conocenos.js, 1.82–2.32): el plano se funde en oro y el oro se recoge en el bloque de confianza.
   Borde siempre transparente (closest-side): ningún corte recto. Solo PC con movimiento. */
.conocenos__destello{position:absolute;left:50%;top:60%;width:170vmax;height:120vmax;margin:-60vmax 0 0 -85vmax;opacity:0;pointer-events:none;transform:scale(.35);will-change:transform,opacity;
  background:radial-gradient(closest-side,#FFF4D6 0%,rgba(243,213,138,.85) 22%,rgba(228,193,113,.5) 45%,rgba(138,100,40,.15) 72%,rgba(10,13,20,0) 100%)}
.conocenos__final{opacity:0}
.conocenos__video{background:transparent}
/* el «clic»: un aro de latón que se abre en la yema de los dedos (posición en px, js) */
.conocenos__clic{position:absolute;left:0;top:0;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;opacity:0;pointer-events:none;
  border:2px solid rgba(243,213,138,.9);box-shadow:0 0 30px rgba(243,213,138,.6),inset 0 0 22px rgba(243,213,138,.45);will-change:transform,opacity}

.conocenos__cabecera{position:absolute;right:clamp(1.5rem,7vw,7rem);top:clamp(92px,15vh,150px);width:min(520px,38vw);
  opacity:var(--cab,1);transform:translateY(calc((1 - var(--cab,1)) * 18px))}
.conocenos .conocenos__kicker{--t1:1;margin-bottom:.7rem}
.conocenos__titulo{margin:0;font-family:var(--f-titular);font-weight:800;font-variation-settings:"opsz" 144;font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.025em;color:var(--texto)}

.conocenos__tarjeta{position:absolute;right:clamp(1.5rem,7vw,7rem);top:calc(clamp(92px,15vh,150px) + clamp(6.5rem,10vw,9rem));width:min(520px,38vw);perspective:1100px;pointer-events:auto}
.presenta{position:relative;padding:clamp(1.6rem,2.4vw,2.3rem) clamp(1.5rem,2.4vw,2.3rem) clamp(1.4rem,2vw,1.9rem);border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(243,213,138,.13),rgba(243,213,138,0) 55%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,0) 2px 5px),
    linear-gradient(155deg,#1C1912 0%,#121218 48%,#0B0E15 100%);
  border:1px solid rgba(201,162,74,.6);
  box-shadow:inset 0 1px 0 rgba(255,241,193,.22),inset 0 0 0 6px rgba(10,13,20,.5),inset 0 0 0 7px rgba(201,162,74,.22),
    0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(243,213,138,.35);
  transform-origin:0% 60%;will-change:transform,opacity}
.conocenos--anima .presenta{opacity:calc(min(1, var(--tj,0) * 3));
  transform:translate3d(calc((1 - var(--tj,0)) * -14vw),calc((1 - var(--tj,0)) * 3vh),0) rotateY(calc((1 - var(--tj,0)) * -38deg)) rotateZ(calc((1 - var(--tj,0)) * -4deg)) scale(calc(.55 + var(--tj,0) * .45))}
/* brillo de latón que cruza la tarjeta al aterrizar */
.presenta::after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 40%,rgba(255,241,193,.22) 50%,transparent 60%);
  transform:translateX(calc(-60% + var(--brillo,1) * 120%));pointer-events:none}
.presenta__marca{position:absolute;top:1.2rem;right:1.3rem;width:30px;height:30px;opacity:.9}
.presenta__marca svg{width:100%;height:100%;display:block}
.presenta__nombre{margin:0;font-family:var(--f-titular);font-weight:700;font-size:clamp(1.9rem,2.7vw,2.6rem);line-height:1.05;letter-spacing:-.015em;
  background:linear-gradient(180deg,#FFF1C1 0%,#F3D58A 45%,#C9A24A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.presenta__filete{display:block;width:72px;height:1px;margin:1rem 0 1.05rem;background:linear-gradient(90deg,var(--oro),rgba(201,162,74,0))}
.presenta__dato{margin:0 0 1rem;font-family:var(--f-titular);font-weight:500;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.3;color:var(--texto)}
.presenta__cifra{display:block;font-weight:800;font-size:clamp(2.6rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em;color:var(--oro);margin-bottom:.15rem}
.presenta__frase{margin:0 0 1.1rem;padding-left:.95rem;border-left:2px solid rgba(201,162,74,.55);font-size:clamp(.94rem,1.08vw,1.02rem);line-height:1.6;color:rgba(244,238,227,.82)}
.presenta__micro{margin:0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(201,162,74,.9)}
.conocenos--anima .presenta__pieza{opacity:var(--pp,1);transform:translateY(calc((1 - var(--pp,1)) * 12px))}
.conocenos--anima .presenta__nombre{--pp:var(--p1,0)}
.conocenos--anima .presenta__filete{--pp:var(--p1,0);transform:scaleX(var(--p1,0));transform-origin:0 50%}
.conocenos--anima .presenta__dato{--pp:var(--p2,0)}
.conocenos--anima .presenta__frase{--pp:var(--p3,0)}
.conocenos--anima .presenta__micro{--pp:var(--p4,0)}

@media (max-width:760px){
  .conocenos{height:auto;margin-top:0;padding:6vh 0 12vh}
  .conocenos__escena{position:relative;height:auto}
  .conocenos__fijo{position:relative;inset:auto;display:flex;flex-direction:column}
  .conocenos__halo{width:150vw;height:80vh;margin:-40vh 0 0 -75vw;top:62%}
  .conocenos__cabecera{position:relative;order:-1;right:auto;top:auto;width:auto;padding:0 1.25rem;margin-bottom:-2.5rem;z-index:2}
  .conocenos__titulo{font-size:clamp(2.6rem,12vw,3.2rem)}
  .conocenos__medio{position:relative;inset:auto;height:72svh;min-height:480px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%)}
  .conocenos__plano{object-position:25% 50%}
  .conocenos__destello{display:none}
  .conocenos__clic{width:120px;height:120px;margin:-60px 0 0 -60px}
  .conocenos__tarjeta{position:relative;right:auto;top:auto;width:auto;margin:-17svh 1.25rem 0;z-index:2}
  .conocenos--anima .presenta{transform:translate3d(0,calc((1 - var(--tj,0)) * 60px),0) rotateX(calc((1 - var(--tj,0)) * 28deg)) scale(calc(.8 + var(--tj,0) * .2));transform-origin:50% 100%}
  .presenta__cifra{font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){
  .conocenos{height:auto;margin-top:0;padding:4vh 0 8vh}
  .conocenos__escena{position:relative;height:100vh;min-height:640px}
  .conocenos__video,.conocenos__clic,.conocenos__destello{display:none}
  .conocenos__final{opacity:1}
  .conocenos__halo{opacity:.35}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .conocenos__escena{height:auto;min-height:0}
}

/* =====================================================================
   PUNTO 1 · Adaptación a pantallas grandes (24" / 27") y tablet
   Pantallas grandes: la raíz (html) crece con el ancho y el alto de la ventana, así que todo lo que va en rem
   (textos, márgenes, tarjetas, albaranes, botones…) escala junto. Hasta 1600 px no cambia nada (16 px).
   Aquí solo se pasan a rem las medidas que estaban en px. No toca animaciones ni JS.
   ===================================================================== */
@media (min-width:1600px){
  html{font-size:clamp(16px,min(.9375vw,1.85vh),22px)}
  .barra{height:3.75rem}
  .logo{height:2.125rem}
  .punto{width:.44rem;height:.44rem}
  .kicker__linea{width:2.125rem}
  .boton svg{width:1.125rem;height:1.125rem}
  .sello{width:3.625rem;height:3.625rem}
  .pista__riel{height:3.6rem}
  .pista__llave{width:.75rem;height:1.875rem;margin-left:-.375rem}
  /* coche y caja */
  .caja__clave i{width:1.125rem}
  .caja__anillo{width:min(86vh,48.75rem);height:min(86vh,48.75rem);left:calc(min(86vh,48.75rem) * -.5 + 4vw)}
  /* tarjetas «Más servicios» */
  .tarjetas__escena{padding-top:3.75rem}
  .tarjetas__halo{width:min(93.75rem,118vw);height:min(62.5rem,96vh);margin:calc(min(62.5rem,96vh) * -.5) 0 0 calc(min(93.75rem,118vw) * -.5)}
  /* el panel de llaves escala con --s (js/tarjetas.js), que ya tiene en cuenta el ancho y el alto */
  /* Conócenos */
  .conocenos__halo{width:min(93.75rem,118vw);height:min(62.5rem,96vh);margin:calc(min(62.5rem,96vh) * -.5) 0 0 calc(min(93.75rem,118vw) * -.5)}
  .conocenos__clic{width:11.25rem;height:11.25rem;margin:-5.625rem 0 0 -5.625rem}
  .conocenos__cabecera{top:clamp(5.75rem,15vh,9.4rem);width:min(32.5rem,38vw)}
  .conocenos__tarjeta{top:calc(clamp(5.75rem,15vh,9.4rem) + clamp(6.5rem,10vw,9rem));width:min(32.5rem,38vw)}
  .presenta{border-radius:1rem}
  .presenta__marca{width:1.875rem;height:1.875rem}
  .presenta__filete{width:4.5rem}
  /* bloque de confianza y mapa */
  .confianza__botones .boton svg,.confianza__garantias svg{width:1.25rem;height:1.25rem}
  .mapa__punto{width:.75rem;height:.75rem;margin:-.375rem 0 0 -.375rem}
  .mapa__llave{width:3.75rem;height:1.625rem;margin:-.8125rem 0 0 -1.875rem}
  .mapa__llave-luz{width:10.6rem;height:10.6rem;margin:-5.3rem 0 0 -5.3rem}
  .mapa__destello{width:7.5rem;height:7.5rem;margin:-3.75rem 0 0 -3.75rem}
  /* «Partes resueltos»: tablón de corcho y albaranes */
  .partes__calor{width:min(106rem,140vw)}
  .partes__contenido{width:min(73.75rem,100%)}
  .partes__lista{border-width:clamp(.75rem,1.3vw,1.125rem)}
  .partes__lista::before{inset:calc(-1 * clamp(.75rem,1.3vw,1.125rem))}
  .parte__chincheta{width:1.5rem;height:1.5rem;margin-left:-.75rem;top:-.375rem}
  .parte__chincheta::after{width:.5625rem;height:.5625rem;margin:-.28rem 0 0 -.28rem}
  .parte__ficha::after{top:.5625rem}
  /* cierre y pie */
  .cierre__contenido{padding-top:5rem}
  .cierre .boton svg{width:1.3rem;height:1.3rem}
  .pie::before{width:min(35rem,70vw)}
  .pie__dentro{width:min(70rem,100%)}
  .pie__marca svg{width:1.375rem;height:1.375rem}
}
/* 27" (2560 px y más): la raíz sigue creciendo y los bloques ganan algo de aire */
@media (min-width:2200px){
  html{font-size:clamp(20px,min(.9375vw,1.85vh),30px)}
  .cine__texto{width:min(38rem,40vw)}
  .conocenos__cabecera,.conocenos__tarjeta{width:min(34rem,36vw)}
}

/* Tablet en vertical (761–1100 px, más alta que ancha): textos de las escenas con más ancho, sin tapar el vídeo */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .cine__texto{width:min(36rem,54vw)}
  .coche__texto,.caja__texto{width:min(34rem,54vw)}
  .confianza__texto{width:min(35rem,52vw)}
  /* Conócenos: el cerrajero centrado en el plano; título arriba a la izquierda y tarjeta abajo, sin taparle la cara */
  .conocenos__plano{object-position:32% 42%}
  .conocenos__cabecera{right:auto;left:clamp(1.5rem,6vw,4rem);top:clamp(5.5rem,9vh,7.5rem);width:min(32rem,70vw)}
  .conocenos__tarjeta{top:auto;bottom:clamp(2rem,6vh,4.5rem);right:auto;left:calc((100% - min(34rem,84vw)) / 2);width:min(34rem,84vw)}
}
/* Tablet estrecha (761–900 px) o en vertical: los albaranes en una sola columna para que no se pisen */
@media (min-width:761px) and (max-width:900px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .partes__lista{grid-template-columns:1fr;row-gap:2.2rem;width:min(36rem,100%);margin:0 auto}
  .parte:nth-child(n){margin:0}
}
/* Pantallas apaisadas casi cuadradas (tablet en horizontal, 4:3…): el cerrajero queda más centrado en el plano,
   así que el título y la tarjeta de Conócenos se estrechan y se pegan a la derecha para no taparle la cara */
@media (min-width:761px) and (orientation:landscape) and (max-aspect-ratio:3/2){
  .conocenos__cabecera,.conocenos__tarjeta{right:clamp(1rem,2.5vw,2.5rem);width:min(30rem,32vw)}
}
/* Móvil: los albaranes no pueden ser más anchos que el tablón (en 360–390 px se salían por la derecha) */
@media (max-width:760px){
  .partes__lista{grid-template-columns:minmax(0,1fr)}
  .parte{min-width:0}
}