/* =============================================================================
   Ecoparque tenant theme — initial pilot
   -----------------------------------------------------------------------------
   Scoped under `body.tenant-ecoparque` so it only applies on the Ecoparque host
   and never leaks into EntradasBA. The base app still drives layout/structure;
   this file only overrides palette, typography, and a handful of component
   surfaces to match the Figma reference in
   `fan_factory/ecoparque-figma-exports/`. Expand iteratively as more screens
   are reviewed.

   Color tokens (sourced from Commons/Tenants/Ecoparque.cs):
     --tenant-color-primary    = #A1BB2E  (lime — hero/brand accents)
     --tenant-color-secondary  = #282213  (very dark brown — headings/footer)
     --tenant-color-tertiary   = #F3CC00  (yellow — highlights)

   Ecoparque-specific extras (not yet in TenantColors):
     --eco-cta-blue            = #1455CE  (CTA button)
     --eco-hero-teal           = #1AB2A5  (hero gradient)
     --eco-footer-dark         = #0C5960  (footer background)
     --eco-surface-light       = #F6F7F8  (page background)
   ============================================================================= */

body.tenant-ecoparque {
    --eco-cta-blue: #1455CE;
    --eco-cta-blue-hover: #0E3FA4;
    --eco-hero-teal: #1AB2A5;
    --eco-hero-teal-dark: #0D8A80;
    --eco-footer-dark: #0C5960;
    --eco-surface-light: #F6F7F8;
    --eco-input-border: #D5D9DD;
    --eco-muted: #6B7280;

    background-color: var(--eco-surface-light);
    font-family: "Nunito", "Open Sans", system-ui, -apple-system, sans-serif;
    color: var(--tenant-color-secondary);
}

/* MudScrollToTop FAB — MainLayout renders it with Color.Tertiary, which on
   ecoparque is the yellow accent (#F3CC00). fede: 'mud-scroll-to-top
   visible -> yellow, we should do it whatever that color is in ecoparque'.
   Recolor to the CTA blue so the floating action button reads as a
   navigation control, not a brand highlight. Same on hover. */
body.tenant-ecoparque .mud-fab.mud-fab-tertiary,
body.tenant-ecoparque .mud-scroll-to-top .mud-fab {
    background-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
}
body.tenant-ecoparque .mud-fab.mud-fab-tertiary:hover,
body.tenant-ecoparque .mud-scroll-to-top .mud-fab:hover {
    background-color: var(--eco-cta-blue-hover) !important;
}

/* --- loading + home hero (pre-existing) --- */
body.tenant-ecoparque .loadingPage {
    background-image: var(--tenant-asset-bg-loading) !important;
}
body.tenant-ecoparque .pagelayout .home .home-top {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%) !important;
}

/* --- header ---
 * Figma layout: logo left, nav links centered, blue CTA right, with a
 * yellow accent line directly below the header bar.
 *
 * The base markup (HeaderSitePublic.razor) wraps logo + .menu in
 * `.header-top` and the nav in a separate `.navbar` row. We use
 * `display: contents` on `.header-top` so its children become direct
 * flex items of `.cont-1470`, then reorder via `order` to get the
 * three-column layout without changing the .razor file.
 */
body.tenant-ecoparque .HeaderSitePublic,
body.tenant-ecoparque header.HeaderSitePublic {
    background-color: #FFFFFF;
    border-bottom: 4px solid var(--tenant-color-tertiary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 10;
    /* The header element itself carries a base padding-left:32 on top of the
       .cont-1470's own 32px gutter, shifting the home logo ~16px right of the
       ticketera header (which has no element padding) → the logo "jump". Zero
       the element padding; the .cont-1470 still provides the 32px gutter. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.tenant-ecoparque .HeaderSitePublic .cont-1470 {
    display: flex !important;
    align-items: center;
    /* EP-47: tighter inter-section gap so logo + centered nav + CTA cluster fit
       one row within the 1470 cap (was 24px → overflowed past the viewport). */
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    /* Logo gutter matches the 32px content gutter on paso 2/4/5 so the
       wordmark, date strip, banner, and ticket cards all line up. */
    padding-left: 32px;
    padding-right: 32px;
    min-height: 72px;
}

/* Flatten .header-top so logo + .menu become siblings of .navbar */
body.tenant-ecoparque .HeaderSitePublic .header-top {
    display: contents;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > a {
    order: 1;
    flex: 0 0 auto;
    display: inline-block;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > a img {
    /* EP-55: explicit height (not max-height) — the stacked "VIVÍ ecoparque" SVG
       ships no intrinsic width/height, so width:auto + max-height collapses it to
       0×0. An explicit height scales it by its viewBox ratio (same approach as the
       ≤991px mobile block and the EntradasBA .header-cta-logo mark). */
    height: 44px;
    width: auto;
    display: block;
}

body.tenant-ecoparque .HeaderSitePublic .navbar {
    order: 2;
    flex: 1 1 auto;
    /* EP-47: allow the centered nav to shrink below its content width so it never
       pushes the CTA cluster off-screen; links wrap as a last resort. */
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop {
    display: flex !important;
    align-items: center;
    gap: 2px;
    /* EP-47: keep the nav on a single line (no 2-line wrap); the links are
       shrunk just enough to fit alongside the logo + CTA cluster. */
    flex-wrap: nowrap;
    justify-content: center;
}

/* Right-side cluster: only the blue CTA + hamburger on mobile.
 * Hide cart/login/lang switcher — Ecoparque header shows CTA + hamburger. */
body.tenant-ecoparque .HeaderSitePublic .header-top > .menu {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .HeaderSitePublic .header-top > .menu > *:not(.btn-header-cta):not(.hamburger-public):not(.header-cta-logo) {
    display: none;
}
/* Feedback 78 (2026-06-12): the EntradasBA mark now sits FIRST, before the tenant
   logo (was to the right of the CTA). It's a direct child of .header-top (which is
   display:contents), so it joins the flattened .cont-1470 flex row; order:0 places
   it ahead of the logo <a> (order:1). margin-right spaces it from the wordmark. */
body.tenant-ecoparque .HeaderSitePublic .header-top > .header-cta-logo {
    order: 0;
    flex: 0 0 auto;
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    margin-right: 18px;
}

/* Nav links as plain text — the .mud-nav-link sets dark color, but the
 * inner .mud-nav-link-text div carries MudBlazor's default near-white
 * color (#F3F6F9) which wins over the parent. Override both. */
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
    background: none !important;
    border: none !important;
    color: var(--tenant-color-secondary) !important;
    /* EP-47: shrink font + horizontal padding so the 5 (long-label) nav links fit
       on a single row alongside the logo + CTA cluster, instead of wrapping. */
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 7px !important;
    white-space: nowrap;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link .mud-nav-link-text {
    color: var(--tenant-color-secondary) !important;
    font-size: 14px;
    font-weight: 600;
}
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link:hover,
body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link:hover .mud-nav-link-text {
    color: var(--eco-cta-blue) !important;
    background: none !important;
}

/* "Secciones" label hidden — Figma doesn't show it */
body.tenant-ecoparque .HeaderSitePublic .menuTop h5 {
    display: none;
}

/* Header CTA button (Conseguí tu entrada) */
body.tenant-ecoparque .btn-header-cta {
    background-color: var(--eco-cta-blue) !important;
    border-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
body.tenant-ecoparque .btn-header-cta::before {
    content: none;
}
body.tenant-ecoparque .btn-header-cta:hover {
    background-color: var(--eco-cta-blue-hover) !important;
    border-color: var(--eco-cta-blue-hover) !important;
    color: #FFFFFF !important;
}

/* Hide hamburger on desktop — nav is always visible */
body.tenant-ecoparque .HeaderSitePublic .hamburger-public {
    display: none;
}

@media (max-width: 1199px) {
    body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
        font-size: 13px;
        padding: 6px 8px !important;
    }
}

@media (max-width: 1280px) {
    /* ── Compact/mobile header: switch to the hamburger early (≤1280px). At smaller
       desktops (e.g. 1280×720) the inline nav links overlap the logo + CTA, so from
       this width down we collapse the nav into the hamburger panel — same layout as
       mobile: logo left, [CTA + hamburger] right, no inline nav. (client 2026-06-12) ── */
    body.tenant-ecoparque .HeaderSitePublic .cont-1470 {
        flex-wrap: nowrap;
        gap: 0;
    }
    /* Feedback (2026-06-12): at 44px the wide "VIVÍ ecoparque" wordmark + the
       EntradasBA mark fill the whole row and push the hamburger off-screen.
       Shrink BOTH logos on mobile — the wordmark to 30px (width is auto, so this
       narrows it proportionally) — to leave room for the [CTA + hamburger] cluster. */
    body.tenant-ecoparque .HeaderSitePublic .header-top > a img {
        /* EP-55: explicit height for the dimensionless stacked SVG (see base rule). */
        height: 38px;
        max-width: none;
    }
    /* Compact CTA on mobile so the hamburger always fits */
    body.tenant-ecoparque .btn-header-cta {
        padding: 8px 14px;
        font-size: 13px;
    }
    /* Shrink the EntradasBA mark on mobile (now first/far-left, see Feedback 78).
       Feedback (2026-06-12): trimmed 32px → 26px alongside the wordmark above. */
    body.tenant-ecoparque .HeaderSitePublic .header-top > .header-cta-logo {
        height: 26px;
        margin-right: 10px;
    }
    body.tenant-ecoparque .btn-header-cta::before {
        font-size: 16px;
    }

    /* Hide the inline navbar — slides in as a full-height panel below the header when .menuActivo.
       !important needed to override the base display:flex !important on .navbar. */
    body.tenant-ecoparque .HeaderSitePublic .navbar {
        display: none !important;
        position: fixed;
        top: 76px; /* header 72px + 4px border */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #FFFFFF;
        flex-direction: column;
        justify-content: space-between;
        padding: 8px 32px 0;
        overflow-y: auto;
    }
    body.tenant-ecoparque .HeaderSitePublic .navbar.menuActivo {
        display: flex !important;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop {
        flex-direction: column;
        gap: 0;
        width: 100%;
        flex: 1;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link {
        padding: 16px 0 !important;
        width: 100%;
        font-size: 17px;
        font-weight: 500;
        color: #222 !important;
        border-bottom: 1px solid #EBEBEB !important;
        border-radius: 0 !important;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop .mud-nav-link .mud-nav-link-text {
        color: #222 !important;
        font-size: 17px;
        font-weight: 500;
    }
    body.tenant-ecoparque .HeaderSitePublic .menuTop .btn-idiomas-mb {
        display: none;
    }
    /* Social icons row at the bottom of the mobile menu */
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-social {
        display: flex;
        gap: 20px;
        padding: 24px 0 16px;
    }
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-social a {
        color: var(--tenant-color-secondary);
        font-size: 24px;
        text-decoration: none;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-social a:hover {
        color: var(--eco-cta-blue);
    }
    /* Green leaves decoration at the bottom */
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-leaves {
        width: 100%;
        height: 90px;
        background: var(--tenant-asset-decoracion-hojas) bottom center / auto 90px no-repeat;
        flex-shrink: 0;
        margin-top: auto;
    }

    /* Show hamburger on mobile */
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--tenant-color-secondary);
        font-size: 24px;
        width: 40px;
        height: 40px;
        padding: 0;
        cursor: pointer;
    }
    /* Replace CSS hamburger lines with Material icon ☰ */
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public .hamburger-box,
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public .hamburger-inner,
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public .hamburger-inner::before,
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public .hamburger-inner::after {
        display: none;
    }
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public::after {
        font-family: 'Material Symbols Rounded';
        content: 'menu';
        font-size: 28px;
        color: var(--tenant-color-secondary);
        font-variation-settings: 'FILL' 0, 'wght' 400;
    }
    body.tenant-ecoparque .HeaderSitePublic .hamburger-public.is-active::after {
        content: 'close';
    }
}

/* ── Phone widths (≤991px): the <picture> swaps the horizontal Header logo for
   the dedicated stacked "VIVÍ ecoparque" mark (Logos.HeaderMobile). The stacked
   mark is taller than the horizontal wordmark, so the ≤1280px 30px/26px shrink
   no longer applies — restore prominent, balanced sizing matching the GCBA
   reference: EntradasBA mark + ecoparque mark at similar heights. (2026-06-17) ── */
@media (max-width: 991px) {
    /* Explicit height (not max-height): the stacked mobile SVG ships no intrinsic
       width/height attributes, so width:auto + max-height collapses it to 0×0.
       An explicit height scales it by its viewBox aspect ratio — same approach the
       EntradasBA mark (.header-cta-logo) already uses. */
    body.tenant-ecoparque .HeaderSitePublic .header-top > a img {
        height: 38px;
        max-height: none;
        max-width: none;
        width: auto;
    }
    body.tenant-ecoparque .HeaderSitePublic .header-top > .header-cta-logo {
        height: 48px;
        margin-right: 12px;
    }
}

body.tenant-ecoparque .HeaderSitePublic .btn-tertiary,
body.tenant-ecoparque .HeaderSitePublic .btn-shop {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .HeaderSitePublic .btn-tertiary:hover,
body.tenant-ecoparque .HeaderSitePublic .btn-shop:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
}
body.tenant-ecoparque .HeaderSitePublic .btn-outline-tertiary {
    border-color: var(--eco-cta-blue);
    color: var(--eco-cta-blue);
    background-color: transparent;
}
body.tenant-ecoparque .HeaderSitePublic .btn-outline-tertiary:hover {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
}

/* --- primary buttons (app-wide) --- */
body.tenant-ecoparque .btn-primary {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-primary:hover,
body.tenant-ecoparque .btn-primary:focus {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-outline-primary {
    color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    background-color: transparent;
}
body.tenant-ecoparque .btn-outline-primary:hover {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .btn-secondary {
    background-color: var(--tenant-color-primary);
    border-color: var(--tenant-color-primary);
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .btn-secondary:hover {
    background-color: #8DA825;
    border-color: #8DA825;
}

/* --- MudBlazor button overrides (ticketera pages use them) --- */
body.tenant-ecoparque .mud-button-filled-primary {
    background-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
}
body.tenant-ecoparque .mud-button-filled-primary:hover {
    background-color: var(--eco-cta-blue-hover) !important;
}
body.tenant-ecoparque .mud-button-outlined-primary {
    border-color: var(--eco-cta-blue) !important;
    color: var(--eco-cta-blue) !important;
}
body.tenant-ecoparque .mud-button-filled-secondary {
    background-color: var(--tenant-color-primary) !important;
    color: var(--tenant-color-secondary) !important;
}

/* --- headings --- */
body.tenant-ecoparque h1,
body.tenant-ecoparque h2,
body.tenant-ecoparque h3,
body.tenant-ecoparque h4,
body.tenant-ecoparque h5 {
    color: var(--tenant-color-secondary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.tenant-ecoparque .hero-top h1 {
    color: #FFFFFF;
}

/* --- links --- */
body.tenant-ecoparque a {
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque a:hover {
    color: var(--eco-cta-blue-hover);
}

/* --- footer --- */
body.tenant-ecoparque footer,
body.tenant-ecoparque .footer,
body.tenant-ecoparque .SiteFooter {
    background-color: #002733;
    color: #FFFFFF;
}
body.tenant-ecoparque footer a,
body.tenant-ecoparque .footer a,
body.tenant-ecoparque .SiteFooter a {
    color: #FFFFFF;
}
body.tenant-ecoparque footer a:hover,
body.tenant-ecoparque .footer a:hover,
body.tenant-ecoparque .SiteFooter a:hover {
    color: var(--tenant-color-primary);
}

/* --- cards / event boxes --- */
body.tenant-ecoparque .box-item,
body.tenant-ecoparque .card,
body.tenant-ecoparque .seccion-resumen {
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --- badges --- */
body.tenant-ecoparque .badge.badge-default {
    background-color: var(--tenant-color-primary);
    color: var(--tenant-color-secondary);
}

/* --- ticketera page background (Figma paso 2/3/4 — foto del parque) --- */
/* Aplicado al body cuando estás en una página con TicketeraLayout. El layout
 * agrega .ticketeralayout-page al body via JS, así que apuntamos a la sección.
 * Desktop: foto de fauna del parque con un overlay claro para no robar
 * contraste al card del form. Mobile (≤768px): foto pesa y compite con el
 * formulario, mejor un gris liso. */
body.tenant-ecoparque .ticketeralayout {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    body.tenant-ecoparque .ticketeralayout {
        background-image: none;
        background-color: #F3F6F9;
    }
}
/* El base CSS pinta un overlay blanco full-size detrás de .ticketeraBody
 * para el split del seat-map. En ecoparque no queremos ese block blanco
 * cubriendo la foto — el card del form ya tiene su propio fondo blanco.
 * Además el propio ticketeraBody tiene background-color: #F3F6F9 del base
 * CSS — lo ponemos en transparent para que la foto de .ticketeralayout
 * se vea a través del body. */
body.tenant-ecoparque .ticketeralayout .ticketeraBody {
    background-color: transparent;
}
body.tenant-ecoparque .ticketeralayout .ticketeraBody:after {
    content: none;
}
/* Centrar el cont-1170 en el ticketera body: el base CSS no tiene
 * margin: 0 auto, así que en viewports >1170px queda pegado al borde
 * izquierdo mientras la foto de fondo está centrada. */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 {
    margin: 0 auto;
}

/* --- guest checkout form (Figma Paso 3) --- */
/* The base .ticketeralayout .ticketeraBody::after CSS paints a full-size
 * white overlay at z-index 1 to create the split-background effect used by
 * the seat-map layout. Our guest form sits inside ticketeraBody for layout
 * consistency, so we need position:relative + z-index > 1 to sit above that
 * overlay. Same trick the base sheet uses for .selector-vista and friends. */
body.tenant-ecoparque .guest-checkout-form {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
body.tenant-ecoparque .guest-form-fields {
    width: calc(100% - 350px);
    flex: 1 1 0%;
    min-width: 0;
    padding: 32px 32px 32px 0;
    background-color: transparent;
    position: relative;
    z-index: 5;
}
body.tenant-ecoparque .guest-form-fields::after {
    /* Don't bleed the gray past the form card — the photo should be visible
       on both sides of the centered .cont-1170 */
    content: none;
}
body.tenant-ecoparque .guest-sidebar {
    width: 350px;
    flex-shrink: 0;
    margin-top: 32px;
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 21px;
    z-index: 5;
}
body.tenant-ecoparque .guest-sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 16px;
}
body.tenant-ecoparque .guest-checkout-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}
body.tenant-ecoparque .guest-checkout-icon {
    font-size: 28px;
    color: var(--eco-cta-blue);
    flex-shrink: 0;
    margin-top: 2px;
}
body.tenant-ecoparque .guest-checkout-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .guest-checkout-subtitle {
    font-size: 13px;
    color: var(--eco-muted);
    margin-bottom: 0;
    line-height: 1.5;
}
/* Two-column email row */
body.tenant-ecoparque .guest-email-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
/* Two-column doc row */
body.tenant-ecoparque .guest-doc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
body.tenant-ecoparque .guest-checkout-form .form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .guest-checkout-form .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tenant-color-secondary);
    margin-bottom: 6px;
}
body.tenant-ecoparque .guest-checkout-form .form-control {
    padding: 10px 14px;
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    font-size: 15px;
    background-color: #FFFFFF;
    transition: border-color 120ms ease;
}
body.tenant-ecoparque .guest-checkout-form .form-control:focus {
    outline: none;
    border-color: var(--eco-cta-blue);
    box-shadow: 0 0 0 3px rgba(20, 85, 206, 0.12);
}
body.tenant-ecoparque .guest-checkout-error {
    margin-top: 8px;
    padding: 10px 14px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-size: 14px;
}
body.tenant-ecoparque .guest-checkout-form .acciones {
    margin-top: 24px;
    border-top: 1px solid var(--eco-input-border);
    padding-top: 16px;
}
/* Pago page: the in-form Volver|Pagar buttons are replaced by the Pagar
   button living in the .sidebar-resumen.box-bottom (mobile: sticky bar;
   desktop: right panel bottom). Hide them so the user sees a single,
   consistent action button across paso 2/4/5. */
body.tenant-ecoparque .pago-vista .acciones {
    display: none !important;
}
body.tenant-ecoparque .btn-guest-continue {
    background-color: var(--eco-cta-blue) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
body.tenant-ecoparque .btn-guest-continue:hover {
    background-color: var(--eco-cta-blue-hover) !important;
}
/* Event date pill above the guest form (Figma paso 3) */
body.tenant-ecoparque .datos-comprador-fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--eco-muted);
    margin-bottom: 16px;
}
body.tenant-ecoparque .datos-comprador-fecha .material-symbols-rounded {
    font-size: 16px;
    color: var(--eco-muted);
}
/* Resumen de reserva collapsible (Figma paso 3) */
body.tenant-ecoparque .guest-resumen {
    border-top: 1px solid var(--eco-input-border);
    margin-top: 8px;
    padding-top: 4px;
}
body.tenant-ecoparque .guest-resumen-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 12px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .guest-resumen-toggle .material-symbols-rounded {
    font-size: 20px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .guest-resumen-summary {
    padding-bottom: 8px;
}
body.tenant-ecoparque .guest-resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--eco-muted);
    padding: 4px 0;
}
body.tenant-ecoparque .guest-resumen-total {
    font-weight: 700;
    color: var(--tenant-color-secondary);
    font-size: 15px;
    border-top: 1px solid var(--eco-input-border);
    padding-top: 8px;
    margin-top: 4px;
}
body.tenant-ecoparque .guest-resumen-detail {
    border-top: 1px solid var(--eco-input-border);
    padding-top: 8px;
    margin-top: 4px;
    margin-bottom: 8px;
}
body.tenant-ecoparque .guest-resumen-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
body.tenant-ecoparque .guest-resumen-detail-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .guest-resumen-detail-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tenant-ecoparque .guest-resumen-detail-price {
    flex-shrink: 0;
    margin-left: 8px;
    font-weight: 500;
}
body.tenant-ecoparque .guest-resumen-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #DC2626;
    display: flex;
    align-items: center;
}
body.tenant-ecoparque .guest-resumen-remove .material-symbols-rounded {
    font-size: 18px;
}

/* Sidebar card — resumen inside it is always expanded, no toggle needed */
body.tenant-ecoparque .guest-sidebar .guest-resumen {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
@media (min-width: 769px) {
    body.tenant-ecoparque .guest-sidebar .guest-resumen-toggle {
        display: none;
    }
    body.tenant-ecoparque .guest-sidebar .guest-resumen-detail {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* --- carrito / checkout panels --- */
body.tenant-ecoparque .box-timer {
    background-color: var(--eco-surface-light);
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    padding: 10px 16px;
}

/* --- hero breadcrumb --- */
body.tenant-ecoparque .seccion-carrito .hero-top {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
}
body.tenant-ecoparque .seccion-carrito .hero-top h1,
body.tenant-ecoparque .seccion-carrito .hero-top p {
    color: #FFFFFF;
}
body.tenant-ecoparque .breadcrumb-item a,
body.tenant-ecoparque .breadcrumb-item.active {
    color: #FFFFFF;
}

/* =============================================================================
   Ecoparque-specific home page (Tenants/ecoparque/Home.razor) — Figma V2
   ============================================================================= */

/* Reset base layout interference so hero butts up against header */
body.tenant-ecoparque main {
    background-color: var(--eco-surface-light);
}
body.tenant-ecoparque main > .SiteMainPage {
    margin-top: 0 !important;
}
body.tenant-ecoparque .layerOverlay {
    background-color: transparent !important;
}
body.tenant-ecoparque .pagelayout {
    background-color: var(--eco-surface-light);
}

/* ── Full-width hero ─────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-home-hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center 55%;
    display: flex;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    overflow: visible;
}
body.tenant-ecoparque .eco-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    width: 100%;
    /* Sit ABOVE the hero video (z-index 1) so the title overlays the video
       instead of being hidden behind it when it plays. */
    z-index: 2;
}
/* When the hero video is actually playing, scale the title down so it reads as
   an overlay on the moving footage rather than dominating it. */
body.tenant-ecoparque .eco-home-hero:has(.eco-hero-video.is-playing) .eco-hero-content h1 {
    /* Mid-size while the video plays: 64px (desktop static) felt too big, 32px too
       small — 48px sits in the middle. */
    font-size: 48px;
}
body.tenant-ecoparque .eco-hero-content {
    max-width: 560px;
    width: 100%;
}
body.tenant-ecoparque .eco-hero-content h1 {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.tenant-ecoparque .eco-hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 20px;
}
body.tenant-ecoparque .eco-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    display: inline-block;
}
body.tenant-ecoparque .eco-dot--active {
    background: #FFFFFF;
}
body.tenant-ecoparque .eco-hero-cta {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
    font-weight: 600;
    padding: 12px 28px;
}
body.tenant-ecoparque .eco-hero-cta:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
    color: #FFFFFF;
}
body.tenant-ecoparque .eco-hero-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Hero video background (when admin uploads a video via backoffice) ──
   Sits ABOVE the slider (z-index 1 vs the slider's 0) and starts hidden
   (opacity 0). main.js adds .is-playing once the matching video actually starts,
   fading it in over the slider. If the video is skipped (slow/metered network or
   a low-end / old phone) it never gains .is-playing, so the slider shows through
   as the fallback. Desktop and mobile each get their own source video, toggled by
   viewport so only the relevant one is ever loaded. */
body.tenant-ecoparque .eco-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}
body.tenant-ecoparque .eco-hero-video.is-playing {
    opacity: 1;
}
/* Desktop video shows ≥992px, mobile video shows ≤991px (matches main.js). */
body.tenant-ecoparque .eco-hero-video--mobile {
    display: none;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-hero-video--desktop {
        display: none;
    }
    body.tenant-ecoparque .eco-hero-video--mobile {
        display: block;
    }
}

/* ── Hero pill CTA — visible on mobile only; desktop has the in-hero CTA button ── */
@media (min-width: 769px) {
    body.tenant-ecoparque .eco-hero-pill {
        display: none;
    }
}
body.tenant-ecoparque .eco-hero-pill {
    position: absolute;
    /* Raised up inside the hero (was -30px, hanging below the bottom edge). */
    bottom: 32px;
    left: max(16px, calc((100% - 1170px) / 2 + 16px));
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(20, 20, 20, 0.72);
    backdrop-filter: blur(6px);
    border-radius: 50px;
    padding: 6px 16px 6px 6px;
    z-index: 10;
}
body.tenant-ecoparque .eco-hero-pill-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
body.tenant-ecoparque .eco-hero-pill-cta {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 50px;
    font-size: 14px;
    white-space: nowrap;
}
body.tenant-ecoparque .eco-hero-pill-cta:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
    color: #FFFFFF;
}
body.tenant-ecoparque .eco-hero-pill-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Animal carousel (Visitas Especiales: Cuidado Animal) ───────────────── */
body.tenant-ecoparque .eco-animal-gallery {
    background-color: #FFFFFF;
    padding: 80px 0 0;
}
body.tenant-ecoparque .eco-animal-gallery-header {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 16px;
    margin-bottom: 24px;
}
body.tenant-ecoparque .eco-animal-track-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
body.tenant-ecoparque .eco-animal-track-wrapper::-webkit-scrollbar {
    display: none;
}
/* 6 equal columns — flex with fixed 200px was overflowing + left-flushed. */
body.tenant-ecoparque .eco-animal-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
body.tenant-ecoparque .eco-animal-slide {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Tiles link to /actividades. */
    cursor: pointer;
}
/* "¡Planificá tu visita!" heading links to /actividades but reads as a heading. */
body.tenant-ecoparque .eco-animal-gallery-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
body.tenant-ecoparque .eco-animal-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
}
body.tenant-ecoparque .eco-animal-slide-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-transform: capitalize;
}

/* ── Actividades section ─────────────────────────────────────────────────── */
/* Floral decorative strip between info-bar and Actividades section */
body.tenant-ecoparque .eco-visitas-especiales {
    background-color: var(--eco-surface-light);
    padding: 56px 0 64px;
    background-image: var(--tenant-asset-floral);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
}
body.tenant-ecoparque .eco-section-lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--eco-muted);
    margin: 0 0 36px 0;
    max-width: 680px;
}
body.tenant-ecoparque .eco-visitas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* /actividades — Visitas guiadas especiales listing page */
body.tenant-ecoparque .eco-page-hero {
    align-items: center; /* title vertically centered (home hero is bottom-aligned) */
}
body.tenant-ecoparque .eco-page-hero .eco-hero-overlay {
    align-items: center;
    padding-bottom: 0;
}
body.tenant-ecoparque .eco-cargar-mas-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
body.tenant-ecoparque .eco-cargar-mas {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    color: #FFFFFF;
    font-weight: 600;
    padding: 11px 32px;
}
body.tenant-ecoparque .eco-cargar-mas:hover {
    filter: brightness(0.94);
}
body.tenant-ecoparque .eco-visita-card {
    background-color: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease;
    cursor: pointer;
}
body.tenant-ecoparque .eco-visita-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}
body.tenant-ecoparque .eco-visita-img {
    height: 200px;
    background-size: cover;
    background-position: center 60%;
    position: relative;
}
body.tenant-ecoparque .eco-visita-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%);
}
body.tenant-ecoparque .eco-visita-body {
    padding: 20px 22px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.tenant-ecoparque .eco-visita-body h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-visita-body > p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--eco-muted);
    margin-bottom: 12px;
    flex: 1;
}
body.tenant-ecoparque .eco-visita-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
body.tenant-ecoparque .eco-visita-price,
body.tenant-ecoparque .eco-visita-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-visita-price strong,
body.tenant-ecoparque .eco-visita-duration strong {
    color: var(--tenant-color-secondary);
    font-weight: 600;
}
body.tenant-ecoparque .eco-visita-price .material-symbols-rounded,
body.tenant-ecoparque .eco-visita-duration .material-symbols-rounded {
    font-size: 16px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-visita-btn {
    align-self: flex-start;
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    font-weight: 600;
    padding: 9px 20px;
}
body.tenant-ecoparque .eco-visita-btn:hover {
    background-color: var(--eco-cta-blue-hover);
    border-color: var(--eco-cta-blue-hover);
}

/* ── Home info cards grid ────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-home-info-cards {
    background-color: #FFFFFF;
    padding: 48px 0;
}

/* ── Social links section ────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-social-section {
    background-color: var(--eco-surface-light);
    padding: 64px 0 64px;
    border-top: 1px solid var(--eco-input-border);
}
body.tenant-ecoparque .eco-social-section .cont-1170 {
    display: flex;
    align-items: center;
    gap: 20px;
}
body.tenant-ecoparque .eco-social-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin: 0;
    white-space: nowrap;
}
body.tenant-ecoparque .eco-social-links {
    display: flex;
    gap: 12px;
}
body.tenant-ecoparque .eco-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tenant-color-secondary);
    font-size: 30px;
    transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
body.tenant-ecoparque .eco-social-link:hover {
    border-color: var(--eco-cta-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    color: var(--eco-cta-blue);
    text-decoration: none;
}

/* ── Botón de arrepentimiento (own band above footer, mirrors entradasba) ─── */
body.tenant-ecoparque #arrepentimiento {
    width: 100%;
    padding: 24px 0;
    background: #fff;
    border-top: solid 4px #FFCC00;
}
body.tenant-ecoparque .eco-arrepentimiento-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #002733;
    border-radius: 8px;
    background: #fff;
    color: #002733;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
