*,*::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}
.logo-fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo-btn{padding:11px 18px;font-size:13px;cursor:pointer}
.logo-quitar{background:none;border:0;color:var(--gris);font:600 12px var(--f-texto);letter-spacing:.06em;text-decoration:underline;cursor:pointer;padding:6px}
.logo-quitar:hover{color:var(--oro)}
.logo-estado{font-size:12.5px;color:var(--gris)}

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}
.mail{color:inherit;text-decoration:none;border-bottom:1px solid var(--filete-2);white-space:nowrap}
.mail:hover{color:var(--oro);border-bottom-color:var(--oro)}
.proto{color:var(--violeta);font-size:11px;letter-spacing:.06em}


/* ── Cara del cubo (área) ── */
.sec-cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px}
.sec-titulo{display:grid;justify-items:center;text-align:center;gap:20px;padding-block:10px 46px}
.sec-titulo h1{font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:.01em}
.sec-titulo p{margin:0;color:var(--gris);font-size:18px;max-width:52ch}
.cara-zona{display:grid;justify-items:center;gap:26px;padding-bottom:clamp(70px,10vw,110px);perspective:1800px;position:relative}
.cara-zona::before{content:"";position:absolute;left:50%;top:40%;width:min(1000px,120%);height:110%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(109,69,216,.26),rgba(109,69,216,.07) 55%,transparent)}
.cara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1.1vw,11px);width:min(100%,760px);padding:clamp(7px,1.3vw,13px);border-radius:clamp(18px,3vw,30px);
  background:linear-gradient(150deg,#1a1522,#07060a 55%,#0d0a12);transform-style:preserve-3d;
  box-shadow:0 0 0 1px var(--filete),inset 0 1px 0 rgba(255,255,255,.05),0 50px 120px rgba(0,0,0,.65),0 30px 140px rgba(109,69,216,.25);
  transform:rotateX(18deg) rotateY(-22deg) rotateZ(3deg) scale(.92);opacity:0;animation:cara-in 1.4s cubic-bezier(.2,.75,.2,1) .1s forwards}
@keyframes cara-in{60%{opacity:1}to{transform:none;opacity:1}}
.pieza{position:relative;aspect-ratio:1;min-width:0;border-radius:clamp(9px,1.7vw,17px);border:0;margin:0;font:inherit;color:var(--tinta);text-align:left;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(9px,1.7vw,20px);
  background:radial-gradient(130% 120% at 25% 10%,#251d31,#120e19 55%,#0b0910);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 8px rgba(0,0,0,.55),0 0 0 1px rgba(217,179,95,.13);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s}
.pieza::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(241,213,143,.13),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.pieza:hover,.pieza:focus-visible,.pieza[aria-pressed="true"]{transform:translateZ(18px) translateY(-3px);outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--oro),0 20px 44px rgba(0,0,0,.55),0 0 46px rgba(217,179,95,.14)}
.pieza:hover::before,.pieza:focus-visible::before,.pieza[aria-pressed="true"]::before{opacity:1}
.pieza .nro{position:absolute;top:clamp(9px,1.6vw,18px);left:clamp(9px,1.7vw,20px);font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--oro);font-variant-numeric:tabular-nums}
.pieza b{font-family:var(--f-titulo);font-weight:400;font-size:clamp(13px,2vw,21px);line-height:1.15;letter-spacing:.01em;overflow-wrap:anywhere}
.pieza .d{font-size:13px;line-height:1.4;color:var(--gris);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pieza.centro{cursor:default;padding:0;background:radial-gradient(circle at 50% 40%,#1c1527,#09070d 70%);box-shadow:inset 0 0 0 1px rgba(217,179,95,.35),0 0 40px rgba(109,69,216,.25)}
.pieza.centro:hover{transform:none}
.pieza.centro .medalla{position:absolute;inset:9%;width:auto;margin:0;box-shadow:0 0 0 1px var(--filete-2),0 0 0 5px #0b0910,0 0 0 6px var(--filete)}
.pieza.centro .medalla:hover{transform:none}
.detalle{width:min(100%,760px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:22px 26px;border:1px solid var(--filete);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--velo)}
.detalle .rotulo{display:block;margin-bottom:6px}
.detalle h3{font-size:26px;line-height:1.15}
.detalle p{margin:6px 0 0;color:var(--gris);font-size:15px}
.detalle .acciones{justify-content:flex-end}
.detalle .btn{padding:13px 20px;font-size:13px}

/* ── Mini cubo «Descubrí» ── */
.mini{display:grid;justify-items:center;gap:2px;background:none;border:0;padding:0;cursor:pointer;color:var(--oro);font:600 10px var(--f-texto);letter-spacing:.28em;text-transform:uppercase}
.mini canvas{width:96px;height:96px;display:block;filter:drop-shadow(0 12px 26px rgba(109,69,216,.35))}
.mini span{transition:color .2s}
.mini:hover span,.mini:focus-visible span{color:var(--oro-claro)}
.mini.sin-gl canvas{display:none}
.mini.sin-gl{border:1px solid var(--filete-2);border-radius:999px;padding:11px 16px}
.descubrir{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(5,4,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.descubrir.abierto{opacity:1}
.descubrir .panel{width:min(100%,720px);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--filete-2);border-radius:28px;padding:clamp(24px,4vw,40px);
  background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(109,69,216,.22),transparent 70%),var(--velo);display:grid;gap:24px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.descubrir .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.descubrir h2{font-size:clamp(28px,4vw,40px);margin-top:10px}
.descubrir .x{background:none;border:1px solid var(--filete-2);color:var(--gris);border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:18px;flex:none}
.descubrir .x:hover{color:var(--oro);border-color:var(--oro)}
.caras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.caras a{position:relative;display:grid;gap:6px;align-content:end;aspect-ratio:1.25;padding:16px;border-radius:16px;text-decoration:none;min-width:0;
  background:radial-gradient(130% 120% at 25% 10%,#251d31,#120e19 55%,#0b0910);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(217,179,95,.13);transition:box-shadow .25s,transform .25s}
.caras a:hover,.caras a:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--oro);transform:translateY(-2px);outline:none}
.caras a.aqui{box-shadow:inset 0 0 0 1px var(--oro),0 0 34px rgba(217,179,95,.14)}
.caras .rom{position:absolute;top:14px;left:16px;font-family:var(--f-titulo);color:var(--oro);font-size:18px}
.caras .aqui-t{position:absolute;top:16px;right:14px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.caras b{font-family:var(--f-titulo);font-weight:400;font-size:19px;line-height:1.15}
.abajo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abajo .rotulo{margin-right:6px}
.abajo a{padding:9px 15px;border:1px solid var(--filete);border-radius:999px;text-decoration:none;font-size:13.5px;color:var(--gris)}
.abajo a:hover{color:var(--tinta);border-color:var(--oro)}
@media (max-width:700px){
  .pieza .d{display:none}
  .pieza b{font-size:clamp(12px,3.4vw,16px)}
  .pieza .nro{font-size:9px;letter-spacing:.16em}
  .detalle{grid-template-columns:minmax(0,1fr)}
  .detalle .acciones{justify-content:flex-start}
  .caras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini canvas{width:76px;height:76px}
  .sec-cabeza{min-height:80px}
}
@media (prefers-reduced-motion:reduce){.cara{animation:none;transform:none;opacity:1}.pieza{transition:none}}

@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}