/* ATICMA Awards 2026 · Finalistas
   Sólo la usa la portada de Awards. Va aparte de estilos.css porque ésa es la base que copian Emprende, la Tech Week
   y el institucional: así no hay que copiarla ni volver a publicar los otros sitios por una sección que no tienen. */

/* ---------- Sección ---------- */

.finalistas { padding-block: clamp(4rem, 8vw, 7.5rem); }
/* un poco más ancha que las demás, para que las seis categorías entren en un renglón en una notebook */
.finalistas .ancho { width: min(100% - 2 * var(--margen), 68rem); }
.finalistas__encabezado { gap: .9rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.finalistas__encabezado .titulo { letter-spacing: .06em; text-shadow: 0 0 40px rgba(20, 200, 220, .35); }
.finalistas__encabezado p { max-width: 48rem; }

.mancha--finalistas {
  left: -14rem; top: -4rem; width: 40rem; height: 32rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(166, 208, 14, .3), rgba(20, 200, 220, .12) 55%, transparent 75%);
  filter: blur(30px); animation: latir 9s ease-in-out infinite alternate;
}
.ondas--finalistas { left: 0; top: 0; width: min(20rem, 26vw); height: 100%; }

/* ---------- Categorías: llevan a su tarjeta y marcan la que se ve ---------- */

