/* =========================================
   LANDINGS.CSS (ESTILO EDITORIAL CLEAN)
   Para páginas internas: Services, About, etc.
   ========================================= */

/* --- 1. SERVICE HERO (Editorial Header) --- */
.service-hero {
    padding-top: 180px; /* Espacio para el header fijo */
    padding-bottom: 4rem;
    background: linear-gradient(to bottom, #fff 0%, var(--color-bg-surface) 100%);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumbs {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    gap: 0.5rem;
}

.breadcrumbs a { transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs .sep { opacity: 0.4; }
.breadcrumbs .current { color: var(--color-accent); }

.service-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
    max-width: 25ch;
    letter-spacing: -0.03em;
}

.service-lead {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--color-text-body);
    max-width: 65ch;
    line-height: 1.6;
}

/* --- 2. CONTENT LAYOUT --- */
.content-section {
    padding-block: 6rem;
    background: #fff;
}

.content-grid {
    display: grid;
    gap: 4rem;
}

@media (min-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr 1fr; /* 50% - 50% clásico editorial */
        gap: 6rem;
        align-items: start;
    }
}

.block-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-text-main);
}

.text-block p {
    font-size: 1.05rem;
    color: var(--color-text-body);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Lista con checks naranjas */
.check-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
    color: var(--color-text-main);
}

.check-list li::before {
    content: "✓";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: 800;
}

/* --- 3. HIGHLIGHT BOX (La Solución) --- */
.highlight-box {
    background: var(--color-bg-surface); /* Gris muy suave */
    border: 1px solid var(--color-border);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    position: relative;
    box-shadow: var(--shadow-card);
}

/* Línea de acento lateral estilo editorial */
.highlight-box::before {
    content: "";
    position: absolute;
    top: 2.5rem; bottom: 2.5rem;
    left: 0;
    width: 4px;
    background: var(--color-accent);
    border-radius: 0 4px 4px 0;
}

.highlight-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

/* --- 4. TECH STACK (Badges Limpios) --- */
.stack-section {
    padding-block: 4rem;
    background: #fff;
    border-top: 1px solid var(--color-border);
}

.section-subtitle {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tech-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.tech-badge {
    padding: 0.6rem 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px; /* Rectangular suave */
    font-weight: 600;
    color: var(--color-text-body);
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: default;
}

.tech-badge:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- 5. CTA SECTION (Dark) --- */
.cta-section {
    padding-block: 6rem;
    background: #fff;
}

.cta-box {
    background: var(--color-bg-dark); /* Azul oscuro corporativo */
    color: #fff;
    padding: 4rem 2rem;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.3);
}

.cta-box h2 { 
    color: #fff; 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
}

.cta-box p { 
    color: #cbd5e1; 
    margin-bottom: 2.5rem; 
    font-size: 1.15rem;
    max-width: 90%;
    margin-inline: auto; 
}

/* Botón inverso para fondo oscuro */
.btn-inverse {
    background: #fff;
    color: var(--color-text-main);
    border: 1px solid #fff;
}
.btn-inverse:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* --- SPLIT LAYOUT (CONTACTO ESTILO NUTRA) --- */
.split-section {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Una columna */
    min-height: calc(100vh - 80px); /* Altura completa menos el header */
    margin-top: 80px; /* Compensa el header fijo */
}

.split-image {
    width: 100%;
    height: 300px; /* Altura en móvil */
    position: relative;
    overflow: hidden;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo sin deformarse */
    display: block;
}

.split-content {
    background: #fff;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-form-clean {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.contact-form-clean label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
    display: block;
}

.contact-form-clean input,
.contact-form-clean select,
.contact-form-clean textarea {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px; /* Bordes cuadrados suaves como la ref */
    margin-bottom: 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.contact-form-clean input:focus,
.contact-form-clean textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* DESKTOP (Split Screen) */
@media (min-width: 992px) {
    .split-section {
        grid-template-columns: 45% 55%; /* Imagen un poco más angosta */
    }

    .split-image {
        height: auto; /* Altura automática (full height) */
        position: sticky;
        top: 80px;
    }

    .split-content {
        padding: 4rem 6rem; /* Mucho aire lateral */
    }
}

/* --- HERO VISUAL CON IMAGEN DE FONDO --- */

.service-hero.hero-visual-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Ajustamos altura mínima para que la imagen luzca */
    min-height: 500px; 
    display: flex;
    align-items: center;
    border-bottom: none; /* Quitamos el borde gris */
    color: #ffffff; /* Texto blanco forzado */
}

/* Capa oscura sobre la imagen para legibilidad */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6); /* Azul oscuro con 60% opacidad */
    /* Opcional: Gradiente para un look más pro */
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 1;
}

/* Asegurar que el contenido esté sobre el overlay */
.hero-visual-bg .container {
    position: relative;
    z-index: 2;
}

/* Ajustes de color específicos para este modo */
.hero-visual-bg .service-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero-visual-bg .service-lead {
    color: rgba(255, 255, 255, 0.9); /* Blanco con leve transparencia */
}

.hero-visual-bg .breadcrumbs {
    color: rgba(255, 255, 255, 0.7);
}

.hero-visual-bg .breadcrumbs a:hover,
.hero-visual-bg .breadcrumbs .current {
    color: #ffffff;
}

.hero-visual-bg .eyebrow {
    color: var(--color-accent); /* Mantenemos el naranja de marca */
}


/* --- HERO FULL WIDTH (NUEVO ESTILO) --- */
.hero-section.hero-full-width {
    padding-top: 0 !important; /* Reseteo */
    padding-bottom: 0 !important;
    min-height: 85vh; /* Altura imponente */
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff; /* Texto blanco por defecto */
}

/* El Gradiente de lectura (Overlay) */
.hero-overlay-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente de Azul Oscuro (izquierda) a Transparente (derecha) */
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 50%, rgba(15, 23, 42, 0.2) 100%);
    z-index: 1;
}

/* Ajustes de contenido del Hero */
.hero-full-width .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-full-width .hero-content {
    max-width: 650px; /* Ancho de lectura */
}

/* Forzar colores en Hero Oscuro */
.hero-full-width .hero-title { color: #fff !important; }
.hero-full-width .hero-lead { color: rgba(255,255,255,0.9) !important; }
.hero-full-width .eyebrow { color: var(--color-accent) !important; }

/* --- AJUSTE COMPOSICIÓN EN "QUÉ HACEMOS" --- */
/* Reutilizamos .hero-composition pero ajustamos la escala para que quepa en la columna */
.about-visuals .hero-composition {
    transform: scale(0.85); /* Reducimos un poco el tamaño para que encaje */
    transform-origin: center center;
    width: 100%;
    height: 100%;
}

/* Asegurar que la sección Qué Hacemos tenga altura suficiente */
.about-section .about-visuals {
    height: 600px; /* Espacio para la animación */
    overflow: visible; /* Permitir que los elementos floten un poco fuera */
}

/* Responsive para la composición */
@media (max-width: 992px) {
    .about-section .about-visuals { height: 450px; }
    .about-visuals .hero-composition { transform: scale(0.65); }
}