/* General Styles */
* {
    box-sizing: border-box;
}
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
    
}
/* Estilos unificados para encabezados y párrafos */
h1, h2, h3, h4, p {
    font-family: 'Poppins', sans-serif;
    
    color: #1544a9; /* Color azul */
   
    line-height: 1.5; /* Altura de línea uniforme */
}

/* Estilos adicionales específicos */
h1 {
    font-size: 2.5rem; /* Tamaño más grande para h1 */
    font-weight: bold; /* Negrita */
}

h2 {
    font-size: 2rem; /* Tamaño ligeramente menor que h1 */
    font-weight: bold;
}

h3 {
    font-size: 1.8rem; /* Tamaño intermedio */
    font-weight: bold;
}

h4 {
    font-size: 1.6rem; /* Tamaño igual a p para consistencia */
    font-weight: bold;
}

p {
    font-size: 1.2rem; /* Tamaño base para texto */
    color: #666; /* Gris oscuro */
    margin-bottom: 1.4em; /* Mayor espaciado entre párrafos */
}

/* Sobrescritura para encabezados dentro de secciones específicas */
.section h1, .section h2, .section h3, .section h4 {
    color: #1544a9; /* Aplicar el color azul también aquí */
    font-size: inherit; /* Mantener los tamaños heredados */
}

.section p {
    color: #666; /* Asegurar que el texto sea gris en estas secciones */
    font-size: 1.2em; /* Tamaño consistente */
}

/* Header */
header {
    background-color: transparent;
    height:60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: medium;
    position: sticky;
    top: 0;
    transition: background-color 0.3s ease;
    z-index: 1000;
}
header {
    box-shadow: none; /* Eliminar cualquier sombra */
}
header.scrolled {
    background-color: #fabea7d2; /* Cambiar al color melocoton FFD7C4 */
    box-shadow: none; /* Sombra opcional al hacer scroll */
}


#logo a img {
    background-color: transparent; /* Fondo blanco detrás del logo */
    
   
}

/* Mobile Menu */
nav  {
    margin: 0;
    padding: 0;
}
#nav-mobile {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1000;
}

#nav-mobile .menu-icon {
    color: #1544a9;
    font-size: 1.4rem;
    display: block; /* Mostrar el icono del menú por defecto */
}

#nav-mobile .close-icon {
    display: none; /* Ocultar el icono de cierre por defecto */
}

#nav-mobile.open .menu-icon {
    display: none; /* Ocultar el icono del menú cuando se abre */
}

#nav-mobile.open .close-icon {
    font-size: 1.4rem;
    color: #1544a9;
    
    display: block; /* Mostrar el icono de cierre cuando se abre */
}

/* Estilo para el menú desplegable */
.nav-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #fabea7d2, #f9f9f9c6);
    background-size: 400% 400%;
    animation: gradientMove 8s ease infinite;
    font-weight: bold;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.6s ease, background-color 0.3s ease-in-out;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.nav-menu.open-menu {
    display: flex; /* Mostrar el menú al abrir */
}

.nav-menu li {
    width: 100%;
}

.nav-menu li a {
    display: block;
    padding: 15px;
    color: #1544a9;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-menu li:hover a {
    color: #656768;
}

/* Desktop Menu */
@media (min-width: 768px) {
    
    
    #nav-mobile {
        display: none;
       
    }

    .nav-menu {
        display: flex;
        position: static;
        background: none;
        flex-direction: row;
        justify-content: flex-end;
        gap: 20px;
    }

    .nav-menu li {
        width: auto;
    }

    .nav-menu li a {
        padding: 10px 20px;
        font-size: 1.2rem;
        
    }
    
    
    
}
@media (max-width: 767px) { 
    #logo-img {
        width: 160px; /* Ajusta según sea necesario */
        height: auto;
    }

}

/* Hero Section */
#hero-title,
.subtitle,
.cta-button {
    visibility: visible;
    opacity: 1;
}
/* Hero Section */
#hero {
    background-color: whitesmoke; /* Fondo claro */
    padding: 30px 0; /* Espaciado vertical */
   
}

.hero-container {
    display: flex; /* Uso de flexbox para la disposición */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: space-between; /* Texto a la izquierda, imagen a la derecha */
    max-width: 1200px; /* Limita el ancho del contenedor */
    margin:  auto; /* Centra horizontalmente */
    gap: 20px; /* Espacio entre el texto y la imagen */
    flex-wrap: nowrap; /* Evita que los elementos se envuelvan */
}

