/* elpingor8.com · Studio 8 claro (elegido el 13 nov 2026)
   Blanco cálido, tinta, naranja para acciones; mostaza solo en el 8 y en clips; petróleo en ojos y streamer. */
:root{
  --fondo:#F7F6F2; --carta:#FFFFFF; --suave:#EFEDE6; --linea:#E2DFD6;
  --tinta:#14161F; --tinta-2:#5A5F72;
  --naranja:#FF4F1F; --mostaza:#FFBF0F; --petroleo:#00A896;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lema:"Inter Tight","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --expo:cubic-bezier(.16,1,.3,1);
  --sombra-rgb:20,22,31; --luz-arriba:#fff; --luz-abajo:#EDEAE1; --realce:rgba(255,255,255,.9);
  --sobre-naranja:#14161F; --naranja-texto:#C2380F; --error:#B8320F;
  --sombra-1:inset 0 1px 0 var(--realce),0 1px 2px rgba(var(--sombra-rgb),.06),0 8px 20px -8px rgba(var(--sombra-rgb),.14);
  --sombra-2:inset 0 1px 0 var(--realce),0 2px 4px rgba(var(--sombra-rgb),.07),0 24px 44px -14px rgba(var(--sombra-rgb),.24);
  color-scheme:light;
}
/* modo oscuro: la misma pagina, solo otros colores (automatico segun el equipo, o con el boton) */
@media(prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --fondo:#111218; --carta:#1A1C24; --suave:#22252F; --linea:#2E3140; --tinta:#F2F0EA; --tinta-2:#A6AABA;
  --sombra-rgb:0,0,0; --luz-arriba:#1D1F28; --luz-abajo:#0B0C10; --realce:rgba(255,255,255,.06);
  --naranja-texto:#FF7A50; --error:#FF7A50; color-scheme:dark}}
:root[data-tema="oscuro"]{
  --fondo:#111218; --carta:#1A1C24; --suave:#22252F; --linea:#2E3140; --tinta:#F2F0EA; --tinta-2:#A6AABA;
  --sombra-rgb:0,0,0; --luz-arriba:#1D1F28; --luz-abajo:#0B0C10; --realce:rgba(255,255,255,.06);
  --naranja-texto:#FF7A50; --error:#FF7A50; color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1100px 620px at 50% -120px,var(--luz-arriba) 0%,transparent 70%),radial-gradient(900px 700px at 100% 100%,var(--luz-abajo) 0%,transparent 70%),var(--fondo);background-attachment:fixed;color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.salto{position:absolute;left:-999px}.salto:focus{left:16px;top:16px;z-index:20;background:var(--carta);padding:8px 12px}

/* barra */
header{position:sticky;top:0;z-index:5;background:color-mix(in oklab,var(--fondo) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:inline-block;font-weight:600;font-size:18px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.logo b{color:var(--naranja);font-weight:600}
nav{display:flex;gap:22px;align-items:center}
nav a{text-decoration:none;font-size:14px;color:var(--tinta-2);transition:color .4s var(--expo)}
nav a:hover{color:var(--tinta)}
.cta{background:var(--naranja);color:var(--sobre-naranja)!important;font-weight:600;border-radius:999px;padding:8px 16px;transition:transform .9s var(--expo)}
.cta:hover{transform:translateY(-2px)}
.lang{display:flex;gap:2px;border:1px solid var(--linea);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:999px;color:var(--tinta-2)}
.lang button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}
@media(max-width:760px){nav .enlace{display:none}}
@media(max-width:480px){nav{gap:8px}nav .cta{font-size:12px;padding:9px 11px;white-space:nowrap}.lang button{padding:9px 7px}.logo{font-size:16px}}

/* portada */
.hero{padding-block:64px 40px;display:grid;gap:28px}
.pastilla{display:inline-flex;align-items:center;gap:10px;width:fit-content;border:1px solid var(--linea);background:var(--carta);border-radius:999px;padding:6px 14px 6px 10px;text-decoration:none;box-shadow:var(--sombra-1)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--petroleo)}
h1{font-family:var(--lema);font-weight:800;font-size:clamp(40px,7vw,92px);line-height:.95;letter-spacing:-.045em;margin:0;text-wrap:balance;max-width:13ch}
h1 em{font-style:normal;color:var(--naranja);font-weight:900}
.sub{max-width:52ch;color:var(--tinta-2);font-size:18px;margin:0}

.ocho{position:relative;margin-top:12px}
.ocho svg{width:100%;height:auto;display:block;overflow:visible}
.trazo{fill:none;stroke-width:24;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.t-nar{stroke:var(--naranja);animation:dibuja 1.6s cubic-bezier(.65,0,.35,1) .3s forwards}
.t-mos{stroke:var(--mostaza);animation:dibuja 1.6s cubic-bezier(.65,0,.35,1) 1.75s forwards}
@keyframes dibuja{to{stroke-dashoffset:0}}
.ocho-cuerpo{filter:drop-shadow(0 2px 0 rgba(var(--sombra-rgb),.08)) drop-shadow(0 20px 26px rgba(var(--sombra-rgb),.16))}
.hueco{fill:transparent;transition:fill 1s var(--expo)}
.lado{cursor:pointer;transition:transform .9s var(--expo)}
.lado:hover{transform:translateY(-6px)}
.ojos{transition:transform 1.2s var(--expo)}
.ojo{fill:var(--petroleo);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:salta .9s cubic-bezier(.34,1.56,.64,1) 3.3s forwards}
.ojo-redondo{animation:salta .9s cubic-bezier(.34,1.56,.64,1) 3.3s forwards,parpadea 7s 5s infinite}
/* el ojo derecho va abierto y guiña de vez en cuando (no se queda cerrado) */
.ojo-guino{animation:salta .9s cubic-bezier(.34,1.56,.64,1) 3.3s forwards,guina 9s 6.5s infinite}
@keyframes guina{0%,88%,100%{transform:scaleY(1)}90%,93%{transform:scaleY(.18)}95%{transform:scaleY(1)}}
@keyframes salta{to{transform:scale(1)}}
@keyframes parpadea{0%,95%,100%{transform:scaleY(1)}97.5%{transform:scaleY(.22)}}
.etq{font-family:var(--mono);font-size:13px;letter-spacing:.1em;fill:var(--tinta-2);text-transform:uppercase}
.etq-big{font-family:var(--lema);font-weight:800;font-size:46px;letter-spacing:-.04em;fill:var(--tinta);transition:fill .8s var(--expo)}
.p-editor:hover .hueco{fill:color-mix(in oklab,var(--naranja) 12%,transparent)}
.p-stream:hover .hueco{fill:color-mix(in oklab,var(--mostaza) 14%,transparent)}
.p-editor:hover .etq-big{fill:var(--naranja)}.p-stream:hover .etq-big{fill:var(--petroleo)}
@media(max-width:640px){.etq,.etq-big{display:none}}

/* tarjetas que se elevan */
.carta{background:var(--carta);border:1px solid var(--linea);box-shadow:var(--sombra-1);transition:transform .9s var(--expo),box-shadow .9s var(--expo),background .9s var(--expo)}
.carta:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)}
/* brillo cálido por arriba al pasar el ratón (mostaza muy suave), igual en todas las tarjetas */
.carta,.timeline{position:relative;isolation:isolate}
.carta::before,.timeline::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:linear-gradient(to bottom,var(--brillo,rgba(255,191,15,.16)) 0%,rgba(255,191,15,0) 62%);transition:opacity .9s var(--expo)}
.carta:hover::before,.timeline:hover::before{opacity:1}
.puerta.e{--brillo:rgba(255,79,31,.13)}
.puerta.s{--brillo:rgba(0,168,150,.12)}
.timeline{transition:transform .9s var(--expo),box-shadow .9s var(--expo)}
.timeline:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(var(--sombra-rgb),.07),0 30px 54px -16px rgba(var(--sombra-rgb),.28)}
.pantalla.con-video::before{z-index:2;mix-blend-mode:soft-light}

