/* ==========================================================================
   VARIABLES DE COLOR Y DISEÑO (Identidad Paradox Park)
   ========================================================================== */
:root {
    --purple: #7927CD;
    --purple-dark: #29113f;
    --cyan: #d9c8ff;
    --orange-start: #FF7700;
    --orange-end: #FFD0A7;
    --white: #ffffff;
    --black: #020104;
    --border-light: rgba(226, 209, 255, 0.26);
    --muted: #c5becd;
    --success: #55c987;
    --warning: #f59e0b;
    --error: #c03f3f;
    --bg-dark: rgba(8, 5, 12, 0.68);
    --panel-purple: linear-gradient(145deg, rgba(29, 20, 38, 0.86) 0%, rgba(10, 7, 14, 0.94) 58%, rgba(31, 14, 44, 0.86) 100%);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.paradox-ty {
    background-color: var(--black);
    background-image:
        radial-gradient(65% 58% at 88% 16%, rgba(73, 29, 105, 0.4) 0%, rgba(32, 12, 47, 0.16) 45%, transparent 76%),
        radial-gradient(52% 46% at 8% 56%, rgba(87, 35, 124, 0.24) 0%, rgba(27, 11, 40, 0.1) 48%, transparent 78%),
        radial-gradient(circle at 42% 8%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 38%, rgba(218, 194, 255, 0.08) 0 1px, transparent 2px),
        linear-gradient(180deg, #020104 0%, #08040d 47%, #020104 100%);
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-size: 100% 1500px, 100% 1700px, 180px 180px, 260px 260px, 100% 100%;
    color: var(--white);
    min-height: 60vh;
    padding: 0 0 80px;
    font-family: "Museum", "Georgia", "Times New Roman", serif;
    line-height: 1.6;
}

.paradox-ty .ty-hero {
    border-bottom: 1px solid rgba(226, 209, 255, 0.12);
    text-align: center;
    padding: 78px 24px 58px;
    background: linear-gradient(180deg, rgba(32, 13, 46, 0.16), rgba(0, 0, 0, 0));
}

.paradox-ty .ty-check-badge {
    width: 94px; height: 94px;
    border-radius: 50%; margin: 0 auto 26px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: rgba(13, 20, 17, 0.64);
    border: 2px solid rgba(102, 221, 151, 0.7);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    animation: tyPop .5s cubic-bezier(.34,1.56,.64,1) both, tyPulseRing 1.8s ease-out .5s 1;
}
.paradox-ty .ty-check-badge.failed {
    background: rgba(37, 9, 15, 0.64);
    border-color: rgba(220, 92, 92, 0.75);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    animation: tyPop .5s cubic-bezier(.34,1.56,.64,1) both, tyPulseRingError 1.8s ease-out .5s 1;
}

.paradox-ty .ty-check-icon {
    position: relative;
    width: 40px;
    height: 40px;
    margin-top: -2px;
}

.paradox-ty .ty-check-line {
    position: absolute;
    background: var(--success);
    border-radius: 3px;
}

.paradox-ty .ty-check-line-1 {
    width: 5px;
    height: 16px;
    bottom: 12px;
    left: 14px;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    animation: tyDrawShort 0.25s ease 0.55s both;
}

.paradox-ty .ty-check-line-2 {
    width: 5px;
    height: 28px;
    bottom: 12px;
    left: 16px;
    transform: rotate(45deg);
    transform-origin: bottom left;
    animation: tyDrawLong 0.35s ease 0.75s both;
}

@keyframes tyDrawShort {
    from { height: 0; }
    to { height: 16px; }
}
@keyframes tyDrawLong {
    from { height: 0; }
    to { height: 28px; }
}
.paradox-ty .ty-badge {
    display: inline-block; background: rgba(28, 39, 33, 0.78); color: #a9edc4; font-weight: 800;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 9px 20px; margin-bottom: 26px; border-radius: 999px;
    border: 1px solid rgba(120, 230, 166, 0.28); box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.paradox-ty .ty-badge.failed { background: rgba(73, 17, 27, 0.72); color: #ffd7dc; }

.paradox-ty h1 { font-size: clamp(2.35rem, 4.8vw, 3.5rem); font-weight: 900; font-style: italic; letter-spacing: -0.025em; text-transform: none; margin: 0 0 18px; line-height: 1.08; color: var(--white); text-shadow: 0 4px 24px rgba(255,255,255,0.16); }
.paradox-ty h1 span { color: var(--white); }
.paradox-ty p.ty-sub { color: var(--muted); font-family: "Inter", Arial, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.7; max-width: 600px; margin: 0 auto; }

.paradox-ty .ty-wrap { max-width: 1000px; margin: 52px auto 0; padding: 0 20px; }
.paradox-ty .ty-pills { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 22px; margin-bottom: 46px; }

.paradox-ty .ty-pill {
    border: 1px solid var(--border-light);
    background: var(--panel-purple);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    border-radius: 24px;
    padding: 24px 20px;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.paradox-ty .ty-pill:hover {
    transform: translateY(-5px);
    border-color: rgba(226, 209, 255, 0.36);
    background: linear-gradient(145deg, rgba(41, 24, 55, 0.8), rgba(10, 7, 14, 0.92));
}
.paradox-ty .ty-pill:hover strong,
.paradox-ty .ty-pill:hover strong * { color: var(--white) !important; }

.paradox-ty .ty-pill span { display: block; font-family: "Inter", Arial, sans-serif; font-size: .68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 9px; }
.paradox-ty .ty-pill strong,
.paradox-ty .ty-pill strong * { font-size: 1.15rem; line-height: 1.25; color: var(--white) !important; font-weight: 900; font-style: italic; font-family: "Museum", "Georgia", serif; word-break: normal; overflow-wrap: break-word; transition: color 0.3s; }
.paradox-ty .ty-pill strong .woocommerce-Price-amount,
.paradox-ty .ty-pill strong .woocommerce-Price-amount bdi,
.paradox-ty .ty-pill strong .woocommerce-Price-currencySymbol { display: inline; white-space: nowrap; word-break: normal; overflow-wrap: normal; }

.paradox-ty .ty-section {
    border: 1px solid var(--border-light);
    border-radius: 28px;
    padding: 36px;
    margin-bottom: 32px;
    background: var(--panel-purple);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.paradox-ty .ty-section:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 209, 255, 0.34);
    box-shadow: var(--glass-shadow);
}
.paradox-ty .ty-section h2 { color: var(--white); font-weight: 900; font-style: italic; text-transform: none; letter-spacing: -.01em; font-size: 1.15rem; margin: 0 0 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.paradox-ty table { width: 100%; border-collapse: collapse; font-family: "Inter", Arial, sans-serif; font-size: .85rem; }
.paradox-ty table th, .paradox-ty table td { border-bottom: 1px solid rgba(226,209,255,0.12); padding: 13px 8px; text-align: left; word-break: break-word; }
.paradox-ty table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; }
.paradox-ty table td { color: var(--white); }

.paradox-ty .ty-native-details > section,
.paradox-ty .ty-native-details .woocommerce-order-details,
.paradox-ty .ty-native-details .woocommerce-customer-details,
.paradox-ty .ty-native-details .woocommerce-bacs-bank-details,
.paradox-ty .ty-native-details .wc-bacs-bank-details {
    border: 1px solid var(--border-light);
    border-radius: 30px;
    padding: 42px;
    margin: 0 0 34px;
    background: var(--panel-purple);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    color: var(--white);
    box-shadow: var(--glass-shadow);
}
.paradox-ty .ty-native-details h2,
.paradox-ty .ty-native-details h3,
.paradox-ty .ty-native-details .woocommerce-order-details__title,
.paradox-ty .ty-native-details .woocommerce-column__title {
    color: var(--white) !important;
    font-family: "Museum", "Georgia", serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.01em;
    text-transform: none;
    margin: 0 0 22px;
}
.paradox-ty .ty-native-details table,
.paradox-ty .ty-native-details .shop_table {
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--white);
}
.paradox-ty .ty-native-details table th,
.paradox-ty .ty-native-details table td,
.paradox-ty .ty-native-details .shop_table th,
.paradox-ty .ty-native-details .shop_table td {
    padding: 10px 8px;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    color: var(--white) !important;
}
.paradox-ty .ty-native-details table tr:last-child th,
.paradox-ty .ty-native-details table tr:last-child td {
    border-bottom: none;
}
.paradox-ty .ty-native-details address,
.paradox-ty .ty-native-details p,
.paradox-ty .ty-native-details li {
    color: var(--white);
    font-style: normal;
    line-height: 1.6;
}
.paradox-ty .ty-native-details a {
    color: var(--cyan);
    font-weight: 700;
}

.paradox-ty .ty-actions { display: flex; gap: 22px; justify-content: center; margin: 42px 0 54px; flex-wrap: wrap; }
.paradox-ty .ty-btn {
    background: linear-gradient(90deg, var(--orange-start) 0%, var(--orange-end) 100%);
    color: #241004; font-family: "Inter", Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
    min-height: 58px; padding: 17px 34px; border-radius: 16px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 7px 0 #9e430d, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.42);
}
.paradox-ty .ty-btn:hover { transform: translateY(-2px); filter: saturate(.95) brightness(1.04); }
.paradox-ty .ty-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #9e430d, 0 8px 18px rgba(0,0,0,.3); }
.paradox-ty .ty-btn.pdf {
    background: linear-gradient(90deg, #bf3634 0%, #f0a5a2 100%);
    border-color: rgba(255,255,255,.18);
    color: #ffffff;
    box-shadow: 0 7px 0 #74201f, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.paradox-ty .ty-btn.pdf:hover {
    background: linear-gradient(90deg, #c83b38 0%, #f4aaa7 100%);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 7px 0 #74201f, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.paradox-ty .ty-btn.outline {
    background: linear-gradient(90deg, #6530a0 0%, #c6a9e8 100%);
    border-color: rgba(255,255,255,.18);
    color: #ffffff;
    box-shadow: 0 7px 0 #351553, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3);
}
.paradox-ty .ty-btn.outline:hover {
    background: linear-gradient(90deg, #7137ad 0%, #cfb5eb 100%);
    border-color: rgba(255,255,255,.24);
    color: #ffffff;
    box-shadow: 0 7px 0 #351553, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3);
}

.paradox-ty .ty-btn.whatsapp { background: linear-gradient(90deg, #239b50 0%, #9ae8b8 100%); color: #082b16; border-radius: 16px; box-shadow: 0 7px 0 #12592d, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.36); }
.paradox-ty .ty-btn.whatsapp:hover { background: linear-gradient(90deg, #28a958 0%, #a7edc1 100%); box-shadow: 0 7px 0 #12592d, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.36); }
.paradox-ty .ty-btn.email {
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
    background: linear-gradient(90deg, #6530a0 0%, #c6a9e8 100%);
    border-radius: 16px;
    box-shadow: 0 7px 0 #351553, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3);
}
.paradox-ty .ty-btn.email:hover {
    border-color: rgba(255,255,255,.24);
    color: #ffffff;
    background: linear-gradient(90deg, #7137ad 0%, #cfb5eb 100%);
    box-shadow: 0 7px 0 #351553, 0 16px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3);
}

.paradox-ty .transfer-box {
    border: 1px solid var(--border-light);
    border-radius: 30px;
    padding: 42px; margin-bottom: 34px;
    background: var(--panel-purple);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.paradox-ty .transfer-box:hover { transform: translateY(-3px); border-color: rgba(226,209,255,.34); }
.paradox-ty .transfer-box h3 { color: var(--white); font-weight: 900; font-style: italic; text-transform: none; letter-spacing: -.01em; font-size: 1.15rem; margin: 0 0 22px; }
.paradox-ty .form-row { margin-bottom: 18px; }
.paradox-ty .form-row label { display: block; font-family: "Inter", Arial, sans-serif; font-size: .7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; }

.paradox-ty .input-box {
    width: 100%;
    min-height: 54px;
    background: rgba(8, 5, 12, .7);
    border: 1px solid rgba(226, 209, 255, 0.2);
    border-radius: 14px;
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    font-weight: 500;
    padding: 14px 16px; font-size: .95rem; outline: none; transition: border-color 0.3s ease, background 0.3s ease;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.34);
}
.paradox-ty .input-box::placeholder { color: rgba(221, 213, 229, 0.46); font-weight: 400; }
.paradox-ty .input-box:focus { border-color: rgba(212,184,242,.62); background: rgba(17,10,24,.82); box-shadow: inset 0 1px 6px rgba(0,0,0,.34); }

.paradox-ty .share-box { text-align: center; padding: 38px 36px; border: 1px solid var(--border-light); border-radius: 28px; background: var(--panel-purple); backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%); box-shadow: var(--glass-shadow); transition: transform 0.3s ease, border-color 0.3s ease; }
.paradox-ty .share-box:hover { transform: translateY(-3px); border-color: rgba(226,209,255,.42); }
.paradox-ty .share-box h3 { font-size: 1.3rem; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; margin: 0 0 12px; color: var(--white); }
.paradox-ty .share-box p { color: var(--muted); font-family: "Inter", Arial, sans-serif; font-weight: 400; font-size: .88rem; line-height: 1.65; max-width: 560px; margin: 0 auto 24px; }
.paradox-ty .share-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.paradox-ty .share-btns a {
    width: 48px; height: 48px; border: 1px solid rgba(226,209,255,.3); border-radius: 13px;
    background: rgba(13,8,18,.72);
    display: inline-flex; align-items: center; justify-content: center; color: #e0c9f7; font-weight: 800; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.paradox-ty .share-btns a:hover { color: #ffffff; background: rgba(64,31,87,.78); transform: translateY(-3px); box-shadow: 0 10px 18px rgba(0,0,0,.28); }

.paradox-ty .sticker {
    display: inline-block;
    background: linear-gradient(90deg, #6e35a7 0%, #ccb0e9 100%);
    color: #ffffff;
    font-weight: 900;
    font-style: italic;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 10px;
    transform: rotate(-2deg);
    box-shadow: 0 6px 0 #351553, 0 12px 24px rgba(0, 0, 0, 0.28);
}

@media (max-width:900px){
    .paradox-ty .ty-wrap{padding:0 18px}
    .paradox-ty .ty-pills{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
}

@media (max-width:640px){
    .paradox-ty{padding-bottom:52px}
    .paradox-ty .ty-hero{padding:48px 16px 34px}
    .paradox-ty .ty-check-badge{width:72px;height:72px;margin-bottom:18px}
    .paradox-ty h1{font-size:1.65rem}
    .paradox-ty p.ty-sub{font-size:.82rem;line-height:1.55}
    .paradox-ty .ty-wrap{margin-top:32px;padding:0 12px}
    .paradox-ty .ty-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:30px}
    .paradox-ty .ty-pill{min-height:88px;padding:16px 10px;border-radius:16px}
    .paradox-ty .ty-pill span{font-size:.58rem;margin-bottom:6px}
    .paradox-ty .ty-pill strong,
    .paradox-ty .ty-pill strong *{font-size:.92rem}
    .paradox-ty .ty-section,
    .paradox-ty .transfer-box,
    .paradox-ty .ty-native-details > section,
    .paradox-ty .ty-native-details .woocommerce-order-details,
    .paradox-ty .ty-native-details .woocommerce-customer-details,
    .paradox-ty .ty-native-details .woocommerce-bacs-bank-details,
    .paradox-ty .ty-native-details .wc-bacs-bank-details{padding:17px 14px;border-radius:17px;margin-bottom:20px}
    .paradox-ty .share-box{padding:24px 16px;border-radius:17px}
    .paradox-ty .input-box{min-height:46px;padding:10px 12px;font-size:.84rem;border-radius:11px}
    .paradox-ty .transfer-box > div > div:nth-child(2){grid-template-columns:1fr !important}
    .paradox-ty .ty-actions{flex-direction:column;gap:14px;margin:28px 0 38px}
    .paradox-ty .ty-actions .ty-btn{width:100%;min-height:50px;padding:14px 18px;font-size:.7rem;justify-content:center}
    .paradox-ty .ty-section h2,
    .paradox-ty .transfer-box h3,
    .paradox-ty .ty-native-details h2,
    .paradox-ty .ty-native-details h3{font-size:.9rem;margin-bottom:16px}
    .paradox-ty table{font-size:.74rem}
    .paradox-ty table th,.paradox-ty table td{padding:9px 5px}
}

@media (max-width:400px){
    .paradox-ty .ty-wrap{padding:0 10px}
    .paradox-ty .ty-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .paradox-ty h1{font-size:1.45rem}
    .paradox-ty .ty-pill{min-height:82px;padding:14px 8px}
    .paradox-ty .ty-pill strong,
    .paradox-ty .ty-pill strong *{font-size:.84rem}
    .paradox-ty .ty-section,
    .paradox-ty .transfer-box{padding:15px 12px}
}

@media print{
    .paradox-ty header,.paradox-ty .ty-actions.print-hide,.paradox-ty .transfer-box,.paradox-ty .share-box{display:none}
    .paradox-ty .ticket-card{break-inside:avoid;margin-bottom:12px;border:2px solid #000}
    .paradox-ty .ty-check-badge{animation:none;box-shadow:none}
}

/* ==========================================================================
   SOURCE OCULTO PARA EL PDF
   Esta seccion vive en el DOM (necesario para que html2canvas pueda
   renderizarla), pero esta fuera del viewport y no afecta el diseno visible.
   ========================================================================== */
#paradox-pdf-source {
    position: absolute;
    left: -99999px;
    top: 0;
    width: 794px; /* A4 a 96dpi */
    font-family: 'Museum', 'Inter', Arial, sans-serif;
    color: #1a0f00 !important;
    background: #fff !important;
    pointer-events: none;
}
#paradox-pdf-source,
#paradox-pdf-source *,
#paradox-pdf-source p,
#paradox-pdf-source h1,
#paradox-pdf-source h2,
#paradox-pdf-source h3,
#paradox-pdf-source span,
#paradox-pdf-source div,
#paradox-pdf-source strong,
#paradox-pdf-source td,
#paradox-pdf-source th,
#paradox-pdf-source table {
    color: #1a0f00 !important;
}
#paradox-pdf-source .pdf-page {
    width: 794px;
    height: 1123px; /* A4 a 96dpi */
    padding: 36px 40px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    position: relative;
    font-family: 'Museum', 'Inter', Arial, sans-serif !important;
    color: #1a0f00 !important;
}
#paradox-pdf-source .pdf-page + .pdf-page { page-break-before: always; }
#paradox-pdf-source .pdf-header,
#paradox-pdf-source .pdf-header * {
    color: #ffffff !important;
}
#paradox-pdf-source .pdf-footer,
#paradox-pdf-source .pdf-footer * {
    color: #ffffff !important;
}
#paradox-pdf-source .pdf-muted {
    color: #555 !important;
}
#paradox-pdf-source .pdf-accent {
    color: #7927CD !important;
}
#paradox-pdf-source .pdf-strong {
    color: #1a0f00 !important;
    font-weight: 800;
}
#paradox-pdf-source .pdf-card {
    background: #fafafa !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 14px;
    color: #1a0f00 !important;
}
#paradox-pdf-source .pdf-qr-canvas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}
#paradox-pdf-source .pdf-qr-canvas * {
    background: #ffffff !important;
}
#paradox-pdf-source table,
#paradox-pdf-source table * {
    color: #1a0f00 !important;
}
#paradox-pdf-source .pdf-ticket-page .pdf-ticket-name,
#paradox-pdf-source .pdf-ticket-page .pdf-ticket-name * {
    color: #1a0f00 !important;
    font-weight: 900;
}
#paradox-pdf-source .pdf-ticket-page .pdf-ticket-label,
#paradox-pdf-source .pdf-ticket-page .pdf-ticket-value,
#paradox-pdf-source .pdf-ticket-page .pdf-ticket-section {
    color: #1a0f00 !important;
}



/* Fondo de la página de confirmación: imagen escalada, replicando
   el patrón del body del checkout (background-size: 100% auto,
   repeat-y, top center). */
body.woocommerce-order-received {
    background-image: url('/wp-content/uploads/2026/08/CONFIRMACION-DE-COMPRA-1-scaled.jpg') !important;
    background-size: 100% auto !important;
    background-repeat: repeat-y !important;
    background-position: top center !important;
    background-attachment: scroll !important;
    background-color: #000000;
}

/* ============================================================================
   CABECERA DE CONFIRMACIÓN DE PAGO (unificada con las otras cabeceras)
   - Altura: 220px en escritorio.
   - Gradiente vertical morado: claro arriba, oscuro abajo.
   - Imagen Rectangle-92 a la IZQUIERDA del texto (en escritorio/tablet),
     pegada al BORDE INFERIOR IZQUIERDO. En móvil la imagen va a la DERECHA
     con espejo horizontal (ver media query ≤767px más abajo).
   - Títulos en Museum Bold Italic 40/46, subtítulo en Museum Light Italic 24/38.
   - El conjunto imagen+texto se centra horizontalmente; el texto va pegado
     a la izquierda dentro de su propio espacio (text-align: left).
   ============================================================================ */
.paradox-ty .ty-hero {
    background: linear-gradient(180deg, #7927CD 45.83%, #3D1467 100%);
    height: 220px;
    min-height: 220px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;        /* conjunto imagen+texto centrado horizontal */
    gap: 32px;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
}
.paradox-ty .ty-hero-art {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-height: 220px;              /* igual a la altura de la cabecera */
    object-fit: contain;
    object-position: left bottom;   /* pegada al borde inferior IZQUIERDO */
    align-self: flex-end;           /* anclada al fondo del flex container */
    pointer-events: none;
    user-select: none;
}
.paradox-ty .ty-hero-text {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* texto centrado verticalmente */
    text-align: left;               /* texto pegado a la izquierda de SU espacio */
    position: relative;
    z-index: 2;
}
.paradox-ty .ty-hero-sub {
    font-family: 'Museum', 'Syne', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    line-height: 38px;
    color: #ffffff;
    margin: 0 0 4px;
    text-transform: none;
    text-align: left;
}
.paradox-ty .ty-hero-title {
    font-family: 'Museum', 'Syne', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    line-height: 46px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
}

/* ============================================================================
   ORACIONES CENTRALES DE CONFIRMACIÓN (en cursiva)
   - font-family: 'LT Museum' (registrada en Elementor como "Museum")
   - font-style: italic para que se vean en cursiva
   ============================================================================ */
.paradox-ty .ty-confirm-messages {
    padding: 72px 20px 64px;
    text-align: center;
}
.paradox-ty .ty-confirm-message-primary {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 500;
    font-style: italic !important;
    font-size: 24px;
    line-height: 38px;
    color: #FF7700;
    margin: 0;
    text-align: center;
}
.paradox-ty .ty-confirm-message-secondary {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 500;
    font-style: italic !important;
    font-size: 24px;
    line-height: 38px;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* ============================================================================
   PASOS DE PAGO — barra de progreso (mismo formato que en checkout/pago)
   ============================================================================ */
.paradox-ty .paradox-progress-container {
    max-width: 720px;
    /* Mismo margen que checkout/pago: 40px arriba (separación de la
       cabecera) y 56px abajo (separación del contenido siguiente). */
    margin: 40px auto 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.paradox-ty .paradox-progress-container::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    height: 4px;
    background-color: rgba(121, 39, 205, 0.28);
    border-radius: 2px;
    z-index: 1;
}
.paradox-ty .paradox-progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.paradox-ty .paradox-progress-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(121, 39, 205, 0.22);
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    border: 3px solid rgba(121, 39, 205, 0.55);
}
.paradox-ty .paradox-progress-label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(200, 178, 255, 0.85);
}
.paradox-ty .paradox-progress-step.completed .paradox-progress-circle {
    background-color: #7927CD;
    color: #ffffff;
    border-color: #7927CD;
    box-shadow: 0 0 0 4px rgba(121, 39, 205, 0.30);
}
.paradox-ty .paradox-progress-step.completed .paradox-progress-label {
    color: #c8a8ff;
}
.paradox-ty .paradox-progress-step.completed::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 50%;
    width: 100%;
    height: 4px;
    background-color: #7927CD;
    z-index: -1;
    border-radius: 2px;
}
.paradox-ty .paradox-progress-step.active .paradox-progress-circle {
    background-color: #FF7700;
    color: #ffffff;
    border-color: #FF7700;
    box-shadow: 0 0 0 6px rgba(255, 119, 0, 0.30);
}
.paradox-ty .paradox-progress-step.active .paradox-progress-label {
    color: #ffffff;
}

/* ============================================================================
   RECUADROS DE INFORMACIÓN (formato blanco, fondo transparente)
   Estilo de los .ty-pill: borde blanco, fondo transparente, esquinas
   redondeadas, label pequeño + valor grande.
   ============================================================================ */
.paradox-ty .ty-pills {
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
}
.paradox-ty .ty-pill {
    width: 100%;
    min-height: 110px;
    border: 2px solid #ffffff;
    border-radius: 18px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    text-align: center;
    box-sizing: border-box;
}
.paradox-ty .ty-pill span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 32px;
    color: #ffffff;
    margin: 0 0 4px;
    display: block;
}
.paradox-ty .ty-pill strong {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 500;
    font-style: italic;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    text-align: center;
    display: block;
}

