/* RESET: Elimina márgenes y padding por defecto de todos los elementos */
* {
    margin: 0;
    /* Quita espacio externo */
    padding: 0;
    /* Quita espacio interno */
    box-sizing: border-box;
    /* Hace que padding no afecte el ancho total */
}

/* ESTILOS del cuerpo de la página */
body {
    font-family: 'Georgia', 'Times New Roman', serif;
    /* Fuente profesional */
    line-height: 1.6;
    /* Espacio entre líneas de texto */
    color: #333;
    /* Color gris oscuro para el texto */
}

/* CONTENEDOR: Centra el contenido y limita el ancho máximo */
.container {
    width: 100%;
    /* Ocupa todo el ancho disponible */
    max-width: 1200px;
    /* Pero no más de 1200px (se ve bien en pantallas grandes) */
    margin: 0 auto;
    /* Centra horizontalmente: margen 0 arriba/abajo, auto izquierda/derecha */
    padding: 0 20px;
    /* Espacio interno a los lados en móviles */
}

/* ===== BARRA DE NAVEGACIÓN ===== */
.navbar {
    background-color: #fff;
    /* Fondo blanco */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Sombra sutil debajo */
    position: fixed;
    /* Fija la barra en la parte superior */
    width: 100%;
    /* Ocupa todo el ancho */
    top: 0;
    /* Pegada al borde superior */
    z-index: 1000;
    /* Asegura que esté por encima de otros elementos */
}

/* CONTENEDOR dentro de la navbar */
.navbar .container {
    display: flex;
    /* Usa flexbox para alinear elementos horizontalmente */
    justify-content: space-between;
    /* Logo a la izquierda, menú a la derecha */
    align-items: center;
    /* Centra verticalmente los elementos */
    padding: 15px 20px;
    /* Espacio interno arriba/abajo y lados */
}

/* ESTILOS del logo */
.logo img {
    height: 50px;
    /* Altura fija de 50px */
    width: auto;
    /* Ancho automático para mantener proporción */
}

/* LISTA del menú de navegación */
.nav-menu {
    display: flex;
    /* Muestra los ítems en línea (horizontal) */
    list-style: none;
    /* Quita los puntitos de la lista */
}

/* CADA ITEM del menú */
.nav-menu li {
    margin-left: 30px;
    /* Espacio entre ítems del menú */
}

/* ENLACES del menú */
.nav-menu a {
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    color: #333;
    /* Color del texto */
    font-weight: 500;
    /* Grosor de la letra (medio) */
    transition: color 0.3s;
    /* Transición suave de 0.3 segundos al cambiar color */
}

/* EFECTO al pasar el mouse sobre los enlaces */
.nav-menu a:hover {
    color: #8B7355;
    /* Cambia a color dorado/marrón (tono profesional) */
}

/* BOTÓN especial de contacto */
.contact-btn {
    background-color: #1a3a5f;
    /* Azul oscuro profesional */
    color: white !important;
    /* Texto blanco (¡important sobrescribe otros estilos) */
    padding: 8px 20px;
    /* Espacio interno: 8px arriba/abajo, 20px lados */
    border-radius: 4px;
    /* Esquinas redondeadas */
}

/* BOTÓN del menú hamburguesa (inicialmente oculto) */
.menu-toggle {
    display: none;
    /* No se muestra en desktop, solo en móviles */
    background: none;
    /* Sin fondo */
    border: none;
    /* Sin borde */
    font-size: 1.5rem;
    /* Tamaño del ícono: 1.5 veces el tamaño base */
    cursor: pointer;
    /* Cambia el cursor a manito al pasar por encima */
    color: #333;
    /* Color del ícono */
}

/* ===== Banner principal ===== */
.hero {
    /* Fondo: gradiente oscuro + imagen de fondo */
background: linear-gradient(rgba(26, 58, 95, 0.85), rgba(26, 58, 95, 0.9)), 
                url('../images/hero-bg.jpg') center/cover;
    color: white;
    /* Texto blanco */
    text-align: center;
    /* Centra el texto */
    padding: 180px 20px 100px;
    /* Espacio interno: 180px arriba, 20px lados, 100px abajo */
    margin-top: 80px;
    /* Espacio arriba para que no quede detrás de la navbar fija */
}

/* TÍTULO del hero */
.hero h1 {
    font-size: 2.8rem;
    /* Tamaño grande de fuente: 2.8 veces el tamaño base */
    margin-bottom: 20px;
    /* Espacio debajo del título */
}

/* Párrafo del hero */
.hero p {
    font-size: 1.2rem;
    /* Tamaño de fuente aumentado */
    max-width: 700px;
    /* Limita el ancho del párrafo */
    margin: 0 auto 30px;
    /* Centra y agrega espacio abajo: 0 arriba, auto lados, 30px abajo */
}

