/* ==========================================================================
   Caso SYM (tpl-caso.php + inc/caso-sym.php), 29/9/26.
   Asfalto y velocidad: la portada se acerca, las cifras ruedan como un cuentakilómetros, los lanzamientos
   pasan a pantalla completa, las campañas corren en horizontal, los catálogos se abren desde el lomo y las
   convenciones se leen en un panel de llegadas.
   · Solo transform, opacity y clip-path; el movimiento lo calcula assets/js/caso-sym.js sobre el motor común.
   · Rojo SYM (#E00621, tomado del logotipo) solo como acento: el filo de los lanzamientos, el panel y el
     capítulo de la red.
   · Sin JavaScript o con movimiento reducido: todo en su sitio, legible y quieto.
   ========================================================================== */

body.cx-sym{--sy-red:#E00621}

/* ---------- Portada: la moto se acerca y el nombre se abre ---------- */
.sy-hero{height:210svh}
.sy-hero-st{position:sticky;top:0;height:100svh;overflow:hidden;background:#121314}
.sy-hero-f{position:absolute;inset:0;margin:0;overflow:hidden}
.sy-hero-z{position:absolute;inset:0;transform-origin:50% 62%;will-change:transform}
.sy-hero-z picture{display:block;width:100%;height:100%;animation:sy-llega 2.2s cubic-bezier(.2,.7,.2,1) .05s both}
.sy-hero-i{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
@keyframes sy-llega{from{transform:scale(1.14);opacity:0}}
.sy-hero-f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,19,20,.82) 0%,rgba(18,19,20,.5) 30%,rgba(18,19,20,.08) 56%,rgba(18,19,20,0) 68%,rgba(18,19,20,.72) 100%)}
.sy-hero-vel{position:absolute;left:50%;top:60%;width:0;height:0;z-index:2;pointer-events:none}
.sy-hero-vel i{position:absolute;left:0;top:0;width:30vmax;height:1.5px;margin-top:-.75px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 70%,rgba(255,255,255,0));
  transform:rotate(var(--a)) translate3d(calc((14vmax + var(--q,0) * 70vmax) * var(--d)),0,0) scaleX(calc(.2 + var(--q,0) * 1.3));
  opacity:calc(min(1,var(--q,0) * 5) * (1 - var(--q,0)) * .9)}
.sy-hero-top{position:absolute;left:0;right:0;top:calc(24px + 55px + clamp(10px,2.4svh,26px));z-index:3}
.sy-hero-t{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:var(--fs,38vw);line-height:.8;letter-spacing:-.035em;color:#F6F5F3;white-space:nowrap}
.sy-fit{display:inline-block}
.sy-l{display:inline-block;overflow:hidden;padding-bottom:.04em;will-change:transform}
.sy-l>span{display:inline-block;animation:cx-sube 1.3s cubic-bezier(.2,.7,.2,1) both}
.sy-l:nth-child(1)>span{animation-delay:.3s}.sy-l:nth-child(2)>span{animation-delay:.4s}.sy-l:nth-child(3)>span{animation-delay:.5s}
.sy-hero-cred{position:absolute;left:0;right:0;bottom:clamp(16px,3svh,30px);z-index:3;opacity:calc(1 - var(--q,0) * 2.6)}
.sy-hero .cx-cred{border-top-color:rgba(246,245,243,.24)}
html:not(.cx-js) .sy-hero,html.cx-rm .sy-hero{height:100svh}

/* ---------- Entrada: cifras de cuentakilómetros ---------- */
.sy-intro{padding:clamp(120px,18svh,210px) 0 clamp(100px,13vw,180px)}
.sy-odo{list-style:none;margin:clamp(70px,9vw,130px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);border-top:1px solid var(--cx-line)}
.sy-odo li{padding-top:24px}
.sy-odo-n{display:flex;align-items:flex-start;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(58px,7.2vw,120px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cx-fg)}
.sy-odo-p,.sy-odo-s{display:inline-block}
.sy-odo-s{margin:0 .03em 0 .02em}
.sy-odo-d{position:relative;display:inline-block;height:1em;clip-path:inset(0 -60% 0 -60%)}
.sy-odo-d>i{display:block;visibility:hidden;font-style:normal;font-variant-numeric:proportional-nums}
.sy-odo-d>span{position:absolute;left:50%;top:0;width:max-content;text-align:center;font-variant-numeric:proportional-nums;transform:translate3d(-50%,calc(-50% - var(--v) * 5%),0)}
.sy-odo-d b{display:block;height:1em;font-weight:200}
html.cx-js:not(.cx-rm) .sy-odo-d>span{transform:translate3d(-50%,0,0);transition:transform calc(1.7s + var(--i) * .25s) cubic-bezier(.16,.84,.24,1) calc(.15s + var(--i) * .06s)}
html.cx-js:not(.cx-rm) .in .sy-odo-d>span,html.cx-js:not(.cx-rm) .sy-odo-n.in .sy-odo-d>span{transform:translate3d(-50%,calc(-50% - var(--v) * 5%),0)}
.sy-odo-l{display:block;margin-top:16px;max-width:22ch;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--cx-fg3)}

