/* Complementos al home tipo flowershopctg.com (SPA React) */

@import url('variables.css');

/* Hero H1 — paridad visual SPA flowershopctg.com: menos peso que bold en Playfair grande */
.fs-ctg-hero-h1 {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
}

.hover\:pause:hover {
    animation-play-state: paused !important;
}

@keyframes fw2026-blink {
    50% { opacity: 0; }
}
.animate-blink-cta {
    animation: fw2026-blink 1s step-end infinite;
}
.path-draw-svg {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: fw2026-draw-svg 2s linear forwards;
    animation-delay: 1s;
}
@keyframes fw2026-draw-svg {
    to { stroke-dashoffset: 0; }
}

/* Preloader breve — solo portada CTG */
#fs-ctg-preloader {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5f7;
    transition: opacity 0.6s ease, visibility 0.6s;
}
#fs-ctg-preloader.fs-preloader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Ticker + nav: compacto al hacer scroll (navbar sticky sin letrero) ---
   Inicio: letrero visible y nav debajo (~2.5rem).
   Con scroll: letrero fuera de vista + nav en top + menos padding del main. */

body.fs-ctg-has-ticker #fs-ctg-nav.fs-ctg-nav-with-ticker {
    top: 2.5rem;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fs-ctg-has-ticker.fs-ctg-header-compact #fs-ctg-nav.fs-ctg-nav-with-ticker {
    top: 0;
}

#fs-ctg-ticker.fs-ctg-ticker-strip {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    will-change: transform;
}

body.fs-ctg-has-ticker.fs-ctg-header-compact #fs-ctg-ticker.fs-ctg-ticker-strip {
    transform: translateY(-102%);
    opacity: 0;
    pointer-events: none;
}

#fs-ctg-main.fs-ctg-main-solo-nav:not(.fs-ctg-has-hero) {
    padding-top: 6rem;
}

#fs-ctg-main.fs-ctg-main-ticker-gap:not(.fs-ctg-has-hero) {
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: calc(2.5rem + 6rem);
}

body.fs-ctg-has-ticker.fs-ctg-header-compact #fs-ctg-main.fs-ctg-main-ticker-gap:not(.fs-ctg-has-hero) {
    padding-top: 6rem;
}

/*
 * Hero: el <main> no lleva padding-top — la banda clara desaparece porque el plum
 * de #inicio empieza en Y=0 del flujo. El hueco útil queda dentro del hero.
 */
#fs-ctg-main.fs-ctg-main-solo-nav.fs-ctg-has-hero,
#fs-ctg-main.fs-ctg-main-ticker-gap.fs-ctg-has-hero {
    padding-top: 0;
}

#fs-ctg-main.fs-ctg-main-solo-nav.fs-ctg-has-hero > section#inicio:first-of-type {
    padding-top: 6rem;
    box-sizing: border-box;
}

#fs-ctg-main.fs-ctg-main-ticker-gap.fs-ctg-has-hero > section#inicio:first-of-type {
    padding-top: calc(2.5rem + 6rem);
    box-sizing: border-box;
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fs-ctg-has-ticker.fs-ctg-header-compact #fs-ctg-main.fs-ctg-main-ticker-gap.fs-ctg-has-hero > section#inicio:first-of-type {
    padding-top: 6rem;
}

/* Círculo "Cupos LIMITADOS": debajo del nav fijo (el hero ya no lleva offset en <main>) */
#fs-ctg-hero-float-badge {
    position: absolute;
    top: calc(6rem + 2.5rem);
    right: 1rem;
    z-index: 20;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    #fs-ctg-hero-float-badge {
        right: 2.5rem;
    }
}

body.fs-ctg-has-ticker:not(.fs-ctg-header-compact) #fs-ctg-hero-float-badge {
    top: calc(2.5rem + 6rem + 2.5rem);
}

/* Tienda pública (/productos, ficha, carrito): mismo offset que home bajo nav ± ticker */
#fs-ctg-public-page-main.fs-ctg-internal-solo {
    padding-top: 6rem;
}

#fs-ctg-public-page-main.fs-ctg-internal-ticker {
    padding-top: calc(2.5rem + 6rem);
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fs-ctg-has-ticker.fs-ctg-header-compact #fs-ctg-public-page-main.fs-ctg-internal-ticker {
    padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    #fs-ctg-ticker.fs-ctg-ticker-strip,
    body.fs-ctg-has-ticker #fs-ctg-nav.fs-ctg-nav-with-ticker,
    #fs-ctg-main.fs-ctg-main-ticker-gap:not(.fs-ctg-has-hero),
    #fs-ctg-main.fs-ctg-main-ticker-gap.fs-ctg-has-hero > section#inicio:first-of-type {
        transition: none !important;
    }
    #fs-ctg-hero-float-badge {
        transition: none !important;
    }
    #fs-ctg-public-page-main.fs-ctg-internal-ticker {
        transition: none !important;
    }
}