/* Maqueta de la capa de eventos.
   ---------------------------------------------------------------------------
   Mismo criterio que `research/research.css`: la voz visual entera —color,
   tipografía, rejilla, `.lab`, `.big`, `.dimtxt`, `.btnk`— viene de `styles.css`,
   y aquí sólo está lo que esta capa necesita y el resto del sitio no usa.

   Se escribe a mano y se versiona, al revés que `site/research/`, que lo genera
   `build_research.py` desde `research/` y por eso está excluido de git. */

/* ---------- cabecera de sección ---------- */

.ehead { max-width: var(--maxw); margin: 0 auto; padding: clamp(96px,15vh,176px) var(--pad) 0; }
.ehead h1 { margin-top: 14px; }
.ehead .dimtxt { margin-top: 24px; max-width: 58ch; }
.ehead .cta { margin-top: clamp(24px,4vh,38px); }

.ewrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.esec { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px,8vh,112px) var(--pad) 0; }
.esec > .lab { margin-bottom: clamp(18px,3vh,28px); }

/* Las tarjetas de evento NO están aquí: viven en `styles.css` porque la portada
   también las usa, y tenerlas en la hoja de esta capa las dejaba sin estilo en
   la home —que es exactamente lo que pasó la primera vez—. */

/* ---------- ficha de un evento ---------- */

.epage { max-width: var(--maxw); margin: 0 auto; padding: clamp(96px,15vh,176px) var(--pad) 0; }
.epage .volver { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--dim); }
.epage .volver:hover { color: var(--accent); }
.epage h1 { margin-top: 18px; text-transform: uppercase; }
.epage .ewhen { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
                text-transform: uppercase; color: var(--accent); margin-top: 16px; display: block; }
.epage .lede { margin-top: 22px; max-width: 58ch; }
.ebody { max-width: var(--maxw); margin: clamp(34px,5vh,58px) auto 0; padding: 0 var(--pad); }
/* Las tiras y las columnas ya traen su propio padding lateral desde `styles.css`;
   dentro de `.ebody` lo duplicarían. */
.ebody .strip { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }

/* ---------- ficha técnica del anexo ---------- */

.anexo { margin-top: clamp(28px,4vh,44px); border-top: 1px solid var(--hair); }
.anexo div { display: grid; grid-template-columns: 1fr; gap: 4px 26px;
             padding: 15px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 700px) { .anexo div { grid-template-columns: 15rem 1fr; } }
.anexo dt, .anexo .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
                       text-transform: uppercase; color: var(--faint); }
.anexo .v { color: var(--dim); font-size: 15px; line-height: 1.55; }
.anexo .v strong { color: var(--paper); font-weight: 600; }

/* ---------- descargas ---------- */

.dlist { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair);
         border: 1px solid var(--hair); }
@media (min-width: 760px) { .dlist { grid-template-columns: repeat(3, 1fr); } }
.dl1 { background: #0d0d11; padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; }
.dl1 .k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
          text-transform: uppercase; color: var(--faint); }
