/* Estilos para el widget Planea tu Visita del Centro Cultural Amaya */
.visita-section {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: white;
    line-height: 1.5;
}

.visita-section .radial-gradient-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 70% 30%,
        rgba(244, 63, 94, 0.15) 0%,
        transparent 50%
    ),
    radial-gradient(
        circle at 30% 70%,
        rgba(251, 191, 36, 0.15) 0%,
        transparent 50%
    );
    opacity: 0.2;
    pointer-events: none;
}

.visita-section .diagonal-lines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(244, 63, 94, 0.03) 0px,
        rgba(244, 63, 94, 0.03) 1px,
        transparent 1px,
        transparent 60px
    ),
    repeating-linear-gradient(
        -45deg,
        rgba(251, 191, 36, 0.03) 0px,
        rgba(251, 191, 36, 0.03) 1px,
        transparent 1px,
        transparent 60px
    );
    opacity: 0.05;
    pointer-events: none;
}

.visita-section .container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Encabezado */
.visita-section .section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.visita-section .section-header .divider {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.visita-section .section-header .divider-line {
    height: 1px;
    width: 4rem;
    background: linear-gradient(to right, transparent, rgb(244 63 94), transparent);
}

.visita-section .section-header h2 {
    font-size: 3.75rem;
    font-weight: 200;
    letter-spacing: 0.05em;
    background: linear-gradient(to right, white, rgb(253 164 175), white);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.visita-section .section-header p {
    font-size: 1.25rem;
    color: rgb(148 163 184);
    max-width: 48rem;
    margin: 0 auto;
    font-weight: 300;
}

/* Grid Principal */
.visita-section .visita-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .visita-section .visita-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }

    /* Hacer que la tarjeta de información ocupe todo el ancho en pantallas grandes
       para reemplazar el espacio que antes ocupaba el mapa */
    .visita-section .info-card {
        grid-column: 1 / -1;
    }

    /* Forzar anchura completa del wrapper y del card */
    .visita-section .visita-grid > .animate-fade-in-up {
        grid-column: 1 / -1;
        width: 100%;
    }

    .visita-section .visita-grid > .animate-fade-in-up .info-card {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* Regla con mayor especificidad para garantizar ancho completo
       incluso si existen estilos en conflicto en el tema o en otros CSS */
    .visita-section .container .visita-grid > .animate-fade-in-up,
    .visita-section .container .visita-grid > .animate-fade-in-up > .info-card {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: stretch !important;
    }

    /* Breakout: hacer que la sección salga de la columna de Elementor
       para que la tarjeta pueda usar todo el ancho del contenedor.
       Esto expande la sección al ancho de la ventana, pero la clase
       .container mantiene el contenido centrado con su max-width. */
    .elementor .visita-section,
    .wpb .visita-section {
        position: relative !important;
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        box-sizing: border-box !important;
        z-index: 0 !important;
    }

    /* Asegurar que el .container interna se centre y limite el contenido */
    .elementor .visita-section > .container,
    .wpb .visita-section > .container {
        max-width: 80rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Distribución interna: convertir la lista de info en grid de 2 columnas
       para aprovechar el ancho y mejorar el layout interno */
    .visita-section .info-card {
        padding: 3rem !important;
    }

    .visita-section .info-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem 3rem !important;
        align-items: start !important;
    }

    /* La primera info-item (Ubicación) ocupa toda la fila */
    .visita-section .info-list .info-item:first-of-type {
        grid-column: 1 / -1;
    }

    /* Hacer que el bloque de horarios ocupe su columna y que su grid interno se adapte */
    .visita-section .info-list .horarios-grid {
        grid-column: auto / auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Asegurar que Contacto y Precios se distribuyan correctamente */
    .visita-section .info-list .info-item .item-content {
        display: block;
    }

    /* Forzar que cada info-item sea un grid item (no flex) para evitar conflictos
       con la regla base .info-item { display: flex } definida más abajo */
    .visita-section .info-list .info-item {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* --- Opción 1: columna principal + columna lateral (2fr / 1fr) --- */
    .visita-section .info-list {
        grid-template-columns: 2fr 1fr !important;
        gap: 2rem !important;
    }

    /* Ubicación ocupa toda la fila */
    .visita-section .info-list > .info-item:first-of-type {
        grid-column: 1 / -1 !important;
        padding: 1rem !important;
        background: rgba(15,23,42,0.35) !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(244,63,94,0.06) !important;
    }

    /* Horarios -> columna principal (izq) */
    .visita-section .info-list > .info-item:nth-of-type(2) {
        grid-column: 1 / 2 !important;
        padding: 1rem !important;
        background: rgba(15,23,42,0.25) !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(244,63,94,0.04) !important;
    }

    /* Contacto y Precios -> columna lateral (derecha), apilados */
    .visita-section .info-list > .info-item:nth-of-type(3),
    .visita-section .info-list > .info-item:nth-of-type(4) {
        grid-column: 2 / 3 !important;
        padding: 1rem !important;
        background: rgba(15,23,42,0.25) !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(244,63,94,0.04) !important;
        margin-bottom: 1rem !important;
    }

    /* Ajustes para la grid interna de horarios */
    .visita-section .info-list > .info-item:nth-of-type(2) .horarios-grid {
        margin-top: 0.5rem !important;
    }

    /* Restaurar el estilo de item-content dentro de los bloques */
    .visita-section .info-list .info-item .item-content {
        padding: 0 !important;
        color: rgb(148 163 184) !important;
    }

    /* Ajustes estéticos: asegurar títulos y paddings coherentes */
    .visita-section .info-header {
        margin-bottom: 1.5rem;
    }

    .visita-section .info-item h4 {
        margin-bottom: 0.5rem;
    }
}

    /* Asegurar que el wrapper directo que contiene .info-card sea el grid-item
       y ocupe todo el ancho en pantallas grandes. */
    .visita-section .visita-grid > .animate-fade-in-up {
        grid-column: 1 / -1;
    }

/* Información de Contacto */
.visita-section .info-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 1rem;
    padding: 2.5rem;
    backdrop-filter: blur(8px);
    position: relative;
    /* overflow: hidden eliminado — causa bug en Chrome con backdrop-filter: bloquea selección de texto */
    user-select: text;
    -webkit-user-select: text;
}

.visita-section .info-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem; /* hereda el radio visual del card */
    overflow: hidden;    /* recorta el gradiente dentro del card */
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(251, 191, 36, 0.1));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* no intercepta clicks ni selección */
}

