/* ==========================================================================
   CSS ENCAPSULADO BAJO EL PREFIJO .cservice-
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
}
/* Variables CSS de diseño encapsuladas en el contenedor principal */
.cservice-wrapper {
    --cs-dark-green: #0a2e18; 
    --cs-green: #1f6b3e;
    --cs-light-green: #e9f2eb;
    --cs-accent-yellow: #f4b41a;
    --cs-accent-navy: #1b2a49;
    --cs-accent-pink: #d94a8c;
    --cs-accent-pink-light: #f07ab2;
    --cs-accent-pink-lightest: #f8b4d4;
    --cs-dark: #121212;
    --cs-grey: #666666;
    --cs-light: #ffffff;
    --cs-font: 'Montserrat', sans-serif;
    --cs-transition-soft: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    font-family: var(--cs-font);
    color: var(--cs-dark);
    line-height: 1.6;
    width: 100%;
}

/* Reset local para evitar herencias no deseadas */
.cservice-wrapper, 
.cservice-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   ESTILOS DE SECCIÓN & LAYOUT (AJUSTE DINÁMICO AL CONTENIDO)
   ========================================================================== */

.cservice-section {
    width: 100%;
    padding: 5rem 2rem; /* Alto controlado por padding en lugar de 100vh */
    position: relative;
    overflow: hidden;
}

.cservice-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Contenedores Flexbox Divididos (50/50) */
.cservice-split-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 3rem;
}

.cservice-column-half {
    flex: 1;
    min-width: 0; /* Evita desbordamiento en flex */
}

.cservice-flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   TIPOGRAFÍA E IDENTIFICADORES DE TEXTO (SIN AFECTAR ETIQUETAS DIRECTAS)
   ========================================================================== */

.cservice-main-title {
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cservice-title-large {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.cservice-title-medium {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.cservice-title-small {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cservice-paragraph {
    font-size: 1rem;
    margin-bottom: 1.2rem;
    font-weight: 400;
}

.cservice-paragraph-sm {
    font-size: 0.9rem;
    line-height: 1.5;
}

.cservice-text-bold {
    font-weight: 700;
}

.cservice-font-light {
    font-weight: 300;
}

/* Clases de Utilidad de Color */
.cservice-bg-dark { background-color: var(--cs-dark); }
.cservice-bg-dark-green { background-color: var(--cs-dark-green); }
.cservice-bg-light-green { background-color: var(--cs-light-green); }
.cservice-bg-white { background-color: var(--cs-light); }

.cservice-text-white { color: var(--cs-light); }
.cservice-text-grey { color: var(--cs-grey); }
.cservice-text-highlight { color: var(--cs-accent-yellow); }
.cservice-text-center { text-align: center; }
.cservice-text-right { text-align: right; }

/* ==========================================================================
   COMPONENTES E INTERACTIVIDAD (TRANSICIONES)
   ========================================================================== */

/* Héroe (Sección 1) */
.cservice-hero {
    min-height: 500px;
    display: flex;
    align-items: center;
}
.cservice-hero-image-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.cservice-bg-img {
    width: 100%; height: 100%; object-fit: cover;
}
.cservice-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(10,46,24,0.95) 0%, rgba(10,46,24,0.5) 100%);
}
.cservice-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px;
}
.cservice-logos-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2.5rem;
}
.cservice-logo-item {
    height: 80px;
}
.cservice-subtitle-light {
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 0.8rem;
    opacity: 0.9;
}
.cservice-author-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.cservice-author-name {
    font-weight: 600;
}
.cservice-author-role {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Listas Especiales (Sección 2) */
.cservice-list-group {
    list-style: none;
    margin: 1.5rem 0;
}
.cservice-list-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}
.cservice-list-item::before {
    content: "•";
    color: var(--cs-green);
    font-size: 1.5rem;
    margin-right: 0.8rem;
    line-height: 0;
}

/* Cajas de Destacados */
.cservice-callout-box {
    background-color: var(--cs-green);
    color: var(--cs-light);
    padding: 1.5rem;
    border-left: 5px solid var(--cs-accent-yellow);
    margin-top: 1.5rem;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(31, 107, 62, 0.15);
}

/* Bloques de Información con Bordes */
.cservice-info-block {
    margin-bottom: 1.8rem;
}
.cservice-accent-block {
    margin-bottom: 1.8rem;
    border-left: 4px solid var(--cs-green);
    padding-left: 1.2rem;
}

/* Grillas */
.cservice-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
}
.cservice-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.cservice-gap-lg { gap: 2.5rem; }
.cservice-mt-lg { margin-top: 2.5rem; }