body.tenant-ecoparque .eco-arrepentimiento-btn:hover {
    background: #002733;
    color: #fff;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-footer {
    background-color: #002733;
    padding: 32px 0;
    color: rgba(255,255,255,0.7);
}
body.tenant-ecoparque .eco-footer-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
body.tenant-ecoparque .eco-footer-logos img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
body.tenant-ecoparque .eco-footer-links {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
body.tenant-ecoparque .eco-footer-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
    font-size: 14px;
    transition: color 150ms ease;
}
body.tenant-ecoparque .eco-footer-links a:hover {
    color: #FFFFFF;
}
body.tenant-ecoparque .eco-footer-copy p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

@media (max-width: 991px) {
    body.tenant-ecoparque .eco-visitas-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-social-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.tenant-ecoparque .eco-home-hero {
        min-height: calc(100dvh - 72px);
        background-position: center 60%;
    }
    body.tenant-ecoparque .eco-hero-content h1 {
        font-size: 32px;
    }
    body.tenant-ecoparque .eco-info-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    body.tenant-ecoparque .eco-info-bar-inner > p {
        font-size: 13px;
    }
    body.tenant-ecoparque .eco-visitas-especiales {
        padding: 40px 0 48px;
    }
}


/* =============================================================================
   Purchase flow — Ticketera layout
   Verified selectors from live HTML inspection 2026-04-17:
     HEADER.headerTicketera
     DIV.ticketeraTop > .cont-1170 > .box-info > (.img-evento + .txt)
     DIV.ticketeraBody > .cont-1170 > (.selector-vista + .sidebar-resumen)
     .selector-vista > .entradas-tipo > .entrada > .Row
     .entrada > .Row > .contador > button
     .sidebar-resumen > .column-sticky
   ============================================================================= */

/* --- Header bar — kept structurally identical to HeaderSitePublic so navigating
   Home → Calendar doesn't shift the logo or header height. Same border colour
   (`--tenant-color-tertiary` yellow), same 4px stroke, same .cont-1470 padding
   + min-height as the public header, same 44px logo cap. */