/* ===== BOTÓN PRIMARIO ===== */
.btn-primary {
    display: inline-block;
    /* Se comporta como bloque pero en línea */
    background-color: #8B7355;
    /* Color dorado/marrón */
    color: white;
    /* Texto blanco */
    padding: 12px 35px;
    /* Espacio interno generoso */
    border-radius: 4px;
    /* Esquinas redondeadas */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: bold;
    /* Texto en negrita */
    transition: background-color 0.3s;
    /* Transición suave al cambiar color */
}

/* Efecto hover del botón */
.btn-primary:hover {
    background-color: #6d5a43;
    /* Color más oscuro al pasar el mouse */
}
/* ===== SECCIÓN ESPECIALIDADES ===== */
.especialidades {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

.especialidades h2 {
    text-align: center;
    color: #1a3a5f;
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
}

.especialidades h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #8B7355;
    border-radius: 2px;
}

.subtitle {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 30px auto 60px;
    line-height: 1.6;
}

/* Grid de especialidades */
.especialidades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}

/* Tarjeta individual */
.especialidad-card {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.especialidad-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: #8B7355;
}

/* Íconos de especialidades */
.especialidad-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.especialidad-icon.civil {
    background: linear-gradient(135deg, #1a3a5f 0%, #2c5282 100%);
}

.especialidad-icon.laboral {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.especialidad-icon.penal {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}

/* Títulos de especialidades */
.especialidad-card h3 {
    color: #1a3a5f;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Párrafo introductorio */
.especialidad-card > p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Lista de servicios */
.especialidad-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.especialidad-lista li {
    padding: 8px 0;
    color: #444;
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
}

.especialidad-lista i {
    color: #8B7355;
    margin-right: 10px;
    margin-top: 3px;
    font-size: 0.8rem;
}

/* Botón "Ver más" */
.btn-especialidad {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #1a3a5f;
    border: 2px solid #1a3a5f;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-especialidad:hover {
    background: #1a3a5f;
    color: white;
}

/* Nota adicional */
.especialidad-nota {
    background: #f0f4f8;
    border-left: 4px solid #8B7355;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    margin: 40px auto 0;
}

.especialidad-nota p {
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.especialidad-nota i {
    color: #8B7355;
    font-size: 1.2rem;
    margin-top: 3px;
}
/* ===== SECCIÓN DE CARACTERÍSTICAS ===== */
.features {
    display: flex;
    /* Muestra los features en línea (horizontal) */
    justify-content: space-around;
    /* Distribuye el espacio entre elementos */
    margin-top: 50px;
    /* Espacio arriba de la sección */
    flex-wrap: wrap;
    /* Permite que los elementos bajen de línea en móviles */
}

/* Características individuales */
.feature {
    text-align: center;
    /* Centra el contenido */
    padding: 20px;
    /* Espacio interno */
    flex: 1;
    /* Cada feature ocupa el mismo espacio */
    min-width: 250px;
    /* Ancho mínimo antes de bajar de línea */
    margin: 10px;
    /* Espacio entre features */
}

/* Íconos de las características */
.feature i {
    font-size: 2.5rem;
    /* Tamaño grande del ícono */
    color: #1a3a5f;
    /* Color azul profesional */
    margin-bottom: 15px;
    /* Espacio debajo del ícono */
}

/* ===== Pie de página ===== */
footer {
    background-color: #1a3a5f;
    /* Fondo azul oscuro */
    color: white;
    /* Texto blanco */
    padding: 40px 0;
    /* Espacio interno arriba y abajo */
    margin-top: 80px;
    /* Espacio arriba del footer */
}

/* CONTENIDO del footer (dos columnas) */
.footer-content {
    display: flex;
    /* Dos columnas lado a lado */
    justify-content: space-between;
    /* Logo a la izquierda, contacto a la derecha */
    align-items: center;
    /* Centra verticalmente */
    flex-wrap: wrap;
    /* En móviles, una columna arriba de otra */
}

/* LOGO en el footer */
.footer-logo img {
    height: 40px;
    /* Logo más pequeño que en la navbar */
    margin-bottom: 10px;
    /* Espacio debajo del logo */
}

/* ÍCONOS de contacto en el footer */
.footer-contact i {
    margin-right: 10px;
    /* Espacio a la derecha del ícono */
    color: #8B7355;
    /* Color dorado para los íconos */
}
/* Animación para aparecer las tarjetas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.especialidad-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.especialidad-card:nth-child(1) {
    animation-delay: 0.1s;
}

.especialidad-card:nth-child(2) {
    animation-delay: 0.2s;
}

.especialidad-card:nth-child(3) {
    animation-delay: 0.3s;
}
.footer-links {
    margin-top: 15px;
    text-align: center;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #8B7355;
}

.footer-links .separator {
    color: #aaa;
    margin: 0 10px;
}