.dl1 h3 { font-size: clamp(17px,1.9vw,21px); font-weight: 700; letter-spacing: -.025em; margin-top: 10px; }
.dl1 p { color: var(--dim); font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
.dl1 .go { margin-top: auto; padding-top: 22px; font-size: 14.5px; color: var(--accent); font-weight: 600; }
.dl1 .go::after { content: " →"; }
.dl1:hover .go { text-decoration: underline; }

/* ---------- reglamento ---------- */

.reg { display: grid; grid-template-columns: 1fr; gap: clamp(30px,5vh,52px);
       max-width: var(--maxw); margin: 0 auto; padding: clamp(96px,15vh,176px) var(--pad) 0; }
@media (min-width: 1000px) { .reg { grid-template-columns: 15rem 1fr; gap: 54px; align-items: start; } }

/* El índice se pega arriba en pantallas anchas. Trece páginas de contenido sin
   índice navegable significan que nadie encuentra «¿puedo usar TPU?». */
.regnav { position: static; }
@media (min-width: 1000px) { .regnav { position: sticky; top: 96px; } }
.regnav ol { list-style: none; margin-top: 14px; border-left: 1px solid var(--hair); }
.regnav li a { display: block; padding: 7px 0 7px 14px; color: var(--dim);
               font-size: 13.5px; line-height: 1.35; border-left: 1px solid transparent;
               margin-left: -1px; }
.regnav li a:hover { color: var(--paper); border-left-color: var(--accent); }

.regdoc { max-width: 74ch; }
/* El titular de un documento normativo no compite con el de la portada: a la
   escala de `.big` ocupaba cuatro líneas y empujaba el resumen fuera de la
   primera pantalla, que es justo la parte que hay que leer. */
.regdoc h1 { font-size: clamp(30px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1.02; }
.regdoc .ver { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
               text-transform: uppercase; color: var(--accent); }
.regdoc h1 { margin-top: 14px; }
.regdoc h2 { font-size: clamp(22px,2.8vw,32px); font-weight: 700; letter-spacing: -.03em;
             margin-top: clamp(44px,7vh,78px); padding-top: 22px; border-top: 1px solid var(--hair); }
.regdoc h3 { font-size: clamp(16px,1.8vw,19px); font-weight: 600; letter-spacing: -.02em;
             margin-top: clamp(26px,4vh,38px); }
.regdoc p, .regdoc li { color: var(--dim); font-size: clamp(14px,1.6vw,16px); line-height: 1.65; margin-top: 12px; }
.regdoc strong { color: var(--paper); font-weight: 600; }
.regdoc ul, .regdoc ol { margin-top: 8px; padding-left: 20px; }
.regdoc li { margin-top: 7px; }
.regdoc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* El resumen es la parte que de verdad se lee: media página en la que sabes si
   tu robot cabe. Va primero y en caja, no como un párrafo más. */
.resumen { margin-top: clamp(26px,4vh,38px); padding: clamp(22px,2.8vw,30px);
           border: 1px solid rgba(255,59,15,.42); background: rgba(255,59,15,.05); }
.resumen .lab { color: var(--accent); }
.resumen ul { margin-top: 12px; padding-left: 18px; }
.resumen li { margin-top: 8px; color: var(--paper); }
.resumen li span { color: var(--dim); }

.regtab { width: 100%; border-collapse: collapse; margin-top: 16px; }
.regtab th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
             text-transform: uppercase; color: var(--faint); font-weight: 400;
             padding: 0 16px 10px 0; border-bottom: 1px solid var(--hair); }
.regtab td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair);
             color: var(--dim); font-size: 14px; line-height: 1.5; vertical-align: top; }
.regtab td:first-child { color: var(--paper); font-weight: 600; white-space: nowrap; }

/* ---------- los combatientes (Barcelona 2026) ----------
   Una tarjeta por piloto: retrato vertical 4:5, nombre del robot en grande y el
   del piloto debajo. El robot va primero porque es lo que el público recuerda
   —en la marquesina de la portada están los robots, no las personas— y el
   piloto debajo es lo que convierte la máquina en alguien con quien competir.
   El 4:5 es el formato de los retratos que se hicieron en la arena; las fotos
   son horizontales y se recortan sobre la persona en `build_media_bcn.sh`. */

.cw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
      margin-top: clamp(28px,4vh,44px); }