.hero-text {
    flex: 1 1 50%; /* Ocupa el 50% del ancho disponible */
    padding: 1em; /* Espaciado interno */
}

.hero-text h1 {
    font-size: 2.5rem; /* Tamaño grande para el título */
    font-weight: bold; /* Negrita */
    color: #1544a9; /* Color azul */
 
}

.hero-text h2 {
    font-size: 2em; /* Tamaño del subtítulo */
    color: #1544a9; /* Color azul */
     /* Espaciado inferior */
}

.hero-text .subtitle {
    font-size: 1.4rem; /* Tamaño del texto secundario */
    color: #666; /* Color gris */
    margin-bottom: 1.5em; /* Espaciado inferior */
}

.cta-button {
    display: inline-block; /* Botón en línea */
    padding: 15px 35px; /* Espaciado interno */
    background-color: #1544a9; /* Fondo azul */
    color: #fff; /* Texto blanco */
    font-weight: bold; /* Texto en negrita */
    border-radius: 8px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    transition: all 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

.cta-button:hover {
    background-color: #fabea7d2; /* Cambia el color del fondo al pasar el cursor */
    color: #1544a9;
    transform: translateY(-3px); /* Movimiento hacia arriba */
    
}

/* Imagen */
.hero-image-container {
    flex: 1 1 50%; /* Ocupa el 50% del ancho disponible */
    display: flex; /* Asegura que la imagen esté centrada dentro del contenedor */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.hero-image {
    max-width: 100%; /* Evita que la imagen exceda el ancho de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    
}

/* Responsividad */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column; /* Cambia la disposición a una columna */
        text-align: center; /* Centra el texto */
    }
    .hero-container h1 {
        text-align: center;
    }
    #hero-title {
       text-align: center;
    }
    .hero-text {
        flex: 1 1 auto; /* Asegura que el texto ocupe el ancho completo */
        padding: 10px; /* Ajusta el espaciado interno */
        text-align: center; /* Centra el texto en pantallas pequeñas */
    }

    .hero-image-container {
        flex: 1 1 auto; /* Asegura que la imagen ocupe el ancho completo */
        margin-top: 20px; /* Espaciado entre el texto y la imagen */
    }

    .hero-image {
        max-width: 90%; /* Reduce el tamaño de la imagen */
    }
}

/* Animación del texto */
@keyframes fadeInText {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Styles for the Services Section */
#nuestros-servicios {
   
    padding: 10px 20px;
    background-color: whitesmoke;
    margin: 1em; /*para colocar más al centro*/
    text-align: center;
}

#servicios-title {
    margin: 0.5em;
    text-align: center;
}

div.contenedor-servicios {
    margin-top: 0.5rem;
}
#nuestros-servicios .encabezado-seccion {
    margin-bottom: 20px;
}

#nuestros-servicios h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1544a9;
    margin-bottom: 10px;
}



/* Service Cards Container */
#nuestros-servicios .contenedor-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    justify-content: center;
}

/* Individual Service Card */
#nuestros-servicios .tarjeta-servicio {
    background-color: #f9f9f9c6 ;/*#f2c9b871*/
    border: 1px solid #fabea7;
    border-radius: 8px;
    padding: 30px;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    overflow: hidden;
}
#nuestros-servicios .tarjeta-servicio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    min-height: 250px; /* Ajusta este valor según sea necesario */
}

#nuestros-servicios .tarjeta-servicio {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza el efecto al hacer hover */
}

#nuestros-servicios .tarjeta-servicio:hover {
    transform: translateY(-10px); /* Eleva la tarjeta hacia arriba */
    box-shadow: 0 3px 6px rgba(196, 158, 146, 0.4), /* Sombra inferior más fina */
                0 -2px 4px rgba(196, 158, 146, 0.3), /* Sombra superior más suave */
                3px 0 6px rgba(196, 158, 146, 0.3), /* Sombra derecha */
               -3px 0 6px rgba(196, 158, 146, 0.3); /* Sombra izquierda */
}


/* Image Styling */
#nuestros-servicios .tarjeta-servicio img {
    max-width: 100%;
    height: 56px;
    color: #1544a9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Service Title */
#nuestros-servicios .tarjeta-servicio h3{
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #1544a9;
    margin-bottom: 10px;
}

#nuestros-servicios .tarjeta-servicio:hover h3 {
    color: #efaa8f;
}

