/* =============================================================================
   Estilos de la cortina de lanzamiento (src/components/Cortina.astro)
   =============================================================================

   Van en public/ y no en un <style> del componente a propósito: Astro inlinea
   el CSS de todo lo que el Layout importa en el HTML de TODAS las páginas
   (build.inlineStylesheets: 'always'), así que un <style> scoped acá le cobraba
   ~7 KB a cada página del sitio, incluso con la cortina abajo. Como hoja aparte
   solo la pide la cortina —una pantalla sola, que bien puede permitirse una
   petición más—. El <link> lo pone el Layout cuando la cortina está arriba.

   Por eso también todo cuelga de `.cortina`: sin el scoping de Astro, es lo que
   mantiene estos nombres genéricos (.titulo, .marca, .texto) fuera del resto
   del sitio. Los colores y las tipografías salen de los tokens de gu.css.
   ========================================================================== */

/* Paleta propia de la cortina: la del sitio es clara y acá manda el fondo
   oscuro, donde el acento de marca no se lee (el footer hace lo mismo con el
   logo en negativo). El dorado es el --gu-gold de la marca. */
.cortina {
  --fondo: #080b09;
  --tinta: #f3f4f1;
  --tenue: #9aa39c;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 32px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 28px 28px;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  isolation: isolate;
}

/* Dos halos que respiran: el dorado arriba y el verde de marca abajo. Es todo
   el "glamour" del fondo — sin imágenes, así la cortina pesa lo que pesa el
   HTML. */
.cortina .aura {
  position: absolute;
  inset: -20% -10%;
  z-index: -2;
  background:
    radial-gradient(42% 38% at 72% 12%, rgba(246, 183, 23, 0.26), transparent 70%),
    radial-gradient(46% 42% at 18% 88%, rgba(21, 84, 101, 0.42), transparent 72%),
    radial-gradient(70% 60% at 50% 45%, rgba(246, 183, 23, 0.05), transparent 75%);
  animation: cortina-respirar 14s var(--gu-ease) infinite alternate;
}

/* Trama diagonal finísima: da textura de tela sin pedir un archivo. */
.cortina .trama {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 7px
  );
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

@keyframes cortina-respirar {
  from {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 0.85;
  }
  to {
    transform: scale(1.12) translate3d(0, -2%, 0);
    opacity: 1;
  }
}

.cortina .centro {
  display: grid;
  align-content: center;
  justify-items: center;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

/* Cada bloque entra un poco después que el anterior. */
.cortina .marca,
.cortina .insignia,
.cortina .titulo,
.cortina .texto,
.cortina .pistas,
.cortina .acciones,
.cortina .redes {
  animation: cortina-entrar 0.9s var(--gu-ease) both;
}
.cortina .insignia {
  animation-delay: 0.08s;
}
.cortina .titulo {
  animation-delay: 0.16s;
}
.cortina .texto {
  animation-delay: 0.26s;
}
.cortina .pistas {
  animation-delay: 0.36s;
}
.cortina .acciones {
  animation-delay: 0.46s;
}
.cortina .redes {
  animation-delay: 0.56s;
}

@keyframes cortina-entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Logo oficial en negativo, como en el footer. */
.cortina .marca {
  display: inline-flex;
  color: #fff;
}
.cortina .marca svg {
  width: auto;
  height: 44px;
}

.cortina .insignia {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 30px 0 22px;
  padding: 7px 16px 7px 13px;
  border: 1px solid rgba(246, 183, 23, 0.32);
  border-radius: 999px;
  background: rgba(246, 183, 23, 0.07);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gu-gold);
}
.cortina .punto {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gu-gold);
  box-shadow: 0 0 0 0 rgba(246, 183, 23, 0.55);
  animation: cortina-latir 2.4s ease-out infinite;
}
@keyframes cortina-latir {
  70% {
    box-shadow: 0 0 0 9px rgba(246, 183, 23, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(246, 183, 23, 0);
  }
}

.cortina .titulo {
  margin: 0;
  font-family: var(--gu-font-display);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -2px;
}

/* El destello dorado cruza el renglón una vez cada tanto. Si el navegador no
   sabe recortar el fondo al texto, queda el dorado plano del `color`. */
.cortina .brillo {
  color: var(--gu-gold);
  background: linear-gradient(
    100deg,
    #c88f04 0%,
    #f6b717 28%,
    #fff3cf 44%,
    #f6b717 60%,
    #c88f04 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: cortina-destello 7s linear infinite;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .cortina .brillo {
    color: transparent;
  }
}
@keyframes cortina-destello {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}

.cortina .texto {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: clamp(15.5px, 1.6vw, 18.5px);
  line-height: 1.65;
  color: #cfd6d0;
}

/* Las tres, del mismo ancho y en una sola fila mientras quepan: en flex
   quedaban 2 + 1 y la fila suelta descuadraba el centro de la pantalla. */
.cortina .pistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.cortina .pista {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  color: var(--tenue);
}
.cortina .pista strong {
  display: block;
  font-family: var(--gu-font-display);
  font-size: 14.5px;
  color: var(--tinta);
}
.cortina .pista__icono {
  flex: none;
  width: 21px;
  height: 21px;
  color: var(--gu-gold);
}

.cortina .acciones {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 40px;
}
/* Dorado y no el acento de marca: sobre el fondo oscuro es el único color de la
   paleta que se lee de lejos, y es el que da el aire de lanzamiento. */
.cortina .boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffc93a, var(--gu-gold));
  color: #231803;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 20px 44px -18px rgba(246, 183, 23, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease;
}
.cortina .boton:hover {
  transform: translateY(-2px);
  box-shadow:
    0 26px 52px -18px rgba(246, 183, 23, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.cortina .boton svg {
  width: 20px;
  height: 20px;
}
.cortina .nota {
  margin: 0;
  font-size: 13.5px;
  color: var(--tenue);
}

.cortina .redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.cortina .redes a {
  color: var(--tenue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cortina .redes a:hover {
  color: var(--gu-gold);
}

.cortina .pie {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  color: #818a83;
  text-align: center;
}
.cortina .pie p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
}
.cortina .pie a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.cortina .pie a:hover {
  color: var(--tinta);
  border-bottom-color: rgba(246, 183, 23, 0.6);
}
.cortina .pie__copy {
  font-size: 12.5px;
  color: #5f6762;
}

@media (max-width: 640px) {
  .cortina {
    padding: 32px 20px 22px;
  }
  .cortina .marca svg {
    height: 36px;
  }
  .cortina .titulo {
    letter-spacing: -1.2px;
  }
  /* En móvil las tres pistas en fila se vuelven ilegibles: una por renglón. */
  .cortina .pistas {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .cortina .pista {
    border-radius: 16px;
  }
  .cortina .boton {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}

/* Quien pidió menos movimiento ve la cortina quieta: nada de lo que comunica
   depende de las animaciones. */
@media (prefers-reduced-motion: reduce) {
  .cortina .aura,
  .cortina .punto,
  .cortina .brillo,
  .cortina .marca,
  .cortina .insignia,
  .cortina .titulo,
  .cortina .texto,
  .cortina .pistas,
  .cortina .acciones,
  .cortina .redes {
    animation: none;
  }
}