/* =============================================================================
   SWEETSPOT® — HOJA DE ESTILOS                         "Enfoca tu pasión"
   -----------------------------------------------------------------------------
   Reglas básicas de la marca:
     - Letra: Poppins en todo.
     - Colores: blanco, negro y azul oscuro (como el piloto).
     - Logo de una sola tinta: img/logo.svg (negro, fondos claros) e
       img/logo-blanco.svg (blanco, fondos oscuros).
     - Sin animaciones, salvo el logo de la portada y el 404 (pedido del
       usuario, 30-oct-2026). Siempre se apagan con prefers-reduced-motion.
   Todos los pares texto/fondo deben cumplir WCAG AA (≥ 4.5:1).

   Organización del archivo:
     1. Variables (colores, tipografía, espacios)   ← cambia aquí la identidad
     2. Base y tipografía
     3. Portada ("Próximamente") y pie
     4. Logo animado de la portada (tamaño; la animación: logo-animado.css)
     5. Página 404 ("fuera de foco") y botón para volver
   ============================================================================= */

/* 1. VARIABLES ------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Paleta */
  --blanco: #ffffff;
  --negro: #000000;
  --azul-oscuro: #050c14;      /* fondo principal (el del piloto) */
  --azul-superficie: #0b1622;  /* tarjetas y paneles */
  --azul-linea: #1d3d66;       /* bordes */
  --azul-enlace: #79bbff;      /* enlaces sobre el fondo ~8:1 */

  /* Texto */
  --tinta: var(--blanco);
  --tinta-suave: #9fb0c3;      /* ~8:1 sobre el fondo */

  /* Tipografía y espacios */
  --letra: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --espacio: 16px;
  --radio: 12px;
}

/* 2. BASE ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--azul-oscuro);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--azul-enlace);
}

/* 3. PORTADA --------------------------------------------------------------- */
.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(var(--espacio) * 2) var(--espacio);
  text-align: center;
}

.portada__titulo {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.portada__lema {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 1.125rem;
}

.portada__pronto {
  margin: calc(var(--espacio) * 1.5) 0 0;
  padding: 8px 20px;
  border: 1px solid var(--azul-linea);
  border-radius: 999px;
  background: var(--azul-superficie);
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* "Powered by" con el logo de MONHAN (versión blanca), enlaza a
   monhansolutions.com. Franja negra al final de la página. */
.pie-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem var(--espacio) 1.75rem;
  background: var(--negro);
  color: var(--tinta-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pie-marca a {
  display: inline-flex;
  opacity: 0.9;
}

.pie-marca a:hover,
.pie-marca a:focus-visible {
  opacity: 1;
}

.pie-marca__logo {
  display: block;
  height: 30px;
  width: auto;
}

/* Etiqueta fija de la versión de pruebas (solo en sweetspot-dev). */
.etiqueta-dev {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 10;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--negro);
  font-size: 0.75rem;
  font-weight: 600;
  transform: translateX(-50%);
}

/* 4. LOGO ANIMADO DE LA PORTADA ------------------------------------------- */
/*
 * La animación (el lente que enfoca, copiada del video del logo) y la vuelta
 * al tocarlo viven en css/logo-animado.css, que la página enlaza después de
 * esta hoja. Aquí solo va lo propio de la portada: tamaño, color y foco.
 * El logo reserva su espacio desde el inicio (ancho y alto fijos).
 */
.logo-vivo {
  --logo-fondo: var(--azul-oscuro);
  width: 132px;
  height: 132px;
  margin: 0 0 var(--espacio);
  border-radius: 50%;
  color: var(--blanco);
}

.logo-vivo:focus-visible {
  outline: 2px solid var(--azul-enlace);
  outline-offset: 8px;
}

/* 5. PÁGINA 404 Y BOTÓN PARA VOLVER --------------------------------------- */
/* El logo aparece desenfocado y se enfoca: "esta toma salió fuera de foco". */
.no-encontrada__logo {
  width: 104px;
  height: 104px;
  margin-bottom: 8px;
  animation: enfocar 1.8s ease-out 0.2s both;
}

.no-encontrada__codigo {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.4em;
}

@keyframes enfocar {
  0%   { filter: blur(14px); opacity: 0.3; transform: scale(1.15); }
  70%  { filter: blur(1px); opacity: 1; }
  100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

/* Botón blanco grande. La flecha se adelanta y el botón se eleva al pasar
   el mouse o al enfocarlo con el teclado. */
.boton-volver {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(var(--espacio) * 1.75);
  padding: 14px 28px 14px 20px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--negro);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boton-volver__flecha {
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease;
}

.boton-volver:hover,
.boton-volver:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}

.boton-volver:hover .boton-volver__flecha,
.boton-volver:focus-visible .boton-volver__flecha {
  transform: translateX(-5px);
}

.boton-volver:focus-visible {
  outline: 2px solid var(--azul-enlace);
  outline-offset: 4px;
}

.boton-volver:active {
  transform: translateY(0) scale(0.97);
}

/* Movimiento reducido: todo quieto, solo cambios de color. */
@media (prefers-reduced-motion: reduce) {
  .no-encontrada__logo {
    animation: none !important;
  }
  .boton-volver,
  .boton-volver__flecha {
    transition: none;
  }
}

/* Nombre con las letras oficiales del logotipo (img/palabra-blanco.svg) + ".art". */
.portada__titulo--marca { display: inline-flex; align-items: flex-end; gap: 0.03em; line-height: 1; }
.marca-palabra { display: block; height: clamp(2.2rem, 6.5vw, 3.2rem); width: auto; }
.marca-art { font-size: clamp(1.7rem, 5vw, 2.45rem); font-weight: 600; color: var(--tinta-suave); letter-spacing: -0.02em; margin-bottom: 0.04em; }