/* ================================================= */
/* 0. VARIABLES Y RESET BASICO (Apple Minimalismo) */
/* ================================================= */

:root {
    /* Colores: Blanco, Negro y un sutil Gris/Azul */
    --color-dark: #1d1d1f;        /* Similar al espacio gris oscuro de Apple */
    --color-light: #f5f5f7;       /* Fondo blanco roto */
    --color-white: #fff;
    --color-accent: #0071e3;      /* Azul de Apple para enlaces/botones */
    --color-dark-alt: #333336;    /* Fondo oscuro sutil */
    
    /* Tipografía: Poppins (alternativa a SF Pro) */
    --font-primary: 'Poppins', sans-serif;

    /* Espaciado: Mucho espacio en blanco */
    --spacing-xl: 120px;
    --spacing-lg: 80px;
    --spacing-md: 40px;
    --spacing-sm: 20px;
}

/* Reset Básico */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; } /* Suaviza el scroll a secciones */
body {
    font-family: var(--font-primary);
    line-height: 1.4; /* Line height más ajustado para títulos */
    color: var(--color-dark);
    background-color: var(--color-white);
}

/* Clases de Utilidad */
.container {
    width: 90%;
    max-width: 1400px; /* Ancho de contenido más amplio */
    margin: 0 auto;
}
.text-center { text-align: center; }
.section-module { padding: var(--spacing-xl) 0; }
.background-light { background-color: var(--color-light); color: var(--color-dark); }
.background-dark { background-color: var(--color-dark); color: var(--color-white); }
.background-dark-alt { background-color: var(--color-dark-alt); color: var(--color-white); }

a { text-decoration: none; color: var(--color-accent); transition: color 0.3s; }
a:hover { color: darken(var(--color-accent), 10%); }

/* Títulos */
h1, h2, h3, h4 {
    font-weight: 600;
    margin: 0;
}

/* ================================================= */
/* 1. HEADER Y NAVEGACIÓN (Fija y Limpia) */
/* ================================================= */

#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95); /* Fondo semitransparente como Apple */
    backdrop-filter: blur(10px); /* Efecto blur (si es compatible) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 14px 0;
}
.header-content {
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente (más Apple-like) */
    align-items: center;
}
.site-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-right: 40px; /* Separación con el menú */
}
#main-nav ul {
    list-style: none;
    display: flex;
}
#main-nav li { margin: 0 15px; }
#main-nav a {
    color: var(--color-dark);
    font-size: 0.95rem;
    padding: 5px 0;
}
.nav-link-cta {
    color: var(--color-accent) !important;
    font-weight: 600;
}

/* ================================================= */
/* 2. HERO SECTION (Impacto Máximo) */
/* ================================================= */

#hero {
    min-height: 85vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 1. Fondo base Negro (si la imagen falla o es transparente) */
    background-color: var(--color-dark); 
    
    /* 2. Combinamos la imagen con un gradiente oscuro (overlay) */
    /* El gradiente (rgba(0,0,0,0.6)) oscurece el SVG para que el texto resalte */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/img/LogoSinLetras.png') !important; 
    
    background-size: cover; /* Hace que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    
    padding: 0;
}

/* Regla adicional para asegurar que el texto sea blanco sobre el fondo oscuro */
#hero .hero-title, 
#hero .hero-subtitle,
#hero .button-clean {
    color: var(--color-white); 
}
/* Aseguramos que los enlaces/botones del Hero usen el estilo de borde blanco */
#hero .button-clean {
    border-color: var(--color-white);
}

/* Si tu logo está en la regla .hero-logo, asegúrate de que su color también contraste */

/* ================================================= */
/* 3. BOTONES Y LINKS (Minimalistas) */
/* ================================================= */

.button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px; /* Botones pill-shaped */
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.button-clean {
    /* CORRECCIÓN FINAL: 'blak' por 'dark' */
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-white);
}
.button-clean:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
.button-white-border {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.button-white-border:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
}
.link-detail {
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: var(--spacing-sm);
    display: inline-block;
}

/* ================================================= */
/* 4. SECCIONES DE CONTENIDO (Feature y Grid) */
/* ================================================= */

/* Feature Module (Similar a la presentación de un producto secundario) */
.feature-content {
    max-width: 700px;
}
.feature-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}
.feature-headline {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}
.feature-description {
    font-size: 1.4rem;
    color: var(--color-light-text);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
    opacity: 0.8;
}

/* Grid de Servicios */
.services-grid-module {
    padding-top: var(--spacing-sm); /* Menos padding arriba para pegarlo a la sección anterior */
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; /* Espaciado ajustado */
}
.service-card {
    min-height: 600px; /* Alto fijo para impacto visual */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Contenido abajo, como Apple */
    padding: var(--spacing-md);
    border-radius: 18px; /* Bordes redondeados sutiles */
    overflow: hidden;
}
.card-category { font-size: 1rem; opacity: 0.7; margin-bottom: 5px; }
.card-title { font-size: 2rem; margin-bottom: var(--spacing-sm); }
.card-description { font-size: 1.1rem; margin-bottom: var(--spacing-sm); opacity: 0.9; }