body.tenant-ecoparque .headerTicketera {
    background-color: #FFFFFF;
    border-bottom: 4px solid var(--tenant-color-tertiary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 0;
}
body.tenant-ecoparque .headerTicketera .cont-1470 {
    display: flex;
    align-items: center;
    /* EP-55: the generic .headerTicketera .cont-1470 (main.css) is
       justify-content:space-between; with the EBA mark + logo + empty .nav that
       floated the (now narrow) tenant logo into the center. Pin to flex-start so
       EBA + logo sit left together; .nav is pushed right via margin-left:auto below. */
    justify-content: flex-start;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    /* Match HeaderSitePublic gutter so the logo doesn't shift between
       Home and the checkout flow. */
    padding-left: 32px;
    padding-right: 32px;
    min-height: 72px;
}
body.tenant-ecoparque .headerTicketera img {
    /* EP-55: explicit height for the dimensionless stacked SVG (see HeaderSitePublic
       base rule). The .header-cta-logo EBA mark below overrides with its own height. */
    height: 44px;
    width: auto;
    display: block;
}
/* Feedback 78 (2026-06-12): EntradasBA mark on the FAR LEFT of the ticketera
   header too, matching HeaderSitePublic. It's the first child of the flex
   .cont-1470, so it naturally sits ahead of the tenant logo <a>; the 24px gap
   spaces it from the wordmark. Cap height to match the public header (40px). */
body.tenant-ecoparque .headerTicketera .header-cta-logo {
    flex: 0 0 auto;
    height: 40px;
    width: auto;
    object-fit: contain;
}
body.tenant-ecoparque .headerTicketera a,
body.tenant-ecoparque .headerTicketera .nav,
body.tenant-ecoparque .headerTicketera .nav a {
    color: var(--tenant-color-secondary);
}
/* EP-55: keep the nav cluster on the right (it's currently empty, but the row is
   now flex-start; this preserves the right-aligned nav for when its content returns). */
body.tenant-ecoparque .headerTicketera .nav {
    margin-left: auto;
}

/* --- Date bar (replaces dark venue banner) — light gray strip --- */
body.tenant-ecoparque .ticketeraTop {
    background: #F0F2F5;
    color: #6c757d;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}
body.tenant-ecoparque .ticketeralayout .ticketeraTop .cont-1170 {
    margin: 0 auto;
}
body.tenant-ecoparque .ticketeraTop .box-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}
/* Hide venue image thumbnail — show only the date text */
body.tenant-ecoparque .ticketeraTop .img-evento {
    display: none;
}
/* Hide visit name (p and h4), show only date/time (span) */
body.tenant-ecoparque .ticketeraTop .txt p,
body.tenant-ecoparque .ticketeraTop .txt h4 {
    display: none;
}
body.tenant-ecoparque .ticketeraTop .txt span {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}
/* The date .txt carries margin-left:16px to clear the event thumbnail, which is
   hidden for ecoparque — so it just pushes the date 16px right of the gutter.
   Zero it so the date lines up with the logo / Volver / content. */
body.tenant-ecoparque .ticketeraTop .txt {
    margin-left: 0 !important;
}
/* Calendar icon before the date text */
body.tenant-ecoparque .ticketeraTop .txt::before {
    content: 'calendar_today';
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    color: #6c757d;
    vertical-align: -3px;
    margin-right: 6px;
}
body.tenant-ecoparque .ticketeraTop .box-timer,
body.tenant-ecoparque .ticketeraTop .timer {
    background-color: #fff3cd;
    color: #856404;
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 13px;
}

/* --- Main body area --- */
body.tenant-ecoparque .ticketeraBody {
    background-color: var(--eco-surface-light);
    padding: 32px 0;
    min-height: 60vh;
}

/* Two-column layout: entries left + sidebar right */
body.tenant-ecoparque .ticketeraBody > .cont-1170 {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Align the ticketera content (date strip + categories + sidebar) with the
   header logo: same 1470 cap + 32px gutter as `.headerTicketera .cont-1470`,
   so the category column's left edge lines up with the "ecoparque" wordmark
   (Figma 6285-27000). The grey/photo background still spans full width via
   `.ticketeraBody`; only the inner content is constrained. Desktop only —
   mobile keeps the base full-bleed padding. */
@media (min-width: 992px) {
    body.tenant-ecoparque .ticketeraTop > .cont-1170,
    body.tenant-ecoparque .ticketeraBody > .cont-1170 {
        /* Match the header's container exactly (same 1470 cap + the shared base
           15px gutter + margin:0 auto) so the category column's left edge lines
           up with the logo. Background stays full-width via .ticketeraBody. */
        max-width: 1470px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Force a permanent vertical scrollbar so the centered header + content don't
   shift sideways when navigating between a scrolling page (home) and a shorter
   one (ticketera) — the small logo "jump" between Home and the purchase flow.
   overflow-y:scroll is more reliable cross-browser than scrollbar-gutter.
   Scoped to ecoparque (this stylesheet only loads for it). */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* Logo jump fix: the shared `main .SiteMainPage { width: 100vw }` includes the
   scrollbar width, so the HOME centers its header in a slightly wider box than
   the ticketera pages (which use width:100%) — the logo shifts ~scrollbar/2 when
   navigating Home → ticketera. Pin the ecoparque home main to 100% so both
   contexts center the header within the same width. Ecoparque-scoped. */
body.tenant-ecoparque main .SiteMainPage {
    width: 100% !important;
}

/* --- Left column (selector-vista) --- */
body.tenant-ecoparque .selector-vista {
    flex: 1;
    min-width: 0;
}
/* Don't bleed the gray beyond the form card — photo should show on both
   sides of the centered .cont-1170 */
body.tenant-ecoparque .selector-vista::after {
    content: none;
}
body.tenant-ecoparque .selector-vista > h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--tenant-color-secondary);
}

/* Purchase notice banner — teal (matches Figma CABA resident notice) */
body.tenant-ecoparque .purchase-notice {
    background-color: #1AB2A5;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}
body.tenant-ecoparque .purchase-notice .material-symbols-rounded {
    color: #FFFFFF;
    font-size: 24px;
    flex-shrink: 0;
}
body.tenant-ecoparque .purchase-notice p {
    margin: 0;
    color: #FFFFFF;
}

/* Guest confirmation panels (post-payment / post-MP-return / $0 reservation).
   The three surfaces (Checkout_MpReturn, Pago_Valorcero, Carrito_Checkout)
   render the same Descargar entradas + Ir a Inicio pair. Mobile stacks the
   buttons vertically; desktop keeps them inline. */
body.tenant-ecoparque .status.status-success .btn-primary,
body.tenant-ecoparque .status.status-success .btn-outline-primary,
body.tenant-ecoparque .box-tarjeta.status.status-success .btn-primary,
body.tenant-ecoparque .box-tarjeta.status.status-success .btn-outline-primary {
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    min-width: 200px;
}
body.tenant-ecoparque .status.status-success .btn-primary i.fa-solid {
    margin-right: 6px;
}
@media (max-width: 575px) {
    body.tenant-ecoparque .status.status-success .btn-primary,
    body.tenant-ecoparque .status.status-success .btn-outline-primary,
    body.tenant-ecoparque .box-tarjeta.status.status-success .btn-primary,
    body.tenant-ecoparque .box-tarjeta.status.status-success .btn-outline-primary {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0 0 8px 0;
    }
    /* Drop ms-2 spacing on mobile — buttons now stack. */
    body.tenant-ecoparque .status.status-success .ms-2,
    body.tenant-ecoparque .box-tarjeta.status.status-success .ms-2 {
        margin-left: 0 !important;
    }
}

/* Sidebar secondary action (Visitas Especiales → "Comprar Acceso al Parque")
   renders below Continuar as a filled navy button per Figma 6368:9307 /
   6294:30668 — overrides the default outlined style. */
body.tenant-ecoparque .sidebar-resumen .btn.ticketera-secondary-action {
    background-color: #101E37;
    border-color: #101E37;
    color: #FFFFFF;
}
body.tenant-ecoparque .sidebar-resumen .btn.ticketera-secondary-action:hover,
body.tenant-ecoparque .sidebar-resumen .btn.ticketera-secondary-action:focus {
    background-color: #1A2A4A;
    border-color: #1A2A4A;
    color: #FFFFFF;
}

/* Ticket type rows */
body.tenant-ecoparque .entradas-tipo .entrada {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 150ms ease;
}
body.tenant-ecoparque .entradas-tipo .entrada:hover {
    border-color: var(--eco-cta-blue);
}
body.tenant-ecoparque .entradas-tipo .entrada .Row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 2px;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
    font-size: 14px;
    color: var(--eco-muted);
    margin-bottom: 0;
}

/* Counter buttons */
body.tenant-ecoparque .contador {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .contador button {
    background-color: var(--eco-cta-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}
body.tenant-ecoparque .contador button:hover {
    background-color: var(--eco-cta-blue-hover);
}
/* qty cell renders as a 34h box matching the +/- button height — fede:
   'the quantity of the contador, the height should match the - and +
   buttons height'. Targeted at IMMEDIATE child span so the nested spans
   inside MudIconButton (the icon labels) are untouched. */
body.tenant-ecoparque .contador > span,
body.tenant-ecoparque .contador > .cantidad {
    font-size: 16px;
    font-weight: 600;
    min-width: 40px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--eco-input-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: #101E37;
    text-align: center;
    color: var(--tenant-color-secondary);
}

/* --- Right sidebar --- */
body.tenant-ecoparque .sidebar-resumen {
    flex: 0 0 340px;
}
body.tenant-ecoparque .sidebar-resumen .column-sticky {
    position: sticky;
    top: 20px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.tenant-ecoparque .sidebar-resumen h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .sidebar-resumen .seleccion {
    padding: 16px 0;
    border-bottom: 1px dashed var(--eco-input-border);
    margin-bottom: 16px;
    color: var(--eco-muted);
    font-size: 14px;
}
body.tenant-ecoparque .sidebar-resumen .box-bottom {
    padding-top: 8px;
}
body.tenant-ecoparque .sidebar-resumen .box-bottom h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
body.tenant-ecoparque .sidebar-resumen .row-total {
    font-weight: 700;
    font-size: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--eco-input-border);
    margin-top: 8px;
}
body.tenant-ecoparque .sidebar-resumen .btn-primary {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
}
body.tenant-ecoparque .sidebar-resumen .btn-outline-primary {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
}

/* Also used as sidebar-pago on payment pages */
body.tenant-ecoparque .sidebar-pago {
    flex: 0 0 340px;
}
body.tenant-ecoparque .sidebar-pago .column-sticky {
    position: sticky;
    top: 20px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   Visita detail page — /visitas/{id}
   HTML: .pagelayout > .seccion-establecimientos > .ficha-establecimiento
         .detalle-contenido > .layout > (.main + .sidebar)
   ============================================================================= */

body.tenant-ecoparque .ficha-establecimiento .top {
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    color: #FFFFFF;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
}
body.tenant-ecoparque .ficha-establecimiento .top h1 {
    color: #FFFFFF;
    font-size: 32px;
}
body.tenant-ecoparque .ficha-establecimiento .top .breadcrumb-item a,
body.tenant-ecoparque .ficha-establecimiento .top .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

/* Calendar date picker */
body.tenant-ecoparque .selector-header-azul {
    background-color: var(--eco-footer-dark) !important;
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
}
body.tenant-ecoparque .selector-header-azul h4,
body.tenant-ecoparque .selector-header-azul i {
    color: #FFFFFF;
}
body.tenant-ecoparque .selector-contenido-unificado {
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
}
body.tenant-ecoparque .fecha-card {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body.tenant-ecoparque .fecha-card:hover:not(.no-disponible) {
    background-color: rgba(161, 187, 46, 0.1);
}
body.tenant-ecoparque .fecha-card.seleccionada {
    background-color: var(--tenant-color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--tenant-color-primary) !important;
}
body.tenant-ecoparque .fecha-card.seleccionada * {
    color: #FFFFFF !important;
}
body.tenant-ecoparque .dia-numero.numero-seleccionado {
    background-color: var(--tenant-color-primary);
    color: #FFFFFF;
    border-radius: 50%;
}

/* Monthly grid calendar (CalendarStyle = MonthlyGrid) */
body.tenant-ecoparque .calendar-grid-wrapper {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .calendar-grid-body {
    flex: 1;
}
body.tenant-ecoparque .eco-calendar-date-header {
    background: #2563EB;
    color: #FFFFFF;
    text-align: center;
    padding: 12px 16px 14px;
}
body.tenant-ecoparque .eco-calendar-date-year {
    display: block;
    font-size: 13px;
    opacity: 0.8;
}
body.tenant-ecoparque .eco-calendar-date-day {
    display: block;
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
}
body.tenant-ecoparque .calendar-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
}
body.tenant-ecoparque .calendar-grid-month {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--eco-muted);
    padding: 0 8px 8px;
    text-transform: none;
    letter-spacing: 0;
}
body.tenant-ecoparque .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 8px 32px;
}
body.tenant-ecoparque .calendar-grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    cursor: default;
    transition: background-color 150ms ease, color 150ms ease;
}
body.tenant-ecoparque .calendar-grid-cell.empty {
    visibility: hidden;
}
body.tenant-ecoparque .calendar-grid-cell.no-disponible {
    color: #CCC;
}
body.tenant-ecoparque .calendar-grid-cell.disponible {
    background-color: var(--tenant-color-primary);
    color: #FFFFFF;
    cursor: pointer;
}
body.tenant-ecoparque .calendar-grid-cell.disponible:hover {
    background-color: #8DA825;
}
body.tenant-ecoparque .calendar-grid-cell.seleccionado {
    background-color: var(--eco-footer-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(12, 89, 96, 0.3);
}

/* Entries section in detail */
body.tenant-ecoparque .seccion-entradas .entradas-header {
    background-color: var(--eco-footer-dark);
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    cursor: pointer;
}
body.tenant-ecoparque .seccion-entradas .entradas-header h4,
body.tenant-ecoparque .seccion-entradas .entradas-header i {
    color: #FFFFFF;
}
body.tenant-ecoparque .seccion-entradas .entradas-contenido {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 16px;
}
body.tenant-ecoparque .seccion-entradas .entrada-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--eco-input-border);
}
body.tenant-ecoparque .seccion-entradas .entrada-item:last-child {
    border-bottom: none;
}

/* Detail page two-column layout */
body.tenant-ecoparque .detalle-contenido .layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
body.tenant-ecoparque .detalle-contenido .layout > .main {
    flex: 1;
    min-width: 0;
}
body.tenant-ecoparque .detalle-contenido .layout > .sidebar {
    flex: 0 0 320px;
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Price display */
body.tenant-ecoparque .precio-desde h4 {
    font-size: 28px;
    font-weight: 800;
    color: var(--tenant-color-secondary);
}

/* Más información accordion */
body.tenant-ecoparque .mas-informacion-section .mud-expand-panel {
    border-radius: 8px !important;
    border: 1px solid var(--eco-input-border) !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
}

/* =============================================================================
   Guest checkout form — /checkout
   HTML: .ticketeraBody > .cont-1170 > .guest-checkout-form
   Already has good base styling from lines ~177-253 above.
   These additions handle the ticketera layout wrapper.
   ============================================================================= */

/* Guest form + sidebar: datos-comprador-vista takes the flex-1 slot inside .cont-1170.
   The :has() here only ensures align-items; sizing is handled by .datos-comprador-vista
   and .guest-form-fields rules below. */
body.tenant-ecoparque .ticketeraBody > .cont-1170:has(.guest-checkout-form) {
    align-items: flex-start;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .guest-email-row,
    body.tenant-ecoparque .guest-doc-row {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .ticketeraBody > .cont-1170:has(.guest-checkout-form) {
        flex-direction: column;
    }
    body.tenant-ecoparque .guest-checkout-form {
        flex-direction: column;
    }
    /* On mobile both children of .guest-checkout-form take FULL width — the
       desktop `width: calc(100% - 350px)` on .guest-form-fields was leaving
       only 46px when the container collapsed to a single column. */
    body.tenant-ecoparque .guest-form-fields {
        width: 100%;
        padding: 16px 0;
    }
    body.tenant-ecoparque .guest-sidebar {
        width: 100%;
        position: static;
        margin-top: 0;
    }
    body.tenant-ecoparque .guest-sidebar-title {
        display: none; /* toggle button already shows "Resumen de reserva" on mobile */
    }
}

/* =============================================================================
   Payment page — pago-vista wrapper + componente-de-pago
   ============================================================================= */

/* Override main.css gray background/padding on .pago-vista for ecoparque */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .pago-vista {
    background: transparent !important;
    padding: 0 !important;
}
body.tenant-ecoparque .pago-vista::after {
    display: none !important;
}

/* =============================================================================
   Payment page — componente-de-pago
   ============================================================================= */

body.tenant-ecoparque .componente-de-pago .box-tarjeta {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* Each accordion panel is its own white card */
body.tenant-ecoparque .componente-de-pago .mud-expansion-panels {
    background: transparent;
    box-shadow: none;
}
body.tenant-ecoparque .componente-de-pago .mud-expand-panel {
    background: #FFFFFF;
    border-radius: 8px !important;
    border: 1px solid var(--eco-input-border);
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
body.tenant-ecoparque .componente-de-pago .mud-expand-panel:last-child {
    margin-bottom: 0;
}
body.tenant-ecoparque .componente-de-pago .box-tarjeta h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
/* "Tarjetas habilitadas" label + card logos — give space before accordion */
body.tenant-ecoparque .tarjetas-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--eco-muted);
    margin-bottom: 10px;
}
body.tenant-ecoparque .componente-de-pago .tarjetas {
    margin-bottom: 20px;
}
/* Coupon not yet needed for ecoparque — hide everywhere */
body.tenant-ecoparque .panel-descuento {
    display: none;
}
/* Countdown timer not shown for ecoparque */
body.tenant-ecoparque .ticketeraTop .box-timer,
body.tenant-ecoparque .box-timer {
    display: none !important;
}
/* Hide "Datos del titular" heading — Figma shows fields inline without section label */
body.tenant-ecoparque .panel-pago .datos h5 {
    display: none;
}
/* Payment method accordion item — match ecoparque's softer corner radius */
body.tenant-ecoparque .panel-pago .mud-expand-panel-header {
    border-radius: 8px;
}
/* Confirmation screen overrides */
body.tenant-ecoparque .status-success .status-title {
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .status-success i.fa-circle-check {
    color: #28a745;
    font-size: 40px;
}
body.tenant-ecoparque .mp-return-home {
    color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
}

/* Zero-value reservation (Pago_Valorcero) */
body.tenant-ecoparque .componente-de-pago-gratuito .box-tarjeta {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    max-width: 560px;
}
body.tenant-ecoparque .componente-de-pago-gratuito .banner-reserva {
    background-color: rgba(161, 187, 46, 0.12);
    border: 1px solid var(--tenant-color-primary);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
body.tenant-ecoparque .componente-de-pago-gratuito .banner-reserva .material-symbols-rounded {
    color: var(--tenant-color-primary);
    font-size: 24px;
}

/* =============================================================================
   Mis Entradas + E-Ticket pages
   ============================================================================= */

body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
    padding: 24px 0;
}
body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero .breadcrumb-item a,
body.tenant-ecoparque .cuenta-mis-entradas .entradas-hero .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

/* MudTabs on mis-entradas */
body.tenant-ecoparque .cuenta-mis-entradas .mud-tabs .mud-tab.mud-tab-active {
    color: var(--eco-cta-blue) !important;
}
body.tenant-ecoparque .cuenta-mis-entradas .mud-tabs .mud-tab-slider {
    background-color: var(--eco-cta-blue) !important;
}

/* Ticket cards in list */
body.tenant-ecoparque .cuenta-mis-entradas .entrada {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 150ms ease;
}
body.tenant-ecoparque .cuenta-mis-entradas .entrada:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* E-Ticket page */
body.tenant-ecoparque .cuenta-eticket .entradas-hero {
    background: linear-gradient(135deg, var(--eco-hero-teal) 0%, var(--eco-hero-teal-dark) 100%);
    color: #FFFFFF;
    padding: 24px 0;
}
body.tenant-ecoparque .cuenta-eticket .ticket {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    max-width: 480px;
    margin: 24px auto;
}
body.tenant-ecoparque .cuenta-eticket .ticket-header {
    background-color: var(--eco-hero-teal);
    padding: 20px;
    text-align: center;
}

/* =============================================================================
   MudBlazor component overrides
   ============================================================================= */

body.tenant-ecoparque .mud-snackbar {
    font-family: inherit;
}
body.tenant-ecoparque .mud-expansion-panels.rounded-panels .mud-expand-panel {
    border-radius: 8px !important;
    overflow: hidden;
}

/* =============================================================================
   Mobile responsive
   ============================================================================= */

@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeraBody > .cont-1170 {
        flex-direction: column;
    }
    body.tenant-ecoparque .sidebar-resumen,
    body.tenant-ecoparque .sidebar-pago {
        flex: unset;
        width: 100%;
    }
    body.tenant-ecoparque .detalle-contenido .layout {
        flex-direction: column;
    }
    body.tenant-ecoparque .detalle-contenido .layout > .sidebar {
        flex: unset;
        width: 100%;
    }

    /* ── Mobile: sticky bottom action bar (position: sticky) ─────────────
       Client 2026-06-10: glued to the viewport bottom WHILE scrolling, but
       it must stop ABOVE the Botón de arrepentimiento + footer at end-of-doc
       (not float over them). position:sticky;bottom:0 does exactly that — it
       pins to the viewport bottom until its containing block (the ticketera
       body) ends, then sits in flow so the footer renders below it. No
       padding-bottom compensation (that's a fixed-bar hack → would gap). */
    body.tenant-ecoparque .sidebar-resumen {
        position: sticky;
        bottom: 0;
        z-index: 200;
        background: #FFFFFF;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.10);
        padding: 12px 20px 16px;
        border-top: 1px solid var(--eco-input-border);
    }
    body.tenant-ecoparque .sidebar-resumen .column-sticky {
        position: static;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    /* Hide the "Resumen de compra" h4 always on mobile. */
    body.tenant-ecoparque .sidebar-resumen .box-bottom h4 {
        display: none !important;
    }
    /* Paso 2 (sidebar-resumen WITHOUT .has-expand-toggle): hide h2 +
       .seleccion + .sin-seleccion entirely on mobile — fede wants the
       sticky bar compact (totals + Continuar only). Paso 4 (with toggle
       class) keeps them in the .sidebar-resumen-detail expandable. */
    body.tenant-ecoparque .sidebar-resumen:not(.has-expand-toggle) > .column-sticky > h2,
    body.tenant-ecoparque .sidebar-resumen:not(.has-expand-toggle) .seleccion,
    body.tenant-ecoparque .sidebar-resumen:not(.has-expand-toggle) .sin-seleccion {
        display: none !important;
    }
    /* Tighten the sticky-bottom bar so it's predictably ~150px tall. The
       .ticketeraBody padding-bottom below MUST equal this height to avoid an
       empty grey band between the last card and the bar when scrolled to the
       bottom of the doc (fede's "huge blank space" complaint). */
    body.tenant-ecoparque .sidebar-resumen {
        padding: 8px 16px 14px !important;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom {
        padding-top: 0;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row:not(.row-total) {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #101E37;
        margin-bottom: 2px;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 700;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .btn-primary {
        margin-top: 0 !important;
    }
    /* Volver button — hidden on mobile per Figma (browser back / header acts
       as Volver). Desktop sidebar still shows it. */
    body.tenant-ecoparque .sidebar-resumen .btn-outline-primary:not(.ticketera-secondary-action) {
        display: none !important;
    }
    /* Bar is position:sticky now (in flow), so NO padding-bottom compensation —
       the footer renders naturally below the bar at end-of-doc. */
    body.tenant-ecoparque .ticketeraBody {
        padding-bottom: 0;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    body.tenant-ecoparque .ticketeraTop .box-info {
        flex-direction: column;
        text-align: center;
    }
    body.tenant-ecoparque .selector-vista > h1 {
        font-size: 18px;
    }
    body.tenant-ecoparque .precio-desde h4 {
        font-size: 22px;
    }
}

/* =============================================================================
   Mobile categories density — clients want as many ticket categories visible
   above the fold as possible. Some scroll is unavoidable (count × row height
   exceeds viewport), but we strip every gratuitous gap to maximize density.
   ============================================================================= */
@media (max-width: 768px) {
    /* Tighten the wrapping container — base sheet has generous vertical padding
       on .ticketeraBody / .ticketeraTop for desktop. */
    body.tenant-ecoparque .ticketeralayout .ticketeraBody > .cont-1170 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    body.tenant-ecoparque .selector-vista > h1 {
        font-size: 16px;
        margin-bottom: 8px;        /* was 20px */
        margin-top: 4px;
    }
    /* Hide the purchase-notice subtitle margin so the first ticket row lands
       higher on the screen. Keep the notice visible but compact. */
    body.tenant-ecoparque .purchase-notice {
        padding: 10px 14px;
        margin-bottom: 10px;
        font-size: 13px;
    }
    body.tenant-ecoparque .purchase-notice .material-symbols-rounded {
        font-size: 20px;
    }
    /* Ticket row density: row padding 16/20 → 10/14; row gap 12 → 6. */
    body.tenant-ecoparque .entradas-tipo .entrada {
        padding: 10px 14px;
        margin-bottom: 6px;
        border-radius: 8px;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle h4 {
        font-size: 15px;
        margin-bottom: 0;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
        font-size: 13px;
        line-height: 1.3;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle span {
        font-size: 13px;
    }
    /* Counter buttons slightly smaller on mobile so the row height shrinks. */
    body.tenant-ecoparque .contador button {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    /* Sticky bar at the bottom: tighten its padding so it occupies less
       viewport height, freeing more above the fold for category rows.
       The compensating padding-bottom on .ticketeraBody (set in the parent
       991px breakpoint at 200px) is also trimmed. */
    body.tenant-ecoparque .sidebar-resumen {
        padding: 8px 16px 10px;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total {
        font-size: 14px;
        margin-bottom: 6px;
    }
    body.tenant-ecoparque .sidebar-resumen .btn-primary {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    body.tenant-ecoparque .sidebar-resumen .btn-outline-primary {
        margin-top: 6px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* sticky bar lives in flow now (position: sticky), so no padding-bottom
       compensation is needed — leaving any here creates a visible empty
       band between the sticky bar and the footer when scrolled to end. */
    body.tenant-ecoparque .ticketeraBody {
        padding-bottom: 0;
    }
}

/* --- Cómo llegar + Mapa placeholder sections --- */
body.tenant-ecoparque .eco-como-llegar {
    background-color: #FFFFFF;
    padding: 72px 0;
}
body.tenant-ecoparque .eco-como-llegar h2,
body.tenant-ecoparque .eco-mapa h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-como-llegar p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--eco-muted);
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-mapa {
    background-color: var(--eco-surface-light);
    padding: 72px 0;
}

/* ── VisitaDetalle (Ecoparque) ───────────────────────────────────────────── */

body.tenant-ecoparque .eco-detalle-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

body.tenant-ecoparque .eco-visita-detalle {
    background: var(--eco-surface-light);
}

/* Breadcrumb */
body.tenant-ecoparque .eco-detalle-breadcrumb {
    padding: 16px 0 8px;
}
body.tenant-ecoparque .eco-detalle-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--eco-muted);
    text-decoration: none;
}
body.tenant-ecoparque .eco-detalle-breadcrumb a:hover {
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-detalle-breadcrumb .material-symbols-rounded {
    font-size: 18px;
}

/* Hero */
body.tenant-ecoparque .eco-detalle-hero {
    width: 100%;
    height: 340px;
    background-color: #c8d8b0;
    background-size: cover;
    background-position: center 60%;
    margin-bottom: 40px;
}

/* Two-column layout */
body.tenant-ecoparque .eco-detalle-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    padding-bottom: 48px;
}
body.tenant-ecoparque .eco-detalle-main {
    min-width: 0;
}
body.tenant-ecoparque .eco-detalle-descripcion {
    font-size: 16px;
    line-height: 1.7;
    color: var(--eco-muted);
    margin-bottom: 32px;
}

/* Más información */
body.tenant-ecoparque .eco-mas-info {
    margin-bottom: 40px;
}
body.tenant-ecoparque .eco-mas-info h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-info-panels .mud-expand-panel {
    border: 1px solid #e2e6ea;
    border-radius: 8px !important;
    margin-bottom: 8px;
    background: #fff;
}
body.tenant-ecoparque .eco-info-panels .mud-expand-panel-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
}
body.tenant-ecoparque .eco-panel-icon {
    font-size: 20px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-panel-chevron {
    font-size: 20px;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-panel-content {
    padding: 4px 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--eco-muted);
}
body.tenant-ecoparque .eco-panel-content p {
    margin-bottom: 4px;
}

/* Ubicación */
body.tenant-ecoparque .eco-ubicacion-section {
    margin-bottom: 40px;
}
body.tenant-ecoparque .eco-ubicacion-section h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-ubicacion-address,
body.tenant-ecoparque .eco-ubicacion-hours {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    color: var(--eco-muted);
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-ubicacion-address .material-symbols-rounded,
body.tenant-ecoparque .eco-ubicacion-hours .material-symbols-rounded {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-mapa iframe {
    width: 100%;
    border-radius: 8px;
    display: block;
    margin-top: 12px;
}

/* Sidebar */
body.tenant-ecoparque .eco-detalle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 80px;
}

/* CTA card */
body.tenant-ecoparque .eco-cta-card {
    background-color: var(--eco-footer-dark);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
}
body.tenant-ecoparque .eco-cta-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-cta-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 20px;
}
body.tenant-ecoparque .eco-cta-card .btn-primary {
    background-color: var(--eco-cta-blue);
    border-color: var(--eco-cta-blue);
    font-weight: 600;
    padding: 10px;
}

/* Sidebar mini-cards */
body.tenant-ecoparque .eco-visit-mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2e6ea;
    transition: box-shadow 0.15s;
}
body.tenant-ecoparque .eco-visit-mini-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.tenant-ecoparque .eco-visit-mini-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #c8d8b0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
body.tenant-ecoparque .eco-visit-mini-body {
    min-width: 0;
}
body.tenant-ecoparque .eco-visit-mini-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 2px;
}
body.tenant-ecoparque .eco-visit-mini-body small {
    font-size: 12px;
    color: var(--eco-muted);
}

/* Bottom info cards */
body.tenant-ecoparque .eco-detalle-info-cards {
    background: #fff;
    border-top: 1px solid #e2e6ea;
    padding: 32px 0 40px;
}
body.tenant-ecoparque .eco-info-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* V1 info-card base block removed 2026-05-21 — fully superseded by the V4
   base at line ~3227 and the V5 final-with-!important block at the file end.
   The Razor markup wraps content in .eco-info-card-body / .eco-info-card-icon-box,
   which the V4/V5 rules target — the old plain "strong" / "p" rules and the
   V1 icon-class targeting are no longer aligned with the DOM. */

/* Turno selector overlay */
body.tenant-ecoparque .eco-turno-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 500;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 60px;
}
body.tenant-ecoparque .eco-visita-detalle--blurred {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}
body.tenant-ecoparque .eco-turno-panel {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 900px;
}
body.tenant-ecoparque .eco-turno-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tenant-color-secondary);
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-turno-title .material-symbols-rounded {
    font-size: 22px;
    color: var(--eco-cta-blue);
}
body.tenant-ecoparque .eco-info-bar-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: #e8f8f7;
    color: #0D8A80;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 24px;
}
body.tenant-ecoparque .eco-info-bar-inline .material-symbols-rounded {
    font-size: 16px;
}
body.tenant-ecoparque .eco-volver-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: var(--eco-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
body.tenant-ecoparque .eco-volver-link:hover {
    color: var(--eco-cta-blue);
}

/* "Otras visitas" below overlay */
body.tenant-ecoparque .eco-turno-otras {
    width: 100%;
    max-width: 900px;
    margin-top: 32px;
    color: #fff;
}
body.tenant-ecoparque .eco-turno-otras h6 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-turno-otras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
body.tenant-ecoparque .eco-turno-otra-card {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}
body.tenant-ecoparque .eco-turno-otra-card:hover {
    background: rgba(255,255,255,0.2);
}
body.tenant-ecoparque .eco-turno-otra-img {
    height: 80px;
    background-color: rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
}
body.tenant-ecoparque .eco-turno-otra-body {
    padding: 10px 12px;
}
body.tenant-ecoparque .eco-turno-otra-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
body.tenant-ecoparque .eco-turno-otra-body p {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-detalle-layout {
        grid-template-columns: 1fr;
    }
    /* Client 2026-06-09 (round 2): on mobile the buy box (CTA card) must come
       AFTER the título + descripción + punto/duración — NOT hoisted above the
       fold. Follow DOM order (main → sidebar); the earlier order:-1 hoist is
       removed. */
    body.tenant-ecoparque .eco-detalle-sidebar {
        position: static;
        order: 1;
    }
    body.tenant-ecoparque .eco-detalle-main {
        order: 0;
    }
    /* Trim the hero margin-bottom on mobile so the sidebar lands higher. */
    body.tenant-ecoparque .eco-detalle-hero {
        margin-bottom: 16px;
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.tenant-ecoparque .eco-turno-otras-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px) {
    body.tenant-ecoparque .eco-detalle-hero {
        height: 200px;
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-turno-otras-grid {
        grid-template-columns: 1fr;
    }
    body.tenant-ecoparque .eco-turno-panel {
        padding: 20px 16px;
    }
}

/* ── Guest checkout datos comprador ──────────────────────────────────────── */
body.tenant-ecoparque .datos-comprador-vista {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    z-index: 5;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .datos-comprador-vista {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Footer: ecoparque overrides ──────────────────────────────────────────── */

/* Footer now uses the shared entradasba PublicSectorFooter incl. its GCBA
   socials + phones top band — keep it visible (was hidden when ecoparque had a
   custom footer). */

/* ── Header: yellow underline per Figma ───────────────────────────────────── */

body.tenant-ecoparque .HeaderSitePublic {
    border-bottom: 3px solid var(--tenant-color-primary);
}

/* ── EcoEventosCalendario (monthly grid for ticketera eventos) ────────────── */

body.tenant-ecoparque .calendar-grid-wrapper {
    margin-top: 1.5rem;
}

body.tenant-ecoparque .calendar-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

body.tenant-ecoparque .calendar-grid-month {
    font-weight: 700;
    font-size: 1rem;
    text-transform: none;
    color: #282213;
}

body.tenant-ecoparque .calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

body.tenant-ecoparque .calendar-grid-header span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    padding: 4px 0;
}

body.tenant-ecoparque .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding-bottom: 32px;
}

body.tenant-ecoparque .calendar-grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: default;
    transition: background 0.15s;
}

body.tenant-ecoparque .calendar-grid-cell.disponible {
    background: #A1BB2E;
    color: #fff;
    cursor: pointer;
}

body.tenant-ecoparque .calendar-grid-cell.disponible:hover {
    background: #8aa525;
}

body.tenant-ecoparque .calendar-grid-cell.seleccionado {
    background: #1455CE;
    color: #fff;
}

body.tenant-ecoparque .calendar-grid-cell.no-disponible {
    color: #ccc;
}

body.tenant-ecoparque .calendar-grid-cell.empty {
    visibility: hidden;
}

/* Calendar + time-slot side by side */
body.tenant-ecoparque .eco-calendar-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

/* No date selected: calendar centred, no empty white right half */
body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) {
    justify-content: center;
}
body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) .calendar-grid-wrapper {
    flex: 0 0 auto;
    max-width: 320px;
    min-width: 0;
}

/* Date selected: calendar fixed left, slots fill right */
body.tenant-ecoparque .eco-calendar-row.eco-date-selected .calendar-grid-wrapper {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 0;
}

body.tenant-ecoparque .eco-calendar-row .eco-horarios-dia {
    flex: 1;
    min-width: 200px;
    margin-top: 0;
}

/* Time-slot panel — transparent on dark page background */
body.tenant-ecoparque .eco-horarios-dia {
    background: transparent;
    padding: 0 8px;
}

body.tenant-ecoparque .eco-horarios-fecha-label {
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

body.tenant-ecoparque .eco-horarios-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.tenant-ecoparque .eco-horario-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 12px 0;
}

body.tenant-ecoparque .eco-horario-hora {
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Calendar legend */
body.tenant-ecoparque .calendar-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}

body.tenant-ecoparque .cal-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

body.tenant-ecoparque .cal-dot.disponible  { background: #A1BB2E; }
body.tenant-ecoparque .cal-dot.seleccionado { background: #1455CE; }
body.tenant-ecoparque .cal-dot.agotado     { background: #6c757d; }

/* Date + tabs on same row */
body.tenant-ecoparque .eco-horarios-top-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-horarios-top-row .eco-horarios-fecha-label {
    font-weight: 700;
    font-size: 15px;
    color: #FFFFFF;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Time-slot tabs */
body.tenant-ecoparque .eco-horarios-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-horarios-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
body.tenant-ecoparque .eco-horarios-tab.active {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* Calendar + time-slot: stack vertically on mobile */
@media (max-width: 767px) {
    body.tenant-ecoparque .eco-calendar-row {
        flex-direction: column;
        /* When stacked, justify-content controls the VERTICAL axis. To keep the
           calendar grid horizontally centred we need align-items on the cross
           axis. Without this the calendar card sits left-aligned and the whole
           column looks shifted to the left of the screen. */
        align-items: center;
    }
    body.tenant-ecoparque .eco-calendar-row.eco-date-selected .calendar-grid-wrapper {
        flex: unset;
        max-width: 100%;
        width: 100%;
    }
    body.tenant-ecoparque .eco-calendar-row .eco-horarios-dia {
        min-width: 0;
        padding: 0;
        width: 100%;
    }
}

/* 2-col info cards variant for detalle page */
body.tenant-ecoparque .eco-info-cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 575px) {
    body.tenant-ecoparque .eco-info-cards-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* === V2 additions === */


/* V1 info-card palette removed 2026-05-21. Modifier classes --teal / --blue /
   --dark were renamed to --green / --sky / --slate in Home.razor; --yellow's
   old #F5C400 was replaced by Figma's #FFD633. The current palette lives in
   the V4 block (search "V4 palette") with text/icon colors aligned to dark
   #101E37 across all four slots. */

/* --- Calendar selector page (EcoTicketeraSeleccion) --- */
body.tenant-ecoparque .eco-selector-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}
body.tenant-ecoparque .eco-selector-wrapper {
    background-color: #0F1F37;
    /* Fill the viewport below the header and vertically centre the calendar, so
       the navy band reaches the footer (no white gap) and there's no awkward
       empty strip below the calendar. */
    min-height: calc(100dvh - 72px);
    justify-content: center;
    position: relative;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
/* Figma 6283:25837 layers a desaturated flamingo photo over a navy base via
   mix-blend-mode: luminosity (the photo contributes shape, the base provides
   the hue). ::before holds the image; ::after lays a top-fading gradient so
   the header copy stays legible. Navy stays #0F1F37 to match the rest of the
   calendar UI rather than Figma's #002733. */
body.tenant-ecoparque .eco-selector-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tenant-asset-bg-flamencos) center/cover no-repeat;
    mix-blend-mode: luminosity;
    opacity: 1;
    pointer-events: none;
}
body.tenant-ecoparque .eco-selector-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,31,55,0.55) 0%, rgba(15,31,55,0) 47%);
    pointer-events: none;
}
body.tenant-ecoparque .eco-selector-wrapper > * { position: relative; z-index: 1; width: 100%; }
body.tenant-ecoparque .eco-selector-header {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    padding: 0 20px;
}
body.tenant-ecoparque .eco-selector-header p {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}
body.tenant-ecoparque .eco-selector-info-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border-left: 4px solid var(--eco-cta-blue);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--tenant-color-secondary);
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin-top: 12px;
}
body.tenant-ecoparque .eco-selector-info-bar .material-symbols-rounded {
    color: var(--eco-cta-blue);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
body.tenant-ecoparque .eco-selector-calendar-wrap {
    max-width: 900px;
    margin: 0 auto;
    /* Ensure the inline content (calendar card) is horizontally centered at
       every viewport, including mobile where the inner EcoEventosCalendario
       renders a flex column. Without this the white card sits left-aligned
       within the (centred) wrap. */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
body.tenant-ecoparque .eco-selector-volver {
    display: block;
    text-align: center;
    color: #aaa;
    font-size: 14px;
    margin-top: 16px;
    text-decoration: none;
}
body.tenant-ecoparque .eco-selector-volver:hover { color: #fff; text-decoration: underline; }
body.tenant-ecoparque .eco-selector-otras-visitas {
    padding: 40px 0;
    background: #fff;
}
body.tenant-ecoparque .eco-selector-otras-visitas h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Outer card is transparent — only the calendar grid gets a white card */
body.tenant-ecoparque .eco-selector-wrapper .selector-funciones-actividad {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    max-width: 720px;
    margin: 0 auto;
}
/* The eco-selector-header already provides the "Seleccioná una fecha" heading —
   hide the duplicate header-azul banner inside the calendar card */
body.tenant-ecoparque .eco-selector-wrapper .selector-header-azul {
    display: none;
}

/* --- Checkout date bar refinement (paso 2/3/4) --- */
body.tenant-ecoparque .ticketeraTop .txt p:not(.fecha-funcion) { display: none; }
body.tenant-ecoparque .ticketeraTop img.img-evento,
body.tenant-ecoparque .ticketeraTop .img-evento { display: none !important; }
/* Show short date format "Viernes 6 de abril", hide full date+time */
body.tenant-ecoparque .ticketeraTop .txt > span:not(.fecha-funcion-date) { display: none !important; }
body.tenant-ecoparque .ticketeraTop .txt .fecha-funcion-date { display: inline; }

/* --- Paso 2 CABA resident banner (extra selector) ---
   Figma 6285:27000 uses a light sky-blue bg with dark navy text + icon (NOT
   white-on-teal). Sky #33D1FF matches the Cómo llegar info card so the
   ecoparque palette stays consistent across surfaces. */
body.tenant-ecoparque .aviso-residente-caba,
body.tenant-ecoparque .purchase-notice {
    background: #33D1FF !important;
    color: #101E37 !important;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}
body.tenant-ecoparque .aviso-residente-caba *,
body.tenant-ecoparque .purchase-notice * {
    color: #101E37 !important;
}

/* --- Confirmation page --- */
body.tenant-ecoparque .compra-exitosa-container {
    text-align: center;
    max-width: 600px;
    margin: 60px auto;
    padding: 0 20px;
}
body.tenant-ecoparque .compra-exitosa-check {
    color: #28a745;
    font-size: 64px;
    margin-bottom: 20px;
}

/* =============================================================================
   Figma "Propuesta Ajustes-V4" Home — final visual pass (2026-05-20)
   Source frames: Desktop 6264:22954, Mobile 6264:22600, Mobile-nav 6264:22757
   This block is appended to the end of the file so it cleanly overrides the
   earlier home rules without restructuring them. If/when we promote V4 to the
   canonical layout, fold this back into the main hero/visitas/info-cards/social
   blocks and delete this section.
   ============================================================================= */

/* ── Hero: mobile — headline weight 900 / 56px / -1px tracking, light text,
   content positioned left-16 with the photo top, CTA below with 16px gap ─── */
@media (max-width: 768px) {
    body.tenant-ecoparque .eco-home-hero {
        min-height: auto;
        aspect-ratio: 428 / 846;
        background-position: center 30%;
        align-items: flex-start;
    }
    body.tenant-ecoparque .eco-hero-overlay {
        align-items: flex-start;
        padding: 166px 16px 0;
        background: linear-gradient(68.8deg, rgba(8,15,28,0.56) 6.28%, rgba(8,15,28,0) 92.24%),
                    linear-gradient(rgba(0,0,0,0.24), rgba(0,0,0,0.24));
    }
    body.tenant-ecoparque .eco-hero-content {
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    /* Figma vertical order on mobile: headline → CTA → dots.
       Markup order is h1 → dots → CTA, so push dots last via flex order. */
    body.tenant-ecoparque .eco-hero-content h1       { order: 0; }
    body.tenant-ecoparque .eco-hero-content .eco-hero-cta  { order: 1; }
    body.tenant-ecoparque .eco-hero-content .eco-hero-dots { order: 2; margin: 24px 0 0 0; }
    body.tenant-ecoparque .eco-hero-content h1 {
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        font-size: 56px;
        line-height: 58px;
        letter-spacing: -1px;
        color: #F3F6F9;
        margin: 0;
        text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    body.tenant-ecoparque .eco-hero-cta {
        align-self: flex-start;
        background-color: #336ACC;
        border-color: #336ACC;
        color: #FFFFFF;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        height: 48px;
        padding: 12px 20px;
        border-radius: 8px;
    }
    body.tenant-ecoparque .eco-hero-dots {
        gap: 8px;
        margin-top: 40px;
        padding: 16px 0;
    }
    body.tenant-ecoparque .eco-dot {
        width: 10px;
        height: 10px;
    }
}

/* Compound pill CTA (yellow ticket circle + blue pill) is DESKTOP-ONLY per Figma V4.
   Override the legacy rule that showed it on mobile. */
body.tenant-ecoparque .eco-hero-pill.eco-hero-pill--desktop-only {
    display: inline-flex;
}
@media (max-width: 768px) {
    body.tenant-ecoparque .eco-hero-pill,
    body.tenant-ecoparque .eco-hero-pill.eco-hero-pill--desktop-only {
        display: none !important;
    }
}

/* ── Visitas Especiales: mobile carousel (single horizontal strip, scrolls
   off-screen edge with momentum on iOS). The desktop rule already does this
   above; on mobile the existing track was wrapping due to flex defaults — pin
   nowrap + add scroll-snap so each tile snaps into view as the user scrolls. */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-animal-track-wrapper {
        padding-right: 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    body.tenant-ecoparque .eco-animal-track {
        flex-wrap: nowrap;
        gap: 0;
    }
    body.tenant-ecoparque .eco-animal-slide {
        flex: 0 0 280px;
        height: 180px;
        scroll-snap-align: start;
    }
}

/* ── Actividades cards: card image 304px, title 24px #336ACC, price+duration
   rows with `paid` and `schedule` icons in #101e37 at 20px, card-to-card gap
   bumped, CTA matches the hero CTA spec. ───────────────────────────────────── */
body.tenant-ecoparque .eco-visitas-especiales {
    background-color: #E6EBF0;
    /* Float a desaturated version of the floral PNG behind the cards via a
       pseudo-element so we can dial opacity independently from the bg color.
       Removes the green tint fede flagged — Figma V4 shows leaves at ~48% over
       a neutral grey-blue. */
    background-image: none;
    position: relative;
    overflow: hidden;
}
body.tenant-ecoparque .eco-visitas-especiales::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 222px;
    background: var(--tenant-asset-floral) bottom center / 100% auto no-repeat;
    opacity: 0.32;
    filter: grayscale(0.85) brightness(0.95);
    pointer-events: none;
    z-index: 0;
}
body.tenant-ecoparque .eco-visitas-especiales > .cont-1170 {
    position: relative;
    z-index: 1;
}
body.tenant-ecoparque .eco-visita-card {
    border-radius: 8px;
    border: 1px solid #E6EBF0;
    box-shadow: none;
    padding: 16px;
}
body.tenant-ecoparque .eco-visita-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body.tenant-ecoparque .eco-visita-img {
    border-radius: 8px;
    height: 240px;
}
body.tenant-ecoparque .eco-visita-img::after { display: none; }
body.tenant-ecoparque .eco-visita-body {
    padding: 16px 0 0 0;
}
body.tenant-ecoparque .eco-visita-body h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #336ACC;
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-visita-body > p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #101E37;
    margin-bottom: 16px;
}
body.tenant-ecoparque .eco-visita-meta {
    gap: 6px;
    margin-bottom: 16px;
}
body.tenant-ecoparque .eco-visita-price,
body.tenant-ecoparque .eco-visita-duration {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #101E37;
    gap: 8px;
}
body.tenant-ecoparque .eco-visita-price strong,
body.tenant-ecoparque .eco-visita-duration strong {
    color: #101E37;
    font-weight: 700;
}
body.tenant-ecoparque .eco-visita-price .material-symbols-rounded,
body.tenant-ecoparque .eco-visita-duration .material-symbols-rounded {
    font-size: 20px;
    color: #101E37;
}
/* Visitas Exclusivas "Cupo limitado" pill — same look as the price/duration meta. */
body.tenant-ecoparque .eco-visita-cupo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #101E37;
}
body.tenant-ecoparque .eco-visita-cupo .material-symbols-rounded {
    font-size: 20px;
    color: #336ACC;
}
body.tenant-ecoparque .eco-visita-btn {
    background-color: #336ACC;
    border-color: #336ACC;
    color: #FFFFFF;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    height: 48px;
    padding: 12px 20px;
    border-radius: 8px;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-visitas-grid {
        gap: 32px;
    }
    body.tenant-ecoparque .eco-visita-img {
        height: 200px;
    }
}

/* ── 4 info cards (V4): horizontal flex row on desktop, 1-col stack on mobile;
   icon sits in an 80×80 box of the SAME color as the card; all text is dark;
   icon glyph + bg color set in Razor via the per-slot modifier class. ─────── */
body.tenant-ecoparque .eco-home-info-cards {
    padding: 80px 0;
}
body.tenant-ecoparque .eco-info-cards-grid {
    gap: 32px;
}
body.tenant-ecoparque .eco-info-card {
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: none;
    box-shadow: none;
}
body.tenant-ecoparque .eco-info-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
    /* Figma V4: icon sits directly on the card colour — no boxed background. */
    flex: 0 0 auto;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    padding: 0 8px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
    font-size: 56px;
    color: #101E37;
    margin: 0;
    /* Family is set in markup: outlined for Qué es + Cómo llegar (outline glyphs),
       rounded (loaded FILL=1) for Ubicación + Preguntas (solid glyphs). */
}
body.tenant-ecoparque .eco-info-card .eco-info-card-body {
    flex: 1;
    min-width: 0;
}
body.tenant-ecoparque .eco-info-card-body strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #101E37;
    margin-bottom: 4px;
}
body.tenant-ecoparque .eco-info-card-body p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #101E37;
    margin: 0;
}
/* V4 palette — bg color per slot, ALL text dark #101E37 */
body.tenant-ecoparque .eco-info-card--yellow { background: #FFD633; }
body.tenant-ecoparque .eco-info-card--green  { background: #5ECA85; }
body.tenant-ecoparque .eco-info-card--sky    { background: #33D1FF; }
body.tenant-ecoparque .eco-info-card--slate  { background: #9EAAB8; }
body.tenant-ecoparque .eco-info-card--yellow strong,
body.tenant-ecoparque .eco-info-card--yellow p,
body.tenant-ecoparque .eco-info-card--green strong,
body.tenant-ecoparque .eco-info-card--green p,
body.tenant-ecoparque .eco-info-card--sky strong,
body.tenant-ecoparque .eco-info-card--sky p,
body.tenant-ecoparque .eco-info-card--slate strong,
body.tenant-ecoparque .eco-info-card--slate p { color: #101E37; }
body.tenant-ecoparque .eco-info-card--yellow .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--green  .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--sky    .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--slate  .eco-info-card-icon-box .material-symbols-rounded {
    color: #101E37;
}

/* ── Seguinos en: 3 equal-width white buttons spanning the row, dark icons. */
body.tenant-ecoparque .eco-social-section {
    background: #F3F6F9;
    border-top: 1px solid #E6EBF0;
    padding: 48px 0;
}
body.tenant-ecoparque .eco-social-section .cont-1170 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
body.tenant-ecoparque .eco-social-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #101E37;
    white-space: normal;
}
body.tenant-ecoparque .eco-social-links {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}
body.tenant-ecoparque .eco-social-link {
    flex: 1 1 0;
    width: auto;
    height: auto;
    padding: 12px 24px;
    background: #FFFFFF;
    border: 2px solid #E6EBF0;
    border-radius: 8px;
    color: #101E37;
    font-size: 24px;
}
body.tenant-ecoparque .eco-social-link:hover {
    border-color: #336ACC;
    color: #336ACC;
}

/* ── V4 second-pass corrections (2026-05-20) ────────────────────────────────
   - Info cards: extra inner padding + slightly tighter gap (Figma cards are
     airier than the first pass)
   - Visitas Especiales: drop the per-tile gradient + label CSS (labels were
     removed from the markup); on mobile switch to a 2×3 grid per Figma V4.
   - Seguinos en (desktop): label sits INLINE to the left of compact buttons,
     not stacked above full-width buttons. Mobile keeps the stacked layout.
   ─────────────────────────────────────────────────────────────────────────── */

body.tenant-ecoparque .eco-info-card {
    padding: 28px 32px;
    min-height: 184px;
}
@media (min-width: 1200px) {
    /* Desktop cards sit four-across — they don't need the extra mobile height. */
    body.tenant-ecoparque .eco-info-card {
        padding: 20px;
        min-height: 116px;
    }
}
/* Bump the icon glyph on mobile where it dominates the card visually. */
@media (max-width: 1199px) {
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 72px;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
        padding-right: 16px;
    }
}

/* Tiles no longer have labels — drop the bottom-darkening gradient that
   existed to make labels legible. */
body.tenant-ecoparque .eco-animal-slide::after { display: none; }
body.tenant-ecoparque .eco-animal-slide-label  { display: none; }

/* Mobile Visitas: 3 columns × 2 rows of square tiles (Figma V4 layout).
   Tiles butt against each other — no gap, no white seams. */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-animal-track-wrapper {
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 0 16px;
    }
    body.tenant-ecoparque .eco-animal-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    body.tenant-ecoparque .eco-animal-slide {
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 0;
        scroll-snap-align: none;
    }
}

/* ── Calendar screen (Paso 1: date + optional timeslot picker) V4 ─────────
   Figma references: 6280:24670 (desktop+timeslots), 6280:24940 (mobile+timeslots),
   6283:25837 (desktop no-timeslots — entrada general), 6283:26107 (mobile no-timeslots).
   Mobile width should be near-full-screen, brand-blue=#336ACC throughout,
   disponible-green=#5ECA85, info bar light-blue with bold "Días y horarios:" prefix.
   ───────────────────────────────────────────────────────────────────────── */

/* Info bar — Figma 6280:24683 exact values:
     alerta/bg-info: #e5f9ff
     alert/info/border-info: #0086ad
     text/text-info: #0086ad (filled info glyph + bold "Días y horarios:" label)
     text/body-primary: #101e37 (body sentence)
   No icon chip — the filled info glyph sits directly on the bg in #0086ad. */
body.tenant-ecoparque .eco-selector-info-bar {
    align-items: center;
    background: #E5F9FF;
    border: 1px solid #0086AD;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: none;
    max-width: 720px;
    margin: 16px auto 0;
    color: #101E37;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    gap: 12px;
}
body.tenant-ecoparque .eco-selector-info-bar .eco-selector-info-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .eco-selector-info-bar .eco-selector-info-icon .material-symbols-rounded {
    color: #0086AD;
    font-size: 24px;
    margin: 0;
    /* Force the FILL=1 axis even though the font import already loads it —
       belt-and-suspenders since some browsers regress on variation settings. */
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
body.tenant-ecoparque .eco-selector-info-bar .eco-selector-info-text {
    color: #101E37;
}
body.tenant-ecoparque .eco-selector-info-bar .eco-selector-info-text strong {
    font-weight: 700;
    color: #0086AD;
}

/* Legend — small dots with brand-blue selected */
body.tenant-ecoparque .cal-dot.seleccionado { background: #336ACC; }
body.tenant-ecoparque .cal-dot.disponible   { background: #5ECA85; }

/* Calendar card */
body.tenant-ecoparque .calendar-grid-wrapper {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.tenant-ecoparque .eco-calendar-date-header {
    background: #336ACC;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
body.tenant-ecoparque .eco-calendar-date-year {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 400;
}
body.tenant-ecoparque .eco-calendar-date-day {
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
}
/* Empty-state divider (no date picked yet) — replaces the literal "—" */
body.tenant-ecoparque .eco-calendar-date-header.is-empty::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background: rgba(255,255,255,0.55);
    border-radius: 2px;
    margin-top: 4px;
}

/* Month nav — blue chevrons */
body.tenant-ecoparque .calendar-grid-nav {
    padding: 16px 16px 8px;
}
body.tenant-ecoparque .calendar-grid-nav .nav-btn-gris {
    background: transparent;
    border: none;
    color: #336ACC;
    font-size: 22px;
    padding: 4px 8px;
    cursor: pointer;
}
body.tenant-ecoparque .calendar-grid-nav .nav-btn-gris:disabled {
    color: #C9D2DC;
    cursor: not-allowed;
}
body.tenant-ecoparque .calendar-grid-month {
    color: #101E37;
    font-weight: 700;
    font-size: 16px;
}

/* Day-of-week row */
body.tenant-ecoparque .calendar-grid-header {
    padding: 0 16px 8px;
    color: #6B7C8F;
    font-size: 13px;
    font-weight: 500;
}

/* Date grid */
body.tenant-ecoparque .calendar-grid-body {
    padding: 0 12px 24px;
    gap: 4px;
}
body.tenant-ecoparque .calendar-grid-cell {
    font-size: 15px;
    font-weight: 600;
    color: #101E37;
}
body.tenant-ecoparque .calendar-grid-cell.disponible {
    background-color: #5ECA85;
    color: #FFFFFF;
}
body.tenant-ecoparque .calendar-grid-cell.disponible:hover {
    background-color: #4FB575;
}
body.tenant-ecoparque .calendar-grid-cell.seleccionado {
    background-color: #336ACC;
    color: #FFFFFF;
}
body.tenant-ecoparque .calendar-grid-cell.no-disponible {
    color: #C9D2DC;
}

/* Calendar wrapper widths */
body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) .calendar-grid-wrapper {
    flex: 0 0 auto;
    max-width: 420px;
    width: 100%;
}
body.tenant-ecoparque .eco-calendar-row.eco-date-selected .calendar-grid-wrapper {
    flex: 0 0 380px;
    max-width: 380px;
}

/* Mobile: calendar takes full available width minus the screen padding */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-selector-wrapper {
        padding: 24px 0;
    }
    body.tenant-ecoparque .eco-selector-calendar-wrap {
        padding: 0 16px;
    }
    body.tenant-ecoparque .eco-calendar-row:not(.eco-date-selected) .calendar-grid-wrapper,
    body.tenant-ecoparque .eco-calendar-row.eco-date-selected .calendar-grid-wrapper {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    body.tenant-ecoparque .eco-selector-info-bar {
        margin: 16px 16px 0;
    }
    body.tenant-ecoparque .calendar-grid-body {
        padding: 0 8px 20px;
    }
}

/* Volver — Figma uses white with no underline (underline on hover only) */
body.tenant-ecoparque .eco-selector-volver {
    color: #FFFFFF;
    font-size: 16px;
    margin-top: 24px;
}

/* Desktop Seguinos: label inline-left of a row of compact buttons.
   Mobile keeps the stacked column layout already set higher in the file. */
@media (min-width: 769px) {
    body.tenant-ecoparque .eco-social-section .cont-1170 {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }
    body.tenant-ecoparque .eco-social-title {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        flex: 0 0 auto;
    }
    body.tenant-ecoparque .eco-social-links {
        flex: 0 0 auto;
        gap: 12px;
    }
    body.tenant-ecoparque .eco-social-link {
        flex: 0 0 auto;
        width: 64px;
        padding: 10px 0;
        font-size: 20px;
    }
}

/* ── V4 third-pass corrections (2026-05-20) ──────────────────────────────
   - Visitas Especiales (animal grid): white bg already, but tighten the top
     space and add air at the bottom so it doesn't slam into Actividades.
   - 4 colored info cards: icons too dominant, cards too tall. Shrink the
     icon glyph, drop card min-height, narrow the inter-card gap so each
     card occupies more of the row width.
   ──────────────────────────────────────────────────────────────────────── */

body.tenant-ecoparque .eco-animal-gallery {
    padding: 32px 0 72px;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-animal-gallery {
        padding: 24px 0 56px;
    }
}

/* Info cards — smaller icons, shorter cards, tighter row gap */
body.tenant-ecoparque .eco-info-cards-grid {
    gap: 20px;
}
body.tenant-ecoparque .eco-info-card {
    padding: 20px;
    min-height: 0;
    align-items: center;
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
    padding-right: 12px;
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
    font-size: 40px;
}

/* Mobile: card is wider end-to-end with a smaller-but-still-visible icon */
@media (max-width: 1199px) {
    body.tenant-ecoparque .eco-info-card {
        padding: 18px 20px;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 48px;
    }
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-info-cards-grid {
        gap: 16px;
    }
}

/* ── Hero carousel — desktop only ──────────────────────────────────────────
   Mobile still renders a single background image via the legacy rules at
   line 776 (background-image set inline OR via the first slide). Desktop
   layers 3 absolute slides and crossfades between them when a dot is clicked.
   Hero gets taller (~720px) and the headline/CTA sit higher with more air
   between them, per Figma "Primer vistazo (primer scroll)".
   ──────────────────────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
body.tenant-ecoparque .eco-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 55%;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
}
body.tenant-ecoparque .eco-hero-slide.is-active {
    opacity: 1;
}
/* Slide 2: pull focal lower to show the Mara + lake. */
body.tenant-ecoparque .eco-hero-slide.eco-hero-slide--1 {
    background-position: center 70%;
}

@media (min-width: 992px) {
    body.tenant-ecoparque .eco-home-hero {
        min-height: 650px;
        align-items: stretch;
    }
    body.tenant-ecoparque .eco-hero-overlay {
        /* Title + main CTA sit high in the hero; the compound pill CTA stays
           anchored at the bottom, so the two are clearly separated. */
        align-items: flex-start;
        padding: 88px 0 0;
        background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
    }
    body.tenant-ecoparque .eco-hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    body.tenant-ecoparque .eco-hero-content h1 {
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 56px;
        line-height: 1.08;
        letter-spacing: -1px;
        color: #FFFFFF;
        margin: 0;
    }
    body.tenant-ecoparque .eco-hero-cta {
        height: 48px;
        padding: 12px 28px;
        font-weight: 700;
        font-size: 18px;
        border-radius: 8px;
        margin: 0;
    }
    body.tenant-ecoparque .eco-hero-dots {
        margin: 0;
        gap: 10px;
    }
    body.tenant-ecoparque .eco-dot {
        width: 10px;
        height: 10px;
        cursor: pointer;
    }
}

/* On mobile, only the first slide shows (no overlap stacking) — collapse the
   carousel to a single still by hiding non-active slides. */
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-hero-slide:not(.is-active) {
        display: none;
    }
    body.tenant-ecoparque .eco-hero-slide.is-active {
        position: absolute;
        inset: 0;
    }
}

/* ── V4 fourth-pass corrections (2026-05-21) ──────────────────────────────
   Desktop-only tweaks per fede's review of the previous build:
   - Header logo: shrink + breathing room above/below.
   - Info cards: icon INLINE with title on the top row; body wraps full-width
     below. Restores a "wide and short" card shape instead of tall+narrow.
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
    /* Logo size is set in the base block (max-height 44px); the .header-top
       padding override here is a no-op because .header-top is display: contents.
       Keep this as a marker for where to add desktop-only header tweaks if
       needed later, but rely on .HeaderSitePublic .cont-1470 (line 65) for
       actual vertical padding so HeaderTicketera can mirror it 1:1. */
    body.tenant-ecoparque .HeaderSitePublic .header-top > a img {
        /* EP-55: explicit height for the dimensionless stacked SVG (see base rule). */
        height: 44px;
        width: auto;
    }

    /* Info cards desktop: icon LEFT, title+body STACKED on the right (Figma V4
       6264:22954 layout). Bigger inner padding + narrower text column means
       the title naturally wraps to 2 lines for "Qué es el Ecoparque" and
       "Preguntas frecuentes", which is what Figma shows. */
    body.tenant-ecoparque .eco-info-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 28px 28px;
        min-height: 0;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
        flex: 0 0 auto;
        padding: 0;
        align-self: center;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 40px;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body {
        display: block;
        flex: 1;
        min-width: 0;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body strong {
        display: block;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.2;
        margin: 0 0 8px 0;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body p {
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        line-height: 1.5;
        margin: 0;
    }
}

/* ── V5 pass (2026-05-21) — match Figma proportions on the home ──────────
   - Compound hero pill: yellow ticket icon grows taller and overflows ABOVE
     the dark backplate so it "sits on top" instead of being centered inside.
     Inner blue CTA gets the same 8px-radius/18px-font/12-28-padding spec as
     the main hero CTA so the two pill buttons read identically.
   - Section titles: lighter weight (600) + larger sizes + tighter tracking
     so "Visitas Especiales", "Actividades" etc. read more airy.
   - 4 info cards: exact Figma 360×148 aspect ratio + 32px gap + 80px section
     padding. Breaks out of .cont-1170 with its own max-width 1664 container.
   ───────────────────────────────────────────────────────────────────────── */

/* Compound hero pill — desktop only (still hidden on mobile via the earlier
   eco-hero-pill--desktop-only rules). */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-hero-pill {
        overflow: visible;
        padding: 6px 18px 6px 0;
        bottom: -44px;
    }
    body.tenant-ecoparque .eco-hero-pill-icon {
        margin-top: -24px;
        margin-bottom: -24px;
    }
    body.tenant-ecoparque .eco-hero-pill-icon svg {
        width: 88px;
        height: 88px;
    }
    /* Match the main hero CTA spec so both blue buttons read as one design. */
    body.tenant-ecoparque .eco-hero-pill-cta {
        padding: 12px 28px;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        border-radius: 8px;
        height: 48px;
    }
}

/* Add breathing room between hero (where the pill sits) and the Visitas section. */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-animal-gallery {
        padding-top: 72px;
    }
}

/* 4 info cards — exact Figma dimensions: 360×148, gap 32, section pad 80px,
   1664 max-width with 128px page gutter (responsive: collapses on narrow). */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-home-info-cards {
        padding: 80px 0;
    }
    body.tenant-ecoparque .eco-home-info-cards > .cont-1170 {
        max-width: 1664px;
        padding-left: clamp(32px, 8vw, 128px);
        padding-right: clamp(32px, 8vw, 128px);
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        gap: 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    body.tenant-ecoparque .eco-info-card {
        aspect-ratio: 360 / 148;
        padding: 24px;
        align-items: center;
        gap: 16px;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 32px;
    }
}

/* ── Whole-home width unification (desktop only) ──────────────────────────
   The 4 info cards row uses a 1664 max-width with clamp(32px, 8vw, 128px)
   side gutter. Apply the same envelope to every other home section so the
   page reads as one coherent column rather than wide-content / narrow-content
   alternating. .cont-1170 inside those sections is overridden in-place; the
   underlying .cont-1170 utility is left untouched (still 1170 elsewhere — the
   ticketera flow, checkout, error pages still use the narrower container). */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-home-hero .cont-1170,
    body.tenant-ecoparque .eco-animal-gallery .eco-animal-gallery-header,
    body.tenant-ecoparque .eco-animal-gallery .eco-animal-track-wrapper,
    body.tenant-ecoparque .eco-visitas-especiales .cont-1170,
    body.tenant-ecoparque .eco-social-section .cont-1170,
    body.tenant-ecoparque .eco-footer .cont-1170 {
        max-width: 1664px;
        padding-left: clamp(32px, 8vw, 128px);
        padding-right: clamp(32px, 8vw, 128px);
    }
    /* The compound hero pill is positioned absolutely from the left; recompute
       its anchor against the new envelope so it lines up with the new gutter. */
    body.tenant-ecoparque .eco-hero-pill {
        left: max(clamp(32px, 8vw, 128px), calc((100% - 1664px) / 2 + clamp(32px, 8vw, 128px)));
    }
}

/* X social icon SVG — match the eco-social-link visual treatment. */
body.tenant-ecoparque .eco-social-link svg {
    display: block;
}
body.tenant-ecoparque .eco-social-link:hover svg {
    color: #336ACC;
}

/* ── V6 final pass (2026-05-22) ──────────────────────────────────────────
   Audit pass against Figma 6264:22954 (desktop) + 6264:22600 (mobile).
   Each block here replaces conflicting values in V1-V5 above via source
   order. Scoped to ecoparque only — other tenants unaffected.
   ──────────────────────────────────────────────────────────────────── */

/* Hero h1 desktop — Nunito Black 900, 64/66, no letter-spacing (Figma
   uses the 'Black' weight, not the 'ExtraBold' 800 the earlier pass used).
   CTA padding tightens to 12 20. Mobile already matches (max-width:768). */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-hero-content h1 {
        font-weight: 900;
        font-size: 64px;
        line-height: 66px;
        letter-spacing: 0;
    }
    body.tenant-ecoparque .eco-hero-cta {
        padding: 12px 20px;
    }
}

/* Compound hero pill — solid #101E37 plate at 16px radius, 270px wide;
   yellow 104×104 icon overlaps the plate's left edge. Inner button 40h
   with 8/16 padding + 8 radius. Pill itself is a transparent flex shell. */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-hero-pill {
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        gap: 0;
        align-items: center;
        overflow: visible;
    }
    body.tenant-ecoparque .eco-hero-pill-icon {
        width: 104px;
        height: 104px;
        margin: 0 -52px 0 0;
        position: relative;
        z-index: 2;
    }
    body.tenant-ecoparque .eco-hero-pill-icon svg {
        width: 104px;
        height: 104px;
    }
    body.tenant-ecoparque .eco-hero-pill-plate {
        display: inline-flex;
        align-items: center;
        background: #101E37;
        border-radius: 16px;
        width: 270px;
        padding: 16px 24px 16px 72px;
    }
    body.tenant-ecoparque .eco-hero-pill-cta {
        height: 40px;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        width: 100%;
    }
}

/* Animal tiles desktop — Figma 208×208 (was 200×200). Mobile stays as
   3-col grid (already matches Figma's stacked grid spirit closely enough). */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-animal-slide {
        flex: 0 0 208px;
        height: 208px;
    }
}

/* Actividades — lead paragraph (Open Sans 18/28 desktop, 16/24 mobile,
   #101E37 not muted grey), section padding 48 0 64, card padding 24,
   card image 304, card h3 28/36. */
body.tenant-ecoparque .eco-section-lead {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #101E37;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-section-lead {
        font-size: 16px;
        line-height: 24px;
    }
}
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-visitas-especiales {
        padding: 48px 0 64px;
    }
}
body.tenant-ecoparque .eco-visita-card {
    padding: 24px;
}
body.tenant-ecoparque .eco-visita-img {
    height: 304px;
}
/* Feedback (2026-06-12): the visita/atracción card photo goes edge-to-edge —
   no lateral (or top) margins. The card keeps its 24px padding for the text
   body; pull the photo out to the card edges so only the copy stays inset. */
body.tenant-ecoparque .eco-visita-card .eco-visita-img {
    margin: -24px -24px 0;
    border-radius: 0;
}
body.tenant-ecoparque .eco-visita-body h3 {
    font-size: 28px;
    line-height: 36px;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-visita-img {
        height: 304px;
    }
    body.tenant-ecoparque .eco-visitas-grid {
        gap: 56px;
    }
}

/* 4 info cards — RESTORES the 80×80 icon-box that V4-V5 had collapsed
   to a bare glyph. Box bg stays transparent (same color as card, so
   visually no border — the 80×80 is pure layout). Sets display: flex on
   the BASE so the mobile cards actually lay out horizontally (the prior
   `display: flex` rule was wrapped in @media min-992, leaving mobile as
   inline-block soup). Body p back to 16/24, grid gap 32. */
body.tenant-ecoparque .eco-info-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    min-height: 0;
    aspect-ratio: auto;
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
    font-size: 56px;
    color: #101E37;
    line-height: 1;
}
body.tenant-ecoparque .eco-info-card-body strong {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 4px;
    color: #101E37;
}
body.tenant-ecoparque .eco-info-card-body p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #101E37;
    margin: 0;
}
body.tenant-ecoparque .eco-info-cards-grid {
    gap: 32px;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-info-cards-grid {
        gap: 32px;
    }
}
/* Card 3 "Cómo llegar" alone uses asymmetric 16/24 padding in Figma. */
body.tenant-ecoparque .eco-info-card--sky {
    padding: 16px 24px;
}

