/* -------------------------------------- */
/* SECCIÓN PRINCIPAL DE CONTACTO (FONDO GRIS DE ANCHO COMPLETO) */
/* -------------------------------------- */

.Blog-seccion-fondo {
    width: 100%; /* Asegura que tome todo el ancho */
    /* Fondo gris claro */
    background-color: #f4f4f4; /* Un gris muy claro */
    /* Altura de 1000px solicitada */
    min-height: 700px;
    box-sizing: border-box; 

    /* Configuración Flexbox para centrar el contenido interno (el contenedor de artículos) */
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    padding: 20px 0; /* Agrega un poco de padding vertical para que no se pegue al borde */
}

/* -------------------------------------- */
/* CONTENEDOR DE ARTÍCULOS DEL BLOG (Para alinear y centrar los 6 bloques) */
/* -------------------------------------- */
.blog-articulos {
    /* El ancho es la mitad del contenedor principal (.Blog-seccion-fondo), 
       pero agregamos un max-width para que se vea bien en pantallas grandes */
    width: 55%; /* Ancho para escritorio */
    max-width: 1000px;
    
    /* Configuración Flexbox para alinear los 6 elementos verticalmente */
    display: flex;
    flex-direction: column; /* Alineación vertical */
    gap: 20px; /* Espacio entre cada artículo */

    /* Centrado horizontal y vertical ya manejado por .Blog-seccion-fondo */
}

/* -------------------------------------- */
/* ESTILO INDIVIDUAL DEL ARTÍCULO (Los 6 contenedores) */
/* -------------------------------------- */
.articulo-contenedor {
    /* Altura igualada: usaremos un padding generoso para simular el alto */
    min-height: 90px;
    padding: 20px;
    
    /* Fondo */
    background-color: #ffffff; 
    
    /* Bordes redondeados de 10px */
    border-radius: 10px; 
    
    /* Sombra para simular que está elevado (elevación sutil) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    
    /* MODIFICACIÓN: Flexbox para que los hijos directos (header-content y expansion-content) se apilen */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenido interno a la izquierda */
    justify-content: flex-start; 
    
    /* Transición suave para el efecto de elevación al pasar el mouse */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indicar que es clickeable */
}

/* Contenido de la cabecera (Ícono, Texto, Flecha) */
.articulo-contenedor .header-content {
    /* Asegura que el contenido principal (ícono, texto, flecha) se mantenga en una fila */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Ocupa todo el ancho del padding */
    min-height: 50px; /* Altura mínima para centrar el texto verticalmente */
}

/* Estilos para el contenedor del ícono (el cuadrado de fondo) */
.icono-contenedor {
    /* Color Azul Aguamarina Claro para el fondo del cuadrado */
    background-color: #E6F7FF; /* Un azul muy claro */
    width: 50px;
    height: 50px;
    border-radius: 10px; /* Bordes redondeados al 10px */
    
    /* Centrar el ícono dentro del cuadrado */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Evita que el contenedor de ícono se encoja */
    flex-shrink: 0;
    
    /* Margin derecho para separarlo del texto */
    margin-right: 15px;
}

/* Estilo para el ícono de Font Awesome dentro del cuadrado */
.icono-contenedor i {
    /* Color Azul Usado: #19477B */
    color: #19477B;
    font-size: 1.5rem;
}

/* Estilo para el texto dentro de los artículos (TRATADOS COMO TÍTULOS) */
.articulo-contenedor p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    
    /* Color de Título Principal: #19477B */
    color: #19477B; 
    
    /* Peso de Título Principal: Bold (700) */
    font-weight: 700; 
    
    /* Alineación a la izquierda */
    text-align: left;
    /* Permite que el párrafo tome el espacio restante, empujando la flecha al final */
    flex-grow: 1;
    
    /* Agregamos un poco de margen para que no se pegue a la flecha */
    margin-right: 10px;
}

/* Estilo para el ícono de la flecha a la derecha */
.flecha-derecha {
    /* Color Negro para el párrafo (indicador secundario) */
    color: #000000;
    font-size: 1.2rem;
    /* Evita que la flecha se encoja */
    flex-shrink: 0;
    transition: transform 0.3s ease; /* Transición para el giro */
}

