:root{
  --fondo:#08090B; --tinta:#F4F5F7; --tenue:#9BA3AF;
  --vidrio:rgba(255,255,255,.045); --vidrio-2:rgba(255,255,255,.07);
  --borde:rgba(255,255,255,.09); --borde-fuerte:rgba(255,255,255,.16);
  --naranja:#FF6B1A; --ambar:#FFB35C;
  --grad:linear-gradient(120deg,#FF6B1A,#FFB35C);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Sora',sans-serif;
  --texto:'Manrope',system-ui,sans-serif;
  --radio:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--fondo);color:var(--tinta);font-family:var(--texto);font-size:16.5px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 500px at 85% -5%,rgba(255,107,26,.13),transparent 60%),
             radial-gradient(700px 500px at -10% 40%,rgba(255,179,92,.06),transparent 60%)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* ---- navegación ---- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60}
.nav .caja{max-width:1140px;margin:0 auto;padding:0 22px}
.nav .pastilla{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(10,11,14,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--borde);border-radius:999px;padding:10px 12px 10px 20px}
.marca{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.02em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.marca b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.enlaces{display:none;gap:20px;align-items:center}
.enlaces a{text-decoration:none;font-size:14px;font-weight:500;color:var(--tenue);transition:color .15s;white-space:nowrap}
.enlaces a:hover{color:var(--tinta)}
.enlaces a.activo{color:var(--naranja)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--grad);color:#1A1005;font-weight:600;font-size:15px;text-decoration:none;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(255,107,26,.35)}
.btn-menu{background:none;border:1px solid var(--borde);color:var(--tinta);border-radius:999px;padding:9px 14px;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.menu-movil{display:none;position:fixed;top:74px;left:22px;right:22px;z-index:59;background:rgba(10,11,14,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--borde);border-radius:20px;padding:16px 22px;flex-direction:column;gap:2px}
.menu-movil.abierto{display:flex}
.menu-movil a{text-decoration:none;color:var(--tenue);font-size:16px;padding:11px 0;font-weight:500}
.menu-movil a:hover{color:var(--tinta)}
.menu-movil a.activo{color:var(--naranja)}
@media(min-width:1040px){.enlaces{display:flex}.btn-menu{display:none}}

/* ---- héroe portada ---- */
.heroe{position:relative;min-height:clamp(560px,92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.heroe video,.heroe .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.heroe::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--fondo) 6%,rgba(8,9,11,.28) 40%,rgba(8,9,11,.42))}
.heroe .wrap{padding-top:140px;padding-bottom:72px;position:relative;z-index:2}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);border:1px solid var(--borde);border-radius:999px;padding:7px 14px;background:var(--vidrio)}
.etiqueta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--naranja);box-shadow:0 0 12px var(--naranja)}
.heroe h1{font-family:var(--display);font-weight:800;font-size:clamp(46px,9.5vw,104px);line-height:1.02;letter-spacing:-.02em;margin:22px 0 18px;max-width:900px}
.heroe h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroe p{max-width:560px;color:var(--tenue);font-size:18.5px}
.heroe .cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-grande{font-size:16.5px;padding:14px 26px}
.btn-fantasma{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--borde-fuerte);border-radius:999px;padding:13px 22px;text-decoration:none;font-weight:500;font-size:15.5px;color:var(--tinta);background:var(--vidrio);backdrop-filter:blur(8px);transition:border-color .15s}
.btn-fantasma:hover{border-color:var(--naranja)}

/* ---- cabecera de página interior ---- */
.cab-pag{position:relative;overflow:hidden;border-bottom:1px solid var(--borde)}
.cab-pag .wrap{padding-top:150px;padding-bottom:60px}
.cab-pag h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,7.5vw,76px);line-height:1.04;letter-spacing:-.02em;margin:18px 0 14px;max-width:840px}
.cab-pag h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cab-pag p{max-width:640px;color:var(--tenue);font-size:17.5px}

/* ---- cinta ---- */
.cinta{border-block:1px solid var(--borde);background:rgba(255,255,255,.02);overflow:hidden}
.cinta-pista{display:flex;white-space:nowrap;width:max-content;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);padding:13px 0;animation:rodar 50s linear infinite}
.cinta-pista span{padding:0 22px}
.cinta-pista b{color:var(--naranja);font-weight:500}
@keyframes rodar{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cinta-pista{animation:none}}