/* Social section — desktop "Seguinos en" should read 28/36 (not 18); buttons
   are full 120px wide with 12/24 padding and 24px icons. */
@media (min-width: 769px) {
    body.tenant-ecoparque .eco-social-section .cont-1170 {
        gap: 40px;
    }
    body.tenant-ecoparque .eco-social-title {
        font-size: 28px;
        font-weight: 400;
        line-height: 36px;
    }
    body.tenant-ecoparque .eco-social-links {
        gap: 32px;
    }
    body.tenant-ecoparque .eco-social-link {
        width: 120px;
        padding: 12px 24px;
        font-size: 24px;
    }
}

/* ── Paso 2 ticket-selection final spec (2026-05-21 V2) ─────────────────
   Per Figma 6285:27000 (desktop) + 6285:27159 (mobile):
   - LEFT panel (.selector-vista): hero photo bg with dark overlay; CABA
     notice at the top with padding/margin; title hidden; ticket cards
     directly below for density.
   - +/- buttons: white icons. Minus button disabled (greyed out) when qty=0.
   - Desktop column split ~60/40 between selector-vista and sidebar-resumen.
   - Mobile: title hidden, sticky-bottom bar (already done earlier).
   ─────────────────────────────────────────────────────────────────────── */

/* Desktop column split — Figma 6285:27000 fede mark-up:
   Component A (left): ~60% width. Cyan banner + ticket cards with greyed-out
       hero image background. Cards float directly on the photo.
   Component B (right): ~40% width. White panel SPANNING the FULL 40% (not a
       narrow card centered with photo bleeding around it). Summary inside.
   To prevent the photo bg from showing under the right col, give the
   .sidebar-resumen itself a white bg covering the whole 40%, and contain the
   ticketeraBody's photo bg behind component A only. */