/* ============================================================================
   BLOQUES GENÉRICOS con etiqueta morada AFUERA
   - Patrón unificado para todos los bloques siguientes:
     Transferir entrada, Comparte, Detalles del pedido, Dirección de facturación.
   - Cada bloque tiene:
     - Etiqueta morada pegada a la izquierda (mismo formato que TUS ENTRADAS AQUÍ)
     - Contenedor con borde 2px morado, fondo transparente
     - Contenido interior con texto blanco, fondo transparente
   ============================================================================ */

/* Bloque genérico */
.paradox-ty .ty-block {
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 24px 28px;
    border: 2px solid #7927CD;
    border-radius: 18px;
    background: transparent;
    box-sizing: border-box;
}

/* Etiqueta de bloque: la regla más específica está más abajo */
    border-radius: 18px 0 18px 18px;
}

/* Nota dentro del bloque (después del título, fuera del contenedor)
   Mismo formato que la oración QR (.ty-tickets-note p): Museum 500
   Medium Italic 24px / 38px, color blanco, centrada. */
.paradox-ty .ty-block-note {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 500;
    font-style: italic !important;
    font-size: 24px;
    line-height: 38px;
    color: #ffffff;
    margin: 0 auto 32px;
    max-width: 1280px;
    padding: 0 28px;
    text-align: center;
}

