@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url(/fuentes/cinzel-bold.woff) format("woff")}
@font-face{font-family:"Cinzel";font-weight:900;font-display:swap;src:url(/fuentes/cinzel-black.woff) format("woff")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(/fuentes/nunito-regular.woff) format("woff")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url(/fuentes/nunito-semibold.woff) format("woff")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(/fuentes/nunito-bold.woff) format("woff")}

/* La paleta del juego (Comun.uss): índigo de los paneles, oro de las cintas, mármol claro. */
:root{
  --noche:#0d0b29; --noche-2:#16134a; --indigo:#221d6b; --indigo-texto:#2c1e60;
  --oro:#f6c454; --oro-claro:#fff3c9; --oro-hondo:#c4842a; --oro-linea:rgba(214,166,72,.55);
  --tinta:#3a3150; --tinta-suave:#5d5574; --claro:#ece8ff; --claro-suave:#b9b3d9;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--claro);font:400 17px/1.6 "Nunito",system-ui,sans-serif;
  background-image:radial-gradient(1200px 600px at 50% 0,rgba(64,48,150,.35),transparent 70%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--oro)}
a:focus-visible,.boton:focus-visible{outline:2px solid var(--oro-claro);outline-offset:4px}
.saltar{position:absolute;left:-9999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:10}
.saltar:focus{left:8px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Letras de oro de las cintas y los títulos (TextoOro en el juego: claro arriba, ámbar abajo). */
.oro{background:linear-gradient(180deg,var(--oro-claro) 10%,#f2c25a 55%,var(--oro-hondo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(46,22,4,.9)) drop-shadow(0 3px 6px rgba(8,4,20,.6))}

/* ---------------------------------------------------------------- Barra de arriba */
.barra{position:absolute;top:0;left:0;right:0;z-index:5}
.barra .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.barra-logo img{width:150px}
.barra nav{display:flex;align-items:center;gap:22px}
.barra nav a{font:700 15px "Cinzel",serif;letter-spacing:.06em;color:var(--oro-claro);text-decoration:none;
  text-shadow:0 2px 4px rgba(6,4,20,.9)}
.barra nav a:hover{color:#fff}
.barra .idioma{border:1px solid var(--oro-linea);border-radius:4px;padding:2px 9px;font-size:13px}

/* ---------------------------------------------------------------- Portada */
.portada{position:relative;min-height:min(100svh,860px);display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;isolation:isolate}
.portada picture,.portada .fondo{position:absolute;inset:0;z-index:-2}
.portada .fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,11,41,.55) 0,rgba(13,11,41,0) 22%,rgba(13,11,41,0) 42%,rgba(13,11,41,.82) 76%,var(--noche) 100%)}
.portada-contenido{padding:110px 20px 72px;max-width:860px}
.portada h1{margin:0 auto;width:min(680px,92vw)}
.portada h1 img{width:100%;filter:drop-shadow(0 10px 24px rgba(6,4,24,.55))}
.lema{margin:6px 0 0;font:900 clamp(22px,3.2vw,34px)/1.2 "Cinzel",serif;letter-spacing:.08em}
.entradilla{margin:14px auto 0;max-width:560px;font-size:clamp(17px,2vw,19px);font-weight:600;color:#f4f1ff;
  text-shadow:0 2px 6px rgba(6,4,20,.9)}
.acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin-top:28px}
.nota-portada{margin:18px 0 0;font-size:14px;color:var(--claro-suave);letter-spacing:.04em}

/* ---------------------------------------------------------------- Botones del kit (boton-dorado / boton-indigo) */
.boton{display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:62px;padding:0 42px;
  border-style:solid;border-width:0;text-decoration:none;font:700 18px/1 "Cinzel",serif;letter-spacing:.05em;
  transition:transform .15s ease,filter .15s ease}
