/* Milenium Color's — página de construcción
   El logotipo vive sobre blanco: la página también. El único bloque de color
   es la franja de espectro, con el titular tratado como en el logo:
   versales amarillas con contorno azul marino. */

/* Archivo variable, servida desde el propio dominio: una sola petición, sin CSS de
   terceros bloqueando el render. El archivo va recortado al alfabeto latino y a los
   ejes que la página realmente usa (ancho 100–110, peso 400–900), lo que lo deja en
   44 KB en vez de 87. Si amplías esos rangos aquí, hay que regenerar el archivo.
   El sufijo del nombre es la versión: al cambiar el archivo, súbelo. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-v26.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 110%;
  font-style: normal;
  font-display: swap;
}

:root {
  --page:       #FFFFFF;
  --ink:        #101736;
  --navy:       #0E1B57;
  --muted:      #6C7597;
  --rule:       #E4E7F2;

  --magenta:    #EC008C;
  --violet:     #7A2FF2;
  --cyan:       #00AEEF;
  --teal:       #00C1A6;
  --green:      #62C400;
  --yellow:     #FFED00;

  --spectrum: linear-gradient(90deg,
    var(--magenta) 0%,
    #A21CF0 16%,
    #4B5BF0 30%,
    var(--cyan) 46%,
    var(--teal) 60%,
    var(--green) 76%,
    #C4DE00 88%,
    var(--yellow) 100%);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --easing: cubic-bezier(.16, .84, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-variation-settings: "wdth" 100;
  text-align: center;
  overflow-x: hidden;
}

/* ---------- Logotipo ---------- */

/* `margin-top: auto` aquí y en el pie reparte el espacio libre por igual arriba y
   abajo: el logotipo, la franja y el mensaje quedan agrupados, no dispersos.

   El logotipo NO se anima: es el elemento más grande de la página y, por tanto, el que
   Chrome mide como Largest Contentful Paint. Un elemento cuyo primer pintado ocurre con
   `opacity: 0` deja de ser candidato para siempre, y sin candidato no hay métrica: la
   página entera puntuaba 0 en rendimiento. La entrada se concentra en la franja. */
.masthead {
  margin-top: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter) 0;
}

.logo {
  width: clamp(20rem, 62vw, 52rem);
  max-width: 100%;
  height: auto;
}

/* ---------- Franja y titular ---------- */

.main {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  /* El PNG va recortado a su contenido, sin margen propio: la separación entre el
     logotipo y la franja se controla aquí. */
  padding-block: clamp(2rem, 4.4vw, 4rem) 0;
}

.band {
  position: relative;
  width: 100%;
  padding: clamp(.55rem, 1.3vw, .95rem) var(--gutter);
  background: var(--spectrum);
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  box-shadow: 0 24px 60px -38px rgba(16, 23, 54, .75);
  animation: ink 1.05s var(--easing) .45s both;
}

/* Va en un solo renglón en todos los tamaños: la franja es una cinta, no un titular.
   `flex-wrap` queda de red de seguridad para pantallas muy estrechas. */
.headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .3em;
  margin: 0;
  font-size: clamp(1.35rem, 6.4vw, 2.2rem);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "wght" 900;
  line-height: .96;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--yellow);
  -webkit-text-stroke: clamp(1.5px, .3vw, 3.5px) var(--navy);
  paint-order: stroke fill;
  filter: drop-shadow(0 .02em .01em rgba(14, 27, 87, .3));
}

/* Brillo que recorre la franja, como luz sobre vinilo impreso. */
.gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 255, 255, .4) 50%,
    transparent 58%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: gloss 7s ease-in-out 1.9s infinite;
}

/* ---------- Mensaje y contacto ---------- */

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-inline: var(--gutter);
}

.lede {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
  animation: rise .7s var(--easing) 1s both;
}

/* Amarillo con contorno azul marino: el mismo par del logotipo. */
.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.5rem;
  background: var(--yellow);
  border: 3px solid var(--navy);
  box-shadow: 0 4px 0 var(--navy);
  color: var(--navy);
  font-size: clamp(.95rem, 1.7vw, 1.1rem);
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  text-decoration: none;
  transition: transform .18s var(--easing), box-shadow .18s var(--easing);
  /* Usa `translate` y no `transform`: así la entrada no bloquea el hover. */
  animation: rise-cta .7s var(--easing) 1.15s both;
}

.whatsapp-icon { flex: none; }

.whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--navy);
}

.whatsapp:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--navy);
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

/* ---------- Pie ---------- */

.footer {
  margin-top: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem) var(--gutter);
  border-top: 1px solid var(--rule);
  animation: rise .7s var(--easing) 1.35s both;
}

.copyright {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Movimiento ---------- */

@keyframes ink {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise-cta {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: none; }
}

@keyframes gloss {
  0%        { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gloss { display: none; }
}

/* ---------- Móvil ---------- */

@media (min-width: 641px) {
  .headline { font-size: clamp(1.6rem, 3.5vw, 3.1rem); }
}

@media (max-width: 640px) {
  .lede { max-width: 26ch; }
  /* Con el logotipo a este tamaño, la página cabe justo en una pantalla de móvil. */
  .main { gap: 1.375rem; padding-block-start: 1.5rem; }
}