.puertas{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;margin-top:8px}
.puerta{border-radius:22px;padding:28px;display:grid;gap:10px;align-content:start;text-decoration:none}
.puerta h2{margin:0;font-weight:400;font-size:24px;letter-spacing:-.02em}
.puerta.e h2{font-family:var(--lema);font-weight:800;font-size:30px;letter-spacing:-.03em}
.puerta p{margin:0;color:var(--tinta-2);max-width:44ch}
.puerta .ir{font-family:var(--mono);font-size:12px;margin-top:6px;transition:transform .9s var(--expo)}
.puerta:hover .ir{transform:translateX(6px)}
.puerta.e:hover{background:color-mix(in oklab,var(--naranja) 5%,var(--carta))}
.puerta.s:hover{background:color-mix(in oklab,var(--petroleo) 6%,var(--carta))}
.s .ir{color:var(--petroleo)}
.boton{display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:10px;background:var(--naranja);color:var(--sobre-naranja);font-weight:600;font-size:15px;border-radius:999px;padding:12px 20px;border:0;cursor:pointer;font-family:inherit;text-decoration:none;box-shadow:0 2px 0 rgba(var(--sombra-rgb),.18),0 10px 20px -8px color-mix(in oklab,var(--naranja) 70%,transparent);transition:transform .9s var(--expo)}
.puerta.e:hover .boton,.boton:hover{transform:translateY(-2px)}
@media(max-width:700px){.puertas{grid-template-columns:1fr}}