/* ---- secciones ---- */
section{padding:96px 0}
.cab{margin-bottom:42px;display:flex;flex-direction:column;gap:12px}
.cab h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,5.4vw,50px);letter-spacing:-.02em;line-height:1.06;max-width:700px}
.num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--naranja);text-transform:uppercase}

/* ---- bento ---- */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}
  .b-grande{grid-column:span 4}.b-media{grid-column:span 2}.b-tercio{grid-column:span 3}}
.caja-b{position:relative;background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;min-height:300px;transition:transform .25s,border-color .25s}
.caja-b:hover{transform:translateY(-4px);border-color:var(--borde-fuerte)}
@media(prefers-reduced-motion:reduce){.caja-b,.caja-b:hover{transform:none;transition:none}}
.caja-b .fondo{position:absolute;inset:0}
.caja-b .fondo img,.caja-b .fondo video{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .25s}
.caja-b:hover .fondo img,.caja-b:hover .fondo video{opacity:.62}
.caja-b .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,11,.92) 22%,rgba(8,9,11,.15))}
.caja-b .cont{position:relative;z-index:1;margin-top:auto;padding:24px;display:flex;flex-direction:column;gap:8px}
.caja-b h3{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em}
.caja-b p{color:var(--tenue);font-size:15.5px;max-width:480px}
.pastillas{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.pill{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--tinta);background:rgba(255,255,255,.07);border:1px solid var(--borde);border-radius:999px;padding:4px 11px}
.pill.na{color:var(--naranja);border-color:rgba(255,107,26,.45)}
.metal-fondo{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:18px;opacity:.9}
.metal-fondo div{border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:#14161A;font-weight:600}
.flecha{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--borde-fuerte);background:rgba(8,9,11,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--tinta);font-size:16px;text-decoration:none;transition:background .15s,transform .15s}
.caja-b:hover .flecha{background:var(--naranja);color:#1A1005;transform:rotate(45deg)}

/* ---- carrusel ---- */
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
@media(min-width:760px){.carrusel{grid-auto-columns:46%}}
.tarjeta-p{scroll-snap-align:start;position:relative;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);min-height:420px;display:flex;align-items:flex-end}
.tarjeta-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tarjeta-p .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,11,.9) 12%,rgba(8,9,11,.05) 55%)}
.tarjeta-p .cont{position:relative;padding:24px;display:flex;flex-direction:column;gap:6px}
.tarjeta-p h3{font-family:var(--display);font-weight:700;font-size:24px}
.tarjeta-p p{color:#C9CED6;font-size:15px;max-width:420px}
.tarjeta-p .mini{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar)}

/* ---- bloques partidos (foto + texto) ---- */
.split{display:grid;background:var(--vidrio);border:1px solid var(--borde);border-radius:26px;overflow:hidden;margin-bottom:18px}
@media(min-width:820px){.split{grid-template-columns:1.05fr .95fr}.split.alterna figure{order:2}}
.split figure{min-height:300px;background:#0B0C0E}
.split figure img,.split figure video{width:100%;height:100%;object-fit:cover;display:block}
.split .cont{padding:32px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.split h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em}
.split p{color:var(--tenue);font-size:16px}
.ficha{font-family:var(--mono);font-size:13px;color:var(--tinta);border-top:1px solid var(--borde);padding-top:14px;display:grid;gap:7px}
.ficha span{color:var(--naranja);margin-right:8px}
.mas{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--naranja);align-self:flex-start;padding-bottom:2px;margin-top:6px}
.mas:hover{color:var(--naranja)}

/* ---- tarjetas de contenido ---- */
.tarjetas{display:grid;gap:16px}
@media(min-width:820px){.tarjetas{grid-template-columns:1fr 1fr}}
.tarjeta{background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--radio);padding:26px;display:flex;flex-direction:column;gap:11px;transition:transform .25s,border-color .25s}
.tarjeta:hover{transform:translateY(-3px);border-color:var(--borde-fuerte)}
@media(prefers-reduced-motion:reduce){.tarjeta,.tarjeta:hover{transform:none;transition:none}}
.tarjeta h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.tarjeta .que,.tarjeta .uso{color:var(--tenue);font-size:15.5px}
.tarjeta .apartado{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);margin-top:2px}
.tarjeta ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.tarjeta li{font-family:var(--mono);font-size:11.5px;color:var(--tinta);background:rgba(255,255,255,.07);border:1px solid var(--borde);border-radius:999px;padding:4px 11px}
.tarjeta.destacada{border-color:rgba(255,107,26,.5);background:linear-gradient(180deg,rgba(255,107,26,.07),var(--vidrio))}

