:root {
     --hv-green-dark: #0d4a2f;
     --hv-green: #1a7a4a;
     --hv-green-light: #2dbe6c;
     --hv-teal: #0b8b76;
     --hv-blue: #0a5c8c;
     --hv-blue-light: #1a9fd4;
     --hv-cyan: #00c8d7;
     --hv-grad: linear-gradient(135deg, #0d4a2f 0%, #0a5c8c 100%);
     --hv-grad-card: linear-gradient(145deg, #1a7a4a22, #0a5c8c22);
     --font-display: 'Playfair Display', Georgia, serif;
     --font-body: 'DM Sans', sans-serif;
     --font-green-dark: #0d4a2f;
     --bg-light: #f5f5f7;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     overflow-x: hidden;
 }

 /* ── LIGHT/DARK overrides ── */
 [data-bs-theme="light"] {
     --bg-hero: #f0faf4;
     --card-bg: #ffffff;
     --section-alt: #f4fbf6;
     --text-muted-custom: #5a7066;
 }

 [data-bs-theme="dark"] {
     --bg-hero: #091f14;
     --card-bg: #102a1e;
     --section-alt: #0d2318;
     --text-muted-custom: #7fb89a;
     --font-green-dark: rgb(0, 167, 92);
     --bg-light: var(--bs-body-bg);
 }

 [data-bs-theme="dark"] .bg-white {
     background-color: var(--hv-green-dark) !important;
 }


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


 a {
     color: var(--font-green-dark);
 }

 a:hover {
     color: var(--text-muted-custom);
 }


 /* ── NAVBAR ── */
 .navbar-brand-logo {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 900;
 }

 .navbar-brand-logo span {
     color: var(--hv-green-light);
 }

 .navbar {
     backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(45, 190, 108, .15);
 }

 [data-bs-theme="light"] .navbar {
     background: rgba(255, 255, 255, .88) !important;
 }

 [data-bs-theme="dark"] .navbar {
     background: rgba(9, 31, 20, .88) !important;
 }

 .nav-link {
     font-weight: 500;
     transition: color .2s;
 }

 .nav-link:hover {
     color: var(--hv-green-light) !important;
 }

 .btn-outline-brand {
     border: 1.5px solid var(--hv-green-light);
     color: var(--hv-green-light);
     border-radius: 50px;
     padding: .35rem 1.2rem;
     font-weight: 600;
     transition: all .25s;
 }

 .btn-outline-brand:hover {
     background: var(--hv-green-light);
     color: #fff;
 }

 /* ── NAVBAR MOBILE: logo centrado ── */
 @media (max-width: 991.98px) {
     .navbar>.container {
         position: relative;
         justify-content: center;
     }

     .navbar-brand {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }

     .nav-mobile-left {
         position: absolute;
         left: 0;
     }

     .nav-mobile-right {
         position: absolute;
         right: 0;
     }
 }

 /* ── BOTONES ICONO NAVBAR ── */
 .btn-nav-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     border: none;
     background: transparent;
     color: inherit;
     transition: background .2s, color .2s;
     position: relative;
 }

 .btn-nav-icon:hover {
     background: rgba(45, 190, 108, .12);
     color: var(--hv-green-light);
 }

 .btn-nav-icon .cart-dot {
     position: absolute;
     top: 4px;
     right: 4px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #e8553e;
     color: #fff;
     font-size: .6rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ── OFFCANVAS MENÚ ── */
 .offcanvas-menu {
     width: 290px !important;
 }

 [data-bs-theme="light"] .offcanvas-menu {
     background: #f8fdf9 !important;
 }

 [data-bs-theme="dark"] .offcanvas-menu {
     background: #0d1f16 !important;
 }

 .offcanvas-nav-link {
     display: flex;
     align-items: center;
     gap: .85rem;
     padding: .85rem 1.25rem;
     border-radius: 14px;
     font-weight: 600;
     font-size: .97rem;
     text-decoration: none;
     color: inherit;
     transition: background .2s, color .2s;
     margin-bottom: .2rem;
 }

 .offcanvas-nav-link:hover,
 .offcanvas-nav-link.active {
     background: rgba(45, 190, 108, .12);
     color: var(--hv-green-light);
 }

 .offcanvas-nav-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     flex-shrink: 0;
     background: var(--hv-grad);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
 }

 .offcanvas-divider {
     height: 1px;
     background: rgba(45, 190, 108, .15);
     margin: .75rem 0;
 }

 /* ── OFFCANVAS CARRITO ── */
 .offcanvas-cart {
     width: 360px !important;
 }

 @media (max-width: 480px) {
     .offcanvas-cart {
         width: 100vw !important;
     }
 }

 [data-bs-theme="light"] .offcanvas-cart {
     background: #f8fdf9 !important;
 }

 [data-bs-theme="dark"] .offcanvas-cart {
     background: #0d1f16 !important;
 }

 .cart-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     padding: 1rem;
     border-radius: 16px;
     background: var(--card-bg);
     border: 1px solid rgba(45, 190, 108, .1);
     margin-bottom: .75rem;
 }

 .cart-item-img {
     width: 64px;
     height: 64px;
     border-radius: 10px;
     flex-shrink: 0;
     background: linear-gradient(145deg, #1a7a4a22, #0a5c8c22);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
 }

 .cart-item-name {
     font-weight: 700;
     font-size: .88rem;
     line-height: 1.3;
 }

 .cart-item-cat {
     font-size: .73rem;
     color: var(--hv-green-light);
     font-weight: 600;
 }

 .cart-item-price {
     font-family: var(--font-display);
     font-weight: 900;
     color: var(--hv-green-light);
     font-size: 1.1rem;
 }

 .cart-qty-btn {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: none;
     background: rgba(45, 190, 108, .12);
     color: var(--hv-green-light);
     font-weight: 700;
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .15s;
 }

 .cart-qty-btn:hover {
     background: var(--hv-green-light);
     color: #fff;
 }

 .cart-qty-val {
     font-weight: 700;
     font-size: .9rem;
     min-width: 20px;
     text-align: center;
 }

 .cart-remove {
     background: none;
     border: none;
     color: #e8553e;
     font-size: 1rem;
     cursor: pointer;
     padding: 0;
 }

 .cart-summary-row {
     display: flex;
     justify-content: space-between;
     font-size: .9rem;
     padding: .3rem 0;
 }

 .cart-summary-row.total {
     font-weight: 800;
     font-size: 1.1rem;
     border-top: 1px solid rgba(45, 190, 108, .15);
     padding-top: .75rem;
     margin-top: .25rem;
 }

 .btn-checkout {
     width: 100%;
     background: var(--hv-grad);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: .85rem;
     font-weight: 700;
     font-size: 1rem;
     box-shadow: 0 6px 24px rgba(26, 122, 74, .3);
     transition: opacity .2s, transform .2s;
 }

 .btn-checkout:hover {
     opacity: .9;
     transform: translateY(-1px);
 }

 /* ── HERO ── */
 .hero-section {
     padding: 5rem 0;
     background: var(--bg-hero);
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
 }

 .hero-bg-shape {
     position: absolute;
     inset: 0;
     z-index: 0;
     background:
         radial-gradient(ellipse 70% 60% at 80% 50%, rgba(26, 122, 74, .15) 0%, transparent 70%),
         radial-gradient(ellipse 40% 40% at 10% 80%, rgba(10, 92, 140, .12) 0%, transparent 60%);
 }

 [data-bs-theme="dark"] .hero-bg-shape {
     background:
         radial-gradient(ellipse 70% 60% at 80% 50%, rgba(26, 122, 74, .25) 0%, transparent 70%),
         radial-gradient(ellipse 40% 40% at 10% 80%, rgba(10, 92, 140, .2) 0%, transparent 60%);
 }

 .hero-leaf-pattern {
     position: absolute;
     right: -80px;
     top: 50%;
     transform: translateY(-50%);
     width: 55%;
     opacity: .08;
     font-size: 28rem;
     line-height: 1;
     pointer-events: none;
     z-index: 0;
 }

 [data-bs-theme="dark"] .hero-leaf-pattern {
     opacity: .05;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: rgba(45, 190, 108, .12);
     border: 1px solid rgba(45, 190, 108, .3);
     color: var(--hv-green-light);
     border-radius: 50px;
     padding: .35rem 1rem;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: .06em;
     text-transform: uppercase;
 }

 .hero-title {
     font-family: var(--font-display);
     font-size: clamp(2.4rem, 6vw, 3.8rem);
     font-weight: 900;
     line-height: 1.08;
 }

 .hero-title .accent {
     color: var(--hv-green-light);
 }

 .hero-subtitle {
     font-size: 1.15rem;
     max-width: 480px;
     line-height: 1.7;
 }

 .btn-hero-primary {
     background: var(--hv-grad);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: .75rem 2rem;
     font-weight: 600;
     font-size: 1rem;
     box-shadow: 0 8px 28px rgba(26, 122, 74, .35);
     transition: transform .2s, box-shadow .2s;
 }

 .btn-hero-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 36px rgba(26, 122, 74, .45);
     color: #fff;
 }

 .hero-stats {
     gap: 2rem;
 }

 .hero-stat-num {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 900;
     color: var(--hv-green-light);
 }

 .hero-stat-label {
     font-size: .82rem;
     font-weight: 500;
     opacity: .7;
 }

 /* floating plant card */
 .hero-plant-card {
     background: var(--card-bg);
     border-radius: 24px;
     padding: 1.5rem;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
     max-width: 320px;
     position: relative;
     z-index: 1;
 }

 .hero-plant-img {
     width: 100%;
     border-radius: 16px;
     aspect-ratio: 4/3;
     object-fit: cover;
     background: linear-gradient(145deg, #1a7a4a33, #0a5c8c33);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 5rem;
 }

 .hero-plant-tag {
     position: absolute;
     top: 1.8rem;
     right: 1.8rem;
     background: var(--hv-green-light);
     color: #fff;
     border-radius: 50px;
     padding: .25rem .75rem;
     font-size: .75rem;
     font-weight: 700;
 }

 /* ── TICKER / PROVEEDORES ── */
 .ticker-wrapper {
     background: var(--hv-grad);
     padding: .7rem 0;
     overflow: hidden;
 }

 .ticker-track {
     display: flex;
     gap: 3rem;
     white-space: nowrap;
     animation: ticker-scroll 28s linear infinite;
 }

 .ticker-track:hover {
     animation-play-state: paused;
 }

 .ticker-item {
     display: flex;
     align-items: center;
     gap: .6rem;
     color: rgba(255, 255, 255, .85);
     font-weight: 600;
     font-size: .9rem;
     flex-shrink: 0;
 }

 .ticker-dot {
     width: 6px;
     height: 6px;
     background: var(--hv-cyan);
     border-radius: 50%;
 }

 @keyframes ticker-scroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* ── SECTION COMMON ── */
 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     color: var(--hv-green-light);
     font-weight: 700;
     font-size: .78rem;
     letter-spacing: .1em;
     text-transform: uppercase;
 }

 .section-title {
     font-family: var(--font-display);
     font-size: clamp(1.8rem, 4vw, 2.8rem);
     font-weight: 900;
 }

 .section-divider {
     width: 56px;
     height: 4px;
     background: var(--hv-grad);
     border-radius: 4px;
 }

 /* ── CATEGORÍAS ── */
 .cat-card {
     border-radius: 20px;
     background: var(--card-bg);
     border: 1px solid rgba(26, 122, 74, .12);
     padding: 2rem 1.5rem;
     text-align: center;
     cursor: pointer;
     transition: transform .25s, box-shadow .25s, border-color .25s;
 }

 .cat-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 48px rgba(26, 122, 74, .18);
     border-color: var(--hv-green-light);
 }

 .cat-icon {
     width: 72px;
     height: 72px;
     border-radius: 20px;
     background: linear-gradient(145deg, var(--hv-green-dark), var(--hv-blue));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     margin: 0 auto 1rem;
     color: #fff;
 }

 .cat-name {
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: .25rem;
 }

 .cat-count {
     font-size: .8rem;
     color: var(--text-muted-custom);
 }

 /* ── PRODUCTOS ── */
 .product-card {
     border-radius: 20px;
     background: var(--card-bg);
     border: 1px solid rgba(26, 122, 74, .1);
     overflow: hidden;
     transition: transform .25s, box-shadow .25s;
     height: 100%;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 48px rgba(10, 92, 140, .15);
 }

 .product-img-wrap {
     aspect-ratio: 4/3;
     background: linear-gradient(145deg, #1a7a4a22, #0a5c8c22);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3.5rem;
     position: relative;
     overflow: hidden;
 }

 .product-badge-new {
     position: absolute;
     top: .75rem;
     left: .75rem;
     background: var(--hv-blue-light);
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     border-radius: 50px;
     padding: .2rem .6rem;
 }

 .product-badge-hot {
     position: absolute;
     top: .75rem;
     background: #e8553e;
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     border-radius: 50px;
     padding: .2rem .6rem;
 }

 .product-badge-sale {
     position: absolute;
     top: .75rem;
     right: .75rem;
     background: var(--hv-green-light);
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     border-radius: 50px;
     padding: .2rem .6rem;
 }

 .product-body {
     padding: 1.25rem;
 }

 .product-category {
     font-size: .75rem;
     color: var(--hv-green-light);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .06em;
 }

 .product-name {
     font-weight: 700;
     font-size: 1rem;
     margin: .25rem 0 .5rem;
     line-height: 1.3;
 }

 .product-desc {
     font-size: .82rem;
     opacity: .7;
     margin-bottom: .75rem;
 }

 .product-stars {
     color: #f5a623;
     font-size: .85rem;
 }

 .product-price-old {
     text-decoration: line-through;
     opacity: .5;
     font-size: .85rem;
 }

 .product-price {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 900;
     color: var(--hv-green-light);
 }

 .btn-add-cart {
     background: var(--hv-grad);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: .45rem 1.2rem;
     font-size: .85rem;
     font-weight: 600;
     transition: opacity .2s, transform .2s;
 }

 .btn-add-cart:hover {
     opacity: .9;
     transform: scale(1.03);
     color: #fff;
 }

 .btn-wishlist {
     border: 1.5px solid rgba(26, 122, 74, .25);
     color: var(--hv-green-light);
     background: transparent;
     border-radius: 50px;
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .2s;
 }

 .btn-wishlist:hover {
     background: var(--hv-green-light);
     color: #fff;
     border-color: var(--hv-green-light);
 }

 /* ── MÁS VENDIDOS HIGHLIGHT ── */
 .bestseller-wrap {
     background: var(--section-alt);
 }

 .bestseller-badge {
     background: linear-gradient(90deg, #f5a623, #e8553e);
     color: #fff;
     border-radius: 50px;
     padding: .2rem .8rem;
     font-size: .7rem;
     font-weight: 700;
 }

 /* ── FEATURES ── */
 .feature-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
 }

 .feature-icon-wrap {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     flex-shrink: 0;
     background: linear-gradient(145deg, var(--hv-green-dark), var(--hv-blue));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.3rem;
 }

 .feature-title {
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: .2rem;
 }

 .feature-desc {
     font-size: .85rem;
     opacity: .7;
     line-height: 1.6;
 }

 /* ── TESTIMONIOS ── */
 .testimonial-card {
     border-radius: 20px;
     background: var(--card-bg);
     border: 1px solid rgba(26, 122, 74, .1);
     padding: 1.75rem;
     height: 100%;
     position: relative;
 }

 .testimonial-quote {
     font-size: 3rem;
     line-height: .8;
     color: var(--hv-green-light);
     font-family: Georgia, serif;
     opacity: .4;
 }

 .testimonial-text {
     font-size: .92rem;
     line-height: 1.7;
     opacity: .85;
 }

 .testimonial-avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: var(--hv-grad);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 700;
     font-size: 1.1rem;
 }

 .testimonial-name {
     font-weight: 700;
     font-size: .92rem;
 }

 .testimonial-role {
     font-size: .78rem;
     color: var(--text-muted-custom);
 }

 .testimonial-stars {
     color: #f5a623;
     font-size: .8rem;
 }

 /* ── CTA BANNER ── */
 .cta-banner {
     background: var(--hv-grad);
     border-radius: 28px;
     padding: 3.5rem 2rem;
     position: relative;
     overflow: hidden;
 }

 .cta-bg-glow {
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .06);
     top: -100px;
     right: -100px;
     pointer-events: none;
 }

 .cta-banner .section-title {
     color: #fff;
 }

 .cta-banner p {
     color: rgba(255, 255, 255, .8);
 }

 .btn-cta-white {
     background: #fff;
     color: var(--hv-green-dark);
     border: none;
     border-radius: 50px;
     padding: .75rem 2rem;
     font-weight: 700;
     font-size: 1rem;
     transition: transform .2s, box-shadow .2s;
 }

 .btn-cta-white:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
     color: var(--hv-green-dark);
 }

 .btn-cta-outline {
     border: 2px solid rgba(255, 255, 255, .5);
     color: #fff;
     background: transparent;
     border-radius: 50px;
     padding: .75rem 2rem;
     font-weight: 600;
     font-size: 1rem;
     transition: all .2s;
 }

 .btn-cta-outline:hover {
     background: rgba(255, 255, 255, .15);
     color: #fff;
     border-color: #fff;
 }

 /* ── NEWSLETTER ── */
 .newsletter-input {
     border-radius: 50px 0 0 50px;
     border: 1.5px solid rgba(26, 122, 74, .25);
     padding: .65rem 1.2rem;
     background: var(--card-bg);
     font-size: .9rem;
     flex: 1;
 }

 .newsletter-input:focus {
     outline: none;
     border-color: var(--hv-green-light);
     box-shadow: none;
 }

 .btn-newsletter {
     border-radius: 0 50px 50px 0;
     background: var(--hv-grad);
     color: #fff;
     border: none;
     padding: .65rem 1.5rem;
     font-weight: 600;
 }


 /* ── BLOG ── */
 .blog-card {
     border-radius: 20px;
     background: var(--card-bg);
     border: 1px solid rgba(26, 122, 74, .1);
     overflow: hidden;
     transition: transform .25s, box-shadow .25s;
     height: 100%;
 }

 .blog-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(10, 92, 140, .12);
 }

 .blog-img {
     aspect-ratio: 16/9;
     background: linear-gradient(145deg, #1a7a4a33, #0a5c8c33);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
 }

 .blog-tag {
     font-size: .72rem;
     color: var(--hv-teal);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 .blog-title {
     font-weight: 700;
     font-size: .98rem;
     line-height: 1.4;
     margin: .4rem 0;
 }

 .blog-meta {
     font-size: .78rem;
     opacity: .6;
 }

 .blog-link {
     color: var(--hv-green-light);
     font-size: .82rem;
     font-weight: 700;
     text-decoration: none;
 }

 .blog-link:hover {
     text-decoration: underline;
 }

 /* ── FOOTER ── */
 .footer {
     background: var(--hv-green-dark);
     color: rgba(255, 255, 255, .8);
 }

 .footer-brand {
     font-family: var(--font-display);
     font-size: 1.6rem;
     font-weight: 900;
     color: #fff;
 }

 .footer-brand span {
     color: var(--hv-green-light);
 }

 .footer-heading {
     color: #fff;
     font-weight: 700;
     font-size: .9rem;
     letter-spacing: .08em;
     text-transform: uppercase;
     margin-bottom: 1rem;
 }

 .footer-link {
     display: block;
     color: rgba(255, 255, 255, .65);
     font-size: .88rem;
     margin-bottom: .5rem;
     text-decoration: none;
     transition: color .2s;
 }

 .footer-link:hover {
     color: var(--hv-green-light);
 }

 .footer-social {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1.5px solid rgba(255, 255, 255, .2);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, .7);
     text-decoration: none;
     transition: all .2s;
 }

 .footer-social:hover {
     background: var(--hv-green-light);
     border-color: var(--hv-green-light);
     color: #fff;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .1);
 }

 /* ── FLOATING CART BTN ── */
 .btn-float-cart {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     z-index: 999;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: var(--hv-grad);
     color: #fff;
     border: none;
     box-shadow: 0 8px 28px rgba(26, 122, 74, .4);
     font-size: 1.3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform .2s;
 }

 .btn-float-cart:hover {
     transform: scale(1.08);
     color: #fff;
 }

 .cart-badge {
     position: absolute;
     top: -4px;
     right: -4px;
     background: #e8553e;
     color: #fff;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     font-size: .65rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ── PROCESO / COMO FUNCIONA ── */
 .process-step {
     text-align: center;
     position: relative;
 }

 .process-num {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: var(--hv-grad);
     color: #fff;
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 900;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1rem;
     position: relative;
     z-index: 1;
 }

 .process-connector {
     position: absolute;
     top: 30px;
     left: calc(50% + 30px);
     right: calc(-50% + 30px);
     height: 2px;
     background: linear-gradient(90deg, var(--hv-green-light), var(--hv-blue-light));
     z-index: 0;
 }

 .process-step:last-child .process-connector {
     display: none;
 }

 .process-title {
     font-weight: 700;
     font-size: .98rem;
     margin-bottom: .4rem;
 }

 .process-desc {
     font-size: .82rem;
     opacity: .7;
 }

 /* ── PROMO RIBBON ── */
 .promo-ribbon {
     background: linear-gradient(90deg, #e8553e, #f5a623);
     color: #fff;
     text-align: center;
     padding: .5rem 1rem;
     font-size: .85rem;
     font-weight: 700;
 }

 /* ── MEDIA QUERIES ── */
 @media (max-width: 767px) {
     .hero-plant-card {
         max-width: 100%;
     }

     .process-connector {
         display: none;
     }
 }

 /* ── ANIMATIONS ── */
 @keyframes float-gentle {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .float-anim {
     animation: float-gentle 4s ease-in-out infinite;
 }

 .fade-in-up {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity .6s ease, transform .6s ease;
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Back to top */
 .btn-back-top {
     position: fixed;
     bottom: 2rem;
     left: 2rem;
     z-index: 998;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--card-bg);
     border: 1.5px solid rgba(26, 122, 74, .25);
     color: var(--hv-green-light);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s;
 }

 .btn-back-top.visible {
     opacity: 1;
     pointer-events: auto;
 }




 /* Navbar Custom Dropdown con animación suave */
 .dropdown-menu {
     margin-top: 0.5rem;
     animation: fadeIn 0.2s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Hover en items del dropdown */
 .dropdown-item:hover {
     background-color: #f8f9fa;
     color: #0d6efd;
     transform: translateX(4px);
     transition: all 0.2s ease;
 }

 /* Hover en el toggle principal */
 .nav-link.dropdown-toggle:hover {
     color: #0d6efd;
 }