/* ── Sticky-footer pattern (all viewports) ──────────────────────────────
   Make <main>.TicketeraMainPage a flex column with min-height: 100vh so
   the footer sits at the bottom of the viewport when content is shorter
   than the screen, and at the natural end of the document when content
   is taller. .ticketeralayout (above the footer) gets flex:1 so it grows
   to fill the leftover vertical space — preventing the 'white strip
   between content and footer' fede flagged on guest checkout desktop. */
body.tenant-ecoparque main {
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
}
body.tenant-ecoparque main .TicketeraMainPage {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    flex: 1;
}
body.tenant-ecoparque main .TicketeraMainPage > .ticketeralayout {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    /* Every rule in this @media block is SCOPED to paso 2/4/5 via
       :has(.selector-vista) (paso 2 ticket selection, paso 4 datos
       comprador) and :has(.pago-vista) (paso 5 pago). fede wants all
       three pages to share the same 60/40 envelope + mara left bg +
       Resumen summary card on the right. */
    body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraBody,
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraBody {
        /* No photo on the body — the mara photo lives ONLY on the left block
           (.selector-vista/.pago-vista) below, full-bleed within that 60% block.
           The right block (.sidebar-resumen) is solid white. */
        background: none !important;
        padding: 0 !important;
        /* fill remaining vertical space inside .ticketeralayout (which is
           flex:1 in the sticky-footer rules below) so the LEFT column
           bg/content reaches the footer — fede 'dead white space between
           component and footer'. flex column so the inner .cont-1170 can
           expand vertically too. */
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraBody > .cont-1170,
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraBody > .cont-1170 {
        /* Full-width 60/40 envelope: the LEFT block bleeds the photo from the
           screen edge, the RIGHT block is white. The CONTENT inside each block
           is inset to align with the header logo via padding-left below — NOT by
           centering the whole row (that would pull the photo off the screen edge). */
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0;
        align-items: stretch !important;
        /* fill ticketeraBody vertically — without this the .cont-1170 only
           grows to content height and .selector-vista + .sidebar-resumen
           (which use align-items: stretch on the row layout) stop short of
           the footer. */
        flex: 1;
    }
    /* Date strip + left column + sidebar all share the same left/right
       gutter (32px) so the date label, CABA banner, form fields/ticket
       cards, and Resumen summary card all line up on the same edges.
       fede: 'too much left padding/margin for the stuff on left component
       and top date' — was max(24, (vw - 1170) / 2) = ~135px at 1440. */
    body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop,
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraTop {
        background: #FFFFFF !important;
        border-bottom: none;
    }
    body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop > .cont-1170,
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraTop > .cont-1170 {
        max-width: none !important;
        margin: 0 !important;
        /* Align the date with the logo: same left edge as the header's centered
           1470 + 32px gutter. Collapses to 32px below 1470. */
        padding-left: max(32px, calc((100vw - 1470px) / 2 + 32px)) !important;
        padding-right: 32px !important;
    }
    /* LEFT column (60%): the blurred mara asset bleeds across the panel.
       Identical treatment on .selector-vista (paso 2/4) and .pago-vista
       (paso 5) per fede's latest spec. */
    /* !important on background + padding-* is needed to beat the earlier
       `body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .pago-vista
        { background: transparent !important; padding: 0 !important }` block
       (around line 1819, kept for the global pago reset on mobile + other
       legacy contexts). Same specificity → !important order resolves. */
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista,
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .pago-vista {
        flex: 0 0 60%;
        width: auto;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        /* Photo bleeds full-width across THIS block (from the screen edge); the
           content is inset to align with the header logo (centered 1470 + 32px
           gutter, collapsing to 32px below 1470). */
        padding-left: max(32px, calc((100vw - 1470px) / 2 + 32px)) !important;
        padding-right: 32px !important;
        background:
            linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)),
            var(--tenant-asset-background-tickets) center bottom / cover no-repeat !important;
        border-radius: 0;
        position: relative;
    }
    /* Kill the main.css ::after that paints a 50vw bg slab next to the
       left column on the regular layouts. */
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista::after,
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .pago-vista::after {
        display: none;
    }
    /* Tighten ticket-card vertical padding — fede: rows have way too much
       up/down breathing room. */
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada {
        padding: 10px 20px;
        margin-bottom: 8px;
    }
    /* Right column: WHITE panel spanning the full 40% per Figma 6368:9371.
       The inner .column-sticky card sits on this white surface (no photo
       bleeds through). padding-right matches the .ticketeraTop gutter
       (32px) for alignment with the date strip + left column. */
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen {
        flex: 0 0 40%;
        width: auto;
        background: #FFFFFF;
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 32px;
        padding-right: 32px;
    }
    /* Desktop Volver hidden — fede's spec; mobile already hides via existing rule. */
    body.tenant-ecoparque .sidebar-resumen .btn-outline-primary:not(.ticketera-secondary-action) {
        display: none !important;
    }
    /* The guest PAGO "Volver" is a direct child of the flex .cont-1170, so it
       otherwise renders as a stray third column in the left margin. Put it on
       its own full-width row above the 60/40 split, aligned to the gutter. */
    /* Float the PAGO "Volver" at the top-left of the LEFT column (over the photo),
       matching the guest form — not as a stray flex column or a full-width bar.
       The .pago-vista gets extra top padding so "Método de pago" clears it. */
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraBody > .cont-1170 {
        position: relative;
    }
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraBody > .cont-1170 > .ticketera-back-link {
        position: absolute;
        top: 24px;
        left: max(32px, calc((100vw - 1470px) / 2 + 32px));
        z-index: 50;  /* above .pago-vista / guest-form layers (z-index:5) so it isn't hidden */
        margin: 0;
        padding: 0;
    }
    /* Push "Método de pago" below the floated Volver. Selector matches the
       specificity of the earlier `...ticketeraBody .cont-1170 .pago-vista`
       padding-top:32px rule (+ :has) so this wins. */
    body.tenant-ecoparque .ticketeralayout:has(.pago-vista) .ticketeraBody .cont-1170 .pago-vista {
        padding-top: 64px !important;
    }
}

/* Upsell banner — yellow warning on visita-especial pages when user hasn't
   added an entrada general yet. Tenant-config-gated; only renders for tenants
   that set MainArtistaCodigo + VisitaEspecialUpsellBanner (ecoparque). */
body.tenant-ecoparque .selector-vista .visita-upsell-notice {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #101E37;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
}
body.tenant-ecoparque .selector-vista .visita-upsell-notice p {
    margin: 0;
    color: #101E37;
}
body.tenant-ecoparque .selector-vista .visita-upsell-notice p strong {
    font-weight: 700;
}
body.tenant-ecoparque .selector-vista .visita-upsell-notice__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: #D97706;
    font-size: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* These rules MUST be desktop-only. Previously they were outside the @media
   block due to a stray brace and were leaking onto mobile — pushing the
   sticky bar's totals row down by ~100px via `margin-top: auto`. */
@media (min-width: 992px) {
    /* The .column-sticky is the inner content — flex column so totals+CTA
       can be pushed to the bottom via margin-top: auto. Drop its own
       background/border/padding since .sidebar-resumen now provides them. */
    body.tenant-ecoparque .sidebar-resumen .column-sticky {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        min-height: calc(100% - 0px);
        height: 100%;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    /* Push the totals + Continuar block to the bottom of the card. */
    body.tenant-ecoparque .sidebar-resumen .box-bottom {
        margin-top: auto;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom h4 {
        display: none;
    }
}

/* Section-level photo bg — Figma 6285:27000 shows the greyed-out wildlife
   photo BEHIND THE LEFT COLUMN ONLY on desktop. The right sidebar covers its
   share with a white card. On mobile we drop the photo entirely — Figma uses
   a flat grey matching the date-strip bg so the page reads as one continuous
   surface (no "intermediate panel" between date strip and ticket list). */
body.tenant-ecoparque .ticketeraBody {
    background: linear-gradient(rgba(238, 244, 248, 0.5), rgba(238, 244, 248, 0.5)),
                var(--tenant-asset-hero-mara) center/cover no-repeat fixed;
}

/* Left panel base — pure reset markers. The actual bg/padding for desktop
   is scoped INSIDE the @media (min-width: 992px) block above (photo + grey
   overlay), and the mobile bg is scoped INSIDE the @media (max-width: 991px)
   block below (flat grey). This base rule used to set `background: transparent`
   unconditionally, which overrode the desktop photo via cascade — removed. */
body.tenant-ecoparque .selector-vista {
    position: relative;
    overflow: visible;
}

/* Hide the original h1 — Figma drops it to maximize ticket-card density. */
body.tenant-ecoparque .selector-vista__title {
    display: none;
}

/* CABA banner — sits at top of left panel with breathing room above ticket
   cards. Bold lead-in from <strong>, rest plain. Icon is the filled "info"
   ⓘ glyph in dark navy (Figma uses material-symbols `info` at FILL=1). */
body.tenant-ecoparque .selector-vista .purchase-notice {
    background: #33D1FF !important;
    color: #101E37 !important;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
}
body.tenant-ecoparque .selector-vista .purchase-notice p {
    margin: 0;
    color: #101E37 !important;
    font-weight: 400;
}
body.tenant-ecoparque .selector-vista .purchase-notice p strong {
    font-weight: 700;
}
body.tenant-ecoparque .selector-vista .purchase-notice__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #101E37 !important;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Ticket cards — clean white over the section bg, no border */
body.tenant-ecoparque .selector-vista .entradas-tipo .entrada {
    background: #FFFFFF;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* +/- buttons — WHITE icons. MudIconButton renders an <svg> inside; force its
   fill via currentColor on the button. */
body.tenant-ecoparque .contador button,
body.tenant-ecoparque .contador .mud-button-root {
    color: #FFFFFF !important;
}
body.tenant-ecoparque .contador button svg,
body.tenant-ecoparque .contador .mud-button-root svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}
/* Disabled minus (qty=0): grey bg with BLACK icon per fede. Re-enables to
   solid blue with white icon automatically when qty > 0 via Blazor's
   Disabled="@(qty == 0)" binding.
   Base sheet has an 8-class !important rule
     .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador button { background: #336ACC !important }
   which beats any shorter selector — so match its depth + add :disabled. */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador button:disabled,
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador .mud-button-root:disabled,
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador button.mud-disabled {
    background: #E2E8F0 !important;
    color: #101E37 !important;
    cursor: not-allowed !important;
}
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador button:disabled svg,
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador .mud-button-root:disabled svg,
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada .Row .contador button.mud-disabled svg {
    fill: #101E37 !important;
    color: #101E37 !important;
}

/* Mobile: drop the photo bg, use a flat grey matching the date-strip color
   so there's no visible "intermediate panel" between the date strip and the
   ticket list. Also tighten all padding-tops so the banner sits right under
   the date strip. */
@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeraBody {
        background: #F0F2F5 !important;   /* match .ticketeraTop bg color */
        padding-top: 12px !important;
    }
    body.tenant-ecoparque .ticketeraBody > .cont-1170 {
        padding-top: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    body.tenant-ecoparque .selector-vista {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    body.tenant-ecoparque .selector-vista > .purchase-notice:first-child,
    body.tenant-ecoparque .selector-vista .purchase-notice {
        margin: 0 0 12px 0;
        padding: 10px 14px;
    }
}

/* ── V5 info-card FINAL spec (2026-05-21) — supersedes the ~5 earlier blocks
   for .eco-info-card that accumulated across iterations. Uses !important so
   the cascade lands here regardless of where the earlier rules were applied.
   Once the demo is stable I'll collapse the earlier blocks; for now we treat
   this as the source of truth for desktop info-card layout. ───────────────── */
@media (min-width: 992px) {
    /* Desktop: 2×2 layout. The 4-across grid squeezed each card to ~270px so the
       descriptions wrapped to 3–4 lines → tall, narrow columns. Two columns give
       each card ~575px, so the text fits on 1–2 lines and the cards read as wide,
       short tiles (matching how they look on mobile, which was fine). */
    body.tenant-ecoparque .eco-info-cards-grid {
        /* minmax(0,1fr) — NOT plain 1fr. Plain 1fr is minmax(min-content,1fr), so the
           column whose card has the widest text (right column: the long Ubicación
           address) grows and squeezes the other column → Cómo llegar rendered
           narrower. minmax(0,1fr) drops the content floor so both columns are
           exactly equal regardless of text length. */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
    body.tenant-ecoparque .eco-info-cards-grid {
        align-items: stretch !important;
        /* Both rows take the height of the tallest card → all four identical,
           regardless of how many lines each description wraps to. */
        grid-auto-rows: 1fr !important;
    }
    body.tenant-ecoparque .eco-info-card {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        /* The card is an <a> — fill the whole grid track. Without this it shrinks
           to its (short) text width and leaves empty space on the right, so the
           bottom-row tiles (shorter copy) looked narrower than the top row. */
        width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
        /* Compact desktop padding — these are secondary nav tiles, kept low-key
           so they don't compete with the page content above. */
        padding: 14px 20px !important;
        aspect-ratio: auto !important;   /* nuke the 360/148 squeeze */
        /* All four cards the SAME size. Width: equal (2×2 minmax grid). Height:
           the description below is locked to exactly two lines, so every card's
           content is the same height — title(24+6) + 2 lines(44) + padding(28) =
           102px — no matter how long the text is. This is what makes the four
           identical without depending on grid-auto-rows (which collapses when the
           grid has no explicit height). */
        min-height: 102px !important;
        height: 100% !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
        flex: 0 0 auto !important;
        padding: 0 !important;
        align-self: center !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 34px !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body strong {
        display: block !important;
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 24px !important;
        margin: 0 0 6px 0 !important;
        color: #101E37 !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body p {
        font-family: 'Open Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 0 !important;
        color: #101E37 !important;
    }
}

/* ── Ecoparque content pages (¿Qué es? / Visitas Escolares / Cómo llegar) ────
   A small design system shared by the in-housed informational pages so they
   match the home's look instead of the bare legales text layout. Image-backed
   hero, generous sections, stat highlights, alternating image+text features,
   info tiles and a CTA band. ───────────────────────────────────────────────── */
body.tenant-ecoparque .eco-page-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: #16324A;
    color: #fff;
}
body.tenant-ecoparque .eco-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,30,55,0.30) 0%, rgba(16,30,55,0.72) 100%);
}
body.tenant-ecoparque .eco-page-hero-inner {
    position: relative;
    z-index: 1;
    padding: 72px 24px;
    max-width: 860px;
}
body.tenant-ecoparque .eco-page-hero h1 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 52px;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #fff;
}
body.tenant-ecoparque .eco-page-hero p {
    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
    line-height: 1.5;
    margin: 0;
    color: #fff;
    opacity: .96;
}

