/* =========================================
   1. VARIABLES Y RESET (Modo Oscuro)
   ========================================= */
:root { /* Colores */
    --fondo-oscuro: #0a0f0d;      /*General*/
    --fondo-card: #121a17;        /*Cajas*/
    --verde-suave: #4a7c59;       /*Marca*/
    --dorado-logo: #b8965a;       /*Detalles*/
    --blanco-texto: #e8e8e8;      /*Lectura*/
    --gris-borde: #222a27;        /*Bordes*/
    --texto-suave: #a0a0a0;       /*Apoyo*/
    --negro-minimal: #050505;     /*Contraste*/
}

* { /* Reseteo */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img { /* Adaptabilidad */
    max-width: 100%;
    height: auto;
}

html { /* Desplazamiento */
    scroll-behavior: smooth;
}

body { /* Base */
    background-color: var(--fondo-oscuro);
    color: var(--blanco-texto);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; 
    line-height: 1.6;
}

/* =========================================
   2. ENCABEZADO
   ========================================= */
header { /* Menú */
    padding: 25px 0;
    text-align: center; 
    border-bottom: 4px solid var(--verde-suave); 
    position: sticky; /* Fijo */
    top: 0;
    z-index: 1000;
    background-color: rgba(10, 15, 13, 0.85); 
    backdrop-filter: blur(10px); /* Esmerilado */
    -webkit-backdrop-filter: blur(10px);
}

.logo-img { /* Imagen */
    width: 130px;
    border-radius: 50%;
    border: 2px solid var(--dorado-logo);
    padding: 5px;
    margin-bottom: 10px;
}

header h1 { /* Marca */
    color: var(--blanco-texto);
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

nav ul { /* Lista */
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 15px;
}

nav a { /* Enlaces */
    color: var(--texto-suave);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.3s;
}

nav a:hover { /* Interacción */
    color: var(--verde-suave);
}

::-webkit-scrollbar { /* Barra */
    width: 12px;
}

::-webkit-scrollbar-track { /* Fondo-barra */
    background-color: var(--fondo-oscuro);
}

::-webkit-scrollbar-thumb { /* Deslizador */
    background-color: var(--verde-suave);
    border-radius: 10px;
    border: 3px solid var(--fondo-oscuro);
}

::-webkit-scrollbar-thumb:hover { /* Activado */
    background-color: var(--dorado-logo);
}

/* =========================================
   3. SECCIÓN HERO (Inicio e Historia)
   ========================================= */
#inicio, #historia { /* Portada */
    background-image: linear-gradient(rgba(10,15,13,0.8), rgba(10,15,13,0.9)), url('../image_def523.png');
    background-size: cover;
    padding: 100px 20px;
    text-align: center;
}

/* Solo para el Inicio  */
#inicio h2 { 
    font-size: 3.5rem;
    color: var(--verde-suave);
    margin-bottom: 15px;
}

/* Solo para la Historia */
#historia h2 { 
    font-size: 2.5rem; /* Un poco más pequeño si quieres */
    color: var(--verde-suave); 
    margin-bottom: 15px;
}

form input:focus, 
form select:focus { /* Resplandor */
    outline: none; 
    border-color: var(--dorado-logo);
    box-shadow: 0 0 10px rgba(184, 150, 90, 0.3); 
    background-color: #1a241f; 
    transition: all 0.3s ease;
}

/* =========================================
   4. SERVICIOS (Con efecto Hover de Imágenes)
   ========================================= */
#servicios { /* Contenedor */
    background-color: var(--fondo-oscuro); 
    padding: 60px 20px;
}

#servicios h2, #servicios h3 { /* Subtítulos */
    color: var(--verde-suave);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contenedor-servicios { /* Cuadrícula */
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.servicio-card { /* Tarjeta */
    background-color: var(--fondo-card);
    border: 1px solid var(--gris-borde);
    border-radius: 15px;
    padding: 30px;
    width: 280px;
    text-align: center;
    transition: 0.3s ease;
    position: relative; /* Base-flotante */
}

.servicio-card:hover { /* Elevación */
    transform: translateY(-8px);
    border-color: var(--dorado-logo);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.servicio-card h3 { /* Nombre */
    color: var(--blanco-texto);
    margin-bottom: 10px;
}

.servicio-card .precio { /* Valor */
    color: var(--dorado-logo);
    font-weight: bold;
    font-size: 1.4rem;
    display: block;
    margin-top: 15px;
}

.img-referencia { /* Oculta */
    position: absolute;
    top: -100px; /* Subida */
    left: 50%;
    transform: translateX(-50%) scale(0.5); 
    width: 130px; /* Tamaño */
    height: 130px;
    object-fit: cover; 
    border-radius: 50%; 
    border: 3px solid var(--dorado-logo); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.8); /* Sombra */
    opacity: 0; /* Transparente */
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 10;
    background-color: var(--fondo-oscuro); 
}

.servicio-card:hover .img-referencia { /* Visible */
    transform: translateX(-50%) scale(1); 
    opacity: 1; 
    visibility: visible;
}

/* =========================================
   5. VISÍTANOS 
   ========================================= */
#visitanos { /* Sección */
    padding: 80px 20px;
    background-color: var(--fondo-oscuro);
}