/* CTA Final - Fondo oscuro */
.cta-module {
    text-align: center;
    padding: var(--spacing-xl) 0;
}
.cta-headline {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}
.cta-subtitle {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
}

/* ================================================= */
/* 5. FOOTER */
/* ================================================= */

#site-footer {
    background-color: var(--color-light);
    color: var(--color-dark);
    padding: var(--spacing-md) 0;
    font-size: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-nav a {
    color: var(--color-dark);
    margin-left: var(--spacing-sm);
    opacity: 0.6;
}

/* ================================================= */
/* 6. RESPONSIVE DESIGN (Móvil) */
/* ================================================= */

@media (max-width: 992px) {
    /* Ajustes generales */
    .section-module { padding: var(--spacing-lg) 0; }
    
    /* Hero */
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.4rem; }
    .hero-title, .hero-subtitle { padding: 0 10px; }

    /* Navegación (Centrada y apilada si es necesario) */
    #site-header { padding: 10px 0; }
    .header-content { flex-direction: column; }
    #main-nav ul { margin-top: 10px; }
    #main-nav li { margin: 0 10px; }

    /* Grid de Servicios Apilado */
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card { min-height: 400px; }
    .card-title { font-size: 1.5rem; }

    /* Feature Headline */
    .feature-headline { font-size: 2.2rem; }
    .feature-description { font-size: 1.1rem; }

    /* Footer */
    .footer-content { flex-direction: column; text-align: center; }
    .footer-nav { margin-top: 10px; }
}
/* ================================================= */
/* 7. ESTILOS DE PÁGINA DE CONTACTO Y FORMULARIO (clean-form) */
/* ================================================= */

#contact-page {
    /* Padding más grande para esta página para que se sienta más vacía y premium */
    padding: var(--spacing-xl) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info a la izquierda, Formulario grande a la derecha */
    gap: var(--spacing-lg);
    align-items: flex-start; /* Alinear arriba */
}

.contact-title {
    font-size: 2.5rem;
    color: var(--color-dark);
    margin-top: 0;
}

.contact-intro {
    font-size: 1.2rem;
    color: var(--color-light-text);
    margin-bottom: var(--spacing-md);
}

.contact-details {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}
.contact-details li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark);
}

.contact-cta-small a {
    font-size: 1.4rem;
    font-weight: 600;
}

/* Estilos de Formulario Limpio (Clean-Form) */
.clean-form {
    background-color: var(--color-white); /* Fondo base de la caja */
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra muy ligera */
    position: relative; /* Importante para que el pseudo-elemento de fondo funcione */
    overflow: hidden; /* Asegura que el logo no se salga del borde redondeado */
}

/* Pseudo-elemento para el logo de fondo */
.clean-form::before {
    content: ''; /* Obligatorio para pseudo-elementos */
    position: absolute;
    top: 0;
    left: 0;
    width: 135%;
    height: 60%;
    background-image: url('/img/LogoSinLetras.png') !important; /* <--- RUTA DE TU LOGO */
    background-repeat: no-repeat;
    background-position: center; /* Centrar el logo en el formulario */
    background-size: 70%; /* Tamaño del logo dentro del formulario (ajusta si es necesario) */
    opacity: 0.08; /* <--- OPACIDAD CLAVE: Hazlo muy sutil (8% de opacidad) */
    pointer-events: none; /* Asegura que no bloquee interacciones con el formulario */
    z-index: 1; /* Asegura que esté por debajo del contenido del formulario */
}

/* El resto de las reglas para los inputs, labels, etc. se mantienen */
.clean-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: var(--spacing-sm);
    color: var(--color-dark);
    position: relative; /* Importante para que el texto y los inputs estén sobre el logo */
    z-index: 2; /* Mayor que el z-index del pseudo-elemento */
}

.clean-form input[type="text"],
.clean-form input[type="email"],
.clean-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.3s;
    position: relative; /* Asegura que los campos estén sobre el logo */
    z-index: 2; /* Mayor que el z-index del pseudo-elemento */
    background-color: rgba(255, 255, 255, 0.9); /* Ligeramente opaco para que el logo no se vea a través */
}

/* Aseguramos que el checkbox y su label también estén sobre el logo */
.privacy-check {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2;
}
.privacy-check label {
    display: inline-block; /* Ajuste para el label del checkbox */
    margin-left: 5px;
}

.primary-form-cta {
    width: 100%;
    /* Estilo del botón de acción */
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    padding: 15px 20px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s;
    position: relative; /* Asegura que el botón esté sobre el logo */
    z-index: 2;
}

.primary-form-cta:hover {
    background-color: #0056b3; /* Un azul ligeramente más oscuro */
}

/* Media Query para móvil */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Apilar la información y el formulario */
    }
    .contact-title {
        font-size: 2rem;
    }
}