/* Service Description */
#nuestros-servicios .tarjeta-servicio p {
    font-size: 1em;
    color: #656768;
    line-height: 1.5;
    min-height: 50px; /* Ajusta el valor para que todas las descripciones tengan la misma altura */
}
.service-icon {
    font-size: 50px;
    color:  #656768;
    margin-bottom: 10px;
}
#nuestros-servicios .tarjeta-servicio:hover .service-icon {
    color:  #656768;
    
        transition: color 0.3s ease;
   
}





/* Responsive Design */
@media (max-width: 768px) {
    #nuestros-servicios .contenedor-servicios {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        
    }
    #servicios-title {
        margin: 0;
        text-align: center;
    }
    #nuestros-servicios h2 {
        font-size: 2rem;
    }
    #nuestros-servicios p {
        font-size: 1rem;
    }
    #nuestros-servicios .tarjeta-servicio {
        padding: 15px;
    }
    #nuestros-servicios .tarjeta-servicio h3 {
        font-size: 1.2rem;
    }
    #nuestros-servicios .tarjeta-servicio p {
        font-size: 1rem;
    }
}




.btn-quote {
    background-color: #1544a9;
    color: #efaa8f;
    font-weight: 700;
    padding: 10px 10px;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-quote:hover {
    background-color: #efaa8f;
    color: #1544a9;
    font-weight: 700;
}

/* Footer */
footer.principal {
    background: linear-gradient(0deg, rgb(246, 244, 244) 0%, rgba(243, 208, 194, 0.813) 91%);
    
    margin-top: 3em;
    padding: 30px 15px;
    text-align: center;
}

.footer-container {
    max-width: 1100px;
    margin-top: 3em;
    margin: 0 auto;
    padding: 30px 15px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.footer-section {
    flex: 1 1 30%;
    min-width: 220px;
    text-align: left;
}

.footer-section h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #666;
}

.footer-section p {
    font-size: 1em;
    line-height: 1.5;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: #666;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #1544a9;
}

.divider {
    height: 1px;
    background-color: whitesmoke;
    margin: 8px 0;
    opacity: 0.7;
}

.footer-bottom {
    text-align: center;
    margin-top: 1em;
    color: #666;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9em;
}
address a {
    text-decoration: none;
    color: #666;
}

/* Sección de redes sociales */
.social-links {
    display: flex;
    justify-content: center; /* Centra los íconos */
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Tamaño uniforme */
    height: 40px;
    border-radius: 50%;
    font-size: 1.3rem;
   
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a i {
    font-size: 1.5rem; /* Ajusta el tamaño del icono */
    color: #666;
}

.social-links a:hover i {
    color: #1544a9;
}

.footer-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Asegura que los elementos dentro se centren */
    text-align: center;
}

/* Botón de Scroll hacia arriba */
.scroll-top {
    position: fixed;
    bottom: 30px; /* Aumentada la distancia desde el fondo */
    right: 30px; /* Más separación del borde derecho */
    color: #fabea7; /* Icono en blanco */
    background: transparent;

    padding: 15px 20px; /* Icono más grande */
    border-radius: 50%;
    text-align: center;
    display: none;
    font-size: 30px; /* Aumentado tamaño del icono */
    transition: all 0.3s ease;
    z-index: 1000;
}

.scroll-top:hover {
    
    color: #1544a9;
}

/* Diseño responsivo */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column;
        gap: 1em; /* Reducido de 20px a 10px */
        margin: 0;
    }

    .footer-section {
        text-align: center;
    }
    .divider {
      
      margin: 0;
    }

    .footer-section h4 {
        font-size: 1.2rem;
    }

    .footer-section p {
        font-size: 0.95em;
    }

    .social-links {
        gap: 0.5em;
    }
    .scroll-top {
        bottom: 50px; /* Más arriba para evitar solapamiento */
        right: 20px;
        font-size: 26px;
        padding: 12px 18px;
    }
}

@media (max-width: 480px) {
    footer.principal {
        padding: 15px 5px; /* Menos espacio en dispositivos pequeños */
    }
    
    .footer-section {
        min-width: 100%;
        margin-bottom: 5px; /* En lugar de grandes separaciones */
    }
    

    .footer-section h4 {
        font-size: 1.1rem;
    }

    .footer-section p {
        font-size: 0.9em;
    }

    .footer-bottom p {
        font-size: 0.85em;
    }

    .scroll-top {
        bottom: 2em; /* Más separación en móviles */
        right: 10px;
        font-size: 24px;
        padding: 10px 16px;
    }
}
/* General */
#por-que-elegirnos {
    margin: 0;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
}

h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #656768c4;
    text-align: center;
}

h2 .highlight {
    color: #efaa8f; /* Color resaltado */
}