/* Clase para girar la flecha cuando el contenido esté abierto */
.flecha-derecha.open {
    transform: rotate(90deg);
}


/* Efecto Hover opcional: hacer que se eleven un poco más al pasar el mouse */
.articulo-contenedor:hover {
    transform: translateY(-3px); /* Se mueve ligeramente hacia arriba */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); /* Sombra más fuerte */
}


/* -------------------------------------- */
/* SECCIÓN DE CONTENIDO EXPANDIBLE (ACORDEÓN) */
/* -------------------------------------- */

.expansion-content {
    /* Estado inicial: oculto */
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    width: 100%; /* Ocupa todo el ancho */
    
    /* Color de fondo igual al fondo principal */
    background-color: #f9f9f9; 
    border-radius: 10px; /* Hereda el borde redondeado del padre, pero solo se notará el fondo */
    
    /* Agregamos un pequeño margen superior para separarlo del título */
    margin-top: 15px; 
    padding-top: 0; /* Padding inicial 0 */
    padding-bottom: 0; /* Padding inicial 0 */
}

/* Estado abierto: se expande */
.expansion-content.open {
    /* Altura máxima para mostrar el contenido (debe ser mayor que el contenido real) */
    max-height: 500px; /* Ajustar según la altura real de la cuadrícula si es necesario */
    padding-top: 15px; /* Separación interna superior */
    padding-bottom: 15px; /* Separación interna inferior */
}

/* -------------------------------------- */
/* CUADRÍCULA DE SUBARTÍCULOS (3 FILAS, 2 COLUMNAS) */
/* -------------------------------------- */
.subarticulos-grid {
    display: grid;
    /* 2 columnas de igual ancho (fracción) */
    grid-template-columns: 1fr 1fr; 
    /* Espacio entre las celdas (gap) */
    gap: 15px; 
    width: 90%; /* Ancho para escritorio/tablet */
    margin: 0 auto; /* Centrado horizontal */
}