/* Botón dentro del bloque (mismo formato gris que los botones de la tarjeta).
   Sin relieve naranja — solo gris plano con hover. */
.paradox-ty .ty-block-btn {
    background: #D9D9D9 !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: filter 0.2s ease, transform 0.15s ease !important;
}
.paradox-ty .ty-block-btn:hover {
    filter: brightness(0.92) !important;
    transform: translateY(-1px) !important;
}
.paradox-ty .ty-block-btn:active {
    transform: translateY(0) !important;
}

/* Contenido del bloque de detalles: textos blancos sobre fondo transparente */
.paradox-ty .ty-block-details h2,
.paradox-ty .ty-block-details h3,
.paradox-ty .ty-block-details .woocommerce-order-details__title,
.paradox-ty .ty-block-details .woocommerce-column__title {
    display: none !important;
}
.paradox-ty .ty-block-details,
.paradox-ty .ty-block-billing {
    color: #ffffff !important;
}
.paradox-ty .ty-block-details *,
.paradox-ty .ty-block-billing * {
    color: #ffffff !important;
}
.paradox-ty .ty-block-details section,
.paradox-ty .ty-block-details .woocommerce-order-details,
.paradox-ty .ty-block-details .woocommerce-customer-details {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
}
.paradox-ty .ty-block-details table,
.paradox-ty .ty-block-details .shop_table {
    background: transparent !important;
    color: #ffffff !important;
    width: 100%;
    border-collapse: collapse;
}
.paradox-ty .ty-block-details table th,
.paradox-ty .ty-block-details table td,
.paradox-ty .ty-block-details .shop_table th,
.paradox-ty .ty-block-details .shop_table td {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(226,209,255,0.18) !important;
    padding: 12px 8px !important;
}
.paradox-ty .ty-block-details a {
    color: #c8a8ff !important;
    text-decoration: underline;
}

