/**
 * Galería de plantillas en la landing (index.php + js/landing_galeria_plantillas.js).
 */

/* ── Animación "lanzar ramo" en Portada ─────────────────────── */
.hero-bouquet-toss {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

/* <picture> no debe afectar el layout: cubierto globalmente en landing.css */


.hero-bouquet-item {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity, width, height, top, left;
    user-select: none;
    -webkit-user-drag: none;
}

/* Ramo principal: triple tamaño y se reduce mientras se va a la derecha */
.hero-bouquet-main {
    object-fit: contain;
    animation: heroBouquetFlow 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes heroBouquetFlow {
    0% { 
        opacity: 0; 
        width: 696px; 
        height: 696px; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) scale(0.5) rotate(-20deg); 
    }
    10% { 
        opacity: 1; 
        width: 696px; 
        height: 696px; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) scale(1) rotate(0deg); 
    }
    30% { 
        opacity: 1; 
        width: 696px; 
        height: 696px; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) scale(1.05) rotate(5deg); 
    }
    100% { 
        opacity: 1; 
        /* Se reduce a 232px original (un tercio) */
        width: 232px; 
        height: 232px; 
        /* Se va hacia la derecha, arriba, para no tapar texto */
        top: 25%; 
        left: 85%; 
        transform: translate(-50%, -50%) scale(1) rotate(15deg); 
    }
}

/* Pétalos dispersos */
.hero-bouquet-petal {
    width: 120px;
    height: 120px;
    object-fit: contain;
    top: 50%;
    left: 50%;
}

.hero-bouquet-petal-1 { animation: heroPetalScatter1 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.2s; }
.hero-bouquet-petal-2 { animation: heroPetalScatter2 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.3s; }
.hero-bouquet-petal-3 { animation: heroPetalScatter3 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.4s; }
.hero-bouquet-petal-4 { animation: heroPetalScatter4 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.5s; }
.hero-bouquet-petal-5 { animation: heroPetalScatter5 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.6s; }

@keyframes heroPetalScatter1 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    10%  { opacity: 1; transform: translate(-200px, -250px) scale(1) rotate(-30deg); }
    100% { opacity: 0; transform: translate(-300px, 300px) scale(0.5) rotate(-90deg); }
}

@keyframes heroPetalScatter2 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    10%  { opacity: 1; transform: translate(150px, -280px) scale(1.2) rotate(20deg); }
    100% { opacity: 0; transform: translate(250px, 200px) scale(0.6) rotate(80deg); }
}

@keyframes heroPetalScatter3 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    10%  { opacity: 1; transform: translate(-100px, -150px) scale(0.9) rotate(-15deg); }
    100% { opacity: 0; transform: translate(-150px, 150px) scale(0.4) rotate(-45deg); }
}

@keyframes heroPetalScatter4 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    10%  { opacity: 1; transform: translate(200px, -100px) scale(1.1) rotate(40deg); }
    100% { opacity: 0; transform: translate(350px, 400px) scale(0.5) rotate(120deg); }
}

@keyframes heroPetalScatter5 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    10%  { opacity: 1; transform: translate(50px, -300px) scale(1) rotate(10deg); }
    100% { opacity: 0; transform: translate(100px, 250px) scale(0.3) rotate(60deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bouquet-item { animation: none !important; opacity: 0 !important; }
}
/* ── Fin animación ramo ──────────────────────────── */

/* Tras css.css (.banner-part .hero-bouquet-toss { position: relative }): capa absoluta al hero */
body.landing-context .banner-part .hero-bouquet-toss {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/*
 * #plantillas lleva .inhouse-service (css.css): bg-wtare.jpg con background-size: cover.
 * Eso escala el motivo al alto de toda la galería y el recorte derecho se ve desproporcionado.
 */
.landing-galeria-plantillas.inhouse-service {
    background-size: auto min(38vh, 400px);
    background-position: right top;
    background-repeat: no-repeat;
}

.landing-galeria-plantillas .landing-gal-categoria-titulo {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1e1936;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(200, 164, 90, 0.35);
}

.landing-galeria-plantillas .landing-gal-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e4ef;
    box-shadow: 0 4px 14px rgba(30, 25, 54, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-galeria-plantillas .landing-gal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(30, 25, 54, 0.1);
}

.landing-galeria-plantillas .landing-gal-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 45 / 32;
    background: #f1f0f5;
    overflow: hidden;
}

.landing-galeria-plantillas .landing-gal-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.landing-galeria-plantillas .landing-gal-card-img--cargando {
    opacity: 0;
}

.landing-galeria-plantillas .landing-gal-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.landing-galeria-plantillas .landing-gal-spinner::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid #e0d9ee;
    border-top-color: #7c5cbf;
    border-radius: 50%;
    animation: lga-spin 0.7s linear infinite;
}

@keyframes lga-spin {
    to { transform: rotate(360deg); }
}

.landing-galeria-plantillas .landing-gal-card-body {
    padding: 0.85rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.landing-galeria-plantillas .landing-gal-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e1936;
    line-height: 1.35;
    margin-bottom: 0.65rem;
    flex: 1;
}

.landing-galeria-plantillas .landing-gal-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d4a7c;
    text-decoration: none;
    align-self: flex-start;
}

.landing-galeria-plantillas .landing-gal-card-cta:hover {
    text-decoration: underline;
    color: #c8a45a;
}

.landing-galeria-sentinel {
    width: 100%;
    height: 4px;
    margin-top: 1rem;
    pointer-events: none;
}

.landing-gal-btn-previa {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #1e1936 0%, #2d2648 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.landing-gal-btn-previa:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.landing-plantilla-preview-iframe {
    width: 1440px;
    max-width: 100%;
    height: 100%;
    min-height: 70vh;
    border: none;
    background: #ffffff;
}

/* ── Responsive: Móvil ──────────────────────────── */
@media (max-width: 991.98px) {
    /* Flores más pequeñas (tamaño del logo ~70px) y en la barra de menús */
    .hero-bouquet-toss {
        position: fixed;
        top: 0;
        left: 50%;
        width: 80px;
        height: 70px;
        transform: translateX(-50%);
        z-index: 1001;
        pointer-events: none;
        overflow: visible;
    }

    .hero-bouquet-toss picture {
        display: none;
    }

    /* Solo mostrar el ramo principal, ocultar pétalos */
    .hero-bouquet-toss picture:first-child {
        display: block;
    }

    .hero-bouquet-main {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px;
        max-height: 70px;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1 !important;
        animation: none !important;
    }

    .hero-bouquet-petal {
        display: none !important;
    }
}

@media (max-width: 339.98px) {
    .hero-bouquet-toss {
        width: 60px;
        height: 58px;
    }

    .hero-bouquet-main {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px;
        max-height: 58px;
    }
}