/* Estructura principal */
.content-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: nowrap; /* Evita que las columnas se apilen en pantallas grandes */
}

/* Imagen a la izquierda */
#imagenS {
    flex: 1 1 40%;
    text-align: left;
}

#imagenS img {
    max-width: 100%;
    height: auto;
    background-color: transparent;
}

/* Texto a la derecha */
.features-content {
    flex: 1 1 60%;
}

/* Cada característica */
.feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature i {
    font-size: 2rem;
    color: #1544a9; /* Azul para íconos */
}

.feature h3 {
    font-size: 1.5rem;
    color: #656768;
    margin: 0;
    font-weight: bold;
}

.feature p {
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
    margin: 5px 0 0;
}

/* Estilo uniforme para <hr> */
hr {
    height: 0.10em;
    background: linear-gradient(to right, #fabea7, #e5c0b1);
    border: none;
    margin: 20px 0; /* Espaciado uniforme */
    
    
}

/* Responsive */
@media (max-width: 768px) {
    .content-layout {
        flex-direction: column;
        text-align: center;
    }

    #imagenS {
        margin-bottom: 20px;
    }

    .feature {
        flex-direction: column;
        text-align: center;
    }
}



/**********************************SOBRE MI***************************/
/* ---- Contenedor Principal ---- */
.containerSobreMi {
    display: flex;
    flex-direction: row-reverse; /* Imagen a la derecha */
    max-width: 1200px;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0 40px;  /* Espaciado lateral uniforme */
    padding-top: 50px;
    align-items: center; /* Centrar verticalmente texto e imagen */
    gap: 40px;  /* Espacio igual entre la imagen y el texto */
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

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

/* ---- Sección de Texto ---- */
.contentSobreMi {
    flex: 1;
    margin: 1em;
    font-family: sans-serif;
    max-width: 600px;
    padding-left: 40px; /* Igual al padding derecho para simetría */
}

.contentSobreMi h1 {
    font-size: 2.4rem;
    color: #1544a9;
    position: relative;
    margin-bottom: 1em; /* Reducir ligeramente */
    text-align: left;
}

.contentSobreMi h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #fabea7;
    margin: 0.5em auto; /* Centrar debajo del título */
    border-radius: 2px;
}

.contentSobreMi p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #666;
    margin: 1.5em 0;  /* Margen uniforme para todos los párrafos */
}