/* ACTUALIZADO: Estilo del contenedor del subartículo (ahora un enlace <a>) */
.subarticulo-item {
    /* Reinicia las propiedades de enlace y hace que se comporte como un bloque */
    background-color: #ffffff; /* Fondo blanco */
    padding: 15px;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
    text-decoration: none; /* Elimina el subrayado por defecto del enlace */
    color: inherit; /* Hereda el color de texto del contenedor principal (negro) */
    display: flex; /* Para que el contenido interno se apile */
    flex-direction: column;
    
    /* Transición y cursor para interactividad */
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* NUEVO: Efecto al pasar el mouse sobre el contenedor/enlace */
.subarticulo-item:hover {
    background-color: #f8f8f8; /* Un ligero cambio de color para feedback */
    transform: translateY(-1px); /* Efecto de elevación sutil */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Nuevo: Contenedor para alinear el ícono y el título del subartículo */
.subarticulo-item .subarticulo-header {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el ícono y el texto */
    margin-bottom: 5px; /* Espacio antes de la descripción/lista */
}

/* Nuevo: Estilo para el ícono de check */
.item-check-icon {
    color: #d76f00; /* Color naranja oscuro solicitado */
    font-size: 1.1rem; /* Tamaño del ícono */
    flex-shrink: 0; /* Evita que el ícono se encoja */
}

/* Estilo para los subtítulos (texto en <strong>) */
.subarticulo-item strong {
    /* Mantenemos el color naranja oscuro para el título */
    color: #d76f00; 
    font-weight: 700; 
    font-size: .9rem;
    margin: 0;
}

/* Nuevo: Estilo para el párrafo de descripción (aplicable a los que no son lista) */
.subarticulo-item .subarticulo-description {
    font-size: 0.75rem;
    font-weight: 400; /* Regular */
    color: #000000; /* Párrafos en negro */
    margin: 0;  
    line-height: 1.4;
    padding-left: 20px; /* Pequeña sangría para separarlo del título */
}

/* Nuevo: Estilo para las listas de subpuntos */
.subarticulo-list {
    list-style: none; /* Quitamos el estilo por defecto para usar un custom bullet */
    padding-left: 25px; /* Aumento la sangría un poco para acomodar el bullet */
    margin: 5px 0 0 0; 
    font-size: 0.75rem;
    color: #000000;
}

.subarticulo-list li {
    margin-bottom: 3px;
    position: relative;
    /* Importante: el texto del li comienza justo donde empieza el padding-left del ul */
    padding-left: 10px; /* Damos espacio al texto para que no se pegue al bullet */
    /* Como el contenedor padre es el enlace, no necesitamos estilo de enlace aquí */
}

/* Bullet point customizado, ahora negro y con ajuste de posición */
.subarticulo-list li::before {
    content: "\2022"; /* Código para un punto gordo (bullet) */
    color: #000000; /* Color NEGRO */
    font-weight: 700;
    display: inline-block;
    position: absolute;
    /* Ajuste de posición: left -5px para alinear con el texto */
    left: -5px; 
    top: 0; 
    font-size: 1.1em; /* Un poco más pequeño para alinear mejor */
    line-height: 1; /* Asegurar que no afecte el espacio de la línea */
}


/* ====================================== */
/* RESPONSIVE DESIGN - MEDIA QUERIES */
/* ====================================== */

@media (max-width: 768px) {
    /* -------------------------------------- */
    /* Contenedor Principal de Artículos */
    /* -------------------------------------- */
    .blog-articulos {
        width: 90%; /* Aumenta el ancho para ocupar más espacio en el móvil */
        gap: 15px; /* Reduce un poco el espacio entre artículos */
    }

    /* -------------------------------------- */
    /* Artículo Individual y su Contenido */
    /* -------------------------------------- */
    .articulo-contenedor {
        padding: 15px; /* Reduce el padding interno */
        min-height: 70px; /* Reduce la altura mínima */
    }

    .articulo-contenedor p {
        font-size: 1rem; /* Reduce el tamaño del título principal */
    }

    /* Contenedor de Ícono */
    .icono-contenedor {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .icono-contenedor i {
        font-size: 1.2rem; /* Reduce el tamaño del ícono */
    }

    /* -------------------------------------- */
    /* Cuadrícula Expandida (Subartículos) */
    /* -------------------------------------- */
    .subarticulos-grid {
        /* Pasa de 2 columnas a 1 columna para una vista vertical más limpia */
        grid-template-columns: 1fr; 
        width: 90%; /* MODIFICADO: Ocupa el 90% del espacio para dar margen a los lados */
        margin: 0 auto; /* NUEVO: Centra la cuadrícula de subartículos */
        gap: 10px; /* Reduce el espacio entre subartículos */
    }

    /* -------------------------------------- */
    /* Subartículo Individual (tarjetas internas) */
    /* -------------------------------------- */
    .subarticulo-item {
        padding: 12px; /* Reduce el padding de las tarjetas internas */
    }

    .subarticulo-item strong, 
    .subarticulo-item .subarticulo-description,
    .subarticulo-list {
        font-size: 0.9rem; /* Reduce ligeramente el tamaño del texto */
    }

    .subarticulo-list {
        padding-left: 20px;
    }

    .subarticulo-item .subarticulo-header {
        gap: 5px;
    }
}

/* --- DETALLE BLOG --- */

/* ==============================================
   DISEÑO DE DETALLE (COMPATIBLE CON QUEOFRECEMOS)
   ============================================== */

#detalle-blog-container {
    width: 100%;
    padding: 40px 0;
    display: none;
}

.detalle-servicio-content {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: fadeIn 0.4s ease-out;
}

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

.detalle-servicio-content h2 {
    font-size: 34px;
    margin-bottom: 25px;
    color: #19477B;
    font-weight: 700;
    text-align: left;
}

.detalle-servicio-content h3 {
    font-size: 22px;
    margin-top: 25px;
    color: #d76f00;
    font-weight: 600;
}

.detalle-servicio-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-top: 10px;
}

.detalle-servicio-content ul {
    margin-top: 12px;
    padding-left: 22px;
}

.detalle-servicio-content ul li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.btn-regresar {
    background-color: #19477B;
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 25px;
    transition: background 0.2s ease-in-out;
}

.btn-regresar:hover {
    background-color: #163b68;
}

.btn-regresar i {
    margin-right: 6px;
}

body {
    overflow-x: hidden;
}