/* Importa las fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@700;800;900&display=swap');

/* Estilos generales para el cuerpo de la página */
body {
    font-family: 'Lato', sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    line-height: 1.6;
}

/* Aplica Montserrat a todos los encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Asegura que los títulos sean negrita */
    letter-spacing: -0.025em; /* Ligeramente más apretado */
}

/* Estilos para el texto del logo "Desatascos Acebes" */
.logo-title {
    display: inline-block; /* CRÍTICO: Hace que el ancho se ajuste al contenido */
    font-family: 'Montserrat', sans-serif; /* Usar Montserrat para la fuente */
    font-weight: 900; /* Muy negrita para un aspecto de logo */
    color: #cb2b2b; /* Rojo similar al de la imagen */
    font-size: 1.4rem; /* Tamaño más pequeño para escritorio para liberar espacio */
    text-shadow: -1px -1px 0 #343a40, 1px -1px 0 #343a40, -1px 1px 0 #343a40, 1px 1px 0 #343a40; /* Contorno oscuro, más sutil */
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* Asegura que no tenga subrayado por ser un enlace */
    line-height: 1.2; /* Ajusta la altura de línea para compactar */
    margin-right: 0.2rem; /* Pequeño margen a la derecha del logo en escritorio para acercar los botones */
}

.logo-title:hover {
    color: #e04a4a; /* Rojo ligeramente más claro en hover */
    transform: scale(1.01); /* Pequeño efecto de escala en hover */
}

/* Ajustes del tamaño del logo para diferentes pantallas */
@media (min-width: 768px) {
    .logo-title {
        font-size: 1.6rem; /* Tamaño óptimo para escritorio para una sola fila de botones */
        margin-right: 0.75rem; /* Ajuste para escritorio */
    }
}
@media (max-width: 767px) {
    .logo-title {
        font-size: 1.2rem; /* Tamaño más pequeño para móvil para que sea compacto */
        text-align: center; /* Centrado en móvil si hay espacio extra */
        margin-left: auto; /* Centra el logo horizontalmente en el contenedor flex en móvil */
        margin-right: auto; /* Centra el logo horizontalmente en el contenedor flex en móvil */
        margin-bottom: 0.5rem; /* Margen inferior reducido en móvil */
    }
}


/* Estilo para los botones principales */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    font-weight: bold;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
    transform: scale(1.05);
}

/* Estilo para los botones secundarios */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #2563eb; /* text-blue-600 */
    border: 1px solid #2563eb; /* border border-blue-600 */
    font-weight: bold;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #eff6ff; /* hover:bg-blue-50 */
    transform: scale(1.05);
}


/* Estilos para las tarjetas de servicio o de contenido */
.content-card {
    background-color: white;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem; /* p-8 */
    border: 1px solid #e2e8f0; /* border border-gray-200 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.content-card:hover {
    transform: scale(1.05);
}

/* Estilo general para las secciones, con menor padding vertical */
section {
    padding-top: 1rem; /* ¡REDUCIDO! Antes 7rem */
    padding-bottom: 1rem; /* ¡REDUCIDO! Antes 7rem */
    padding-left: 0.5rem; /* px-4 */
    padding-right: 0.5rem; /* px-4 */
}

@media (min-width: 768px) { /* md breakpoint (escritorio) */
    section {
        padding-top: 1rem; /* ¡REDUCIDO! Antes 10rem */
        padding-bottom: 1rem; /* ¡REDUCIDO! Antes 10rem */
    }
}

/* Centrado del contenedor principal */
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem; /* max-w-7xl */
}

/* Style for main section titles */
.section-title {
    font-size: 3.75rem; /* text-6xl */
    font-weight: 800; /* font-extrabold */
    margin-bottom: 8rem; /* mb-32 */
    color: #1e3a8a; /* text-blue-800 */
    letter-spacing: -0.025em; /* tracking-tight */
    position: relative;
    line-height: 1.1;
    text-align: center;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
    text-transform: uppercase;
}

@media (min-width: 768px) { /* md breakpoint */
    .section-title {
        font-size: 4.5rem; /* md:text-7xl */
    }
}

/* Pseudo-elemento para la línea decorativa debajo del título de sección */
.section-title::after {
    content: '';
    display: block;
    width: 120px;
    height: 10px;
    background: #1d4ed8; /* theme('colors.blue.700') */
    margin: 1.875rem auto 0; /* 30px auto 0 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

/* Specific styles for the hero h1 to make it even more prominent */
.hero-title {
    font-size: 3.75rem; /* text-6xl */
    font-weight: 800; /* font-extrabold */
    line-height: 1.25; /* leading-tight */
    letter-spacing: -0.025em; /* tracking-tight */
    margin-bottom: 2rem; /* mb-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-title {
        font-size: 4.5rem; /* md:text-7xl */
    }
}

/* Styles for navigation links - AHORA SIEMPRE COMO BOTONES MÁS PEQUEÑOS Y LLAMATIVOS */
.nav-link {
    display: inline-block;
    color: white;
    font-weight: bold;
    font-size: 0.7rem; /* Tamaño de fuente más pequeño para escritorio */
    padding: 0.25rem 0.6rem; /* Padding reducido para escritorio */
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    background: linear-gradient(to right, #3b82f6, #2563eb);
    border: 1px solid #2563eb;
    white-space: nowrap;
    text-decoration: none;
    margin: 0.1rem; /* Margen muy pequeño entre botones en escritorio */
}

.nav-link:hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px) scale(1.02);
    border-color: #1d4ed8;
}

/* Ajustes para el contenedor de enlaces para que se adapten bien */
.header-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem; /* Espacio uniforme entre los botones en escritorio, muy pequeño */
    width: auto;
    margin-top: 0;
    max-width: 100%;
}

/* Estilos específicos para enlaces en móvil (ahora en 2 columnas, muy pequeños y compactos) */
@media (max-width: 767px) { /* Para pantallas pequeñas (móviles) */
    .header-nav-links {
        display: grid; /* Usamos grid para las columnas */
        grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual ancho */
        gap: 0.15rem; /* Espacio entre los botones en la cuadrícula, aún más pequeño */
        margin-top: 0.3rem; /* Margen debajo del logo en móvil, muy reducido */
        width: 100%; /* Ocupa todo el ancho disponible */
        padding: 0 0.1rem; /* Padding horizontal mínimo */
        box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
    }
    .nav-link {
        width: auto; /* El ancho lo maneja la cuadrícula */
        text-align: center;
        font-size: 0.7rem; /* ¡Tamaño de fuente extremadamente pequeño para móvil! */
        padding: 0.1rem 0.2rem; /* Padding muy, muy reducido para que los botones sean mínimos */
    }
}

/* Ajustes para los títulos de sección en móvil */
@media (max-width: 767px) {
    .section-title {
        font-size: 1.8rem; /* Ajusta el tamaño de fuente para móviles, aún más pequeño */
        margin-bottom: 0.5rem; /* Reduce el margen inferior en móviles */
    }
    .section-title::after {
        margin-top: 0.25rem; /* Reduce el margen superior de la línea en móviles */
        width: 50px; /* Línea más corta en móvil */
        height: 5px; /* Línea más delgada en móvil */
    }
}