/* Votton · votton.es */
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --canvas:#f6f3ef;
  --panel:#ffffff;
  --line:#e4ddd5;
  --accent:#a87b55;
  --accent-hover:#8a6240;
  --accent-muted:rgba(168,123,85,.18);
  --text-secondary:#5c554f;
  --text-primary:#141414;
  --footer:#141414;
  --white:#f7f4f0;
  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* sombras muy difuminadas: no recuadran la letra, solo la separan un poco del fondo */
  --tshadow-dark:0 2px 18px rgba(5,5,10,.55),0 10px 56px rgba(5,5,10,.5);
  --tshadow-light:0 2px 18px rgba(255,255,255,.8),0 10px 56px rgba(255,255,255,.75);
  --vh:100vh;
  --gutter:clamp(20px,6vw,88px);
  --tape-base:var(--accent-muted);
  --tape-fill:var(--accent);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
@supports (height:100dvh){:root{--vh:100dvh}}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
img,video,canvas,svg{display:block;max-width:100%}
a{color:var(--accent-hover);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--text-primary)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.96;letter-spacing:.01em}
p{margin:0}
strong{font-weight:600}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--text-primary);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:13px 24px;border-radius:6px;border:0;background:var(--accent);color:var(--text-primary);font-family:var(--body);font-weight:600;font-size:16px;line-height:1.1;text-decoration:none;text-shadow:none;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:var(--panel);color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (pointer:coarse){.btn{min-height:48px}}

.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.container{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}

/* ============ scrub sections ============ */
.scrub{position:relative;height:var(--scrub-h,700vh);background:#0a0a0c}
#hero1{--scrub-h:340vh}
#hero2{--scrub-h:175vh}
.scrub-stage{position:sticky;top:0;height:100vh;height:var(--vh);overflow:hidden;background:#0a0a0c;contain:strict}
.scrub-media{position:absolute;inset:0}
.scrub-media .poster,.scrub-media video,.scrub-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scrub-media .poster{background-size:cover;background-position:50% 50%;transition:opacity .9s var(--ease)}
.scrub-media video{opacity:0;transition:opacity .9s var(--ease);transform:translateZ(0);will-change:transform;pointer-events:none}
.scrub-stage.video-ready video{opacity:1}
.scrub-stage.video-ready .poster{opacity:0}
.scrub-media canvas{opacity:0;transition:opacity .6s var(--ease)}
.scrub-stage.frames-ready canvas{opacity:1}
.scrub-stage.frames-ready .poster{opacity:0}
.scrub-stage.video-failed video{display:none}

/* viñeta: oscurece (o aclara, sobre el estudio blanco) los bordes para centrar la mirada */
.vig{position:absolute;inset:0;z-index:1;pointer-events:none}
.vig::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 72% 62% at 50% 50%,rgba(5,5,10,0) 30%,rgba(5,5,10,.34) 68%,rgba(5,5,10,.72) 100%);transition:opacity .9s var(--ease)}
#hero1 .scrub-stage.is-light .vig::before{opacity:0}

