/* ============================================
   PORTAL PASTORAL - ESTILOS PRINCIPALES
   Nueva Paleta: Azules Agua
   ============================================ */

/* Variables de colores - Nueva Paleta Azules Agua */
:root {
    --color-primario: #0d5f7c;        /* Azul océano profundo */
    --color-secundario: #f0f8fb;      /* Azul muy claro */
    --color-acento: #4a90a4;          /* Azul medio vibrante */
    --color-agua: #7bb3c0;            /* Azul agua suave */
    --color-cielo: #a8d0db;           /* Azul cielo claro */
    --color-espuma: #d4e8ed;          /* Azul espuma */
    --color-texto: #2c3e50;           /* Azul gris oscuro */
    --color-texto-claro: #5a6c7d;     /* Azul gris medio */
    --color-blanco: #ffffff;          /* Blanco puro */
    --color-hover: #084a61;           /* Azul más oscuro para hover */
    
    /* Sombras actualizadas */
    --sombra-suave: 0 4px 6px rgba(13, 95, 124, 0.08);
    --sombra-hover: 0 8px 15px rgba(13, 95, 124, 0.15);
    
    /* Gradientes hermosos */
    --gradiente-principal: linear-gradient(135deg, #0d5f7c 0%, #4a90a4 100%);
    --gradiente-suave: linear-gradient(135deg, #a8d0db 0%, #d4e8ed 100%);
}

/* Reset y estilos base */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-secundario);
}

/* ============================================
   HEADER PRINCIPAL
   ============================================ */

.header-principal {
    background: var(--gradiente-principal);
    color: var(--color-blanco);
    box-shadow: var(--sombra-suave);
}

.logo-parroquia {
    max-width: 80px;
    height: auto;
    border-radius: 50%;
    border: 3px solid var(--color-blanco);
    transition: all 0.3s ease;
}

.logo-parroquia:hover {
    border-color: var(--color-acento);
    box-shadow: 0 0 15px rgba(74, 144, 164, 0.3);
}

.nombre-parroquia {
    color: var(--color-blanco);
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ubicacion-parroquia {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 0;
}

.horarios-misa {
    background: rgba(255, 255, 255, 0.15);
    padding: 15px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.horarios-misa:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hora-misa {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e2dec5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BANNER DE ANUNCIOS
   ============================================ */

.banner-anuncios {
    background: linear-gradient(135deg, var(--color-acento) 0%, var(--color-agua) 100%);
    color: var(--color-blanco);
    position: relative;
    overflow: hidden;
}

.banner-anuncios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.anuncio-content {
    position: relative;
    z-index: 1;
}

.anuncio-content h5 {
    margin-bottom: 10px;
    font-weight: 600;
}

.anuncio-content p {
    font-size: 0.95rem;
    opacity: 0.95;
}

/* ============================================
   MENSAJE DEL PÁRROCO
   ============================================ */

.mensaje-parroco {
    background: var(--color-blanco);
    position: relative;
}

.mensaje-parroco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(168, 208, 219, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 232, 237, 0.03) 0%, transparent 50%);
}

.foto-parroco {
    width: 120px;
    height: 120px;
    border: 3px solid var(--color-acento);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.foto-parroco:hover {
    border-color: var(--color-primario);
    box-shadow: 0 0 20px rgba(74, 144, 164, 0.2);
    transform: scale(1.05);
}

.mensaje-bienvenida {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-texto-claro);
    max-width: 600px;
    margin: 0 auto 15px auto;
    position: relative;
    z-index: 1;
}

/* ============================================
   SECCIONES PRINCIPALES
   ============================================ */

.secciones-principales {
    background: var(--color-secundario);
}

.card-servicio {
    background: var(--color-blanco);
    border: 1px solid var(--color-espuma);
    border-radius: 15px;
    padding: 30px 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--sombra-suave);
    position: relative;
    overflow: hidden;
}

.card-servicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 208, 219, 0.2), transparent);
    transition: left 0.5s ease;
}

.card-servicio:hover::before {
    left: 100%;
}

.card-servicio:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
    border-left: 4px solid var(--color-acento);
    border-color: var(--color-agua);
}

