*,
        *::before,
        *::after{
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth !important;
        }
    
        body{
            background:#f5f7f2;
            font-family:'Inter',sans-serif;
        }

        /* ===========================
        PÁGINAS DE DETALLE
        =========================== */

        main{
            background:#f5f7f2;
            min-height:500px;
            padding:60px 10%;
        }

        .detail-card{
            background:white;
            border-radius:10px;
            padding:25px;
            box-shadow:0 4px 12px rgba(0,0,0,.15);
        }

        main h1{
            font-family:'Marcellus',serif;
            color:#3B5F5A;
            font-size:42px;
            letter-spacing:2px;
            margin-bottom:40px;
        }

        .card-link,
        .card-link:hover,
        .card-link:focus,
        .card-link:visited{

            text-decoration:none;
            color:inherit;

        }
    
        /* ===========================
           HEADER
        =========================== */
    
        header{
            /* background:#3B5F5A; /* #3B5F5A | #00864b */
            background: linear-gradient(
                to bottom,
                #3B5F5A 0%,
                #3B5F5A 90%,
                #466C65 97%,
                #527A72 100%
            );
            color:#fff;
            padding:15px 30px;
        }
    
        .logo{
            width:160px;
            height:160px;
            display:flex;
            justify-content:center;
            align-items:center;
            border-radius:10px;
            overflow:hidden;
        }
    
        .logo img{
            width:100%;
            height:100%;
            object-fit:contain;
        }
    
        .title{
            flex:1;
            text-align:center;
        }
    
        .title h2{                                                                                                                                      /* */
            font-family:'Marcellus',serif; /* 'Cormorant Garamond' | 'EB Garamond' | 'Libre Baskerville' | 'Crimson Pro' | 'Lora' | 'Baskervville' | 'Marcellus' | 'Sorts Mill Goudy' | 'Alegreya' */
            color:#BACBC7; /* #BACBC7 | #1A1A1A |  |  */
            font-size:32px;
            font-weight:600;
            letter-spacing:3px;
            margin-bottom:5px;
        }
    
        .title h6{
            font-family:'Inter',sans-serif;
            color:#879692; /* #879692 | #2F3C39 */
            font-size:13px;
            font-weight:400;
            letter-spacing:2px;
        }
        
        .text-shadow-sm {                                                               /**/
            text-shadow: 1px 1px 2px #1A1A1A; /* rgba(0,0,0,.25) | #B5C6C2 | #A0B1AD | #879692 | #96A5A1 | #91A09C | #8C9B97 | #BACBC7 | #1A1A1A */
        }
        
        .text-shadow {
            text-shadow: 2px 2px 4px #777;
        }
        
        .text-shadow-lg {
            text-shadow: 3px 3px 8px rgba(0,0,0,.45);
        }
        
        .text-shadow-none {
            text-shadow: none;
        }
    
        .header-badge{
            background:#355652;
            border:1px solid #456D67;
            padding:12px 20px;
            border-radius:10px;
            text-align:center;
            
        }
        
        .header-badge:hover {
            background: linear-gradient(
                to bottom,
                #304E4A 0%,
                #2B4743 85%,
                #26403D 95%,
                #213936 100%
            );
            transition:background .3s ease;
        }
        
        .comollegar{
            display:block;
            text-decoration:none;
            color:inherit;
            cursor:pointer;
        }
    
        .comollegar p{
            color:#AEBBB7;
            font-size:13px;
            font-weight:400;
            letter-spacing:.5px;
            margin-bottom:15px;
            line-height:1.3;
        }
    
        .comollegar b{
            color:#8F9D99;
            font-size:12px;
            font-weight:500;
            letter-spacing:1.2px;
            text-transform:uppercase;
            transition:color .3s ease;
        }
    
        .comollegar:hover b{
            color:#f8f9fA;
        }
    
        /* ===========================
           NAVBAR
        =========================== */
    
        nav{
            background:#527A72;
            padding:15px 0;
        }
    
        nav ul{
            list-style:none;
            padding:0;
            margin:0;
        }
    
        nav li{
            display:inline-flex;
            align-items:center;
        }
    
        nav li>*{
            letter-spacing:1.1px;
        }
    
        nav button{
            background:none;
            border:none;
            padding:0;
            cursor:pointer;
            font-size:16px;
            font-weight:400;
            transition:color .3s ease;
        }
    
        nav button:hover{
            color:#9edb9f;
        }
    
        .navbar-toggler{
            border:1px solid rgba(26,26,26,.3);
        }
    
        .navbar-toggler-icon{
            filter:brightness(.3);
        }
    
        .nav-link{
            color:#BACBC7 !important;
            font-size:16px;
            font-weight:400;
            letter-spacing:1.1px;
            background:none;
            border:none;
            transition:.3s ease;
            text-decoration:none;
        }
    
        .nav-link:hover,
        .nav-link.activo{
            color:#1A1A1A !important;
        }
    
        /* ===========================
           HERO
        =========================== */
    
        .hero{
            height:500px;
            background:url("https://images.unsplash.com/photo-1466692476868-aef1dfb1e735") center/cover;
            display:flex;
            justify-content:center;
            align-items:center;
        }
    
        .hero h1{
            background:rgba(0,0,0,.55);
            color:#fff;
            padding:20px 35px;
            border-radius:10px;
        }

        /* ===========================
        HERO PÁGINAS DETALLE
        =========================== */

        .hero-detalle{
            height:320px;
            display:flex;
            justify-content:center;
            align-items:center;
            background:
                linear-gradient(
                    rgba(59,95,90,.75),
                    rgba(59,95,90,.75)
                ),
                url("/img/plantas_hero2.png")
                center/cover;
            text-align:center;
            color:white;
        }

        .arbustos-hero{

            background:
                linear-gradient(
                    rgba(59,95,90,.75),
                    rgba(59,95,90,.75)
                ),
                url("/img/arbusto_hero1.jpg")
                center/cover;

        }

        .productos-hero{

            background:
                linear-gradient(
                    rgba(59,95,90,.75),
                    rgba(59,95,90,.75)
                ),
                url("/img/productos_hero1.jpg")
                center/cover;

        }


        .hero-detalle-contenido{
            max-width:800px;
            padding:30px;
        }


        .hero-detalle h1{
            font-family:'Marcellus',serif;
            font-size:48px;
            letter-spacing:3px;
            color:#BACBC7;
            text-shadow:
                2px 2px 4px #1A1A1A;
            margin-bottom:20px;
        }


        .hero-detalle p{
            font-family:'Inter',sans-serif;
            font-size:18px;
            line-height:1.7;
            color:#f5f7f2;
        }
    
        /* ===========================
           SECCIONES
        =========================== */
    
        section{
            padding:60px 10%;
        }
    
        .cards{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:25px;
            align-items:stretch;
        }

        .card-link {
            display:block;
            height:100%;   
        }
    
        .card img{
            width:100%;
            height:220px;
            object-fit:cover;
        }
    
        .card h3{
            padding:15px;
        }
    
        .card p{
            padding:0 15px 20px;
        }

        /* ===========================
           EFECTO HOVER EN TARJETAS INDEX
        =========================== */

        .card{
            display:flex;
            flex-direction:column;
            height:100%;
            background:#fff;
            overflow:hidden;
            transition:
                background-color .35s ease,
                transform .35s ease,
                box-shadow .35s ease;
        }

        .card img{
            width:100%;
            height:220px;
            object-fit:cover;
            transition:
                filter .35s ease,
                transform .35s ease;
        }

        .card:hover{
            background:#F2F5EC;             /* #F6F8F2 | #F2F5EC | #EEF4E8 | #EAF2E3 */
            transform:translateY(-3px);     /* Se eleva ligeramente */
            box-shadow:0 12px 28px rgba(0,0,0,.15);
        }

        .card:hover img{
            filter:
                brightness(1.08)
                contrast(1.05)
                saturate(1.08);
            transform:scale(1.02);
        }
    
        /* ===========================
           COMO LLEGAR
        =========================== */
    
        #como_llegar{
            background:#879692; /* #879692 | #e8e3db |  */
            border-top:1px solid #d7d0c6;
        }
    
        .p-maps p{
            font-size:.8rem;
        }
        
        .img-shadow {
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
        }
        
        .centrar {
            display: table-cell;
            vertical-align: middle;
        }
    
        /* ===========================
           CONSEJOS
        =========================== */
    
        #consejos{
            background:#ece8d8;
            border-top:1px solid #d8d2bd;
            border-bottom:1px solid #d8d2bd;
        }
    
        /* ===========================
           CONTACTO
        =========================== */
    
        .contact{
            background:#6F8580; /* #6F8580 | #657B76 | #5E736E | #718984 | #596E69 | #526762 */
        }
    
        form{
            max-width:700px;
            margin:auto;
        }
        
        .btn-outline-mint {
            color: #DCEAE7;
            border-color: #DCEAE7;
        }
        
        .btn-outline-mint:hover {
            color: #3B5F5A;
            background-color: #DCEAE7;
            border-color: #DCEAE7;
        }
    
        /* ===========================
           FOOTER
        =========================== */
    
        footer{
            background:#3B5F5A;
            color:#94A49F;
            text-align:center;
            padding:25px;
        }
    
        .instagram-link{
            text-decoration:none;
            color:inherit;
        }
    
        /* ===========================
           MEDIA QUERIES
        =========================== */
    
        /* Escritorio (navbar expandida) */
        @media (min-width:992px){
    
            .navbar-nav .nav-item:not(:last-child)::after{
                content:"|";
                color:#1A1A1A;
                margin:0 25px;
            }
    
        }
    
        /* Tablet y móvil (navbar colapsada) */
        @media (max-width:991.98px){
    
            .navbar-collapse{
                text-align:center;
                padding-top:15px;
            }
    
            .navbar-nav .nav-item{
                padding:8px 0;
            }
    
            .navbar-nav .nav-item::after{
                content:none;
            }
    
            .my-header{
                display:flex;
                flex-direction:column;
                justify-content:center;
                margin:0 auto;
            }
    
            .header-top{
                flex-direction:column;
                gap:15px;
            }
    
            .title{
                text-align:center;
            }
    
        }