/* loading ring */
.ring{position:absolute;left:50%;bottom:calc(14px + var(--safe-bottom));width:30px;height:30px;transform:translateX(-50%);color:rgba(255,255,255,.85);opacity:.9;transition:opacity .6s var(--ease);z-index:3}
.ring circle{transition:stroke-dashoffset .15s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.scrub-stage.video-ready .ring,.scrub-stage.frames-ready .ring{opacity:0;pointer-events:none}
.chev{position:absolute;left:50%;bottom:calc(14px + var(--safe-bottom));width:22px;height:22px;transform:translateX(-50%);color:rgba(255,255,255,.85);animation:chev 2.4s var(--ease) -1.2s infinite;z-index:3}
@keyframes chev{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* bands: --k avanza con el scroll; --kl, en la primera banda, también con la carga */
.band{position:absolute;opacity:0;pointer-events:none;--k:0;z-index:2}
.band.on{pointer-events:auto}
.band.dark{color:var(--white)}
.band.light{color:var(--text-primary)}
.band .btn{text-shadow:none;pointer-events:auto}
.band h1,.band h2,.band p{position:relative}
/* titulares palabra a palabra, rápidos */
.band .w{display:inline-block;white-space:pre;--kc:clamp(0,(var(--kl,var(--k,0)) - var(--th,0))*4,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.3em))}
/* lo que entra con la carga, escalonado */
.band .s2{--ks:clamp(0,(var(--kl,var(--k,0)) - .4)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.band .s3{--kb:clamp(0,(var(--kl,var(--k,0)) - .62)*3.5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
/* lo que entra al deslizar, por pasos cortos */
.band .l1{--kc:clamp(0,var(--k,0)*2.4,1)}
.band .l2{--kc:clamp(0,(var(--k,0) - .4)*2.4,1)}
.band .l3{--kc:clamp(0,(var(--k,0) - .72)*3.6,1)}
.band .l1,.band .l2,.band .l3{opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*14px))}
/* pulse (phone vibration) */
.band.pulse.on h2{animation:pulse .7s var(--ease) 1}
@keyframes pulse{0%{transform:translate3d(0,0,0)}12%{transform:translate3d(-2px,0,0)}24%{transform:translate3d(2px,0,0)}36%{transform:translate3d(-2px,0,0)}48%{transform:translate3d(1px,0,0)}60%{transform:translate3d(0,0,0)}}

/* -------- block 1 · portada -------- */
#hero1 .b-cover{right:var(--gutter);top:66%;transform:translateY(-50%);width:min(42vw,580px)}
#hero1 .b-cover h1{font-size:clamp(96px,13.5vw,200px);line-height:.86;margin-left:-.03em}
#hero1 .b-cover .sub{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4.4vw,62px);line-height:1;margin-top:10px}
#hero1 .b-cover .who{margin-top:24px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
#hero1 .b-cover .cta{margin-top:34px}
#hero1 .b-cover .btn{min-height:54px;padding:15px 30px;font-size:17px}
#hero1 .b-hint{left:0;right:0;bottom:calc(22px + var(--safe-bottom));text-align:center}
/* aviso de deslizar: texto en mono + flecha que baja y sube */
#hero1 .hint{font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;line-height:1.3}
#hero1 .hint span,#hero1 .hint .arrow{opacity:.92}
#hero1 .hint .arrow{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:hintarrow 2.2s var(--ease) infinite}
@keyframes hintarrow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
#hero1 .b-cover .hint{display:none}
/* «Lo que ganas»: el titular arriba y, debajo, las frases en dos grupos */
#hero1 .gain{position:absolute;z-index:2;left:var(--gutter);top:clamp(28px,6vh,64px);width:min(30vw,440px);pointer-events:none}
#hero1 .gain .band{position:relative}
#hero1 .gain .slot{display:grid;margin-top:clamp(26px,4vh,44px)}
#hero1 .gain .slot .band{grid-area:1/1}
#hero1 .gain h2{font-size:clamp(30px,3.2vw,46px)}
#hero1 .gain p,#hero1 .b-low p{font-size:clamp(18px,1.5vw,23px);line-height:1.45;font-weight:400}
#hero1 .b-low{left:var(--gutter);bottom:clamp(40px,9vh,96px);width:min(30vw,440px)}
#hero1 .b-low p{text-shadow:0 0 18px rgba(255,255,255,.95),0 0 40px rgba(255,255,255,.9),0 0 70px rgba(255,255,255,.85)}
#hero1 .b-low p+p{margin-top:16px}

/* -------- block 4 · solo trabajo para ti · quién soy -------- */
#hero2 .b-only,#hero2 .b-who{left:var(--gutter);top:50%;transform:translateY(-50%);width:min(30vw,440px)}
#hero2 .b-only h2{font-size:clamp(44px,4.6vw,76px);line-height:.9}
#hero2 .b-only .sub{margin-top:14px;font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,2.2vw,36px);line-height:1}
#hero2 .b-only .bot p{margin-top:16px;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
#hero2 .b-who .label{opacity:.9}
#hero2 .b-who h2{margin-top:10px;font-size:clamp(30px,3.2vw,52px)}
#hero2 .b-who p{margin-top:16px;font-size:clamp(14px,1.05vw,17px);line-height:1.6}
#hero2 .b-who .label+p{margin-top:12px}
#hero2 .b-only .bot,#hero2 .b-who .bot{display:contents}
/* redes: botones con el logotipo */
.social{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.social a{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px 8px 11px;border-radius:6px;color:inherit;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-shadow:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);background:rgba(10,10,12,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.social a:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(10,10,12,.45);color:inherit}
.social svg{width:18px;height:18px;fill:currentColor;flex:none}
#hero2 .b-who-low .bot{display:block}
#hero2 .b-who-top{top:38%}
#hero2 .b-who-low{top:62%}
#hero2 .b-who-low p{margin-top:0}
/* quién soy, continuación: bloque blanco */
.whomore{background:var(--panel);padding:clamp(64px,10vh,120px) 0;border-top:1px solid var(--line)}
.whomore p{max-width:56ch;font-size:clamp(17px,1.3vw,21px);line-height:1.6}
.whomore .social{margin-top:32px}
.whomore .social a{color:var(--text-primary);background:transparent;box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.whomore .social a:hover{box-shadow:inset 0 0 0 1px var(--accent);background:var(--canvas)}
.whomore .cta{margin-top:36px}

/* short desktop windows */
@media (max-height:560px) and (min-width:721px){#hero1 .b-hint,.ring,.chev{display:none}}

/* -------- portrait (phones and portrait tablets) -------- */
@media (orientation:portrait){
  :root{--gutter:clamp(20px,6.5vw,56px)}
  #hero1{--scrub-h:300vh}
  #hero2{--scrub-h:170vh}
  /* portada: VOTTON encima de la cabeza, el resto debajo de la cara */
  #hero1 .b-cover{left:0;right:0;top:0;bottom:0;transform:none;width:auto;text-align:center;display:flex;flex-direction:column;justify-content:space-between;padding:calc(7dvh + var(--safe-top)) var(--gutter) calc(8dvh + var(--safe-bottom))}
  #hero1 .b-cover h1{font-size:min(34vw,190px);line-height:.84;margin:0;letter-spacing:.02em}
  #hero1 .b-cover .sub{font-size:clamp(28px,8vw,46px);margin-top:0}
  #hero1 .b-cover .who{margin-top:18px;font-size:12px;letter-spacing:.07em}
  #hero1 .b-cover .cta{margin-top:30px}
  #hero1 .b-hint{display:none}
  #hero1 .b-cover .hint{display:flex;font-size:12.5px;letter-spacing:.09em;gap:6px;margin-bottom:28px}
  #hero1 .b-cover .hint span{white-space:nowrap}
  #hero1 .b-cover .hint .arrow{width:36px;height:36px}
  #hero1 .gain{left:var(--gutter);right:var(--gutter);top:calc(5dvh + var(--safe-top));width:auto}
  #hero1 .gain h2{font-size:clamp(32px,9vw,56px)}
  #hero1 .gain p,#hero1 .b-low p{font-size:clamp(17px,4.6vw,21px);line-height:1.45}
  #hero1 .gain .slot{margin-top:clamp(22px,3.4dvh,34px)}
  .btn-sm{min-height:40px;padding:10px 16px;font-size:14px}
  #hero1 .b-p2{bottom:calc(17dvh + var(--safe-bottom))}
  #hero1 .b-low{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(7dvh + var(--safe-bottom))}
  #hero1 .b-low p{text-shadow:none}
  #hero1 .b-low p+p{margin-top:14px}
  #hero1 .b-g2{left:calc(var(--gutter) + 8px);right:calc(var(--gutter) + 8px);bottom:calc(9dvh + var(--safe-bottom))}
  #hero1 .b-g2 p{font-size:clamp(14.5px,3.9vw,17px);line-height:1.5}
  #hero1 .b-g2 p+p{margin-top:12px}
  /* bloque 4: arriba y abajo del móvil y de la cara */
  #hero2 .b-only,#hero2 .b-who{left:var(--gutter);right:var(--gutter);top:0;bottom:0;transform:none;width:auto;display:flex;flex-direction:column;justify-content:space-between;padding:calc(6dvh + var(--safe-top)) 0 calc(6dvh + var(--safe-bottom))}
  #hero2 .b-only .bot,#hero2 .b-who .bot{display:block}
  #hero2 .b-only h2{font-size:clamp(52px,16vw,96px)}
  #hero2 .b-only .sub{font-size:clamp(24px,7vw,40px);margin-top:12px}
  #hero2 .b-only .bot p{margin-top:12px;font-size:clamp(14px,3.9vw,18px);line-height:1.5}
  #hero2 .b-who h2{font-size:clamp(28px,8vw,48px)}
  #hero2 .b-who p{margin-top:clamp(10px,1.8dvh,18px);font-size:clamp(15px,4.1vw,18px);line-height:1.55}
  #hero2 .b-who-top,#hero2 .b-who-low{top:0}
  #hero2 .b-who-low{justify-content:flex-end;padding-bottom:calc(12dvh + var(--safe-bottom))}
  .whomore{padding:56px 0 64px}
  .whomore .social{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
  .whomore .social a{justify-content:center;min-height:44px}
  .whomore .cta{margin-top:32px}
}

/* ============ measuring tape (progress) ============ */
.tape{position:fixed;top:0;right:0;width:16px;height:100vh;height:var(--vh);z-index:90;pointer-events:none;transition:opacity .4s var(--ease)}
.tape svg{position:absolute;inset:0;width:100%;height:100%}
.tape .base{color:var(--tape-base)}
.tape .fill{color:var(--tape-fill);clip-path:inset(0 0 var(--left,100%) 0)}
body.on-dark .tape .base{color:rgba(255,255,255,.22)}
body.on-dark .tape .fill{color:rgba(255,255,255,.85)}
@media (orientation:portrait){.tape{width:10px}}

/* ============ block 2 · map ============ */
.map{position:relative;min-height:100vh;min-height:var(--vh);display:grid;align-items:center;background:#2a221c;color:var(--white);isolation:isolate;--pich:min(50vh,440px)}
.map .pic{position:absolute;inset:0;z-index:-1}
.map .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.map .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,12,0) 45%,rgba(20,15,12,.35) 70%,rgba(20,15,12,.55) 100%)}
.map .inner{position:relative;width:min(1180px,100% - 2*var(--gutter));margin-inline:auto;display:grid;grid-template-columns:1fr minmax(0,520px);padding:clamp(80px,12vh,140px) 0}
.map .text{grid-column:2}
.map h2{font-size:clamp(34px,4vw,60px)}
.map p{margin-top:16px;font-size:clamp(16px,1.15vw,18px);line-height:1.55}
.map .cta{margin-top:28px}
.map .cta .btn{text-shadow:none}
.fade{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.in .fade{opacity:1;transform:none}
.in .fade:nth-child(2){transition-delay:.18s}.in .fade:nth-child(3){transition-delay:.36s}.in .fade:nth-child(4){transition-delay:.54s}.in .fade:nth-child(5){transition-delay:.72s}.in .fade:nth-child(6){transition-delay:.9s}
.in.done .fade,.in.done .fade:nth-child(n){transition-delay:0s!important}
@media (orientation:portrait),(max-width:720px){
  .map{display:block;background:var(--canvas);color:var(--text-primary);min-height:0}
  .map .pic{position:relative;inset:auto;z-index:0;height:var(--pich)}
  .map .pic img{object-position:18% 50%}
  .map .pic::after{background:linear-gradient(180deg,rgba(20,15,12,0) 30%,rgba(20,15,12,.25) 60%,rgba(20,15,12,.6) 100%)}
  /* el titular sobre la imagen; el resto, en el cuadro blanco de debajo */
  .map h2{position:absolute;color:var(--white);font-size:clamp(32px,9vw,56px)}
  .map .inner{display:block;width:auto;margin:0 var(--gutter);padding:40px 0 72px}
  .map .text{position:relative;text-shadow:none}
  .map h2{left:0;right:0;bottom:calc(100% + 92px)}
  .map .pic::after{background:linear-gradient(180deg,rgba(20,15,12,0) 15%,rgba(20,15,12,.45) 50%,rgba(20,15,12,.7) 100%)}
  .map .text p:first-of-type{margin-top:0}
  .map p{color:var(--text-primary);font-size:16px;line-height:1.6}
  .map p+p{margin-top:18px}
  .map .cta{margin-top:28px}
  .in .fade.map-h{transition-delay:0s}
}

/* ============ block 3 · services ============ */
.services{padding:clamp(72px,10vh,120px) 0}
.services h2{font-size:clamp(40px,5vw,72px)}
.services .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 26px 28px;transition:border-color .35s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card:hover{border-color:var(--accent);box-shadow:0 14px 40px rgba(60,40,20,.08);transform:translateY(-2px)}
.card h3{font-size:clamp(28px,2.2vw,36px)}
.card .for{display:block;margin-top:6px;color:var(--text-secondary);font-size:15px;line-height:1.45}
.card .for strong{color:var(--text-primary)}
.card .prices{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:12px;align-items:baseline;margin:18px 0 6px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card .price{display:contents}
.card .price .num{font-family:var(--display);font-size:clamp(30px,2.4vw,38px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.card .price .what{font-size:14px;line-height:1.35;color:var(--text-secondary)}
.card .per{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.card ul{margin:14px 0 0;padding:0;list-style:none}
.card li{position:relative;padding-left:18px;font-size:15px;line-height:1.45;color:var(--text-primary)}
.card li+li{margin-top:9px}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--accent)}
.card .note{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;color:var(--text-secondary);line-height:1.45}
.card.all{background:var(--canvas);border-color:var(--line)}
.card.all h3{color:var(--accent-hover)}
/* tarjetas de tipo: cabecera con el dibujo del coche; en el móvil, desplegables */
.card.type summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ico h3 plus" "for for plus";column-gap:14px;align-items:center;cursor:default}
.card.type summary::-webkit-details-marker{display:none}
.card.type .ico{grid-area:ico;width:64px;height:32px;color:var(--accent)}
.card.type .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card.type h3{grid-area:h3;font-size:clamp(32px,2.6vw,40px);line-height:1}
.card.type .for{grid-area:for;margin-top:12px}
.card.type .plus{display:block;grid-area:plus;width:22px;height:22px;position:relative;transition:transform .45s var(--ease)}
.card.type .plus::before,.card.type .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--accent);transform:translate(-50%,-50%)}
.card.type .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.card.type[open] .plus{transform:rotate(45deg)}
.card.type[open]{border-color:var(--accent)}
.card.type summary{cursor:pointer}
@media (min-width:721px){
  .services .grid{display:block;margin-top:40px}
  .services .grid .card+.card{margin-top:16px}
  .card.all{padding:32px 36px 36px}
  .card.all ul{columns:2;column-gap:40px}
  .card.all li{break-inside:avoid}
  .card.type{padding:0}
  .card.type:hover{transform:none}
  .card.type summary{padding:30px 36px;column-gap:30px}
  .card.type .ico{width:140px;height:70px}
  .card.type .ico svg{stroke-width:1.3}
  .card.type h3{font-size:clamp(44px,4.4vw,64px)}
  .card.type .for{margin-top:16px;font-size:17px;max-width:70ch}
  .card.type .plus{width:28px;height:28px}
  .card.type .plus::before,.card.type .plus::after{width:18px}
  .card.type .body{padding:0 36px 36px;display:grid;grid-template-columns:minmax(0,340px) 1fr;column-gap:56px;align-items:start}
  .card.type .body .prices{margin:0;padding:22px 0;border-bottom:0}
  .card.type .body ul{margin-top:22px;padding-top:0}
  .card.type .body .per{grid-column:1}
  .card.type .body .note{grid-column:1/-1}
  .services .cta{text-align:center;margin-top:44px}
}
.services .cta{margin-top:36px}
.card{opacity:0;transform:translateY(18px)}
.in .card{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease-out),border-color .35s var(--ease),box-shadow .5s var(--ease-out)}
.in .card:nth-child(2){transition-delay:.08s}.in .card:nth-child(3){transition-delay:.16s}.in .card:nth-child(4){transition-delay:.24s}.in .card:nth-child(5){transition-delay:.32s}.in .card:nth-child(6){transition-delay:.4s}
.in.done .card,.in.done .card:nth-child(n){transition-delay:0s!important}
@media (max-width:1024px){.services .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .services .grid{display:block;margin-top:28px}
  .services .grid .card{opacity:1;transform:none}
  .services .grid .card+.card{margin-top:12px}
  .card{padding:20px 18px 22px}
  .card:hover{transform:none;box-shadow:none}
  .card.type{padding:0}
  .card.type summary{padding:20px 18px}
  .card.type .for{font-size:14px}
  .card.type .body{padding:0 18px 22px}
  .card.type .body .prices{margin-top:0}
}

/* ============ block 5 · faq ============ */
.faq{padding:clamp(64px,9vh,110px) 0;border-top:1px solid var(--line)}
.faq h2{font-size:clamp(38px,4.6vw,66px);max-width:14ch}
.faq .groups{margin-top:36px}
.faq .group+.group{margin-top:56px}
.faq .group .label{color:var(--text-secondary);margin:0 0 14px}
.faq .list{border-top:1px solid var(--line)}
.faq .cta{margin-top:40px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;font-weight:600;font-size:clamp(17px,1.3vw,20px);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:22px;height:22px;position:relative;align-self:center;transition:transform .45s var(--ease)}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--accent);transform:translate(-50%,-50%)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;max-width:62ch;color:var(--text-secondary);font-size:16px;line-height:1.6}
.faq .a strong{color:var(--text-primary)}

/* ============ block 6 · contact ============ */
.contact{padding:clamp(80px,14vh,160px) 0;text-align:center;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(44px,6vw,88px)}
.contact p{margin:22px auto 0;max-width:52ch;font-size:clamp(16px,1.2vw,19px);color:var(--text-secondary);line-height:1.6}
.contact p strong{color:var(--text-primary)}
.contact .cta{margin-top:32px}
.rise{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease-out)}
.in .rise{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.12s}.in .rise:nth-child(3){transition-delay:.24s}.in .rise:nth-child(4){transition-delay:.36s}
.in.done .rise,.in.done .rise:nth-child(n){transition-delay:0s!important}

/* ============ footer ============ */
footer{background:var(--footer);color:#d9d2ca;padding:40px 0 calc(36px + var(--safe-bottom));font-size:14px}
footer .row{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:baseline}
footer a,footer button.link{color:var(--accent);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease)}
footer a:hover,footer button.link:hover{color:#fff;border-color:rgba(255,255,255,.5)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ============ cookies ============ */
.ck{position:fixed;left:50%;bottom:calc(14px + var(--safe-bottom));transform:translate(-50%,calc(100% + 30px));width:min(720px,100% - 24px);z-index:120;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(30,20,10,.14);font-size:14px;line-height:1.5;transition:transform .6s var(--ease-out),opacity .4s var(--ease);opacity:0;pointer-events:none}
.ck.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ck p{color:var(--text-secondary)}
.ck p a{color:var(--accent-hover)}
.ck .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.ck .btn{min-height:42px;padding:10px 18px;font-size:14px}
.ck .cfg{display:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ck.open .cfg{display:block}
.ck label{display:flex;align-items:center;gap:10px;cursor:pointer}
.ck label+label{margin-top:8px}
.ck input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.ck .cfg .lead{color:var(--text-secondary);margin-top:6px;font-size:13px}
/* en el ordenador, tarjeta en la esquina izquierda: el texto de la portada va a la derecha */
@media (orientation:landscape) and (min-width:721px){
  .ck{left:20px;transform:translateY(calc(100% + 30px));width:min(420px,100% - 40px)}
  .ck.show{transform:none}
}

/* ============ legal pages ============ */
.legal{padding:clamp(48px,8vh,96px) 0 clamp(64px,10vh,120px)}
.legal .top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.legal .brand{font-family:var(--display);font-size:28px;text-transform:uppercase;color:var(--text-primary);text-decoration:none;letter-spacing:.02em}
.legal h1{font-size:clamp(40px,5.6vw,76px);margin-bottom:24px}
.legal h2{font-size:clamp(26px,2.6vw,36px);margin:40px 0 12px}
.legal h3{font-size:clamp(22px,2vw,28px);margin:32px 0 10px}
.legal p,.legal li{max-width:70ch;font-size:16.5px;line-height:1.65}
.legal p+p{margin-top:14px}
.legal ul{padding-left:20px;margin:12px 0}
.legal li+li{margin-top:6px}
.legal table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14.5px;line-height:1.45}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.legal th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);font-weight:500}
.legal .tablewrap{overflow-x:auto}
.legal .meta{color:var(--text-secondary);font-size:14px;margin-top:40px}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .fade,.rise,.card{opacity:1!important;transform:none!important}
  .band .w,.band .s2,.band .s3,.band .l1,.band .l2,.band .l3{opacity:1;transform:none}
  .scrub-media video,.scrub-media canvas{display:none}
  .chev,#hero1 .hint .arrow{animation:none!important}
}