.boton:hover{transform:translateY(-1px);filter:brightness(1.07)}
.boton:active{transform:translateY(1px)}
.boton-oro{border-image:url(/img/kit/boton-oro.webp) 120 220 fill / 20px 36px stretch;color:#3a1e06;
  text-shadow:0 1px 0 rgba(255,246,210,.75)}
.boton-indigo{border-image:url(/img/kit/boton-indigo.webp) 90 200 fill / 19px 40px stretch;color:var(--oro-claro);
  text-shadow:0 2px 2px rgba(8,4,20,.8);min-height:56px;font-size:16px}
.boton[aria-disabled=true]{filter:saturate(.35) brightness(.85);pointer-events:none}

/* ---------------------------------------------------------------- Títulos en la cinta índigo */
.cinta{display:flex;justify-content:center;margin:0 0 34px}
.cinta h1,.cinta h2{position:relative;margin:0;display:inline-flex;align-items:center;justify-content:center;min-width:300px;
  min-height:66px;padding:0 74px;border-style:solid;border-width:0;
  border-image:url(/img/kit/cinta.webp) 120 250 fill / 30px 64px stretch;
  font:900 clamp(20px,2.6vw,27px)/1 "Cinzel",serif;letter-spacing:.06em}
.cinta h1::before,.cinta h2::before{content:"";position:absolute;left:50%;top:-30px;width:118px;height:33px;transform:translateX(-50%);
  background:url(/img/kit/adorno-cinta-arriba.webp) center/contain no-repeat}

/* ---------------------------------------------------------------- Panel de mármol */
.panel{position:relative;border-style:solid;border-width:0;border-image:url(/img/kit/panel.webp) 150 fill / 48px stretch;
  color:var(--tinta);padding:66px 56px 54px}
.panel::after{content:"";position:absolute;left:50%;bottom:-12px;width:90px;height:38px;transform:translateX(-50%);
  background:url(/img/kit/adorno-panel-abajo.webp) center/contain no-repeat}
.panel h3{margin:0 0 10px;font:900 24px/1.25 "Cinzel",serif;color:var(--indigo-texto);letter-spacing:.03em}
.panel p{margin:0}

section{padding:72px 0}

/* El gancho */
.gancho{padding-top:12px}
.gancho .panel{max-width:860px;margin:0 auto;text-align:center}
.gancho p{font-size:19px;line-height:1.65}
.cifras{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:26px 0 0;padding:20px 0 0;list-style:none;
  border-top:1px solid rgba(176,138,62,.45)}
.cifras li{display:flex;align-items:baseline;gap:8px;color:var(--tinta-suave);font-weight:600}
.cifras strong{font:900 30px/1 "Cinzel",serif;color:var(--indigo-texto)}

/* ---------------------------------------------------------------- El juego: filas de captura y texto */
.rasgos{display:flex;flex-direction:column;gap:64px}
.rasgo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:center}
.rasgo:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.rasgo:nth-child(even) figure{order:2}
.rasgo figure{margin:0;position:relative}
/* Marco de la captura: la placa de mármol y oro del kit, sin relleno. */
.rasgo figure::after{content:"";position:absolute;inset:-14px;pointer-events:none;border-style:solid;border-width:0;
  border-image:url(/img/kit/placa.webp) 64 / 26px stretch}
.rasgo img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--noche-2)}
.rasgo h3,.panel h3,.pasos h3,.cinta h1,.cinta h2,.lema{text-wrap:balance}
.rasgo h3{margin:0 0 12px;font:900 clamp(22px,2.5vw,28px)/1.2 "Cinzel",serif;letter-spacing:.03em}
.rasgo p{margin:0;color:#dcd7f5;font-size:18px}

/* ---------------------------------------------------------------- Juego limpio */
.limpio .panel{max-width:900px;margin:0 auto}
.limpio ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.limpio li{position:relative;padding-left:34px;font-size:17.5px;font-weight:600;color:var(--tinta)}
.limpio li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;
  background:url(/img/kit/gema.webp) center/contain no-repeat}

