/* ============================================================
   SPECTRUM STUDIO — Landing "Próximamente"
   ============================================================

   PALETA DE MARCA
   ─────────────────────────────────────────
   --negro-calido : #13110F   fondo principal (nunca negro puro)
   --marfil       : #F5F2EC   textos principales
   --hueso        : #F4F1EB   variante marfil
   --coral        : #F0997B   acento cálido
   --coral-hondo  : #D85A30   punto del logo, énfasis

   TIPOGRAFÍA: Quicksand 300 / 400 / 500 — Google Fonts

   IMÁGENES DE FONDO
   ─────────────────────────────────────────
   Slider: img/bg-1.jpg → img/bg-4.jpg
   Reemplazar en index.html con tus propias fotografías.
   Resolución recomendada: 1920×1080 px, JPG.

   OVERLAY
   ─────────────────────────────────────────
   La variable --overlay-opacity controla cuánto oscurece el
   fondo. Aumentar si las fotos son muy claras; reducir si son
   muy oscuras. Rango recomendado: 0.45 – 0.65.
   ============================================================ */

/* --- Variables de diseño --- */
:root {
    --negro-calido    : #13110F;
    --marfil          : #F5F2EC;
    --hueso           : #F4F1EB;
    --coral           : #F0997B;
    --coral-hondo     : #D85A30;
    --overlay-opacity : 0.56;
    --font            : 'Quicksand', sans-serif;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--negro-calido);
}

body {
    font-family: var(--font);
    color: var(--marfil);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SLIDER DE FONDO
   ============================================================ */

.slider {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.slide.active {
    opacity: 1;
}

/* ============================================================
   OVERLAY OSCURO CÁLIDO
   ============================================================ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--negro-calido);
    opacity: var(--overlay-opacity);
    pointer-events: none;
}

/* ============================================================
   CONTENIDO CENTRAL
   ============================================================ */

.content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

/* ============================================================
   BLOQUE DE LOGO
   ============================================================ */

.logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.2rem, 0.6vw, 0.45rem);
}

