/* ==========================================================================
   ARCHIVO:   css/3-inicio.css
   PARTE:     Inicio (diseño "Ruta")
   CONTIENE:  portada con la foto de los miembros y el lema, cinta de categorías, sección del
              próximo evento, trayecto de tres pasos, manifiesto de La Cámara
              con sus accesos y contacto
   LO USAN:   index.html
   ORDEN:     después de 2-estructura.css
   ========================================================================== */

/* ---------- Portada ----------
   Texto con el lema a la izquierda y la foto de los miembros a la derecha.
   En pantallas angostas la foto pasa debajo del texto. */
.portada {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(1.5rem, 0.5rem + 3.5vw, 3.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
.portada__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: min(34rem, calc(100svh - var(--cabecera-alto) - 6rem));
}
.portada__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* La ruta en pequeño: Honduras, una línea con un punto que viaja, California */
.portada__ruta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: rgba(8, 20, 47, 0.6);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinta);
}
.portada__ruta > span:first-child {
  color: var(--azul);
}
.portada__ruta > span:last-child {
  color: var(--rojo);
}
.portada__ruta-linea {
  position: relative;
  width: clamp(3rem, 8vw, 5.5rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 4px, transparent 4px 8px);
}
.portada__ruta-linea::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 10px 2px rgba(255, 200, 61, 0.8);
  animation: viajar 2.6s var(--entrada-salida) infinite;
}
@keyframes viajar {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

.portada__titulo {
  max-width: 17ch;
  font-size: clamp(1.75rem, 0.9rem + 2.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* Palabras que suben al cargar (las separa js/componentes/ruta.js) */
.palabra {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: bottom;
}
.palabra > span {
  display: inline-block;
  animation: subir-palabra 900ms var(--salida) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes subir-palabra {
  from { transform: translateY(105%) rotate(4deg); opacity: 0; }
}

.portada__bajada {
  max-width: 36rem;
  font-size: var(--paso-1);
  line-height: 1.6;
  color: var(--tinta);
}
.portada__invitacion {
  max-width: 34rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--aviso);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.js .portada__bajada,
.js .portada__invitacion,
.js .portada__acciones,
.js .portada__foto {
  animation: aparecer 800ms var(--salida) both;
}
.js .portada__bajada { animation-delay: 500ms; }
.js .portada__invitacion { animation-delay: 600ms; }
.js .portada__acciones { animation-delay: 700ms; }
.js .portada__foto { animation-delay: 250ms; }

/* La foto de los miembros: marco con un borde de luz y una etiqueta al pie */
.portada__foto {
  position: relative;
  margin: 0;
  min-width: 0;
}
.portada__marco {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px var(--linea-fuerte),
    0 40px 80px -40px rgba(0, 0, 0, 0.85),
    0 0 60px -20px rgba(61, 214, 245, 0.35);
}
.portada__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 11, 31, 0.55));
  pointer-events: none;
}
.portada__marco img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 783;
  object-fit: cover;
}
.portada__pie {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  font-size: var(--paso--1);
  color: #ecf3ff;
}
.portada__pie-dato {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--aviso);
  font-weight: 600;
  color: #040b1f;
}
@media (max-width: 56rem) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .portada__titulo {
    max-width: 20ch;
  }
  /* En el celular la foto va primero: es lo primero que se ve al entrar */
  .portada__foto {
    order: -1;
  }
}
@media (max-width: 30rem) {
  /* En el celular la etiqueta va debajo de la foto, para no tapar caras */
  .portada__pie {
    position: static;
    margin-top: 0.75rem;
    color: var(--tinta-suave);
  }
  .portada__marco::after {
    display: none;
  }
}
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.portada__acciones .boton {
  min-height: 3rem;
  padding-inline: 1.5rem;
  font-size: 0.95rem;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(16px); }
}


/* Buscador: una consola de vidrio con borde de luz que gira al escribir
   (la animación girar-borde está en css/2-estructura.css) */
