*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Concepto: una galería de noche. Capitales clásicas (aretē = excelencia en griego), filetes dorados finos,
   mucho aire y una sola pieza protagonista: el círculo, que es a la vez cama de impresión y medallón. */
:root{
  --noche:#09070d;        /* fondo: negro con sesgo violeta */
  --velo:#120e19;         /* superficies */
  --filete:rgba(217,179,95,.20);  /* líneas finas doradas */
  --filete-2:rgba(217,179,95,.42);
  --tinta:#f3eef6;
  --gris:#a49bb0;
  --oro:#d9b35f;          /* único acento */
  --oro-claro:#f1d58f;
  --violeta:#6d45d8;      /* solo para luces y halos */
  --f-titulo:"Marcellus","Trajan Pro","Cinzel",Georgia,serif;
  --f-texto:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--noche);overflow-x:clip}
body{background:var(--noche);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
a{color:inherit}
:focus-visible{outline:1px solid var(--oro);outline-offset:4px}
.ancho{max-width:1180px;margin:0 auto}
.rotulo{font-family:var(--f-texto);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--oro)}
.dato{font-size:12px;letter-spacing:.06em;color:var(--gris);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:.01em}
h2 em{font-style:normal;color:var(--oro)}
.filete{display:flex;align-items:center;gap:14px}
.filete::before,.filete::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--filete-2))}
.filete::after{background:linear-gradient(90deg,var(--filete-2),transparent)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:12px;font:600 14px/1 var(--f-texto);letter-spacing:.04em;padding:16px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s,border-color .25s,color .25s;max-width:100%}
.btn svg{width:18px;height:18px;flex:none}
.btn.oro{background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#1b1407;box-shadow:0 12px 34px rgba(217,179,95,.18)}
.btn.oro:hover{transform:translateY(-2px)}
.btn.linea{border-color:var(--filete-2);color:var(--tinta)}
.btn.linea:hover{border-color:var(--oro);color:var(--oro-claro)}

/* Barra */
.barra{display:flex;align-items:center;gap:24px;padding-block:22px}
.marca{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.marca b{font-family:var(--f-titulo);font-weight:400;font-size:26px;letter-spacing:.14em}
.marca span{font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--oro)}
.barra nav{display:flex;gap:26px;margin-left:auto}
.barra nav a{font-size:13px;letter-spacing:.06em;text-decoration:none;color:var(--gris);transition:color .2s}
.barra nav a:hover{color:var(--tinta)}
.barra .btn{padding:11px 18px;font-size:12.5px}

/* ── Portada ── */
.portada{display:grid;justify-items:center;text-align:center;gap:34px;padding-block:10px 90px;position:relative}
.portada::before{content:"";position:absolute;left:50%;top:-40px;width:min(1100px,100%);height:900px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(109,69,216,.22),rgba(109,69,216,.06) 55%,transparent)}
.stage{position:relative;width:min(100%,640px);aspect-ratio:1;max-width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage svg.track{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.track .ring{fill:none;stroke:var(--oro);stroke-width:1.2;stroke-dasharray:1580;stroke-dashoffset:1580;animation:draw 1.4s cubic-bezier(.6,.1,.3,1) forwards}
.track .ring2{fill:none;stroke:var(--filete);stroke-width:1}
.track .ticks{stroke:var(--filete-2);stroke-width:1}
.track .nozzle{fill:var(--oro-claro);filter:drop-shadow(0 0 8px var(--oro))}
@keyframes draw{to{stroke-dashoffset:0}}
.screen{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1c1527,#0a080e 70%);box-shadow:0 0 0 1px var(--filete-2),0 0 0 9px var(--noche),0 0 0 10px var(--filete),0 30px 120px rgba(109,69,216,.35)}
.screen canvas,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen video{transition:opacity .6s}
.screen .sombra{position:absolute;inset:0;background:radial-gradient(circle,transparent 55%,rgba(9,7,13,.65));pointer-events:none}
.now{position:absolute;left:0;right:0;bottom:15%;font-family:var(--f-titulo);font-size:clamp(15px,2.6vw,22px);letter-spacing:.06em;pointer-events:none;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.readout{position:absolute;left:0;right:0;bottom:9%;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.lbl{position:absolute;transform:translate(-50%,-50%);text-decoration:none;font-family:var(--f-titulo);font-size:clamp(11px,2vw,15px);letter-spacing:.06em;line-height:1.2;text-align:center;
  padding:9px 14px;border-radius:999px;background:rgba(9,7,13,.82);border:1px solid var(--filete);color:var(--gris);
  transition:color .3s,border-color .3s,box-shadow .3s;opacity:0;animation:in .6s ease forwards;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px)}
.lbl:hover,.lbl:focus-visible,.lbl.on{color:var(--tinta);border-color:var(--oro);box-shadow:0 0 30px rgba(217,179,95,.18);outline:none}
.lbl.on{color:var(--oro-claro)}
@keyframes in{to{opacity:1}}
.pista{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.portada h1{font-size:clamp(40px,7vw,84px);line-height:1;letter-spacing:.01em;max-width:14ch}
.portada h1 em{font-style:normal;color:var(--oro)}
.portada .bajada{margin:0;color:var(--gris);font-size:18px;max-width:46ch}
.acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.num{font-size:13px;letter-spacing:.08em;color:var(--gris)}

/* ── Secciones de la portada ── */
section.bloque{padding-block:clamp(70px,10vw,120px);border-top:1px solid var(--filete)}
.encabezado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:32px;align-items:end;margin-bottom:56px}
.encabezado p{margin:0;color:var(--gris)}
.encabezado .rotulo{display:block;margin-bottom:18px}
.mundos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}
.mundo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;text-decoration:none;min-width:0}
.medalla{position:relative;width:min(100%,230px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1c1527,#0a080e 72%);box-shadow:0 0 0 1px var(--filete-2),0 0 0 7px var(--noche),0 0 0 8px var(--filete);transition:box-shadow .35s,transform .35s;margin-bottom:10px}
.medalla canvas,.medalla video,.medalla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mundo:hover .medalla,.mundo:focus-visible .medalla{box-shadow:0 0 0 1px var(--oro),0 0 0 7px var(--noche),0 0 0 8px var(--filete-2),0 20px 60px rgba(109,69,216,.35);transform:translateY(-4px)}
.mundo h3{font-size:24px;letter-spacing:.03em}
.mundo p{margin:0;color:var(--gris);font-size:15px;max-width:30ch}
.mundo .entrar{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-top:4px}
.tambien{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);margin-top:80px}
.tambien a{padding:26px 24px;text-decoration:none;display:grid;gap:4px;min-width:0;transition:background .25s}
.tambien a+a{border-left:1px solid var(--filete)}
.tambien a:hover{background:rgba(217,179,95,.05)}
.tambien b{font-family:var(--f-titulo);font-weight:400;font-size:20px}
.tambien span{font-size:14px;color:var(--gris)}

/* La palabra */
.palabra{text-align:center;display:grid;justify-items:center;gap:22px}
.palabra .griego{font-family:var(--f-titulo);font-size:clamp(56px,10vw,120px);line-height:1;color:var(--oro);letter-spacing:.04em}
.palabra p{margin:0;max-width:52ch;color:var(--gris);font-size:18px}
.palabra p b{color:var(--tinta);font-weight:500}

/* Pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.pasos li{display:grid;gap:10px;min-width:0;padding-top:24px;border-top:1px solid var(--filete-2)}
.pasos .romano{font-family:var(--f-titulo);font-size:40px;line-height:1;color:var(--oro)}
.pasos b{font-family:var(--f-titulo);font-weight:400;font-size:22px}
.pasos span{color:var(--gris);font-size:15px}

/* Taller */
.taller{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.taller div{padding:30px 22px;display:grid;gap:6px;min-width:0}
.taller div+div{border-left:1px solid var(--filete)}
.taller strong{font-family:var(--f-titulo);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1;font-variant-numeric:tabular-nums}
.taller span{font-size:13px;color:var(--gris)}

/* Contacto */
.contacto{text-align:center;display:grid;justify-items:center;gap:22px;padding:clamp(40px,7vw,80px) 24px;border:1px solid var(--filete);border-radius:28px;
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(109,69,216,.20),transparent 70%),var(--velo)}
.contacto p{margin:0;color:var(--gris);max-width:46ch}

/* ── Vista de sección ── */
.volver{display:inline-flex;gap:10px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);text-decoration:none;padding-block:8px}
.volver:hover{color:var(--oro)}
.sec-portada{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:30px 90px}
.sec-texto{display:grid;gap:22px;justify-items:start;min-width:0}
.sec-texto h1{font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:.01em}
.sec-texto p{margin:0;color:var(--gris);font-size:18px;max-width:44ch}
.sec-medalla{width:min(100%,460px);justify-self:center;margin-bottom:0}
.lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--filete)}
.lista div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--filete);min-width:0}
.lista b{font-family:var(--f-titulo);font-weight:400;font-size:20px;line-height:1.25}
.lista span{color:var(--gris);font-size:15px}
.otras{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.otras a{padding:11px 18px;border:1px solid var(--filete);border-radius:999px;text-decoration:none;font-family:var(--f-titulo);font-size:15px;color:var(--gris);transition:color .2s,border-color .2s}
.otras a:hover{color:var(--tinta);border-color:var(--oro)}

/* ── Llavero 3D ── */
.cfg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;border:1px solid var(--filete);border-radius:28px;overflow:hidden;background:var(--velo)}
.cfg-view{position:relative;min-height:400px;background:radial-gradient(circle at 50% 46%,rgba(109,69,216,.28),transparent 62%),#0b0910;touch-action:pan-y;cursor:grab}
.cfg-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cfg-view .dims{position:absolute;left:20px;bottom:16px}
.cfg-view .giro{position:absolute;right:20px;bottom:16px}
.cfg-ui{display:grid;gap:22px;align-content:center;padding:36px 32px;border-left:1px solid var(--filete);min-width:0}
.cfg-ui h3{font-size:30px;line-height:1.1}
.cfg-ui p{margin:0;color:var(--gris);font-size:15px}
.campo{display:grid;gap:10px}
.campo label,.campo .lab{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.campo input{font:400 24px var(--f-titulo);letter-spacing:.1em;padding:12px 2px;border:0;border-bottom:1px solid var(--filete-2);background:transparent;color:var(--tinta);width:100%;text-transform:uppercase;border-radius:0}
.campo input:focus{outline:none;border-bottom-color:var(--oro)}
.muestras{display:flex;gap:10px;flex-wrap:wrap}
.mu{width:32px;height:32px;border-radius:50%;border:1px solid var(--filete-2);cursor:pointer;padding:0;box-shadow:0 0 0 3px var(--velo)}
.mu[aria-pressed="true"]{box-shadow:0 0 0 3px var(--velo),0 0 0 4px var(--oro)}
.cfg-nota{font-size:12.5px!important}

footer{padding-block:40px 56px;border-top:1px solid var(--filete);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px}
footer .marca b{font-size:18px}
.proto{color:var(--violeta);font-size:11px;letter-spacing:.06em}

@media (max-width:900px){
  .barra nav{display:none}
  .encabezado,.sec-portada,.cfg{grid-template-columns:minmax(0,1fr)}
  .mundos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pasos{grid-template-columns:minmax(0,1fr)}
  .taller{grid-template-columns:repeat(2,minmax(0,1fr))}
  .taller div:nth-child(3){border-left:0}
  .taller div:nth-child(n+3){border-top:1px solid var(--filete)}
  .lista{grid-template-columns:minmax(0,1fr)}
  .sec-medalla{grid-row:1;width:min(100%,340px)}
  .cfg-ui{border-left:0;border-top:1px solid var(--filete);padding:26px 22px}
}
@media (max-width:560px){
  .barra .btn{display:none}
  .mundos{grid-template-columns:minmax(0,1fr)}
  .tambien{grid-template-columns:minmax(0,1fr)}
  .tambien a+a{border-left:0;border-top:1px solid var(--filete)}
  .screen{width:56%}
  .lbl{padding:6px 10px}
  .readout{font-size:8.5px;bottom:10%}
  .now{bottom:19%}
  .lista div{grid-template-columns:minmax(0,1fr);gap:4px}
  .cfg-view{min-height:280px}
  .portada .bajada,.sec-texto p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .track .ring{animation:none;stroke-dashoffset:0}
  .lbl{animation:none;opacity:1}
}


.idioma{display:flex;align-items:center;border:1px solid var(--filete);border-radius:999px;padding:3px}
.idioma button{font:600 11px/1 var(--f-texto);letter-spacing:.18em;padding:8px 11px;border-radius:999px;border:0;background:transparent;color:var(--gris);cursor:pointer}
.idioma button[aria-pressed="true"]{background:var(--oro);color:#1b1407}
.barra .derecha{display:flex;align-items:center;gap:10px;margin-left:auto}
.barra nav{margin-left:auto}
.barra nav + .derecha{margin-left:0}
@media (max-width:900px){.barra nav + .derecha{margin-left:auto}}
.ico-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--filete-2);color:var(--oro);text-decoration:none;transition:border-color .2s,background .2s}
.ico-btn:hover{border-color:var(--oro);background:rgba(217,179,95,.08)}
.ico-btn svg{width:18px;height:18px}
@media (max-width:560px){.barra{gap:10px}.marca span{display:none}.barra .derecha{gap:6px}.ico-btn{width:36px;height:36px}.idioma button{padding:7px 8px;letter-spacing:.12em}}
.cta-txt{font-size:13px;color:var(--gris);letter-spacing:.02em}