/* ══════════════════════════════════════════
       GLOBAL
    ══════════════════════════════════════════ */
     ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: #f0f0f0; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, hsl(129, 75%, 28%), hsl(0, 75%, 38%));
      border-radius: 10px;
    }
    ::selection { background: hsl(0, 75%, 38%); color: #fff; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
      background-color: #f8faf8; /* = section-tinted — base entre secciones */
    }

    /* Interactive Canvas Background */
    #bg-canvas {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      z-index: 0; pointer-events: none;
    }

    /* Content above canvas */
    #navbar, section, footer, #loader, #wa-btn, #whatsapp-btn, #top-btn, #scroll-progress {
      position: relative; z-index: 1;
    }

    /* section-particles removed for performance */

    /* Enhanced glow on cards */
    .glow-hover {
      transition: box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
    }
    .glow-hover:hover {
      box-shadow: 0 20px 60px rgba(46,125,50,.15), 0 0 0 1px rgba(46,125,50,.08);
    }

    /* Grain Overlay */
    .grain {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background-image: url("https://grainy-gradients.vercel.app/noise.svg");
      opacity: 0.045; pointer-events: none; z-index: 9999; 
      filter: contrast(120%) brightness(120%);
    }

    /* ══════════════════════════════════════════
       KEYFRAMES
    ══════════════════════════════════════════ */
    @keyframes float {
      0%,100% { transform: translateY(0) rotate(0deg); }
      33%      { transform: translateY(-12px) rotate(0.5deg); }
      66%      { transform: translateY(-6px) rotate(-0.4deg); }
    }
    @keyframes pulse-glow {
      0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,.42), 0 6px 24px rgba(198,40,40,.32); }
      50%      { box-shadow: 0 0 0 16px rgba(198,40,40,0), 0 6px 24px rgba(198,40,40,.32); }
    }
    @keyframes shimmer {
      0%   { left: -100%; }
      100% { left: 200%; }
    }
    @keyframes border-glow {
      0%,100% { border-color: rgba(255,255,255,.15); }
      50%      { border-color: rgba(255,255,255,.38); }
    }
    @keyframes badge-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(76,175,80,.65); }
      50%      { box-shadow: 0 0 0 9px rgba(76,175,80,0); }
    }
    @keyframes orb1 {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(45px,-35px) scale(1.09); }
      66%      { transform: translate(-28px,22px) scale(.94); }
    }
    @keyframes orb2 {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(-32px,28px) scale(1.12); }
      66%      { transform: translate(26px,-18px) scale(.91); }
    }
    @keyframes orb3 {
      0%,100% { transform: translate(0,0); }
      50%      { transform: translate(22px,-42px); }
    }
    @keyframes whatsapp-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 4px 20px rgba(37,211,102,.3); }
      50%      { box-shadow: 0 0 0 18px rgba(37,211,102,0), 0 4px 20px rgba(37,211,102,.3); }
    }
    @keyframes bounce-down {
      0%,100% { transform: translateX(-50%) translateY(0); opacity:.55; }
      50%      { transform: translateX(-50%) translateY(9px); opacity:1; }
    }
    @keyframes mesh-shift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes loader-slide-up {
      to { transform: translateY(-100%); }
    }

    /* ══════════════════════════════════════════
       LOADER
    ══════════════════════════════════════════ */
    #loader {
      position: fixed; inset: 0; z-index: 9999;
      background: #071b09;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0;
      overflow: hidden;
    }
    /* Radial glow behind logo */
    #loader::before {
      content: ''; position: absolute;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(46,125,50,0.18) 0%, transparent 70%);
      animation: loader-glow 2.4s ease-in-out infinite;
    }
    @keyframes loader-glow {
      0%,100% { transform: scale(1); opacity: 0.6; }
      50%      { transform: scale(1.15); opacity: 1; }
    }
    #loader-logo {
      background: #fff; border-radius: 22px; padding: 18px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 0 rgba(76,175,80,0), 0 12px 40px rgba(0,0,0,.4);
      opacity: 0; transform: scale(.5) translateY(20px);
      transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
      position: relative; z-index: 1; margin-bottom: 1.6rem;
    }
    #loader-logo img { width: 68px; height: 68px; object-fit: contain; display: block; }
    #loader-logo.show {
      opacity: 1; transform: scale(1) translateY(0);
      box-shadow: 0 0 0 12px rgba(76,175,80,0.06), 0 12px 40px rgba(0,0,0,.4);
    }
    /* Nombre del laboratorio letra a letra */
    #loader-name {
      display: flex; gap: 0; margin-bottom: .5rem;
      position: relative; z-index: 1;
    }
    #loader-name span {
      font-size: clamp(.85rem, 3.8vw, 1.6rem); font-weight: 800; color: #fff;
      letter-spacing: .04em; opacity: 0; transform: translateY(16px);
      transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
      display: inline-block;
    }
    #loader-name span.space { width: .5em; }
    #loader-name span.show { opacity: 1; transform: translateY(0); }
    #loader-sub {
      font-size: .65rem; font-weight: 600; letter-spacing: .28em;
      text-transform: uppercase; color: rgba(255,255,255,.35);
      opacity: 0; transform: translateY(8px);
      transition: opacity .4s ease, transform .4s ease;
      position: relative; z-index: 1; margin-bottom: 2.5rem;
    }
    #loader-sub.show { opacity: 1; transform: translateY(0); }
    /* ECG line */
    #loader-ecg {
      width: 220px; height: 36px; position: relative; z-index: 1;
      opacity: 0; transition: opacity .3s ease;
    }
    #loader-ecg.show { opacity: 1; }
    #ecg-path {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      transition: stroke-dashoffset 1s ease;
    }
    #ecg-path.animate { stroke-dashoffset: 0; }
    /* Barra de progreso */
    #loader-track {
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: rgba(255,255,255,.07);
    }
    #loader-bar {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #2E7D32, #66BB6A, #C62828);
      background-size: 200% auto;
      animation: mesh-shift 1.8s linear infinite;
      border-radius: 0 3px 3px 0;
      transition: width .06s linear;
    }

    /* ══════════════════════════════════════════
       SCROLL PROGRESS
    ══════════════════════════════════════════ */
    #scroll-progress {
      position: fixed; top: 0; left: 0; z-index: 9998;
      height: 3px; width: 0%;
      background: linear-gradient(90deg, #2E7D32, #66BB6A 50%, #C62828);
      transition: width .1s linear;
      border-radius: 0 3px 3px 0;
    }

    /* ══════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════ */
    #navbar {
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid transparent;
      transition: background .35s ease, border-color .35s ease,
                  box-shadow .35s ease, padding .4s cubic-bezier(.16,1,.3,1);
    }
    #navbar.scrolled {
      background: rgba(255,255,255,.97) !important;
      border-bottom-color: rgba(0,0,0,.06);
      box-shadow: 0 2px 28px rgba(0,0,0,.08);
    }
    .nav-link { position: relative; padding-bottom: 2px; }
    .nav-link::after {
      content: ''; position: absolute; bottom: -2px; left: 0;
      width: 0; height: 2px;
      background: linear-gradient(90deg, #2E7D32, #66BB6A);
      border-radius: 2px; transition: width .25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after { width: 100%; }
    .nav-link.active { color: hsl(129, 75%, 28%); }

     /* ══════════════════════════════════════════
        HERO
     ══════════════════════════════════════════ */
    .hero-bg {
      background-color: hsl(129, 85%, 8%);
      position: relative;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../img/hero-bg.jpg');
      background-size: cover;
      background-position: center 30%;
      opacity: 1;
      pointer-events: none;
      z-index: 0;
    }
    /* Green overlay on top of photo */
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        hsla(129, 85%, 8%, 0.88) 0%,
        hsla(129, 75%, 17%, 0.82) 50%,
        hsla(129, 60%, 25%, 0.75) 100%);
      pointer-events: none;
      z-index: 1;
    }
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 58px 58px;
    }
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(72px); pointer-events: none;
    }
    .orb-1 {
      width: 540px; height: 540px; top: -160px; right: -110px;
      background: radial-gradient(circle, rgba(76,175,80,.55), transparent 70%);
      opacity: .28; animation: orb1 15s ease-in-out infinite;
    }
    .orb-2 {
      width: 430px; height: 430px; bottom: -100px; left: -90px;
      background: radial-gradient(circle, rgba(27,94,32,.9), transparent 70%);
      opacity: .32; animation: orb2 19s ease-in-out infinite;
    }
    .orb-3 {
      width: 290px; height: 290px; top: 36%; right: 24%;
      background: radial-gradient(circle, rgba(198,40,40,.28), transparent 70%);
      opacity: .17; animation: orb3 24s ease-in-out infinite;
    }

    /* Hero badge */
    .hero-badge {
      background: rgba(255,255,255,.09);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.18);
      animation: border-glow 3.2s ease-in-out infinite;
    }
    .badge-dot {
      width: 8px; height: 8px; background: #4CAF50;
      border-radius: 50%; flex-shrink: 0;
      animation: badge-pulse 2.2s ease-in-out infinite;
    }

     /* Hero title gradient */
    .title-gradient {
      color: #fff;
      text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }

    /* Float Animation Refined */
    .animate-float { 
      animation: float 6s cubic-bezier(0.45, 0, 0.55, 1) infinite; 
    }

    /* Scroll indicator */
    .scroll-ind {
      position: absolute; bottom: 26px; left: 50%;
      display: none; flex-direction: column; align-items: center; gap: 5px;
      animation: bounce-down 2.4s ease-in-out infinite;
    }
    @media (min-width: 768px) {
      .scroll-ind { display: flex; }
    }
    .scroll-ind span {
      font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }

     /* Glassmorphism card */
    .glass-card {
      background: hsla(129, 50%, 20%, 0.45);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid hsla(0, 0%, 100%, 0.18);
      border-radius: 28px; padding: 1.8rem; width: 280px;
      box-shadow: 0 40px 80px rgba(0,0,0,0.4), 
                  inset 0 1px 1px hsla(0, 0%, 100%, 0.15);
      transition: border-color 0.3s ease;
    }
    .glass-card:hover {
      border-color: hsla(129, 44%, 74%, 0.3);
    }
    .glass-item {
      background: hsla(0, 0%, 100%, 0.05); border-radius: 16px;
      padding: .75rem 1.1rem;
      display: flex; align-items: center; gap: .9rem;
      transition: background .25s ease, transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: default;
    }
    .glass-item:hover { 
      background: hsla(0, 0%, 100%, 0.12); 
      transform: translateX(8px) scale(1.02); 
    }
    .glass-icon {
      width: 36px; height: 36px; background: hsla(129, 61%, 43%, 0.25);
      border-radius: 12px; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* ══════════════════════════════════════════
       BOTÓN PRINCIPAL
    ══════════════════════════════════════════ */
    .btn-resultados {
      display: inline-flex; align-items: center; gap: .55rem;
      background: linear-gradient(135deg, #C62828, #D32F2F 50%, #C62828);
      background-size: 200% auto;
      color: #fff; font-weight: 700; font-size: 1.05rem;
      padding: .9rem 2.3rem; border-radius: 999px;
      letter-spacing: .025em;
      transition: background-position .4s ease, transform .2s ease, box-shadow .2s ease;
      animation: pulse-glow 2.6s ease-in-out infinite;
      box-shadow: 0 6px 26px rgba(198,40,40,.42);
      position: relative; overflow: hidden; text-decoration: none;
    }
    .btn-resultados::before {
      content: ''; position: absolute; top: 0;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
      left: -100%; animation: shimmer 3.2s ease-in-out infinite;
    }
    .btn-resultados:hover {
      background-position: right center;
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 14px 38px rgba(198,40,40,.54);
      animation: none;
    }
    .btn-resultados:hover::before { animation: none; left: 200%; }
    .btn-resultados:active { transform: scale(.97); }

    /* ══════════════════════════════════════════
       STATS
    ══════════════════════════════════════════ */
    .stat-card {
      background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 18px;
      padding: 1.25rem 1rem; text-align: center;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 26px rgba(0,0,0,.065);
      border: 1px solid rgba(255,255,255,.6);
      transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
    }
    @media (min-width: 640px) { .stat-card { border-radius: 22px; padding: 1.75rem 1.5rem; } }
    .stat-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px; border-radius: 22px 22px 0 0;
    }
    .stat-card.v::before { background: linear-gradient(90deg, #2E7D32, #66BB6A); }
    .stat-card.r::before { background: linear-gradient(90deg, #C62828, #EF5350); }
    .stat-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 24px 56px rgba(0,0,0,.14); }
    .stat-number {
      font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: .35rem;
    }
    @media (min-width: 640px) { .stat-number { font-size: 2.65rem; } }

    /* ══════════════════════════════════════════
       FEATURE CARDS (Nosotros)
    ══════════════════════════════════════════ */
    .feature-card {
      border-radius: 22px; padding: 2rem;
      transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease;
      position: relative; overflow: hidden;
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .feature-card::after {
      content: ''; position: absolute; inset: 0; border-radius: 22px;
      background: linear-gradient(138deg, rgba(255,255,255,.07) 0%, transparent 100%);
      pointer-events: none;
    }
    .feature-card:hover { transform: translateY(-9px) scale(1.01); box-shadow: 0 24px 52px rgba(0,0,0,.13); }
    .icon-box {
      width: 56px; height: 56px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.25rem;
      transition: transform .38s cubic-bezier(.34,1.56,.64,1);
    }
    .feature-card:hover .icon-box { transform: scale(1.18) rotate(-7deg); }

    /* ══════════════════════════════════════════
       SERVICE CARDS
    ══════════════════════════════════════════ */
    .service-card {
      background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(0,0,0,.05);
      border-radius: 22px; padding: 1.75rem 1.5rem;
      display: flex; flex-direction: column; gap: .75rem;
      transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
      position: relative; overflow: hidden;
    }
    .service-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 22px;
      background: linear-gradient(138deg, rgba(232,245,233,.75) 0%, transparent 60%);
      opacity: 0; transition: opacity .3s ease;
    }
    .service-card:hover::before { opacity: 1; }
    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 22px 50px rgba(46,125,50,.14);
      border-color: rgba(46,125,50,.2);
    }
    .service-icon {
      width: 52px; height: 52px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
      transition: transform .38s cubic-bezier(.34,1.56,.64,1);
    }
    .service-card:hover .service-icon { transform: scale(1.15) rotate(5deg); }
    .service-card h3 { font-size: 1.05rem; }
    .service-card p { line-height: 1.6; }

    /* ══════════════════════════════════════════
       CONTACT CARDS
    ══════════════════════════════════════════ */
    .contact-card {
      border-radius: 22px; padding: 1.75rem;
      transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .contact-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 56px rgba(0,0,0,.13); }
    .contact-card.dark { position: relative; overflow: hidden; }
    .contact-card.dark::after {
      content: ''; position: absolute;
      top: -60%; left: -55%; width: 55%; height: 220%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,.07), transparent);
      transform: rotate(18deg);
      transition: left .55s ease;
    }
    .contact-card.dark:hover::after { left: 125%; }

    /* ══════════════════════════════════════════
       SECTION LABEL
    ══════════════════════════════════════════ */
    .sec-label {
      display: inline-block; font-size: .65rem; font-weight: 800;
      letter-spacing: .25em; text-transform: uppercase;
      padding: 6px 16px; border-radius: 999px; margin-bottom: 1rem;
      box-shadow: 0 2px 10px hsla(129, 61%, 43%, 0.1);
    }
    h2 { letter-spacing: -0.02em; }

    /* ══════════════════════════════════════════
       WHATSAPP BUTTON
    ══════════════════════════════════════════ */
    #wa-btn {
      position: fixed; bottom: 16px; right: 16px;
      width: 48px; height: 48px; background: #C62828; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      z-index: 500; text-decoration: none;
      transition: transform .22s ease, background .2s ease;
      box-shadow: 0 4px 20px rgba(198,40,40,.3);
    }
    #wa-btn:hover { transform: scale(1.15); background: #b71c1c; }
    @media (min-width: 640px) { #wa-btn { width: 58px; height: 58px; bottom: 28px; right: 28px; } }

    #whatsapp-btn {
      position: fixed; bottom: 72px; right: 16px;
      width: 48px; height: 48px; background: #25D366; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      animation: whatsapp-pulse 2.8s ease-in-out infinite;
      z-index: 500; text-decoration: none;
      transition: transform .22s ease, background .2s ease;
    }
    #whatsapp-btn:hover { transform: scale(1.15); background: #1ebe5a; animation: none; }
    @media (min-width: 640px) { #whatsapp-btn { width: 58px; height: 58px; bottom: 96px; right: 28px; } }

    .wa-tooltip {
      position: absolute; right: 68px;
      background: #111; color: #fff;
      font-size: .73rem; font-weight: 600;
      padding: 5px 11px; border-radius: 9px;
      white-space: nowrap; opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
    }
    .wa-tooltip::after {
      content: ''; position: absolute; left: 100%; top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent; border-left-color: #111;
    }
    #wa-btn:hover .wa-tooltip, #whatsapp-btn:hover .wa-tooltip { opacity: 1; }

    /* ══════════════════════════════════════════
       SCROLL TO TOP
    ══════════════════════════════════════════ */
    #top-btn {
      position: fixed; bottom: 128px; right: 16px;
      width: 36px; height: 36px; background: #fff;
      border: 1.5px solid rgba(0,0,0,.08); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 18px rgba(0,0,0,.1);
      z-index: 500; cursor: pointer;
      opacity: 0; pointer-events: none; transform: translateY(14px);
      transition: opacity .32s ease, transform .32s ease, box-shadow .22s ease;
    }
    #top-btn.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
    #top-btn:hover { box-shadow: 0 6px 24px rgba(0,0,0,.15); transform: translateY(-2px); }
    @media (min-width: 640px) { #top-btn { width: 42px; height: 42px; bottom: 164px; right: 28px; } }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    .map-container { height: 320px; border-radius: 24px; }
    @media (min-width: 640px) { .map-container { height: 420px; } }

    /* ══════════════════════════════════════════
       MAPA ESTILO iOS
    ══════════════════════════════════════════ */
    .ios-map {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      height: 360px;
      background: #e8edef;
      box-shadow: 0 20px 60px rgba(0,0,0,.12),
                  0 4px 12px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.05);
    }
    @media (min-width: 640px) { .ios-map { height: 460px; border-radius: 28px; } }
    .ios-map iframe {
      width: 100%; height: 100%; border: 0;
      filter: saturate(0.92) contrast(0.98);
      display: block;
    }
    /* Header card flotante con dirección */
    .ios-map-header {
      position: absolute; top: 14px; left: 14px; right: 14px;
      display: flex; align-items: center; gap: .75rem;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 14px;
      padding: .75rem 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.1),
                  inset 0 1px 0 rgba(255,255,255,.5);
      pointer-events: none;
    }
    @media (min-width: 640px) {
      .ios-map-header { left: 18px; top: 18px; right: auto; max-width: 320px; padding: .85rem 1.1rem; }
    }
    .ios-map-pin {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg, hsl(0,75%,45%), hsl(0,75%,30%));
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(198,40,40,.4),
                  inset 0 1px 0 rgba(255,255,255,.25);
    }
    .ios-map-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .ios-map-info strong {
      font-size: .9rem; font-weight: 800; color: #111827;
      letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ios-map-info span {
      font-size: .78rem; color: #6b7280; font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Botón flotante "Cómo llegar" */
    .ios-map-cta {
      position: absolute; bottom: 16px; right: 16px;
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 14px;
      padding: .75rem 1.1rem;
      font-size: .85rem; font-weight: 700;
      color: #007AFF;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(0,0,0,.15),
                  inset 0 1px 0 rgba(255,255,255,.5);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
      z-index: 2;
    }
    .ios-map-cta:hover {
      transform: translateY(-2px);
      background: #fff;
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
    }
    .ios-map-cta svg {
      width: 16px; height: 16px;
      transition: transform .2s ease;
    }
    .ios-map-cta:hover svg { transform: translate(2px, -2px); }
    /* Botón secundario "Ver en Maps" */
    .ios-map-cta-2 {
      position: absolute; bottom: 16px; left: 16px;
      display: inline-flex; align-items: center; gap: .4rem;
      background: rgba(0,0,0,.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 12px;
      padding: .55rem .85rem;
      font-size: .75rem; font-weight: 600;
      color: #fff;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
      z-index: 2;
    }
    .ios-map-cta-2:hover {
      background: rgba(0,0,0,.8);
      transform: translateY(-2px);
    }

    /* ══════════════════════════════════════════
       LOGO ICON WATERMARK (decoración)
    ══════════════════════════════════════════ */
    .brand-watermark {
      position: absolute;
      pointer-events: none;
      user-select: none;
      opacity: 0.05;
      z-index: 0;
    }
    .brand-watermark img { display: block; width: 100%; height: 100%; object-fit: contain; }
    /* Variantes de posición */
    .brand-watermark.bottom-right {
      bottom: -40px; right: -40px;
      width: 280px; height: 280px;
    }
    .brand-watermark.top-left {
      top: 20px; left: -60px;
      width: 220px; height: 220px;
    }
    /* Brand mark dentro del loader (más sutil) */
    .brand-mark-inline {
      display: inline-flex; align-items: center;
      gap: .5rem;
    }
    .brand-mark-inline img {
      width: 22px; height: 22px;
      filter: invert(0.3) sepia(1) hue-rotate(70deg) saturate(2);
    }

    .footer-bg {
      background: linear-gradient(135deg, #071b09 0%, #1B5E20 55%, #0f2e14 100%);
    }

    /* ══════════════════════════════════════════
       CAROUSEL
    ══════════════════════════════════════════ */
    .carousel-container {
      position: relative; overflow: hidden; width: 100%;
    }
    .carousel-track {
      display: flex; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .carousel-item {
      flex: 0 0 100%; height: 320px; overflow: hidden;
      position: relative; cursor: grab;
    }
    @media (min-width: 640px) { .carousel-item { height: 400px; } }
    @media (min-width: 1024px) { .carousel-item { height: 500px; } }
    .carousel-item:active { cursor: grabbing; }
    .carousel-item img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 6s ease;
      filter: brightness(1.15) contrast(1.1) saturate(1.2);
    }
    .carousel-item.active-slide img { transform: scale(1.05); }
    .carousel-item .overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(7,27,9,0.85) 0%, rgba(27,94,32,0.2) 50%, rgba(0,0,0,0.1) 100%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 1.5rem 6%; color: #fff;
    }
    @media (min-width: 640px) { .carousel-item .overlay { padding: 2rem 8%; } }
    @media (min-width: 1024px) { .carousel-item .overlay { padding: 3rem 10%; } }
    .carousel-item h4 { font-weight: 800; font-size: 1.3rem; margin-bottom: 0.35rem; }
    .carousel-item p { font-size: .9rem; opacity: 0.9; max-width: 600px; }
    @media (min-width: 640px) {
      .carousel-item h4 { font-size: 1.6rem; }
      .carousel-item p { font-size: 1rem; }
    }
    @media (min-width: 1024px) {
      .carousel-item h4 { font-size: 2rem; margin-bottom: 0.5rem; }
      .carousel-item p { font-size: 1.1rem; }
    }

    .carousel-nav {
      position: absolute; bottom: 1.2rem; left: 0; right: 0;
      display: flex; justify-content: center; gap: 1rem; z-index: 10;
    }
    .nav-dot {
      width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4);
      cursor: pointer; transition: all 0.3s ease;
    }
    .nav-dot.active { width: 32px; border-radius: 6px; background: #fff; }

    /* Section dividers */
    .section-divider {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; padding: 0;
    }
    .section-divider::before,
    .section-divider::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(46,125,50,0.18), rgba(198,40,40,0.12), transparent);
    }
    .section-divider span {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, hsl(129, 61%, 43%), hsl(0, 75%, 38%));
      box-shadow: 0 0 10px rgba(46,125,50,0.25);
    }

    /* Bioquimicos cards */
    .bio-card {
      background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 20px; padding: 1.6rem 1.4rem; text-align: center;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 30px rgba(0,0,0,.06);
      transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
    }
    @media (min-width: 640px) { .bio-card { border-radius: 24px; padding: 2.2rem 1.8rem; } }
    .bio-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
    }
    .bio-card.verde::before { background: linear-gradient(90deg, hsl(129, 75%, 28%), hsl(129, 61%, 43%), hsl(129, 75%, 28%)); }
    .bio-card.rojo::before { background: linear-gradient(90deg, hsl(0, 75%, 38%), hsl(0, 84%, 63%), hsl(0, 75%, 38%)); }
    .bio-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 56px rgba(0,0,0,.12);
      border-color: rgba(46,125,50,.15);
    }
    .bio-avatar {
      width: 72px; height: 72px; border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem; position: relative;
    }
    @media (min-width: 640px) { .bio-avatar { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 1.2rem; } }
    .bio-avatar.verde {
      background: linear-gradient(145deg, hsl(129, 61%, 43%), hsl(129, 75%, 25%));
      box-shadow: 0 10px 30px rgba(46,125,50,.3);
    }
    .bio-avatar.rojo {
      background: linear-gradient(145deg, hsl(0, 75%, 45%), hsl(0, 75%, 30%));
      box-shadow: 0 10px 30px rgba(198,40,40,.3);
    }
    .bio-role {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .8rem; font-weight: 500; color: #9ca3af; margin-top: .35rem;
    }
    .bio-mp {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .7rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      padding: 6px 16px; border-radius: 999px; margin-top: 1rem;
    }
    .bio-mp.verde {
      background: hsl(129, 44%, 94%); color: hsl(129, 75%, 28%);
      border: 1px solid hsl(129, 44%, 85%);
    }
    .bio-mp.rojo {
      background: hsl(0, 78%, 96%); color: hsl(0, 75%, 38%);
      border: 1px solid hsl(0, 78%, 91%);
    }

    /* GSAP initial hidden state */
    .g-hidden { opacity: 0; }

    /* ══════════════════════════════════════════
       ALTERNATING SECTION BACKGROUNDS
    ══════════════════════════════════════════ */
    .section-white { background: #ffffff; }
    .section-tinted { background: #f8faf8; }

    /* ══════════════════════════════════════════
       STAT CARD — ICON
    ══════════════════════════════════════════ */
    .stat-icon {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto .8rem;
      flex-shrink: 0;
    }
    .stat-card.v .stat-icon { background: hsl(129, 44%, 94%); }
    .stat-card.r .stat-icon { background: hsl(0, 78%, 96%); }

    /* ══════════════════════════════════════════
       FEATURE CARD — STEP NUMBER
    ══════════════════════════════════════════ */
    .feature-step {
      position: absolute; bottom: -8px; right: 10px;
      font-size: 5.5rem; font-weight: 900; line-height: 1;
      color: rgba(0,0,0,0.055); pointer-events: none;
      user-select: none; letter-spacing: -4px;
    }

    /* ══════════════════════════════════════════
       SERVICE CARD — BADGE
    ══════════════════════════════════════════ */
    .service-badge {
      position: absolute; top: 12px; right: 12px;
      font-size: .62rem; font-weight: 800; letter-spacing: .06em;
      text-transform: uppercase; padding: 3px 9px;
      border-radius: 999px;
      background: linear-gradient(135deg, hsl(129,75%,28%), hsl(129,61%,43%));
      color: #fff;
      box-shadow: 0 2px 8px rgba(46,125,50,.35);
    }

    /* ══════════════════════════════════════════
       FOOTER WAVE TRANSITION
    ══════════════════════════════════════════ */
    .footer-wave {
      display: block; width: 100%;
      background: #ffffff;        /* matches last section bg */
      line-height: 0;
    }
    .footer-wave svg { display: block; width: 100%; }

    /* ══════════════════════════════════════════
       HERO — SECONDARY CTA (ghost)
    ══════════════════════════════════════════ */
    .btn-ghost {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 1.5px solid rgba(255,255,255,.32);
      color: rgba(255,255,255,.82); font-weight: 600; font-size: .95rem;
      padding: .85rem 1.9rem; border-radius: 999px;
      backdrop-filter: blur(6px);
      transition: border-color .25s ease, color .25s ease, background .25s ease, transform .2s ease;
      text-decoration: none;
    }
    .btn-ghost:hover {
      border-color: rgba(255,255,255,.65);
      color: #fff; background: rgba(255,255,255,.1);
      transform: translateY(-2px);
    }

    /* CTA container: never stretch flex lines apart */
    #h-cta {
      align-content: flex-start;
    }

    /* ══════════════════════════════════════════
       HERO MOBILE INFO PILLS
    ══════════════════════════════════════════ */
    .hero-pills {
      display: flex; flex-wrap: wrap; gap: .5rem;
      margin-top: 1.4rem;
    }
    .hero-pill {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .35rem .75rem; border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      font-size: .72rem; font-weight: 600;
      color: rgba(255,255,255,.85);
      backdrop-filter: blur(6px);
    }
    .hero-pill svg { width: 12px; height: 12px; opacity: .85; }

    /* ══════════════════════════════════════════
       STATUS CARD — LIVE OPEN/CLOSED
    ══════════════════════════════════════════ */
    .status-card {
      background: hsla(129, 50%, 18%, 0.55);
      backdrop-filter: blur(28px) saturate(170%);
      -webkit-backdrop-filter: blur(28px) saturate(170%);
      border: 1px solid hsla(0, 0%, 100%, 0.18);
      border-radius: 24px; padding: 1.6rem;
      width: 300px;
      box-shadow: 0 40px 80px rgba(0,0,0,0.4),
                  inset 0 1px 1px hsla(0, 0%, 100%, 0.15);
    }
    .status-head {
      display: flex; align-items: center; gap: .65rem;
      margin-bottom: .5rem;
    }
    .status-dot {
      width: 10px; height: 10px; border-radius: 50%;
      flex-shrink: 0;
    }
    .status-dot.open  {
      background: #4ade80;
      box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
      animation: status-pulse 2s ease-in-out infinite;
    }
    .status-dot.closed { background: #f87171; }
    @keyframes status-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
      70%  { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); }
      100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
    }
    .status-label {
      font-size: 1.05rem; font-weight: 800; color: #fff;
      letter-spacing: -.01em;
    }
    .status-time {
      font-size: .8rem; color: rgba(255,255,255,.65);
      margin-bottom: 1.1rem;
    }
    .status-divider {
      height: 1px; background: rgba(255,255,255,.12);
      margin: 1rem 0;
    }
    .status-row {
      display: flex; justify-content: space-between;
      align-items: center;
      font-size: .82rem; padding: .35rem 0;
    }
    .status-row .day { color: rgba(255,255,255,.55); font-weight: 500; }
    .status-row .hours { color: #fff; font-weight: 600; }
    .status-row.urgency .day {
      color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .4rem;
    }
    .status-row.urgency .hours { color: #fff; }
    .status-actions {
      display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
      margin-top: 1.1rem;
    }
    .status-btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .4rem; padding: .55rem .8rem;
      border-radius: 12px; font-size: .8rem; font-weight: 700;
      transition: transform .2s ease, background .2s ease;
      text-decoration: none;
    }
    .status-btn.wa  { background: #25D366; color: #fff; }
    .status-btn.wa:hover  { background: #1ebe5a; transform: translateY(-2px); }
    .status-btn.tel { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.16); }
    .status-btn.tel:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }

    /* ══════════════════════════════════════════
       WHY-US SECTION
    ══════════════════════════════════════════ */
    .why-card {
      display: flex; gap: 1rem; align-items: flex-start;
      padding: 1.25rem; border-radius: 16px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(0,0,0,.05);
      transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
    }
    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 45px rgba(46,125,50,.1);
      border-color: rgba(46,125,50,.18);
    }
    .why-icon {
      width: 42px; height: 42px; border-radius: 12px;
      flex-shrink: 0; display: flex;
      align-items: center; justify-content: center;
      background: linear-gradient(135deg, hsl(129,61%,43%), hsl(129,75%,28%));
      box-shadow: 0 6px 16px rgba(46,125,50,.25);
    }
    .why-icon.r {
      background: linear-gradient(135deg, hsl(0,75%,45%), hsl(0,75%,30%));
      box-shadow: 0 6px 16px rgba(198,40,40,.25);
    }
    .why-card h4 {
      font-size: .95rem; font-weight: 800; color: #1f2937;
      margin-bottom: .2rem; letter-spacing: -.01em;
    }
    .why-card p {
      font-size: .82rem; color: #6b7280; line-height: 1.5;
    }

    /* ══════════════════════════════════════════
       SERVICE CARD MICRO-CTA
    ══════════════════════════════════════════ */
    .service-cta {
      display: inline-flex; align-items: center; gap: .3rem;
      margin-top: .85rem; font-size: .8rem; font-weight: 700;
      color: hsl(129, 75%, 28%);
      transition: gap .25s ease, color .25s ease;
      text-decoration: none;
    }
    .service-card.r-themed .service-cta { color: hsl(0, 75%, 38%); }
    .service-cta:hover { gap: .55rem; }
    .service-cta svg {
      width: 14px; height: 14px;
      transition: transform .25s ease;
    }
    .service-cta:hover svg { transform: translateX(2px); }

    /* ══════════════════════════════════════════
       SECCIÓN COBERTURA — OS + MEDIOS DE PAGO
    ══════════════════════════════════════════ */
    .coverage-card {
      position: relative;
      background: #fff;
      border-radius: 24px;
      padding: 2rem 1.75rem;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 10px 40px rgba(0,0,0,.06);
      transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
      overflow: hidden;
      height: 100%;
    }
    @media (min-width: 640px) { .coverage-card { padding: 2.4rem 2.2rem; } }
    .coverage-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 4px;
    }
    .coverage-card.verde::before {
      background: linear-gradient(90deg, hsl(129,75%,28%), hsl(129,61%,43%), hsl(129,75%,28%));
    }
    .coverage-card.rojo::before {
      background: linear-gradient(90deg, hsl(0,75%,38%), hsl(0,84%,63%), hsl(0,75%,38%));
    }
    .coverage-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 56px rgba(0,0,0,.12);
    }
    .coverage-header {
      display: flex; align-items: center; gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .coverage-icon {
      width: 52px; height: 52px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .coverage-icon.verde {
      background: linear-gradient(135deg, hsl(129,61%,43%), hsl(129,75%,28%));
      box-shadow: 0 8px 22px rgba(46,125,50,.28);
    }
    .coverage-icon.rojo {
      background: linear-gradient(135deg, hsl(0,75%,45%), hsl(0,75%,30%));
      box-shadow: 0 8px 22px rgba(198,40,40,.28);
    }
    .coverage-header h3 {
      font-size: 1.25rem; font-weight: 800;
      color: #1f2937; letter-spacing: -.01em;
      margin-bottom: .15rem;
    }
    .coverage-header p {
      font-size: .85rem; color: #6b7280;
    }

    /* OS grid dentro de la card */
    .coverage-os-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .55rem;
    }
    @media (min-width: 480px) { .coverage-os-grid { grid-template-columns: repeat(3, 1fr); } }
    .coverage-os-pill {
      display: flex; align-items: center; justify-content: center;
      font-size: .72rem; font-weight: 800;
      letter-spacing: .04em;
      padding: .7rem .55rem; border-radius: 10px;
      background: hsl(129, 44%, 96%);
      border: 1px solid hsl(129, 44%, 88%);
      color: hsl(129, 75%, 24%);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
      text-align: center; line-height: 1.15;
      min-height: 56px;
      overflow: hidden;
    }
    .coverage-os-pill img {
      max-width: 90%; max-height: 38px;
      object-fit: contain;
    }
    /* Cuando hay logo, fondo blanco para que resalte */
    .coverage-os-pill.has-logo {
      background: #fff;
      border-color: rgba(0,0,0,.08);
      padding: .5rem;
    }
    .coverage-os-pill.has-logo:hover {
      border-color: hsl(129, 44%, 65%);
    }
    .coverage-os-pill:hover {
      background: hsl(129, 44%, 92%);
      border-color: hsl(129, 44%, 75%);
      transform: translateY(-2px);
    }
    .coverage-os-more {
      grid-column: 1 / -1;
      display: flex; align-items: center; justify-content: center;
      gap: .5rem;
      font-size: .78rem; font-weight: 800;
      letter-spacing: .06em;
      color: hsl(129, 75%, 28%);
      padding: .9rem .5rem; border-radius: 12px;
      background: linear-gradient(135deg, hsl(129,44%,94%), hsl(129,44%,96%));
      border: 1.5px dashed hsl(129, 44%, 60%);
      margin-top: .4rem;
    }

    /* Payment grid dentro de la card light */
    .coverage-pay-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .6rem;
      margin-bottom: 1rem;
    }
    @media (min-width: 640px) { .coverage-pay-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; } }
    .pay-light {
      display: flex; align-items: center; justify-content: center;
      height: 60px; border-radius: 12px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
      transition: transform .25s ease, box-shadow .25s ease;
      padding: .55rem;
    }
    .pay-light:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,.12);
    }
    .pay-light img {
      max-width: 100%; max-height: 100%;
      object-fit: contain; display: block;
    }
    /* Fondos oscuros para logos que se leen mejor en color */
    .pay-light.naranja { background: #FF5F00; }
    .pay-light.cabal   { background: #003366; }
    .pay-light svg { display: block; }

    .coverage-cash {
      display: flex; flex-wrap: wrap; gap: .5rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(0,0,0,.07);
    }
    .coverage-cash-pill {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .82rem; font-weight: 700;
      color: hsl(0, 75%, 38%);
      padding: .5rem 1rem; border-radius: 999px;
      background: hsl(0, 78%, 96%);
      border: 1px solid hsl(0, 78%, 91%);
    }
    .coverage-cash-pill svg { width: 14px; height: 14px; }

    /* ══════════════════════════════════════════
       FOOTER — OBRAS SOCIALES + PAGOS
    ══════════════════════════════════════════ */
    .trust-block-title {
      font-size: .7rem; font-weight: 800;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(255,255,255,.55);
      margin-bottom: .9rem;
      display: flex; align-items: center; gap: .6rem;
    }
    .trust-block-title::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
    }

    .os-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .55rem;
    }
    @media (min-width: 640px) { .os-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1024px) { .os-grid { grid-template-columns: repeat(5, 1fr); } }
    .os-pill {
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700;
      letter-spacing: .02em;
      padding: .65rem .5rem; border-radius: 10px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.92);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
      text-align: center; line-height: 1.1;
    }
    .os-pill:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.25);
      transform: translateY(-2px);
    }
    .os-more {
      grid-column: 2 / -1;
      display: flex; align-items: center; justify-content: center;
      gap: .4rem;
      font-size: .75rem; font-weight: 600;
      color: hsl(129, 50%, 70%);
      padding: .65rem .5rem; border-radius: 10px;
      background: linear-gradient(135deg, rgba(76,175,80,.12), rgba(76,175,80,.04));
      border: 1px dashed rgba(76,175,80,.3);
    }
    @media (min-width: 640px) { .os-more { grid-column: auto; } }

    /* Payment methods */
    .pay-grid {
      display: flex; flex-wrap: wrap; gap: .6rem;
      align-items: center;
    }
    .pay-card {
      display: flex; align-items: center; justify-content: center;
      width: 56px; height: 36px; border-radius: 7px;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,.2);
      flex-shrink: 0;
      overflow: hidden;
    }
    .pay-card svg { display: block; }
    .pay-cash {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .78rem; font-weight: 600;
      color: rgba(255,255,255,.85);
      padding: .45rem .9rem; border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
    }
    .pay-cash svg { width: 16px; height: 16px; color: hsl(129, 50%, 70%); }

    /* ══════════════════════════════════════════
       CAROUSEL — TÍTULO INTEGRADO
    ══════════════════════════════════════════ */
    .carousel-title-overlay {
      position: absolute; top: 1.3rem; left: 6%;
      right: 6%; z-index: 8;
      display: flex; justify-content: space-between;
      align-items: center;
      pointer-events: none;
    }
    @media (min-width: 640px) { .carousel-title-overlay { top: 2rem; left: 8%; right: 8%; } }
    @media (min-width: 1024px) { .carousel-title-overlay { top: 2.5rem; left: 10%; right: 10%; } }
    .carousel-section-label {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .65rem; font-weight: 800; letter-spacing: .25em;
      text-transform: uppercase; color: rgba(255,255,255,.95);
      padding: .35rem .85rem; border-radius: 999px;
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.18);
    }
    .carousel-counter {
      font-size: .8rem; font-weight: 700;
      color: rgba(255,255,255,.85);
      padding: .35rem .75rem; border-radius: 999px;
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(8px);
    }
    .carousel-counter b {
      color: #fff; font-weight: 800; font-size: 1rem;
    }

    /* ══════════════════════════════════════════
       FLOATING SECTION NAVIGATOR
    ══════════════════════════════════════════ */

    /* Mobile: bottom-right above existing buttons */
    #float-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: fixed;
      right: 16px;
      bottom: 186px;
      z-index: 400;
      gap: 0;
    }

    /* Desktop: center-right */
    @media (min-width: 768px) {
      #float-nav {
        right: 20px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    /* ── Trigger button ── */
    #float-nav-btn {
      height: 40px;
      padding: 0 14px 0 11px;
      border-radius: 100px;
      background: linear-gradient(135deg, hsl(129,81%,19%), hsl(129,75%,28%));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      border: none; cursor: pointer;
      box-shadow: 0 4px 20px rgba(46,125,50,.4),
                  0 1px 3px rgba(0,0,0,.18),
                  inset 0 1px 0 rgba(255,255,255,.14);
      transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                  box-shadow .2s ease, background .2s ease;
      position: relative; z-index: 2;
    }
    #float-nav-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 28px rgba(46,125,50,.5);
    }
    #float-nav-btn.open {
      background: linear-gradient(135deg, hsl(0,72%,36%), hsl(0,75%,28%));
      box-shadow: 0 4px 20px rgba(198,40,40,.4);
    }

    /* Icon states via CSS — no inline display toggling */
    #float-nav-icon-open,
    #float-nav-icon-close {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    #float-nav-icon-close         { display: none; }
    #float-nav-btn.open #float-nav-icon-open  { display: none; }
    #float-nav-btn.open #float-nav-icon-close { display: flex; }

    /* ── Panel: opens UPWARD on mobile, LEFT on desktop ── */
    #float-nav-panel {
      position: absolute;
      /* Mobile: abre hacia arriba */
      bottom: 52px;
      right: 0;
      top: auto;
      transform: translateY(8px) scale(0.96);
      width: 210px;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.14),
                  0 4px 16px rgba(0,0,0,.06),
                  inset 0 1px 0 rgba(255,255,255,.9);
      padding: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease,
                  transform .22s cubic-bezier(.16,1,.3,1);
    }
    #float-nav-panel.open {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0) scale(1);
    }
    /* Arrow mobile: apunta hacia abajo (al botón pill) */
    #float-nav-panel::after {
      content: '';
      position: absolute;
      bottom: -7px; right: 55px;
      top: auto;
      transform: none;
      border: 7px solid transparent;
      border-bottom: none;
      border-top-color: rgba(255,255,255,0.98);
    }
    /* Desktop: panel a la izquierda del botón */
    @media (min-width: 768px) {
      #float-nav-panel {
        bottom: auto;
        right: 120px;
        top: 50%;
        transform: translateY(-50%) translateX(10px) scale(0.96);
      }
      #float-nav-panel.open {
        transform: translateY(-50%) translateX(0) scale(1);
      }
      #float-nav-panel::after {
        bottom: auto; top: 50%;
        right: -7px; left: auto;
        transform: translateY(-50%);
        border: 7px solid transparent;
        border-right: none;
        border-top: none;
        border-left-color: rgba(255,255,255,0.98);
      }
    }

    /* Panel header */
    .float-nav-header {
      padding: 4px 10px 8px;
      font-size: .6rem; font-weight: 800;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(0,0,0,.28);
      border-bottom: 1px solid rgba(0,0,0,.06);
      margin-bottom: 6px;
      display: flex; align-items: center; gap: 7px;
    }
    .float-nav-header::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: linear-gradient(135deg, hsl(129,61%,43%), hsl(0,75%,38%));
      flex-shrink: 0;
    }

    /* Nav items */
    .float-nav-list { display: flex; flex-direction: column; gap: 2px; }
    .float-nav-item {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 8px; border-radius: 10px;
      text-decoration: none; color: #374151;
      font-size: .82rem; font-weight: 600;
      transition: background .15s ease, color .15s ease;
    }
    .float-nav-item:hover { background: hsl(129,44%,94%); color: hsl(129,75%,25%); }
    .float-nav-item.active { background: hsl(129,44%,91%); color: hsl(129,75%,22%); }

    /* Icon */
    .float-nav-icon {
      width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      background: hsl(129,44%,94%); color: hsl(129,75%,28%);
      transition: background .15s ease, color .15s ease;
    }
    .float-nav-item:hover .float-nav-icon,
    .float-nav-item.active .float-nav-icon {
      background: hsl(129,61%,43%); color: #fff;
    }

    /* Active dot */
    .float-nav-label { flex: 1; }
    .float-nav-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: hsl(129,61%,43%);
      flex-shrink: 0; opacity: 0;
      transition: opacity .15s ease;
    }
    .float-nav-item.active .float-nav-dot { opacity: 1; }