/* ---- Imagen con Margen Ajustado ---- */
.containerSobreMi img {
     align-self: flex-start;
    margin-top: 10px; /* o menos si ya queda bien */
}
.containerSobreMi img {
    padding: 0; 
    background: linear-gradient(135deg, #1544a9, #fabea7, #1544a9);
    background-size: 400% 400%;
    animation: gradientBorder 5s ease infinite;
    border-radius: 20px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

@keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efecto hover en la imagen */
.containerSobreMi img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

/* ---- Botón de Llamada a la Acción ---- */
.cta-btnSobreMi {
    display: inline-block;
    background-color: #1544a9;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-btnSobreMi:hover {
    background-color: #fabea7;
    transform: scale(1.05);
}

/* ---- Adaptación para Móviles ---- */
@media screen and (max-width: 768px) {
    .containerSobreMi {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 20px;
        padding-top: 30px;
        gap: 20px; /* Espacio uniforme entre elementos */
    }

    .containerSobreMi img {
        width: 300px;
        margin: 0;
    }
    .containerSobreMi img {
        margin-top: 0; /* O ajustar si es necesario en móviles */
    }

    .contentSobreMi {
        max-width: 100%;
        padding: 0; /* Eliminar padding extra en móviles */
    }
}

/* ---- Optimización para Pantallas Grandes ---- */
@media screen and (min-width: 1200px) {
    .containerSobreMi {
        justify-content: center; /* Centrar horizontalmente */
        gap: 60px; /* Aumentar ligeramente el espacio entre imagen y texto */
    }
}
/************************************
************BLOG******************/
/* Estilos generales del blog */


.blog {
    padding: 20px 20px;
    background-color: whitesmoke;
    max-width: 1200px;  /* Limita el ancho del contenido */
    margin: 0 auto;     /* Centra el contenido */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

    div.container {
        margin: 0;
        padding: 0;
    }

/* Encabezado de la sección */
.section-header {
    margin-bottom: 30px;  /* Menor separación */
    text-align: center;
    
}
.section-header h1 {
    text-align: center;
    margin-bottom: 1em;
}
.section-header p {
    color: #666;
    font-weight: bold;
    margin-bottom: 30px;  /* Menor separación */
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;  /* Menor separación */
    color: #1544a9;
}

/*  Botones de filtrado de categorías */
.filter-buttons {
    text-align: center;
    margin-bottom: 20px;
}

.filter-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1544a9;
    color: white;
    border: none;
    border-radius: 20px;  /* Botones redondeados */
    cursor: pointer;
    margin: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.filter-button:hover {
    background-color: #fabea7;
    color: #1544a9;
    transform: scale(1.05);  /* Efecto de crecimiento suave */
}

.filter-button.active {
    background-color: #fabea7;
    color: #1544a9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*  Grid del blog (2 columnas en pantallas grandes) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* SOLO 2 ARTÍCULOS por fila */
    gap: 30px;  /* Espacio entre los artículos */
    margin: 0 auto;
    margin-bottom: 0 !important;
}

/*  Estilo de los artículos */
.blog-item {
    background: #f9f9f9c6;
    border: 1px solid #ddd;
    border-radius: 12px;  /* Bordes más suaves */
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Sombra suave */
    margin-bottom: 0 !important;
}

.blog-item:hover {
    transform: translateY(-8px);  /* Efecto flotante */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 🖼️ Estilo de las imágenes */
.blog-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 4px solid #fabea7;  /* Borde decorativo */
}

/*  Texto del blog */
.blog-text {
    padding: 15px;  /* Padding reducido */
}

.blog-text h2 {
    font-size: 1.5rem;
    color: #1544a9;
    margin-bottom: 8px;  /* Menor separación */
    line-height: 1.3;
}

.blog-text h2 a {
    text-decoration: none;
    color: #1544a9;
    transition: color 0.3s ease;
}

.blog-text h2 a:hover {
    color: #fabea7;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;  /* Menor separación */
    font-size: 0.9rem;
    color: #666;
}

.blog-meta i {
    margin-right: 4px;
    color: #1544a9;
}

.blog-text p {
    margin-bottom: 12px;  /* Menor separación */
    font-size: 1rem;
    color: #555;
}

/* 🔗 Botones "Leer más" */
.blog-text a.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #1544a9;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s, transform 0.3s;
}

.blog-text a.btn:hover {
    background: #fabea7;
    color: #1544a9;
    transform: scale(1.05);
}

/* 📱 Diseño Responsive */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;  /* UNA sola columna en pantallas pequeñas */
        gap: 20px;  /* Menor espacio entre artículos */
    }
    .section-header h1 {
        text-align: center;
    }


    .section-header h2 {
        font-size: 1.8rem;  /* Títulos más pequeños */
    }

    .blog-text h2 {
        font-size: 1.3rem;  /* Títulos de artículos más pequeños */
        margin-bottom: 6px;  /* Menor separación */
    }

    .blog-meta {
        font-size: 0.85rem;  /* Texto meta más pequeño */
    }

    .blog-text p {
        font-size: 0.95rem;  /* Texto más compacto */
    }

    .blog-text a.btn {
        padding: 8px 16px;  /* Botón más pequeño */
        font-size: 0.85rem;
    }

    .blog-img img {
        height: 180px;  /* Imágenes más pequeñas */
    }
}
/***************ARTICULO**************/

:root {
    --primary-color: #1544a9;
    --secondary-color: #fabea7;
    --text-color: #666;
    --background-light: whitesmoke;
    --shadow-light: rgba(0, 0, 0, 0.1);
}
/* main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
} */
/* Contenedor del artículo */
.containerArticulo {
    max-width: 900px;
    margin: auto;
    background: var(--background-light);
    padding: 20px;
    line-height: 1.6;
    border-radius: 8px;
   
    box-shadow: 0 0 10px var(--shadow-light);
}

/* Títulos */
h1, h2 {
    color: var(--primary-color);
    text-align: justify;
}
article h2 {
    text-align: left;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 8px;
}

.cta, .modern-cta {
    text-align: center;
    margin-top: 20px;
}


.btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s ease-in-out;
}

