/* Variables CSS para fácil edición y consistencia */
:root {
    --primary-color: #FFD700; /* Dorado brillante - Para logos, acentos importantes, hover */
    --secondary-color: #2c3e50; /* Azul oscuro/gris carbón - Para texto principal, fondos de secciones oscuras, encabezados */
    --accent-color: #05658b; /* Verde esmeralda - Para botones, íconos, líneas de acento, llamadas a la acción */

    --text-color: #4a4a4a; /* Gris oscuro para el cuerpo del texto */
    --light-text-color: #7f8c8d; /* Gris medio para texto más sutil */

    --light-bg: #f5f5f5; /* Fondo claro y suave para la mayoría de las secciones */
    --medium-bg: #d7f8fd; /* Un gris más para dar más contraste en algunas secciones */
    --dark-bg: #22303c; /* Un azul oscuro más profundo para secciones destacadas como la galería o el footer */
    --mid-dark-bg: #34495e; /* Un tono intermedio entre secondary y dark-bg */
    --white: #ffffff;

    --border-radius: 12px; /* Bordes más suaves */
    --transition-speed: 0.3s ease-in-out; /* Velocidad de transición uniforme */

    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para elementos claros */
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada para tarjetas/bloques */
    --shadow-dark: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra fuerte para elementos destacados */
}

/* Base y Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho/alto */
}

body {
    font-family: 'Poppins', sans-serif; /* Fuente moderna y legible */
    line-height: 1.7; /* Mejor legibilidad */
    color: var(--text-color);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes */
    scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en enlaces internos */
}

.container {
    width: 90%;
    max-width: 1300px; /* Un poco más ancho */
    margin: 0 auto;
    padding: 40px 20px; /* Asegura padding horizontal en todos los tamaños */
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif; /* Titulares impactantes */
    color: var(--secondary-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

h1 {
    font-size: 3.5em; /* Más grande */
    text-align: center;
    color: var(--primary-color);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.4); /* Sombra más pronunciada */
    letter-spacing: -1px; /* Ajuste de espacio entre letras */
}

h2 {
    font-size: 2.8em; /* Más grande */
    text-align: center;
    margin-bottom: 60px; /* Más espacio */
    position: relative;
    padding-bottom: 15px;
    font-weight: 700; /* Más negrita */
    color: var(--secondary-color); /* Color principal */
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px; /* Más ancho */
    height: 5px; /* Más grueso */
    background-color: var(--accent-color);
    border-radius: 3px;
}

h3 {
    font-size: 1.8em;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

p {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.1em;
    color: var(--text-color);
}

.section-description {
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 1.15em;
    line-height: 1.8;
    color: var(--text-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed); /* Transición para enlaces */
}

a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Botones */
.btn {
    display: inline-flex; /* Para alinear el icono */
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 18px 35px; /* Más padding */
    border-radius: 50px; /* Botones más redondeados, "pill shape" */
    text-transform: uppercase;
    font-weight: 600; /* Semibold */
    letter-spacing: 1px;
    transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed); /* AÑADIDO: transiciones */
    text-align: center;
    margin-top: 30px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-medium); /* Usando nueva variable de sombra */
}

.btn:hover {
    background-color: var(--secondary-color); /* Cambia a color secundario en hover */
    transform: translateY(-5px); /* Pequeño levantamiento */
    box-shadow: var(--shadow-dark); /* Sombra más fuerte en hover */
}

.btn i {
    margin-left: 10px;
    font-size: 1.1em;
}

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

.btn-secondary:hover {
    background-color: #e6c200; /* Oscurece un poco el dorado */
    color: var(--white);
}

/* Header/Hero Section */
.hero {
    position: relative;
    width: 100%;
    min-height: 700px; /* Alto fijo o mínimo para la sección hero */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Muy importante para el carrusel */
}

.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Detrás del contenido */
}

.carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
    opacity: 0; /* Oculta todas las imágenes por defecto */
    transition: opacity 1.5s ease-in-out; /* Transición suave entre imágenes */
    filter: brightness(0.8) contrast(1.1); /* Ligeramente oscurece y aumenta contraste */
}

.carousel-img.active {
    opacity: 1; /* Muestra la imagen activa */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9)); /* Superposición más oscura y con más contraste */
    z-index: 1; /* Entre las imágenes y el contenido */
}

.hero-content {
    position: relative;
    z-index: 2; /* Contenido siempre encima */
    color: var(--white);
    text-align: center;
    padding: 40px 20px; /* Añade padding al contenido */
}

.hero-logo {
    max-width: 300px; /* Más grande */
    margin-bottom: 30px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); /* Sombra más intensa para el logo */
}

.hero h1 {
    font-size: 3.8em; /* Ajuste para que se vea bien en escritorio */
    color: var(--primary-color);
    text-shadow: 4px 4px 8px rgba(0,0,0,0.5); /* Sombra más pronunciada */
    letter-spacing: -2px; /* Ajuste de espacio entre letras */
    margin-bottom: 10px;
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 35px;
  }
}

.hero h2 {
    font-size: 1.8em; /* Más grande */
    color: var(--white);
    margin-top: -15px;
    margin-bottom: 40px;
    font-weight: 400;
}

.hero p {
    font-size: 1.4em; /* Más grande */
    margin-bottom: 50px;
    max-width: 800px; /* Más ancho */
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.95); /* Texto más legible */
}


/* Secciones Generales */
.section {
    padding: 100px 0; /* Más padding general */
    position: relative;
    overflow: hidden;
}

/* Aplicando un fondo alterno más notorio para las secciones pares */
.section:nth-of-type(even) {
    background-color: var(--medium-bg); /* Un gris medio para más contraste */
}

/* Asegurar que los títulos y descripciones sean legibles en fondos oscuros si se usan */
.section-dark-bg h2,
.section-dark-bg .section-description {
    color: var(--white);
}


/* Iconos para About Us y Contact */
.icon {
    font-size: 3em; /* Más grande */
    color: var(--accent-color);
    margin-bottom: 20px;
    transition: transform var(--transition-speed); /* AÑADIDO: Transición para el icono */
}

/* About Us Section */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajustado para mejor responsividad */
    gap: 40px; /* Más espacio */
    text-align: center;
    margin-top: 60px;
}

.about-item {
    background-color: var(--white);
    padding: 40px; /* Más padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light); /* Sombra suave */
    transition: transform var(--transition-speed), box-shadow var(--transition-speed); /* YA TENÍA: Transición para la tarjeta */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.about-item:hover {
    transform: translateY(-15px); /* Levantamiento más pronunciado */
    box-shadow: var(--shadow-medium); /* Sombra más fuerte en hover */
}

.about-item:hover .icon {
    transform: scale(1.1); /* Efecto en el icono */
}

.about-item h3 {
    color: var(--accent-color); /* Títulos en verde */
    font-size: 1.6em;
    margin-bottom: 10px;
}

.about-item p {
    font-size: 1em;
    color: var(--text-color);
    text-align: center;
}

/* Services Section (Cards) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajustado para mejor responsividad */
    gap: 35px; /* Más espacio entre tarjetas */
    margin-top: 60px;
}

.service-card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light); /* Sombra suave */
    overflow: hidden;
    /* La transición de la tarjeta en sí ya no es necesaria aquí si el enlace la maneja */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Estilos específicos para los enlaces de tarjetas de servicio (en index.html) */
.service-card-link {
    text-decoration: none; /* Elimina el subrayado por defecto del enlace */
    color: inherit; /* Hereda el color del texto de su padre, evitando el azul predeterminado */
    display: block; /* Hace que el enlace ocupe todo el espacio de la tarjeta para ser clickeable */
    height: 100%; /* Asegura que el enlace se expanda por toda la altura de la tarjeta */
    transition: transform var(--transition-speed), box-shadow var(--transition-speed); /* Asegura que las propiedades transform y box-shadow tengan una transición suave */
}