/* Bloque share-box: los iconos de redes sociales como botones circulares */
.paradox-ty .share-box .share-btns {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
}
.paradox-ty .share-box .share-btns a {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #D9D9D9;
    color: #000000;
    border-radius: 50%;
    font-weight: 800;
    text-decoration: none;
    transition: filter 0.2s ease;
}
.paradox-ty .share-box .share-btns a:hover {
    filter: brightness(0.92);
}

/* Dirección de facturación */
.paradox-ty .ty-billing-address {
    font-style: normal;
    color: #ffffff;
    line-height: 1.7;
    margin: 0 0 12px;
}
.paradox-ty .ty-billing-line {
    color: #ffffff;
    margin: 4px 0;
    line-height: 1.6;
}
.paradox-ty .ty-billing-line strong {
    color: #c8a8ff;
    font-weight: 600;
    margin-right: 6px;
}

/* ============================================================================
   ETIQUETA DE BLOQUE (TUS ENTRADAS AQUÍ, TRANSFERIR ENTRADA, etc.)
   - Pegada al borde IZQUIERDO del contenedor de 1280px.
   - Fondo morado sólido #7927CD.
   - Bordes asimétricos.
   ============================================================================ */
.paradox-ty .ty-tickets-label-wrap {
    max-width: 1280px;
    margin: 48px auto 20px;
    padding: 0 20px;
    text-align: left;
}
.paradox-ty .ty-tickets-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    height: 56px;
    padding: 0 24px;
    box-sizing: border-box;
    background: #7927CD;
    color: #ffffff;
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    /* Bordes asimétricos: solo top-right y bottom-left redondeados
       (proporcional a la referencia de 20px sobre 40px de alto;
       aquí 28px sobre 56px de alto = 50% de proporción). */
    border-radius: 0 28px 0 28px;
}