.contenedor-visita { /* Maquetación */
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
    gap: 40px;
    align-items: flex-start;
    padding: 0 15px;
}

.columna-info h2 { /* Título */
    color: var(--verde-suave);
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: left;
}

.detalle-contacto { /* Detalles */
    margin: 20px 0;
    border-left: 3px solid var(--dorado-logo);
    padding-left: 15px;
    text-align: left;
}

.btn-secundario { /* Botón */
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--verde-suave);
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-secundario:hover { /* Acción */
    background-color: var(--verde-suave);
}

.columna-horarios { /* Caja */
    background-color: var(--fondo-card);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--gris-borde);
    flex: 1;
}

.columna-horarios h3 { /* Título */
    color: var(--blanco-texto);
    text-align: center;
    margin-bottom: 20px;
}

.lista-horarios { list-style: none; /* Días */ }
.lista-horarios li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); color: var(--texto-suave); }
.lista-horarios li strong { color: var(--blanco-texto); /* Cierre */ }

/* =========================================
   6. CONTACTO 
   ========================================= */
#contacto { /* Bloque */
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

#contacto h2 { /* Título */
    color: var(--verde-suave);
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: left;
    padding-left: 15px;
}

form { /* Formulario */
    background-color: var(--fondo-card);
    padding: 40px;
    max-width: 600px;
    margin-left: 15px;
    border-radius: 20px;
    border: 1px solid var(--gris-borde);
}

form label { color: var(--verde-suave); font-weight: bold; display: block; margin-bottom: 5px; /* Etiquetas */ }
form input, form select { width: 100%; padding: 12px; margin-bottom: 20px; background-color: var(--fondo-oscuro); color: white; border: 1px solid var(--gris-borde); border-radius: 8px; /* Cajas */ }
form button { width: 100%; background-color: var(--negro-minimal); color: white; padding: 15px; border: 1px solid var(--verde-suave); border-radius: 8px; cursor: pointer; font-weight: bold; text-transform: uppercase; transition: 0.3s; /* Enviar */ }
form button:hover { background-color: var(--verde-suave); /* Clic */ }

/* =========================================
   7. FOOTER Y BOTONES FLOTANTES
   ========================================= */
footer { /* Pie */
    background-color: var(--negro-minimal);
    color: var(--texto-suave);
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid var(--gris-borde);
}

.redes-sociales a { color: var(--blanco-texto); margin: 0 10px; text-decoration: none; transition: 0.3s; /* Íconos */ }
.redes-sociales a:hover { color: var(--dorado-logo); /* Brillo */ }

.btn-whatsapp { /* Chat */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    z-index: 1000;
    transition: 0.3s;
}

.btn-whatsapp:hover { transform: scale(1.05); /* Latido */ }

/* =========================================
   8. DISEÑO RESPONSIVO (Media Queries)
   ========================================= */
@media (max-width: 768px) {    /* Quiebre */

    /* Visítanos y Formulario */
    .contenedor-visita { flex-direction: column; }  /* Columna */
    form { margin-left: 0; width: 100%; }           /* Ancho */
    #contacto h2 { padding-left: 0; text-align: center; } /* Centro */

    /* Comparativa */
    .comparativa-dual {
        flex-direction: column;   /* Apilado */
        align-items: center;      /* Alineación */
        gap: 20px;                /* Espaciado */
    }

    /* Historia y Certificados */
    .historia-expandida {
        text-align: left;         /* Lectura */
    }
    .parrafo-certificados {
        text-align: left;         /* Adaptación */
    }
}

/* Estilo historia y justificada */
.historia-expandida {
    max-width: 850px; /*ancho txt*/
    margin: 0 auto;   /* Centra pnt*/
    text-align: justify; /* Rellena I/D*/
    line-height: 1.8;  /*aire entre líneas*/
    color: var(--texto-suave); /* color texto*/
}

.historia-expandida p {
    margin-bottom: 20px; /* Separa-párrafos */
}

/*columnas paralelo */
.comparativa-dual {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
    padding: 0 20px;
}

.columna-comparativa {
    flex: 1;
    max-width: 450px;
    padding: 25px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pros {
    border-color: #d4af37; /* Color destacado */
}


/* --- SECCIÓN CERTIFICADOS --- */

.certificados-container {
    margin-top: 60px;
    text-align: center;
}

.parrafo-certificados {
    max-width: 850px;
    margin: 20px auto 40px auto;
    text-align: justify; /* estilo */
    line-height: 1.8;
    color: var(--texto-suave);
}

.galeria-certificados {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* acomodan pantalla */
}

.certificado-item {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Efecto sutil al pasar el mouse */
.certificado-item:hover {
    transform: scale(1.03);
    border-color: #d4af37;
}

.certificado-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%); /*oscuro/serio */
}