.btn-primary:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* Imágenes responsivas */
.responsive-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}
.imagenContenido {
    width: 80%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.styled-list {
    list-style: none; 
    padding-left: 0;
    margin: 10px 0;
    color: var(--text-color);
    font-size: 1.1em;
    margin-left: 1.5em;
}

.styled-list li {
    display: flex;
    align-items: center;
    gap: 0.5em; 
    margin-bottom: 8px; 
    font-weight: 400;
}

.styled-list li::before {
    content: "❯"; 
    color: var(--primary-color);
    font-size: 1.2em;
    font-weight: bold;
}
/* Cambia el color de los enlaces y mantiene solo la línea */
article p a {
    color: var(--text-color, inherit); /* Usa el color de texto predeterminado si está definido */
    text-decoration: none; /* Quita la subrayado por defecto */
    border-bottom: 0.1em solid var(--secondary-color); /* Simula el subrayado con más control */
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Efecto al pasar el mouse */
 article p a:hover {
    color: var(--primary-color); /* Destaca el enlace con el color principal */
    border-bottom-color: var(--primary-color); /* Cambia la línea inferior */
}



.btn-back {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.btn-back:hover {
    color: var(--primary-color);
    background: var(--secondary-color);
    text-decoration: none;
}
@media screen and (max-width: 768px) { 
    .btn-back:hover {
        background-color: #6877a9;
        color: white;

    }
}
/************************************************
/* Título del formulario */
.heroContacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 60vh;
    background: linear-gradient(135deg, #fabea7d2, #f9f9f9c6);
    padding: 20px;
    position: relative;
}
  
h1#contacto {
    color: #1544a9;
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em;
    
    text-align: center;
    margin-bottom: 15px; /* Ajusta según necesidad */
}
  
h2.subtitle {
    color: #666;
    font-family: 'Poppins', sans-serif;
    margin-top: 5px; /* Reduce la separación si es demasiado grande */
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
}

.arrow-down {
    margin-top: 25px;
    animation: bounce 2s infinite;
}

.arrow-down i {
    font-size: 2em;
    color: #1544a9;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

p.intro-text {
    font-size: 1.2em;
}

/******************** FORMULARIO **********************/
/* Formulario */
form {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background: transparent;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif;
}

form label {
    margin-top: 15px;
    color: #1544a9;
    display: block;
    margin-bottom: 8px;
}

form input, form textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
}

form input:focus, form textarea:focus {
    border-color: #fabea7;
}

form textarea {
    resize: none;
    height: 100px;
}

/* Botón */
form button {
    width: 100%; /* Se expande en móviles */
    
    text-align: center;
    padding: 10px 20px;
    background-color: #1544a9;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

form button:hover {
    background-color: #fabea7d2;
    transform: translateY(-2px);
}

form button:active {
    transform: translateY(0);
}

/* CSS Responsive Design */
@media screen and (max-width: 768px) {
    form {
        max-width: 90%;
        padding: 20px;
    }

    h1#contacto {
        font-size: 2em;
        padding-top: 2em;
        padding-bottom: 0;
    }

    h2.subtitle {
       margin-top: 0;
        font-size: 1.5em;
       
    }

    form button {
        width: 100%;
    }
}

/* Animación */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/***** FAQ SECTION *****/
.faq-section {
    background-color: whitesmoke; /* Fondo suave */
    
    padding: 60px 10px;
}

.faq-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin:  auto;
}

.faq-image {
    flex: 1;
    max-width: 600px;
    text-align: center;
}

.faq-image img {
    max-width: 100%;
    height: auto;
    
    border-radius: 10px; /* Bordes redondeados para la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.faq-content {
    flex: 1;
    max-width: 600px;
}

.faq-content h2 {
    margin-bottom: 20px;
    font-size: 1.5rem; /* Tamaño acorde con tu diseño */
    color: #656768; /* Texto oscuro */
    
}

.accordion {
    margin-top: 20px;
}

.accordion-item {
    margin-bottom: 20px;
    border: 1px solid #cccccc; /* Borde gris claro */
    border-radius: 8px;
    overflow: hidden;
    background: whitesmoke;
}

.accordion-header {
    width: 100%;
    padding: 15px 20px;
    background-color: #f8f8f8; /* Fondo claro */
    font-size: 1.4rem; /* Tamaño de texto principal */
    font-weight: bold;
    text-align: left;
    color: #1544a9; /* Color principal de tu diseño */
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-header:hover {
    color: #efaa8f; /* Color de texto al pasar el cursor */
}

.accordion-body {
    padding: 15px 10px;
    line-height: 1.5; /* Espaciado de línea cómodo */
    display: none; /* Oculto por defecto */
    background-color: whitesmoke;
    border-top: 1px solid #dddddd;
    
}
.accordion-body p {
    font-size: 1.2em;
    color: #666; /* Color gris oscuro */
    
}
.accordion-body.active {
    display: block; /* Mostrar contenido al expandir */
}

.arrow {
    border: solid #1544a9; /* Color de la flecha */
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.accordion-header[aria-expanded="true"] .arrow {
    transform: rotate(-135deg); /* Girar flecha al desplegar */
    border-color: #fabea7d2; /* Cambiar color al expandir */
}

/* Hero Section */
#hero-servicios {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background: linear-gradient(135deg, #fabea7d2, #f9f9f9c6);
    background-size: 400% 400%;
    animation: gradientMove 8s ease infinite;
    padding: 20px;
  
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Animación del fondo degradado */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efecto Parallax Suave */
#hero-servicios::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.main-title {
    text-align: center;
}
.hero-overlay {
    color: #1544a9;
    text-align: center;
    z-index: 1;
    padding: 20px;
}

.hero-overlay h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    margin: 0;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-overlay p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    margin-top: 10px;
    color: #666;
    opacity: 0.9;
}

/* Diseño Responsivo */
@media (max-width: 1024px) {
    #hero-servicios {
        height: 50vh;
        padding: 1em;
    }

    .hero-overlay h1 {
        font-size: 2.5rem;
        text-align: center;
    }

    .hero-overlay p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    #hero-servicios {
        height: 45vh;
        padding: 0.5em;
    }

    .hero-overlay h1 {
        font-size: 2rem;
    }
    
    .hero-overlay p {
        font-size: 0.9rem;
    }
    
    
}