body.tenant-ecoparque .eco-page-section { padding: 64px 0; }
body.tenant-ecoparque .eco-page-section--tint { background: #F3F6F9; }
body.tenant-ecoparque .eco-page-lead {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    line-height: 1.6;
    color: #101E37;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
/* ── Canonical section title (ecoparque). The SINGLE source of truth for every
   .eco-section-title <h2> — home "¡Planificá tu visita!" / "Visitas exclusivas"
   and the /actividades "Visitas exclusivas" / "Atracciones" / "Agenda", plus
   "Mapa del Ecoparque" / "Ubicación". No other rule types these headings, so no
   !important is needed. (Replaces the prior pile of conflicting redefinitions +
   the end-of-file !important catch-all.) ──────────────────────────────────── */
body.tenant-ecoparque .eco-section-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0;
    color: #101E37;
    margin: 0 0 28px;
    text-align: left;
}
/* Feedback 82/85/86 (2026-06-12): on mobile the section titles ("Planificá tu
   visita" / "Actividades" / "Visitas exclusivas") should be bolder + bigger to
   stand out. 700 is the heaviest Nunito weight loaded for ecoparque (400/700),
   so it's a real bump from the 600 base (no faux-bold). */
@media (max-width: 768px) {
    body.tenant-ecoparque .eco-section-title {
        font-weight: 700;
        font-size: 30px;
    }
}

/* Stat highlights */
body.tenant-ecoparque .eco-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}
body.tenant-ecoparque .eco-stat {
    background: #fff;
    border: 1px solid #E6EBF0;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(16,30,55,0.05);
}
body.tenant-ecoparque .eco-stat-num {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
    color: #2F9E64;
}
body.tenant-ecoparque .eco-stat-label {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.4;
    color: #3D4A5C;
}

/* Alternating image + text feature rows */
body.tenant-ecoparque .eco-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
body.tenant-ecoparque .eco-feature + .eco-feature { margin-top: 56px; }
body.tenant-ecoparque .eco-feature--reverse .eco-feature-media { order: 2; }
body.tenant-ecoparque .eco-feature-media {
    border-radius: 18px;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(16,30,55,0.12);
}
body.tenant-ecoparque .eco-feature h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #101E37;
    margin: 0 0 14px;
}
body.tenant-ecoparque .eco-feature p {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: #3D4A5C;
    margin: 0;
}

/* Info tiles (visitas escolares facts) */
body.tenant-ecoparque .eco-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
body.tenant-ecoparque .eco-info-tile {
    background: #fff;
    border: 1px solid #E6EBF0;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
}
body.tenant-ecoparque .eco-info-tile .material-symbols-rounded,
body.tenant-ecoparque .eco-info-tile .material-symbols-outlined {
    font-size: 40px;
    color: #2F9E64;
}
body.tenant-ecoparque .eco-info-tile strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #101E37;
    margin: 14px 0 6px;
}
body.tenant-ecoparque .eco-info-tile span.eco-info-txt {
    font-size: 15px;
    line-height: 1.45;
    color: #3D4A5C;
}

/* Image gallery */
body.tenant-ecoparque .eco-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 8px;
}
body.tenant-ecoparque .eco-gallery-img {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 18px rgba(16,30,55,0.08);
}

