:root{
  --bg: #73ff0000;
  --ink: #020800;
  --muted: rgba(0, 2, 0, 0.62);
  --font: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius: 22px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --max: 68rem;

  --box-w: 420px;
  --pad: 1.1rem;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}
/* Ocultar sin romper: no ocupa espacio ni estorba */
.is-hidden { display: none !important; }

/* IMPORTANTÍSIMO: deja que el filtro (body::before/after) se pinte encima */
body{ position: relative; }

.layout{ min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; }
.score{ width:100%; max-width:var(--max); margin:0 auto; padding:var(--space-4) var(--space-3); text-align:center; }

.kicker-1{
  margin:0 0 var(--space-1) 0;
  font-family: var(--mono);
  letter-spacing:.18em;
  font-size:2.5rem;
  color: oklch(20.506% 0.06151 136.485 / 0.85);
}
.hint{
  font-size: 1.2rem;
}
.title{ margin:0 0 var(--space-3) 0; font-weight:300; font-size:clamp(1.4rem, 2.6vw, 2.4rem); }

.ptolomeo--measures{
  display:grid;
  gap: var(--space-3);
  justify-items:center;
  grid-template-columns: 1fr;
  padding: 0 12px;
}

@media (min-width: 720px){
  .ptolomeo--measures{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .ptolomeo--measures{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Cajas */
.trios, .rest{
  width: 100%;
  max-width: var(--box-w);
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
 
}
.es-rest{
  position: relative;
  top:2.5rem;
  font-size: 1.5rem;
}


/* Fondo PNG por variable */
.trios::before, .rest::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: var(--img-size, cover);
  background-position: var(--img-pos, center);
  background-repeat: no-repeat;
  opacity: var(--img-opacity, 0);
  pointer-events:none;
}

.trios{
  display:grid;
  place-content:center;
  gap:.35rem;
  padding: var(--pad);
  background: rgba(247, 253, 243, 0.993);
}

.trios p{ margin:0; line-height:1.15; font-size:1rem; letter-spacing:.01em; font-weight: 550; }

.rest{
  background: rgba(6, 36, 0, 0.781);
  border: 1px dashed rgba(0,0,0,.18);
  color:#fefffd;
}

/* Puertas */
a.trios.door{
  text-decoration:none;
  color: inherit;
  background: rgba(4, 12, 0, 0.9);
}
a.trios.door p{ color: rgb(253, 255, 252); letter-spacing: .12rem;font-size: 1.1rem;font-weight:550; }
.door__tag{
  margin-top:.6rem;
  display:inline-block;
  font-family: var(--mono);
  font-size:1.2rem;
  letter-spacing:.12em;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  color: rgba(251, 252, 251, 0.9);
}

/* Puertas en 2 columnas (grupo) */
.doors{
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

@media (min-width: 720px){
  .doors{
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-items: stretch;
  }
  .doors a.trios.door{ max-width: none; }
}

.score__foot{
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(0,0,0,.15);
}
.sig{ margin:0; font-family: var(--mono); letter-spacing:.14em; font-size:.85rem; opacity:.7; font-weight: 550; }
/* =========================
   DOOR HOVER
   ========================= */

a.trios.door{
  transition: 
    background-color .35s ease,
    color .35s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

a.trios.door:hover{
  background: #3bfd00;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(3, 8, 0, 0.411);
  transform: translateY(-3px);
}

/* Texto interior */
a.trios.door:hover p{
  color: #000700;
}

/* Etiqueta inferior */
a.trios.door:hover .door__tag{
  color: #061100;
  border-color: rgba(42, 42, 42, 0.45);
}