/* ---------- Lanzamientos: cada foto pasa a pantalla completa con su lema ---------- */
.sy-lan-in{padding:clamp(120px,18svh,210px) 0 clamp(100px,13svh,160px)}
.sy-lan-g{margin-top:clamp(40px,5vw,70px);align-items:end}
.sy-lan-tx{grid-column:1/span 7}
.sy-lan-tx .cx-p{margin-top:clamp(22px,2.6vw,34px)}
.sy-lan-rec{grid-column:9/span 4}
.sy-o-rec{object-position:50% 50%}
.sy-lan{height:calc(var(--n,6) * 80svh + 100svh)}
.sy-lan-st{position:sticky;top:0;height:100svh;overflow:hidden;background:#0D0E10}
.sy-lan-fs{position:absolute;inset:0}
.sy-lan-f{position:absolute;inset:0;margin:0;overflow:hidden;will-change:transform}
.sy-lan-f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;background:var(--sy-red);opacity:0;transition:opacity .25s}
.sy-lan-f.mv::before{opacity:1}
.sy-lan-f::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(10,11,12,.8) 0%,rgba(10,11,12,.34) 34%,rgba(10,11,12,0) 58%),linear-gradient(180deg,rgba(10,11,12,.5) 0,rgba(10,11,12,0) 22%)}
.sy-lan-m{position:absolute;inset:0;will-change:transform}
.sy-lan-m picture{display:block;width:100%;height:100%}
.sy-lan-i{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.sy-lan-q{position:absolute;z-index:2;left:var(--edge);right:var(--edge);bottom:clamp(76px,12svh,130px);color:#F6F5F3}
.sy-lan-k{display:block;margin-bottom:clamp(14px,1.6vw,22px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,245,243,.72)}
.sy-lan-w{display:block;max-width:12.5em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(46px,7vw,118px);line-height:.98;letter-spacing:-.032em;text-wrap:balance}
html.cx-js:not(.cx-rm) .sy-lan-q>span{opacity:0;transform:translate3d(0,34px,0);transition:opacity .8s ease .1s,transform 1s cubic-bezier(.2,.7,.2,1) .1s}
html.cx-js:not(.cx-rm) .sy-lan-f.on .sy-lan-q>span{opacity:1;transform:none}
html.cx-js:not(.cx-rm) .sy-lan-f.on .sy-lan-q>.sy-lan-w{transition-delay:.18s}
.sy-lan-c{position:absolute;z-index:4;left:0;right:0;bottom:clamp(22px,4svh,40px);display:flex;align-items:center;gap:16px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:rgba(246,245,243,.8);font-variant-numeric:tabular-nums}
.sy-lan-cr{position:relative;width:clamp(80px,12vw,160px);height:1px;background:rgba(246,245,243,.25)}
.sy-lan-cr i{position:absolute;inset:0;background:#F6F5F3;transform-origin:0 50%;transform:scaleX(var(--lp,0))}
html:not(.cx-js) .sy-lan,html.cx-rm .sy-lan{height:auto}
html:not(.cx-js) .sy-lan-st,html.cx-rm .sy-lan-st{position:static;height:auto}
html:not(.cx-js) .sy-lan-fs,html.cx-rm .sy-lan-fs{position:static}
html:not(.cx-js) .sy-lan-f,html.cx-rm .sy-lan-f{position:relative;height:88svh;transform:none!important}
html:not(.cx-js) .sy-lan-m,html.cx-rm .sy-lan-m{transform:none!important}
html:not(.cx-js) .sy-lan-c,html.cx-rm .sy-lan-c{display:none}

/* ---------- Campañas: la tira corre en horizontal y la página toma el color de cada pieza ---------- */
.sy-cam-in{padding:clamp(120px,18svh,210px) 0 clamp(70px,9vw,120px)}
.sy-cam{height:calc(100svh + var(--len,320vw))}
.sy-cam-mk{display:none}
.sy-cam-st{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(110px,15svh,170px);padding-bottom:clamp(40px,7svh,80px);box-sizing:border-box}
.sy-cam-top{position:absolute;left:0;right:0;top:calc(24px + 55px + clamp(18px,4svh,44px));display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.sy-cam-g{position:relative;flex:1;min-width:0;height:1.12em;margin:0;overflow:hidden;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.4vw,72px);line-height:1.1;letter-spacing:-.025em;color:var(--cx-fg)}
.sy-cam-g span{position:absolute;left:0;top:0;white-space:nowrap;transform:translate3d(0,105%,0);transition:transform .75s cubic-bezier(.65,0,.35,1)}
.sy-cam-g span.on{transform:none}
.sy-cam-g span.out{transform:translate3d(0,-105%,0)}
.sy-cam-n{margin:0 0 .5em;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:var(--cx-fg3);font-variant-numeric:tabular-nums;white-space:nowrap}
.sy-cam-v{width:100%}
.sy-cam-t{list-style:none;margin:0;padding:0 var(--edge);display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);width:max-content;will-change:transform}
/* Alto y ancho explícitos (sin depender de aspect-ratio dentro de una fila max-content: Safari medía la fila con el tamaño nativo de las imágenes y la tira se iba de la pantalla). */
.sy-cam-f{--h:min(56svh,620px,calc(90vw / var(--ar)));flex:0 0 auto;height:var(--h);width:calc(var(--h) * var(--ar));min-width:0;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.08);box-shadow:0 26px 60px -18px rgba(0,0,0,.35)}
.sy-cam-f img,.sy-cam-f video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sy-cam-f{position:relative}
/* Póster de respaldo bajo cada vídeo (Safari) */
body.cx-sym .sy-pst{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
body.cx-sym .sy-pst+video{position:relative;z-index:1}
.sy-con-q{z-index:2}
.sy-reel-b{z-index:2}
.sy-cam-bar{position:absolute;left:0;right:0;bottom:clamp(20px,3.6svh,36px);height:1px;background:var(--cx-line)}
.sy-cam-bar i{position:absolute;inset:0;background:var(--cx-fg);transform-origin:0 50%;transform:scaleX(var(--cp,0))}
html:not(.cx-js) .sy-cam,html.cx-rm .sy-cam{height:auto;padding:0 0 clamp(90px,12vw,150px)}
html:not(.cx-js) .sy-cam-st,html.cx-rm .sy-cam-st{position:static;height:auto;display:block;padding:0}
html:not(.cx-js) .sy-cam-top,html.cx-rm .sy-cam-top,html:not(.cx-js) .sy-cam-bar,html.cx-rm .sy-cam-bar{display:none}
html:not(.cx-js) .sy-cam-v,html.cx-rm .sy-cam-v{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px}
html:not(.cx-js) .sy-cam-t,html.cx-rm .sy-cam-t{transform:none!important}
html:not(.cx-js) .sy-cam-f,html.cx-rm .sy-cam-f{--h:min(50svh,460px,calc(90vw / var(--ar)));scroll-snap-align:start}

/* ---------- Lanzamientos: ADX-TG 400 en estudio, a sangre ---------- */
.sy-tg{padding:clamp(110px,15svh,180px) 0 0}
.sy-tg-t{max-width:14em;margin:0 0 clamp(50px,7vw,100px);font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(36px,4.6vw,76px);line-height:1.02;letter-spacing:-.03em;color:var(--cx-fg);text-wrap:balance}
.sy-tg-v{background:#050506}
.sy-tg-v video{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Catálogos: las portadas suben y cada doble página se abre desde el lomo, en plano ---------- */
.sy-cat{padding:clamp(120px,18svh,210px) 0 clamp(120px,16svh,190px)}
.sy-cv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3.4vw,60px);max-width:1180px;margin:clamp(80px,10vw,150px) auto clamp(90px,11vw,160px)}
.sy-cv-f{margin:0;aspect-ratio:1061/1500;border-radius:3px;overflow:hidden;box-shadow:0 34px 60px -24px rgba(31,35,34,calc(var(--lv,1) * .45)),0 2px 6px rgba(31,35,34,calc(var(--lv,1) * .12));
  transform:translate3d(0,calc((1 - var(--lv,1)) * 48px),0);will-change:transform}
.sy-cv-f img{display:block;width:100%;height:100%;object-fit:cover;clip-path:inset(calc((1 - var(--lv,1)) * 100%) 0 0 0);will-change:clip-path}
.sy-sp-g{column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(44px,6.4vw,100px)}
.sy-sp{position:relative;margin:0;aspect-ratio:1.414;transform:translate3d(0,calc((1 - var(--lv,1)) * 36px),0);will-change:transform}
.sy-sp img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;clip-path:inset(0 calc((1 - var(--lv,1)) * 50%) 0 calc((1 - var(--lv,1)) * 50%) round 3px);will-change:clip-path}
.sy-sp::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:3px;opacity:var(--lv,1);
  background:linear-gradient(90deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.12) 49.7%,rgba(255,255,255,.1) 50.3%,rgba(0,0,0,0) 54%)}