.visita-section .info-card:hover::before {
    opacity: 1;
}

.visita-section .info-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.visita-section .info-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgb(244, 63, 94), rgb(251, 191, 36));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visita-section .info-title {
    font-size: 1.875rem;
    font-weight: 300;
    background: linear-gradient(to right, white, rgb(253 164 175));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.visita-section .info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.visita-section .info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.visita-section .info-item:hover {
    background: rgba(244, 63, 94, 0.05);
    border-color: rgba(244, 63, 94, 0.2);
}

.visita-section .item-icon {
    color: rgb(251, 113, 133);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.visita-section .item-content h4 {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: white;
}

.visita-section .item-content p {
    color: rgb(148, 163, 184);
    font-size: 1rem;
}

.visita-section .item-content a {
    color: rgb(251, 113, 133);
    text-decoration: none;
    transition: color 0.3s ease;
}

.visita-section .item-content a:hover {
    color: rgb(253, 164, 175);
}

/* Horarios */
.visita-section .horarios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.visita-section .horario-item {
    background: rgba(30, 41, 59, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    border: 1px solid rgba(244, 63, 94, 0.1);
}

.visita-section .horario-dia {
    font-weight: 500;
    color: white;
    margin-bottom: 0.25rem;
}

.visita-section .horario-hora {
    color: rgb(251, 113, 133);
    font-size: 0.875rem;
}

/* Mapa */
.visita-section .mapa-container {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(244, 63, 94, 0.2);
    height: 500px;
    position: relative;
}

.visita-section .mapa-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b, #334155);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

.visita-section .mapa-icon {
    color: rgb(251, 113, 133);
    width: 3rem;
    height: 3rem;
}

.visita-section .mapa-text {
    color: rgb(148, 163, 184);
    text-align: center;
}

/* Tarjetas de Servicios */
.visita-section .servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.visita-section .servicio-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.visita-section .servicio-card:hover {
    transform: translateY(-5px);
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow: 0 20px 40px -10px rgba(244, 63, 94, 0.2);
}

.visita-section .servicio-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(251, 191, 36, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: rgb(251, 113, 133);
}

.visita-section .servicio-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: white;
}

.visita-section .servicio-desc {
    color: rgb(148, 163, 184);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* CTA */
.visita-section .cta-section {
    margin-top: 5rem;
    text-align: center;
}

.visita-section .cta-card {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(251, 191, 36, 0.1));
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    backdrop-filter: blur(8px);
    max-width: 600px;
    margin: 0 auto;
}

.visita-section .cta-title {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 1rem;
    background: linear-gradient(to right, white, rgb(253 164 175));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.visita-section .cta-text {
    color: rgb(148, 163, 184);
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

.visita-section .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.visita-section .btn {
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.visita-section .btn-primary {
    background: linear-gradient(135deg, rgb(244, 63, 94), rgb(251, 191, 36));
    color: white;
}

.visita-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.4);
}

.visita-section .btn-secondary {
    background: transparent;
    color: rgb(251, 113, 133);
    border-color: rgba(244, 63, 94, 0.4);
}

.visita-section .btn-secondary:hover {
    background: rgba(244, 63, 94, 0.1);
    transform: translateY(-2px);
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.visita-section .animate-fade-in-up {
    animation: fadeInUp 1.2s ease-out;
}

.visita-section .animate-fade-in-up-delay {
    animation: fadeInUp 1.2s ease-out 0.4s both;
}

/* Responsive */
@media (max-width: 768px) {
    .visita-section {
        padding: 4rem 0;
    }
    
    .visita-section .section-header h2 {
        font-size: 2.5rem;
    }
    
    .visita-section .info-card {
        padding: 1.5rem;
    }
    
    .visita-section .horarios-grid {
        grid-template-columns: 1fr;
    }
    
    .visita-section .servicios-grid {
        grid-template-columns: 1fr;
    }
    
    .visita-section .cta-title {
        font-size: 1.5rem;
    }
}