/* ============================================
   CONVENIO TEATRO NACIONAL - ESTILOS CSS
   ============================================
   Color principal: #da483d (rojo teatro)
   Color secundario: #8b0000 (rojo oscuro)
   Color acento: #ffd700 (dorado)
   ============================================ */

/* ============================================
   VARIABLES CSS
   ============================================
   PARA CAMBIAR COLORES:
   Modifica estas variables y se aplicaran
   automaticamente en toda la pagina
   ============================================ */
:root {
    /* Colores principales del Teatro Nacional */
    --teatro-rojo: #da483d;           /* Color principal */
    --teatro-rojo-oscuro: #b83a31;    /* Hover y acentos */
    --teatro-rojo-claro: #e86b62;     /* Fondos suaves */
    --teatro-dorado: #ffd700;         /* Acentos dorados */
    --teatro-dorado-oscuro: #ccac00;  /* Dorado hover */
    
    /* Colores neutros */
    --color-blanco: #ffffff;
    --color-negro: #1a1a1a;
    --color-gris-claro: #f5f5f5;
    --color-gris: #666666;
    --color-gris-oscuro: #333333;
    
    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-full: 50%;
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   ESTILOS GENERALES DEL BODY
   ============================================
   PARA CAMBIAR LA IMAGEN DE FONDO:
   Modifica background-image en body
   ============================================ */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-gris-claro);
    /* IMAGEN DE FONDO - Cambia la URL aqui */
    background-image: url('imagens-web/heros/hero-convenios.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

/* Overlay semi-transparente sobre el fondo */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* PARA CAMBIAR OPACIDAD: Modifica el ultimo valor (0.92) */
    background: rgba(245, 245, 245, 0.92);
    z-index: -1;
}

/* Contenedor general */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================
   SECCION 1: HERO CON PARALLAX
   ============================================
   PARA CAMBIAR LA ALTURA DEL HERO:
   Modifica min-height (ej: 500px, 70vh)
   
   PARA CAMBIAR LA IMAGEN DE FONDO:
   Modifica background-image en .hero-teatro
   ============================================ */
.hero-teatro {
    position: relative;
    min-height: 450px;
    /* IMAGEN DE FONDO DEL HERO - Cambia la URL aqui */
    background-image: url('imagens-web/heros/hero-teatro.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Overlay con gradiente de color */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* PARA CAMBIAR EL COLOR DEL OVERLAY:
       Modifica los valores rgba con el color deseado */
    background: linear-gradient(
        135deg,
        rgba(218, 72, 61, 0.9) 0%,    /* Rojo teatro */
        rgba(139, 0, 0, 0.85) 50%,     /* Rojo oscuro */
        rgba(26, 26, 26, 0.9) 100%     /* Negro */
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 900px;
}

/* Titulo principal */
.hero-titulo {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-blanco);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Icono del titulo */
.icono-titulo {
    display: block;
    font-size: 4rem;
    margin-bottom: var(--spacing-sm);
    animation: float 3s ease-in-out infinite;
}

/* Subtitulo del hero */
.subtitulo-hero {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--teatro-dorado);
    margin-top: var(--spacing-sm);
    font-style: italic;
}

/* Descripcion del hero */
.hero-descripcion {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Animacion de flotacion */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================
   SECCION 2: TARIFAS PREFERENCIALES
   ============================================
   PARA INVERTIR EL LAYOUT:
   Agrega 'direction: rtl;' a .tarifas-grid
   Y 'direction: ltr;' a .tarifas-grid > *
   ============================================ */
.tarifas-section {
    padding: var(--spacing-xxl) 0;
    background: var(--color-blanco);
    /* Sombra superior para separar del hero */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

/* Grid de dos columnas */
.tarifas-grid {
    display: grid;
    /* PARA CAMBIAR PROPORCIONES:
       Modifica los valores (ej: 1fr 1fr para iguales) */
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Columna de imagen */
.tarifas-imagen {
    position: relative;
}

.imagen-teatro {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-normal);
}

.imagen-teatro:hover {
    transform: scale(1.02);
}

/* Decoracion de esquina */
.decoracion-esquina {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--teatro-rojo) 0%, var(--teatro-rojo-oscuro) 100%);
    border-radius: var(--border-radius-md);
    z-index: -1;
}

/* Columna de contenido */
.tarifas-contenido {
    padding: var(--spacing-md);
}

/* Titulo de tarifas */
.tarifas-titulo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-gris-oscuro);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.icono-seccion {
    font-size: 2rem;
}

/* Badge de ubicacion */
.ubicacion-badge {
    background: var(--teatro-rojo);
    color: var(--color-blanco);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Texto introductorio */
.tarifas-intro {
    font-size: 1.1rem;
    color: var(--color-gris);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

/* Contenedor de precios */
.precios-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Tarjeta de precio base */
.precio-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    position: relative;
    overflow: hidden;
}

/* Precio Asociado (destacado) */
.precio-asociado {
    background: linear-gradient(135deg, var(--teatro-rojo) 0%, var(--teatro-rojo-oscuro) 100%);
    color: var(--color-blanco);
    border: 3px solid var(--teatro-dorado);
    /* Animacion de pulso */
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.2); }
}