/* secciones */
section{padding-block:96px;border-top:1px solid var(--linea)}
.cab{display:grid;grid-template-columns:220px 1fr;gap:32px;margin-bottom:48px}
.cab h2{margin:0;font-weight:300;font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;max-width:18ch}
@media(max-width:760px){.cab{grid-template-columns:1fr;gap:12px}section{padding-block:72px}}

/* trabajos como línea de tiempo */
.timeline{position:relative;border-radius:22px;padding:22px;overflow:hidden;box-shadow:var(--sombra-2);background:var(--carta);border:1px solid var(--linea)}
.regla{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--tinta-2);padding-bottom:12px;border-bottom:1px dashed var(--linea);margin-bottom:16px}
.pistas{display:grid;gap:10px}
.pista{display:flex;gap:10px;min-width:0}
.clip{flex:var(--w) 1 0;min-width:0;border-radius:10px;padding:14px;display:grid;gap:4px;align-content:end;min-height:120px;position:relative;overflow:hidden;color:var(--tinta);text-decoration:none;box-shadow:0 2px 0 rgba(var(--sombra-rgb),.08),0 8px 16px -6px rgba(var(--sombra-rgb),.18);transition:transform .9s var(--expo),box-shadow .9s var(--expo)}
.clip:hover{transform:translateY(-5px);box-shadow:0 3px 0 rgba(var(--sombra-rgb),.08),0 20px 30px -10px rgba(var(--sombra-rgb),.3)}
.clip b{font-weight:500;font-size:15px;position:relative}
.clip span{font-family:var(--mono);font-size:11px;opacity:.75;position:relative}
/* imagen real siempre a la vista; el trocito se reproduce al pasar el ratón o al verse en el móvil */
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--expo)}
.clip:hover video,.clip.activo video{transform:scale(1.06)}
.clip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--sombra-rgb),.82) 0%,rgba(var(--sombra-rgb),.25) 55%,rgba(var(--sombra-rgb),0) 100%)}
.clip span,.clip b{z-index:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.clip span{opacity:.85}
.clip{border-top:4px solid var(--c);background:#14161F;min-height:140px}
.c1{--c:var(--naranja)}.c2{--c:var(--tinta-2)}.c3{--c:var(--mostaza)}.c4{--c:var(--suave)}.c5{--c:var(--petroleo)}
.cabezal{position:absolute;top:14px;bottom:14px;width:2px;background:var(--naranja);left:22px;animation:corre 14s linear infinite;pointer-events:none}
.cabezal::before{content:"";position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:3px;background:var(--naranja)}
@keyframes corre{to{left:calc(100% - 24px)}}
@media(max-width:640px){.pista{flex-wrap:wrap}.clip{flex-basis:40%}}
.aviso{font-size:14px;color:var(--tinta-2);margin:16px 0 0}

.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.paso{display:grid;gap:8px;align-content:start;border-radius:18px;padding:20px}
.paso h3{margin:0;font-weight:500;font-size:17px}
.paso p{margin:0;color:var(--tinta-2);font-size:15px}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pasos{grid-template-columns:1fr}}

.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}
.plan{border-radius:18px;padding:22px;display:grid;gap:6px;align-content:start}
.plan .precio{font-size:32px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .precio small{font-family:var(--mono);font-size:12px;color:var(--tinta-2);letter-spacing:0}
.plan p{margin:0;color:var(--tinta-2);font-size:14px}
.plan.dest{border-color:var(--naranja)}
.plan.dest .mono{color:var(--naranja-texto)}
@media(max-width:860px){.planes{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.planes{grid-template-columns:1fr}}

.idiomas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;align-items:center}
.idiomas .chip{border:1px solid var(--linea);background:var(--carta);border-radius:999px;padding:6px 12px;font-size:14px;transition:transform .8s var(--expo),box-shadow .8s var(--expo),background .8s var(--expo)}
.idiomas .chip:hover{transform:translateY(-2px);background:linear-gradient(to bottom,rgba(255,191,15,.18),var(--carta) 70%);box-shadow:0 8px 16px -8px rgba(var(--sombra-rgb),.22)}

/* streamer */
.stream{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.pantalla{aspect-ratio:16/9;max-width:100%;border-radius:22px;background:radial-gradient(120% 90% at 30% 20%,color-mix(in oklab,var(--petroleo) 22%,var(--carta)),var(--suave));position:relative;display:grid;place-items:center;text-decoration:none}
.pantalla .mono{position:absolute;top:18px;left:18px}
.play{width:72px;height:72px;border-radius:50%;background:var(--carta);color:var(--tinta);box-shadow:var(--sombra-1);display:grid;place-items:center;transition:transform 1s var(--expo)}
.pantalla:hover .play{transform:scale(1.06)}
.pantalla{overflow:hidden}
.ult-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.2s var(--expo)}
.pantalla:hover .ult-img,.pantalla.activo .ult-img{transform:scale(1.05)}
.ult-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--expo)}
.pantalla.activo .ult-vid{opacity:1}
.pantalla.con-video::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--sombra-rgb),.85) 0%,rgba(var(--sombra-rgb),.15) 55%,rgba(var(--sombra-rgb),.35) 100%)}
.pantalla .mono,.ult-titulo,.play{z-index:1}
.pantalla.con-video .mono{color:#fff;background:rgba(var(--sombra-rgb),.45);padding:5px 10px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ult-titulo{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;font-family:var(--lema);font-weight:800;font-size:clamp(18px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.4);text-wrap:balance}
.agenda{border-radius:22px;padding:22px;display:grid;gap:4px;align-content:start}
.dia{display:flex;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid var(--linea);font-size:15px}
.dia:last-of-type{border-bottom:0}
.dia .mono{font-size:11px}
.dia.off{color:var(--tinta-2)}
.dia.on .mono{color:var(--petroleo)}
.redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.redes a{border:1px solid var(--linea);background:var(--carta);border-radius:999px;padding:8px 14px;font-size:14px;text-decoration:none;transition:border-color .8s var(--expo),transform .8s var(--expo),box-shadow .8s var(--expo),background .8s var(--expo)}
.redes a:hover{border-color:color-mix(in oklab,var(--mostaza) 55%,var(--linea));transform:translateY(-3px);background:linear-gradient(to bottom,rgba(255,191,15,.2),var(--carta) 72%);box-shadow:0 10px 18px -8px rgba(var(--sombra-rgb),.25)}
@media(max-width:820px){.stream{grid-template-columns:1fr}}

.yo{display:grid;grid-template-columns:220px 1fr;gap:32px}
.yo p{font-size:clamp(20px,2.2vw,28px);font-weight:300;letter-spacing:-.02em;line-height:1.35;margin:0;max-width:34ch}
.yo p span{color:var(--tinta-2)}
@media(max-width:760px){.yo{grid-template-columns:1fr}}

.mail{display:block;font-size:clamp(28px,5.6vw,72px);font-weight:300;letter-spacing:-.04em;line-height:1.05;word-break:break-all;text-decoration:none;margin-top:20px}
.mail b{color:var(--naranja);font-weight:300}
.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.copiar{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;border:1px solid var(--linea);background:var(--carta);border-radius:999px;padding:10px 16px}

footer{border-top:1px solid var(--linea);padding-block:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{text-decoration:none}

/* titulares que anticipan lo que viene y aviso de la siguiente sección */
.cab .lead{margin:16px 0 0;color:var(--tinta-2);font-size:18px;max-width:52ch}
.siguiente{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:fit-content;margin-top:48px;padding:12px 18px;border-radius:999px;border:1px dashed color-mix(in oklab,var(--mostaza) 60%,var(--linea));text-decoration:none;color:var(--tinta);font-weight:500;transition:transform .9s var(--expo),background .9s var(--expo),box-shadow .9s var(--expo)}
.siguiente:hover{transform:translateY(-3px);background:linear-gradient(to bottom,rgba(255,191,15,.18),transparent 80%);box-shadow:0 10px 18px -10px rgba(var(--sombra-rgb),.25)}
.siguiente .flecha{display:inline-block;animation:baja 2.4s var(--expo) infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero .siguiente{margin-top:8px}

/* animaciones al ir bajando: solo si hay JavaScript (sin él, todo se ve) */
.js .revela{opacity:0;transform:translateY(12px);transition:opacity 1.1s var(--expo),transform 1.1s var(--expo)}
.js .revela.visto{opacity:1;transform:none}
.js .escalon.revela{opacity:1;transform:none}
.js .escalon > *{opacity:0;transform:translateY(10px);transition:opacity 1s var(--expo),transform 1s var(--expo),box-shadow .9s var(--expo)}
.js .escalon.visto > *{opacity:1;transform:none}
.js .escalon.visto > *:nth-child(2){transition-delay:.08s}.js .escalon.visto > *:nth-child(3){transition-delay:.16s}.js .escalon.visto > *:nth-child(4){transition-delay:.24s}
.js .escalon.visto > .carta:hover{transform:translateY(-4px);transition-delay:0s}

/* ventana de presupuesto: desde el lateral (botón de arriba) o desde abajo (el resto y en el móvil) */
.panel{position:fixed;inset:0;z-index:40}
.panel-fondo{position:absolute;inset:0;background:rgba(var(--sombra-rgb),.38);opacity:0;transition:opacity .6s var(--expo);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.panel.abierto .panel-fondo{opacity:1}
.panel-caja{position:absolute;background:var(--fondo);box-shadow:var(--sombra-2);overflow:auto;overscroll-behavior:contain;padding:24px max(22px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));transition:transform .75s var(--expo)}
.panel[data-desde="lado"] .panel-caja{top:0;right:0;bottom:0;width:min(460px,100%);border-radius:24px 0 0 24px;transform:translateX(104%)}
.panel[data-desde="abajo"] .panel-caja{left:50%;bottom:0;width:min(640px,100%);max-height:88vh;border-radius:24px 24px 0 0;transform:translate(-50%,104%)}
.panel.abierto[data-desde="lado"] .panel-caja{transform:none}
.panel.abierto[data-desde="abajo"] .panel-caja{transform:translate(-50%,0)}
.panel-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.panel-cab h2{margin:6px 0 0;font-family:var(--lema);font-weight:800;font-size:28px;letter-spacing:-.03em}
.panel-x{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;background:var(--carta);border:1px solid var(--linea)}
.panel[data-desde="abajo"] .panel-caja::before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:var(--linea);margin:-10px auto 14px}
body.con-panel{overflow:hidden}

.presupuesto{display:grid;gap:16px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel[data-desde="lado"] .campos{grid-template-columns:1fr}
.campo{display:grid;gap:6px;font-size:14px;color:var(--tinta-2);min-width:0}
.campo.ancho{grid-column:1/-1}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:11px 13px;width:100%;transition:border-color .5s var(--expo),box-shadow .5s var(--expo)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,79,31,.15)}
.campo [aria-invalid="true"]{border-color:var(--error)}
.privacidad{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tinta-2)}
.privacidad input{margin-top:3px;accent-color:var(--naranja);width:17px;height:17px;flex:none}
.error{margin:0;color:var(--error);font-size:14px;font-weight:500}
.error.ok{color:var(--petroleo)}
.mail-pq{font-size:14px;color:var(--tinta-2)}
@media(max-width:560px){.campos{grid-template-columns:1fr}}