/* "Spectrum." — word y punto en línea base compartida */
.logo-wordmark {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

/* "Spectrum" — marfil, peso ligero, entra desde abajo */
.logo-text {
    font-weight: 300;
    font-size: clamp(2.8rem, 9vw, 6.5rem);
    color: var(--marfil);
    letter-spacing: -0.015em;
    line-height: 1;

    /* Estado inicial */
    opacity: 0;
    transform: translateY(20px);
    /* Animación: desliz hacia arriba + fade */
    animation: anim-slide-up 0.85s cubic-bezier(0.22, 0.8, 0.35, 1) 0.2s both;
}

/* "." — coral hondo, el sello de la marca, efecto pop */
.logo-dot {
    font-weight: 400;
    font-size: clamp(2.8rem, 9vw, 6.5rem);
    color: var(--coral-hondo);
    line-height: 1;
    /* Corrección óptica: baja ligeramente el punto */
    position: relative;
    top: 0.03em;

    /* Estado inicial */
    opacity: 0;
    transform: scale(0);
    /* Animación: pop con rebote — aparece después que la palabra */
    animation: anim-dot-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.88s both;
}

/* "Studio" — marfil apagado, espaciado amplio */
.logo-studio {
    font-weight: 400;
    font-size: clamp(0.65rem, 1.8vw, 0.95rem);
    color: rgba(245, 242, 236, 0.45);
    letter-spacing: 0.55em;
    text-transform: uppercase;
    /* Compensar visualmente el letter-spacing en el último carácter */
    padding-left: 0.55em;

    opacity: 0;
    animation: anim-fade-in 0.7s ease-out 1.18s both;
}

/* ============================================================
   LÍNEA ESPECTRO
   ============================================================ */

.spectrum-line {
    width: clamp(56px, 13vw, 175px);
    height: 1.5px;
    margin-top: clamp(1rem, 2.8vw, 1.8rem);
    margin-bottom: clamp(1rem, 2.8vw, 1.8rem);
    background: linear-gradient(90deg, var(--coral) 0%, var(--coral-hondo) 100%);
    border-radius: 1px;

    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    /* Se "dibuja" desde el centro hacia afuera */
    animation: anim-line-expand 0.65s cubic-bezier(0.22, 0.8, 0.35, 1) 1.42s both;
}

/* ============================================================
   TEXTOS
   ============================================================ */

.slogan {
    font-weight: 300;
    font-size: clamp(0.8rem, 2.3vw, 1.2rem);
    color: var(--marfil);
    letter-spacing: 0.05em;
    margin-bottom: clamp(0.65rem, 1.8vw, 1.1rem);

    opacity: 0;
    animation: anim-fade-in 0.75s ease-out 1.78s both;
}

.coming-soon {
    font-weight: 400;
    font-size: clamp(0.58rem, 1.4vw, 0.8rem);
    color: rgba(245, 242, 236, 0.38);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    /* Compensar letter-spacing final */
    padding-left: 0.4em;

    opacity: 0;
    animation: anim-fade-in 0.75s ease-out 2.1s both;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN
   ============================================================ */

/* Deslizamiento hacia arriba + fade — logo "Spectrum" */
@keyframes anim-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pop con rebote — punto del logo "." */
@keyframes anim-dot-pop {
    0%   { opacity: 0; transform: scale(0);    }
    55%  { opacity: 1; transform: scale(1.28); }
    78%  {             transform: scale(0.88); }
    100% { opacity: 1; transform: scale(1);    }
}

/* Expansión de la línea desde el centro */
@keyframes anim-line-expand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Fade simple — slogan, "Próximamente", "Studio" */
@keyframes anim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   ACCESIBILIDAD — reducir movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .logo-text,
    .logo-dot,
    .logo-studio,
    .spectrum-line,
    .slogan,
    .coming-soon {
        animation-duration: 0.01ms !important;
        animation-delay:    0ms    !important;
    }

    .slide {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   RESPONSIVE — ajustes finos por breakpoint
   ============================================================ */

/* Pantallas muy estrechas (< 380px) */
@media (max-width: 380px) {
    .logo-studio {
        letter-spacing: 0.3em;
        padding-left: 0.3em;
    }
    .coming-soon {
        letter-spacing: 0.25em;
        padding-left: 0.25em;
    }
}

/* Landscape con altura muy reducida — comprimir espaciados verticales */
@media (max-height: 480px) {
    .spectrum-line {
        margin-top:    0.55rem;
        margin-bottom: 0.55rem;
    }
    .slogan {
        margin-bottom: 0.45rem;
    }
}

/* ============================================================
   BARRA DE REDES SOCIALES
   ============================================================ */

.social-bar {
    position: fixed;
    bottom: clamp(1.2rem, 3.5vh, 2.2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2.5vw, 1.4rem);

    opacity: 0;
    animation: anim-fade-in 0.75s ease-out 2.45s both;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    /* Transición de hover: escala sutil */
    transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.35, 1),
                opacity   0.22s ease;
    opacity: 0.75;
}

.social-link:hover,
.social-link:focus-visible {
    transform: scale(1.12);
    opacity: 1;
}

.social-link:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
}

.social-icon {
    width:  clamp(28px, 4.5vw, 40px);
    height: clamp(28px, 4.5vw, 40px);
    display: block;
    object-fit: cover;
    border-radius: 50%;
    /* Los iconos tienen fondo hueso — se integran bien con el overlay */
    filter: brightness(0.92);
    transition: filter 0.22s ease;
}

.social-link:hover .social-icon,
.social-link:focus-visible .social-icon {
    filter: brightness(1);
}

/* En landscape muy estrecho: bajar opacidad para no tapar contenido */
@media (max-height: 480px) {
    .social-bar {
        bottom: 0.6rem;
    }
    .social-link {
        opacity: 0.5;
    }
}