:root{
    /* Paleta propia de Bote: base azul océano/marino (aventura,
       velocidad, deporte acuático) en vez del marrón cálido de
       Richy's Bar. --gold/--gold-light/--cream/--text-dark se
       mantienen IGUALES en las 3 páginas turísticas a propósito:
       es el hilo dorado que unifica la marca Santfrancisco (nav,
       menú, footer) aunque cada servicio tenga su propio tono. */
    --brown-dark:#0a1826;
    --brown:#1c3a5e;
    --brown-soft:#3f6690;
    --gold:#d9a441;
    --gold-light:#f0c96a;
    --river-blue:#123044;
    --cream:#faf6ee;
    --cream-soft:#f3ead9;
    --text-dark:#241a10;
    /* Alias --bc-* para el panel de chat de reservas (booking-chat.css). */
    --bc-dark:var(--brown-dark);
    --bc-gold:var(--gold);
    --bc-gold-light:var(--gold-light);
    --bc-bg:var(--cream);
    --bc-card-bg:#fff;
    --bc-text:var(--text-dark);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Poppins', sans-serif;background:var(--cream);color:var(--text-dark);line-height:1.65;overflow-x:hidden;}
  h1,h2,h3{font-family:'Playfair Display', serif;}
  img{max-width:100%;display:block;}
  a{color:inherit;}

  nav{
    position:sticky; top:0; z-index:100;
    background:rgba(10,24,38,0.95);
    backdrop-filter:blur(6px);
    padding:12px 6vw;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 2px 18px rgba(0,0,0,0.25);
    transition:box-shadow .3s ease;
  }
  nav.scrolled{box-shadow:0 6px 28px rgba(0,0,0,0.4);}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo-mark{width:40px;height:40px;border-radius:50%;background:rgba(240,201,106,0.12);border:2px solid var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .logo-mark svg{width:20px;height:20px;stroke:var(--gold-light);}
  .logo-text{color:var(--gold-light);font-family:'Playfair Display', serif;font-weight:700;font-size:1.25rem;}
  .logo-text small{display:block;font-family:'Poppins',sans-serif;font-weight:400;font-size:0.65rem;color:var(--cream-soft);opacity:0.75;letter-spacing:0.5px;}
  .nav-actions{display:flex;align-items:center;gap:10px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  @media (max-width:900px){nav{flex-wrap:wrap;row-gap:8px;}.nav-actions{position:static;transform:none;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:8px;}}
  nav a.cta-nav-secondary{
    background:rgba(250,246,238,0.06);
    color:var(--gold-light);
    border:1.5px solid var(--gold-light);
    padding:9px 18px; border-radius:30px;
    text-decoration:none; font-weight:600; font-size:0.85rem;
    white-space:nowrap; transition:all .2s ease;
    display:inline-flex; align-items:center; gap:6px;
  }
  nav a.cta-nav-secondary svg{width:15px;height:15px;flex-shrink:0;}
  nav a.cta-nav-secondary:hover{
    background:var(--gold-light); color:var(--brown-dark);
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(217,164,65,0.3);
  }
  nav a.cta-nav{
    background:linear-gradient(135deg, var(--gold-light), var(--gold));
    color:var(--brown-dark); padding:10px 20px; border-radius:30px;
    text-decoration:none; font-weight:600; font-size:0.85rem;
    box-shadow:0 4px 14px rgba(217,164,65,0.35); transition:transform .2s; white-space:nowrap;
  }
  nav a.cta-nav:hover{transform:translateY(-2px);}
  nav a.cta-nav:hover .arrow, nav a.cta-nav-secondary:hover .arrow{transform:translateX(4px);}

  .icon{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  .urgency-bar{
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    color:var(--brown-dark);text-align:center;padding:9px 6vw;font-size:0.85rem;font-weight:600;
    display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  }
  .urgency-bar .icon{stroke:var(--brown-dark);}
  .urgency-bar strong{font-family:'Playfair Display',serif;}

  .badge-location{
    display:inline-block; background:rgba(240,201,106,0.12); border:1px solid rgba(240,201,106,0.4);
    color:var(--gold-light); padding:6px 16px; border-radius:20px; font-size:0.78rem; letter-spacing:0.5px;
    text-transform:uppercase; margin-bottom:18px; font-weight:600;
  }
  .hero-content h1{font-size:clamp(2rem, 5.2vw, 2.9rem);line-height:1.15;margin-bottom:16px;text-shadow:0 4px 18px rgba(0,0,0,0.5);}
  .hero-content h1 em{font-style:normal;background:linear-gradient(135deg, var(--gold-light), var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-content p{font-size:1.05rem;opacity:0.92;margin-bottom:28px;}
  .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .btn-primary{
    display:inline-block; background:linear-gradient(135deg, var(--gold-light), var(--gold));
    color:var(--brown-dark); padding:15px 34px; border-radius:32px; text-decoration:none;
    font-weight:700; letter-spacing:0.3px; box-shadow:0 10px 28px rgba(217,164,65,0.4);
    transition:transform .2s, box-shadow .2s; border:none; cursor:pointer; font-size:0.95rem;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(217,164,65,0.55);}
  .btn-secondary{
    display:inline-block; background:transparent; color:var(--cream); padding:15px 30px;
    border-radius:32px; text-decoration:none; font-weight:600; border:1.5px solid rgba(250,246,238,0.55);
    transition:background .2s; font-size:0.95rem;
  }
  .btn-secondary:hover{background:rgba(250,246,238,0.12);}
  .arrow{display:inline-block;transition:transform .3s ease;}
  .btn-primary:hover .arrow, .btn-secondary:hover .arrow{transform:translateX(4px);}

  .hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;min-height:74vh;color:var(--cream);}
  .hero-bg{
    /* FIX: mismo bug que planchon.html — el gradiente opaco tapaba
       la foto por completo (ver el comentario en planchon.html para
       el detalle). background-color es solo un color de respaldo. */
    position:absolute;inset:-4%;
    background-color:#0d2338;
    background-image:url('../../images/optimized/bote-bote-card-wakeboard-sunset.webp');
    background-size:cover;background-position:center;
    animation:kenburns 22s ease-in-out infinite alternate;
  }
  @keyframes kenburns{0%{transform:scale(1);}100%{transform:scale(1.09);}}
  @media (prefers-reduced-motion: reduce){.hero-bg{animation:none;}}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(180deg, rgba(6,12,20,0.25) 0%, rgba(6,12,20,0.85) 100%);
  }
  .hero-content{position:relative;z-index:2;padding:60px 24px;max-width:760px;}

  .section{padding:70px 6vw; max-width:1100px; margin:0 auto;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
  .section-head .eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:0.78rem;color:var(--brown-soft);font-weight:600;margin-bottom:10px;}
  .section-head h2{font-size:2rem;color:var(--brown-dark);margin-bottom:12px;}
  .section-head p{color:#6b5a45;font-size:1rem;}

  .divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px auto 18px;}
  .divider .line{width:34px;height:1px;background:linear-gradient(90deg, transparent, var(--gold), transparent);}
  .divider .diamond{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;}

  .about-text{max-width:720px;margin:0 auto;text-align:center;color:var(--brown);font-size:1.02rem;}

  .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;max-width:900px;margin-left:auto;margin-right:auto;}
  @media (max-width:760px){.features-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.features-grid{grid-template-columns:1fr;}}
  .feature-item{text-align:center;padding:20px 12px;border-radius:14px;background:#fff;border:1px solid #e4dac6;transition:transform .3s ease, box-shadow .3s ease;}
  .feature-item:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(43,29,18,0.14);}
  .feature-item .feature-icon{width:44px;height:44px;border-radius:50%;background:rgba(217,164,65,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
  .feature-item .feature-icon svg{width:22px;height:22px;stroke:var(--gold);}
  .feature-item span{font-size:0.84rem;font-weight:600;color:var(--brown-dark);line-height:1.35;display:block;}

  /* Cómo funciona / steps section — mismo componente que bar-flotante.html */
  .steps-section{background:linear-gradient(180deg, var(--cream), var(--cream-soft));}
  .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin:0 auto;}
  @media (max-width:760px){.steps-grid{grid-template-columns:1fr;}}
  .step-card{
    background:#fff;border-radius:16px;padding:34px 26px;text-align:center;
    box-shadow:0 10px 30px rgba(43,29,18,0.1);border:1px solid #f0e6d0;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .step-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(43,29,18,0.16);}
  .step-num{
    width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg, var(--gold-light), var(--gold));
    color:var(--brown-dark);font-family:'Playfair Display',serif;font-weight:700;font-size:1.25rem;
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 18px rgba(217,164,65,0.35);
  }
  .step-card h3{font-size:1.15rem;color:var(--brown-dark);margin-bottom:8px;}
  .step-card p{font-size:0.88rem;color:#6b5a45;}

  .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:12px;}
  .gallery figure{overflow:hidden;border-radius:12px;position:relative;margin:0;box-shadow:0 8px 24px rgba(43,29,18,0.15);}
  .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .gallery figure:hover img{transform:scale(1.08);}
  .gallery figure.wide{grid-column:span 2;}
  .gallery figure.tall{grid-row:span 2;}
  @media (max-width:860px){
    .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
    .gallery figure.wide{grid-column:span 2;}
    .gallery figure.tall{grid-row:span 1;}
  }

  .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  @media (max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.pricing-grid{grid-template-columns:1fr;}}
  .price-card{
    background:#fff;border-radius:14px;padding:28px 24px;border:1px solid #e4dac6;
    display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .3s ease, box-shadow .3s ease;
  }
  .price-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,29,18,0.18);}
  .price-card.featured{border:2px solid var(--gold);box-shadow:0 12px 30px rgba(217,164,65,0.18);}
  .price-card .tag{
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    background:var(--gold);color:var(--brown-dark);font-size:0.7rem;font-weight:700;
    padding:4px 14px;border-radius:14px;letter-spacing:0.3px;white-space:nowrap;
  }
  .price-card .plan-name{font-size:1.05rem;font-weight:600;color:var(--brown-dark);}
  .price-card .plan-hours{font-size:0.82rem;color:var(--brown-soft);}
  .price-card .plan-price{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--brown-dark);}
  .price-card .plan-price span{font-size:0.85rem;font-family:'Poppins',sans-serif;color:var(--brown-soft);font-weight:400;}
  .price-card ul{list-style:none;display:flex;flex-direction:column;gap:7px;flex-grow:1;}
  .price-card ul li{font-size:0.85rem;color:var(--text-dark);padding-left:18px;position:relative;}
  .price-card ul li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;}
  .price-card .btn-primary{padding:11px;font-size:0.85rem;text-align:center;}
  .pricing-note{text-align:center;font-size:0.85rem;color:var(--brown-soft);margin-top:24px;}

  .cta-banner{
    background:linear-gradient(135deg, var(--brown-dark), var(--river-blue));
    color:var(--cream);text-align:center;padding:60px 6vw;
  }
  .cta-banner h2{font-size:1.9rem;margin-bottom:14px;}
  .cta-banner p{opacity:0.85;margin-bottom:26px;max-width:520px;margin-left:auto;margin-right:auto;}

  .form-section{background:linear-gradient(180deg, var(--cream-soft), var(--cream));padding:70px 6vw 100px;}
  .form-wrap{max-width:640px;margin:0 auto;}
  .form-wrap .card{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(43,29,18,0.16);padding:40px 36px;border-top:5px solid var(--gold);}
  .form-wrap .card h3{color:var(--brown-dark);font-size:1.4rem;margin-bottom:6px;}
  .form-wrap .card .subtitle{color:#8a795f;font-size:0.9rem;margin-bottom:26px;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:0.85rem;font-weight:600;color:var(--brown);margin-bottom:7px;}
  .field .req{color:#c0392b;}
  .field input,.field select,.field textarea{
    width:100%;padding:12px 16px;border:1.5px solid #e4dac6;border-radius:9px;
    font-size:16px;font-family:inherit;background:#fdfbf7;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,164,65,0.16);}
  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:560px){.row-2{grid-template-columns:1fr;} .form-wrap .card{padding:26px 20px;}}
  .contact-pref{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
  .contact-pref label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:0.85rem;background:var(--cream-soft);padding:8px 14px;border-radius:20px;cursor:pointer;}
  .contact-pref input[type="radio"]{width:auto;accent-color:var(--gold);}
  button.submit-btn{
    width:100%;padding:16px;margin-top:10px;background:linear-gradient(135deg, var(--gold-light), var(--gold));
    color:var(--brown-dark);font-weight:700;font-size:1rem;border:none;border-radius:9px;cursor:pointer;
    box-shadow:0 10px 24px rgba(217,164,65,0.35);
  }
  .privacy-note{font-size:0.76rem;color:#a3927a;text-align:center;margin-top:16px;}
  .punctuality-note{font-size:0.82rem;color:#2f6b5e;font-weight:500;text-align:center;background:rgba(58,157,93,0.1);border:1px solid rgba(58,157,93,0.28);padding:10px 14px;border-radius:8px;margin-top:16px;}

  footer{background:var(--brown-dark);color:var(--cream-soft);padding:50px 6vw 26px;}
  .footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
  @media (max-width:760px){.footer-inner{grid-template-columns:1fr 1fr;}}
  @media (max-width:480px){.footer-inner{grid-template-columns:1fr;text-align:center;}}
  .footer-brand .flag-line{width:60px;height:4px;background:linear-gradient(90deg, #FCD116 34%, #003893 34%, #003893 67%, #CE1126 67%);margin:0 0 14px;border-radius:2px;}
  .footer-brand strong{color:var(--gold-light);font-family:'Playfair Display',serif;font-size:1.2rem;}
  .footer-brand p{font-size:0.86rem;opacity:0.75;margin-top:10px;max-width:340px;}
  .footer-col h5{font-size:0.82rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold-light);margin-bottom:12px;}
  .footer-col p, .footer-col a{font-size:0.86rem;opacity:0.8;display:block;margin-bottom:6px;}
  .footer-col a:hover{opacity:1;color:var(--gold-light);}
  .footer-bottom{text-align:center;font-size:0.76rem;opacity:0.5;margin-top:36px;padding-top:20px;border-top:1px solid rgba(250,246,238,0.1);}

  @media (max-width:560px){.hero-content h1{font-size:2.1rem;}}

  /* --- Pulido premium (igual que Richy's Bar) --- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);}
  .reveal.visible{opacity:1;transform:translateY(0);}
  .gallery figure.reveal:nth-child(2n){transition-delay:.08s;}
  .gallery figure.reveal:nth-child(3n){transition-delay:.16s;}
  .features-grid .feature-item.reveal:nth-child(2){transition-delay:.08s;}
  .features-grid .feature-item.reveal:nth-child(3){transition-delay:.16s;}
  .features-grid .feature-item.reveal:nth-child(4){transition-delay:.24s;}
  .pricing-grid .price-card.reveal:nth-child(2){transition-delay:.08s;}
  .pricing-grid .price-card.reveal:nth-child(3){transition-delay:.16s;}

  .lightbox{
    position:fixed;inset:0;background:rgba(12,7,4,0.94);display:flex;align-items:center;justify-content:center;
    z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:26px;cursor:zoom-out;
  }
  .lightbox.open{opacity:1;pointer-events:auto;}
  .lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,0.55);}
  .gallery figure{cursor:zoom-in;}

  .mobile-cta{display:none;}
  @media (max-width:720px){
    .mobile-cta{
      display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;
      background:rgba(10,24,38,0.97);backdrop-filter:blur(8px);padding:12px 16px;
      box-shadow:0 -6px 24px rgba(0,0,0,0.35);
    }
    .mobile-cta a{flex:1;text-align:center;}
    body{padding-bottom:74px;}
    /* Deja aire bajo el hero para que el texto no quede tapado por
       la barra fija (.mobile-cta) + el boton flotante de WhatsApp. */
    .hero{padding-bottom:150px;}
  }

  .fab-cta{
    position:fixed;right:28px;bottom:28px;z-index:95;
    background:linear-gradient(135deg, var(--gold-light), var(--gold));
    color:var(--brown-dark);padding:15px 26px;border-radius:32px;text-decoration:none;
    font-weight:700;font-size:0.92rem;box-shadow:0 12px 30px rgba(217,164,65,0.45);
    display:inline-flex;align-items:center;opacity:0;pointer-events:none;
    transform:translateY(16px);transition:opacity .3s ease, transform .3s ease;
  }
  .fab-cta.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .fab-cta:hover{transform:translateY(-3px);}
  @media (max-width:720px){.fab-cta{display:none;}}

  /* Botón flotante "Cómo llegar" — mismo patrón de aparición que
     .fab-cta (scroll listener compartido), apilado justo encima. */
  .fab-map{
    position:fixed;right:28px;bottom:96px;z-index:95;
    background:rgba(250,246,238,0.97);color:var(--brown-dark);
    padding:12px 22px;border-radius:32px;text-decoration:none;border:1.5px solid var(--gold);
    font-weight:700;font-size:0.85rem;box-shadow:0 10px 26px rgba(0,0,0,0.3);
    display:inline-flex;align-items:center;gap:8px;opacity:0;pointer-events:none;
    transform:translateY(16px);transition:opacity .3s ease, transform .3s ease, background .2s ease;
  }
  .fab-map svg{width:16px;height:16px;flex-shrink:0;}
  .fab-map.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .fab-map:hover{transform:translateY(-3px);background:var(--gold-light);}
  @media (max-width:720px){.fab-map{display:none;}}

  /* Botón flotante WhatsApp — siempre visible (no depende del
     scroll listener de fab-cta/fab-map), apilado encima de ambos.
     Número centralizado de Santfrancisco (Twilio); mensaje
     pre-cargado específico del Bote. En móvil se recoloca junto
     al mobile-cta y colapsa a solo ícono. */
  .whatsapp-fab{
    position:fixed;right:28px;bottom:164px;z-index:95;
    display:inline-flex;align-items:center;gap:9px;
    background:#25D366;color:#fff;font-weight:700;font-size:0.85rem;
    padding:13px 20px;border-radius:32px;text-decoration:none;
    box-shadow:0 10px 26px rgba(37,211,102,0.4);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .whatsapp-fab:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(37,211,102,0.5);}
  .whatsapp-fab svg{flex-shrink:0;}
  @media (max-width:720px){
    .whatsapp-fab{right:16px;bottom:86px;padding:13px;border-radius:50%;box-shadow:0 8px 22px rgba(37,211,102,0.45);}
    .whatsapp-fab-text{display:none;}
  }
  .mobile-cta{gap:10px;}
  .mobile-cta .btn-secondary{padding:12px 14px;font-size:0.82rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
  .mobile-cta .btn-secondary svg{width:15px;height:15px;flex-shrink:0;}

  .share-widget{margin-top:16px;}
  .share-label{color:#c9baa4;font-size:0.8rem;margin-bottom:8px;}
  .share-buttons{display:flex;gap:10px;flex-wrap:wrap;}
  .share-btn{
    display:inline-flex;align-items:center;gap:6px;background:rgba(240,201,106,0.1);
    border:1px solid rgba(240,201,106,0.35);color:var(--gold-light);font-size:0.8rem;font-weight:600;
    padding:8px 14px;border-radius:20px;cursor:pointer;text-decoration:none;
    font-family:inherit;transition:background .2s ease;
  }
  .share-btn:hover{background:rgba(240,201,106,0.2);}
  .share-btn .icon{width:13px;height:13px;margin-right:0;}