.card-icon {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.card-servicio:hover .card-icon {
    color: var(--color-acento);
    transform: scale(1.1);
}

.card-servicio h5 {
    color: var(--color-primario);
    font-weight: 600;
    margin-bottom: 15px;
}

.card-servicio p {
    color: var(--color-texto-claro);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.card-servicio .card-footer {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
}

.card-servicio .card-footer small {
    font-weight: 500;
    color: var(--color-acento);
}

/* ============================================
   ACCESOS RÁPIDOS
   ============================================ */

.accesos-rapidos {
    background: var(--color-blanco);
}

.btn-rapido {
    background: transparent;
    border: 2px solid var(--color-agua);
    border-radius: 15px;
    padding: 20px 15px;
    width: 100%;
    color: var(--color-primario);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-rapido::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradiente-suave);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-rapido:hover::before {
    left: 0;
}

.btn-rapido:hover {
    color: var(--color-primario);
    border-color: var(--color-acento);
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
}

.btn-rapido i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
    color: var(--color-acento);
    transition: all 0.3s ease;
}

.btn-rapido:hover i {
    color: var(--color-primario);
    transform: scale(1.1);
}

.btn-rapido span {
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ============================================
   FOOTER
   ============================================ */

.footer-principal {
    background: var(--color-primario);
    color: var(--color-blanco);
    position: relative;
}

.footer-principal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-acento), var(--color-agua), var(--color-cielo));
}

.footer-principal h6 {
    color: var(--color-cielo);
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-principal p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.redes-sociales .btn {
    border-color: var(--color-agua);
    color: var(--color-agua);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.redes-sociales .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-agua);
    transition: left 0.3s ease;
    z-index: -1;
}

.redes-sociales .btn:hover::before {
    left: 0;
}