/* ---- máquinas ---- */
.maquinas{display:grid;gap:16px}
@media(min-width:680px){.maquinas{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.maquinas{grid-template-columns:1fr 1fr 1fr}}
.tarjeta-maq{background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.tarjeta-maq:hover{transform:translateY(-3px);border-color:var(--borde-fuerte)}
@media(prefers-reduced-motion:reduce){.tarjeta-maq,.tarjeta-maq:hover{transform:none;transition:none}}
.tarjeta-maq figure{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px}
.tarjeta-maq figure img{max-height:100%;width:auto;object-fit:contain}
.tarjeta-maq figure.oscura{background:#000;padding:0}
.tarjeta-maq figure.oscura video{width:100%;height:100%;object-fit:cover}
.tarjeta-maq .cont{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.tarjeta-maq h3{font-family:var(--display);font-weight:700;font-size:20px}
.tarjeta-maq p{color:var(--tenue);font-size:15px}
.tarjeta-maq .ficha{margin-top:auto}

/* ---- pasos ---- */
.linea{display:grid;gap:14px;counter-reset:p}
@media(min-width:820px){.linea{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.hito{background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--radio);padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hito::before{counter-increment:p;content:"0" counter(p);font-family:var(--display);font-weight:800;font-size:44px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.hito h3{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:8px}
.hito p{color:var(--tenue);font-size:15.5px}
.hito figure{margin:18px -26px -26px;border-top:1px solid var(--borde);aspect-ratio:3/2;overflow:hidden}
.hito figure img{width:100%;height:100%;object-fit:cover}

/* ---- vídeo suelto ---- */
.marco-video{border:1px solid var(--borde);border-radius:26px;overflow:hidden;background:#000;margin-bottom:18px}
.marco-video video{width:100%;display:block}

/* ---- franja CarboXtrem ---- */
.cx{border-block:1px solid var(--borde);background:rgba(255,255,255,.02)}
.cx .wrap{padding:84px 22px;display:grid;gap:30px}
@media(min-width:860px){.cx .wrap{grid-template-columns:1.1fr .9fr;align-items:center}}
.cx h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.6vw,42px);letter-spacing:-.02em;line-height:1.1;margin:12px 0 14px}
.cx p{color:var(--tenue);font-size:17px;max-width:520px}
.cx .foto{border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);aspect-ratio:4/5;max-height:440px}
.cx .foto img{width:100%;height:100%;object-fit:cover}
.chip-blanco{display:inline-flex;background:#fff;border-radius:14px;padding:10px 16px;margin-top:20px}
.chip-blanco img{height:30px;width:auto}

/* ---- contacto / cierre ---- */
.contacto,.cierre{background:var(--vidrio);border:1px solid var(--borde);border-radius:28px;padding:36px 26px;position:relative;overflow:hidden}
.contacto::before,.cierre::before{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,26,.16),transparent 65%)}
.contacto{display:grid;gap:28px}
@media(min-width:880px){.contacto{grid-template-columns:1fr 1fr;padding:48px}}
.contacto h2,.cierre h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.6vw,40px);letter-spacing:-.02em;line-height:1.08}
.contacto .col p{color:var(--tenue);margin-top:14px;max-width:440px}
.cierre{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(min-width:880px){.cierre{padding:48px}}
.cierre p{color:var(--tenue);max-width:560px;position:relative;z-index:1}
form{display:grid;gap:14px;position:relative;z-index:1}
label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
input,textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--borde);border-radius:14px;color:var(--tinta);font-family:var(--texto);font-size:16px;padding:13px 16px;margin-top:6px}
input:focus,textarea:focus{outline:2px solid var(--naranja);border-color:var(--naranja)}
.nota{font-size:13.5px;color:var(--tenue)}

footer{border-top:1px solid var(--borde);padding:36px 0 46px;color:var(--tenue);font-size:14px;position:relative;z-index:1}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--tenue)}
footer a:hover{color:var(--tinta)}

/* ---- aparición al hacer scroll ---- */
.js .aparece{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .aparece.visto{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .aparece{opacity:1;transform:none;transition:none}}