.buscador {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 37rem;
}
.buscador__etiqueta {
  font-size: var(--paso--1);
  font-weight: 500;
  color: var(--tinta-suave);
}
.buscador__caja {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: 16px;
  background: rgba(8, 20, 47, 0.78);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte), 0 20px 50px -24px rgba(61, 214, 245, 0.45);
}
.buscador__caja::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: 17px;
  background: conic-gradient(from var(--giro), var(--azul), var(--violeta), var(--rojo), var(--azul));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 260ms var(--salida);
  animation: girar-borde 4s linear infinite;
}
.buscador__caja:focus-within::before {
  opacity: 1;
}
.buscador__campo {
  flex: 1;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0 0.85rem;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
}
.buscador__campo::placeholder {
  color: var(--tinta-suave);
  opacity: 1;
}
.buscador__campo:focus-visible {
  outline: none;
}
.buscador__caja:has(.buscador__campo:focus-visible) {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

.atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.atajo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 160ms var(--salida), background-color 160ms var(--salida), transform 160ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .atajo:hover {
    border-color: var(--azul);
    background: rgba(61, 214, 245, 0.1);
    color: var(--tinta);
    transform: translateY(-2px);
  }
}

/* ---------- Cinta de categorías (la arma js/componentes/ruta.js) ---------- */
.cinta {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--linea);
  background: rgba(8, 20, 47, 0.55);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta__pista {
  display: flex;
  width: max-content;
  animation: cinta 52s linear infinite;
}
.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista {
  animation-play-state: paused;
}
.cinta__lista {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.cinta__lista li {
  display: flex;
  align-items: center;
}
.cinta__lista li::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline: 1.4rem;
  background: var(--rojo);
  transform: rotate(45deg);
}
.cinta__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(0.82rem, 0.62rem + 0.78vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .cinta__lista a:hover {
    color: var(--azul);
  }
}
@keyframes cinta {
  to { transform: translateX(-50%); }
}