@media (max-width: 480px) {
    #hero-servicios {
        height: 40vh;
        padding: 0.5em;
    }

    .hero-overlay h1 {
        font-size: 1.6rem;
    }

    .hero-overlay p {
        font-size: 0.85rem;
    }
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
    .faq-container {
        flex-direction: column; /* Apilar los elementos verticalmente */
    }

    .faq-image, .faq-content {
        max-width: 100%; /* Ajustar el ancho al 100% del contenedor */
        flex: none; /* Quitar el comportamiento flexible */
    }

    .faq-content p {
        font-size: 1rem; /* Reducir ligeramente el tamaño del texto */
        text-align: justify; /* Mejor alineación para móviles */
    }

    #hero-servicios {
        height: 300px; /* Reducir la altura de la sección Hero */
    }

    .hero-overlay h1 {
        font-size: 1.8rem; /* Ajustar el tamaño del título principal */
    }

    .hero-overlay p {
        font-size: 1rem; /* Ajustar el tamaño del subtítulo */
    }
}

@media (max-width: 480px) {
    .accordion-header {
        font-size: 1rem; /* Reducir el tamaño del texto en el encabezado */
        padding: 10px 15px; /* Ajustar el padding */
    }

    .accordion-body {
        font-size: 0.9rem; /* Reducir el tamaño del contenido */
        padding: 10px 15px;
    }
}

/**********************servisios-página servisios***************/
.content-containerServicios {
    width: 90%;
    margin: 2em auto;
    padding: 1.5em;
    background-color: transparent;
    font-family: 'Poppins', sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3em;
}

.toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.125em 0.9375em; /* 18px 15px */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4em;
    color: #1544a9;
    transition: color 0.3s ease;
}

.toggle-button i {
    font-size: 1.1em;
    color: #1544a9;
    transition: color 0.3s ease, transform 0.3s ease;
}

.toggle-item:hover i, 
.toggle-item:hover h3 {
    color: #efaa8f;
}

.toggle-content {
    display: none;
    padding: 1.25em;
    font-size: 1em;
    color: #666;
    border-radius: 5px;
    margin-bottom: 1em;
    line-height: 1.6;
}

.toggle-content.active {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5em;
}

.textoServicio {
    width: 60%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
}

