:root {
    --primary-blue: #1459b3;
    --dark-bg-blue: #232d3f;
    --cyan-bar: #00c3db;
    --red-btn: #e60000;
    --green-btn: #53d062;
    --gold: #ffc107;
    --font-main: 'Montserrat', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-comic: 'Comic Neue', 'Comic Sans MS', cursive;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background: white;
    color: #333;
}

/* =========================================
   HEADER
   ========================================= */
.logo-container {
    text-align: center;
    padding: 15px 0;
}
.logo {
    width: 150px;
}
/* =========================================
   BARRA DE BÚSQUEDA (.bar) - 
   ========================================= */
.bar {
    background: var(--cyan-bar); /* Usa el color sólido #00c3db */
    text-align: center;
    padding: 12px;
    position: relative;
    z-index: 10;
}
/* --- Efecto de elevación al pasar el cursor (Hover) --- */

/* Botón rojo de búsqueda (Clase .btn-rojo) */
.btn-rojo {
    background: var(--red-btn);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 800;
    padding: 8px 25px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease; /* Transición suave */
}

.btn-rojo:hover {
    background-color: #cc0000;
    transform: translateY(-3px); /* Sube el botón 3 píxeles */
}

/* Botones de compra y acciones principales (.btn-buy, .btn-more, .btn-pagar-cyan)*/
.btn-buy, 
.btn-more, 
.btn-pagar-cyan, 
.btn-place-order {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-buy:hover, 
.btn-more:hover, 
.btn-pagar-cyan:hover, 
.btn-place-order:hover {
    transform: translateY(-3px); /* Sube el botón de compra al pasar el cursor */
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.hero-content-grid {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
}

.hero-content-grid .left {
    width: 45%;
}

.hero-content-grid .right {
    width: 55%;
    text-align: center;
}

/* =========================================
   TÍTULOS
   ========================================= */
.subtitle-italic {
    font-family: var(--font-comic);
    font-size: 30px;
    font-weight: 700;
    font-style: normal;
    color: #111;
    margin-bottom: 10px;
    text-align: center;
}

.title-bendicidos {
    color: var(--primary-blue);
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.2;
}
.title-negro {
    color: #000000; /* Cambiado a negro */
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.2;
}

/* =========================================
   PROMOS (Banner unificado)
   ========================================= */
.promos-container {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.promo-img {
    width: 100%;
    max-width: px;
    object-fit: contain;
    
}

/* =========================================
   VOLANDO Y PRECIO
   ========================================= */
.volando {
    color: var(--primary-blue);
    font-size: 20px;
    margin-top: 15px;
}
.price {
    font-size: 55px;
    color: var(--primary-blue);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;
}

/* =========================================
   PROGRESS BAR - Efecto Fusionado con Fondo Oscuro
   ========================================= */
.progress-wrapper {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    transform: translateY(1vw); 
}

.progress-bar {
    height: 30px !important;
    min-height: 30px !important;
    background: rgba(255, 255, 255, 0.15) !important; /* Fondo muy sutil para darle cuerpo, pero transparente */
    backdrop-filter: blur(2px);  /* efecto cristal para que se vea elegante */
    -webkit-backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 255, 255, 0.7); /* borde blanco para resaltar la barra */
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Relleno verde original */
.progress-fill {
    height: 100% !important;
    background: linear-gradient(to bottom, #1a9e1a 50%, #0a6b0a 50%);
    position: relative;
    z-index: 1;
    border-radius: 2px 0 0 2px;
}

/* Sombra diagonal que funde el lado derecho con el fondo oscuro y deja ver lo de atrás */
.progress-bar::after {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Crea la transición diagonal translúcida hacia tu color de fondo oscuro (#232d3f) */
    background: linear-gradient(94deg, transparent 38%, rgba(35, 45, 63, 0.7) 50%, rgba(35, 45, 63, 0.95) 75%);
    pointer-events: none;
    z-index: 2;
}

/* Texto del porcentaje en NEGRO puro */
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    color: #000000; /* Números en negro tal como pediste */
    z-index: 3;
}

/* Subtexto inferior */
.progress-sub {
    font-size: 15px;
    color: #f1f5f9;
    margin-top: 15px;
    font-weight: 500;
    text-align: center;
    position: relative;
    z-index: 10;
    transform: translateY(1vw); 
}





/* =========================================
   CARRUSEL (Corregido para centrado con margen)
   ========================================= */
/* =========================================
   CARRUSEL
   ========================================= */
.carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 300px; /* Aumenta este número para bajarlo más (ej. 500px, 600px) */
    width: 105%;
}

/* 1. Imagen del carrusel */
.main-img {
    margin-top: 0; 
    width: 105%;
    border-radius: 0; /* Cambiado de 5px a 0 */
    object-fit: cover;
    display: block;
}

/* 2. Flechas del carrusel */
.arrow {
    /* ... otros estilos ... */
    border-radius: 0; /* Cambiado de 5px a 0 */
}

/* 3. Tarjetas de compra */
.card {
    border-radius: 0; /* Cambiado de 25px a 0 */
    padding: 30px 20px;
    width: 320px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* 4. Tarjeta activa */
.card.active {
    border-radius: 0; /* Cambiado de 30px a 0 */
    padding: 0;
    padding-top: 30px;
}

/* 5. Barra de progreso */
.progress-bar {
    height: 20px;
    background: #e0f2e9;
    border: 1px solid #28a745;
    border-radius: 0; /* Cambiado de 3px a 0 */
    overflow: hidden;
}

/* 6. Botones (btn-buy, btn-more, btn-rojo, etc) */
.btn-buy, .btn-more, .btn-rojo {
    border-radius: 0; /* Cambiado de 30px o 5px a 0 */
}

/* 7. Inputs */
.more-input {
    border-radius: 0; /* Cambiado de 5px a 0 */
}

.arrow {
    position: absolute;
    top: 50%; /* Ahora sí, el 50% de todo el contenedor es el centro de la imagen */
    transform: translateY(-50%);
    z-index: 10;
    font-size: 2rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
    transition: 0.3s ease;
}

.arrow:hover {
    background-color: #ffd700;
    color: black;
}
.left-arrow { left: 10px; }
.right-arrow { right: 10px; }

/* El resto de estilos (dots, etc.) se mantienen igual */
.dot {
    height: 8px;
    width: 8px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
}
.dot.active { background-color: #333; }

/* =========================================
   SECCIÓN DE COMPRA (FONDO OSCURO Y LÍNEA DIAGONAL)
   ========================================= */
.wrapper-diagonal {
    position: relative;
    background: var(--dark-bg-blue);
    padding: 60px 20px; /* Reducimos el padding general para controlarlo mejor desde adentro */
    text-align: center;
    clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0% 100%);
    margin-top: -7vw; 
    z-index: 2;
}

/* Línea diagonal superior marcada para simular el borde */
.wrapper-diagonal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.5vw;
    background: #111;
    z-index: -1;
    clip-path: polygon(0 8vw, 100% 0, 100% calc(0.2vw + 3px), 0 calc(8vw + 3px));
    pointer-events: none;
}

.buy {
    background: var(--dark-bg-blue);
    /* Aumentamos el padding superior aquí (140px) para empujar el título bien abajo de la raya */
    padding: 140px 20px 60px; 
    text-align: center;
}

.buy h2 {
    color: white;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 40px;
}


/* =========================================
   SECCIÓN SUPERIOR (FONDO OSCURO Y DIAGONAL)
   ========================================= */
.header-diagonal {
    position: relative;
    background: var(--dark-bg-blue);
    /* Aumentamos el padding superior e inferior para darle más altura */
    padding: 80px 10px 1px; 
    
    /* Mantiene el corte diagonal */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    
    z-index: 2;
    /* Ajustado para mantener el solapamiento con la siguiente sección */
    margin-bottom: -4vw; 
}


/* =========================================
   TARJETAS DE COMPRA
   ========================================= */
.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 50px;
}
.card {
    border-radius: 25px;
    padding: 30px 20px;
    width: 320px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.card h3 {
    font-family: var(--font-serif);
    font-size: 45px;
    margin-bottom: 5px;
}
.card-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 20px;
}
.price-container {
    font-family: var(--font-serif);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sign {
    font-size: 35px;
    margin-top: 5px;
}
.number {
    font-size: 70px;
    line-height: 1;
}
.currency {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 5px;
    margin-bottom: 30px;
}

/* Variaciones Tarjetas */
.card.outline {
    background: transparent;
    border: 1px solid var(--gold);
    color: white;
}
.card.active {
    background: white;
    color: #333;
    padding: 0;
    padding-top: 30px;
    border-radius: 30px;
    transform: scale(1.05);
}
.card.active h3 { margin-bottom: 0; }
.card.active .dark-text { color: #555; margin-bottom: 10px; }

.price-box-black {
    background: #111;
    color: white;
    padding: 20px 0;
}
.price-box-black .gold { color: var(--gold); }

.ribbon {
    position: absolute;
    top: 25px;
    right: -35px;
    background: var(--green-btn);
    color: #111;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 40px;
    transform: rotate(45deg);
}
.desc {
    font-size: 12px;
    color: #555;
    padding: 20px;
    margin: 0;
}

/* Botones Tarjetas */
.btn-buy {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 14px;
    padding: 15px 30px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    width: 80%;
}
.outline-btn {
    background: #f0f4f8;
    color: #111;
}
.card.outline .btn-buy.outline-btn {
    background: #f0f4f8;
    color: #111;
}
.dark-btn {
    background: #222;
    color: white;
    margin-bottom: 30px;
}

/* =========================================
   CONTROLES DE COMPRA
   ========================================= */
.more-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.more-input {
    width: 60px;
    text-align: center;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
}
.btn-more {
    background: var(--green-btn);
    color: white;
    border: none;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
}

/* =========================================
   FOOTER
   ========================================= */
footer {
    background: #8fcce8;
    color: white;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}
.footer-logo { width: 180px; }
.footer-info p {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: right;
}
.footer-link {
    color: white;
    text-decoration: none;
    transition: 0.3s;
}
.footer-link:hover {
    color: var(--gold);
    text-decoration: underline;
}
.footer-bottom {
    background: white;
    color: #999;
    text-align: center;
    padding: 15px;
    font-size: 12px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .hero-content-grid { flex-direction: column; }
    .hero-content-grid .left, .hero-content-grid .right { width: 100%; text-align: center; }
    .cards { flex-direction: column; gap: 40px; }
    .footer-content { flex-direction: column; gap: 30px; text-align: center; }
    .footer-info p { text-align: center; }
    .promos-container { flex-direction: column; align-items: center; }
    .promo-img { width: 80%; max-width: 300px; }
}
/* =========================================
   CHECKOUT
   ========================================= */
.checkout-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: var(--font-main);
}
.checkout-title {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}
.alert-box {
    background-color: #f9f9f9;
    border-top: 2px solid #d9534f;
    padding: 15px;
    color: #555;
    font-size: 14px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-icon {
    background-color: #d9534f;
    color: white;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
}
.checkout-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.billing-details {
    flex: 2;
}
.order-summary {
    flex: 1;
    border: 1px solid #ddd;
    padding: 30px;
    background: #fff;
}
.billing-details h2,
.order-summary h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #222;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Formulario */
.form-group {
    margin-bottom: 20px;
}
.form-row {
    display: flex;
    gap: 20px;
}
.half {
    flex: 1;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}
.form-group label span {
    color: red;
}
.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.error-border { border: 1px solid #d9534f !important; }
.success-border { border: 1px solid #5cb85c !important; }

/* Tabla del Pedido */
.order-table { margin-bottom: 20px; }
.order-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;
}
.order-row.header { font-weight: 700; color: #333; }
.order-row.product-row { align-items: center; }
.prod-name {
    font-size: 12px;
    max-width: 70%;
    line-height: 1.5;
}
.fw-600 { font-weight: 600; color: #333; }

/* PSE y Botón */
.payment-method {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    font-size: 14px;
}
.pse-logo {
    background: #0b2240;
    color: white;
    padding: 10px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
}
.btn-place-order {
    width: 100%;
    background: #1877f2;
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}
.btn-place-order:hover { background: #166fe5; }
.pse-img-logo {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 900px) {
    .checkout-grid { flex-direction: column; }
    .order-summary { width: 100%; }
    .form-row { flex-direction: column; gap: 0; }
}

/* =========================================
   PASARELA PSE
   ========================================= */
.pse-body {
    background-color: #f4f6f9;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    margin: 0;
}
.pse-top-header {
    background-color: #0b2240;
    padding: 15px 30px;
}
.pse-header-content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pse-logo-text {
    color: white;
    font-size: 20px;
    font-weight: 800;
}
.pse-red { color: #e60000; }
.pse-checkout-label {
    color: white;
    font-size: 20px;
    font-weight: 400;
}
.pse-container {
    max-width: 1300px;
    margin: 30px auto;
    padding: 0 20px;
}
.pse-grid {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.pse-form-section {
    flex: 2;
    background: white;
    padding: 30px;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
}
.pse-summary-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pse-step-badge {
    background-color: #00bcd4;
    color: white;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 20px;
}
.pse-merchant-info {
    font-size: 14px;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
.form-group.half {
    flex: 1;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

/* Campos con Iconos Integrados */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.field-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #888;
}
.input-with-icon input,
.input-with-icon select {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    outline: none;
}
.phone-input-group {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.country-code {
    background: #f8f9fa;
    padding: 10px 12px;
    font-size: 13px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.phone-input-group input {
    border: none;
    padding: 10px;
    width: 100%;
    outline: none;
    font-size: 14px;
}
.disabled-input {
    background-color: #e9ecef !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 12px;
    color: #495057;
}

/* Toggle Switch */
.pse-toggle-container {
    display: flex;
    align-items: center;
    height: 40px;
}
.pse-toggle-container input[type="checkbox"] {
    display: none;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 22px;
    background-color: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background-color: white;
    transition: 0.3s;
}
.pse-toggle-container input:checked + .toggle-switch {
    background-color: #1877f2 !important;
}
.pse-toggle-container input:checked + .toggle-switch::after {
    transform: translateX(23px);
}

/* Método de Pago PSE Header */
.pse-method-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 20px 0;
    border-top: 1px solid #00bcd4;
    padding-top: 20px;
}
.pse-radio-dot {
    width: 14px;
    height: 14px;
    border: 3px solid #007bff;
    border-radius: 50%;
    display: inline-block;
}
.pse-small-logo {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 50%;
    margin-left: 5px;
}

/* Sección Resumen y Totales */
.pse-banner-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    overflow: hidden;
}
.pse-instruction-banner-img {
    width: 100%;
    display: block;
}
.pse-totals-box {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 25px;
}
.pse-total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}
.pse-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0;
}
.final-row {
    font-size: 18px;
    color: #111;
}
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.pse-terms-group {
    margin: 20px 0;
    font-size: 12px;
}
.pse-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #555;
    line-height: 1.4;
    cursor: pointer;
}
.pse-warning-text {
    color: #dc3545;
    font-size: 11px;
    display: block;
    margin-top: 5px;
}
.btn-pagar-cyan {
    width: 100%;
    background-color: #00bcd4;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-pagar-cyan:hover {
    background-color: #00acc1;
}
.pse-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #777;
    margin-top: 40px;
}
@media (max-width: 900px) {
    .pse-grid {
        flex-direction: column;
    }
}

/* =========================================
   NEQUI / DAVIPLATA
   ========================================= */
.nequi-section-divider {
    border-top: 1px solid #e1e8ed;
    margin-top: 25px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nequi-dot {
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
}
.nequi-title-color {
    color: #28a745;
    font-size: 15px;
}
.nequi-alert-banner {
    background-color: #d4edda;
    color: #155724;
    padding: 14px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    margin: 15px 0;
    border: 1px solid #c3e6cb;
    font-size: 14px;
}
.nequi-card-container {
    background: #fffdf5;
    border: 2px dashed #ffc107;
    padding: 22px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 25px;
}
.nequi-box-title {
    color: #856404;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.25em;
    font-weight: 700;
}
.transfer-info-box {
    background: #fff;
    padding: 14px 18px;
    margin: 12px 0;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    text-align: left;
}
.nequi-border {
    border-left: 5px solid #28a745;
}
.daviplata-border {
    border-left: 5px solid #e67e22;
}
.transfer-heading {
    margin: 0 0 6px 0;
    font-size: 1.05em;
}
.nequi-color {
    color: #28a745;
}
.daviplata-color {
    color: #e67e22;
}
.transfer-text {
    margin: 4px 0;
    font-size: 0.95em;
    color: #444;
}
.confirmation-box {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}
.confirmation-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
}
.confirmation-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

/* =========================================
   MÉTODOS DE PAGO
   ========================================= */
.payment-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: border-color 0.3s;
}
.payment-method-item:hover {
    border-color: #4CAF50;
}
.method-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.payment-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.btn-subir-archivo {
    display: inline-block;
    background-color: #00bcd4;
    color: white;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-subir-archivo:hover {
    background-color: #0888f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.metodo-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.metodo-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.metodo-item.seleccionado {
    border-color: #28a745;
    background-color: #f0fff4;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}
.metodo-item.seleccionado.daviplata-border {
    border-color: #e67e22;
    background-color: #fef9f0;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.25);
}
.metodo-item.seleccionado.nequi-border {
    border-color: #28a745;
    background-color: #f0fff4;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* =========================================
   PAQUETES Y TICKETS
   ========================================= */
.paquete-box {
    background-color: #fafafa;
    border-left: 4px solid #0056b3;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.paquete-box:hover {
    background-color: #f0f0f0;
}
.paquete-info p {
    margin: 5px 0;
    color: #333;
}
.tickets-container {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.paquete-box.activo .tickets-container {
    display: block;
}
.tickets-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}
.tickets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}