.precio-asociado .precio-etiqueta {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.95;
}

.precio-asociado .precio-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--teatro-dorado);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Badge de precio exclusivo */
.precio-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--teatro-dorado);
    color: var(--color-negro);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Precio Publico */
.precio-publico {
    background: var(--color-gris-claro);
    border: 2px solid #ddd;
}

.precio-publico .precio-etiqueta {
    font-size: 0.9rem;
    color: var(--color-gris);
}

.precio-publico .precio-valor {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gris-oscuro);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Mensaje de ahorro */
.ahorro-mensaje {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    color: #2e7d32;
    border-left: 4px solid #4caf50;
    margin-bottom: var(--spacing-lg);
}

.ahorro-icono {
    font-size: 1.5rem;
}

/* Seccion de cartelera */
.cartelera-section {
    background: rgba(218, 72, 61, 0.08);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(218, 72, 61, 0.2);
}

.cartelera-titulo {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--teatro-rojo);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cartelera-texto {
    font-size: 1rem;
    color: var(--color-gris);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

/* Boton de cartelera */
.btn-cartelera {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, var(--teatro-rojo) 0%, var(--teatro-rojo-oscuro) 100%);
    color: var(--color-blanco);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.btn-cartelera:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--teatro-rojo-oscuro) 0%, #8b0000 100%);
}

.btn-icono {
    font-size: 1.3rem;
}

.btn-flecha {
    transition: transform var(--transition-fast);
}

.btn-cartelera:hover .btn-flecha {
    transform: translateX(5px);
}

/* ============================================
   SECCION 3: COMO ADQUIRIR BOLETAS
   ============================================
   PARA CAMBIAR EL ANCHO DE LA TARJETA:
   Modifica max-width en .adquirir-card
   ============================================ */
.adquirir-section {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(135deg, rgba(218, 72, 61, 0.05) 0%, rgba(139, 0, 0, 0.08) 100%);
}

/* Tarjeta centrada */
.adquirir-card {
    /* PARA CAMBIAR EL ANCHO: Modifica este valor */
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-blanco);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border-top: 5px solid var(--teatro-rojo);
}

/* Icono de la tarjeta */
.adquirir-icono {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--teatro-rojo) 0%, var(--teatro-rojo-oscuro) 100%);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    font-size: 2.5rem;
}

/* Titulo de la tarjeta */
.adquirir-titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-gris-oscuro);
    margin-bottom: var(--spacing-md);
}

/* Texto de la tarjeta */
.adquirir-texto {
    font-size: 1.1rem;
    color: var(--color-gris);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.adquirir-texto strong {
    color: var(--teatro-rojo);
    font-weight: 600;
}

/* Boton de agencias */
.btn-agencias {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, var(--teatro-rojo) 0%, var(--teatro-rojo-oscuro) 100%);
    color: var(--color-blanco);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.btn-agencias:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(218, 72, 61, 0.4);
}

.btn-agencias .btn-flecha {
    transition: transform var(--transition-fast);
}

.btn-agencias:hover .btn-flecha {
    transform: translateX(5px);
}

/* ============================================
   ESTILOS RESPONSIVE
   ============================================
   PARA CAMBIAR BREAKPOINTS:
   Modifica los valores de max-width
   ============================================ */

/* Tablets */
@media (max-width: 992px) {
    .hero-titulo {
        font-size: 2.5rem;
    }
    
    .subtitulo-hero {
        font-size: 1.3rem;
    }
    
    .tarifas-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .tarifas-imagen {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .decoracion-esquina {
        display: none;
    }
}

/* Moviles */
@media (max-width: 768px) {
    .hero-teatro {
        min-height: 400px;
        background-attachment: scroll; /* Desactiva parallax en movil */
    }
    
    .hero-content {
        padding: var(--spacing-lg);
    }
    
    .hero-titulo {
        font-size: 2rem;
    }
    
    .icono-titulo {
        font-size: 3rem;
    }
    
    .subtitulo-hero {
        font-size: 1.1rem;
    }
    
    .hero-descripcion {
        font-size: 1rem;
    }
    
    .tarifas-section {
        padding: var(--spacing-xl) 0;
    }
    
    .tarifas-titulo {
        font-size: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .precio-asociado .precio-valor {
        font-size: 1.6rem;
    }
    
    .btn-cartelera {
        width: 100%;
        justify-content: center;
    }
    
    .adquirir-section {
        padding: var(--spacing-xl) 0;
    }
    
    .adquirir-card {
        padding: var(--spacing-lg);
        margin: 0 var(--spacing-sm);
    }
    
    .adquirir-titulo {
        font-size: 1.4rem;
    }
    
    .btn-agencias {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-md);
    }
}

/* Moviles pequenos */
@media (max-width: 480px) {
    .hero-titulo {
        font-size: 1.7rem;
    }
    
    .icono-titulo {
        font-size: 2.5rem;
    }
    
    .subtitulo-hero {
        font-size: 1rem;
    }
    
    .precio-badge {
        position: static;
        display: inline-block;
        margin-top: var(--spacing-xs);
    }
    
    .ahorro-mensaje {
        flex-direction: column;
        text-align: center;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}