/* 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-1:0 1px 2px rgba(20,22,31,.06),0 8px 20px -8px rgba(20,22,31,.14);
  --sombra-2:0 2px 4px rgba(20,22,31,.07),0 24px 44px -14px rgba(20,22,31,.24);
  color-scheme:light;
}
*,*::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,#fff 0%,transparent 70%),radial-gradient(900px 700px at 100% 100%,#EDEAE1 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:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.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(--tinta)!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:10px}nav .cta{font-size:12px;padding:7px 11px;white-space:nowrap}.lang button{padding:4px 6px}.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(20,22,31,.08)) drop-shadow(0 20px 26px rgba(20,22,31,.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}
@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)}

.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(--tinta);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(20,22,31,.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(20,22,31,.08),0 8px 16px -6px rgba(20,22,31,.18);transition:transform .9s var(--expo),box-shadow .9s var(--expo)}
.clip:hover{transform:translateY(-5px);box-shadow:0 3px 0 rgba(20,22,31,.08),0 20px 30px -10px rgba(20,22,31,.3)}
.clip b{font-weight:500;font-size:15px;position:relative}
.clip span{font-family:var(--mono);font-size:11px;opacity:.75;position:relative}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--expo)}
.clip:hover video,.clip.activo video{opacity:1}
.c1{background:var(--naranja)}.c2{background:var(--tinta);color:var(--fondo)}.c3{background:var(--mostaza)}.c4{background:var(--suave)}.c5{background: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)}
@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}

/* 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);box-shadow:var(--sombra-1);display:grid;place-items:center;transition:transform 1s var(--expo)}
.pantalla:hover .play{transform:scale(1.06)}
.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);border-radius:999px;padding:8px 14px;font-size:14px;text-decoration:none;transition:border-color .8s var(--expo),transform .8s var(--expo)}
.redes a:hover{border-color:var(--petroleo);transform:translateY(-2px)}
@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}

/* 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)}

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