/* ============================================================================
   Novatecsystem | Portal Web Corporativo + NEIF
   Módulo M10-B — Estilos de la página del proyecto de Café.
   Sistema Integral de Gestión de Cultivo y Procesamiento de Café.
   Identidad Novatecsystem: fondo oscuro, verde institucional, acento tecnológico.
   15 secciones comerciales.

   SELECTOR CSS: body.route-proyectos-cafe
   - Clase de body normalizada (sin barras): route-proyectos-cafe
   - Generado por el controlador: $routeKey = 'proyectos-cafe'
   - Solo afecta a /proyectos/cafe, no a otras rutas.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Body de la página de Café — scope exclusivo.
   Solo coincide cuando el body tiene class="route-proyectos-cafe".
   --------------------------------------------------------------------------- */
body.route-proyectos-cafe {
    background: var(--color-white);
    color: var(--color-ink);
}

body.route-proyectos-cafe .section {
    background: #F4F7F6;
}

body.route-proyectos-cafe .section-alt {
    background: #E8F8F2;
}

body.route-proyectos-cafe .section-title {
    color: var(--color-ink);
}

body.route-proyectos-cafe .eyebrow {
    color: var(--color-primary-dark);
}

body.route-proyectos-cafe .section-sub {
    color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
   Contenedor Café — más amplio que el global para página comercial.
   --------------------------------------------------------------------------- */
body.route-proyectos-cafe .container {
    width: min(1280px, calc(100% - 2 * var(--space-5)));
}

/* ---------------------------------------------------------------------------
   Hero Café
   --------------------------------------------------------------------------- */
.coffee-hero {
    background: linear-gradient(160deg, var(--color-graphite) 0%, var(--color-graphite-2) 55%, var(--color-surface) 100%);
    color: var(--color-text-light);
    padding: var(--space-9) 0;
    position: relative;
    overflow: hidden;
}

/* Fondo ambiental original — dos círculos radiales */
.coffee-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(29, 158, 117, 0.22), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(57, 191, 200, 0.12), transparent 45%);
    pointer-events: none;
}

.coffee-hero .coffee-hero-dashboard {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: block;
}

.coffee-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-8);
    align-items: center;
}

.coffee-badge {
    display: inline-block;
    color: var(--color-tech);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
    border: 1px solid rgba(57, 191, 200, 0.4);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}

.coffee-title {
    color: var(--color-text-light);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: var(--space-5);
}

.coffee-subtitle {
    color: var(--color-text-light);
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 680px;
    margin-bottom: var(--space-4);
}

.coffee-support {
    color: var(--color-text-light);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
    margin-bottom: var(--space-6);
}

.coffee-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.coffee-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.coffee-hero-icon {
    width: 100%;
    max-width: 220px;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Section heads — mejor jerarquía
   --------------------------------------------------------------------------- */
body.route-proyectos-cafe .section-head {
    max-width: 860px;
    margin-bottom: var(--space-7);
}

body.route-proyectos-cafe .section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
    margin-bottom: var(--space-3);
}

body.route-proyectos-cafe .section-sub {
    font-size: 1.1rem;
    line-height: 1.6;
}

body.route-proyectos-cafe .eyebrow {
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Problema
   --------------------------------------------------------------------------- */
.coffee-problema-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
}

.coffee-problema-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.5;
}

.coffee-problema-mark {
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Cadena productiva (flujo)
   --------------------------------------------------------------------------- */
.coffee-flow-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.coffee-flow-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-size: 1rem;
    color: var(--color-ink);
    font-weight: 600;
}

.coffee-flow-num {
    font-family: var(--font-code);
    font-weight: 700;
    color: var(--color-tech);
    font-size: 0.85rem;
}

.coffee-flow-arrow {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 var(--space-1);
}

/* ---------------------------------------------------------------------------
   Multifinca
   --------------------------------------------------------------------------- */