.textoServicio p {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.textoServicio h4 {
    font-size: 1.5em;
    color: #1544a9;
    margin: 0;
}

.toggle-content.active img {
    width: 40%;
    max-width: 20em; /* 320px */
    display: flex;
    margin: auto;
    border-radius: 5px;
}

.toggle-content.active ul {
    list-style: none;
    padding: 0;
    margin-top: 1.2em;
}

.toggle-content.active ul li {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 1.2em;
    padding: 0.375em 0;
    gap: 0.5em;
}

.toggle-content ul li::before {
    content: "";
    display: inline-block;
    width: 0.625em;
    height: 0.625em;
    border-right: 2px solid #1544a9;
    border-bottom: 2px solid #1544a9;
    transform: rotate(-45deg);
    margin-right: 0.5em;
    flex-shrink: 0;
}

.footer-note, .intro-text {
    margin-top: 1.5em;
    font-size: 1.2em;
    color: #666;
    text-align: center;
}

/* 📱 RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .toggle-item {
        font-size: 1.2em;
        padding: 0.875em;
    }

    .toggle-content.active {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .toggle-content.active img {
        width: 90%;
        max-width: 17.5em;
        margin-top: 0.625em;
    }

    .textoServicio {
        width: 100%;
        font-size: 1em;
        padding: 0 0.9375em;
    }

    .toggle-item {
        flex-direction: column;
        text-align: center;
    }

    .toggle-button i {
        margin-top: 0.3125em;
    }
    .toggle-content.active ul {
        padding-left: 1em;
        text-align: left;
    }

    .toggle-content.active ul li {
        font-size: 1.1em;
        padding: 0.5em 0;
        line-height: 1.5;
    }

    .toggle-content ul li::before {
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.4em;
    }
}

@media (max-width: 480px) {
    .content-containerServicios {
        padding: 1em;
    }

    .toggle-item {
        font-size: 1em;
        padding: 0.625em;
    }

    .textoServicio p {
        font-size: 1em;
    }

    .textoServicio h4 {
        font-size: 1.2em;
    }

    .toggle-content.active ul li {
        padding: 0.3125em 0;
        text-align: left;
        margin: 0;
    }

    .toggle-content ul li::before {
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.375em;
    }

    .toggle-content.active img {
        max-width: 12.5em;
    }

    .footer-note, .intro-text {
        font-size: 0.875em;
    }
    .toggle-content.active ul {
        padding-left: 0.75em;
    }

    .toggle-content.active ul li {
        font-size: 1em;
        padding: 0.4em 0;
        line-height: 1.4;
    }

    .toggle-content ul li::before {
        width: 0.4em;
        height: 0.4em;
        margin-right: 0.3em;
    }
}

/* 📌 ALINEACIÓN DE IMAGEN A LA IZQUIERDA */
.optimizacion-seo .contenido-flex {
    display: flex;
    align-items: center;
    gap: 1.25em;
}

.optimizacion-seo img {
    width: 40%;
    max-width: 18.75em;
    border-radius: 5px;
}

.optimizacion-seo .textoServicio {
    width: 60%;
}
@media (max-width: 768px) {
    .optimizacion-seo .contenido-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1em;
    }

    .optimizacion-seo img {
        width: 90%;
        max-width: 15em;
        margin-bottom: 1em;
    }

    .optimizacion-seo .textoServicio {
        width: 100%;
        padding: 0 1em;
    }
}

@media (max-width: 480px) {
    .optimizacion-seo .contenido-flex {
        gap: 0.75em;
    }

    .optimizacion-seo img {
        width: 100%;
        max-width: 12.5em;
    }

    .optimizacion-seo .textoServicio {
        font-size: 1em;
        padding: 0 0.75em;
    }
}
/**********************CTA*************************/

/* Sección Consultoría */
.sectionConsulteria {
    width: 80%;
    margin: auto;
    padding: 1.875em;
    background: whitesmoke;
    border-left: 5px solid #1544a9;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 3em;
}

h2 {
    font-size: 2em;
    text-align: center;
    color: #1544a9;
    font-family: 'Poppins', sans-serif;
}

.sectionConsulteria p {
    line-height: 1.8;
    color: #666;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Sección CTA */
/* Sección CTA con fondo azul y patrón */
.cta-container {
    background: #1544a9; /* Azul vibrante */
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 10px 10px; /* Tamaño del patrón */
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 2em;
    color: #fabea7;
    gap: 20px; /* Espacio entre los elementos */
}

/* Contenedor del texto */
.cta-content {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}

/* Estilo del título */
.cta-header {
    font-size: clamp(1.8em, 5vw, 2.5em); /* Escala entre 1.8em y 2.5em */
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    color: #fabea7;
    margin-bottom:1em;
}

/* Estilo del texto */
.cta-text {
    font-size: clamp(1em, 3vw, 1.2em);
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    color: #fabea7;
    margin-bottom: 1em;
}

/* Botón con estilo moderno */
.cta-buttonConsulteria {
    background: whitesmoke;
    padding: 15px 30px;
    color: #666;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    border: none;
    
    cursor: pointer;
    text-align: center;
    
}

/* Efecto hover */
.cta-buttonConsulteria:hover {
    background: #e0e0e0;
    color: #1544a9;
    transform: scale(1.05);
}

/* 🔹 Diseño Responsive 🔹 */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .cta-content {
        max-width: 100%;
    }

    .cta-buttonConsulteria {
        width: 100%;
        padding: 15px;
        font-size: 1em;
    }
}
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 20px;
    background-color: #fabea7;
    color: #1544a9;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}