/* ========================================================================
   assettocorsaevo.es — sistema visual
   Base clara (blanco / #F0F0F0), texto #212529, acento rojo #E20613,
   secundario amarillo #FFF300, geometría en paralelogramo y foto a sangre.
   Tokens tomados del tema de la web oficial de Assetto Corsa EVO.
   ======================================================================== */
:root{
  --paper:#FFFFFF;
  --paper-2:#F0F0F0;
  --paper-3:#E6E8EA;
  --ink:#212529;
  --ink-2:#5C636B;
  --ink-3:#8A9099;
  --line:#DCDFE3;
  --line-2:#C9CDD2;
  --red:#E20613;
  --red-dark:#B00410;
  --yellow:#FFF300;
  --dark:#101114;
  --dark-2:#191B1F;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Roboto',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
  --sk:-14deg;
  --unsk:14deg;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 18px}}

h1,h2,h3,h4{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.94;letter-spacing:-.03em}
h2{font-size:clamp(30px,5vw,58px)}
h3{font-size:clamp(21px,2.8vw,30px)}
.kicker{font-family:var(--data);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.kicker b{color:var(--red);font-weight:700}
.lead{color:var(--ink-2);max-width:62ch;margin-top:16px;font-size:17px}
section{padding:88px 0}
@media (max-width:900px){section{padding:56px 0}}
.sec-head{margin-bottom:34px}
.sec-head h2{margin-top:10px}

/* zonas */
.zone-grey{background:var(--paper-2)}
.zone-dark{background:var(--dark);color:var(--paper)}
.zone-dark .lead{color:#B6BCC4}
.zone-dark .kicker{color:#8A9099}

/* --- paralelogramos (firma visual) --- */
.chip{display:inline-block;transform:skew(-35deg);background:var(--paper-2);border:1px solid var(--line);padding:6px 16px}
.chip>span{display:block;transform:skew(35deg);font-family:var(--data);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.chip.red{background:var(--red);border-color:var(--red)}
.chip.red>span{color:#fff}
.chip.yellow{background:var(--yellow);border-color:var(--yellow)}
.chip.yellow>span{color:#1A1A00}
.chip.dark{background:rgba(16,17,20,.82);border-color:rgba(255,255,255,.22)}
.chip.dark>span{color:#fff}

.frame{position:relative;overflow:hidden;transform:skew(var(--sk))}
.frame img{width:120%;margin-left:-10%;transform:skew(var(--unsk));object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media (max-width:700px){
  .frame{transform:none}
  .frame img{width:100%;margin-left:0;transform:none}
}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;justify-content:center;transform:skew(var(--sk));background:var(--red);border:0;cursor:pointer;text-decoration:none;padding:15px 32px;transition:background .15s}
.btn>span{display:block;transform:skew(var(--unsk));font-family:var(--display);font-weight:900;font-style:italic;font-size:15px;letter-spacing:.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.btn:hover{background:var(--red-dark)}
.btn.yellow{background:var(--yellow)}
.btn.yellow>span{color:#1A1A00}
.btn.yellow:hover{background:#E6DB00}
.btn.dark{background:var(--dark)}
.btn.dark:hover{background:#000}
.btn.line{background:transparent;border:2px solid var(--ink)}
.btn.line>span{color:var(--ink)}
.btn.line:hover{background:var(--ink)}
.btn.line:hover>span{color:#fff}
.btn.line-light{background:transparent;border:2px solid #fff}
.btn.line-light:hover{background:#fff}
.btn.line-light:hover>span{color:var(--ink)}
.btn.full{display:flex;width:100%}
.btn.sm{padding:11px 22px}
.btn.sm>span{font-size:13px}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* --- cabecera --- */
.topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:72px}
.mark{font-family:var(--display);font-weight:900;font-style:italic;font-size:19px;text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.mark span{color:var(--red)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
@media (max-width:900px){
  .nav{gap:16px;order:3;margin:0;width:100%;overflow-x:auto;padding-bottom:2px}
  .topbar .wrap{height:auto;padding-top:12px;padding-bottom:8px;flex-wrap:wrap}
}

/* --- hero a sangre --- */
.hero{position:relative;isolation:isolate;min-height:min(86vh,820px);display:flex;align-items:center;overflow:hidden;padding:130px 0 100px;color:#fff}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:114%;object-fit:cover;object-position:50% 46%;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.55) 46%,rgba(10,11,13,.10) 100%),
             linear-gradient(180deg,rgba(10,11,13,.45) 0%,rgba(10,11,13,0) 32%,rgba(10,11,13,.55) 100%)}
.hero-bars{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:9px;display:flex;transform:skew(var(--sk))}
.hero-bars i{flex:1}
.hero-bars i:nth-child(1){background:var(--red)}
.hero-bars i:nth-child(2){background:#fff}
.hero-bars i:nth-child(3){background:var(--yellow)}
.hero .pre{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(14px,2.2vw,22px);letter-spacing:.1em}
.hero h1{font-size:clamp(32px,7.4vw,96px);line-height:.9;letter-spacing:-.045em;margin:10px 0 0;word-break:break-word}
.hero h1 em{font-style:italic;color:var(--red)}
.hero .sub{margin-top:22px;max-width:56ch;font-size:18px;color:#DCE0E5}
.hero .tag{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:700px){.hero{min-height:74vh;padding:100px 0 76px}}

/* --- bloques a sangre --- */
.cover{position:relative;isolation:isolate;min-height:min(72vh,640px);display:flex;align-items:center;overflow:hidden;padding:74px 0;color:#fff}
.cover-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cover-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cover:hover .cover-media img{transform:scale(1.04)}
.cover-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,13,.90) 0%,rgba(10,11,13,.62) 40%,rgba(10,11,13,.06) 76%,rgba(10,11,13,0) 100%)}
.cover.rev .cover-scrim{background:linear-gradient(270deg,rgba(10,11,13,.90) 0%,rgba(10,11,13,.62) 40%,rgba(10,11,13,.06) 76%,rgba(10,11,13,0) 100%)}
/* .wrap es hijo flex: sin esto encoge al contenido y se autocentra */
.hero > .wrap,
.cover > .wrap,
.pagehead > .wrap{width:100%}
.cover-body{max-width:48ch;margin-right:auto}
.cover.rev .cover-body{margin-left:auto;margin-right:0;text-align:right}
.cover.rev .taglist{justify-content:flex-end}
.cover .kicker{color:#B9BFC7}
.cover-no{display:block;font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(50px,8vw,92px);line-height:.9;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.36);margin-bottom:6px}
.cover-body h3{margin:12px 0 14px;font-size:clamp(26px,4.2vw,46px)}
.cover-body p{color:#D3D8DD;font-size:16.5px}
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
@media (max-width:900px){
  .cover{min-height:0;padding:52px 0}
  .cover-scrim,.cover.rev .cover-scrim{background:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.88))}
  .cover.rev .cover-body{margin-left:0;text-align:left}
  .cover.rev .taglist{justify-content:flex-start}
}

/* --- rejilla de tarjetas (blog / tienda / genérica) --- */
.grid{display:grid;gap:26px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid.g4{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr}}

.tile{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .18s,transform .22s}
.tile:hover{transform:translateY(-4px);border-color:var(--red)}
.tile-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-media img{transform:scale(1.05)}
.tile-flag{position:absolute;left:14px;top:14px;z-index:2}
.tile-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.tile-meta{font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tile h3{font-size:20px;line-height:1.06}
.tile p{color:var(--ink-2);font-size:14.5px}
.tile .more{margin-top:auto;padding-top:12px;font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

/* --- precios / productos --- */
.price{margin-top:20px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.price .num{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(34px,4.6vw,50px);letter-spacing:-.05em;line-height:.88}
.price .was{font-family:var(--data);font-size:14px;color:var(--ink-3);text-decoration:line-through;padding-bottom:6px}
.price .per{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-bottom:5px}
.microcopy{margin-top:12px;font-family:var(--data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* --- galería --- */
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gal-nav{display:flex;gap:10px}
.gal-nav button{width:50px;height:50px;background:transparent;border:1px solid var(--line-2);color:var(--ink);cursor:pointer;transform:skew(var(--sk));transition:.15s}
.gal-nav button>span{display:block;transform:skew(var(--unsk));font-family:var(--data);font-size:17px;line-height:1}
.gal-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.gal-nav button:disabled{opacity:.3;cursor:default}
.gal-nav button:disabled:hover{background:transparent;border-color:var(--line-2);color:var(--ink)}
.tabs{display:inline-flex;flex-wrap:wrap;margin-top:26px;transform:skew(var(--sk));border:1px solid var(--line-2);background:var(--paper)}
.tabs button{background:none;border:0;cursor:pointer;padding:12px 24px;transition:.15s}
.tabs button>span{display:block;transform:skew(var(--unsk));font-family:var(--data);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.tabs button+button{border-left:1px solid var(--line-2)}
.tabs button[aria-pressed="true"]{background:var(--ink)}
.tabs button[aria-pressed="true"]>span{color:#fff}
.tabs em{font-style:normal;opacity:.5;margin-left:8px}
.gal{margin-top:24px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding:6px 0}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.slide{position:relative;flex:0 0 clamp(280px,60vw,700px);scroll-snap-align:center}
.slide .shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;overflow:hidden;transform:skew(var(--sk))}
.slide .shot img{width:120%;margin-left:-10%;aspect-ratio:16/9;object-fit:cover;transform:skew(var(--unsk));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.slide:hover .shot img{transform:skew(var(--unsk)) scale(1.04)}
.slide figcaption{display:flex;align-items:baseline;gap:14px;padding:13px 2px 0}
.slide figcaption b{font-family:var(--data);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.slide figcaption span{font-family:var(--data);font-size:11.5px;color:var(--ink-2)}
.slide .idx{position:absolute;top:14px;left:14px;z-index:3;transform:skew(-35deg);background:rgba(255,255,255,.94);padding:5px 13px}
.slide .idx span{display:block;transform:skew(35deg);font-family:var(--data);font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--ink)}
@media (max-width:700px){
  .slide .shot{transform:none}
  .slide .shot img{width:100%;margin-left:0;transform:none}
  .slide:hover .shot img{transform:scale(1.04)}
}
.gal-bar{display:flex;align-items:center;gap:20px;margin-top:18px}
.gal-prog{flex:1;height:3px;background:var(--line)}
.gal-prog i{display:block;height:100%;width:12%;background:var(--red);transition:width .18s linear}
.gal-count{font-family:var(--data);font-size:10px;letter-spacing:.18em;color:var(--ink-2);white-space:nowrap}
.gal-hint{font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){.gal-hint{display:none}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(12,13,15,.97);padding:24px}
.lb.on{display:flex;flex-direction:column}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--data);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9AA1A9}
.lb-top button,.lb-side{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;transform:skew(var(--sk))}
.lb-top button{width:44px;height:44px}
.lb-top button>span,.lb-side>span{display:block;transform:skew(var(--unsk));font-family:var(--data);font-size:16px}
.lb-top button:hover,.lb-side:hover{background:var(--red);border-color:var(--red)}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:18px;min-height:0;padding:18px 0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-side{width:50px;height:70px;flex:0 0 auto}
.lb-cap{display:flex;gap:16px;align-items:baseline;justify-content:center;font-family:var(--data);font-size:11px;color:#C9CFD5}
.lb-cap b{color:var(--red);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:700px){.lb-side{width:40px;height:56px}}

/* --- tablas de datos / listas --- */
.rows-1px{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rows-1px > *{background:var(--paper)}
.zone-grey .rows-1px > *{background:var(--paper-2)}
.zone-dark .rows-1px{background:#2A2D33;border-color:#2A2D33}
.zone-dark .rows-1px > *{background:var(--dark-2)}

.stat{padding:24px 22px}
.stat b{display:block;font-family:var(--display);font-weight:900;font-style:italic;font-size:34px;letter-spacing:-.04em}
.stat b.red{color:var(--red)}
.stat span{display:block;font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.zone-dark .stat span{color:#8A9099}

/* --- faq --- */
.faq{margin-top:30px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
  font-family:var(--display);font-weight:800;font-style:italic;font-size:17px;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--data);color:var(--red);font-size:20px;font-style:normal}
details[open] summary::after{content:"−"}
details p{padding:0 0 20px;color:var(--ink-2);max-width:68ch}

/* --- newsletter / cierre --- */
.join{background:var(--red);color:#fff;padding:60px 0}
.join .wrap{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.join h2{font-size:clamp(28px,4.4vw,50px)}
.join p{margin-top:10px;max-width:52ch;color:rgba(255,255,255,.9)}
@media (max-width:900px){.join .wrap{grid-template-columns:1fr}}

/* --- footer --- */
footer{background:var(--dark);color:#9AA1A9;padding:56px 0 40px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-size:14px;margin-bottom:14px}
footer a{display:block;text-decoration:none;color:#9AA1A9;padding:5px 0;font-family:var(--data);font-size:11.5px;letter-spacing:.06em}
footer a:hover{color:#fff}
footer .legal{margin-top:38px;padding-top:22px;border-top:1px solid #2A2D33;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6B7178}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}

/* --- reveal --- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* --- rejilla de circuitos --- */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.zone-dark .tracks{background:#2A2D33;border-color:#2A2D33}
.trk{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;transition:background .2s}
.zone-grey .trk{background:var(--paper-2)}
.zone-dark .trk{background:var(--dark-2)}
.trk:hover{background:var(--paper-3)}
.zone-dark .trk:hover{background:#22252A}
.trk .top{display:flex;justify-content:space-between;gap:10px;width:100%;font-family:var(--data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.trk.live .top{color:var(--red)}
.trk.live{background:linear-gradient(180deg,rgba(226,6,19,.10),transparent 70%)}
.trk h4{font-size:18px}
.trk p{color:var(--ink-2);font-size:13.5px}
.zone-dark .trk p{color:#A6ACB4}
.zone-dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.zone-dark .chip>span{color:#fff}
@media (max-width:900px){.tracks{grid-template-columns:1fr}}

/* --- toggle mensual/anual --- */
.toggle{display:inline-flex;margin-top:24px;transform:skew(var(--sk));border:1px solid var(--line-2);background:var(--paper)}
.toggle button{background:none;border:0;cursor:pointer;padding:12px 26px}
.toggle button>span{display:block;transform:skew(var(--unsk));font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.toggle button+button{border-left:1px solid var(--line-2)}
.toggle button[aria-pressed="true"]{background:var(--red)}
.toggle button[aria-pressed="true"]>span{color:#fff}

/* --- barra de cuenta atrás --- */
.countbar{background:var(--ink);color:#fff}
.countbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.countbar .lbl{font-family:var(--data);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.clock{display:flex;gap:9px;margin-top:8px}
.clock u{text-decoration:none;min-width:68px;text-align:center;background:rgba(255,255,255,.08);padding:9px 8px;transform:skew(var(--sk))}
.clock u>*{transform:skew(var(--unsk))}
.clock u b{display:block;font-family:var(--display);font-weight:900;font-style:italic;font-size:26px;line-height:1}
.clock u i{display:block;font-style:normal;font-family:var(--data);font-size:9px;letter-spacing:.18em;color:#9AA1A9;margin-top:4px}

/* --- tarjeta de producto --- */
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:border-color .18s,transform .22s}
.card:hover{transform:translateY(-4px);border-color:var(--red)}
.card.hot{border-color:var(--red)}
.card-media{position:relative;aspect-ratio:16/8;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{transform:scale(1.05)}
.card-flag{position:absolute;left:14px;bottom:14px;z-index:2}
.ribbon{position:absolute;top:14px;right:-4px;z-index:4;transform:skew(-35deg);background:var(--yellow);padding:7px 18px}
.ribbon span{display:block;transform:skew(35deg);font-family:var(--data);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#1A1A00}
.card-top{padding:24px 24px 22px;border-bottom:1px solid var(--line)}
.card-kind{font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.card h3{margin:12px 0 8px}
.card .what{color:var(--ink-2);font-size:14.5px;min-height:46px}
.card .price-note{margin-top:9px;font-family:var(--data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);min-height:15px}
.card ul{list-style:none;padding:22px 24px;flex:1}
.card li{display:flex;gap:13px;padding:8px 0;font-size:14.5px}
.card li::before{content:"";flex:0 0 10px;height:10px;margin-top:8px;background:var(--red);transform:skew(-35deg)}
.card li small{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}
.card-foot{padding:0 24px 26px}

/* --- destacado 6H --- */
.special{position:relative;isolation:isolate;overflow:hidden;color:#fff;margin-top:26px}
.special .sp-media{position:absolute;inset:0;z-index:-2}
.special .sp-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.special .sp-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,11,13,.93) 0%,rgba(10,11,13,.74) 46%,rgba(10,11,13,.20) 100%)}
.sp-body{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:44px 32px}
.sp-num{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(64px,11vw,128px);line-height:.8;letter-spacing:-.07em;color:var(--red)}
.sp-num small{display:block;font-family:var(--data);font-style:normal;font-size:10px;letter-spacing:.22em;color:#9AA1A9;margin-top:12px}
.sp-main p{color:#D3D8DD;max-width:52ch}
.sp-buy{min-width:240px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);padding:22px;text-align:right}
.sp-buy .num{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(30px,4.2vw,44px);letter-spacing:-.05em;line-height:.9}
.sp-buy .per{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9AA1A9;margin:8px 0 16px}
@media (max-width:1000px){.sp-body{grid-template-columns:1fr;gap:22px;padding:26px 22px}.sp-buy{text-align:left;min-width:0}}

/* --- cabecera de página interior --- */
.pagehead{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:120px 0 56px;display:flex;align-items:flex-end;min-height:min(52vh,460px)}
.pagehead-media{position:absolute;inset:0;z-index:-2}
.pagehead-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pagehead-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,11,13,.88),rgba(10,11,13,.45) 60%,rgba(10,11,13,.15))}
.pagehead h1{font-size:clamp(34px,6.4vw,74px)}
.pagehead p{margin-top:14px;max-width:60ch;color:#D3D8DD}
.crumb{font-family:var(--data);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9AA1A9}
.crumb a{text-decoration:none}
.crumb a:hover{color:#fff}

/* --- artículo --- */
.article{max-width:760px;margin:0 auto}
.article p{margin:18px 0;font-size:17px;color:#33383E}
.article h2{margin:40px 0 14px;font-size:clamp(24px,3.4vw,34px)}
.article h3{margin:30px 0 10px}
.article ul,.article ol{margin:18px 0 18px 22px;color:#33383E}
.article li{margin:7px 0}
.article figure{margin:28px 0}
.article figcaption{margin-top:10px;font-family:var(--data);font-size:11px;color:var(--ink-3)}

/* --- dibujo del trazado en la tarjeta de circuito --- */
.trk{position:relative;overflow:hidden}
.trk-map{
  width:100%;aspect-ratio:16/10;object-fit:contain;object-position:center;
  margin-top:12px;opacity:.85;
  transition:opacity .2s,transform .35s cubic-bezier(.2,.7,.2,1)}
.trk:hover .trk-map{opacity:1;transform:scale(1.04)}
/* el SVG viene en blanco: sobre fondo claro lo invertimos a tinta */
.zone-grey .trk-map,
body > section:not(.zone-dark) .trk-map{filter:invert(1) brightness(.28)}

/* --- tarjeta de circuito enlazada --- */
.trk{text-decoration:none;color:inherit}
.trk-more{margin-top:auto;padding-top:12px;font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);opacity:0;transform:translateY(4px);transition:.2s}
.trk:hover .trk-more{opacity:1;transform:none}
.zone-dark .trk:hover{background:#22252A}

/* --- cabecera de página de circuito --- */
.trackhead{padding:56px 0 48px;border-bottom:1px solid var(--line)}
.trackhead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.trackhead h1{font-size:clamp(34px,6vw,68px);margin:14px 0 0}
.trackhead .lead{margin-top:16px}
.trackhead .taglist{margin-top:22px}
.trackhead-map{background:var(--paper-2);border:1px solid var(--line);padding:26px;display:flex;align-items:center;justify-content:center}
.trackhead-map img{width:100%;height:auto;max-height:340px;object-fit:contain;filter:invert(1) brightness(.22)}
@media (max-width:900px){
  .trackhead-grid{grid-template-columns:1fr;gap:28px}
  .trackhead{padding:36px 0 32px}
}

/* --- variantes de trazado dentro de la página de circuito --- */
.lay{padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px}
.lay-map{width:100%;aspect-ratio:16/11;object-fit:contain;filter:invert(1) brightness(.22);margin-bottom:6px}
.lay b{font-family:var(--display);font-weight:900;font-style:italic;font-size:20px;text-transform:uppercase;letter-spacing:-.02em}
.lay p{color:var(--ink-2);font-size:14px}

/* --- lista de curiosidades --- */
.datos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.datos li{background:var(--paper-2);padding:20px 22px;font-size:15px;color:var(--ink-2);display:flex;gap:14px}
.datos li::before{content:"";flex:0 0 10px;height:10px;margin-top:8px;background:var(--red);transform:skew(-35deg)}
@media (max-width:800px){.datos{grid-template-columns:1fr}}

/* --- índice de contenidos --- */
.toc{border:1px solid var(--line);background:var(--paper-2);padding:22px 24px}
.toc b{display:block;font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.toc li{counter-increment:t}
.toc li a{display:block;padding:6px 0;text-decoration:none;font-size:15px;color:var(--ink)}
.toc li a::before{content:counter(t,decimal-leading-zero);font-family:var(--data);font-size:10px;color:var(--red);margin-right:12px}
.toc li a:hover{color:var(--red)}
@media (max-width:700px){.toc ol{grid-template-columns:1fr}}

/* --- tabla de curvas --- */
.tabla{overflow-x:auto;border:1px solid var(--line)}
.tabla table{width:100%;border-collapse:collapse;min-width:640px}
.tabla th,.tabla td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
.tabla thead th{background:var(--ink);color:#fff;font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.tabla tbody th{font-family:var(--display);font-style:italic;font-weight:800;font-size:15px;text-transform:uppercase;white-space:nowrap}
.tabla tbody tr:nth-child(even){background:var(--paper-2)}
.tabla td:first-child{font-family:var(--data);font-size:11px;color:var(--ink-3);white-space:nowrap}
.tabla td:last-child{color:var(--ink-2)}

/* --- listas del artículo --- */
.article ol{counter-reset:e;list-style:none;margin-left:0}
.article ol li{counter-increment:e;position:relative;padding-left:44px;margin:14px 0;color:#33383E}
.article ol li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--display);font-style:italic;font-weight:900;color:var(--red);font-size:17px}

/* --- hitos históricos --- */
.hitos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.hito{background:var(--paper);padding:26px 24px}
.zone-grey .hito{background:var(--paper-2)}
.hito b{font-family:var(--display);font-style:italic;font-weight:900;font-size:34px;color:var(--red);letter-spacing:-.04em;line-height:1}
.hito h3{font-size:19px;margin:10px 0 8px}
.hito p{color:var(--ink-2);font-size:14.5px}
@media (max-width:800px){.hitos{grid-template-columns:1fr}}

/* --- ficha técnica en dos columnas --- */
#ficha .tabla table{min-width:0}
#ficha .tabla tbody th{width:34%;white-space:normal;font-family:var(--data);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ============ VISUALES DE LA PÁGINA DE CIRCUITO ============ */

/* marca de agua del trazado en la cabecera */
.trackhead{position:relative;overflow:hidden}
.trackhead-wm{position:absolute;right:-8%;top:50%;transform:translateY(-50%) rotate(-8deg);
  width:56%;max-width:720px;opacity:.05;filter:invert(1);pointer-events:none;z-index:0}
.trackhead .wrap{position:relative;z-index:1}

/* medidores de perfil */
.medidores{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px;margin-top:32px;
  padding-top:28px;border-top:1px solid var(--line-2)}
.med span{display:block;font-family:var(--data);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.med i{display:block;height:8px;background:var(--paper-3);overflow:hidden}
.med u{display:block;height:100%;background:var(--red);text-decoration:none;transform:skew(var(--sk))}
.med b{display:block;margin-top:7px;font-family:var(--display);font-style:italic;font-weight:900;
  font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
@media (max-width:800px){.medidores{grid-template-columns:1fr 1fr;gap:18px 24px}}
@media (max-width:520px){.medidores{grid-template-columns:1fr}}

/* tarjetas de sector con dibujo */
.sectores{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.sector{background:var(--paper);display:grid;grid-template-columns:280px 1fr;gap:34px;
  align-items:center;padding:30px 32px}
.sector:nth-child(even){background:var(--paper-2)}
.sector-map{position:relative;background:var(--ink);padding:22px;display:flex;
  align-items:center;justify-content:center;aspect-ratio:4/3}
.sector-map img{width:100%;height:100%;object-fit:contain;opacity:.9}
.sector-n{position:absolute;left:0;top:0;transform:skew(-35deg);background:var(--red);
  padding:6px 18px;font-family:var(--display);font-style:italic;font-weight:900;
  font-size:15px;color:#fff}
.sector-txt h3{font-size:clamp(19px,2.4vw,25px);margin-bottom:12px}
.sector-txt p{color:#33383E;font-size:16px;margin:12px 0}
@media (max-width:820px){
  .sector{grid-template-columns:1fr;gap:20px;padding:24px 20px}
  .sector-map{aspect-ratio:16/9}
}

/* chips de tipo de curva */
.tipo{display:inline-block;transform:skew(-35deg);padding:4px 12px;
  font-family:var(--data);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
.tipo::first-line{}
.tabla .tipo{color:#1A1A00;background:var(--yellow)}
.tabla .tipo.rapida{background:var(--red);color:#fff}
.tabla .tipo.lenta{background:var(--ink);color:#fff}

/* banda a sangre con frase destacada */
.banda{background:var(--red);color:#fff;padding:52px 0;position:relative;overflow:hidden}
.banda.alt{background:var(--ink)}
.banda-in{position:relative;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.banda-in img{width:150px;height:150px;object-fit:contain;opacity:.85}
.banda blockquote{font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(21px,3.2vw,36px);line-height:1.08;letter-spacing:-.03em;text-transform:uppercase}
.banda::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 40px,transparent 40px 80px)}
@media (max-width:760px){
  .banda-in{grid-template-columns:1fr;gap:20px}
  .banda-in img{width:96px;height:96px}
}

/* --- banda fotográfica a sangre --- */
.fotoband{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:88px 0;min-height:420px;
  display:flex;align-items:center}
.fotoband-media{position:absolute;inset:0;z-index:-2}
.fotoband-media img{width:100%;height:100%;object-fit:cover}
.fotoband-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.66) 46%,rgba(10,11,13,.22) 100%)}
.fotoband > .wrap{width:100%}
.fotoband-in{display:grid;grid-template-columns:170px 1fr;gap:36px;align-items:center}
.fotoband-map{width:170px;height:170px;object-fit:contain;opacity:.95}
.fotoband h2{font-size:clamp(28px,4.6vw,54px);margin:10px 0 12px}
.fotoband p{color:#D3D8DD;max-width:52ch}
@media (max-width:760px){.fotoband{padding:56px 0;min-height:0}
  .fotoband-in{grid-template-columns:1fr;gap:18px}
  .fotoband-map{width:110px;height:110px}}

/* --- tarjetas de foto --- */
.shotcard{background:var(--paper);border:1px solid var(--line)}
.shotcard-media{overflow:hidden}
.shotcard-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.shotcard:hover .shotcard-media img{transform:scale(1.05)}
.shotcard figcaption{padding:14px 16px}
.shotcard figcaption b{display:block;font-family:var(--data);font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.shotcard figcaption span{font-size:14px;color:var(--ink-2)}

/* ============ ZONA DE COMUNIDAD ============ */

/* aviso de que estos servidores no son nuestros */
.aviso{display:flex;gap:18px;align-items:flex-start}
.aviso p{color:var(--ink-2);font-size:15px;max-width:80ch}
.aviso strong{color:var(--ink)}
@media (max-width:640px){.aviso{flex-direction:column;gap:12px}}

/* ficha de anuncio */
.ficha{display:flex;flex-direction:column}
.ficha .tile-media{aspect-ratio:16/9}
.ficha:hover{transform:none;border-color:var(--line)}
.ficha:hover .tile-media img{transform:scale(1.04)}
.ficha .tile-body{gap:10px}
.ficha h3{font-size:21px}
.ficha > .tile-body > p{color:var(--ink-2);font-size:14.5px}
.ficha-ejemplo{position:absolute;right:0;bottom:0;z-index:2;
  background:rgba(16,17,20,.86);color:#fff;font-family:var(--data);font-size:9px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px}

.ficha-datos{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:6px}
.ficha-datos li{background:var(--paper);padding:11px 12px}
.ficha-datos b{display:block;font-family:var(--data);font-size:8.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ficha-datos span{display:block;font-size:13.5px;margin-top:3px}
.ficha-cta{margin-top:auto;padding-top:14px}
.ficha-cta .microcopy{text-align:center}

/* tarjeta "tu servidor aquí" */
.ficha-vacante{border-style:dashed;border-color:var(--line-2);background:var(--paper-2)}
.ficha-vacante:hover{border-color:var(--red)}
.ficha-vacante .ficha-datos li{background:var(--paper-2)}
.vacante-media img{filter:grayscale(1) contrast(.9);opacity:.35}
.vacante-marca{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vacante-marca span{transform:skew(var(--sk));border:2px dashed var(--ink-3);padding:12px 26px;
  font-family:var(--display);font-style:italic;font-weight:900;font-size:17px;
  text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.7)}

.vacio{display:none;margin-top:26px;padding:26px;border:1px dashed var(--line-2);
  background:var(--paper-2);text-align:center;color:var(--ink-2)}
.vacio a{color:var(--red);font-weight:500}

/* planes de anuncio */
.planes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px}
.plan.destacado{border-color:var(--red)}
.plan-flag{position:absolute;top:16px;right:-4px;transform:skew(-35deg);background:var(--red);
  color:#fff;font-family:var(--data);font-size:8.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 14px}
.plan-top{display:flex;flex-direction:column;gap:12px}
.plan-top .price{margin-top:0}
.plan-lista{list-style:none;flex:1}
.plan-lista li{display:flex;gap:12px;padding:7px 0;font-size:14.5px;color:var(--ink-2)}
.plan-lista li::before{content:"";flex:0 0 9px;height:9px;margin-top:7px;
  background:var(--red);transform:skew(-35deg)}
@media (max-width:820px){.planes{grid-template-columns:1fr}}