/* --- Tipografía y Variables --- */
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #008cc9;
            /* Fondo inferior base */
            margin: 0;
            padding: 0;
            color: white;
        }

        :root {
            --cyan: #00d2ff;
            --dark-blue: #0f4b7a;
            --mango-color: #f7a400;
            --soursop-color: #79a83d;
            --banana-color: #f4b900;
            --berry-color: #810303;
            --guava-color: #dcb324;
            --format-yellow: #f8c543;
            --format-green: #90be5c;
            --footer-bg: #008cc9;
            /* Nuevos colores para la sección dividida */
            --split-left: #00cdf2;
            --split-right: #0d8ecf;
        }

    
       

        /* --- SECCIÓN HERO & PRODUCTOS --- */
        .hero-section {
            /* Simulación del fondo con personas y tinte verdoso */
            /* background: linear-gradient(rgba(108, 143, 90, 0.8), rgba(162, 189, 87, 0.7)), url('https://via.placeholder.com/1920x1080/4caf50/ffffff?text=Fondo+Familia') no-repeat center center; */
            background-image: url(../img/bg_family.png);
            background-size: cover;
            padding: 60px 0 80px 0;
            text-align: center;
            /* position: relative;
            opacity: 0.5;
            z-index: 1; */
        }

        .hero-title {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1.1;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
            margin-bottom: 15px;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            font-weight: bold;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 40px;
        }

        /* Flechas del carrusel */
        .nav-arrow {
            width: 50px;
            height: 50px;
            background-color: #0d83c9;
            border: 3px solid white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease;
            flex-shrink: 0;
            z-index: 10;
        }

        .nav-arrow:hover {
            transform: scale(1.1);
        }

        /* Contenedor del Carrusel Deslizable */
        .carousel-container {
            max-width: 900px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 25px 0;
            margin: -25px 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%);
        }

        .carousel-container::-webkit-scrollbar {
            display: none;
        }

        .carousel-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Tarjetas (Frutas y Formatos) */
        .custom-card {
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border: none;
        }

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

        .card-top {
            background-color: #ffffff;
            margin: 4px 4px 0 4px;
            border-radius: 17px 17px 8px 8px;
            padding: 20px;
            text-align: center;
            /* flex-grow: 1; */
            overflow: hidden;
        }

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

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

        .card-bottom {
            padding: 15px;
            color: white;
            border-radius: 0 0 20px 20px;
        }

        .card-badge {
            display: inline-block;
            border: 1px solid white;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 0.65rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-right: 5px;
            margin-bottom: 8px;
        }

        .card-bottom h5 {
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .card-bottom p {
            font-size: 0.75rem;
            margin-bottom: 0;
            line-height: 1.2;
        }

        .bg-mango {
            background-color: var(--mango-color);
        }

        .bg-soursop {
            background-color: var(--soursop-color);
        }

        .bg-banana {
            background-color: var(--banana-color);
        }

        .bg-berry {
            background-color: var(--berry-color);
        }

        .bg-berry .card-badge {
            background-color: #3b0000;
            border-color: #3b0000;
        }

        .bg-guava {
            background-color: var(--guava-color);
        }

        .bg-guava .card-badge {
            background-color: #bf8f00;
            border-color: #bf8f00;
        }

        .bg-format-y {
            background-color: var(--format-yellow);
        }

        .bg-format-g {
            background-color: var(--format-green);
        }

        .formats-title {
            background-color: rgba(0, 0, 0, 0.4);
            border: 3px solid #00b4df;
            border-radius: 30px;
            display: inline-block;
            padding: 10px 40px;
            font-size: 1.8rem;
            font-weight: 900;
            margin: 50px 0 30px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* --- SECCIÓN PROCESS & PRESENTATION --- */
        .process-section {
            /* FONDO DIVIDIDO 50/50 */
            background: linear-gradient(to right, var(--split-left) 50%, var(--split-right) 50%);
            padding: 60px 0;
            position: relative;
        }

        /* Contenedor interior para manejar padding en móvil/desktop */
        .process-content-left {
            padding-right: 40px;
        }

        .process-content-right {
            padding-left: 40px !important;
        }

        @media (max-width: 768px) {

            /* En móvil, el fondo será sólido para que no se vea extraño si se apilan */
            .process-section {
                background: var(--split-left);
            }

            .process-content-right {
                /* background: var(--split-right);
                padding: 40px 15px;*/
             /* margin-top: 30px;  */
             padding-right: 10% !important;
             padding-bottom: 20px;
            }

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

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

        .process-subtitle {
            font-size: 0.95rem;
            font-weight: bold;
            margin-bottom: 40px;
        }

        .process-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }

        .process-number {
            background-color: #007fb9;
            color: white;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .process-text h6 {
            font-weight: bold;
            margin-bottom: 2px;
            font-size: 1.2rem;
        }

        .process-text p {
            font-size: 0.9rem;
            margin-bottom: 0;
            font-weight: bold;
            opacity: 0.9;
        }

        .presentation-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }

        /* Modificado: Borde cyan, sin fondo */
        .presentation-pill {
            border: 2px solid var(--split-left);
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 0.9rem;
            font-weight: bold;
            background-color: transparent;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Modificado: Botón con borde cyan */
        .btn-outline-custom {
            border: 2px solid var(--split-left) !important;
            color: white !important;
            border-radius: 20px !important;
            padding: 8px 25px !important;
            font-weight: bold !important;
            font-size: 0.9rem !important;
            background-color: transparent !important;
            transition: all 0.3s ease !important;
        }

        .btn-outline-custom:hover {
            background-color: var(--split-left) !important;
            color: white !important;
        }

        /* --- SECCIÓN CONTACTO / FOOTER --- */
        .contact-section {
            background-color: var(--footer-bg);
            padding: 60px 0 40px 0;
            position: relative;
        }

        /* Ajuste sutil a la ola decorativa para que haga match con el lado derecho */
        .wave-transition {
            position: absolute;
            top: -40px;
            left: 0;
            width: 100%;
            height: 45px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg"><path fill="%230d8ecf" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path></svg>') no-repeat top;
            background-size: cover;
            z-index: 5;
        }

        .form-label {
            font-weight: bold !important;
            font-size: 0.85rem !important;
            text-transform: uppercase !important;
            margin-bottom: 5px !important;
        }

        .form-control {
            border-radius: 25px !important;
            border: none !important;
            padding: 12px 20px !important;
            margin-bottom: 20px !important;
            font-size: 0.9rem !important;
        }

        textarea.form-control {
            border-radius: 15px;
        }

        .footer-bottom {
            margin-top: 40px !important;
            font-size: 0.8rem !important;
            font-weight: bold !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }


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


        @media (max-width:480px) {

        .hero-title {
            font-size: 3rem;
            margin: auto;
        }


        .presentation-grid{
           margin-left: 20%;
        }
    

        .form-label{
            /* text-align: center;
            margin: auto; */
            position: relative;
            display:grid;
            text-align: center;
            margin: auto;
        }
                

        .btn-outline-custom{
            display: grid !important;
            text-align: center;
            position: relative;
            margin: auto;
        }

        .process-title{
            text-align: center;
            margin-top: 20px;
                }
        .process-subtitle{
            text-align: center;
        }
        .process-content-left{
            margin-left: 3%;
        }
           .process-content-right {
               background: var(--split-right);
               margin: auto !important;
               text-align: center;
               /* margin-left:calc(var(--bs-gutter-x) * .8) !important; */
               /* margin-right: calc(var(--bs-gutter-x) * .8) !important; */
           }
   
        .catalog{
            display:grid;
            position: relative;
            text-align: center !important;
            margin: auto;
        }
        
   
        }