/* ==========================================================================
   Glopy · Screen 01 — Welcome (Comparador + IA)
   "Todos los anuncios. Todas las plataformas. Una sola búsqueda."
   ========================================================================== */

:root {
    --gl-blue: #1060ff;
    --gl-blue-deep: #0b4ad6;
    --gl-blue-soft: #3d86ff;
    --gl-violet: #b07cff;
    --gl-green: #2ad17e;
    --gl-pink: #ff7ac2;
    --gl-bg-0: #05070f;
    --gl-bg-1: #0a0e1a;
    --gl-text: #ffffff;
    --gl-text-muted: #aab4cf;
    --gl-radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.welcome-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(120% 90% at 50% 10%, #0d1426 0%, var(--gl-bg-1) 42%, var(--gl-bg-0) 100%);
    color: var(--gl-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.welcome-aurora {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(55% 40% at 50% 34%, rgba(16, 96, 255, 0.28) 0%, rgba(16, 96, 255, 0) 70%),
        radial-gradient(45% 30% at 50% 70%, rgba(124, 77, 255, 0.16) 0%, rgba(124, 77, 255, 0) 70%);
    animation: aurora-breathe 7s ease-in-out infinite;
}

/* Layout ------------------------------------------------------------------- */
.wc {
    position: relative; z-index: 1;
    width: 100%; max-width: 460px; margin: 0 auto;
    min-height: 100dvh;
    padding: clamp(20px, 5vh, 40px) 22px calc(clamp(16px, 3vh, 28px) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(10px, 2.2vh, 22px);
}

/* Logo + subtitle ---------------------------------------------------------- */
.wc-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.welcome-logo {
    margin: 0; font-weight: 900;
    font-size: clamp(2.7rem, 14vw, 4.2rem); letter-spacing: 0.04em; line-height: 1;
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 55%, var(--gl-blue-deep) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--gl-blue); filter: drop-shadow(0 6px 26px rgba(16, 96, 255, 0.55));
}
.wc-sub {
    margin: 0; font-size: clamp(1.05rem, 4.4vw, 1.32rem); font-weight: 600;
    line-height: 1.32; color: #e7ecf7;
}
.wc-sub span { color: var(--gl-blue-soft); }

/* Stage -------------------------------------------------------------------- */
.wc-stage {
    position: relative; width: 100%;
    height: clamp(360px, 50vh, 470px);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}

/* Light beams + portal disc */
.wc-beams {
    position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
    width: 118%; height: 78%; z-index: 0; pointer-events: none;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
            mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
    animation: beam-flicker 4.5s ease-in-out infinite;
}
.wc-portal {
    position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
    width: 62%; height: 60px; z-index: 1; pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(120, 180, 255, 0.9) 0%, rgba(16, 96, 255, 0.45) 40%, rgba(16, 96, 255, 0) 72%);
    box-shadow: 0 0 40px rgba(16, 96, 255, 0.6);
    animation: portal-pulse 3.6s ease-in-out infinite;
}
.wc-portal::after {
    content: ""; position: absolute; inset: 38% 8% auto 8%; height: 4px;
    border-radius: 50%; background: rgba(190, 220, 255, 0.95);
    box-shadow: 0 0 18px 4px rgba(140, 190, 255, 0.8);
}

/* Platform chips ----------------------------------------------------------- */
.wc-platforms { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wc-plat {
    --rot: 0deg;
    position: absolute;
    display: inline-flex; align-items: center;
    padding: 8px 12px; border-radius: 11px;
    font-size: clamp(0.74rem, 3vw, 0.9rem); font-weight: 800; letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform-origin: center; transform: rotate(var(--rot));
    /* opacity-only fade-in (staggered) + transform-only float — no property clash */
    animation: plat-in 0.6s ease-out both, plat-float 5.5s ease-in-out infinite;
    animation-delay: calc(0.3s + var(--d) * 0.08s), calc(1s + var(--d) * 0.22s);
}
.wc-plat i { font-size: 0.85em; margin-right: 4px; }
.wc-plat em { font-style: normal; color: #e2342b; }
.wc-plat b { font-weight: 900; }

/* Left column */
.wc-plat--idealista { --rot: -7deg; top: 4%;  left: 1%;  background: #c7d92b; color: #1a1d05; }
.wc-plat--fotocasa  { --rot: -4deg; top: 24%; left: -1%; background: #f4f6fb; color: #16243a; }
.wc-plat--fotocasa i { color: #18b09a; }
.wc-plat--habitaclia{ --rot: -5deg; top: 45%; left: 1%;  background: #f47b20; color: #fff; }
.wc-plat--yaencontre{ --rot: -6deg; top: 72%; left: 3%;  background: #ffd21e; color: #1a1d05; }
.wc-plat--yaencontre b { color: #111; }

/* Right column */
.wc-plat--coches    { --rot: 7deg; top: 4%;  right: 1%;  background: #f4f6fb; color: #1a2233; }
.wc-plat--autoscout { --rot: 5deg; top: 24%; right: -1%; background: #14233c; color: #fff; }
.wc-plat--autoscout b { color: #ff6a1a; }
.wc-plat--motos     { --rot: 5deg; top: 45%; right: 1%;  background: #f4f6fb; color: #1a2233; }
.wc-plat--pisos     { --rot: 6deg; top: 72%; right: 3%;  background: #f4f6fb; color: #5b6573; }
.wc-plat--pisos b   { color: #1b54c9; }

/* Character ---------------------------------------------------------------- */
.wc-character {
    position: relative; z-index: 3;
    margin-top: clamp(6px, 2vh, 18px);
    width: clamp(150px, 42vw, 215px); height: clamp(150px, 42vw, 215px);
    display: flex; align-items: center; justify-content: center;
}
.wc-character__glow {
    position: absolute; inset: -16%; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(16, 96, 255, 0.55) 0%, rgba(16, 96, 255, 0.15) 45%, rgba(16, 96, 255, 0) 72%);
    filter: blur(6px); animation: glow-pulse 3.6s ease-in-out infinite;
}
.wc-character__img {
    position: relative; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.45));
    animation: float 4s ease-in-out infinite; will-change: transform;
}

/* Central message ---------------------------------------------------------- */
.wc-message {
    position: relative; z-index: 3; margin-top: clamp(6px, 1.5vh, 14px);
    display: flex; flex-direction: column; gap: 1px;
}
.wc-message span { font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: 600; color: #dbe3f2; line-height: 1.32; }
.wc-message strong {
    font-size: clamp(1.18rem, 5vw, 1.46rem); font-weight: 800; color: var(--gl-blue-soft);
    margin-top: 2px; text-shadow: 0 2px 18px rgba(16, 96, 255, 0.5);
}

/* Benefits ----------------------------------------------------------------- */
.wc-benefits {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%;
    margin-top: clamp(2px, 1vh, 10px);
}
.wc-benefit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wc-benefit__ic {
    width: 50px; height: 50px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
}
.wc-benefit__ic--blue   { color: var(--gl-blue-soft); border: 1.5px solid rgba(61, 134, 255, 0.5); box-shadow: 0 0 18px rgba(61, 134, 255, 0.25) inset; }
.wc-benefit__ic--violet { color: var(--gl-violet);    border: 1.5px solid rgba(176, 124, 255, 0.5); box-shadow: 0 0 18px rgba(176, 124, 255, 0.22) inset; }
.wc-benefit__ic--green  { color: var(--gl-green);     border: 1.5px solid rgba(42, 209, 126, 0.5); box-shadow: 0 0 18px rgba(42, 209, 126, 0.22) inset; }
.wc-benefit__ic--pink   { color: var(--gl-pink);      border: 1.5px solid rgba(255, 122, 194, 0.5); box-shadow: 0 0 18px rgba(255, 122, 194, 0.22) inset; }
.wc-benefit b { font-size: 0.74rem; font-weight: 700; line-height: 1.1; }
.wc-benefit small { font-size: 0.7rem; color: var(--gl-text-muted); line-height: 1.1; }

/* Dots --------------------------------------------------------------------- */
.wc-dots { display: flex; gap: 7px; margin-top: 2px; }
.wc-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.wc-dots span.is-active { width: 20px; border-radius: 4px; background: var(--gl-blue-soft); }

/* CTA ---------------------------------------------------------------------- */
.welcome-cta { width: 100%; display: flex; justify-content: center; margin-top: auto; padding-top: clamp(6px, 1.5vh, 14px); }
.welcome-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 380px; min-height: 56px; padding: 0 24px;
    border-radius: var(--gl-radius);
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 60%, var(--gl-blue-deep) 100%);
    color: #fff; font-size: 1.14rem; font-weight: 700; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(16, 96, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.welcome-btn:hover { filter: brightness(1.05); box-shadow: 0 14px 38px rgba(16, 96, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.welcome-btn:active { transform: translateY(1px) scale(0.985); }
.welcome-btn:focus-visible { outline: 3px solid rgba(61, 134, 255, 0.7); outline-offset: 3px; }

/* Footer ------------------------------------------------------------------- */
.wc-foot {
    margin: clamp(8px, 1.6vh, 14px) 0 0;
    font-size: 0.82rem; color: var(--gl-text-muted);
    display: inline-flex; align-items: center; gap: 7px; text-align: center;
}
.wc-foot i { color: var(--gl-blue-soft); font-size: 1rem; }
.wc-foot span { color: var(--gl-blue-soft); font-weight: 600; }

/* ==========================================================================
   Entrance animations
   ========================================================================== */
.anim-logo, .anim-sub, .anim-stage, .anim-benefits, .anim-cta, .anim-foot { opacity: 0; animation-fill-mode: forwards; }
.anim-logo     { animation: enter-fade 0.55s ease-out 0.05s forwards; }
.anim-sub      { animation: enter-rise 0.55s ease-out 0.2s forwards; }
.anim-stage    { animation: enter-fade 0.6s ease-out 0.3s forwards; }
.anim-benefits { animation: enter-rise 0.55s ease-out 0.55s forwards; }
.anim-cta      { animation: enter-rise 0.55s ease-out 0.7s forwards; }
.anim-foot     { animation: enter-fade 0.55s ease-out 0.82s forwards; }

@keyframes enter-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes enter-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes aurora-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes portal-pulse { 0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); } 50% { opacity: 1; transform: translateX(-50%) scaleX(1.06); } }
@keyframes beam-flicker { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes plat-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes plat-float {
    0%, 100% { transform: rotate(var(--rot)) translateY(0); }
    50%      { transform: rotate(var(--rot)) translateY(-7px); }
}

/* ==========================================================================
   Larger screens — keep the single hero column, just give it room.
   ========================================================================== */
@media (min-width: 760px) {
    .wc { max-width: 540px; }
    .wc-stage { height: clamp(420px, 52vh, 520px); }
    .wc-character { width: clamp(200px, 26vw, 250px); height: clamp(200px, 26vw, 250px); }
    .welcome-btn { max-width: 420px; }
}

/* Short viewports: tighten the stage so the CTA stays reachable. */
@media (max-height: 740px) {
    .wc { gap: 8px; }
    .wc-stage { height: clamp(300px, 44vh, 380px); }
    .wc-benefit__ic { width: 44px; height: 44px; font-size: 1.1rem; }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .welcome-aurora, .wc-character__glow, .wc-character__img, .wc-portal, .wc-beams, .wc-plat {
        animation: none !important;
    }
    .anim-logo, .anim-sub, .anim-stage, .anim-benefits, .anim-cta, .anim-foot {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
}