/* ==========================================================================
   El toque diferencial del micrositio
   ==========================================================================

   La web oficial es ROJA sobre un negro neutro: club, noche, marca. Esta
   landing va a manos de un delegado de residencia, y tenía que dejar de
   parecer la misma web en pequeño.

   Aquí es VIOLETA ELÉCTRICO sobre un negro azulado, con aire de cartel de
   fiesta: cortes diagonales entre bloques y una barra de acción fija en
   móvil, que la web grande no tiene.

   No se forkea nada: el sistema de diseño se hereda entero y aquí solo se
   redefinen sus variables. Un arreglo en la web grande sigue llegando.

   Dos colores NO se tocan a propósito:
   · el verde de WhatsApp, que es el botón que convierte;
   · el rojo de las placas de residencia del muro, porque ahí el color
     distingue residencia de universidad y si todo fuera violeta se perdería.
   ========================================================================== */

:root {
  /* --- El acento pasa a violeta --- */
  --rojo: #7b2cff;
  --rojo-vivo: #b14bff;
  --rojo-suave: #d29bff;
  --degradado-rojo: linear-gradient(120deg, #7b2cff 0%, #b14bff 52%, #ff3ea5 100%);
  --brillo-rojo: 0 0 32px rgba(123, 44, 255, .45);
  --brillo-rojo-fuerte: 0 0 12px rgba(177, 75, 255, .9), 0 0 40px rgba(123, 44, 255, .55);

  /* --- El negro se enfría: el mismo gesto que separa un cartel de un
         catálogo. Son pocos grados, pero se notan al lado del original. --- */
  --fondo: #06050c;
  --fondo-alt: #0c0a17;
  --superficie: #151223;
  --superficie-alta: #1d1930;
  --borde: #2b2542;
}

/* El muro conserva su código de color: residencia en rojo, universidad en
   violeta. Con el tema nuevo las dos habrían salido violetas. */
.marca { --tono: #ff1130; }

/* --------------------------------------------------------------------------
   Cortes diagonales: el aire de cartel
   -------------------------------------------------------------------------- */

.seccion--alt,
.cta-final {
  --corte: clamp(1.5rem, 4vw, 3.25rem);
  position: relative;
  margin-top: calc(var(--corte) * -1);
  padding-top: calc(var(--seccion-y) + var(--corte));
  clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%);
}

/* Y el de después vuelve a la horizontal, para que no se encadenen dos
   diagonales seguidas y parezca un acordeón. */
.seccion--alt + .seccion { padding-top: var(--seccion-y); }

/* --------------------------------------------------------------------------
   Barra de acción fija en móvil
   --------------------------------------------------------------------------
   Una landing pide el botón siempre a mano. En móvil sustituye al botón
   flotante de la web grande, que si no se pisan. */

.barra-accion { display: none; }

@media (max-width: 759px) {
  .wa-flotante { display: none; }

  .barra-accion {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem clamp(.9rem, 4vw, 1.2rem);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(6, 5, 12, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--borde);
  }

  .barra-accion__texto {
    flex: 1;
    min-width: 0;
    font-size: .84rem;
    line-height: 1.25;
    color: var(--texto-medio);
  }
  .barra-accion__texto b { display: block; color: var(--texto); font-size: .95rem; }

  .barra-accion .btn { flex-shrink: 0; padding-inline: 1.1rem; }

  /* Para que la barra no tape el final de la página */
  body { padding-bottom: 5.2rem; }
}

/* ==========================================================================
   Estructura propia: la esencia es la misma, la composición no
   ==========================================================================
   El color solo no basta —con él, las dos webs seguían teniendo la misma
   silueta—. Lo que cambia de verdad la lectura es cómo está montada la
   página, y eso es lo de aquí abajo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Los iconos, blancos
   --------------------------------------------------------------------------
   Iban con el color de acento sobre una placa roja: con el tema violeta
   quedaban dos colores peleándose dentro del mismo icono. En blanco se leen
   solos y la placa aporta el color. */

.lista-check__icono {
  stroke: #fff;
  border-color: rgba(177, 75, 255, .3);
  background: radial-gradient(circle at 50% 25%, rgba(123, 44, 255, .3), rgba(123, 44, 255, .08));
}

.lista-check li:hover .lista-check__icono {
  border-color: rgba(177, 75, 255, .65);
  background: radial-gradient(circle at 50% 25%, rgba(177, 75, 255, .45), rgba(123, 44, 255, .12));
}

.lista-check li[data-icono='check']::before {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* --------------------------------------------------------------------------
   2. Portada partida
   --------------------------------------------------------------------------
   La oficial abre con foto a sangre y el texto encima, y esa silueta es la
   que hacía que se confundieran. Aquí el texto va sobre negro a la izquierda
   y la foto ocupa la derecha con un corte en diagonal: se lee antes y se
   parece a un cartel, no a una portada de web. */

@media (min-width: 900px) {
  .portada {
    min-height: min(72svh, 620px);
    align-content: center;
  }

  .portada__fondo {
    inset: 0 0 0 38%;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }

  /* Sin el velo negro de la oficial: aquí la foto tiene que verse */
  .portada__fondo::after {
    background:
      linear-gradient(90deg, var(--fondo) 0%, rgba(6, 5, 12, .55) 22%, rgba(6, 5, 12, .12) 55%),
      linear-gradient(0deg, rgba(6, 5, 12, .55), transparent 45%);
  }

  .portada__contenido { max-width: 34rem; }
}

/* --------------------------------------------------------------------------
   3. Secciones numeradas
   --------------------------------------------------------------------------
   Un número enorme y hueco por bloque. Ordena la lectura de una landing
   —esto es un recorrido, no un menú de secciones— y es lo primero que
   distingue esta página de la oficial al pasarla rápido. */

.contenedor { position: relative; }

.contenedor[data-paso]::before {
  content: attr(data-paso);
  position: absolute;
  /* Dentro del relleno de la sección: dos de estos bloques recortan lo que se
     salga (uno por overflow y otro por el corte diagonal) y el número se
     perdía entero. */
  top: -1.6rem;
  right: 0;
  font-family: 'Anton', sans-serif;
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(177, 75, 255, .38);
  pointer-events: none;
  z-index: 0;
}

.contenedor[data-paso] > * { position: relative; z-index: 1; }

@media (max-width: 719px) {
  .contenedor[data-paso]::before { font-size: 5rem; top: -1rem; opacity: .8; }
}

/* --------------------------------------------------------------------------
   4. La rejilla de espacios
   -------------------------------------------------------------------------- */

.espacios-rejilla {
  display: grid;
  /* Dos columnas ya en móvil: a una sola, once fichas eran diez mil píxeles
     de scroll y la variedad —que es justo lo que hay que enseñar— se perdía
     en el desfile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: clamp(.7rem, 1.6vw, 1rem);
}

.espacio {
  position: relative;
  border-radius: var(--radio-s);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--superficie);
  /* En móvil, más altas: a 4/3 la ficha medía 168x126 y con el rótulo encima
     de la foto no quedaba foto. En vertical la imagen recupera presencia. */
  aspect-ratio: 3 / 4;
  transition: border-color .25s ease, transform .25s ease;
}

.espacio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

@media (min-width: 720px) {
  .espacio { aspect-ratio: 4 / 3; }
}

.espacio:hover { border-color: rgba(177, 75, 255, .55); transform: translateY(-3px); }
.espacio:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Los reels, a lo ancho de la pantalla
   --------------------------------------------------------------------------
   Dentro del contenedor de 1180 px, tres vídeos verticales salían a 383 px:
   en un monitor grande eso es una franja estrecha en medio de la pantalla y
   se ven pequeños por comparación. La fila se sale del contenedor y crece con
   el monitor —en una pantalla de 2.000 px pasan de 383 a unos 550—, mientras
   que el titular se queda alineado con el resto de la página.

   Solo de tablet para arriba: en móvil manda el carril deslizante. */

@media (min-width: 760px) {
  .seccion--reels .videos-v {
    width: min(100vw - 3rem, 1700px);
    margin-inline: calc(50% - min(50vw - 1.5rem, 850px));
  }
}

/* --------------------------------------------------------------------------
   La rejilla de espacios, también a lo ancho
   --------------------------------------------------------------------------
   El mínimo de 148 px es el que da dos columnas en móvil, pero sin tope en
   pantalla ancha metía SIETE columnas: fichas de 155x116 con un rótulo de
   97 px encima, o sea, ninguna foto. De tablet para arriba el mínimo sube a
   300 px —cuatro columnas en un monitor normal— y la rejilla se sale del
   contenedor como la fila de reels, para no quedarse en una franja estrecha
   en medio de la pantalla. */

@media (min-width: 720px) {
  .espacios-rejilla {
    width: min(100vw - 3rem, 1500px);
    margin-inline: calc(50% - min(50vw - 1.5rem, 750px));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(.8rem, 1.4vw, 1.1rem);
  }
}

/* --------------------------------------------------------------------------
   Aire
   --------------------------------------------------------------------------
   Los rótulos sobre las fotos ("Bodega rústica · Otro rollo") se han ido: en
   una ficha pequeña eran dos líneas encima de la imagen y quedaba pobre. Las
   fotos hablan solas y la entradilla ya dice lo que hay.

   Y la página iba apretada: las secciones de la web oficial están calculadas
   para un sitio con mucho contenido, y una landing necesita respirar más
   entre bloque y bloque. */

:root { --seccion-y: clamp(3.5rem, 7vw, 6rem); }

.espacios-rejilla {
  gap: clamp(.9rem, 2.5vw, 1.2rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

#espacios .acciones--centro,
#incluye .acciones--centro { margin-top: clamp(2rem, 4.5vw, 3rem); }

.cabecera-seccion { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

/* Las fichas, sin rótulo, ganan un punto de contraste al pasar por encima */
.espacio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 5, 12, .45), transparent 45%);
  opacity: .55;
  transition: opacity .25s ease;
  pointer-events: none;
}

.espacio:hover::after { opacity: 0; }