/* HOVER para service-card que ahora se aplica a través del enlace */
.service-card-link:hover { /* El hover se aplica al ENLACE */
    transform: translateY(-15px); /* Levantamiento más pronunciado */
    box-shadow: var(--shadow-medium); /* Sombra más fuerte en hover */
    /* NO APLIQUES LA SOMBRA O EL TRANSFORM A LA TARJETA EN SÍ EN EL HOVER DEL ENLACE,
       YA QUE EL ENLACE ES QUIEN RECIBE EL HOVER Y DEBE ANIMARSE */
}


.service-card-img {
    width: 100%;
    height: 220px; /* Altura un poco mayor */
    object-fit: cover;
    display: block;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    filter: brightness(0.9) contrast(1.05); /* Ligero ajuste para fotos */
    transition: filter var(--transition-speed); /* YA TENÍA: Transición para el filtro */
}

.service-card-img:hover {
    filter: brightness(1) contrast(1.1); /* Más brillo y contraste en hover */
}

.service-card-content {
    padding: 30px; /* Más padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-card-content h3 {
    color: var(--secondary-color); /* Color de título más oscuro */
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
    padding-bottom: 5px;
}

.service-card-content h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: var(--primary-color); /* Línea dorada bajo el título */
    border-radius: 2px;
}

.service-card-content p {
    font-size: 0.98em; /* Ajuste de tamaño */
    color: var(--text-color);
    text-align: center;
    margin-top: 15px; /* Más espacio entre título y párrafo */
}

/* Gallery Section */
.gallery-section {
    background-color: var(--dark-bg); /* Fondo oscuro profundo */
    color: var(--white);
    padding: 100px 0;
}

.gallery-section h2 {
    color: var(--white);
}

.gallery-section .section-description {
    color: rgba(255, 255, 255, 0.85); /* Texto más blanco */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajustado para mejor responsividad */
    gap: 20px; /* Más espacio */
    margin-top: 60px;
}

.gallery-grid img {
    width: 100%;
    height: 250px; /* Más alto */
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), filter var(--transition-speed); /* YA TENÍA: Transiciones */
    cursor: pointer;
    filter: brightness(0.9) contrast(1.05); /* Ligero ajuste para fotos */
}

.gallery-grid img:hover {
    transform: scale(1.05); /* Zoom más notable */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
    filter: brightness(1.15) contrast(1.2); /* Ligero brillo y más contraste en hover */
}

.gallery-note {
    text-align: center;
    margin-top: 40px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85); /* Texto más blanco */
    font-size: 1.1em;
}

.gallery-note i {
    margin-left: 8px;
    color: var(--primary-color);
}

/* Contact Section (Actualizada con Flexbox) */
.contact-section {
    background-color: var(--light-bg);
    padding-bottom: 80px; /* Un poco menos de padding al final */
}

.contact-content-wrapper {
    display: flex; /* Habilitar Flexbox */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    justify-content: center; /* Centrar los bloques horizontalmente */
    align-items: stretch; /* Estira los elementos para que tengan la misma altura */
    gap: 50px; /* Espacio entre los bloques (contact-info y form) */
    margin-top: 60px;
    max-width: 1100px; /* Limitar el ancho máximo del wrapper */
    margin-left: auto; /* Centrar el wrapper */
    margin-right: auto; /* Centrar el wrapper */
}

.contact-info-block { /* Bloque de información de contacto */
    background-color: var(--secondary-color); /* Fondo oscuro para la info */
    color: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium); /* Sombra para profundidad */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente si hay espacio */
    flex: 1 1 350px; /* Flex-grow, flex-shrink, flex-basis. Permite que el bloque crezca, se encoja y tenga un ancho base de 350px */
    min-width: 300px; /* Asegura un ancho mínimo en móviles */
    max-width: 450px; /* Asegura un ancho máximo en escritorio */
}

