:root{
    /* Paleta propia de Planchón: base teal/petróleo (evoca la
       plataforma flotante sobre el agua para grupos) 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 de fondo. */
    --brown-dark:#0d211f;
    --brown:#1f4a45;
    --brown-soft:#4a7b73;
    --gold:#d9a441;
    --gold-light:#f0c96a;
    --river-blue:#0f3b4a;
    --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(13,33,31,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: antes esta regla pintaba un gradiente sólido (sin
       transparencia) ENCIMA de la foto usando la sintaxis de
       "background" con dos capas — como el primer valor listado
       queda arriba, el gradiente opaco tapaba la foto por completo
       y la sección se veía negra. background-color aquí es solo
       un color de respaldo (se ve si la imagen no carga), no una
       capa que la cubra. El oscurecimiento real para que el texto
       sea legible ya lo hace .hero-bg::after más abajo. */
    position:absolute;inset:-4%;
    background-color:#0f2b28;
    background-image:url('../../images/optimized/planchon-planchon-sunset-hero.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,20,18,0.25) 0%, rgba(6,20,18,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(3,1fr);gap:18px;margin-top:40px;}
  @media (max-width:560px){.features-grid{grid-template-columns:repeat(2,1fr);}}

  /* 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;}
  .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;}

  .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-hero{
    max-width:620px;margin:0 auto;background:linear-gradient(160deg,#fff, var(--cream-soft));
    border:2px solid var(--gold);border-radius:22px;padding:44px 38px;text-align:center;
    box-shadow:0 22px 50px rgba(43,29,18,0.16);position:relative;
  }
  .pricing-hero .tag{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:var(--gold);color:var(--brown-dark);font-size:0.72rem;font-weight:700;
    padding:5px 16px;border-radius:14px;letter-spacing:0.4px;white-space:nowrap;
  }
  .pricing-hero .rate{font-family:'Playfair Display',serif;font-size:3rem;color:var(--brown-dark);margin:10px 0 2px;}
  .pricing-hero .rate span{font-size:1rem;font-family:'Poppins',sans-serif;color:var(--brown-soft);font-weight:500;}
  .pricing-hero .capacity{font-size:0.95rem;color:var(--brown-soft);font-weight:600;margin-bottom:22px;}
  .pricing-hero ul{list-style:none;display:flex;flex-direction:column;gap:9px;text-align:left;max-width:340px;margin:0 auto 28px;}
  .pricing-hero ul li{font-size:0.92rem;color:var(--text-dark);padding-left:22px;position:relative;}
  .pricing-hero ul li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;}

  .duration-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:620px;margin:26px auto 0;}
  @media (max-width:560px){.duration-examples{grid-template-columns:1fr;}}
  .duration-card{background:#fff;border:1px solid #e4dac6;border-radius:12px;padding:16px 10px;text-align:center;}
  .duration-card .dur-h{font-size:0.8rem;color:var(--brown-soft);font-weight:600;margin-bottom:4px;}
  .duration-card .dur-p{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--brown-dark);}
  .pricing-note{text-align:center;font-size:0.82rem;color:var(--brown-soft);margin-top:16px;}

  .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;}
  .features-grid .feature-item.reveal:nth-child(5){transition-delay:.32s;}
  .features-grid .feature-item.reveal:nth-child(6){transition-delay:.4s;}
  .duration-examples .duration-card.reveal:nth-child(2){transition-delay:.08s;}
  .duration-examples .duration-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(13,33,31,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 Planchón. 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;}