/* ============================================================================
   ORACIÓN DE AVISO (en cursiva) — "PRESENTA EL CÓDIGO QR..."
   ============================================================================ */
.paradox-ty .ty-tickets-note {
    max-width: 1280px;
    margin: 0 auto 32px;
    padding: 0 20px;
    text-align: center;
}
.paradox-ty .ty-tickets-note p {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 500;
    font-style: italic !important;
    font-size: 24px;
    line-height: 38px;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* ============================================================================
   TARJETAS DE ENTRADAS — Layout HORIZONTAL según diseño del usuario
   - Sobrescribe los estilos del template/ticket-cards.php para que la
     tarjeta se vea con borde morado, fondo transparente, layout de
     3 columnas (QR, datos, acciones).
   - max-width 1280px (NO max-width:1300 como tenía mal).
   ============================================================================ */
.paradox-ty .ty-tickets-block {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto 40px !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Quitamos el contenedor de "TUS ENTRADAS DIGITALES" — se reemplaza
   por la etiqueta TUS ENTRADAS AQUÍ que está arriba. */
.paradox-ty .ty-section h2,
.paradox-ty .sticker {
    display: none !important;
}

/* Tarjeta individual: layout horizontal con 3 columnas (QR, info, acciones).
   Sobrescribe el CSS del template/ticket-cards.php. */
.paradox-ty .ticket-card {
    width: 100% !important;
    min-height: 240px !important;
    background: transparent !important;
    border: 2px solid #7927CD !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 22px 26px !important;
    box-sizing: border-box !important;
    display: grid !important;
    /* Columnas: QR fija 210px | info flexible | botones fija 210px */
    grid-template-columns: 210px 1fr 210px !important;
    align-items: center !important;
    gap: 18px !important;
    overflow: hidden !important;
}
.paradox-ty .ticket-card:hover {
    transform: none !important;
    border-color: #7927CD !important;
    box-shadow: none !important;
}

/* Contenedor interno: pasa a ser el grid 3-columnas directamente.
   display:contents hace que los 3 hijos (qr-zone, info, actions) se vuelvan
   hijos directos del .ticket-card. */
.paradox-ty .ticket-card-inner {
    display: contents !important;
}

/* Zona QR: a la izquierda, 170x170px (un poco más pequeño para
   conseguir simetría con el alto de los datos y los botones) */
.paradox-ty .ticket-qr-zone {
    width: 100% !important;
    max-width: 200px !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.paradox-ty .qr-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 !important;
}
.paradox-ty .qr-wrap.ty-qr-wrap {
    width: 170px !important;
    height: 170px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 6px !important;
}
.paradox-ty .qr-id {
    font-family: 'Inter', monospace !important;
    font-size: 0.65rem !important;
    color: #c8a8ff !important;
    word-break: break-all !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Info central: nombre + meta. Texto un poco más pequeño para
   conseguir simetría con el QR y los botones. */
.paradox-ty .ticket-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
}
.paradox-ty .ticket-info .name {
    font-family: 'Inter', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
}
.paradox-ty .ticket-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
}
.paradox-ty .ticket-meta > div {
    color: #ffffff !important;
}
.paradox-ty .ticket-meta .muted {
    color: #c8a8ff !important;
    font-weight: 600 !important;
    margin-right: 5px !important;
}

/* Acciones a la derecha: 3 botones apilados con buen gap. */
.paradox-ty .ticket-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 210px !important;
    margin: 0 auto !important;
}
.paradox-ty .ticket-actions .ty-btn {
    background: #D9D9D9 !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding: 0 14px !important;
    text-align: center !important;
    cursor: pointer !important;
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    height: 42px !important;
    box-sizing: border-box !important;
    transition: filter 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.paradox-ty .ticket-actions .ty-btn:hover {
    filter: brightness(0.92) !important;
    transform: none !important;
}
/* Quitar los gradientes/colored backgrounds de los botones */
.paradox-ty .ticket-actions .ty-btn.ty-btn-pdf,
.paradox-ty .ticket-actions .ty-btn.whatsapp,
.paradox-ty .ticket-actions .ty-btn.email {
    background: #D9D9D9 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
}

/* ============================================================================
   BOTONES PRINCIPALES (solo 2): DESCARGAR PDF + COMPARTIR WHATSAPP
   - Tamaño: 373×68px, border-radius: 18px.
   - Color: #FF7700 (naranja).
   - Texto: Inter 600 Semi Bold, 16px, line-height 32px, negro, centrado.
   - Efecto de relieve: el botón tiene una sombra interna que da volumen
     (estilo "neumorfismo naranja") y al hacer hover el relieve se intensifica.
   ============================================================================ */
.paradox-ty .ty-main-actions {
    max-width: 1280px;
    margin: 32px auto 64px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.paradox-ty .ty-main-actions .ty-btn {
    background: #FF7700;
    color: #000000;
    border: none;
    border-radius: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0;
    text-align: center;
    padding: 18px 28px;
    /* Cada botón ocupa la mitad del ancho disponible del contenedor
       morado (1280px), descontando el gap central. Así los dos botones
       juntos cubren el 100% del ancho de las tarjetas. */
    width: calc(50% - 12px) !important;
    max-width: none !important;
    min-height: 68px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Relieve estilo "neumorfismo": sombra oscura abajo + highlight arriba */
    box-shadow:
        inset 0 -3px 0 rgba(123, 48, 0, 0.45),
        inset 0 2px 0 rgba(255, 200, 150, 0.55),
        0 4px 14px rgba(123, 48, 0, 0.35);
    transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease;
}
.paradox-ty .ty-main-actions .ty-btn:hover {
    filter: brightness(1.02);
    box-shadow:
        inset 0 -4px 0 rgba(123, 48, 0, 0.55),
        inset 0 2px 0 rgba(255, 210, 165, 0.65),
        0 6px 18px rgba(123, 48, 0, 0.45);
    transform: translateY(-1px);
}
.paradox-ty .ty-main-actions .ty-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 -2px 0 rgba(123, 48, 0, 0.45),
        inset 0 1px 0 rgba(255, 200, 150, 0.55),
        0 2px 8px rgba(123, 48, 0, 0.30);
}

/* Responsive */
@media (max-width: 1024px) {
    /* Cabecera: mantiene los 220px de alto de escritorio, con tipografías
       ligeramente más pequeñas y la imagen pegada abajo a la derecha. */
    .paradox-ty .ty-hero {
        height: 220px;
        min-height: 220px;
        padding: 0 16px;
        gap: 0;
        justify-content: center;
    }
    .paradox-ty .ty-hero-art {
        height: 220px !important;
        max-height: 220px !important;
        max-width: 280px !important;
        object-fit: contain;
        object-position: left bottom;
        pointer-events: none;
        user-select: none;
        margin: 0;
    }
    .paradox-ty .ty-hero-text {
        padding: 0 !important;
        transform: none;
    }
    .paradox-ty .ty-hero-title {
        font-size: 38px;
        line-height: 44px;
    }
    .paradox-ty .ty-hero-sub {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 4px;
    }
    /* En tablet y móvil: la TARJETA (borde morado) ocupa el 90% del
       ancho del contenedor, el mismo ancho que los botones naranjas.
       El bloque contenedor pasa al 100% para que la tarjeta no sufra
       un doble recorte (90% del bloque 90% + paddings extra), que era
       lo que la hacía verse más angosta que los botones. */
    .paradox-ty .ty-tickets-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .paradox-ty .ticket-card {
        width: 90% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Los demás bloques (etiquetas, bloques y botones naranjas)
       mantienen su 90% en responsive. */
    .paradox-ty .ty-tickets-label-wrap,
    .paradox-ty .ty-block,
    .paradox-ty .ty-main-actions {
        width: 90% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Etiquetas centradas en responsive */
    .paradox-ty .ty-tickets-label-wrap {
        text-align: center !important;
    }
    .paradox-ty .ty-tickets-label {
        margin: 0 auto !important;
    }
    /* Tarjeta: layout vertical (QR arriba, datos medio, botones abajo).
       Mantiene las proporciones y la separación entre columnas.

       grid-template-areas fija el orden EXPLÍCITO de las tres zonas
       (QR → info → acciones). Así garantizamos que los datos (DNI,
       tipo, evento...) nunca terminen DEBAJO de los botones por un
       bug de auto-flow en algunos navegadores. */
    .paradox-ty .ticket-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "qr"
            "info"
            "actions" !important;
        grid-template-rows: auto auto auto !important;
        gap: 20px !important;
        padding: 24px 22px !important;
        min-height: auto !important;
    }
    .paradox-ty .ticket-qr-zone  { grid-area: qr !important; max-width: 220px !important; margin: 0 auto !important; }
    .paradox-ty .ticket-info    { grid-area: info !important; text-align: center !important; }
    .paradox-ty .ticket-actions { grid-area: actions !important; }
    .paradox-ty .qr-wrap.ty-qr-wrap {
        width: 180px !important;
        height: 180px !important;
    }
    .paradox-ty .ticket-info .name {
        font-size: 18px !important;
        margin: 0 0 6px !important;
    }
    .paradox-ty .ticket-meta {
        font-size: 14px !important;
        gap: 4px !important;
    }
    .paradox-ty .ticket-actions {
        flex-direction: column !important;
        gap: 12px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .paradox-ty .ticket-actions .ty-btn {
        font-size: 16px !important;
        height: 46px !important;
        padding: 0 18px !important;
        width: 100% !important;
    }
    /* Botones de billetera (Apple / Google) en responsive: MISMA
       altura, MISMO padding y MISMO ancho (full-width en columna) que
       el resto de botones de acción. Se apilan para no comerse la
       pantalla en tablet y para que "Añadir a Apple Wallet" entre
       en una sola línea. */
    .paradox-ty .ticket-wallet {
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }
    .paradox-ty .ticket-wallet .ty-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        font-size: 14px !important;
        padding: 0 14px !important;
    }
    /* Oraciones: mismo formato responsive para todas (centradas,
       tamaño más pequeño, line-height reducido). */
    .paradox-ty .ty-confirm-message-primary,
    .paradox-ty .ty-confirm-message-secondary,
    .paradox-ty .ty-block-note,
    .paradox-ty .ty-tickets-note p {
        font-size: 18px !important;
        line-height: 26px !important;
        text-align: center !important;
    }
    /* Botones naranjas: ancho fijo, no se estiran más allá del contenedor */
    .paradox-ty .ty-main-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 0 20px !important;
    }
    .paradox-ty .ty-main-actions .ty-btn {
        width: calc(50% - 8px) !important;
        min-width: 220px !important;
        max-width: 320px !important;
        font-size: 14px !important;
    }
}
@media (max-width: 767px) {
    /* Móvil: cabecera 260px. La imagen se vuelve POSICIÓN ABSOLUTA en
       el borde inferior derecho. La imagen mide 200px de alto (un poco
       más pequeña que en escritorio para no comerse el texto) con espejo
       horizontal para que mire hacia el otro lado. */
    .paradox-ty .ty-hero {
        height: 170px;
        min-height: 170px;
        padding: 0;
        position: relative;            /* necesario para el absolute de la imagen */
        gap: 0;
        /* Texto pegado a la izquierda (lo mismo que en checkout/pago) —
           anulamos el justify-content:center que viene del escritorio */
        justify-content: flex-start !important;
    }
    .paradox-ty .ty-hero-art {
        position: absolute;             /* se sale del flujo flex: el texto respira */
        right: 0;
        bottom: 0;
        height: 140px !important;       /* MISMA altura que en escritorio/tablet */
        max-height: 140px !important;
        max-width: 220px !important;    /* ancho tope = espacio reservado para la imagen */
        object-fit: contain;
        object-position: right bottom;
        transform: scaleX(-1);          /* espejo horizontal */
        pointer-events: none;
        user-select: none;
        margin: 0;
        z-index: 1;
    }
    .paradox-ty .ty-hero-text {
        /* El texto va pegado a la izquierda con 20px de margen. La imagen
           es absoluta (position:absolute right:0 bottom:0) y no le quita
           espacio: el texto ocupa su ancho natural. */
        flex: 0 1 auto !important;
        min-width: 0;
        padding: 0 0 0 20px !important;
        align-self: center;
        justify-content: center;
        transform: none;
        text-align: left;
        position: relative;
        z-index: 2;
    }
    .paradox-ty .ty-hero-title {
        font-size: 30px;
        line-height: 36px;
        text-align: left;
    }
    .paradox-ty .ty-hero-sub {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 4px;
        text-align: left;
    }
    /* Barra de progreso: mismas dimensiones que en checkout/pago para
       que se vea en el mismo lugar en las 3 páginas. */
    .paradox-ty .paradox-progress-container { margin: 28px 0 36px; max-width: 100%; }
    .paradox-ty .paradox-progress-circle { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
    .paradox-ty .paradox-progress-container::before,
    .paradox-ty .paradox-progress-step.completed::after { top: 22px; }     /* 44/2 = 22 */
    .paradox-ty .paradox-progress-step.completed::after { left: calc(50% + 22px); width: calc(100% - 44px); }
    .paradox-ty .paradox-progress-label { font-size: 12px; }
    .paradox-ty .ty-confirm-messages {
        padding: 48px 16px 40px;
    }
    .paradox-ty .ty-confirm-message-primary,
    .paradox-ty .ty-confirm-message-secondary,
    .paradox-ty .ty-block-note,
    .paradox-ty .ty-tickets-note p {
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: center !important;
    }
    .paradox-ty .ty-tickets-label {
        width: 220px;
        height: 48px;
        font-size: 18px;
        /* Proporcional: 20/40 × 48 = 24px */
        border-radius: 0 24px 0 24px;
    }
    /* Móvil: contenedor al 90% del ancho de pantalla. Las tarjetas
       siguen siendo simétricas, con elementos más anchos para
       aprovechar el espacio disponible. */
    .paradox-ty .qr-wrap.ty-qr-wrap {
        width: 160px !important;
        height: 160px !important;
    }
    .paradox-ty .ticket-info .name {
        font-size: 17px !important;
    }
    .paradox-ty .ticket-meta {
        font-size: 14px !important;
    }
    .paradox-ty .ticket-actions .ty-btn {
        font-size: 15px !important;
        height: 44px !important;
    }
    /* Wallet en móvil: misma altura que los otros botones (44px),
       ancho completo, y fuente ligeramente menor para que
       "Añadir a Apple Wallet" entre en una sola línea. */
    .paradox-ty .ticket-wallet .ty-btn {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
    }
    /* Botones naranjas: en móvil van uno debajo del otro, mismo ancho
       que el contenedor (90% del viewport). */
    .paradox-ty .ty-main-actions {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .paradox-ty .ty-main-actions .ty-btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 14px !important;
    }
}



    /* =========================================================
       PARADOX PARK — Tarjetas de entrada + QR
       Diseño horizontal unificado (3 columnas: QR | datos | botones).
       Se aplica en thank-you y en Mi Cuenta > Mis Entradas.
       ========================================================= */

    :root {
        --pp-radius: 18px;
    }

    /* -----------------------------------------------------------
       Contenedor de un pedido (apilado vertical con gap entre tarjetas).
       En responsive: el contenedor ocupa el 95% del viewport, así
       la tarjeta (que ocupa el 100% del contenedor) tiene 95% del
       ancho de pantalla.
       ----------------------------------------------------------- */
    .ty-tickets-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 95% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* -----------------------------------------------------------
       Tarjeta individual: layout horizontal con 3 columnas
       (QR a la izquierda, datos al centro, botones a la derecha).
       Borde morado, fondo transparente, esquinas redondeadas.
       ----------------------------------------------------------- */
    .ticket-card {
        background: transparent !important;
        border: 2px solid #7927CD !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-shadow: none !important;
        min-height: 240px !important;
        padding: 22px 26px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 200px 1fr 200px !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
    }
    .ticket-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* El contenedor interno pasa a ser parte del grid (sus 3 hijos
       se vuelven hijos directos del .ticket-card). */
    .ticket-card-inner {
        display: contents !important;
    }

    /* -----------------------------------------------------------
       Zona QR (columna 1): 170x170px, fondo blanco, centrada
       ----------------------------------------------------------- */
    .ticket-qr-zone {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .qr-label {
        font-family: 'Inter', sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        margin: 0 !important;
    }
    .qr-wrap.ty-qr-wrap {
        width: 170px !important;
        height: 170px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        padding: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }
    /* qrcodejs genera un <canvas> visible y un <img> oculto (fallback de
       descarga). Si se fuerza display:block sobre el img, ambos se ven
       apilados. Aquí solo se muestra el canvas; el img permanece oculto
       (se usa únicamente para la descarga vía downloadTicketQR). */
    .qr-wrap.ty-qr-wrap canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    .qr-wrap.ty-qr-wrap img {
        display: none !important;
    }
    .qr-id {
        font-family: 'Inter', monospace !important;
        font-size: 0.65rem !important;
        color: #c8a8ff !important;
        word-break: break-all !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* -----------------------------------------------------------
       Info central (columna 2): nombre + meta
       ----------------------------------------------------------- */
    .ticket-info {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 5px !important;
    }
    .ticket-info .name {
        font-family: 'Inter', sans-serif !important;
        font-size: 19px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        margin: 0 0 8px !important;
    }
    .ticket-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
    }
    .ticket-meta > div {
        color: #ffffff !important;
    }
    .ticket-meta .muted {
        color: #c8a8ff !important;
        font-weight: 600 !important;
        margin-right: 5px !important;
    }

    /* -----------------------------------------------------------
       Botones de acción (columna 3): 3 botones apilados
       Formato gris (#D9D9D9) con texto negro.
       ----------------------------------------------------------- */
    .ticket-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }
    .ticket-actions .ty-btn {
        background: #D9D9D9 !important;
        color: #000000 !important;
        border: none !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        padding: 0 14px !important;
        text-align: center !important;
        cursor: pointer !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        height: 42px !important;
        box-sizing: border-box !important;
        transition: filter 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: none !important;
    }
    .ticket-actions .ty-btn:hover {
        filter: brightness(0.92) !important;
        transform: none !important;
    }
    /* Quitar cualquier estilo que sobreescriba los botones (gradientes,
       sombras de colores, etc) */
    .ticket-actions .ty-btn.ty-btn-pdf,
    .ticket-actions .ty-btn.whatsapp,
    .ticket-actions .ty-btn.email {
        background: #D9D9D9 !important;
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        text-transform: none !important;
    }

    /* -----------------------------------------------------------
       Responsive — mismas reglas en thank-you y Mi Cuenta
       ----------------------------------------------------------- */

    /* Tablet (≤1024px) y Móvil: layout vertical, contenedor al 95%
       del viewport, tarjeta al 100% del contenedor (= 95% viewport). */
    @media (max-width: 1024px) {
        .ty-tickets-block,
        .ty-tickets-label-wrap,
        .ty-block,
        .ty-main-actions {
            width: 95% !important;
            max-width: 95% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        .ticket-card {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            grid-template-columns: 1fr !important;
            /* Orden EXPLÍCITO en responsive: QR → info (DNI etc.) →
               acciones. Sin esto, en algunas pantallas el info puede
               terminar por debajo de los botones. */
            grid-template-areas:
                "qr"
                "info"
                "actions" !important;
            grid-template-rows: auto auto auto !important;
            gap: 20px !important;
            padding: 24px 22px !important;
            min-height: auto !important;
        }
        .ticket-qr-zone  { grid-area: qr !important; max-width: 220px !important; margin: 0 auto !important; }
        .ticket-info    { grid-area: info !important; text-align: center !important; }
        .ticket-actions { grid-area: actions !important; }
        .qr-wrap.ty-qr-wrap {
            width: 180px !important;
            height: 180px !important;
        }
        .ticket-info .name {
            font-size: 18px !important;
            margin: 0 0 6px !important;
        }
        .ticket-meta {
            font-size: 14px !important;
            gap: 4px !important;
        }
        .ticket-actions {
            flex-direction: column !important;
            gap: 12px !important;
            max-width: 100% !important;
            margin: 0 auto !important;
        }
        .ticket-actions .ty-btn {
            font-size: 16px !important;
            height: 46px !important;
            padding: 0 18px !important;
            width: 100% !important;
        }
        /* Botones de billetera (Apple / Google): misma altura y
           mismo ancho que los otros botones, apilados a full-width
           para que el ojo los reconozca como el mismo control. */
        .ticket-wallet {
            width: 100% !important;
            max-width: 100% !important;
            gap: 10px !important;
        }
        .ticket-wallet .ty-btn {
            width: 100% !important;
            flex: 1 1 100% !important;
            max-width: 100% !important;
            height: 46px !important;
            min-height: 46px !important;
            font-size: 14px !important;
            padding: 0 14px !important;
        }
    }

    /* Móvil (≤767px): mismo formato vertical pero con QR más pequeño. */
    @media (max-width: 767px) {
        .qr-wrap.ty-qr-wrap {
            width: 160px !important;
            height: 160px !important;
        }
        .ticket-info .name {
            font-size: 17px !important;
        }
        .ticket-meta {
            font-size: 14px !important;
        }
        .ticket-actions .ty-btn {
            font-size: 15px !important;
            height: 44px !important;
        }
        /* Wallet en móvil: misma altura que los otros botones,
           ancho completo y fuente un pelín menor para que
           "Añadir a Apple Wallet" entre en una sola línea. */
        .ticket-wallet .ty-btn {
            height: 44px !important;
            min-height: 44px !important;
            font-size: 13px !important;
            padding: 0 12px !important;
        }
    }
    

/* Botones de billetera (Apple Wallet / Google Wallet) dentro de las tarjetas */
.ticket-wallet { width: 100% !important; max-width: 200px !important; margin: 0 auto !important; }
.ticket-wallet .ty-btn { height: 34px !important; min-height: 34px !important; font-size: 12px !important; padding: 0 10px !important; flex: 1 1 auto; }

/* Ocultar botones de wallet (Apple / Google) en las tarjetas
   (página de gracias + Mi Cuenta). Solo se ocultan visualmente:
   la lógica (data attributes, handlers JS, modal QR) se conserva
   intacta por si se quieren reactivar luego. Se oculta el wrapper
   completo para que no quede el hueco/separación que dejarían
   dentro del flex column de .ticket-actions, dejando los 3 botones
   principales (PDF, WhatsApp, Email) perfectamente centrados. */
.paradox-ty .ticket-wallet,
.ticket-wallet {
    display: none !important;
}