/* --- Tipografía y Variables --- */
         body {
             font-family: 'Montserrat', sans-serif;
             margin: 0;
             padding: 0;
             color: white;
             background-color: #0d83c9;
             /* Fondo base (azul del footer) */
         }

         :root {
             --gli-blue: #0d83c9;
             --gli-cyan: #00d4ff;
             --gli-cyan-border: #42d1e0;
             --gli-dark-blue: #002236;

             /* Colores específicos de la sección de café */
             --coffee-green: #8ab64e;
             --coffee-yellow: #ffb800;
             --coffee-brown: #a67b27;
             --coffee-dark: #3e2610;
             --coffee-teal: #009ca6;

             /* Colores para el fondo dividido de especificaciones */
             --specs-left: #949c5e;
             --specs-right: #b2b681;
         }
     
     
     
     /* --- SECCIÓN PRINCIPAL (Fondo completo) --- */
        .coffee-main-bg {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.4) 100%);
            /* url('https://via.placeholder.com/1920x1200/225511/ffffff?text=Paisaje+Finca+Cafetera') no-repeat center center; */
            background-image: url('../img/bg_coffee.jpg')  ; 
            background-repeat: no-repeat;
            background-size: cover;
            padding: 60px 0 80px 0;
            text-align: center;
            position: relative;
        }

        /* Títulos Hero */
        .hero-title-top {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1;
            margin-bottom: 0;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }

        .hero-title-main {
            font-size: 6rem;
            font-weight: 900;
            line-height: 0.9;
            margin-bottom: 20px;
            text-shadow: 3px 4px 10px rgba(0, 0, 0, 0.7);
        }

        .hero-subtitle {
            font-size: 1rem;
            font-weight: bold;
            max-width: 600px;
            margin: 0 auto 40px auto;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
        }

        .hero-tagline {
            font-size: 1.5rem;
            font-weight: 900;
            margin-bottom: 10px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
        }

        .hero-desc {
            font-size: 0.9rem;
            font-weight: bold;
            max-width: 650px;
            margin: 0 auto 30px auto;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
        }

        /* Píldoras (Badges) */
        .pills-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }

        .coffee-pill {
            border: 2px solid var(--gli-cyan);
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 0.9rem;
            font-weight: bold;
            background-color: rgba(0, 34, 54, 0.6);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* Título Presentaciones */
        .presentations-title {
            font-size: 2.2rem;
            font-weight: 900;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
            margin-bottom: 40px;
            text-transform: uppercase;
        }

        /* --- GRID DE PRESENTACIONES & LEYENDA --- */
        .presentations-wrapper {
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
        }

        .legend-box {
            text-align: left;
            margin-bottom: 30px;
        }

        @media (min-width: 992px) {
            .legend-box {
                /* position: absolute;
                left: 0;
                top: 50%; */
                padding-right: 30px;
                transform: translateY(-50%);
                margin-bottom: 0;
            }
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-weight: bold;
            font-size: 0.9rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        }

        .legend-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
            row-gap: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

        .circle-green {
            background-color: var(--coffee-green);
        }

        .circle-yellow {
            background-color: var(--coffee-yellow);
        }

        .circle-brown {
            background-color: var(--coffee-brown);
        }

        /* Tarjetas de Producto */
        .coffee-card {
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border: none;
            width: 100%;
            max-width: 180px;
            margin: 0 auto;
        }

        .coffee-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
        }

        .card-top {
            background-color: #ffffff;
            margin: 3px 3px 0 3px;
            border-radius: 12px 12px 6px 6px;
            padding: 30px 10px;
            text-align: center;
            flex-grow: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-top img {
            max-height: 80px;
            object-fit: contain;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .coffee-card:hover .card-top img {
            transform: scale(1.15);
        }

        .card-bottom {
            padding: 12px 15px;
            color: white;
            border-radius: 0 0 15px 15px;
            font-weight: 900;
            font-size: 0.75rem;
        }

        .bg-card-green {
            background-color: var(--coffee-green);
        }

        .bg-card-yellow {
            background-color: var(--coffee-yellow);
        }

        .bg-card-brown {
            background-color: var(--coffee-brown);
        }

        .cards-container {
            max-width: 850px;
            margin: 0 auto;
        }

        /* --- SECCIÓN DE ESPECIFICACIONES (Fondo Dividido) --- */
        .specs-section {
            /* Gradiente que divide la pantalla al 50% */
            background: linear-gradient(to right, var(--specs-left) 50%, var(--specs-right) 50%);
            padding: 80px 0;
            color: white;
        }

        /* Clases para dar espaciado desde el centro */
        .specs-content-left {
            padding-right: 50px;
        }

        .specs-content-right {
            padding-left: 5% !important;
        }

        @media (max-width: 768px) {

            /* Comportamiento para dispositivos móviles (apilado) */
            .specs-section {
                background: var(--specs-left);
                padding: 40px 0;
            }

            .specs-content-left {
                padding-right: 15px;
                padding-left: 15px;
            }

            .specs-content-right {
                background: var(--specs-right);
                padding: 40px 15px;
                margin-top: 40px;
            }
        }

        .specs-title {
            font-size: 1.4rem;
            font-weight: 900;
            margin-bottom: 25px;
        }

        .specs-list {
            list-style: none;
            padding-left: 0;
        }

        .specs-list li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 18px;
            font-weight: bold;
            font-size: 0.9rem;
            line-height: 1.3;
        }

        .specs-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            font-size: 1.2rem;
            line-height: 1;
            top: -2px;
        }

        /* --- SECCIÓN CONTACTO / FOOTER (Fondo Marrón Oscuro) --- */
        .contact-section {
            /* background-color: var(--coffee-dark); */
            background-image: url(../img/bg_coffee_contact.png);
            background-repeat: no-repeat;
            background-size: cover;
             /* z-index: 10; */
            bottom: 55px;
            height: 420px;
            padding: 140px 0 40px 0;
            position: relative;
        }

        /* Borde superior irregular (simulando tierra) */
        .rough-edge {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            height: 35px;
            /* background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 40" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 L0,20 Q15,0 30,15 T60,5 T90,20 T120,5 T150,25 T180,10 T210,20 T240,5 T270,15 T300,5 T330,25 T360,10 T390,25 T420,5 T450,20 T480,5 T510,15 T540,5 T570,25 T600,10 T630,20 T660,5 T690,15 T720,5 T750,25 T780,10 T810,25 T840,5 T870,20 T900,5 T930,15 T960,5 T990,25 T1020,10 T1050,20 T1080,5 T1110,15 T1140,5 T1170,25 L1200,10 L1200,40 Z" fill="%233e2610" /></svg>') no-repeat bottom; */
            background-size: cover;
            z-index: 5;
        }

        .contact-title {
            font-size: 1.8rem;
            font-weight: 900;
            margin-bottom: 10px;
        }

        .contact-subtitle {
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .btn-teal {
            background-color: var(--coffee-teal) !important;
            color: white !important;
            border: none !important;
            border-radius: 20px !important;
            padding: 10px 30px !important;
            font-weight: bold !important;
            font-size: 0.9rem !important;
            text-transform: uppercase !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
        }

        .btn-teal:hover {
            background-color: #007c85 !important;
            color: white !important;
            transform: scale(1.05) !important;
        }

        /* Footer Inferior */
        .footer-blue-bar {
            background-color: var(--gli-blue);
            padding: 15px 0 !important;
            text-align: center !important;
        }

        .footer-bottom {
            font-size: 0.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-logo {
            color: white;
            font-size: 1rem;
            padding: 2px 8px;
            border-radius: 2px;
            margin-right: 10px;
        }


        @media (max-width:480px) {

            .hero-title-main{
                font-size:4rem ;
                text-align: center;
            }

            .hero-title-top{
                font-size: 3rem;
                text-align: center;
            }
                .specs-title{
                    text-align: center;
                }

            .specs-section{
                margin: auto;
                display: grid;
                text-align: start;
            }

           
        }