.redes-sociales .btn:hover {
    color: var(--color-primario);
    border-color: var(--color-agua);
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .nombre-parroquia {
        font-size: 1.5rem;
    }
    
    .horarios-misa {
        margin-top: 20px;
    }
    
    .card-servicio {
        margin-bottom: 20px;
    }
    
    .mensaje-bienvenida {
        font-size: 1rem;
    }
    
    .btn-rapido {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .card-servicio {
        padding: 25px 20px;
    }
    
    .card-icon {
        font-size: 2.5rem;
    }
    
    .nombre-parroquia {
        font-size: 1.3rem;
    }
}

/* ============================================
   ANIMACIONES Y EFECTOS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.card-servicio {
    animation: fadeInUp 0.6s ease forwards;
}

.card-servicio:nth-child(1) { animation-delay: 0.1s; }
.card-servicio:nth-child(2) { animation-delay: 0.2s; }
.card-servicio:nth-child(3) { animation-delay: 0.3s; }
.card-servicio:nth-child(4) { animation-delay: 0.4s; }
.card-servicio:nth-child(5) { animation-delay: 0.5s; }
.card-servicio:nth-child(6) { animation-delay: 0.6s; }

.logo-parroquia:hover {
    animation: floatAnimation 2s ease-in-out infinite;
}

/* ============================================
   UTILIDADES ACTUALIZADAS
   ============================================ */

.text-agua {
    color: var(--color-agua);
}

.text-cielo {
    color: var(--color-cielo);
}

.text-acento {
    color: var(--color-acento);
}

.bg-agua {
    background-color: var(--color-agua);
}

.bg-cielo {
    background-color: var(--color-cielo);
}

.bg-gradiente-principal {
    background: var(--gradiente-principal);
}

.bg-gradiente-suave {
    background: var(--gradiente-suave);
}

.border-agua {
    border-color: var(--color-agua);
}

.border-acento {
    border-color: var(--color-acento);
}

.shadow-custom {
    box-shadow: var(--sombra-suave);
}

.shadow-hover {
    box-shadow: var(--sombra-hover);
}

/* Efectos especiales con la nueva paleta */
.efecto-agua {
    background: linear-gradient(135deg, var(--color-agua), var(--color-cielo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glassmorphism {
    background: rgba(240, 248, 251, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 208, 219, 0.2);
}

.water-ripple:hover {
    position: relative;
    overflow: hidden;
}

.water-ripple:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 208, 219, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* ============================================
   OPCIONES PARA CONVERTIR LA IGLESIA A BLANCO
   ============================================ */

/* OPCIÓN 1: Usando filter (más simple) */
.iglesia-blanca {
    filter: brightness(0) invert(1);
    /* brightness(0) convierte a negro, invert(1) lo invierte a blanco */
}

/* OPCIÓN 2: Usando filter con saturate para mejor control */
.iglesia-blanca-v2 {
    filter: brightness(0) saturate(100%) invert(1);
}

/* OPCIÓN 3: Para elementos SVG específicamente */
.iglesia-svg-blanca {
    fill: white;
    stroke: white;
}

/* OPCIÓN 4: Si es una imagen PNG/JPG con CSS avanzado */
.iglesia-imagen-blanca {
    filter: brightness(0) invert(1) contrast(100%);
}

/* ============================================
   IMPLEMENTACIÓN EN EL PORTAL
   ============================================ */

/* Para usar en el logo del header */
.logo-parroquia.iglesia-blanca {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Variación con hover effect */
.logo-parroquia.iglesia-blanca:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* ============================================
   VERSIONES PARA DIFERENTES CONTEXTOS
   ============================================ */

/* Para usar sobre fondo oscuro */
.iglesia-sobre-fondo-oscuro {
    filter: brightness(0) invert(1);
}

/* Para usar sobre fondo claro (mantener original o usar gris) */
.iglesia-sobre-fondo-claro {
    filter: brightness(0.3); /* Gris oscuro */
}

/* Para usar como acento dorado en el portal */
.iglesia-dorada {
    filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(5) hue-rotate(15deg);
    /* Convierte a dorado/amarillo */
}

/* Para usar con el color acento del portal (azul agua) */
.iglesia-azul-agua {
    filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(3) hue-rotate(160deg);
    /* Convierte a azul agua */
}

/* ============================================
   CONTROL DE TAMAÑO - SOLUCIÓN PRINCIPAL
   ============================================ */

/* Clase para ajustar cualquier imagen de iglesia */
.iglesia-ajustada {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene proporción, no corta */
    max-width: 100%;
    max-height: 100%;
}

/* Para contenedores específicos */
.contenedor-logo {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ============================================
   SOLUCIÓN PARA IMÁGENES CON FONDO SÓLIDO
   ============================================ */

/* Si la imagen tiene fondo negro/oscuro, usar esta clase */
.logo-iglesia-solo-icono {
    width: 100px;
    height: 70px;
    object-fit: contain;
    /* Solo invierte los colores sin cambiar brillo */
    filter: invert(1);
    transition: all 0.3s ease;
}

/* ============================================
   SOLUCIÓN PARA PNG TRANSPARENTE → BLANCO
   ============================================ */

/* Para PNG transparente que queremos convertir a blanco */
.logo-iglesia-png-transparente {
    width: 100px;
    height: 70px;
    object-fit: contain;
    /* Este filtro convierte partes negras a blanco sin afectar transparencia */
    filter: brightness(0) saturate(100%) invert(1) contrast(100%);
    transition: all 0.3s ease;
}

/* Método alternativo más suave */
.logo-iglesia-suave {
    width: 100px;
    height: 70px;
    object-fit: contain;
    /* Convierte a blanco de forma más suave */
    filter: grayscale(100%) brightness(0) invert(1);
    transition: all 0.3s ease;
}

/* Método usando drop-shadow (mantiene transparencia) */
.logo-iglesia-shadow {
    width: 100px;
    height: 70px;
    object-fit: contain;
    /* Oculta original y crea sombra blanca */
    filter: opacity(0%) drop-shadow(0 0 0 white);
    transition: all 0.3s ease;
}

/* MÉTODO RECOMENDADO para PNG transparente */
.logo-iglesia-blend {
    width: 100px;
    height: 70px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* Este mix-blend-mode respeta la transparencia */
    mix-blend-mode: normal;
    background: transparent;
    transition: all 0.3s ease;
}

.logo-iglesia {
    width: 160px;
    height: 70px;
    filter: invert(1) brightness(2) contrast(1);
    mix-blend-mode: screen;
}

/* Método CSS moderno (más preciso) */
.logo-iglesia-moderno {
    width: 70px;
    height: 70px;
    object-fit: contain;
    /* Solo afecta elementos no transparentes */
    filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
    isolation: isolate;
    transition: all 0.3s ease;
}

/* Método alternativo usando CSS mask (más preciso) */
.logo-iglesia-mask {
    width: 160px;
    height: 70px;
    background-color: white;
    mask: url('iglesia.png') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('iglesia.png') no-repeat center;
    -webkit-mask-size: contain;
}

/* Para SVG inline */
.logo-iglesia-svg {
    width: 160px;
    height: 80px;
    fill: white;
    stroke: none;
}

/* Método usando background-image (requiere imagen transparente) */
.logo-iglesia-bg {
    width: 160px;
    height: 80px;
    background-image: url('iglesia.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
}

/* SOLUCIÓN UNIVERSAL - Prueba esta primero */
.logo-iglesia-universal {
    width: 160px;
    height: 80px;
    object-fit: contain;
    filter: invert(1) contrast(100%) brightness(2);
    transition: all 0.3s ease;
}

/* Tamaños específicos para el header */
.logo-header-sm {
    width: 90px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.logo-header-md {
    width: 160px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.logo-header-lg {
    width: 120px;
    height: 90px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Tamaños comunes */
.iglesia-small {
    width: 32px;
    height: 24px;
}
.iglesia-medium {
    width: 70px;
    height: 48px;
}

.iglesia-large {
    width: 100px;
    height: 72px;
}

.iglesia-xl {
    width: 120px;
    height: 96px;
}

/* Efectos adicionales */
.iglesia-con-sombra {
    filter: brightness(0) invert(1) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.iglesia-con-brillo {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Animaciones */
.iglesia-pulse {
    animation: pulse-iglesia 2s ease-in-out infinite alternate;
}

@keyframes pulse-iglesia {
    from {
        filter: brightness(0) invert(1) opacity(0.8);
    }
    to {
        filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
}

/* ============================================
   EJEMPLOS DE USO EN HTML
   ============================================ */

/* 
EJEMPLO 1 - Imagen simple:
<img src="iglesia.png" class="iglesia-blanca iglesia-medium" alt="Iglesia">

EJEMPLO 2 - Como logo en el header:
<img src="iglesia.png" class="logo-parroquia iglesia-blanca" alt="Logo Parroquia">

EJEMPLO 3 - Con efectos:
<img src="iglesia.png" class="iglesia-blanca iglesia-large iglesia-con-sombra" alt="Iglesia">

EJEMPLO 4 - SVG inline:
<svg class="iglesia-svg-blanca iglesia-medium">
    <!-- contenido del SVG -->
</svg>

EJEMPLO 5 - Con colores del portal:
<img src="iglesia.png" class="iglesia-azul-agua iglesia-medium" alt="Iglesia">
*/

/* ============================================
   RESPONSIVE PARA DIFERENTES PANTALLAS
   ============================================ */

@media (max-width: 768px) {
    .logo-parroquia.iglesia-blanca {
        width: 90px;
        height: 60px;
    }
}

@media (max-width: 576px) {
    .logo-parroquia.iglesia-blanca {
        width: 80px;
        height: 50px;
    }
}

/* ============================================
   COMPATIBILIDAD PARA NAVEGADORES ANTIGUOS
   ============================================ */

/* Fallback para navegadores que no soportan filter */
@supports not (filter: invert(1)) {
    .iglesia-blanca {
        /* Usar una versión blanca de la imagen como fallback */
        content: url('iglesia-blanca.png');
    }
}

/* ============================================
   VARIACIONES TEMÁTICAS
   ============================================ */

/* Para tema navideño */
.iglesia-navidad {
    filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(5) hue-rotate(120deg);
    /* Verde navideño */
}

/* Para tema pascual */
.iglesia-pascua {
    filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(5) hue-rotate(280deg);
    /* Púrpura pascual */
}

/* Para tiempo ordinario */
.iglesia-ordinario {
    filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(3) hue-rotate(90deg);
    /* Verde ordinario */
}

/* ============================================
   ESTADOS INTERACTIVOS
   ============================================ */

.iglesia-interactive {
    transition: all 0.3s ease;
    cursor: pointer;
}

.iglesia-interactive:hover {
    filter: brightness(0) invert(1) scale(1.1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
    transform: scale(1.05);
}

.iglesia-interactive:active {
    transform: scale(0.95);
}

/* ============================================
   LOADING STATES
   ============================================ */

.iglesia-loading {
    filter: brightness(0) invert(1) opacity(0.5);
    animation: spin-iglesia 1s linear infinite;
}

@keyframes spin-iglesia {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}