/* ---------- Secciones de inicio ---------- */
.seccion {
  position: relative;
  padding-block: var(--espacio-seccion);
}
.seccion__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
}
.seccion__cabeza h2,
.manifiesto-bloque h2 {
  font-size: clamp(1.56rem, 0.86rem + 2.65vw, 2.81rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.seccion__cabeza p {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: var(--paso-1);
  color: var(--tinta-suave);
}

/* ---------- Trayecto: los tres pasos ----------
   Es una secuencia real, por eso va numerada. Una línea une las tres paradas
   y se dibuja cuando la sección entra en pantalla. */
.trayecto {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.trayecto::before,
.trayecto::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  right: calc((100% - 2 * clamp(1rem, 3vw, 2.5rem)) / 3 - 1.75rem);
  height: 2px;
}
.trayecto::before {
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 5px, transparent 5px 10px);
}
.trayecto::after {
  background: linear-gradient(90deg, var(--azul), var(--violeta), var(--rojo));
  box-shadow: 0 0 12px rgba(61, 214, 245, 0.6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1600ms var(--entrada-salida) 200ms;
}
.trayecto--activo::after {
  transform: scaleX(1);
}
.paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  counter-increment: paso;
}
.paso::before {
  content: counter(paso);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--fondo);
  box-shadow: inset 0 0 0 1.5px var(--linea-fuerte);
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tinta-suave);
  transition: background-color 400ms var(--salida), color 400ms var(--salida), box-shadow 400ms var(--salida);
}
.paso::after {
  display: none;
}
.trayecto--activo .paso::before {
  background: var(--azul);
  color: var(--sobre-seleccion);
  box-shadow: 0 0 0 6px rgba(61, 214, 245, 0.16), 0 0 28px rgba(61, 214, 245, 0.55);
}
.trayecto--activo .paso:nth-child(2)::before { transition-delay: 800ms; }
.trayecto--activo .paso:nth-child(3)::before {
  transition-delay: 1500ms;
  background: var(--rojo);
  box-shadow: 0 0 0 6px rgba(255, 200, 61, 0.16), 0 0 28px rgba(255, 200, 61, 0.55);
}
.paso h3 {
  font-size: var(--paso-2);
  font-weight: 600;
}
.paso p {
  max-width: 24rem;
  color: var(--tinta-suave);
}
.pasos__nota {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.pasos__nota p {
  color: var(--tinta-suave);
}
@media (max-width: 48rem) {
  .trayecto {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .trayecto::before,
  .trayecto::after {
    top: 1.75rem;
    bottom: 1.75rem;
    left: calc(1.75rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .trayecto::before {
    background: repeating-linear-gradient(180deg, var(--linea-fuerte) 0 5px, transparent 5px 10px);
  }
  .trayecto::after {
    background: linear-gradient(180deg, var(--azul), var(--violeta), var(--rojo));
    transform: scaleY(0);
    transform-origin: top;
  }
  .trayecto--activo::after {
    transform: scaleY(1);
  }
  .paso {
    padding-left: 4.75rem;
  }
  .paso::before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
}

/* ---------- Manifiesto y accesos a La Cámara ---------- */
.manifiesto-bloque__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}
.manifiesto-bloque__texto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.manifiesto {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.17rem, 0.7rem + 1.72vw, 2.11rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
/* Las palabras se encienden al bajar (las separa js/componentes/ruta.js) */
.manifiesto__palabra {
  color: var(--tinta);
  opacity: 0.22;
  transition: opacity 360ms var(--salida), color 360ms var(--salida);
}
.manifiesto__palabra--luz {
  opacity: 1;
}
.accesos__lista {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  counter-reset: acceso;
}
.accesos__lista a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 450;
  color: var(--tinta);
  text-decoration: none;
  counter-increment: acceso;
  overflow: hidden;
  transition: color 200ms var(--salida);
}
.accesos__lista li:first-child a {
  border-top: 1px solid var(--linea);
}
.accesos__lista a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(61, 214, 245, 0.16), rgba(139, 123, 255, 0.08));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--salida);
}
.accesos__lista svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: auto;
  color: var(--icono-acento, var(--rojo));
  transition: transform 220ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .accesos__lista a:hover {
    color: var(--tinta);
  }
  .accesos__lista a:hover::after {
    transform: scaleX(1);
  }
  .accesos__lista a:hover svg {
    transform: translateX(5px);
  }
}
@media (max-width: 52rem) {
  .manifiesto-bloque__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Contacto ---------- */
.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0;
  border-block: 1px solid var(--linea);
}
.contacto > div {
  padding: 1.5rem 1.5rem 1.5rem 0;
}
.contacto > div + div {
  padding-left: 1.5rem;
  border-left: 1px solid var(--linea);
}
.contacto dt {
  font-size: var(--paso--1);
  font-weight: 500;
  color: var(--tinta-suave);
}
.contacto dd {
  margin: 0.35rem 0 0;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-1);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.contacto dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}
@media (max-width: 48rem) {
  .contacto > div,
  .contacto > div + div {
    padding: 1.1rem 0;
    border-left: 0;
  }
  .contacto > div + div {
    border-top: 1px solid var(--linea);
  }
}

/* ---------- Próximo evento (el cuadro está en css/3-eventos.css) ---------- */
.seccion--evento {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .palabra > span,
  .js .portada__bajada,
  .js .portada__acciones,
  .js .portada__registro,
  .globo__lienzo,
  .globo--vivo .globo__pista,
  .globo__pista::before,
  .portada__ruta-linea::after,
  .buscador__caja::before {
    animation: none;
  }
  .cinta__pista {
    animation: none;
    flex-wrap: wrap;
  }
  .cinta {
    -webkit-mask: none;
    mask: none;
  }
  .trayecto::after,
  .paso::before,
  .manifiesto__palabra {
    transition: none;
  }
}

/* ======================================================================
   INICIO ESTRUCTURADO (v0.12)
   El inicio ya no muestra todo el sitio: invita a entrar a cada sección.
   Orden: portada, cinta, puertas, evento breve, equipo y contacto.
   ====================================================================== */

/* ---------- Puertas: cuatro accesos a las secciones ----------
   En pantallas anchas: el Directorio ocupa la columna grande de la izquierda;
   Eventos y La Cámara van arriba a la derecha; Registra tu negocio, abajo. */