.coffee-multifinca-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.coffee-multifinca-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-multifinca-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-multifinca-title {
    color: var(--color-accent);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.coffee-multifinca-desc {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Campo y calidad
   --------------------------------------------------------------------------- */
.coffee-campo-calidad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.coffee-campo-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-campo-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-campo-title {
    color: var(--color-accent);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.coffee-campo-desc {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Catación
   --------------------------------------------------------------------------- */
.coffee-cupping-note {
    background: rgba(29, 158, 117, 0.08);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-6) var(--space-7);
    max-width: 860px;
}

.coffee-cupping-note p {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Capacidades
   --------------------------------------------------------------------------- */
.coffee-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.coffee-cap-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-cap-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-cap-title {
    color: var(--color-ink);
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
}

.coffee-cap-desc {
    color: var(--color-ink);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Beneficios
   --------------------------------------------------------------------------- */
.coffee-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.coffee-benefit-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-benefit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-benefit-title {
    color: var(--color-ink);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.coffee-benefit-desc {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------------------- */
.coffee-faq-list {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.coffee-faq-item {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-faq-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-faq-q {
    color: var(--color-ink);
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
}

.coffee-faq-a {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Trazabilidad
   --------------------------------------------------------------------------- */
.coffee-traz-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
}

.coffee-traz-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.5;
}

.coffee-traz-mark {
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Público objetivo
   --------------------------------------------------------------------------- */
.coffee-publico-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.coffee-publico-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-publico-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-publico-title {
    color: var(--color-accent);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

/* Zona A - Trazabilidad: fondo blanco, texto #444444 */
.coffee-trazabilidad .coffee-publico-desc {
    color: #444444;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Zona B - Público objetivo: tarjetas oscuras, texto var(--color-ink) */
.coffee-publico .coffee-publico-desc {
    color: var(--color-ink);
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Arquitectura técnica
   --------------------------------------------------------------------------- */
.coffee-arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.coffee-arch-card {
background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    transition: box-shadow var(--transition), transform var(--transition);
}

.coffee-arch-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.coffee-arch-title {
    color: var(--color-ink);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.coffee-arch-desc {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Estado del sistema
   --------------------------------------------------------------------------- */
.coffee-status-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.coffee-status-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.5;
}

.coffee-status-mark {
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Colaboración
   --------------------------------------------------------------------------- */
.coffee-colab-note {
    background: rgba(57, 191, 200, 0.06);
    border-left: 3px solid var(--color-tech);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-6) var(--space-7);
    max-width: 860px;
    margin-top: var(--space-6);
}

.coffee-colab-note p {
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   CTA Café
   --------------------------------------------------------------------------- */
body.route-proyectos-cafe .coffee-cta .cta-title {
    color: var(--color-text-light);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

body.route-proyectos-cafe .coffee-cta .cta-text {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Responsive Café
   --------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .coffee-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    .coffee-hero-visual {
    }

    .coffee-hero-icon {
        max-width: 180px;
    }

    .coffee-cap-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coffee-campo-calidad-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coffee-publico-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coffee-flow-list {
        gap: var(--space-3);
    }

    .coffee-flow-step {
        font-size: 0.95rem;
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-width: 1024px) {
    .coffee-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .coffee-hero-visual {
        order: -1;
    }

    .coffee-hero-icon {
        max-width: 160px;
    }

    .coffee-cap-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coffee-campo-calidad-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coffee-publico-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .coffee-multifinca-grid {
        grid-template-columns: 1fr;
    }

    .coffee-benefits-grid {
        grid-template-columns: 1fr;
    }

    .coffee-arch-grid {
        grid-template-columns: 1fr;
    }

    .coffee-flow-list {
        gap: var(--space-2);
    }

    .coffee-flow-step {
        font-size: 0.9rem;
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 768px) {
    .coffee-hero {
        padding: var(--space-6) 0;
    }

    .coffee-cap-grid {
        grid-template-columns: 1fr;
    }

    .coffee-campo-calidad-grid {
        grid-template-columns: 1fr;
    }

    .coffee-publico-grid {
        grid-template-columns: 1fr;
    }

    .coffee-flow-list {
        gap: var(--space-3);
    }

    .coffee-flow-step {
        font-size: 0.95rem;
    }
}

@media (max-width: 640px) {
    .coffee-problema-list {
        grid-template-columns: 1fr;
    }

    .coffee-traz-list {
        grid-template-columns: 1fr;
    }

    .coffee-status-list {
        grid-template-columns: 1fr;
    }

    .coffee-cap-grid {
        grid-template-columns: 1fr;
    }

    .coffee-campo-calidad-grid {
        grid-template-columns: 1fr;
    }

    .coffee-publico-grid {
        grid-template-columns: 1fr;
    }

    .coffee-flow-list {
        flex-direction: column;
        align-items: stretch;
    }

    .coffee-flow-step {
        justify-content: center;
    }

    .coffee-flow-arrow {
        transform: rotate(90deg);
        text-align: center;
        display: block;
        width: 100%;
    }

    .coffee-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .coffee-actions .btn {
        width: 100%;
    }

    .coffee-hero {
        padding: var(--space-7) 0;
    }
}

@media (max-width: 390px) {
    .coffee-title {
        font-size: 1.5rem;
    }

    .coffee-subtitle,
    .coffee-support {
        font-size: 0.95rem;
    }
}

@media (max-width: 320px) {
    .coffee-title {
        font-size: 1.6rem;
    }
}