.sy-sp::after{content:"";position:absolute;left:3%;right:3%;bottom:-4%;height:16%;z-index:0;pointer-events:none;border-radius:50%;background:rgba(31,35,34,.28);filter:blur(22px);opacity:var(--lv,1)}
.sy-sp-dn{margin-top:clamp(40px,9vw,140px)}
.sy-dp-h{margin:0 0 clamp(26px,3vw,40px);font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.sy-dp .cx-band-f{aspect-ratio:990/1400;width:clamp(190px,19vw,300px);border-radius:3px;background:rgba(31,35,34,.08);box-shadow:0 26px 50px -22px rgba(31,35,34,.45)}
.sy-dp .cx-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}

/* ---------- Convenciones: panel de llegadas ---------- */
.sy-con{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.sy-con-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:56px;margin-top:clamp(70px,9vw,130px);align-items:end}
.sy-flap-w{grid-column:1/span 8}
.sy-con-n{grid-column:10/span 3}
.sy-flap{display:inline-block;padding:clamp(12px,1.5vw,24px) clamp(12px,1.6vw,26px) clamp(14px,1.7vw,28px);background:#151517;border-radius:14px;box-shadow:inset 0 2px 0 var(--sy-red),0 40px 90px -30px rgba(0,0,0,.8);font-family:var(--f-label);font-size:clamp(12px,2.25vw,36px);line-height:1;perspective:600px}
.sy-flap-r{display:flex;gap:.62em;align-items:center}
.sy-flap-r+.sy-flap-r{margin-top:.16em}
.sy-flap-hd{margin-bottom:.34em}
.sy-flap-hd span{display:block}
.sy-flap-hd i{font-style:normal;font-size:.34em;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,245,243,.5)}
.sy-flap .c4{width:3.42em}.sy-flap .c9{width:7.82em}.sy-flap .c10{width:8.7em}
.sy-flap-c{display:flex;gap:.1em}
.sy-flap-c b{position:relative;display:block;flex:0 0 .78em;height:1.2em;line-height:1.2em;text-align:center;font-weight:500;color:#F2F0EC;border-radius:.07em;background:linear-gradient(180deg,#26272A 0,#212225 49.6%,#1A1B1D 50.4%,#1E1F21 100%);text-transform:uppercase;backface-visibility:hidden}
.sy-flap-c b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.6)}
.sy-con-casi{margin:0 0 8px;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,2.6vw,42px);line-height:1;letter-spacing:-.02em;color:var(--cx-fg2)}
.sy-con-n .sy-odo-n{font-size:clamp(64px,7.4vw,124px)}
.sy-con-n .sy-odo-l{margin-top:18px}
.sy-con-v{position:relative;margin-bottom:clamp(12px,1.6vw,22px);background:#0B0B0C}
.sy-con-v video{display:block;width:100%;height:100%;object-fit:cover}
/* El año, la ciudad y el lema de cada convención, encima del vídeo */
.sy-con-q{position:absolute;left:0;right:0;bottom:clamp(18px,3.4vw,48px);display:flex;align-items:baseline;gap:clamp(12px,1.6vw,24px);color:#F6F5F3;text-shadow:0 2px 24px rgba(0,0,0,.45);pointer-events:none;transition:opacity .35s ease}
.sy-con-q.cambia{opacity:0}
.sy-con-qy{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(44px,6.4vw,110px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sy-con-qc,.sy-con-ql{font-family:var(--f-label);font-size:clamp(10px,.9vw,13px);letter-spacing:.16em;text-transform:uppercase}
.sy-con-ql:not(:empty)::before{content:"·";margin-right:clamp(12px,1.6vw,24px);opacity:.6}
html:not(.cx-js) .sy-con-q{display:none}
.sy-con-fg>.cx-f:nth-child(3){margin-top:clamp(0px,4vw,60px)}
.sy-ani{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:40px;margin-top:clamp(100px,12vw,170px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--cx-line);align-items:end}
.sy-ani-x{grid-column:1/span 6}
.sy-ani .cx-h{font-size:clamp(36px,4.2vw,68px)}
.sy-ani .cx-p{margin-top:22px}
.sy-ani .sy-odo--s{grid-column:8/span 5;grid-template-columns:1fr 1fr;margin:0;border-top:0}
.sy-ani .sy-odo--s li{padding-top:0}
.sy-ani-v{margin-top:clamp(70px,9vw,120px);margin-bottom:clamp(12px,1.6vw,22px);background:#0B0B0C}
.sy-ani-v video{display:block;width:100%;height:100%;object-fit:cover}
.sy-ani-g{row-gap:clamp(12px,1.6vw,22px)}
.sy-ani-g>.cx-f:nth-child(3){margin-top:0}
.sy-o-led{object-position:62% 50%}
.sy-o-photo{object-position:40% 50%}

/* ---------- Red de concesionarios: el rojo de la tienda ---------- */
.sy-red{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.sy-red .cx-f--bleed{background:rgba(0,0,0,.14)}
.sy-red-g{align-items:center;margin-bottom:clamp(70px,9vw,120px)}
.sy-red-x{grid-column:1/span 6}
.sy-red-big{margin:0 0 24px;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(36px,4.4vw,72px);line-height:1.02;letter-spacing:-.03em;color:var(--cx-fg);text-wrap:balance}
.sy-red-v{grid-column:9/span 4;justify-self:end;width:min(100%,calc(74svh * 9 / 16));aspect-ratio:9/16;background:rgba(0,0,0,.14)}
.sy-red-v video{display:block;width:100%;height:100%;object-fit:cover}
.sy-band .cx-band-f{aspect-ratio:1;width:clamp(210px,23vw,340px);border-radius:14px;background:rgba(0,0,0,.14)}
.sy-band .cx-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}

/* ---------- Web: las páginas se recorren al bajar ---------- */
.sy-web{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px);overflow:hidden}
.sy-web-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:36px;margin-top:clamp(60px,8vw,110px);align-items:end}
.sy-scr{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 34px 90px rgba(31,35,34,.18),0 2px 6px rgba(31,35,34,.08)}
.sy-scr--l{grid-column:1/span 8}
.sy-scr--s{grid-column:10/span 3}
.sy-scr-bar{height:28px;display:flex;gap:7px;align-items:center;padding:0 14px;background:#F1F0EC;border-bottom:1px solid rgba(31,35,34,.07)}
.sy-scr-bar i{width:9px;height:9px;border-radius:50%;background:#D8D5CF}
.sy-scr-w{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F1F0EC}
.sy-scr--s .sy-scr-w{aspect-ratio:3/4}
.sy-scr-i{display:block;width:100%;height:auto;transform:translate3d(0,calc(var(--sv,0) * var(--sh,0px) * -1),0);will-change:transform}
/* La web de 2023 en un portátil sobre negro (vídeo propio, 16 s en bucle) */
.sy-lap{margin:clamp(70px,9vw,120px) 0 0;background:#030304}
.sy-lap video{display:block;width:100%;height:100%;object-fit:cover}
.sy-lap-m{display:none}
.sy-tel{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,4vw,64px);margin-top:clamp(90px,12vw,170px);padding-bottom:clamp(30px,5vw,80px)}
.sy-tel-f{margin:0;width:clamp(96px,20vw,280px);aspect-ratio:750/1334;border-radius:clamp(16px,2.4vw,36px);overflow:hidden;border:clamp(4px,.55vw,9px) solid #1F2322;background:#1F2322;box-shadow:0 34px 70px -20px rgba(31,35,34,.35);transform:translate3d(0,calc(var(--k) * var(--tv,0) * 1px),0);will-change:transform}
.sy-tel-f:nth-child(2){margin-top:clamp(30px,6vw,90px)}
.sy-tel-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ---------- Showreel: adelanto mudo y, al pulsar, el vídeo entero con sonido ---------- */
.sy-reel{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.sy-reel-v{position:relative;margin-top:clamp(60px,8vw,110px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;transform:translateZ(0)}
.sy-reel-v video{display:block;width:100%;height:100%;object-fit:cover}
.sy-reel-b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border:0;border-radius:999px;background:rgba(246,245,243,.94);color:#121314;font:inherit;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.sy-reel-b:hover,.sy-reel-b:focus-visible{transform:translate(-50%,-50%) scale(1.05);background:#fff}
.sy-reel-i{position:relative;width:44px;height:44px;border-radius:50%;background:#E00621}
.sy-reel-i::after{content:"";position:absolute;left:17px;top:14px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.sy-reel-d{color:rgba(18,19,20,.55);font-variant-numeric:tabular-nums}
.sy-reel-v.on .sy-reel-b{display:none}

body.cx-sym .sy-nw{display:inline;white-space:nowrap}
@media (min-width:901px){.sy-sp-g>.c-6{grid-column:span 6}}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .sy-odo{grid-template-columns:1fr 1fr;row-gap:36px}
  .sy-lan-tx,.sy-lan-rec{grid-column:1/-1}
  .sy-lan-rec{width:min(100%,420px)}
  .sy-con-g>*,.sy-ani>*,.sy-ani .sy-odo--s{grid-column:1/-1}
  .sy-flap{font-size:clamp(11px,3.72vw,30px)}
  .sy-red-x{grid-column:1/-1}
  .sy-red-v{grid-column:1/-1;justify-self:start;width:min(72%,340px)}
  .sy-scr--l,.sy-scr--s{grid-column:1/-1}
  .sy-scr--s{width:min(78%,380px);justify-self:end}
  .sy-sp-dn,.sy-con-fg>.cx-f:nth-child(3){margin-top:0}
}
@media (max-width:760px){
  .sy-hero-top{top:calc(16px + 55px + clamp(12px,2.4svh,24px))}
  .sy-hero-vel{top:56%}
  .sy-lan-q{bottom:clamp(70px,13svh,120px)}
  .sy-lan-w{font-size:clamp(38px,10.4vw,60px)}
  .sy-cam-st{padding-top:clamp(120px,19svh,170px)}
  .sy-cam-g{font-size:clamp(28px,8.4vw,44px)}
  .sy-cam-f{--h:min(50svh,440px,calc(90vw / var(--ar)))}
  .sy-cv{gap:12px}
  .sy-band .cx-band-f{width:clamp(180px,58vw,260px)}
  .sy-tel{gap:12px}
  .sy-tel-f{width:29vw}
  .sy-lap-d{display:none}
  .sy-lap-m{display:block;aspect-ratio:4/5}
  .sy-con-q{bottom:14px}
  .sy-reel-v{border-radius:12px}
  .sy-reel-b{padding:8px 16px 8px 8px;gap:10px;font-size:11px}
  .sy-reel-i{width:34px;height:34px}
  .sy-reel-i::after{left:13px;top:10px;border-width:7px 0 7px 11px}
}
/* Móvil en vertical (30/9): la foto no se estira a toda la altura (una foto apaisada quedaba en una franja
   estrecha y muy ampliada). Va arriba, con su encuadre de móvil, y el lema debajo. */
@media (max-width:760px) and (max-aspect-ratio:4/5){
  .sy-lan{--lh:min(140vw,66svh)}
  .sy-lan-f{background:#0D0E10}
  .sy-lan-m{bottom:auto;height:var(--lh)}
  .sy-lan-f:nth-child(1) .sy-lan-i{object-position:50% 60%}
  .sy-lan-f:nth-child(2) .sy-lan-i{object-position:84% 50%}
  .sy-lan-f:nth-child(3) .sy-lan-i{object-position:58% 50%}
  .sy-lan-f:nth-child(4) .sy-lan-i{object-position:64% 50%}
  .sy-lan-f:nth-child(5) .sy-lan-i{object-position:30% 50%}
  .sy-lan-f:nth-child(6) .sy-lan-i{object-position:82% 50%}
  .sy-lan-f::after{bottom:auto;height:calc(var(--lh) * 1.1);background:linear-gradient(0deg,#0D0E10 0%,#0D0E10 9%,rgba(13,14,16,.5) 19%,rgba(13,14,16,0) 38%),linear-gradient(180deg,rgba(10,11,12,.45) 0,rgba(10,11,12,0) 20%)}
  .sy-lan-q{top:calc(var(--lh) + clamp(14px,3svh,30px));bottom:auto}
  html:not(.cx-js) .sy-lan-f,html.cx-rm .sy-lan-f{height:auto;min-height:calc(var(--lh) + 230px)}
}
@media (prefers-reduced-motion:reduce){
  .sy-hero-z picture,.sy-l>span{animation:none}
  .sy-hero{height:100svh}
  .sy-hero-vel{display:none}
  .sy-cam-g span,.sy-lan-f::before{transition:none}
}

/* 04 · La gama 2025: un catálogo para cada modelo, abiertos en vídeo (en plano, sobre el color de la sección) */
.sy-gama-h{margin:clamp(120px,15vw,210px) 0 0;max-width:14em}
.sy-gama{background:#E9E6E0}
.sy-gama-d{margin:clamp(30px,4vw,60px) 0 clamp(40px,5vw,70px)}
.sy-gama-m{display:none}
@media (max-width:760px){
  .sy-gama-d{display:none}
  .sy-gama-m{display:block;aspect-ratio:4/5;margin:clamp(24px,6vw,40px) 0 clamp(30px,8vw,50px)}
}