/* Tarjetas con Efecto de Transición (Sección 3) */
.cservice-card-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem;
    border-radius: 8px;
    transition: var(--cs-transition-soft);
}
.cservice-card-step:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.cservice-card-image-box {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 1.2rem;
}
.cservice-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--cs-transition-soft);
}
.cservice-card-step:hover .cservice-card-img {
    transform: scale(1.05);
}
.cservice-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cs-accent-yellow);
    margin-bottom: 0.5rem;
}
.cservice-card-desc {
    font-size: 0.88rem;
    opacity: 0.85;
}

/* Sectores Industriales (Sección 5) */
.cservice-sector-box {
    padding: 1.2rem;
    background: var(--cs-light);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: var(--cs-transition-soft);
}
.cservice-sector-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #fbfdfc;
}

/* Manejo de Imágenes en Columnas */
.cservice-image-wrapper {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.cservice-img-responsive {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout de Imágenes Múltiples (Sección 6 y 7) */
.cservice-double-image-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}
.cservice-img-responsive-half {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.cservice-collage-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cservice-collage-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cservice-collage-main {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
}
.cservice-collage-sub-row {
    display: flex;
    gap: 1rem;
}
.cservice-collage-sub {
    width: 50%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

/* Listas con Iconos (Sección 7) */
.cservice-icon-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}
.cservice-icon-item {
    display: flex;
    gap: 1.2rem;
}
.cservice-icon-graphic {
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Embudo de Relación de Servicios (Sección 8) */
.cservice-funnel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 3rem auto;
    max-width: 800px;
    width: 100%;
}
.cservice-funnel-tier {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.cservice-funnel-label {
    width: 200px;
    font-weight: 600;
    font-size: 0.8rem;
    padding-right: 1.2rem;
}
.cservice-funnel-percentage {
    width: 60px;
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 1.2rem;
    color: var(--cs-grey);
}
.cservice-funnel-bar {
    height: 38px;
    transition: var(--cs-transition-soft);
    cursor: pointer;
}
.cservice-funnel-bar:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05);
}

/* Formas Trapecio para el Embudo */
.cservice-bar-navy { background-color: var(--cs-accent-navy); width: 100%; clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%); }
.cservice-bar-yellow { background-color: var(--cs-accent-yellow); width: 70%; clip-path: polygon(15% 0%, 85% 0%, 75% 100%, 25% 100%); }
.cservice-bar-green { background-color: var(--cs-green); width: 45%; clip-path: polygon(25% 0%, 75% 0%, 65% 100%, 35% 100%); }
.cservice-bar-pink { background-color: var(--cs-accent-pink); width: 25%; clip-path: polygon(35% 0%, 65% 0%, 60% 100%, 40% 100%); }
.cservice-bar-pink-light { background-color: var(--cs-accent-pink-light); width: 12%; clip-path: polygon(40% 0%, 60% 0%, 55% 100%, 45% 100%); }
.cservice-bar-pink-lightest { background-color: var(--cs-accent-pink-lightest); width: 5%; clip-path: polygon(45% 0%, 55% 0%, 52% 100%, 48% 100%); }

.cservice-bordered-box {
    border: 1px solid rgba(0,0,0,0.08);
    padding: 1.5rem;
    border-radius: 6px;
}

/* Tarjetas de Beneficios (Sección 9) */
.cservice-benefit-card {
    background-color: var(--cs-light);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: var(--cs-transition-soft);
}
.cservice-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.cservice-benefit-img {
    width: 100%;
    height: 180px;
    object-fit: fill;
    border-radius: 6px;
    margin-bottom: 0.8rem;
}
.cservice-benefit-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* Bloque de Contacto (Sección 10) */
.cservice-contact-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.cservice-contact-list {
    list-style: none;
    margin-top: 0.8rem;
}
.cservice-contact-item {
    margin-bottom: 0.6rem;
    display: flex;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 300;
}

/* ==========================================================================
   DISEÑO RESPONSIVO (MOBILE FIRST & MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 900px) {
    .cservice-section {
        padding: 3.5rem 1.2rem;
    }
    
    .cservice-split-container {
        flex-direction: column;
        gap: 2rem;
    }
    
    .cservice-reverse-mobile {
        flex-direction: column-reverse;
    }

    .cservice-image-wrapper {
        min-height: 220px;
        max-height: 300px;
    }

    .cservice-funnel-label {
        width: 110px;
        font-size: 0.7rem;
        padding-right: 0.5rem;
    }
    
    .cservice-funnel-percentage {
        width: 40px;
        font-size: 0.75rem;
        padding-left: 0.5rem;
    }
}