/* no se puede seleccionar ni copiar el texto de la página (sí escribir en el formulario) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
/* los textos legales (Impressum, AGB, Widerruf…) sí se pueden copiar: los clientes tienen que poder guardarlos */
.legal{-webkit-user-select:text;user-select:text}
img,video{-webkit-user-drag:none}

/* ventanita para elegir con qué enviar el correo */
.elige-correo{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.ec-fondo{position:absolute;inset:0;background:rgba(var(--sombra-rgb),.4);opacity:0;transition:opacity .4s var(--expo)}
.ec-caja{position:relative;width:min(420px,100%);background:var(--fondo);border:1px solid var(--linea);border-radius:20px;padding:20px;box-shadow:var(--sombra-2);display:grid;gap:12px;transform:translateY(16px) scale(.98);opacity:0;transition:transform .5s var(--expo),opacity .5s var(--expo);-webkit-user-select:text;user-select:text}
.elige-correo.abierto .ec-fondo{opacity:1}.elige-correo.abierto .ec-caja{transform:none;opacity:1}
.ec-cab{display:flex;justify-content:space-between;align-items:center;font-family:var(--lema);font-size:20px}
.ec-x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--carta);border:1px solid var(--linea)}
.ec-para{margin:0;font-size:14px;color:var(--tinta-2);word-break:break-all}
.ec-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec-b{display:grid;place-items:center;min-height:46px;border-radius:14px;border:1px solid var(--linea);background:var(--carta);color:var(--tinta);font:inherit;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .6s var(--expo),box-shadow .6s var(--expo)}
.ec-b:hover{transform:translateY(-2px);box-shadow:var(--sombra-1)}
.ec-ok{margin:0;font-size:14px;color:var(--petroleo);font-weight:500}

