/* ============================================================================
 * HERO VARIANTS — base + switcher + v1 Papel Picado + v2 Kinetic Fiesta
 * (variants 3..14 live in hero-variants-2.css)
 *
 * Non-destructive preview: only renders under ?hero=1..14. Original = default.
 * Brand tokens (v17): rose #EC2C91 · rose-deep #c81f78 · jaune #F2B119 ·
 * charcoal #1a1a1a · cream #faf7f2. Scoped fiesta accents: teal, orange, lime.
 *
 * SPECIFICITY NOTE: the theme has `main > section:nth-child(2n+1){background:#1a1a1a}`
 * (0,1,2), which beats a single `.ltx-hero-vN` (0,1,0). Every section-level rule
 * here therefore chains the class -> `.ltx-hero-v.ltx-hero-vN` (0,2,0).
 *
 * All variants: fit ~one viewport, collapse to 1-col < 768px, freeze under
 * prefers-reduced-motion.
 * ========================================================================== */

.ltx-hero-v.ltx-hero-v {
    --ltx-teal:   #10a396;
    --ltx-orange: #f2691b;
    --ltx-sky:    #2ec4d6;
    --ltx-lime:   #8bc53f;
    --ltx-cobalt: #1b52a4;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(560px, 86vh, 820px);
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
    font-family: var(--v17-font-sans, "Inter", system-ui, sans-serif);
}
.ltx-hero-v__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.ltx-hero-v--split .ltx-hero-v__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}
.ltx-hero-v--center .ltx-hero-v__inner { max-width: 900px; text-align: center; }
.ltx-hero-v--center .ltx-hero-v__sub { margin-left: auto; margin-right: auto; }
.ltx-hero-v--center .ltx-hero-v__ctas { justify-content: center; }

.ltx-hero-v__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin: 0 0 1.1rem;
}
.ltx-hero-v__title {
    font-family: var(--v17-font-serif, "Fraunces", Georgia, serif);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.01em;
    font-size: clamp(2.5rem, 6.4vw, 5.2rem);
    margin: 0 0 1.1rem;
}
.ltx-hero-v__title em { font-style: italic; }
.ltx-hero-v__sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.55;
    max-width: 34ch;
    margin: 0 0 1.9rem;
}
.ltx-hero-v__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 767px) {
    .ltx-hero-v.ltx-hero-v { min-height: auto; padding: 3.5rem 1.25rem 3rem; text-align: center; }
    .ltx-hero-v--split .ltx-hero-v__inner { grid-template-columns: 1fr; }
    .ltx-hero-v__sub { margin-left: auto; margin-right: auto; }
    .ltx-hero-v__ctas { justify-content: center; }
}

/* ==========================================================================
 * V1 — PAPEL PICADO  (bright cream, cut-paper bunting, confetti)
 * ========================================================================== */
