/**
 * TICKETMAX Standalone Single Product Page
 * Pixel-perfect con el diseno de referencia (post 217454).
 * Measured against https://ticketmax.org/evento/241905/ at 1440/1024/768/390.
 */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; border: none; }
ul { list-style: none; }
button, input, select { font-family: inherit; }

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}



/* Main content container (max-width 1300px del diseno de referencia) */
.tm-sp-main .tm-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ═══ BANNER (desktop: full-width blurred image extending past viewport edges)
 *  NO background — el blur debe extenderse sobre el fondo real (blanco del body),
 *  NO sobre #000 que creaba un halo oscuro ("sombra") que el target no tiene.
 * ═══ */
.tm-sp-banner-section {
    width: 100%;
    margin: -40px 0 0;
    padding: 0 15px;
    background: transparent;
    /* La img del banner hace bleed (width:100%+40px, margin -20px) para el efecto
       full-bleed borroso; sin esto se pasa ~5px del viewport y mete scroll
       horizontal en TODA la página en desktop/tablet. overflow:hidden recorta
       el bleed al ancho del viewport sin perder el efecto. */
    overflow: hidden;
}
.tm-sp-banner-img {
    width: calc(100% + 40px);
    max-width: none;
    height: 380px;
    margin: 0 -20px;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: blur(6px);
}

/* ═══ MAIN CONTENT ═══ */
.tm-sp-main {
    padding: 0 0 60px;
}
.tm-sp-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

/* Columns (default desktop) — widths sum to 100% via padding instead of margin */
.tm-sp-col-left {
    flex: 0 0 auto;
    width: 63%;
    padding: 10px 40px 10px 10px;
}
.tm-sp-col-right {
    flex: 0 0 auto;
    width: 36.333%;
    padding: 10px 10px 10px 20px;
    margin-top: -220px;
    position: relative;
    z-index: 2;
}

/* Gallery card (poster image on right column, desktop only)
 * Target gap entre poster-bottom e info-top: 40px (measured 241905)
 * NO box-shadow */
.tm-sp-gallery { width: 100%; margin: 0 0 40px; }
.tm-sp-gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #f0f0f0;
    border: 7px solid #E9EDF1;
    margin: 0;
    box-shadow: none;
}
.tm-sp-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══ TITLE ═══ */
.tm-sp-title {
    font-family: 'Poppins', sans-serif;
    font-size: 43px;
    font-weight: 700;
    line-height: 43px;
    color: #212529;
    margin: 30px 0 15px 0;
    padding: 0;
}

/* ═══ DESCRIPTION ═══ */
.tm-sp-description {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 30px;
    color: #212529;
    border-top: 5px solid #ECF0F3;
    padding: 10px 0 0 0;
    margin: 0;
}
.tm-sp-description p { margin: 0 0 12px; }
.tm-sp-description p:last-child { margin-bottom: 0; }
.tm-sp-description b, .tm-sp-description strong { font-weight: 600; }

/* ═══ CARD SECTIONS (Boletos + Información) ═══ */
.tm-sp-card {
    background: #F8F9FA;
    border-radius: 15px;
    margin: 10px 0 0 0;
    padding: 0;
    overflow: hidden;
}
/* Info card en col-right: sin margin-top; gap viene de .tm-sp-gallery (40px) */
.tm-sp-col-right > .tm-sp-card { margin-top: 0; }
.tm-sp-card-inner {
    padding: 20px 30px;
}

/* ═══ BOLETOS SECTION (left column on desktop) ═══ */
.tm-sp-boletos-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 25px;
    color: #212529;
    margin: 0 0 5px;
    padding: 0;
}
.tm-sp-divider-boletos {
    width: 113px;
    border: 0;
    border-top: 5px solid #212529;
    margin: 2px 0 15px 0;
    padding: 0;
    height: 0;
    display: block;
}

/* ═══ INFORMATION SECTION (right column) ═══ */
.tm-sp-info-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 23px;
    color: #212529;
    margin: 25px 0 4px 39px;
    padding: 0;
}
.tm-sp-divider-info {
    width: 39%;
    border: 0;
    border-top: 4px solid #212529;
    margin: 2px 0 2px 38px;
    padding: 0;
    height: 0;
    display: block;
}
.tm-sp-info-list {
    margin: 0 0 0 10%;
    padding: 20px 35px 25px 0;
    list-style: none;
}
.tm-sp-info-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 0;
}
.tm-sp-info-item:first-child { padding-top: 0; }
.tm-sp-info-item:last-child  { padding-bottom: 0; }
.tm-sp-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    padding-top: 2px;
    margin-right: 5px;
}
.tm-sp-info-icon svg {
    width: 22px;
    height: 22px;
    fill: #000;
}
.tm-sp-info-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #212529;
    line-height: 1.5;
}