.finalistas__categorias { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem .7rem; }
.finalistas__boton {
  font-family: var(--cuerpo); font-weight: 700; font-size: clamp(.86rem, .8rem + .25vw, 1rem); line-height: 1.15; color: var(--fuerte);
  padding: .55em 1em .5em; border-radius: 99px; border: 2px solid transparent;
  background: linear-gradient(180deg, #121634, #05060d) padding-box, linear-gradient(90deg, #5d8f8d, #8a5aa8) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 #090a18, 0 10px 14px rgba(0, 0, 0, .55);
  transition: transform .35s var(--suave), box-shadow .35s, color .3s;
}
.finalistas__boton:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 7px 0 #090a18, 0 16px 18px rgba(0, 0, 0, .5), 0 0 26px -6px rgba(138, 90, 168, .9);
}
.finalistas__boton:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), 0 1px 0 #090a18; transition-duration: .07s; }
.finalistas__boton.activa {
  color: #fff;
  background: linear-gradient(180deg, #4183ff 0%, #0b5dff 46%, #0044de 100%) padding-box, linear-gradient(90deg, #14c8dc, #c5f21c) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #002a98, 0 12px 14px rgba(0, 0, 0, .55), 0 18px 36px -10px var(--azul);
}

/* ---------- Carrusel: una tarjeta por categoría, como las placas del anuncio ---------- */

.carrusel--finalistas { --ancho-tarjeta: min(48rem, 86vw); margin-top: clamp(.4rem, 1.4vw, 1rem); }
/* las categorías de arriba ya marcan cuál se ve */
.carrusel--finalistas .carrusel__puntos { display: none; }

.finalista {
  /* siempre oscura, como las placas: adentro valen los colores del modo oscuro también en modo claro */
  --texto: #e9edf5; --fuerte: #fff; --tenue: #9aa3b5; --cian: #14c8dc; --lima: #c5f21c; --celeste: #99d6ff;
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  flex: 0 0 var(--ancho-tarjeta); scroll-snap-align: center;
  display: grid; align-content: center; justify-items: center; gap: clamp(.9rem, 2.6vh, 1.6rem);
  padding: clamp(1.2rem, 3.6vh, 2.4rem) clamp(1.1rem, 4vw, 2.8rem);
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16); text-align: center; color: var(--texto);
  background:
    radial-gradient(60% 65% at 0% 0%, rgba(166, 208, 14, .26), transparent 70%),
    radial-gradient(70% 75% at 100% 100%, rgba(30, 90, 255, .5), transparent 72%),
    linear-gradient(160deg, #060a16, #000 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 40px -20px #000;
  transition: opacity .55s, transform .75s var(--suave), box-shadow .55s, border-color .55s;
}
/* Las vecinas se apagan y quedan giradas hacia la del centro, como en Ganadores, recién cuando principal.js dejó
   listo el carrusel y marcó cuál se ve. Si el script no llegó, o el navegador usó una copia vieja guardada (pasó el
   2026-11-08: tarjetas apagadas y sin contraste en el celular de Francisco), se ven todas a pleno. */
.carrusel--listo .finalista { opacity: .32; transform: perspective(1200px) scale(.88); cursor: pointer; }
.carrusel--listo .finalista:has(~ .finalista.activo) { transform: perspective(1200px) scale(.88) rotateY(16deg); }
.carrusel--listo .finalista.activo ~ .finalista { transform: perspective(1200px) scale(.88) rotateY(-16deg); }
.carrusel--listo .finalista.activo {
  opacity: 1; transform: perspective(1200px) scale(1); cursor: auto; border-color: rgba(153, 214, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 34px -8px rgba(20, 200, 220, .6), 0 50px 70px -30px #000, 0 60px 110px -40px rgba(0, 84, 255, 1);
}
/* las líneas onduladas de la esquina, como en las placas; se mecen despacio y se apagan antes de llegar a los nombres */
.finalista::before {
  content: ""; position: absolute; z-index: -1; left: -7%; top: -20%; width: 44%; aspect-ratio: 3 / 2; pointer-events: none;
  -webkit-mask-image: radial-gradient(115% 100% at 0% 0%, #000 38%, transparent 76%);
  mask-image: radial-gradient(115% 100% at 0% 0%, #000 38%, transparent 76%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2314c8dc'/%3E%3Cstop offset='1' stop-color='%23a6d00e'/%3E%3C/linearGradient%3E%3Cpath id='o' d='M-30 46C20 4 74 104 126 52S206 -6 270 38' fill='none' stroke='url(%23g)' stroke-width='.8'/%3E%3C/defs%3E%3Cuse href='%23o'/%3E%3Cuse href='%23o' transform='translate(3 7) rotate(1.6)'/%3E%3Cuse href='%23o' transform='translate(6 14) rotate(3.2)'/%3E%3Cuse href='%23o' transform='translate(9 21) rotate(4.8)'/%3E%3Cuse href='%23o' transform='translate(12 28) rotate(6.4)'/%3E%3Cuse href='%23o' transform='translate(15 35) rotate(8)'/%3E%3Cuse href='%23o' transform='translate(18 42) rotate(9.6)'/%3E%3Cuse href='%23o' transform='translate(21 49) rotate(11.2)'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .8; transform-origin: 0 0;
  animation: finalista-mecer 11s ease-in-out infinite alternate;
}
@keyframes finalista-mecer { from { transform: rotate(-4deg) scale(.96); } to { transform: translate(2%, 3%) rotate(5deg) scale(1.06); } }
.pausado .finalista::before { animation-play-state: paused; }
[data-alivio="2"] .finalista::before { animation: none; }

.finalista__categoria { font-family: var(--cuerpo); font-weight: 700; font-size: clamp(.9rem, min(2.5cqi, 2.6vh), 1.15rem); line-height: 1.2; letter-spacing: .015em; color: #fff; }
.finalista__categoria span {
  display: inline-block; padding: .42em 1.25em .38em; border-radius: 8px; border: 2px solid transparent;
  background: linear-gradient(180deg, #0d1026, #04050b) padding-box, linear-gradient(90deg, #5d8f8d, #8a5aa8) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 #090a18, 0 0 26px -6px rgba(138, 90, 168, .85);
}

.finalista__nombres {
  display: grid; justify-items: center; gap: clamp(.5rem, 1.5vh, .95rem); width: 100%;
  font-family: var(--titulos); font-weight: 600; font-size: clamp(.95rem, min(3.1cqi, 2.9vh), 1.4rem); line-height: 1.22; letter-spacing: .015em;
  color: var(--fuerte); text-wrap: balance;
}
.finalista__nombres li { text-shadow: 0 0 22px rgba(120, 170, 255, .35); }
.finalista__nombres small {
  display: block; margin-top: .3em; font-family: var(--cuerpo); font-weight: 500; font-size: .78em; letter-spacing: .03em;
  color: var(--celeste); text-shadow: none;
}
/* Las listas largas van en dos columnas cuando la tarjeta es ancha: así ninguna crece de alto. */
@container (min-width: 32rem) {
  .finalista__nombres--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 4cqi, 2.4rem); font-size: clamp(.9rem, min(2.6cqi, 2.6vh), 1.2rem); }
  .finalista__nombres--doble li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Cierre: cuándo se conocen los ganadores ---------- */

.finalistas__cierre { display: grid; justify-items: center; gap: .9rem; margin-top: clamp(1.4rem, 3.5vw, 2.6rem); text-align: center; }
.finalistas__cierre p { max-width: 42rem; }

/* ---------- Modo claro ---------- */

[data-modo="claro"] .finalistas__encabezado .titulo { text-shadow: none; }
[data-modo="claro"] .finalistas__boton {
  background: linear-gradient(180deg, #fff, #e8edfa) padding-box, linear-gradient(90deg, #4f8f8c, #8a5aa8) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #c3cde6, 0 10px 14px rgba(10, 30, 90, .22);
}
[data-modo="claro"] .finalistas__boton:hover { box-shadow: inset 0 1px 0 #fff, 0 7px 0 #c3cde6, 0 16px 18px rgba(10, 30, 90, .22), 0 0 24px -6px rgba(138, 90, 168, .7); }
[data-modo="claro"] .finalistas__boton.activa {
  color: #fff;
  background: linear-gradient(180deg, #4183ff 0%, #0b5dff 46%, #0044de 100%) padding-box, linear-gradient(90deg, #14c8dc, #8fbf00) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #002a98, 0 12px 14px rgba(10, 30, 90, .3), 0 18px 36px -10px var(--azul);
}
[data-modo="claro"] .finalista { box-shadow: 0 0 0 1px rgba(12, 30, 92, .1), 0 26px 40px -22px rgba(10, 30, 90, .55); }
[data-modo="claro"] .carrusel--listo .finalista.activo {
  box-shadow: 0 0 0 1px rgba(12, 30, 92, .12), 0 0 30px -10px rgba(20, 140, 200, .6), 0 44px 70px -30px rgba(10, 30, 90, .6), 0 60px 110px -40px rgba(0, 84, 255, .7);
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 48rem) {
  /* se pasa con el dedo o con las categorías: las flechas quedaban encima de los nombres */
  .carrusel--finalistas .carrusel__flecha { display: none; }
}

@media (max-width: 40rem) {
  /* En el celular las categorías van en una tira que se desliza de costado (en cuatro renglones tapaban la
     tarjeta); principal.js trae a la vista la que se está mostrando. */
  .finalistas__categorias {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: .5rem;
    margin-inline: calc(-1 * var(--margen)); padding: .4rem var(--margen) .75rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--margen), #000 calc(100% - var(--margen)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--margen), #000 calc(100% - var(--margen)), transparent);
  }
  .finalistas__categorias::-webkit-scrollbar { display: none; }
  .finalistas__boton { flex: none; font-size: .84rem; padding: .5em .95em .45em; }
  /* cada tarjeta con el alto de lo suyo: las cortas no quedan con un hueco arriba */
  .finalista { align-self: start; }
}

/* ---------- Notebooks de 1366×768: título, categorías y tarjeta entran juntos en la pantalla ---------- */

@media (min-width: 48.01rem) and (max-height: 50rem) {
  .finalistas { padding-block: clamp(2rem, 6vh, 7.5rem); }
  .finalistas__encabezado { gap: .45rem; margin-bottom: clamp(.8rem, 2.4vh, 2.4rem); }
  .finalistas__encabezado .titulo { font-size: clamp(1.5rem, 5.6vh, 3.3rem); }
  .finalistas__encabezado p { font-size: clamp(.86rem, 2.55vh, 1.1rem); }
  .carrusel--finalistas .carrusel__pista { padding-block: clamp(.8rem, 2.4vh, 1.6rem); }
  .finalistas__cierre { margin-top: clamp(.6rem, 2vh, 2.6rem); }
}