.puertas {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.puerta--grande {
  grid-row: span 2;
}
.puerta--accion {
  grid-column: 2 / span 2;
}
.puerta__enlace {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  min-height: 13rem;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-radius: 20px;
  background:
    radial-gradient(22rem circle at var(--x, -40rem) var(--y, -40rem), rgba(61, 214, 245, 0.12), transparent 60%),
    rgba(8, 20, 47, 0.72);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition: transform 260ms var(--salida), box-shadow 260ms var(--salida);
}
/* Filo de color que aparece al pasar el puntero */
.puerta__enlace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(130deg, var(--azul), var(--violeta), var(--rojo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 300ms var(--salida);
}
.puerta__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: auto;
  border-radius: 14px;
  background: rgba(61, 214, 245, 0.1);
  box-shadow: inset 0 0 0 1px rgba(61, 214, 245, 0.35);
  color: var(--azul);
}
.puerta__icono svg {
  width: 1.6rem;
  height: 1.6rem;
}
.puerta__titulo {
  margin-top: 1.5rem;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-2);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.puerta__texto {
  max-width: 30rem;
  color: var(--tinta-suave);
}
.puerta__ir {
  position: absolute;
  top: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  right: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--tinta);
  transition: transform 260ms var(--salida), background-color 260ms var(--salida), color 260ms var(--salida);
}
.puerta__ir svg {
  width: 1.15rem;
  height: 1.15rem;
}
/* El Directorio: la puerta principal, con un mapa de puntos de fondo */
.puerta--grande .puerta__enlace {
  min-height: 27rem;
  background:
    radial-gradient(22rem circle at var(--x, -40rem) var(--y, -40rem), rgba(61, 214, 245, 0.14), transparent 60%),
    radial-gradient(circle at 70% 35%, rgba(61, 214, 245, 0.18), transparent 55%),
    radial-gradient(rgba(150, 190, 255, 0.22) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    rgba(8, 20, 47, 0.78);
}
.puerta--grande .puerta__titulo {
  font-size: clamp(1.56rem, 1.01rem + 1.87vw, 2.5rem);
  font-weight: 700;
}
/* Registra tu negocio: la acción, en oro */
.puerta--accion .puerta__enlace {
  min-height: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  padding-right: 5rem;
  background:
    radial-gradient(22rem circle at var(--x, -40rem) var(--y, -40rem), rgba(255, 200, 61, 0.14), transparent 60%),
    linear-gradient(100deg, rgba(255, 200, 61, 0.14), rgba(8, 20, 47, 0.72) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 61, 0.4);
}
.puerta--accion .puerta__icono {
  margin-bottom: 0;
  background: rgba(255, 200, 61, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 61, 0.45);
  color: var(--rojo);
}
.puerta--accion .puerta__titulo {
  margin-top: 0;
}
.puerta--accion .puerta__texto {
  flex-basis: 100%;
  padding-left: calc(3rem + 1.25rem);
}
.puerta--accion .puerta__ir {
  top: 50%;
  translate: 0 -50%;
  background: var(--rojo);
  color: var(--sobre-rojo);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .puerta__enlace:hover {
    transform: translateY(-4px);
  }
  .puerta__enlace:hover::before {
    opacity: 1;
  }
  .puerta__enlace:hover .puerta__ir {
    transform: translateX(4px);
    background: var(--azul);
    color: var(--sobre-seleccion);
  }
  .puerta--accion .puerta__enlace:hover .puerta__ir {
    background: var(--rojo-realce);
    color: var(--sobre-rojo);
  }
}
.puerta__enlace:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 4px;
}
/* Entrada escalonada al llegar a la sección */
.js .puertas .puerta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--salida), transform 700ms var(--salida);
}
.js .puertas--visibles .puerta {
  opacity: 1;
  transform: none;
}
.js .puertas--visibles .puerta:nth-child(2) { transition-delay: 90ms; }
.js .puertas--visibles .puerta:nth-child(3) { transition-delay: 180ms; }
.js .puertas--visibles .puerta:nth-child(4) { transition-delay: 270ms; }