.contact-info-block .info-item {
    display: flex;
    align-items: flex-start; /* Alinea los ítems al inicio */
    margin-bottom: 25px; /* Más espacio entre ítems */
}

.contact-info-block .info-item:last-child {
    margin-bottom: 0;
}

.contact-info-block .icon {
    font-size: 1.8em; /* Tamaño del icono */
    margin-right: 15px;
    color: var(--primary-color); /* Iconos dorados */
    min-width: 30px; /* Asegura que el icono no se encoja */
    text-align: center;
}

.contact-info-block p {
    font-size: 1.1em;
    margin-bottom: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    word-wrap: break-word; /* Permite que el texto largo se rompa y pase a la siguiente línea */
    overflow-wrap: break-word; /* Otra propiedad para asegurar el salto de línea */
}

.contact-info-block a {
    color: var(--white);
    font-weight: 600;
    text-decoration: underline;
}

.contact-info-block a:hover {
    color: var(--primary-color);
}

.contact-form {
    background-color: var(--white);
    padding: 50px; /* Más padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium); /* Sombra para profundidad */
    display: flex;
    flex-direction: column;
    flex: 2 1 500px; /* Flex-grow, flex-shrink, flex-basis. El formulario tendrá un ancho base de 500px y crecerá/encogerá más que el bloque de info */
    min-width: 300px; /* Asegura un ancho mínimo en móviles */
}

.contact-form h3 {
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 35px;
    font-size: 2em;
}

.contact-form .form-group { /* Nuevo para agrupar inputs */
    margin-bottom: 25px; /* Espacio entre cada grupo de input */
}

.contact-form .form-group:last-of-type {
    margin-bottom: 30px; /* Más espacio antes del botón */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 18px; /* Más padding */
    border: 1px solid #dcdcdc; /* Borde más sutil, ligeramente más claro */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 1.05em;
    font-family: 'Poppins', sans-serif;
    color: var(--text-color); /* Color del texto dentro del input */
    background-color: var(--white);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed); /* AÑADIDO: transiciones */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--light-text-color); /* Color del placeholder */
    opacity: 1; /* Para Firefox */
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.25); /* Sombra de enfoque sutil y un poco más notoria */
}

.contact-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.form-message {
    text-align: center;
    margin-top: 25px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    display: none;
    font-size: 1em;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Clases de utilidad para accesibilidad */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Footer */
footer {
    background-color: var(--dark-bg); /* Fondo oscuro profundo */
    color: var(--white);
    text-align: center;
    padding: 50px 0;
    font-size: 0.95em;
    position: relative;
}

footer p {
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8); /* Texto más claro */
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    color: var(--white);
    font-size: 1.8em;
    margin: 0 15px;
    transition: color var(--transition-speed), transform var(--transition-speed); /* YA TENÍA: Transiciones */
}

.social-links a:hover {
    color: var(--primary-color);
    transform: translateY(-5px);
}

/* Carrusel de imágenes dentro de la tarjeta de servicio en la página principal */
.service-carousel {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
    z-index: 1;
}



/* NAVBAR */
.navbar {
    background-color: #22303c;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}

.nav-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 50px;
}

.nav-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    transition: background 0.3s;
}

.nav-menu a:hover {
    background-color: #555;
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    min-width: 250px;
    z-index: 1000;
}

.dropdown-content li a {
    padding: 10px;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Botón menú móvil */
.menu-toggle {
    display: none;
    font-size: 26px;
    cursor: pointer;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .nav-menu {
        flex-direction: column;
        background: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 250px;
        display: none;
    }
    .nav-menu.show {
        display: block;
    }
}

/*SCROL SUAVE PARA DESLIZAR*/

html {
    scroll-behavior: smooth;
}