/* ═══ Mobile/Desktop visibility ═══ */
.tm-sp-show-mobile-only { display: none; }

/* ═══ RESPONSIVE — Tablet (768–1024) ═══ */
@media (min-width: 768px) and (max-width: 1024px) {
    .tm-sp-banner-img { height: 280px; }

    /* Match target: container full-width, columns edge-to-edge 60/40 */
    .tm-sp-main .tm-container { max-width: 100%; padding: 0; }
    .tm-sp-col-left  { width: 60%; padding: 0 4px 0 6px; }
    .tm-sp-col-right { width: 40%; padding: 0 6px 0 0; margin-top: -180px; }

    .tm-sp-title { font-size: 36px; line-height: 36px; margin: 22px 0 0 10px; }

    .tm-sp-card { margin: 0; }

    .tm-sp-info-heading { font-size: 21px; line-height: 21px; margin: 20px 0 4px 30px; }
    .tm-sp-divider-info { margin-left: 30px; width: 150px; }
    .tm-sp-info-list { margin-left: 30px; padding: 10px 0 15px 0; }
    .tm-sp-info-icon svg { width: 20px; height: 20px; }
    .tm-sp-info-text { font-size: 14px; }
}

/* ═══ RESPONSIVE — Mobile (≤767) ═══ */
@media (max-width: 767px) {

    .tm-sp-banner-section { display: none; }
    .tm-sp-show-mobile-only { display: block; }
    .tm-sp-hide-mobile { display: none !important; }

    .tm-sp-main .tm-container { max-width: 100%; padding: 0; }

    .tm-sp-columns { flex-direction: column; }
    .tm-sp-col-left,
    .tm-sp-col-right {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .tm-sp-col-left  { order: 1; padding: 15px 15px 15px 15px; }
    .tm-sp-col-right { order: 2; padding: 0; }

    /* Mobile banner — full-width 1:1 aspect, NO border/radius (matches target) */
    .tm-sp-mobile-banner {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .tm-sp-mobile-banner .tm-sp-gallery-main {
        aspect-ratio: 1 / 1;
        max-height: none;
        border: 0;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }
    .tm-sp-mobile-banner .tm-sp-main-image {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center center;
    }

    /* Title — match target mobile 36/36 */
    .tm-sp-title {
        font-size: 36px;
        line-height: 36px;
        margin: 5px 0 15px 0;
        padding: 0;
    }
    .tm-sp-description {
        font-size: 15px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    /* Info card: full width, NO border-radius on mobile (target behavior) */
    .tm-sp-col-right > .tm-sp-card:first-child {
        border-radius: 0;
        margin: -18px 0 22px 0;
    }
    /* Boletos mobile card: keep 15px radius, padding on sides */
    .tm-sp-col-right > .tm-sp-card.tm-sp-show-mobile-only {
        border-radius: 15px;
        margin: 0 17px -22px 17px;
    }
    .tm-sp-card-inner { padding: 20px 30px; }

    .tm-sp-boletos-heading { font-size: 25px; line-height: 25px; }
    .tm-sp-divider-boletos { width: 113px; }

    .tm-sp-info-heading { font-size: 21px; line-height: 21px; margin: 12px 0 5px 30px; }
    .tm-sp-divider-info { margin-left: 30px; width: 160px; }
    .tm-sp-info-list { margin-left: 10%; padding: 10px 0 20px 0; }
}

/* ═══ Product form tweaks to fit card layout ═══ */
.tm-sp-form-wrap { padding-top: 5px; }
.tm-sp-form-wrap .ticketmax-pf-container { background: transparent; box-shadow: none; padding: 0; }

/* Match target button sizes measured at 241905 (2026-04-16):
 *  Available pill: w 160 h 44 fs 9.1 fw 600 border 2px #1A1A1A radius 50px
 *  COMPRAR main:   h 46.5 fs 15.4 bg #1A1A1A radius 50px NO shadow
 */
.tm-sp-form-wrap .ticketmax-pf-available,
.tm-sp-form-wrap .ticketmax-pf-low-stock {
    font-size: 9.1px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 0 7px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 50px !important;
    border: 2px solid #1A1A1A !important;
}
.tm-sp-form-wrap .ticketmax-pf-low-stock {
    border-color: #f57c00 !important;
}
.tm-sp-form-wrap .ticketmax-pf-buy-btn {
    height: 46.5px !important;
    font-size: 15.4px !important;
    border-radius: 50px !important;
    box-shadow: none !important;
    background: #1A1A1A !important;
}

/* Barra de compra sticky (solo móvil) — CTA "Comprar boletos" siempre visible
   que salta a la card de Boletos. Se ubica SOBRE el bottom-nav (56px+safe-area)
   y se oculta (via JS IntersectionObserver) cuando Boletos ya está en pantalla.
   Negro #1A1A1A = mismo color del botón de compra real (consistencia + contraste). */
.tm-sp-buybar { display: none; }
@media (max-width: 767px) {
  .tm-sp-buybar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 84px; /* deja libre la esquina del botón flotante de WhatsApp (60px + margen) */
    bottom: calc(56px + env(safe-area-inset-bottom) + 10px);
    z-index: 999;
    height: 52px;
    background: #1A1A1A;
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  }
  /* Con precio: precio a la izquierda (bold) + CTA a la derecha. */
  .tm-sp-buybar.tm-has-price {
    justify-content: space-between;
    padding: 0 18px;
    gap: 12px;
  }
  .tm-sp-buybar-price {
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
  }
  .tm-sp-buybar-cta {
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* SIN white-space:nowrap. Lo añadí al meter el estado "Continuar" y provocó
       que el estado base ("Comprar boletos →") desbordara 13px del recuadro: la
       barra mide 294px a 390px y precio + CTA en una línea no caben. Con ajuste
       normal, "Comprar boletos" parte en dos dentro de los 52px de alto —
       comportamiento original y correcto. "Continuar" es corto y cabe en una. */
  }
  .tm-sp-buybar.tm-has-price .tm-sp-buybar-cta::after { content: '\2192'; opacity: 0.85; }
  .tm-sp-buybar-hidden {
    transform: translateY(160%);
    opacity: 0;
    pointer-events: none;
  }
}
/* Desktop: el CTA/precio de compra queda BAJO el fold (form en col-left, top ~950).
   Misma barra que en móvil pero como pill flotante centrada abajo — visible mientras
   se hace scroll, se oculta (JS) cuando el form ya está en pantalla. La página de
   evento es corta, así que aparece solo en el primer tramo de scroll. */
@media (min-width: 768px) {
  .tm-sp-buybar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 999;
    min-width: 340px;
    max-width: 460px;
    height: 56px;
    padding: 0 10px;
    background: #1A1A1A;
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  }
  .tm-sp-buybar.tm-has-price {
    justify-content: space-between;
    padding: 0 22px;
  }
  .tm-sp-buybar .tm-sp-buybar-price { font-weight: 800; font-size: 17px; white-space: nowrap; }
  .tm-sp-buybar .tm-sp-buybar-cta {
    font-weight: 700; font-size: 15px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #1A1A1A;
    padding: 8px 16px; border-radius: 9px;
  }
  .tm-sp-buybar.tm-has-price .tm-sp-buybar-cta::after { content: '\2192'; opacity: 0.85; }
  .tm-sp-buybar.tm-sp-buybar-hidden {
    transform: translate(-50%, 220%);
    opacity: 0;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-sp-buybar { transition: opacity 0.2s ease; }
  .tm-sp-buybar-hidden { transform: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .tm-sp-buybar-hidden { transform: translateX(-50%); }
}

/* Fila de confianza bajo el form de Boletos — aval en el punto de compra. */
.tm-sp-trust {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
  text-align: center;
}
.tm-sp-trust-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a7f37; /* verde confianza, ~4.9:1 en blanco */
}
.tm-sp-trust-secure svg { flex-shrink: 0; }
/* A 390px la frase parte en dos y dejaba "correo" solo en la segunda línea.
   `balance` reparte las dos líneas y quita el huérfano; el candado sigue
   centrado verticalmente porque el flex ya usa align-items:center. */
.tm-sp-trust-secure span { text-wrap: balance; }
.tm-sp-trust-methods {
  margin-top: 5px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 12px;
  color: #595959;
}