@media (max-width: 60rem) {
  .puertas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .puerta--grande {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .puerta--grande .puerta__enlace {
    min-height: 17rem;
  }
  .puerta--accion {
    grid-column: 1 / -1;
  }
}
@media (max-width: 36rem) {
  .puertas {
    grid-template-columns: minmax(0, 1fr);
  }
  .puerta__enlace {
    min-height: 0;
  }
  .puerta__icono {
    margin-bottom: 0;
  }
  .puerta--accion .puerta__texto {
    padding-left: 0;
  }
}

/* ---------- Evento breve: una franja con fecha, nombre y enlace ---------- */
.evento-breve {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem) clamp(1.1rem, 0.8rem + 1.5vw, 2rem);
  border-radius: 20px;
  background: rgba(8, 20, 47, 0.72);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--tinta);
  text-decoration: none;
  transition: transform 260ms var(--salida), box-shadow 260ms var(--salida);
}
.evento-breve__fecha {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 16px;
  background: var(--azul);
  color: var(--sobre-seleccion);
  line-height: 1;
}
.evento-breve__dia {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.evento-breve__mes {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.evento-breve__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.evento-breve__etiqueta {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul);
}
.evento-breve__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--paso-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.evento-breve__datos {
  color: var(--tinta-suave);
}
.evento-breve__ir {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 220ms var(--salida), color 220ms var(--salida);
}
.evento-breve__ir svg {
  width: 1.1rem;
  height: 1.1rem;
}
/* Gala: negro y oro, como su afiche */
.evento-breve--gala {
  background:
    repeating-radial-gradient(circle at 110% 140%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(100deg, #0d0c0b, #17140f);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 120, 0.55), 0 0 40px -10px rgba(232, 196, 120, 0.35);
}
.evento-breve--gala .evento-breve__fecha {
  background: linear-gradient(140deg, #b08a48, #ffe4a8 55%, #e8c478);
  color: #0b0a08;
}
.evento-breve--gala .evento-breve__etiqueta {
  color: #e8c478;
}
.evento-breve--gala .evento-breve__titulo {
  color: #f6efe0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.evento-breve--gala .evento-breve__datos {
  color: #cbbf9f;
}
.evento-breve--gala .evento-breve__ir {
  box-shadow: inset 0 0 0 1px rgba(232, 196, 120, 0.6);
  color: #f6efe0;
}
@media (hover: hover) and (pointer: fine) {
  .evento-breve:hover {
    transform: translateY(-3px);
  }
  .evento-breve:hover .evento-breve__ir {
    background: var(--azul);
    color: var(--sobre-seleccion);
  }
  .evento-breve--gala:hover .evento-breve__ir {
    background: #e8c478;
    color: #0b0a08;
  }
}
.evento-breve:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 4px;
}
@media (max-width: 40rem) {
  .evento-breve {
    flex-wrap: wrap;
  }
  .evento-breve__fecha {
    width: 4.25rem;
    height: 4.25rem;
  }
  .evento-breve__cuerpo {
    flex-basis: calc(100% - 5.5rem);
  }
  .evento-breve__ir {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Equipo: foto del equipo y acceso a La Cámara ---------- */
.equipo__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.equipo__foto {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linea-fuerte), 0 40px 80px -40px rgba(61, 214, 245, 0.55);
}
.equipo__foto--lista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.equipo__texto {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.equipo__texto h2 {
  font-size: clamp(1.56rem, 0.86rem + 2.34vw, 2.57rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.equipo__lema {
  font-family: var(--fuente-titulo);
  font-size: var(--paso-2);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.equipo__dato {
  padding-left: 1rem;
  border-left: 2px solid var(--azul);
  color: var(--tinta-suave);
}
.equipo__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 52rem) {
  .equipo__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El contacto del inicio queda breve, al final */
#contacto .seccion__cabeza {
  margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .js .puertas .puerta {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .puerta__enlace,
  .evento-breve {
    transition: none;
  }
}

/* Evento breve con letra grande en celular: la fecha se ajusta a su contenido */
@media (max-width: 40rem) {
  .evento-breve__fecha {
    width: auto;
    min-width: 4.25rem;
    height: auto;
    min-height: 4.25rem;
    padding: 0.4rem 0.7rem;
  }
  .evento-breve__cuerpo {
    flex-basis: 100%;
  }
}