@media (min-width: 720px)  { .cw { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .cw { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cw1 { position: relative; display: flex; flex-direction: column; background: #0d0d11;
       border: 1px solid var(--hair); overflow: hidden; color: inherit; }
.cw1 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
           transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.cw1:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .cw1 img { transition: none; } .cw1:hover img { transform: none; } }
.cw1 .num { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: var(--mono);
            font-size: 10.5px; letter-spacing: .2em; color: var(--paper);
            background: rgba(8,8,10,.72); padding: 5px 8px; }
.cw1 .cwt { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.cw1 .n { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
          text-transform: uppercase; color: var(--faint); }
.cw1 h3 { font-family: var(--tight); font-size: clamp(19px, 2.1vw, 27px); font-weight: 700;
          letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; overflow-wrap: anywhere; }
.cw1 .p { margin-top: 6px; color: var(--dim); font-size: 14px; line-height: 1.45; }
/* La invitada con el robot de la casa lleva el filete en acento, como las
   fechas próximas en las tarjetas de evento: es la única que no trae el suyo. */
.cw1.guest { border-color: rgba(255,59,15,.42); }
.cw1.guest .n { color: var(--accent); }
/* La octava casilla no es un piloto: es la invitación. Sin foto, y la llamada
   abajo del todo, alineada con los nombres de las demás tarjetas. */
.cwk { justify-content: flex-end; min-height: 100%; }
.cwk .cwt { justify-content: flex-end; }
.cwk .go { margin-top: auto; padding-top: 22px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
.cwk .go::after { content: " →"; }
.cwk:hover { border-color: var(--accent); background: #121217; }
.cwk:hover .go { text-decoration: underline; }
.cwg { margin-top: clamp(22px,3vh,34px); }
.cwg img { width: 100%; height: auto; display: block; }
.cwg figcaption { margin-top: 10px; }

/* La portada del evento usa el hero de la home (`.screen.hero.veil`) y el enlace
   de vuelta va encima del rótulo, en el mismo cuerpo mono que en las fichas. */
.hero .volver { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
                text-transform: uppercase; color: var(--dim); align-self: flex-start; }
.hero .volver:hover { color: var(--accent); }

/* El campeón lleva el filete y el rótulo en acento: es el único dato de
   resultado que hay en la página, y va donde está su robot. */
.cw1.champ { border-color: var(--accent); }
.cw1.champ .num, .cw1.champ .n { color: var(--accent); }
/* Segundo y tercero: el rótulo en acento, el filete no. La invitada ya lo lleva. */
.cw1.podio .num, .cw1.podio .n { color: var(--accent); }

/* El clip del robot, encima del retrato. Nace invisible y aparece al pasar el
   ratón (o al tocar, en pantalla táctil: la clase `play` la pone el script).
   El clip es 16:9 y el retrato 4:5: NO se recorta el clip a 4:5, porque en la
   arena el robot casi nunca está en el centro del cuadro y se quedaba fuera. Se
   muestra entero, a todo el ancho de la tarjeta, centrado en vertical sobre el
   retrato, que se oscurece debajo. El alto del retrato es 1,25 veces el ancho
   de la tarjeta y el del clip 0,5625: el centro cae a 0,34375 anchos del borde
   superior, medido en `cqw` con la tarjeta como contenedor. Abajo a la derecha
   del bloque de texto va el aviso mono «▶ en la arena», para que se sepa que
   hay algo que ver; arriba chocaba con «ganador de Barcelona». */
.cw1 { position: relative; container-type: inline-size; }
.cw1 img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.cw1.play img { filter: brightness(.3); transform: none; }
.cw1 video.cwv { position: absolute; left: 0; top: calc(34.375cqw); width: 100%;
                 aspect-ratio: 16 / 9; height: auto; object-fit: cover; background: #000;
                 opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.cw1.play video.cwv { opacity: 1; }
.cw1 .cwt { position: relative; background: #0d0d11; }
.cw1 .cwt::after { content: "▶ en la arena"; position: absolute; right: 16px; bottom: 20px;
                   font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
                   text-transform: uppercase; color: var(--faint); }
.cw1.play .cwt::after { color: var(--accent); }
.cwk .cwt::after { content: none; }

/* ---------- clasificación (Barcelona 2026) ----------
   Una tabla, y es la única de la capa de eventos: siete filas con puesto, robot y
   piloto no se cuentan mejor en prosa. Va debajo de la foto de familia, con el
   ganador en acento y los empates escritos como «5.º–6.º», que es como los dio
   el usuario. Misma voz que `.regtab`, pero sin `nowrap` en la primera columna. */
.clas { margin-top: clamp(28px,4vh,44px); max-width: 640px; }
.clas table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.clas th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
           text-transform: uppercase; color: var(--faint); font-weight: 400;
           padding: 0 16px 10px 0; border-bottom: 1px solid var(--hair); }
.clas td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair);
           color: var(--dim); font-size: 15px; line-height: 1.4; vertical-align: top; }
.clas td:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--paper); }
.clas td:nth-child(2) { color: var(--paper); font-weight: 600; }
.clas tr.oro td { color: var(--accent); }
.clas tr.oro td:nth-child(2) { color: var(--accent); }