/* Especies — category tabs (show/hide) + species cards */
body.tenant-ecoparque .eco-especies-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
}
body.tenant-ecoparque .eco-especies-tab {
    border: 2px solid #E6EBF0;
    background: #fff;
    color: #101E37;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
body.tenant-ecoparque .eco-especies-tab:hover { border-color: #2F9E64; }
body.tenant-ecoparque .eco-especies-tab.is-active {
    background: #2F9E64;
    border-color: #2F9E64;
    color: #fff;
}
body.tenant-ecoparque .eco-especies-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
body.tenant-ecoparque .eco-especie-card {
    background: #fff;
    border: 1px solid #E6EBF0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(16,30,55,0.06);
}
body.tenant-ecoparque .eco-especie-img {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #E6EBF0;
    cursor: pointer;
    transition: opacity 150ms ease;
}
body.tenant-ecoparque .eco-especie-img:hover { opacity: 0.92; }
/* Species without an uploaded photo yet: soft placeholder, not clickable. */
body.tenant-ecoparque .eco-especie-img--placeholder {
    cursor: default;
    background: repeating-linear-gradient(135deg, #EEF2F6, #EEF2F6 12px, #E6EBF0 12px, #E6EBF0 24px);
}
body.tenant-ecoparque .eco-especie-img--placeholder:hover { opacity: 1; }

/* Lightbox: click a species photo to enlarge */
body.tenant-ecoparque .eco-especie-zoom {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(16,30,55,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
body.tenant-ecoparque .eco-especie-zoom-inner {
    position: relative;
    max-width: 920px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
body.tenant-ecoparque .eco-especie-zoom-inner img {
    display: block;
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    background: #101E37;
}
body.tenant-ecoparque .eco-especie-zoom-cap {
    padding: 16px 20px;
}
body.tenant-ecoparque .eco-especie-zoom-cap strong {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #101E37;
    margin-right: 8px;
}
body.tenant-ecoparque .eco-especie-zoom-cap em {
    font-style: italic;
    color: #2F9E64;
}
body.tenant-ecoparque .eco-especie-zoom-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
body.tenant-ecoparque .eco-especie-zoom-close:hover { background: rgba(0,0,0,0.8); }

/* The header social row + leaves decoration belong to the mobile slide-out menu
   only. They share the menu markup with the desktop horizontal nav, so hide them
   on desktop (≥992px) — otherwise the social icons (e.g. the X glyph) leak into
   the top nav bar. The mobile @media (max-width:991px) block shows them. */
@media (min-width: 992px) {
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-social,
    body.tenant-ecoparque .HeaderSitePublic .mobile-menu-leaves {
        display: none !important;
    }
}
body.tenant-ecoparque .eco-especie-body { padding: 16px 18px; }
body.tenant-ecoparque .eco-especie-body strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #101E37;
}
body.tenant-ecoparque .eco-especie-body em {
    display: block;
    font-style: italic;
    font-size: 13px;
    color: #2F9E64;
    margin: 2px 0 8px;
}
body.tenant-ecoparque .eco-especie-body p {
    font-size: 14px;
    line-height: 1.5;
    color: #3D4A5C;
    margin: 0;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-especies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    body.tenant-ecoparque .eco-especies-grid { grid-template-columns: 1fr; }
}

/* Agenda de la semana / fin de semana (CMS-managed schedule on /actividades) */
body.tenant-ecoparque .eco-agenda-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
body.tenant-ecoparque .eco-agenda-titulo {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    background: #2F9E64;
    border-radius: 12px;
    padding: 12px 20px;
    margin: 0 0 16px;
    text-align: center;
}
body.tenant-ecoparque .eco-agenda-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 16px;
    border: 1px solid #E6EBF0;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
}
body.tenant-ecoparque .eco-agenda-hora {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #336ACC;
    min-width: 56px;
    flex: 0 0 auto;
}
body.tenant-ecoparque .eco-agenda-icon {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 24px;
    color: #336ACC;
}
body.tenant-ecoparque .eco-agenda-act strong { display: block; color: #101E37; }
body.tenant-ecoparque .eco-agenda-lugar { font-size: 14px; color: #3D4A5C; }
@media (max-width: 991px) {
    body.tenant-ecoparque .eco-agenda-cols { grid-template-columns: 1fr; }
}

/* Map */
body.tenant-ecoparque .eco-map-frame {
    width: 100%;
    height: 460px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16,30,55,0.12);
}

/* Clickable activity card (whole tile navigates, not just the button) */
body.tenant-ecoparque .eco-visita-card--clickable { cursor: pointer; }
body.tenant-ecoparque .eco-visita-card--clickable:focus-visible {
    outline: 3px solid #336ACC;
    outline-offset: 2px;
}

/* CTA band */
body.tenant-ecoparque .eco-page-cta {
    background: #101E37;
    border-radius: 20px;
    padding: 48px 32px;
    text-align: center;
    color: #fff;
}
body.tenant-ecoparque .eco-page-cta h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: #fff;
    margin: 0 0 20px;
}
body.tenant-ecoparque .eco-page-cta .btn {
    display: inline-block;
    background: #FFCC00;
    color: #101E37;
    border: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 17px;
    padding: 14px 34px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
body.tenant-ecoparque .eco-page-cta .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

@media (max-width: 991px) {
    body.tenant-ecoparque .eco-page-hero h1 { font-size: 38px; }
    body.tenant-ecoparque .eco-page-hero p { font-size: 18px; }
    /* EP-47: on mobile the page hero only needs to contain the title —
       shrink the image height + inner padding so it stops being a tall band. */
    body.tenant-ecoparque .eco-page-hero { min-height: 0; }
    body.tenant-ecoparque .eco-page-hero-inner { padding: 32px 20px; }
    body.tenant-ecoparque .eco-stats { grid-template-columns: repeat(2, 1fr); }
    body.tenant-ecoparque .eco-info-grid { grid-template-columns: repeat(2, 1fr); }
    body.tenant-ecoparque .eco-feature { grid-template-columns: 1fr; gap: 24px; }
    body.tenant-ecoparque .eco-feature--reverse .eco-feature-media { order: 0; }
    body.tenant-ecoparque .eco-gallery { grid-template-columns: repeat(2, 1fr); }
    body.tenant-ecoparque .eco-page-section { padding: 44px 0; }
}
@media (max-width: 575px) {
    body.tenant-ecoparque .eco-page-hero h1 { font-size: 30px; }
    body.tenant-ecoparque .eco-page-hero-inner { padding: 24px 18px; }
    body.tenant-ecoparque .eco-stats,
    body.tenant-ecoparque .eco-info-grid,
    body.tenant-ecoparque .eco-gallery { grid-template-columns: 1fr; }
}

/* ── Compound hero pill V6 (2026-05-21) — supersedes the earlier V5 block.
   Per fede's review:
   - Backplate is a rounded-rectangle that mirrors the button shape (radius 16,
     not 50 pill). Padding around the inner button is generous so the button
     reads as "sitting inside" the dark plate.
   - Inner button: less internal padding + smaller font so the plate dominates.
   - Position: anchored INSIDE the hero (positive bottom value) instead of
     overflowing below; the yellow ticket icon still pops above the plate via
     its negative margins.
   - Backplate color: deeper navy with slightly more transparency so the hero
     photo bleeds through. ──────────────────────────────────────────────────── */
@media (min-width: 992px) {
    /* Outer container — no bg, no padding, just an anchor for the absolutely-
       positioned icon overlay. The dark plate is .eco-hero-pill-plate below;
       the icon sits ON TOP of the plate's LEFT edge so the plate extends
       under the icon but doesn't poke out to its left. */
    body.tenant-ecoparque .eco-hero-pill {
        background: transparent !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        bottom: -16px !important;
        gap: 0 !important;
        align-items: center !important;
        display: inline-block !important;
    }
    body.tenant-ecoparque .eco-hero-pill-icon {
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        margin: 0 !important;
    }
    body.tenant-ecoparque .eco-hero-pill-icon svg {
        width: 72px !important;
        height: 72px !important;
        display: block;
    }
    /* Dark plate — left edge aligns with the icon's left edge. Extra left
       padding makes room for the icon overlay on top of the plate. */
    body.tenant-ecoparque .eco-hero-pill-plate {
        display: inline-flex;
        align-items: center;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        margin-left: 10px;
        padding: 10px 16px 10px 80px;
    }
    body.tenant-ecoparque .eco-hero-pill-cta {
        padding: 8px 20px !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        line-height: 20px !important;
        border-radius: 8px !important;
        height: 36px !important;
    }
}

/* main.css base sheet has a high-specificity selector that hardcodes
   `.ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky .box-bottom { margin-top: 100px }`.
   On mobile this 100px gap is dead space inside the sticky bottom bar.
   Counter-override with matching specificity (no need to !important since we
   match the same selector depth). */
@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky .box-bottom {
        margin-top: 0;
        padding: 0;
        border-top: none;
    }
    /* Footer overlap on the sticky bar is now handled via z-index further
       below (`body.tenant-ecoparque footer { z-index: 300 }`) — the navy
       footer paints over the sticky bar when scrolled to the bottom. The
       old margin-bottom: 150 hack created a visible white strip below the
       footer and is removed. */
}

/* ── Pago/checkout polish ────────────────────────────────────────────────
   - MP button: drop the legacy yellow (#fff8d6) bg + #ffd600 border. Match
     the accordion panel style above (white card, ecoparque grey border, soft
     shadow, 8px radius) so the payment options read as a unified column.
   - Floating Volver in guest checkout / pago: hidden — replaced by the
     header-level back affordance + the in-form button.
   ──────────────────────────────────────────────────────────────────────── */
body.tenant-ecoparque .btn-payment.btn-payment-mp {
    background: #FFFFFF !important;
    border: 1px solid var(--eco-input-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Extra right inset aligns the chevron with the Tarjeta de crédito
       accordion chevron below (MudExpansionPanel pads its header ~24 right). */
    padding: 14px 24px 14px 16px;
}
body.tenant-ecoparque .btn-payment.btn-payment-mp:hover:not(:disabled) {
    background: #F9FAFB !important;
    border-color: var(--eco-cta-blue) !important;
}
body.tenant-ecoparque .btn-payment .btn-payment-chevron {
    margin-left: auto;
    margin-right: 10px;     /* fede: 10px right margin for visual breathing */
    color: var(--eco-cta-blue);
    font-size: 14px;
}

/* Pago form on mobile: target the .Row that holds Mes + Año + CVV (3-child
   .Row-25 sequence — distinct from the .Row-50 titular/doc row below). The
   base sheet (.ticketeralayout … .Row .Row-25 { width: 100% } at <= 700px,
   10-class specificity) stacks them all; we re-flow that specific row as a
   2-col grid with CVV wrapping to its own line. :has() scopes the rule
   without needing a new wrapper class in the .razor. */
@media (max-width: 991px) {
    body.tenant-ecoparque .pago-vista .Row:has(> .Row-25:nth-child(3)) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 12px !important;
        row-gap: 12px !important;
    }
    body.tenant-ecoparque .pago-vista .Row:has(> .Row-25:nth-child(3)) > .Row-25 {
        width: auto !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }
    body.tenant-ecoparque .pago-vista .Row:has(> .Row-25:nth-child(3)) > .Row-25:nth-child(3) {
        grid-column: 1 / -1 !important;
    }
}

/* Previously hid all .btn-outline-primary inside .guest-checkout-form here
   — turned out to be too broad and broke the mobile form layout. The Volver
   button fede was referring to is the BROWSER back button (navigation
   history), not an in-page element; that's a separate fix at the routing
   level (each paso needs its own URL or a manual popstate handler). */

/* External .sidebar-resumen is the SINGLE summary surface on both desktop
   and mobile guest checkout. Inner .guest-sidebar (duplicate resumen inside
   the form) and the in-form .acciones (inline Continuar) are always hidden;
   the external sidebar's Continuar (added in Ticketera_DatosComprador) calls
   _guestForm.SubmitFromParent() via @ref. */
body.tenant-ecoparque .guest-checkout-form {
    display: block;
}
body.tenant-ecoparque .guest-checkout-form .guest-form-fields {
    width: 100%;
    padding: 0;
}
body.tenant-ecoparque .guest-checkout-form .guest-sidebar {
    display: none !important;
}
body.tenant-ecoparque .guest-checkout-form .guest-form-fields > .acciones {
    display: none !important;
}

/* Desktop: external sidebar always-expanded (all .seleccion items visible). */
@media (min-width: 992px) {
    body.tenant-ecoparque .ticketeralayout:has(.guest-checkout-form) .sidebar-resumen .seleccion {
        display: flex !important;
        justify-content: space-between;
        margin-bottom: 8px;
    }
}

/* Sticky-bar above footer: position: fixed already creates its own stacking
   context above in-flow elements, so we just need to NOT give the footer a
   higher z-index. (Previously I gave the footer z-index 300 which inverted
   the layering — sticky disappeared behind footer when scrolled to bottom.)
   Footer padding-bottom 150px extends the navy area so when the user scrolls
   to the absolute bottom the sticky bar covers extended-navy footer space,
   not white page bg — no "mini white bar" beneath the footer. */
/* No mobile footer padding-bottom override needed — that was the gutter
   for the old position:fixed sticky bar. Sticky lives in flow now and
   never overlaps the footer. */

/* ── Sticky-bottom expand toggle — ONLY paso 4 (datos comprador) ─────────
   Paso 2 deliberately has NO toggle (compact sticky bar to maximize
   categories above the fold). Only .sidebar-resumen.has-expand-toggle gets
   the toggle markup + behaviour.
   ─────────────────────────────────────────────────────────────────────── */
body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    /* zero out browser <button> defaults (text-indent, line-box quirks) so
       the h2 starts flush with the box-bottom .Row content below. */
    text-align: left;
    text-indent: 0;
    font: inherit;
    line-height: 1.2;
}
/* Base sheet has 5-class rule
   `.ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky h2 { padding: 0 24px; margin-bottom: 24px }`
   which adds 24px left padding to the h2, throwing it out of alignment with
   the .box-bottom .Row contents below. Match its depth + add tenant scope
   to win. */
body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .column-sticky .sidebar-resumen-toggle h2,
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky .sidebar-resumen-toggle h2 {
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0;
}
/* Base sheet has a 5-class rule
   `.ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky h2 { padding: 0 24px }`
   which indents the toggle's h2 24px to the right of the Entradas/Total
   rows below it on mobile. Match its depth + add tenant scope to win. */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen .column-sticky .sidebar-resumen-toggle h2 {
    padding: 0 !important;
    margin: 0 !important;
}
body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-chev {
    color: var(--eco-cta-blue);
    font-size: 24px;
}

/* Desktop: always-expanded, chevron hidden, button non-interactive. */
@media (min-width: 992px) {
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-toggle {
        cursor: default;
        pointer-events: none;
    }
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-chev {
        display: none;
    }
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-detail {
        display: block;
    }
}

/* Mobile: collapsed by default. `.is-expanded` reveals the list. */
@media (max-width: 991px) {
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-detail {
        display: none;
    }
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle.is-expanded .sidebar-resumen-detail {
        display: block;
        margin-bottom: 8px;
    }
    body.tenant-ecoparque .sidebar-resumen.has-expand-toggle .sidebar-resumen-toggle h2 {
        font-size: 16px;
    }
}

/* Disabled Continuar — grey bg with BLACK font per fede. Re-enables to
   brand blue (#336ACC) with white font automatically when at least one
   ticket has been added (the Razor switches between disabled and the
   click-handler variant based on cart count). */
body.tenant-ecoparque .btn-primary:disabled,
body.tenant-ecoparque .btn.btn-primary:disabled,
body.tenant-ecoparque .btn-primary.btn-block:disabled {
    background-color: #C9D2DC !important;
    border-color: #C9D2DC !important;
    color: #101E37 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* ── V7 paso 2 final pass (2026-05-22) ──────────────────────────────────
   Audit against Figma 6285:27000 (desktop) + 6285:27159 (mobile).
   Sits at file end so source order wins over V1-V6 above. Scoped to
   ecoparque only. Pairs with Ticketera_Selector.razor V2 (trash icon +
   two-line summary line items). !important is used selectively where
   earlier overrides need to be reversed.
   ──────────────────────────────────────────────────────────────────── */

/* Date strip — Figma spec: white bg, 1px bottom border #E6EBF0, py 16,
   Open Sans Regular 16/24 #38485C. The V2 paso-2 rule above removed the
   bottom border and a different earlier rule shrank the font to 14/500. */
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E6EBF0 !important;
    padding: 16px 0 !important;
}
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop .txt span {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #38485C;
}
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop .txt::before {
    font-size: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    color: #38485C;
}

/* CABA notice — Figma 6285:27049 desktop / 6285:27182 mobile.
   Desktop: padding 16 all sides, gap 16, icon 32, text 16/24.
   Mobile:  padding 16 all sides, gap 16, icon 40, text 14/20.
   The base block already has bg/color/radius right — we just bump
   padding / gap / icon / typography. */
body.tenant-ecoparque .selector-vista .purchase-notice {
    padding: 16px !important;
    gap: 16px !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
body.tenant-ecoparque .selector-vista .purchase-notice__icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 32px !important;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .selector-vista .purchase-notice {
        padding: 16px !important;
        gap: 16px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        margin: 0 0 16px 0 !important;
    }
    body.tenant-ecoparque .selector-vista .purchase-notice__icon {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 40px !important;
    }
}

/* Ticket rows — Figma 6285:27057. Border 2px, radius 8, padding 16/24,
   gap 16 between rows. Price = Nunito 20/28 #38485C; label = Nunito Bold
   18/24 #101E37 on desktop. Mobile: price Nunito SemiBold 18/24, label
   Open Sans Bold 14/20. The razor outputs <p>price</p><span>label</span>
   inside .entrada-detalle — the prior CSS targeted h4 + p which only
   half-matched the DOM, leaving the label completely unstyled. */
body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada {
    padding: 16px 24px !important;
    margin-bottom: 16px !important;
    border: 2px solid #E6EBF0 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #38485C;
    margin: 0;
}
body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle span {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #101E37;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada,
    body.tenant-ecoparque .entradas-tipo .entrada {
        padding: 6px 12px !important;
        margin-bottom: 6px !important;
        border: 1px solid #E6EBF0 !important;
        border-radius: 8px !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
        font-family: 'Nunito', sans-serif;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
        color: #38485C;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle span {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 11px;
        line-height: 14px;
        color: #101E37;
    }
}

/* Stepper — Figma 6285:27000 / 6285:27159. 48×48 buttons (touch-friendly
   on BOTH desktop and mobile), radius 8, gap 4. Qty box: 64×48 white box
   with 2px #E6EBF0 border, Open Sans SemiBold 20/28 centered. */
body.tenant-ecoparque .contador {
    gap: 4px !important;
    align-items: center;
}
body.tenant-ecoparque .contador button,
body.tenant-ecoparque .contador .mud-button-root {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 8px !important;
    padding: 0 !important;
}
body.tenant-ecoparque .contador .number {
    width: 64px;
    height: 48px;
    background: #FFFFFF;
    border: 2px solid #E6EBF0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .contador .number span,
body.tenant-ecoparque .contador .number .cantidad {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #101E37;
    min-width: 0;
}
/* When the minus button is disabled (qty == 0), grey the displayed "0". */
body.tenant-ecoparque .contador:has(button:disabled) .number span,
body.tenant-ecoparque .contador:has(.mud-disabled) .number span {
    color: #5C6A7A;
}
@media (max-width: 991px) {
    body.tenant-ecoparque .contador button,
    body.tenant-ecoparque .contador .mud-button-root {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    body.tenant-ecoparque .contador .number {
        width: 40px;
        height: 32px;
    }
    body.tenant-ecoparque .contador .number span,
    body.tenant-ecoparque .contador .number .cantidad {
        font-size: 15px;
        line-height: 20px;
    }
}

/* Right sidebar — Figma 6285:27064 desktop. h2 20/700, left border 2px,
   line items as two-line blocks with trash glyph on the right, totals
   block top border 2px, Continuar = 40h Nunito Bold 18/24. */
@media (min-width: 992px) {
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .sidebar-resumen {
        border-left: 2px solid #E6EBF0;
        padding: 24px 40px 40px 40px !important;
    }
    body.tenant-ecoparque .sidebar-resumen h2 {
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        color: #101E37;
        margin: 0 0 24px 0;
    }
}

/* Summary line items (.seleccion) — pairs with razor V2 markup:
     <div class="seleccion">
       <div class="seleccion-text">
         <p class="seleccion-label">x1 - Adulto Argentino</p>
         <span class="seleccion-price">$8.072</span>
       </div>
       <button class="seleccion-remove"><span>delete</span></button>
     </div>
   Two-line text on the left, trash glyph on the right. Drop the V1
   dashed bottom border. */
body.tenant-ecoparque .sidebar-resumen .seleccion {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0 !important;
    border-bottom: none !important;
    margin: 0 0 12px 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}
body.tenant-ecoparque .sidebar-resumen .seleccion-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
body.tenant-ecoparque .sidebar-resumen .seleccion-label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #101E37;
    margin: 0;
}
body.tenant-ecoparque .sidebar-resumen .seleccion-price {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #38485C;
}
body.tenant-ecoparque .sidebar-resumen .seleccion-remove {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #101E37;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease;
}
/* Material Symbols variable font — needs 'wght' 400 + FILL 0 axis values. */
body.tenant-ecoparque .sidebar-resumen .seleccion-remove .material-symbols-rounded {
    font-size: 16px;
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Font Awesome 6 Free `.fa-solid` requires font-weight: 900 to render the
   actual glyph — the free font only ships the solid (900) face. The earlier
   shared rule applied font-variation-settings + the cascading font-weight
   override blanked the icon out. Keep weight on `.fa-solid` so the glyph
   renders; just size + color it here. */
body.tenant-ecoparque .sidebar-resumen .seleccion-remove .fa-solid {
    font-size: 16px;
    color: inherit;
    font-weight: 900;
}
body.tenant-ecoparque .sidebar-resumen .seleccion-remove:hover {
    color: #C82333;
}

/* Totals block — top border 2px #E6EBF0; row pair "Cant. de entradas" +
   count, then "Total a pagar" + amount; Continuar button 40h Bold 18/24.
   The razor renders each as a .Row inside .box-bottom, with the final
   one marked .row-total. Style label vs value via the span pair. */
@media (min-width: 992px) {
    body.tenant-ecoparque .sidebar-resumen .box-bottom {
        border-top: 2px solid #E6EBF0;
        padding-top: 24px;
        margin-top: 24px;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        padding: 0;
        margin: 0 0 12px 0;
        border: none;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row:not(.row-total) span:first-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #38485C;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row:not(.row-total) span:last-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total {
        border-top: none !important;
        margin-top: 4px !important;
        padding-top: 0 !important;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total span:first-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #38485C;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total span:last-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .btn-primary {
        height: 40px;
        padding: 8px 16px !important;
        font-family: 'Nunito', sans-serif;
        font-weight: 700 !important;
        font-size: 18px;
        line-height: 24px;
        border-radius: 8px !important;
        margin-top: 16px;
    }
}

/* Mobile body bg + date-strip white — Figma 6285:27159 mobile:
   header (white) → date strip (white) → grey #E6EBF0 below with the
   CABA banner + ticket cards on it. Earlier mobile rule painted both
   the strip and the body the same #F0F2F5; restore Figma's separation. */
@media (max-width: 991px) {
    body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .ticketeraTop {
        background: #FFFFFF !important;
        border-bottom: 1px solid #E6EBF0 !important;
        padding: 16px 0 !important;
    }
    body.tenant-ecoparque .ticketeraBody {
        background: #E6EBF0 !important;
    }
}

/* Mobile sticky-bottom bar — tightened from the original 24/16 + gap 16 spec
   to reclaim vertical space above "Entradas acceso al parque". */
@media (max-width: 991px) {
    body.tenant-ecoparque .sidebar-resumen {
        padding: 8px 16px max(12px, env(safe-area-inset-bottom)) !important;
        box-shadow: 4px -4px 4px rgba(56, 72, 92, 0.12) !important;
        border-top: 2px solid #E6EBF0 !important;
    }
    body.tenant-ecoparque .sidebar-resumen .column-sticky {
        gap: 0;
        display: flex;
        flex-direction: column;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: none !important;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row:not(.row-total) span:first-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .box-bottom .Row:not(.row-total) span:last-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total span:first-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #38485C;
    }
    body.tenant-ecoparque .sidebar-resumen .row-total span:last-child {
        font-family: 'Nunito', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        color: #101E37;
    }
    body.tenant-ecoparque .sidebar-resumen .btn-primary {
        height: 40px !important;
        padding: 8px 16px !important;
        font-family: 'Nunito', sans-serif !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        line-height: 24px !important;
        border-radius: 8px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
    /* Removed: previously bumped ticketeraBody padding-bottom to clear the
       fixed sticky bar's overlap. With position:sticky the bar lives in
       flow and needs no compensation. */
}

/* Photo bleed — Figma calls for the wildlife photo at ~12% opacity, not
   the current ~50% wash. Drop the overlay alpha so the photo reads. */
body.tenant-ecoparque .ticketeraBody {
    background: linear-gradient(rgba(230, 235, 240, 0.88), rgba(230, 235, 240, 0.88)),
                var(--tenant-asset-hero-mara) center/cover no-repeat fixed;
}

/* Disabled buttons on the ticket-selection screen — every button that
   sits in a disabled state (Continuar with 0 tickets, minus stepper at
   qty=0) renders the same neutral grey #E6EBF0 (matches the page's
   other neutrals). Selector chain is intentionally wide so MudBlazor's
   own .mud-button-filled-primary doesn't paint blue through any state
   pseudo-class.  fede 2026-05-22: "the background needs to be grey not
   blue on the ticket selection screen". */
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador button:disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador .mud-button-root:disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador .mud-disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador button.mud-disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .sidebar-resumen .btn-primary:disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .sidebar-resumen .btn.btn-primary:disabled,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .sidebar-resumen .btn-primary.btn-block:disabled {
    background: #E6EBF0 !important;
    background-color: #E6EBF0 !important;
    border-color: #E6EBF0 !important;
    color: #101E37 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador button:disabled svg,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador .mud-button-root:disabled svg,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador .mud-disabled svg,
body.tenant-ecoparque .ticketeralayout:has(.selector-vista) .contador button.mud-disabled svg {
    fill: #101E37 !important;
    color: #101E37 !important;
}


/* =============================================================================
   ECO-TICKET — ticket de visita al parque (Entrada.razor)
   Card vertical con header de color por categoría, QR centrado y footer con
   número de entrada + QR pequeño.
   ============================================================================= */

/* --- Navegación prev/next (solo pantalla) --- */
body.tenant-ecoparque .eco-ticket-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    color: #444;
}
body.tenant-ecoparque .eco-ticket-nav p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
body.tenant-ecoparque .eco-ticket-nav span {
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
}

/* --- Card --- */
body.tenant-ecoparque .eco-ticket {
    width: 380px;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0,0,0,0.18);
    background: #fff;
    /* --eco-color y --eco-bg-image se inyectan inline por C# según la categoría */
    --eco-color: #1c8fb0;
    --eco-bg-image: none;
}

/* En pantalla sólo mostramos la entrada activa (las demás se ocultan).
   Al imprimir mostramos todas (ver bloque @media print más abajo). */
body.tenant-ecoparque .eco-ticket { display: none; }
body.tenant-ecoparque .eco-ticket.is-active { display: block; }

/* --- Header: barra superior con color de categoría y logo --- */
body.tenant-ecoparque .eco-ticket-header {
    background-color: var(--eco-color);
    padding: 22px 24px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .eco-ticket-logo {
    height: 36px;
    width: auto;
    /* fuerza el logo a blanco sobre cualquier fondo */
    filter: brightness(0) invert(1);
    display: block;
}

/* --- Cuerpo: foto del parque tintada con --eco-color + contenido encima --- */
body.tenant-ecoparque .eco-ticket-body {
    position: relative;
    padding: 0;
    background: var(--eco-color);
    overflow: hidden;
}
body.tenant-ecoparque .eco-ticket-body-bg {
    position: absolute;
    inset: 0;
    background-image: var(--eco-bg-image);
    background-size: cover;
    background-position: center;
    /* la foto en escala de grises + multiply tiñe todo con el color de la categoría */
    filter: grayscale(1) contrast(0.95) brightness(1.05);
    mix-blend-mode: multiply;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
}
body.tenant-ecoparque .eco-ticket-body-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 18px;
    color: #fff;
    text-align: center;
}
body.tenant-ecoparque .eco-ticket-tipo {
    display: inline-block;
    background: #0d2a1e;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 28px;
    margin: -18px 0 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
body.tenant-ecoparque .eco-ticket-categoria {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
body.tenant-ecoparque .eco-ticket-info {
    margin: 0 0 18px;
}
body.tenant-ecoparque .eco-ticket-info-row {
    font-size: 14px;
    margin: 2px 0;
    color: #fff;
}
body.tenant-ecoparque .eco-ticket-info-row strong {
    font-weight: 700;
    margin-right: 4px;
}
body.tenant-ecoparque .eco-ticket-info-row span {
    font-weight: 400;
    text-transform: capitalize;
}

/* --- Caja blanca del QR --- */
body.tenant-ecoparque .eco-ticket-qr-box {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    display: inline-block;
    margin: 6px auto 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.tenant-ecoparque .eco-ticket-qr svg {
    display: block;
    width: 200px;
    height: 200px;
}
body.tenant-ecoparque .eco-ticket-codigo {
    font-size: 11px;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.92);
    margin: 4px 0 0;
    text-align: center;
}

/* --- Footer blanco con icono + numero + QR chico --- */
body.tenant-ecoparque .eco-ticket-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e6e6e6;
}
body.tenant-ecoparque .eco-ticket-numero {
    font-size: 15px;
    color: #2a2a2a;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .eco-ticket-numero .mud-icon-root {
    color: #2a2a2a;
}
body.tenant-ecoparque .eco-ticket-numero strong {
    font-weight: 700;
}
body.tenant-ecoparque .eco-ticket-qr-small svg {
    display: block;
}

/* --- Botón de descarga --- */
body.tenant-ecoparque .eco-ticket-acciones {
    margin-top: 24px;
    text-align: center;
}

/* =============================================================================
   ECO-TICKET PRINT — PDF descargado desde el navegador
   Solo muestra el .eco-ticket, oculta navegación, header del sitio, etc.
   print-color-adjust: exact para que el header coloreado se imprima.
   ============================================================================= */
@media print {
    body.tenant-ecoparque header,
    body.tenant-ecoparque footer,
    body.tenant-ecoparque nav,
    body.tenant-ecoparque .entradas-hero,
    body.tenant-ecoparque .eco-ticket-nav,
    body.tenant-ecoparque .eco-ticket-acciones,
    body.tenant-ecoparque .mud-scroll-to-top {
        display: none !important;
    }

    body.tenant-ecoparque .SiteMainPage {
        margin-top: 0 !important;
    }

    body.tenant-ecoparque .cuenta-eticket .entrada-evento {
        padding: 0 !important;
    }

    body.tenant-ecoparque .eco-ticket {
        width: 340px;
        margin: 20px auto;
        box-shadow: none;
        border-radius: 12px;
        overflow: hidden;
        page-break-inside: avoid;
        page-break-after: always;
        display: block !important; /* override on-screen hiding to print all tickets */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    body.tenant-ecoparque .eco-ticket:last-child {
        page-break-after: auto;
    }

    body.tenant-ecoparque .eco-ticket-header {
        background-color: var(--eco-color) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.tenant-ecoparque .eco-ticket-body {
        background-color: var(--eco-color) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.tenant-ecoparque .eco-ticket-body-bg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.tenant-ecoparque .eco-ticket-tipo {
        background: #0d2a1e !important;
        color: #fff !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.tenant-ecoparque .eco-ticket-footer {
        background: #fff !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* =============================================================================
   Post-purchase confirmation surfaces (Figma 6311:20602 desktop / 6311:20674 mobile)
   -----------------------------------------------------------------------------
   Covers three render points, all sharing the same Obelisco "Mensaje de estado"
   shell (icon + título + bajada + accionables) — Razor adds `mensaje-estado`
   alongside the legacy `status status-success|status-pending|status-error`
   markers so EBA/Arena keep their behaviour and only ecoparque picks this up:
     1. Checkout_MpReturn.razor      — universal MP back-url landing page
        (status = approved | pending | failure). Lives inside .ticketeraBody >
        .cont-840 with no .pagelayout/.ticketeralayout wrapper.
     2. Pago_Valorcero.razor         — $0 reservation guest confirmation panel,
        rendered inline inside .componente-de-pago-gratuito (NOT a full page).
     3. Line / Buepp success         — still navigates to /mis-entradas today;
        when migrated to /checkout/mp-return they reuse the same shell for free.
   Figma tokens used verbatim (from node 6311:20631 / 6311:20676):
     - Título  : Nunito SemiBold 600, 28px / 36px (encabezado/h4), #101E37
     - Bajada  : Open Sans Regular 400, 16px / 24px, #101E37
     - Botón   : Nunito Bold 700, 18px / 24px, height 48px, padding 12px 20px,
                  radius 8px, primary bg #336acc, outlined border 2px #336acc
     - Icono   : 64px circular (filled green for success, amber for pending,
                  red for error), gap 16px to título, gap 16px to bajada,
                  pt-32px before accionables
   ============================================================================= */
body.tenant-ecoparque {
    /* Obelisco-V2 button blue from the Figma confirmation comp (5734:8880 →
       button/primary). Ecoparque's app-wide CTA is --eco-cta-blue (#1455CE)
       but the Mensaje-de-estado spec uses the lighter #336acc. Scope locally
       so we don't drift the rest of the app. */
    --eco-msg-button-blue: #336acc;
    --eco-msg-button-blue-hover: #2856a3;
    --eco-msg-text: #101E37;
    --eco-msg-icon-success: #0E7C3A;  /* Material check_circle filled green */
    --eco-msg-icon-pending: #C77700;  /* amber for in-process payment */
    --eco-msg-icon-error: #CC3333;
}

/* --- Page shell (Checkout_MpReturn + Carrito_Checkout success state).
   Per Figma 6311:20602 (desktop) + 6311:20674 (mobile):
     - Background = same blurred mara photo as .selector-vista, mara anchored
       at the bottom-center so the deer reads as a soft visual base. Light
       white wash (20%) keeps copy + Resumen card legible.
     - Decoración de hojas overlay (Asset images/decoracion-hojas.png) sits
       fixed along the bottom edge of the shell. ~140px tall on desktop /
       100px on mobile per the Figma export. pointer-events: none so the
       buttons above stay clickable. *@ */
/* Confirmation page shell — match selector-vista's mara-photo bg with light
   wash. Higher-specificity prefix (.ticketeralayout + .ticketera-mensajes)
   needed to beat the base sheet's `.ticketeralayout .ticketera-mensajes {
   background-color: #fff }` rule that paints the parent white. */
body.tenant-ecoparque .ticketeralayout .ticketera-mensajes.mp-return-page,
body.tenant-ecoparque .mp-return-page {
    background:
        linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)),
        var(--tenant-asset-background-tickets) center bottom / cover no-repeat !important;
    background-color: transparent !important;
    min-height: calc(100dvh - 200px);
    padding: 56px 16px 200px !important;    /* beats the base 100px 40px */
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: left;
}
body.tenant-ecoparque .mp-return-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: var(--tenant-asset-decoracion-hojas) center bottom / auto 140px no-repeat;
    pointer-events: none;
    z-index: 0;
}
body.tenant-ecoparque .mp-return-page .mp-return-shell {
    width: 100%;
    max-width: 815px;            /* matches Figma "Mensaje de estado" frame */
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;                  /* sit above the .decoracion-hojas overlay */
}
@media (max-width: 768px) {
    body.tenant-ecoparque .mp-return-page {
        padding-bottom: 140px;
    }
    body.tenant-ecoparque .mp-return-page::after {
        height: 100px;
        background-size: auto 100px;
    }
}

/* EP-29: the valor-cero confirmation renders inline in the ticketera 60/40
   envelope (sidebar hidden on confirm), which left the card in the 60% column
   with empty white on the right. Collapse the left block to full width and
   centre the card so it reads like the MP/pago success page. */
body.tenant-ecoparque .ticketeralayout:has(.pago-valorcero-success) .ticketeraBody .cont-1170 .pago-vista {
    flex: 1 1 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
body.tenant-ecoparque .pago-valorcero-success {
    width: 100%;
    max-width: 560px;
    margin: 24px auto !important;
}

/* --- Shared mensaje-de-estado shell (mp-return + pago-valorcero) -------- */
body.tenant-ecoparque .mensaje-estado {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
    /* Pago_Valorcero historically had inline text-align:center + padding:32px.
       Now that the inline style is gone, the card padding is inherited from
       .box-tarjeta further up; .pago-valorcero-success below re-asserts it. */
}
body.tenant-ecoparque .mensaje-estado .mensaje-encabezado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Icon — render as filled circle 64px to match the Figma "check_circle".
   FontAwesome's fa-circle-check already paints a solid green circle + white
   check at the font level, so we only size + recolour it; for pending/error
   we keep the same circular footprint with a tinted bg behind the glyph so
   the visual weight stays identical across all three states. */
body.tenant-ecoparque .mensaje-estado .mensaje-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    line-height: 1;
}
body.tenant-ecoparque .mensaje-estado .mensaje-icono i {
    font-size: 64px;
    line-height: 1;
    display: block;
}
body.tenant-ecoparque .mensaje-estado.status-success .mensaje-icono i.fa-circle-check {
    color: var(--eco-msg-icon-success);
}
body.tenant-ecoparque .mensaje-estado.status-pending .mensaje-icono {
    background: var(--eco-msg-icon-pending);
}
body.tenant-ecoparque .mensaje-estado.status-pending .mensaje-icono i.fa-clock {
    color: #FFFFFF;
    font-size: 36px;
}
body.tenant-ecoparque .mensaje-estado.status-error .mensaje-icono i.fa-circle-xmark {
    color: var(--eco-msg-icon-error);
}

/* Título — Figma: Nunito SemiBold 28/36 #101E37. Apply to whatever heading
   level the Razor emits (h2 on mp-return, h4 on pago-valorcero) so both
   surfaces share one rule. */
body.tenant-ecoparque .mensaje-estado .mensaje-titulo,
body.tenant-ecoparque .mensaje-estado h2.status-title,
body.tenant-ecoparque .mensaje-estado h4.status-title,
body.tenant-ecoparque .mensaje-estado h2,
body.tenant-ecoparque .mensaje-estado h4 {
    font-family: "Nunito", "Open Sans", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    color: var(--eco-msg-text);
    margin: 0;
    /* The base ecoparque .status-success .status-title rule (line ~1887) sets
       color:var(--tenant-color-secondary) = #282213 (brown). The Figma spec
       is #101E37 navy. Override here. */
}

/* Bajada — Figma: Open Sans Regular 16/24 #101E37. */
body.tenant-ecoparque .mensaje-estado .mensaje-bajada {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.tenant-ecoparque .mensaje-estado .status-text {
    font-family: "Open Sans", "Open sans", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--eco-msg-text);
    margin: 0;
}
body.tenant-ecoparque .mensaje-estado .status-text + .status-text {
    margin-top: 8px;
}
body.tenant-ecoparque .mensaje-estado .status-text-guest {
    margin-top: 4px;
}

/* EP feedback (2026-06-16): post-payment confirmation (MP / Free / Line success
   panels). Scoped to the .eco-pay-confirm marker class (added on those 3 panels'
   root) so it can't leak to other ecoparque .status-success panels (Abonos /
   Reservas). */

/* Unify all 3 panels into the same white card. Values mirror the existing
   .componente-de-pago-gratuito .box-tarjeta (what the Free flow already shows) so
   Free is unchanged and MP / Line now match it instead of sitting on the full-bleed
   background. */
body.tenant-ecoparque .eco-pay-confirm {
    background: #FFFFFF;
    border: 1px solid var(--eco-input-border);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    max-width: 560px;
    margin: 48px auto;
}

/* Heavier title. */
body.tenant-ecoparque .eco-pay-confirm .mensaje-titulo,
body.tenant-ecoparque .eco-pay-confirm h2.status-title,
body.tenant-ecoparque .eco-pay-confirm h4.status-title {
    font-weight: 800;
}

/* Left-aligned text with the check icon BESIDE the title (mockup intent, no card). */
body.tenant-ecoparque .eco-pay-confirm .mensaje-encabezado {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
}
body.tenant-ecoparque .eco-pay-confirm .mensaje-bajada,
body.tenant-ecoparque .eco-pay-confirm .status-text,
body.tenant-ecoparque .eco-pay-confirm .status-title,
body.tenant-ecoparque .eco-pay-confirm .mensaje-titulo,
body.tenant-ecoparque .eco-pay-confirm .list-informative {
    text-align: left;
}

/* Smaller action buttons (covers plain .btn + MudLink/MudButton), left-aligned
   under the text. */
body.tenant-ecoparque .eco-pay-confirm .mensaje-acciones .btn,
body.tenant-ecoparque .eco-pay-confirm .acciones .btn,
body.tenant-ecoparque .eco-pay-confirm .mensaje-acciones .mud-button-root,
body.tenant-ecoparque .eco-pay-confirm .mensaje-acciones a.mud-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.25 !important;
}
body.tenant-ecoparque .eco-pay-confirm .mensaje-acciones,
body.tenant-ecoparque .eco-pay-confirm .acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
body.tenant-ecoparque .eco-pay-confirm .mensaje-acciones .ms-2 { margin-left: 0 !important; }
/* Center the action row. Higher specificity (.eco-pay-confirm.mensaje-estado, 3
   classes) than the generic `.mensaje-estado .mensaje-acciones { justify-content:
   flex-start }` rule below, and sets ONLY justify-content so the mobile
   column/full-width-stretch behaviour is left intact. */
body.tenant-ecoparque .eco-pay-confirm.mensaje-estado .mensaje-acciones,
body.tenant-ecoparque .eco-pay-confirm.mensaje-estado .acciones {
    justify-content: center;
}

/* List-informative (Reserva #, Operación MP id) — keep readable in the
   ecoparque navy palette, slight indent so the bullets clear the icon column. */
body.tenant-ecoparque .mensaje-estado .list-informative {
    width: 100%;
    margin: 0;
}
body.tenant-ecoparque .mensaje-estado .list-informative-bullet {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    font-family: "Open Sans", "Open sans", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--eco-msg-text);
}
body.tenant-ecoparque .mensaje-estado .list-informative-bullet li {
    margin-bottom: 4px;
}
body.tenant-ecoparque .mensaje-estado .list-informative-bullet b {
    font-weight: 700;
}

/* Accionables — Figma: pt-32px, horizontal row gap 16px on desktop, full-width
   stacked on mobile. Buttons: Nunito Bold 18/24, height 48, padding 12/20,
   radius 8, primary bg #336acc, outlined border 2px #336acc.

   Existing line ~1375 rule already paints generic .status.status-success
   buttons (radius 8 / pad 10-24 / min-width 200). The Figma spec is taller
   and uses padding 12/20 with no fixed min-width; we layer over without
   !important since the selector here is at least as specific. */
body.tenant-ecoparque .mensaje-estado .mensaje-acciones,
body.tenant-ecoparque .mensaje-estado .acciones {
    /* !important to beat `.pago-vista .acciones { display:none !important }` (line ~643),
       which otherwise hides the success-panel buttons (Descargar entradas / Ir a Inicio)
       because Pago_Valorcero renders inside .pago-vista. EP-29 #2. */
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
    width: 100%;
}
/* Button selectors include `.status.status-success` and `.status.status-error`
   tail-anchors to beat the legacy line ~1375 rule
   (`body.tenant-ecoparque .status.status-success .btn-primary` = 4 classes).
   Matching 4 classes here means the new spec wins on specificity, not just
   source order. */
body.tenant-ecoparque .mensaje-estado.status .btn,
body.tenant-ecoparque .mensaje-estado.status .btn-primary,
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary {
    height: 48px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: "Nunito", "Open Sans", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    min-width: 0;                /* drop the 200px floor from the legacy rule */
    margin: 0;                   /* kill ms-2 inline spacing — gap handles it */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
body.tenant-ecoparque .mensaje-estado.status .btn-primary {
    background-color: var(--eco-msg-button-blue);
    border: 2px solid var(--eco-msg-button-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .mensaje-estado.status .btn-primary:hover,
body.tenant-ecoparque .mensaje-estado.status .btn-primary:focus {
    background-color: var(--eco-msg-button-blue-hover);
    border-color: var(--eco-msg-button-blue-hover);
    color: #FFFFFF;
}
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary,
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary.mp-return-home {
    background-color: transparent;
    border: 2px solid var(--eco-msg-button-blue);
    color: var(--eco-msg-button-blue);
}
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary:hover,
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary:focus {
    background-color: var(--eco-msg-button-blue);
    color: #FFFFFF;
}
body.tenant-ecoparque .mensaje-estado.status .btn-primary i.fa-solid {
    margin-right: 0;             /* gap on .btn handles spacing now */
}
/* FontAwesome 6 Free `.fa-solid` requires font-weight: 900 to render the
   actual glyph — the free font only ships the solid (900) face. Without
   it the fa-download glyph in the "Descargar entradas" button renders
   blank. Apply to every FA solid icon inside the confirmation shells. */
body.tenant-ecoparque .mensaje-estado.status .btn i.fa-solid,
body.tenant-ecoparque .mensaje-estado.status .btn-primary i.fa-solid,
body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary i.fa-solid,
body.tenant-ecoparque .mensaje-estado .mensaje-icono i.fa-solid {
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
}

/* Cancel the legacy line ~1375 ms-2 / min-width rule that fights the Figma
   spacing — those declarations applied 200px min-width + ms-2 left margin,
   which combined with our flex/gap layout creates uneven button widths. */
body.tenant-ecoparque .status.status-success .mensaje-acciones .ms-2,
body.tenant-ecoparque .mensaje-estado .ms-2 {
    margin-left: 0 !important;
}

/* --- Pago_Valorcero card-specific tweaks --------------------------------
   The success state replaces the .box-tarjeta form, so we need the card
   chrome to read as a confirmation surface, not a payment form. Re-assert
   the 32px padding the old inline style provided, drop the surrounding form
   adornments, and keep the icon left-aligned (was centered with text-align
   inline). */
body.tenant-ecoparque .componente-de-pago-gratuito .box-tarjeta.pago-valorcero-success {
    padding: 32px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* --- Desktop --------------------------------------------------------- */
@media (min-width: 768px) {
    body.tenant-ecoparque .mp-return-page {
        padding: 80px 24px 120px;
    }
    body.tenant-ecoparque .mensaje-estado .mensaje-acciones,
    body.tenant-ecoparque .mensaje-estado .acciones {
        flex-direction: row;
    }
    body.tenant-ecoparque .mensaje-estado.status .btn-primary,
    body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary {
        width: auto;
    }
}

/* --- Mobile (Figma 6311:20674: 428px viewport, full-width stacked buttons) */
@media (max-width: 767px) {
    body.tenant-ecoparque .mp-return-page {
        padding: 40px 16px 64px;
    }
    body.tenant-ecoparque .mp-return-page .mp-return-shell {
        max-width: 100%;
    }
    body.tenant-ecoparque .mensaje-estado .mensaje-titulo,
    body.tenant-ecoparque .mensaje-estado h2.status-title,
    body.tenant-ecoparque .mensaje-estado h4.status-title,
    body.tenant-ecoparque .mensaje-estado h2,
    body.tenant-ecoparque .mensaje-estado h4 {
        font-size: 28px;
        line-height: 36px;
    }
    body.tenant-ecoparque .mensaje-estado .mensaje-acciones,
    body.tenant-ecoparque .mensaje-estado .acciones {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    body.tenant-ecoparque .mensaje-estado.status .btn,
    body.tenant-ecoparque .mensaje-estado.status .btn-primary,
    body.tenant-ecoparque .mensaje-estado.status .btn-outline-primary {
        width: 100%;
    }
    body.tenant-ecoparque .componente-de-pago-gratuito .box-tarjeta.pago-valorcero-success {
        padding: 24px;
    }
}

/* Small-phone (≤ 360px) — keep the title from overflowing on very narrow
   devices like iPhone SE 1st gen. */
@media (max-width: 360px) {
    body.tenant-ecoparque .mensaje-estado .mensaje-titulo,
    body.tenant-ecoparque .mensaje-estado h2.status-title,
    body.tenant-ecoparque .mensaje-estado h4.status-title {
        font-size: 24px;
        line-height: 32px;
    }
}

/* Mobile final density pass — fit 5–6 categories above the fold by:
   - Killing the banner icon, shrinking padding/font, full-bleed within selector
   - Inlining price + name on the tier card (no more 3-line wrap)
   - Smaller stepper (28×28) */
@media (max-width: 991px) {
    /* Banner: no icon, slim padding, full-bleed inside the selector wrapper */
    body.tenant-ecoparque .selector-vista .purchase-notice__icon,
    body.tenant-ecoparque .purchase-notice .material-symbols-rounded {
        display: none !important;
    }
    body.tenant-ecoparque .selector-vista .purchase-notice {
        padding: 8px 12px !important;
        gap: 0 !important;
        font-size: 12px !important;
        line-height: 16px !important;
        margin: 0 -16px 8px -16px !important;
        border-radius: 0 !important;
    }

    /* Tier card: one single line per card. Price · Name on the left
       (inline), stepper on the right — no extra vertical row. */
    body.tenant-ecoparque .entradas-tipo .entrada .Row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
        font-size: 13px !important;
        line-height: 18px !important;
        margin: 0 !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p::after {
        content: " ·";
        opacity: 0.5;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle span {
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 600 !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada {
        padding: 6px 10px !important;
        margin-bottom: 4px !important;
    }

    /* Stepper: 26×26 — sits on the same row as the price/name */
    body.tenant-ecoparque .contador {
        flex: 0 0 auto !important;
        justify-content: flex-end;
        gap: 2px !important;
    }
    body.tenant-ecoparque .contador button,
    body.tenant-ecoparque .contador .mud-button-root {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
    body.tenant-ecoparque .contador .number {
        width: 32px;
        height: 26px;
    }
    body.tenant-ecoparque .contador .number span,
    body.tenant-ecoparque .contador .number .cantidad {
        font-size: 13px;
        line-height: 17px;
    }
}

/* Desktop density pass — fit more categories on shorter monitors.
   Same single-line layout as mobile (price · name + stepper) but with
   touch-friendly sizing kept. Banner left untouched per fede. */
@media (min-width: 992px) {
    body.tenant-ecoparque .ticketeralayout .ticketeraBody .cont-1170 .selector-vista .entradas-tipo .entrada {
        padding: 10px 18px !important;
        margin-bottom: 8px !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .Row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p {
        font-size: 16px !important;
        line-height: 22px !important;
        margin: 0 !important;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle p::after {
        content: " ·";
        opacity: 0.5;
    }
    body.tenant-ecoparque .entradas-tipo .entrada .entrada-detalle span {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
    }
    /* Stepper: 36×36 — still comfortably clickable, row hugs the text */
    body.tenant-ecoparque .contador button,
    body.tenant-ecoparque .contador .mud-button-root {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    body.tenant-ecoparque .contador .number {
        width: 48px;
        height: 36px;
    }
    body.tenant-ecoparque .contador .number span,
    body.tenant-ecoparque .contador .number .cantidad {
        font-size: 16px;
        line-height: 22px;
    }
}


/* ── Preguntas frecuentes header — ecoparque only ──────────────────────────
   A (slightly startled-looking) ñandú on the right of the FAQ header. Rendered
   in its own right-side panel — not a full-width crop — so the bird is clearly
   visible, with a left fade blending it into the teal. The title stays on the
   solid teal at left. Other tenants keep their flat header colour. */
body.tenant-ecoparque .faqs .top {
    position: relative;
    overflow: hidden;
    background-color: #005E7A;
}
body.tenant-ecoparque .faqs .top > .cont-1170 {
    position: relative;
    z-index: 1;   /* keep breadcrumb + title above the photo panel */
}
body.tenant-ecoparque .faqs .top::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: min(50%, 640px);
    background: url('https://ecoparquestorage.blob.core.windows.net/branding/images/ecoparque/especies/nandu.jpg') 60% center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
            mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 640px) {
    /* Drop the photo on phones — keep the clean colour header. */
    body.tenant-ecoparque .faqs .top::after { display: none; }
}

/* ── Mapa del Ecoparque — enlarge / download / fullscreen lightbox ─────────── */
body.tenant-ecoparque .eco-mapa-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: zoom-in;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16,30,55,0.12);
}
body.tenant-ecoparque .eco-mapa-thumb img {
    display: block;
    width: 100%;
    height: auto;
}
body.tenant-ecoparque .eco-mapa-zoom-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(16,30,55,0.72);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
}
body.tenant-ecoparque .eco-mapa-zoom-hint .material-symbols-rounded { font-size: 20px; }
body.tenant-ecoparque .eco-mapa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}
body.tenant-ecoparque .eco-mapa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.tenant-ecoparque .eco-mapa-btn .material-symbols-rounded { font-size: 20px; }
body.tenant-ecoparque .eco-mapa-btn--ghost {
    background: #fff;
    border: 1px solid #336ACC;
    color: #336ACC;
}

/* Fullscreen overlay */
body.tenant-ecoparque .eco-mapa-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(8,15,30,0.92);
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .eco-mapa-overlay-bar {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
}
body.tenant-ecoparque .eco-mapa-overlay-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255,255,255,0.14);
    color: #fff;
    text-decoration: none;
}
body.tenant-ecoparque .eco-mapa-overlay-action:hover { background: rgba(255,255,255,0.28); }
body.tenant-ecoparque .eco-mapa-overlay-action .material-symbols-rounded { font-size: 24px; }
/* Feedback 91 (2026-06-12): open fit-to-screen, centered — was rendering at
   natural size anchored top-left, so the map opened "zoomed into a corner".
   The image now contains within the viewport; pinch-zoom on touch still works. */
body.tenant-ecoparque .eco-mapa-overlay-canvas {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px 24px;
}
body.tenant-ecoparque .eco-mapa-overlay-canvas img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* =============================================================================
   QR "Comprá tu entrada" landing (/hoy) — park-closed modal + empty state
   ========================================================================== */
body.tenant-ecoparque .eco-qr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
body.tenant-ecoparque .eco-qr-modal {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px 32px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
body.tenant-ecoparque .eco-qr-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    line-height: 0;
    padding: 6px;
}
body.tenant-ecoparque .eco-qr-modal-close .material-symbols-rounded { font-size: 24px; }
body.tenant-ecoparque .eco-qr-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e8f8f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.tenant-ecoparque .eco-qr-modal-icon .material-symbols-rounded {
    font-size: 30px;
    color: var(--eco-cta-blue, #0D8A80);
}
body.tenant-ecoparque .eco-qr-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tenant-color-secondary, #1f2937);
    margin-bottom: 10px;
}
body.tenant-ecoparque .eco-qr-modal-text {
    font-size: 15px;
    color: #374151;
    margin-bottom: 24px;
}
body.tenant-ecoparque .eco-qr-modal-btn {
    display: inline-block;
    border: none;
    background: var(--eco-cta-blue, #0D8A80);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
}
body.tenant-ecoparque .eco-qr-modal-btn:hover { filter: brightness(0.95); }
body.tenant-ecoparque .eco-qr-empty {
    text-align: center;
    padding: 64px 16px;
    color: #fff;
}
body.tenant-ecoparque .eco-qr-empty h1 { font-size: 24px; margin-bottom: 8px; }
body.tenant-ecoparque .eco-qr-empty p { margin-bottom: 24px; }

/* ── V6 info-card spec (2026-06-09, Control de acceso client feedback) ─────────
   Supersedes the V4/V5 blocks above. Changes requested:
     • Title only — descriptions removed from the markup.
     • New green gamut (4 swatches: forest / lime / bright / forest).
     • "¿Qué es?" pine icon replaced by the brand "E" logo (<img>).
     • Web: the 4 boxes sit on a single strip (4 across); Mobile: 2×2.
   Last block in the file → wins the cascade; uses !important to beat the
   accumulated earlier rules. ─────────────────────────────────────────────── */

/* Green gamut (left→right per the client swatch) */
body.tenant-ecoparque .eco-info-card--green-dark   { background: #2E6B3E !important; }  /* Qué es */
body.tenant-ecoparque .eco-info-card--green-lime   { background: #B5D334 !important; }  /* Ubicación */
body.tenant-ecoparque .eco-info-card--green-bright  { background: #6FBF3B !important; }  /* Cómo llegar */
body.tenant-ecoparque .eco-info-card--green-forest { background: #1E5631 !important; }  /* Preguntas frecuentes */

/* Text + icon contrast: white on the dark tiles, dark ink on the light tiles. */
body.tenant-ecoparque .eco-info-card--green-dark .eco-info-card-body strong,
body.tenant-ecoparque .eco-info-card--green-forest .eco-info-card-body strong { color: #FFFFFF !important; }
body.tenant-ecoparque .eco-info-card--green-lime .eco-info-card-body strong,
body.tenant-ecoparque .eco-info-card--green-bright .eco-info-card-body strong { color: #0F2E18 !important; }
body.tenant-ecoparque .eco-info-card--green-dark .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--green-dark .eco-info-card-icon-box .material-symbols-outlined,
body.tenant-ecoparque .eco-info-card--green-forest .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--green-forest .eco-info-card-icon-box .material-symbols-outlined { color: #FFFFFF !important; }
body.tenant-ecoparque .eco-info-card--green-lime .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--green-lime .eco-info-card-icon-box .material-symbols-outlined,
body.tenant-ecoparque .eco-info-card--green-bright .eco-info-card-icon-box .material-symbols-rounded,
body.tenant-ecoparque .eco-info-card--green-bright .eco-info-card-icon-box .material-symbols-outlined { color: #0F2E18 !important; }

/* Brand "E" logo in the icon slot (¿Qué es?). */
body.tenant-ecoparque .eco-info-card-logo-e {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

/* Title-only cards are short — drop the 2-line min-height the V5 block forced. */
body.tenant-ecoparque .eco-info-card .eco-info-card-body p { display: none !important; }
body.tenant-ecoparque .eco-info-card {
    min-height: 0 !important;
    padding: 16px 20px !important;
}

/* Web: a single strip — 4 boxes across one row. */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 20px !important;
    }
    body.tenant-ecoparque .eco-info-card {
        min-height: 84px !important;
        height: 100% !important;
    }
}

/* Mobile: 2×2 + compact card layout. Without these the 2-col cards inherited the
   desktop gap(24)/icon(56)/title(20px), leaving ~70px for text so long words
   ("Ecoparque","Ubicación") overflow-wrapped one char per line. Tighten the
   internals and let words break only at spaces. (client 2026-06-09 round 2) */
@media (max-width: 991.98px) {
    body.tenant-ecoparque .eco-info-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr !important;      /* both rows = tallest card */
        align-items: stretch !important;
        gap: 14px !important;
    }
    body.tenant-ecoparque .eco-info-card {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 14px 14px !important;
        /* All four identical: equal width AND height. The grid is 2× minmax(0,1fr),
           but the card is an <a> that otherwise shrinks to its text width (left
           column narrower) — so force it to fill the track, same fix as the
           desktop block (82fcd55). Height: grid-auto-rows:1fr + height:100%. */
        width: 100% !important;
        justify-self: stretch !important;
        min-height: 84px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-rounded,
    body.tenant-ecoparque .eco-info-card .eco-info-card-icon-box .material-symbols-outlined {
        font-size: 30px !important;
    }
    body.tenant-ecoparque .eco-info-card-logo-e {
        width: 26px !important;
        height: 26px !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body.tenant-ecoparque .eco-info-card .eco-info-card-body strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
}

/* Feedback 58/93 (2026-06-12): the grid now carries only two cards (Ubicación +
   Cómo llegar). Override the 4-col desktop track so the pair fills the row instead
   of leaving two empty columns, and cap the width so the boxes don't stretch.
   Scoped to .eco-home-info-cards--two so any other 4-card grid is unaffected.
   Mobile already lays out as repeat(2,…) → one clean row, no override needed. */
@media (min-width: 992px) {
    body.tenant-ecoparque .eco-home-info-cards--two .eco-info-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 620px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ── Hero slogan on mobile: smaller and anchored top-left (client 2026-06-09:
   "Reducirlo y ubicarlo en la parte superior izquierda"). Desktop unchanged.
   Scoped to the HOME hero only — .eco-home-hero:not(.eco-page-hero) — so it does
   NOT leak into /actividades (which reuses .eco-hero-overlay/.eco-hero-content
   but adds .eco-page-hero). /actividades keeps its own centered hero below. */
@media (max-width: 768px) {
    body.tenant-ecoparque .eco-home-hero:not(.eco-page-hero) .eco-hero-overlay {
        align-items: flex-start !important;
        padding-top: 32px !important;
    }
    body.tenant-ecoparque .eco-home-hero:not(.eco-page-hero) .eco-hero-content {
        align-items: flex-start !important;
        text-align: left !important;
    }
    body.tenant-ecoparque .eco-home-hero:not(.eco-page-hero) .eco-hero-content h1 {
        font-size: 34px !important;
        line-height: 38px !important;
        max-width: 78% !important;
    }
}

/* ── Mobile header CTA → ticket pill bottom-left (client 2026-06-09:
   "Sacar el botón comprá tu entrada del header y poner el botón con el ticket
   (como en la web) en la parte inferior izquierda"). Desktop unchanged. ──── */
@media (max-width: 768px) {
    /* Remove the text "Comprá tu entrada" button from the header. */
    body.tenant-ecoparque .btn-header-cta { display: none !important; }
    /* Show the ticket pill (yellow ticket icon + button) anchored left, 25% up
       from the bottom of the hero/video (≈75% down from the top) — same control
       the desktop hero uses. % is relative to the hero height (its positioned
       ancestor), so the pill tracks the video as it scales. Lifted off the bottom
       edge (was 24px) so it doesn't fall below the fold on the tall mobile hero. */
    body.tenant-ecoparque .eco-hero-pill,
    body.tenant-ecoparque .eco-hero-pill.eco-hero-pill--desktop-only {
        display: inline-flex !important;
        position: absolute;
        left: 16px;
        bottom: 25%;
        z-index: 3;
    }
}

/* ── Visit detail: "Punto de encuentro y duración" block (client 2026-06-09:
   replaces "Ubicación del parque"; rows stacked like the old entrada/horarios). */
body.tenant-ecoparque .eco-punto-duracion-section {
    margin-bottom: 40px;
}
body.tenant-ecoparque .eco-punto-duracion-section h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-punto-duracion-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    color: var(--eco-muted);
    margin-bottom: 8px;
}
body.tenant-ecoparque .eco-punto-duracion-row .material-symbols-rounded {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--eco-cta-blue);
}

/* ── Actividades: atracciones are fixed photos, not clickable (client 2026-06-09). */
body.tenant-ecoparque .eco-especie-card--static,
body.tenant-ecoparque .eco-especie-card--static .eco-especie-img {
    cursor: default !important;
}

/* ── ¿Qué es?: Especies promo replacing the 4 stat boxes (client 2026-06-10).
   A self-contained, on-brand green call-out card with a striking lime CTA — so
   it reads as an intentional feature, not a bare heading/paragraph that clashes
   with the page (neither the old centered nor the left-aligned section-title
   treatment fit). Own heading class so the global section-title rule doesn't
   force it left. ─────────────────────────────────────────────────────────── */
body.tenant-ecoparque .eco-especies-promo {
    background: linear-gradient(135deg, #2E6B3E 0%, #1E5631 100%);
    border-radius: 16px;
    padding: 52px 32px;
    margin: 40px auto 24px;   /* breathing room from the intro paragraph + below */
    text-align: center;
    color: #FFFFFF;
    box-shadow: 0 8px 28px rgba(30, 86, 49, 0.18);
}
/* Extra space around the ¿Qué es? intro paragraph above the Especies card. */
body.tenant-ecoparque .eco-page-section > .cont-1170 > .eco-page-lead {
    margin-bottom: 8px;
    line-height: 1.7;
}
body.tenant-ecoparque .eco-especies-promo-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
    color: #FFFFFF;
    margin: 0 0 12px;
}
body.tenant-ecoparque .eco-especies-promo .eco-page-lead {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.92);
}
/* Same look as the MAMÍFEROS especies tab (.eco-especies-tab.is-active):
   green fill, white text, no border outline. */
body.tenant-ecoparque .eco-especies-promo-cta {
    display: inline-block;
    margin-top: 26px;
    font-size: 18px;
    font-weight: 800;
    padding: 14px 34px;
    border-radius: 999px;
    background-color: #2F9E64 !important;
    border: none !important;
    outline: none !important;      /* kill the rest-state blue outline (#336ACC) */
    box-shadow: none !important;
    color: #FFFFFF !important;
}
body.tenant-ecoparque .eco-especies-promo-cta:hover,
body.tenant-ecoparque .eco-especies-promo-cta:focus,
body.tenant-ecoparque .eco-especies-promo-cta:focus-visible,
body.tenant-ecoparque .eco-especies-promo-cta:active {
    background-color: #2A8D59 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;   /* kill the Bootstrap btn-primary blue focus ring/border */
    outline: none !important;
}

/* Activity-card description clamped to four lines (EP-47: up to 4 renglones;
   JS upgrades the native ellipsis to "(…)" when a 5th line would overflow —
   see ecoApplyVisitaClamp in main.js). This CSS rule is the no-JS fallback. */
body.tenant-ecoparque .eco-visita-body > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visitas Escolares — key-facts list below the feature block (client 2026-06-10). */
body.tenant-ecoparque .eco-visitas-escolares-datos {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.tenant-ecoparque .eco-visitas-escolares-datos li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #101E37;
}
body.tenant-ecoparque .eco-visitas-escolares-datos .material-symbols-rounded {
    color: var(--tenant-color-secondary);
    font-size: 22px;
}

/* =============================================================================
   EP-47 fixes (ecoparque-only) — appended last so they win over earlier blocks.
   ========================================================================== */

/* #5: the home "Seguinos en" row set .eco-social-links { width:100% } while it
   sits as a flex sibling of the title — title + gap + 100% overflowed the page
   ~70px, which made the whole site (header included) scroll/shift horizontally
   at desktop. Let the links take the REMAINING space and wrap instead. */
body.tenant-ecoparque .eco-social-section .cont-1170 { flex-wrap: wrap; }
body.tenant-ecoparque .eco-social-links {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
}

/* #6: the /actividades hero reuses the home-hero classes, which on mobile force
   a tall portrait aspect-ratio (428/846) + 166px top padding. The actividades
   hero (.eco-home-hero.eco-page-hero — the only hero carrying BOTH classes;
   the home hero is .eco-home-hero only, /como-llegar is .eco-page-hero only)
   should just contain its title on mobile. */
@media (max-width: 991px) {
    /* The overlay that holds the title is position:absolute (inset:0), so it adds
       no height — give the hero an explicit short band instead of the home hero's
       tall portrait aspect-ratio, just enough to contain the centered title. */
    body.tenant-ecoparque .eco-home-hero.eco-page-hero {
        aspect-ratio: auto;
        min-height: 200px;
    }
    body.tenant-ecoparque .eco-home-hero.eco-page-hero .eco-hero-overlay {
        padding: 24px 16px;
        align-items: center;
    }
    body.tenant-ecoparque .eco-home-hero.eco-page-hero .eco-hero-content h1 {
        font-size: 34px;
        line-height: 1.12;
    }
}

/* EP-46: optional CMS-managed "Planificá tu visita" subtitle (Descripción).
   Renders only when the operator sets it (empty = unchanged home). Typography
   comes from the shared .eco-section-lead (Open Sans 18/28, #101E37) so it matches
   the "Visitas exclusivas" lead; here we only drop the lead's default bottom margin
   (the .eco-animal-gallery-header already supplies the 24px gap to the track). */
body.tenant-ecoparque .eco-animal-gallery-lead {
    margin: 0;
}
/* Optional CMS subtitle under a page hero (e.g. /actividades). */
body.tenant-ecoparque .eco-hero-content .eco-page-hero-sub {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 10px 0 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Correcciones 2026-06-10: event-detail CTA card — drop the teal box (background
   + border) so it sits flat on the page; dark text, keep the blue button. */
body.tenant-ecoparque .eco-cta-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--tenant-color-secondary);
}
body.tenant-ecoparque .eco-cta-card h5,
body.tenant-ecoparque .eco-cta-card p,
body.tenant-ecoparque .eco-cta-card .eco-cta-price {
    color: var(--tenant-color-secondary);
}

/* Correcciones 2026-06-10: "Animales del Ecoparque" segment in ¿Qué es? — keep the
   section but remove the green box (background, border, shadow); dark text, flat on
   the page. The lime CTA button stays. */
body.tenant-ecoparque .eco-especies-promo {
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 16px 0 8px;
}
body.tenant-ecoparque .eco-especies-promo-title,
body.tenant-ecoparque .eco-especies-promo .eco-page-lead {
    color: var(--tenant-color-secondary);
}

/* Correcciones: bold the "Volver" back link in the guest-checkout flow (ecoparque). */
body.tenant-ecoparque .ticketera-back-link span {
    font-weight: 700;
}

/* Correcciones (Image #4): MP/payment confirmation — the new success body already
   says "descargalos acá abajo", so hide the redundant note; move the Reserva/Operación
   line below it and shrink it; shrink the action buttons. Ecoparque-scoped. */
body.tenant-ecoparque .mensaje-estado .mensaje-bajada {
    display: flex;
    flex-direction: column;
}
body.tenant-ecoparque .mensaje-estado .status-text-guest {
    display: none;
}
body.tenant-ecoparque .mensaje-estado .status-list {
    order: 3;
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}
body.tenant-ecoparque .mensaje-acciones .btn {
    font-size: 14px;
    padding: 8px 18px;
}

/* Checkout (Pago.razor): hide the card-number field's clear "X" so a buyer
   can't wipe the whole entry in one tap — they edit it manually. Scoped to the
   card-number field via :has(#creditcard-input); ecoparque-only via this
   stylesheet + body.tenant-ecoparque. MudBlazor 9.4 clear button =
   .mud-input-clear-button. */
body.tenant-ecoparque .mud-input-control:has(#creditcard-input) .mud-input-clear-button {
    display: none !important;
}