.ltx-hero-v.ltx-hero-v1 {
    background:
        radial-gradient(120% 90% at 85% 0%, #fff4e0 0%, transparent 55%),
        linear-gradient(180deg, #fffaf1 0%, #fbefdd 100%);
    color: var(--v17-charcoal);
    padding-top: clamp(4.5rem, 9vw, 7rem);
}
.ltx-hero-v1 .ltx-hero-v__eyebrow { background: var(--v17-jaune); color: #4a2600; }
.ltx-hero-v1 .ltx-hero-v__title { color: var(--v17-charcoal); }
.ltx-hero-v1 .ltx-hero-v__title em { color: var(--v17-rose) !important; }
.ltx-hero-v1 .ltx-hero-v__sub { color: rgba(26, 22, 20, 0.74); }
.ltx-hero-v1 .ltx-hero-v__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 6px dashed var(--v17-jaune);
    box-shadow: 0 24px 60px -24px rgba(200, 31, 120, 0.45);
    animation: ltx-float 6s ease-in-out infinite;
}
.ltx-hero-v1 .ltx-hero-v__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ltx-papel {
    position: absolute; top: 0; left: -2%; right: -2%; height: 74px;
    display: flex; z-index: 2; pointer-events: none;
}
.ltx-papel span {
    flex: 1 1 0; height: 56px; margin-top: 6px;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
    transform-origin: top center;
    animation: ltx-sway 4.5s ease-in-out infinite;
    opacity: 0.95;
}
.ltx-papel span:nth-child(4n+1){ background: var(--v17-rose); animation-delay: 0s; }
.ltx-papel span:nth-child(4n+2){ background: var(--ltx-teal); animation-delay: .3s; }
.ltx-papel span:nth-child(4n+3){ background: var(--v17-jaune); animation-delay: .6s; }
.ltx-papel span:nth-child(4n+4){ background: var(--ltx-orange); animation-delay: .9s; }
.ltx-papel::before {
    content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px;
    background: rgba(26,22,20,0.35);
}
.ltx-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ltx-confetti i {
    position: absolute; width: 12px; height: 12px; border-radius: 2px; opacity: .8;
    animation: ltx-drift 9s linear infinite;
}
.ltx-confetti i:nth-child(1){ left: 12%; background: var(--v17-rose);  animation-delay: 0s;   }
.ltx-confetti i:nth-child(2){ left: 30%; background: var(--v17-jaune); animation-delay: 1.5s; }
.ltx-confetti i:nth-child(3){ left: 52%; background: var(--ltx-teal);  animation-delay: 3s;   }
.ltx-confetti i:nth-child(4){ left: 70%; background: var(--ltx-orange);animation-delay: 2.2s; }
.ltx-confetti i:nth-child(5){ left: 88%; background: var(--v17-rose);  animation-delay: 4s;   }

/* ==========================================================================
 * V2 — KINETIC FIESTA  (dark + vibrant, bobbing food, marquee band)
 * ========================================================================== */
.ltx-hero-v.ltx-hero-v2 {
    background:
        radial-gradient(80% 80% at 15% 20%, rgba(236,44,145,0.22), transparent 55%),
        radial-gradient(80% 80% at 85% 80%, rgba(16,163,150,0.20), transparent 55%),
        #141011;
    color: var(--v17-cream);
}
.ltx-hero-v2 .ltx-hero-v__eyebrow { background: var(--v17-rose); color: #fff; }
.ltx-hero-v2 .ltx-hero-v__title { color: #fff; }
.ltx-hero-v2 .ltx-hero-v__title em { color: var(--v17-jaune) !important; }
.ltx-hero-v2 .ltx-hero-v__sub { color: rgba(250,247,242,0.82); }
.ltx-fiesta-media { position: relative; height: clamp(280px, 40vh, 440px); }
.ltx-fiesta-media img {
    position: absolute; border-radius: 50%; object-fit: cover;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.ltx-fiesta-media img:nth-child(1){ width: 58%; aspect-ratio:1; top: 0; right: 6%; animation: ltx-bob 5s ease-in-out infinite; }
.ltx-fiesta-media img:nth-child(2){ width: 40%; aspect-ratio:1; bottom: 4%; left: 4%; border-color: var(--v17-jaune); animation: ltx-bob 5.6s ease-in-out infinite .6s; }
.ltx-fiesta-media img:nth-child(3){ width: 32%; aspect-ratio:1; bottom: 22%; right: 0; border-color: var(--ltx-teal); animation: ltx-bob 6.2s ease-in-out infinite 1.1s; }
.ltx-marquee {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: var(--v17-jaune); color: #3a1e00;
    font-family: var(--v17-font-serif, serif); font-weight: 800;
    font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: 0.04em;
    padding: 0.5rem 0; overflow: hidden; white-space: nowrap;
    transform: rotate(-1.2deg) scale(1.03);
}
.ltx-marquee__track { display: inline-block; padding-left: 100%; animation: ltx-marquee 18s linear infinite; }
.ltx-marquee__track span { padding: 0 1.2rem; }
@media (max-width: 767px) {
    .ltx-fiesta-media { height: 300px; margin-top: 1.5rem; }
    .ltx-papel { height: 54px; }
    .ltx-hero-v1 .ltx-hero-v__media { margin: 2rem auto 0; max-width: 320px; }
}

/* ==========================================================================
 * PREVIEW SWITCHER — right-edge panel (sidesteps the cookie banner, z 2147483645)
 * ========================================================================== */
.ltx-hero-switcher {
    position: fixed; z-index: 2147483000; right: 12px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: stretch;
    padding: 8px; border-radius: 16px;
    background: rgba(20,16,17,0.94);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
    font-family: var(--v17-font-sans, system-ui, sans-serif);
    max-height: calc(100vh - 32px);
}
.ltx-hero-switcher__tag {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v17-jaune); text-align: center; padding: 1px 6px 6px;
}
.ltx-hero-switcher__list {
    display: flex; flex-direction: column; gap: 3px;
    overflow-y: auto; overscroll-behavior: contain;
}
.ltx-hero-switcher__btn {
    font-size: 0.7rem; font-weight: 600; text-decoration: none; color: rgba(250,247,242,0.82);
    padding: 6px 13px; border-radius: 9px; white-space: nowrap; text-align: center;
    transition: all .18s ease;
}
.ltx-hero-switcher__btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ltx-hero-switcher__btn.is-active {
    background: linear-gradient(110deg, var(--v17-rose-deep), var(--v17-rose));
    color: #fff;
}
@media (max-width: 560px) {
    .ltx-hero-switcher { right: 6px; padding: 6px; }
    .ltx-hero-switcher__btn { font-size: 0.64rem; padding: 5px 9px; }
}

/* ==========================================================================
 * SHARED KEYFRAMES (used by both sheets)
 * ========================================================================== */
@keyframes ltx-sway   { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes ltx-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ltx-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ltx-drift  { 0% { top: -6%; transform: rotate(0); } 100% { top: 106%; transform: rotate(320deg); } }
@keyframes ltx-rise   { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(-118vh) rotate(220deg); opacity: 0; } }
@keyframes ltx-spin   { to { transform: rotate(360deg); } }
@keyframes ltx-marquee{ to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
    .ltx-papel span, .ltx-confetti i, .ltx-hero-v1 .ltx-hero-v__media,
    .ltx-fiesta-media img, .ltx-marquee__track {
        animation: none !important;
    }
    .ltx-confetti { display: none; }
}