/* aviso de cookies (solo aparece si hay píxeles configurados) */
.cookies{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:560px;margin:0 auto;
  background:var(--carta);border:1px solid var(--linea);border-radius:18px;padding:18px 20px;box-shadow:var(--sombra-2);display:grid;gap:12px;
  transform:translateY(20px);opacity:0;transition:transform .7s var(--expo),opacity .7s var(--expo)}
.cookies.visible{transform:none;opacity:1}
.cookies p{margin:0;font-size:14px;color:var(--tinta-2)}
.cookies-bot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cookies button{font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:9px 18px;cursor:pointer;border:1px solid var(--linea);background:var(--carta);color:var(--tinta)}
/* «Aceptar» y «Rechazar» iguales: en Alemania no se puede empujar a aceptar con colores */
.cookies button{min-width:120px;background:var(--carta);border-color:var(--tinta)}
.cookies button:hover{background:var(--suave)}

/* páginas legales */
.legal{padding-block:64px 96px;max-width:72ch}
.legal h1{font-size:clamp(36px,5vw,56px);margin-bottom:32px}
.legal h2{font-size:20px;font-weight:600;margin:40px 0 8px}
.legal p,.legal li{color:var(--tinta-2)}
.legal h1,.legal h2,.legal p{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.legal .resumen{background:var(--carta);border:1px solid var(--linea);border-radius:16px;padding:16px 18px;font-size:15px}
.legal .boton{color:var(--tinta)}
footer .mono a{white-space:nowrap}

@media(prefers-reduced-motion:reduce){.js .revela,.js .escalon > *{opacity:1!important;transform:none!important}*,*::before{animation:none!important;transition:none!important}.trazo{stroke-dashoffset:0}.ojo{transform:none}html{scroll-behavior:auto}}

/* lo que pone el navegador, con los colores de la marca */
html{scrollbar-color:color-mix(in oklab,var(--mostaza) 70%,var(--linea)) var(--fondo);accent-color:var(--naranja)}
input,textarea,select{caret-color:var(--naranja)}
::selection{background:color-mix(in oklab,var(--mostaza) 45%,transparent);color:var(--tinta)}
/* boton claro/oscuro */
.tema{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:999px;color:var(--tinta-2);transition:color .4s var(--expo),transform .9s var(--expo)}
.tema:hover{color:var(--tinta);transform:rotate(-20deg)}
.tema:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
.tema .luna{display:none}
:root[data-tema="oscuro"] .tema .sol{display:none}:root[data-tema="oscuro"] .tema .luna{display:block}
@media(prefers-color-scheme:dark){:root:not([data-tema="claro"]) .tema .sol{display:none}:root:not([data-tema="claro"]) .tema .luna{display:block}}
@media(max-width:480px){.tema{width:28px;height:28px}}
/* el 8 en capas (--px/--py van de -1 a 1 y los pone main.js). Solo movimientos planos: nítido, sin pixelar */
.ocho{--px:0;--py:0}
.ocho-cuerpo{filter:drop-shadow(0 2px 0 rgba(var(--sombra-rgb),.08)) drop-shadow(calc(var(--px) * -14px) calc(20px + var(--py) * -8px) 26px rgba(var(--sombra-rgb),.18))}
.ocho .trazo{transition:transform 1.4s var(--expo)}
.ocho .t-nar{transform:translate(calc(var(--px) * -1.5px),calc(var(--py) * -1px))}
.ocho .t-mos{transform:translate(calc(var(--px) * 2.5px),calc(var(--py) * 1.5px))}
.ocho .ojos{transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* palabras: invisibles hasta que el ratón va hacia su lado; entran deslizándose desde el 8 */
.ocho{--ve:0;--vs:0}
.ocho .etq,.ocho .etq-big{transition:opacity .9s var(--expo),transform 1.1s var(--expo),fill .8s var(--expo)}
.ocho .p-editor .etq{opacity:var(--ve);transform:translateX(calc((1 - var(--ve)) * 40px))}
.ocho .p-editor .etq-big{opacity:var(--ve);transform:translateX(calc((1 - var(--ve)) * 56px))}
.ocho .p-stream .etq{opacity:var(--vs);transform:translateX(calc((1 - var(--vs)) * -40px))}
.ocho .p-stream .etq-big{opacity:var(--vs);transform:translateX(calc((1 - var(--vs)) * -56px))}
/* sin ratón (tablet) o con «reducir movimiento»: las palabras se ven siempre */
@media(hover:none),(pointer:coarse){.ocho .etq,.ocho .etq-big{opacity:1!important;transform:none!important}}
/* las puertas se asoman por encima del borde del 8 */
.puertas{position:relative;z-index:1;margin-top:-56px}
@media(max-width:640px){.puertas{margin-top:-20px}}
@media(prefers-reduced-motion:reduce){.ocho .trazo{transform:none!important}.ocho .etq,.ocho .etq-big{opacity:1!important;transform:none!important}}
/* precios: aviso de referencia bien visible y qué incluye cada plan */
.aviso-ref{display:flex;gap:12px;align-items:flex-start;margin:56px 0 0;padding:16px 20px;border-radius:14px;border:1px solid color-mix(in oklab,var(--naranja) 45%,var(--linea));background:color-mix(in oklab,var(--naranja) 9%,var(--carta));color:var(--tinta);font-size:15px;line-height:1.5;max-width:820px}
.aviso-ref svg{flex:none;margin-top:2px;color:var(--naranja-texto)}
.aviso-ref strong{color:var(--naranja-texto);font-weight:700}
.aviso-ref + .planes{margin-top:16px}
.plan .desde{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--tinta-2);margin-right:2px}
.plan .cuanto{color:var(--tinta);font-weight:600;font-size:15px}
.plan .incluye{list-style:none;margin:4px 0 0;padding:10px 0 0;border-top:1px dashed var(--linea);display:grid;gap:6px;font-size:13px;color:var(--tinta-2)}
.plan .incluye li{position:relative;padding-left:16px}
.plan .incluye li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--mostaza)}
.plan.dest .incluye li::before{background:var(--naranja)}
.plan:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
/* con ratón: el detalle se despliega al pasar por encima (o al llegar con el teclado); en móvil se ve siempre */
@media(hover:hover) and (pointer:fine){
  .plan .incluye{max-height:0;opacity:0;overflow:hidden;padding-top:0;border-top-color:transparent;transform:translateY(-4px);transition:max-height 1s var(--expo),opacity .8s var(--expo),padding .8s var(--expo),transform .9s var(--expo),border-color .8s var(--expo)}
  .plan:hover .incluye,.plan:focus-within .incluye{max-height:160px;opacity:1;padding-top:10px;border-top-color:var(--linea);transform:none}
}
.plan .precio{white-space:nowrap;font-size:clamp(24px,2.5vw,32px)}
@media(hover:hover) and (pointer:fine){.planes{align-items:start}}

/* bloque para empresas: otro aire que los planes de streamer, sin precio */
.empresas{margin-top:20px;border-radius:18px;padding:24px 26px;display:flex;gap:24px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,color-mix(in oklab,var(--petroleo) 9%,var(--carta)),var(--carta) 65%)}
.empresas h3{margin:0 0 6px;font-family:var(--lema);font-weight:800;font-size:22px;letter-spacing:-.02em}
.empresas p{margin:0;color:var(--tinta-2);max-width:68ch;font-size:15px}
.empresas .boton{margin-top:0;flex:none}
@media(max-width:760px){.empresas{flex-direction:column;align-items:flex-start}}