/* ---------------------------------------------------------------- Beta */
.beta-intro{max-width:640px;margin:0 auto 34px;text-align:center;font-size:18px;color:#dcd7f5}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none;counter-reset:paso}
.pasos li{text-align:center;padding:0 6px}
.medallon{width:86px;height:94px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:url(/img/kit/medallon.webp) center/contain no-repeat;font:900 32px/1 "Cinzel",serif;padding-bottom:4px}
.pasos h3{margin:0 0 6px;font:700 19px/1.3 "Cinzel",serif;color:var(--oro-claro);letter-spacing:.03em}
.pasos p{margin:0;color:var(--claro-suave);font-size:16px}
.beta-boton{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:36px;text-align:center}
.beta-boton .pronto{color:var(--claro-suave);font-size:15px;margin:0}
.beta-aviso{max-width:640px;margin:34px auto 0;text-align:center;color:var(--claro-suave);font-size:15.5px}

/* ---------------------------------------------------------------- Pie */
.pie{border-top:1px solid rgba(214,166,72,.28);padding:40px 0 48px;background:rgba(6,5,22,.55)}
.pie .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px}
.pie-marca{display:flex;align-items:center;gap:14px;color:var(--claro-suave);font-size:15px}
.pie-marca img{width:118px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pie nav a{color:var(--claro);text-decoration:none;font-size:15px}
.pie nav a:hover{color:var(--oro)}
.pie-nota{flex-basis:100%;margin:0;color:#8780a8;font-size:13.5px}

/* ---------------------------------------------------------------- Páginas legales */
.legal-cabecera{padding:120px 0 24px;text-align:center}
.legal-cabecera .cinta{margin:0}
.legal{max-width:860px;margin:0 auto 72px;background:#fbf8f1;color:#2a2340;border:1px solid #d9c38f;
  box-shadow:0 0 0 4px rgba(214,166,72,.18),0 18px 40px rgba(0,0,0,.35);padding:40px 48px;font-size:16.5px}
.legal h2{font:900 21px/1.3 "Cinzel",serif;color:var(--indigo-texto);margin:30px 0 8px}
.legal h3{font:700 18px/1.35 "Cinzel",serif;color:var(--indigo-texto);margin:24px 0 6px}
.legal a{color:#5a3fb0}
.legal table{border-collapse:collapse;width:100%;font-size:15px}
.legal td,.legal th{border:1px solid #e1d8c3;padding:6px 8px;text-align:left;vertical-align:top}
.legal .aviso-web{margin:0 0 18px;padding:10px 14px;background:#f1ecff;border-left:3px solid #6a55c8;font-size:15px}
.legal .volver{margin-top:30px}
.borrar-acciones{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 6px}

/* ---------------------------------------------------------------- Móvil */
@media (max-width:860px){
  body{font-size:16.5px}
  .barra nav a:not(.idioma){display:none}
  .barra-logo img{width:126px}
  .portada{min-height:auto}
  .portada-contenido{padding:96px 16px 44px}
  .acciones{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  section{padding:56px 0}
  .contenedor{padding:0 16px}
  .panel{padding:52px 24px 44px;border-image-width:34px}
  .gancho p{font-size:17.5px}
  .cifras{display:grid;grid-template-columns:auto auto;justify-content:center;gap:10px 26px}
  .cifras li{justify-content:flex-start}
  .cifras strong{font-size:25px}
  .rasgos{gap:52px}
  .rasgo,.rasgo:nth-child(even){grid-template-columns:1fr;gap:22px}
  .rasgo:nth-child(even) figure{order:0}
  .rasgo figure::after{inset:-10px;border-image-width:18px}
  .rasgo p{font-size:16.5px}
  .limpio ul{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr;gap:28px}
  .cinta h1,.cinta h2{min-width:0;padding:0 56px;border-image-width:26px 54px;min-height:58px}
  .legal{padding:26px 20px;margin:0 12px 56px}
  .pie .contenedor{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boton{transition:none}}