/* Hotel Bambú Tayrona, primera versión (Om.line Studio, 18/10/2026).
     Sobre la base del boceto, con el aire de la web que eligió Martha (YAY Sustainable): toda la
     página sobre un mismo fondo arena, sin franjas de color que corten los bloques; títulos a mano
     con una ramita de bambú, y cañas de bambú (los colores del logo) que separan algunos bloques.
     Solo la portada (video) y el pie salen del fondo. */
  :root{
    --arena:#F5E6C8; --arena-clara:#FBF3E2; --borde:#E3CB98;
    --verde:#003736; --tinta:#2B3A2F; --suave:#5C6B5E;
    --bambu:#E4B33F; --bambu-osc:#B8852A; --nudo:#7E5A14;
    --hoja:#4E8F32; --hoja-osc:#2F6B2A; --rojo:#D2331C; --wsp:#15803D; /* verde WhatsApp oscurecido: con letra blanca cumple contraste 5:1 */
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:100px; }
  html, body{ overflow-x:clip; }
  body{ font-family:'Raleway',sans-serif; font-size:16px; line-height:1.65; color:var(--tinta); background:var(--arena); }
  img{ display:block; max-width:100%; height:auto; }
  a{ color:inherit; }
  .w{ width:min(1140px, 100% - 32px); margin-inline:auto; }
  .estrecho{ width:min(760px, 100% - 32px); margin-inline:auto; }
  .centro{ text-align:center; }
  .oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

  /* Títulos a mano, con la ramita de bambú debajo (como en YAY) */
  .titulo{ font-family:'Caveat',cursive; font-weight:700; color:var(--verde); font-size:clamp(46px, 6.4vw, 76px); line-height:1; text-align:center; }
  .ramita{ display:block; width:150px; height:38px; margin:6px auto 18px; }
  .bajada{ text-align:center; color:var(--suave); max-width:640px; margin:0 auto 34px; font-size:17px; }
  .etiqueta{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bambu-osc); }

  /* Botones */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 24px; border-radius:999px; border:0; background:var(--verde); color:var(--arena-clara); font:700 15px 'Raleway',sans-serif; text-decoration:none; cursor:pointer; transition:background .25s, transform .25s; }
  .btn:hover{ background:#00504E; transform:translateY(-1px); }
  .btn.wsp{ background:var(--wsp); color:#fff; }
  .btn.wsp:hover{ background:#116932; }
  .btn.claro{ background:transparent; color:var(--verde); box-shadow:inset 0 0 0 2px var(--verde); }
  .btn.claro:hover{ background:var(--verde); color:var(--arena-clara); }
  .btn svg{ width:20px; height:20px; flex:none; }
  .enlace{ font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--verde); text-decoration:none; border-bottom:2px solid var(--bambu); padding-bottom:1px; }
  .enlace:hover{ border-color:var(--rojo); }

  /* ——— Caña de bambú: separa bloques. Se dibuja sola al llegar con el scroll. ——— */
  .bambu{ position:relative; height:96px; margin-block:26px; pointer-events:none; }
  /* La caña: cilindro con brillo, fibras a lo largo, manchas de la guadua y nudos con relieve
     (sombra antes del nudo, anillo oscuro, filo claro y sombra después). Todo en CSS. */
  .bambu .cana{ position:absolute; left:-3%; right:-3%; top:50%; height:19px; margin-top:-9.5px; border-radius:10px; --seg:150px;
    /* La textura (brillo, fibras, manchas de la guadua y nudos con relieve) es una imagen de 4 tramos
       que se repite: se ve igual que dibujada con degradés, pero cuesta casi nada dibujarla. */
    background:#C99228 url(img/cana.png) repeat-x 0 0 / calc(var(--seg) * 4) 100%;
    box-shadow:0 7px 7px -3px rgba(60,40,5,.28), inset 0 -2px 3px rgba(70,45,5,.35);
    transform:rotate(var(--giro, -.7deg)); }
  .bambu .cana.b{ left:52%; right:-4%; top:calc(50% + 16px); height:14px; margin-top:-7px; --seg:118px; transform:rotate(1.6deg); opacity:.95; }
  .bambu .cana.c{ left:-4%; right:64%; top:calc(50% - 16px); height:14px; margin-top:-7px; --seg:118px; transform:rotate(-2.2deg); }
  .brote{ position:absolute; left:var(--x); top:calc(50% - 4px); width:0; height:0; transform-origin:0 0; animation:mecer 7s ease-in-out infinite; animation-delay:var(--d, 0s); }
  .brote::before{ content:""; position:absolute; left:-2px; top:-2px; width:26px; height:3px; border-radius:2px; background:linear-gradient(180deg,#9C7A2A,#5E6B1E); rotate:-28deg; transform-origin:0 50%; }
  .brote.abajo{ top:calc(50% + 6px); scale:1 -1; }
  .brote svg{ position:absolute; left:-4px; top:-12px; width:84px; height:24px; color:var(--hoja); transform-origin:4px 50%; }
  .brote svg:nth-child(1){ rotate:-42deg; width:72px; }
  .brote svg:nth-child(2){ rotate:-16deg; width:96px; color:var(--hoja-osc); }
  .brote svg:nth-child(3){ rotate:10deg; width:62px; }
  /* Las hojas se mecen solo mientras su caña está en pantalla: fuera de vista no gastan procesador. */
  .brote{ animation-play-state:paused; }
  .bambu.en-vista .brote{ animation-play-state:running; }
  @keyframes mecer{ 0%,100%{ rotate:0deg; } 50%{ rotate:-5deg; } }
  html.js .bambu .cana{ clip-path:inset(0 100% 0 0 round 9px); transition:clip-path 1.6s cubic-bezier(.22,.7,.2,1); }
  html.js .bambu .cana.b{ transition-delay:.35s; }
  html.js .bambu .brote svg{ opacity:0; scale:.4; transition:opacity .6s, scale .9s cubic-bezier(.3,1.5,.5,1); transition-delay:1s; }
  html.js .bambu.visto .cana{ clip-path:inset(0 0 0 0 round 9px); }
  html.js .bambu.visto .brote svg{ opacity:1; scale:1; }

  /* Aparecer al llegar */
  html.js .aparece{ opacity:0; translate:0 26px; transition:opacity .9s ease, translate .9s ease; }
  html.js .aparece.visto{ opacity:1; translate:0 0; }

  /* ——— Barra de arriba ——— */
  .barra{ position:fixed; inset:0 0 auto 0; z-index:30; transition:background .35s, box-shadow .35s; }
  .barra .w{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:10px; transition:padding .3s; }
  .barra.solida .w{ padding-block:6px; }
  .logo{ display:flex; align-items:center; }
  /* Sobre la portada, un resplandor claro alrededor para que "Hotel" (marrón oscuro) se lea sobre la foto */
  .logo img{ height:124px; width:auto; filter:drop-shadow(0 0 1px rgba(251,243,226,.95)) drop-shadow(0 0 6px rgba(251,243,226,.85)) drop-shadow(0 0 14px rgba(251,243,226,.5)); transition:height .3s, filter .3s; }
  .barra.solida .logo img{ height:76px; filter:none; }
  .menu{ display:flex; align-items:center; gap:24px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .menu a{ color:#fff; text-decoration:none; text-shadow:0 1px 8px rgba(0,0,0,.45); }
  .menu a:hover{ text-decoration:underline; text-decoration-color:var(--bambu); text-decoration-thickness:2px; text-underline-offset:6px; }
  .menu .btn{ padding:10px 18px; text-shadow:none; color:#fff; }
  .barra.solida{ background:rgba(245,230,200,.96); box-shadow:0 2px 16px rgba(60,40,0,.12); backdrop-filter:blur(6px); }
    .barra.solida .menu a:not(.btn){ color:var(--verde); text-shadow:none; }
  .abrir-menu{ display:none; width:46px; height:46px; border:0; border-radius:12px; background:rgba(251,243,226,.92); color:var(--verde); cursor:pointer; }
  .abrir-menu svg{ width:24px; height:24px; margin:auto; }

  /* ——— Portada ——— */
  .portada{ position:relative; min-height:max(560px, 88vh); display:grid; align-items:center; color:#fff; }
  .portada .fondo{ position:absolute; inset:0; overflow:hidden; background:var(--verde); }
  .portada video, .portada .fondo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* Entrada: la foto espera ampliada, calzada con el último cuadro del clip; el clip se desvanece
     encima de ella y después la foto se abre hasta su encuadre. */
  .portada .hero-clip{ z-index:1; transition:opacity .9s ease; }
  .portada .hero-clip.fuera{ opacity:0; }
  .portada .hero-foto{ transition:transform 2.4s cubic-bezier(.2,.7,.2,1); }
  .portada.intro .hero-foto{ transform:scale(1.28); }
  /* Velo sobre la foto para que se lea el título: más suave mientras pasa el clip, y se oscurece
     cuando la foto queda fija. */
  .portada .fondo::after{ z-index:2; content:''; position:absolute; inset:0; transition:opacity 2s ease;
    background:radial-gradient(ellipse 60% 46% at 50% 44%, rgba(0,26,25,.42), transparent 75%), linear-gradient(180deg, rgba(0,30,29,.6) 0%, rgba(0,30,29,.4) 45%, rgba(0,30,29,.62) 100%); }
  .portada.intro .fondo::after{ opacity:.45; }
  .portada .w{ position:relative; z-index:2; text-align:center; padding-block:120px 150px; }
  .portada h1{ font-family:'Caveat',cursive; font-weight:700; font-size:clamp(62px, 10vw, 128px); line-height:.92; text-shadow:0 2px 4px rgba(0,0,0,.35), 0 4px 28px rgba(0,0,0,.45); }
  .portada .lema{ font-weight:600; font-size:clamp(19px, 2.4vw, 26px); margin-top:14px; text-shadow:0 2px 14px rgba(0,0,0,.4); }
  .portada .donde{ font-size:15px; opacity:.92; margin-top:8px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
  .portada .acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
  .portada .btn.claro{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); }
  .portada .btn.claro:hover{ background:#fff; color:var(--verde); }
  .portada > .bambu{ position:absolute; left:0; right:0; bottom:-48px; margin:0; z-index:3; }

  /* Reserva directa, justo debajo de la caña que cierra la portada */
  .reserva{ position:relative; z-index:4; margin-top:46px; }
  .reserva form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto; gap:12px; align-items:end; padding:18px; background:var(--arena-clara); border:1px solid var(--borde); border-radius:20px; box-shadow:0 16px 40px rgba(90,62,10,.16); }
  .reserva label{ display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); }
  .reserva input, .reserva select{ font:500 15px 'Raleway',sans-serif; color:var(--tinta); padding:11px 12px; border:1px solid var(--borde); border-radius:12px; background:#fff; width:100%; min-width:0; }
  .reserva .btn{ height:46px; }
  .reserva p{ text-align:center; font-size:14px; color:var(--suave); margin-top:12px; }
  .reserva p b{ color:var(--verde); }

  /* ——— El hotel ——— */
  .seccion{ padding-block:40px; }
  .bienvenida{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:56px; align-items:center; margin-top:10px; }
  .bienvenida .texto p{ margin-bottom:16px; font-size:17px; }
  .bienvenida .texto p:first-child{ font-size:20px; font-weight:500; color:var(--verde); }
  .bienvenida .foto{ position:relative; }
  .bienvenida .foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:999px 999px 26px 26px; box-shadow:0 18px 40px rgba(90,62,10,.18); }
  .bienvenida .foto .chica{ position:absolute; left:-46px; bottom:-28px; width:44%; aspect-ratio:1; border-radius:50%; border:8px solid var(--arena); box-shadow:none; }
  .redondas{ display:flex; gap:30px; margin-top:28px; flex-wrap:wrap; }
  .redondas a{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
  .redondas img{ width:104px; height:104px; border-radius:50%; object-fit:cover; border:4px solid var(--arena-clara); box-shadow:0 6px 18px rgba(90,62,10,.18); transition:transform .3s; }
  .redondas a:hover img{ transform:scale(1.06) rotate(-2deg); }
  .redondas span{ font-family:'Caveat',cursive; font-weight:700; font-size:28px; color:var(--verde); line-height:1; }

  .servicios{ display:grid; grid-template-columns:repeat(8, 1fr); gap:22px 12px; margin-top:64px; }
  .servicios div{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:13.5px; font-weight:600; line-height:1.3; color:var(--verde); }
  .servicios svg{ width:44px; height:44px; color:var(--bambu-osc); }

  /* ——— Habitaciones ——— */
  .habs{ display:grid; grid-template-columns:repeat(2, 1fr); gap:34px 30px; }
  .hab img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:22px; box-shadow:0 14px 34px rgba(90,62,10,.16); transition:transform .5s; }
  .hab:hover img{ transform:translateY(-4px); }
  .hab h3{ font-family:'Caveat',cursive; font-weight:700; font-size:40px; line-height:1; color:var(--verde); margin-top:18px; }
  .hab .cap{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bambu-osc); margin:6px 0 8px; }
  .hab p{ color:var(--tinta); margin-bottom:12px; }
  .hab .pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .hab .precio{ font-size:14px; color:var(--suave); }
  .hab .precio b{ font-size:17px; color:var(--verde); }
  .incluye{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:38px; font-size:15px; font-weight:600; color:var(--verde); }
  .incluye span::before{ content:''; display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:var(--bambu); vertical-align:1px; }

  /* ——— Pasadía ——— */
  .pasadia{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center; }
  .pasadia .fotos{ position:relative; }
  .pasadia .fotos img:first-child{ width:86%; aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:0 18px 40px rgba(90,62,10,.18); }
  .pasadia .fotos img:last-child{ position:absolute; right:0; bottom:-14px; width:44%; aspect-ratio:3/4; object-fit:cover; border-radius:999px 999px 20px 20px; border:8px solid var(--arena); }
  .pasadia h3{ font-family:'Caveat',cursive; font-weight:700; font-size:clamp(40px, 5vw, 58px); color:var(--verde); line-height:1; }
  .pasadia .horario{ display:flex; gap:28px; margin:18px 0; }
  .pasadia .horario div{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); }
  .pasadia .horario b{ display:block; font-size:30px; letter-spacing:0; text-transform:none; font-family:'Caveat',cursive; color:var(--verde); line-height:1.1; }
  .pasadia ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:6px 0 18px; }
  .pasadia li::before{ content:''; display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:var(--hoja); vertical-align:1px; }
  .pasadia .precio{ padding:16px 18px; border:2px dashed var(--borde); border-radius:18px; margin-bottom:20px; }
  .pasadia .precio b{ font-size:22px; color:var(--verde); }
  .pasadia .precio small{ display:block; color:var(--suave); font-size:14px; margin-top:4px; }

  /* ——— Experiencias ——— */
  .exps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 28px; }
  .exp{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .exp .imagen{ width:100%; max-width:300px; aspect-ratio:3/4; border-radius:999px 999px 24px 24px; overflow:hidden; box-shadow:0 14px 34px rgba(90,62,10,.15); background:var(--arena-clara); display:grid; place-items:center; }
  .exp .imagen img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
  .exp:hover .imagen img{ transform:scale(1.05); }
  .exp .imagen svg{ width:58%; height:auto; }
  .exp .imagen.dibujo{ background:radial-gradient(circle at 50% 40%, #FFF4D9, #F0D9A8); }
  .exp h3{ font-family:'Caveat',cursive; font-weight:700; font-size:38px; line-height:1; color:var(--verde); margin:18px 0 8px; }
  .exp p{ font-size:15.5px; max-width:320px; margin-bottom:10px; }

  /* ——— Fotos (carrusel del boceto, con GSAP Draggable + Inertia) ——— */
  .carrusel{ position:relative; outline:none; }
  .car-ventana{ position:relative; aspect-ratio:16/9; border-radius:26px; overflow-x:auto; scroll-snap-type:x mandatory; background:var(--verde); box-shadow:0 18px 44px rgba(90,62,10,.2); }
  .carrusel.listo .car-ventana{ overflow:hidden; cursor:grab; touch-action:pan-y; }
  .carrusel.listo .car-ventana:active{ cursor:grabbing; }
  .car-pista{ display:flex; height:100%; will-change:transform; }
  .car-foto{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; scroll-snap-align:start; }
  .car-foto img{ width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
  .car-foto figcaption{ position:absolute; inset:auto 0 0 0; padding:54px 26px 20px; color:#fff; font-family:'Caveat',cursive; font-weight:700; font-size:32px; line-height:1; background:linear-gradient(transparent, rgba(0,30,29,.7)); pointer-events:none; }
  .car-flecha{ position:absolute; top:50%; translate:0 -50%; width:48px; height:48px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(251,243,226,.92); color:var(--verde); cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.2); }
  .car-flecha svg{ width:22px; height:22px; }
  .car-flecha.ant{ left:16px; } .car-flecha.sig{ right:16px; }
  .car-cuenta{ position:absolute; top:16px; right:16px; padding:4px 12px; border-radius:999px; background:rgba(0,30,29,.7); color:#fff; font-weight:700; font-size:12px; letter-spacing:.06em; }
  .car-minis{ display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding:4px 2px 6px; }
  .car-minis button{ flex:0 0 82px; height:56px; padding:0; border:3px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; opacity:.6; background:none; transition:opacity .3s, border-color .3s; }
  .car-minis button img{ width:100%; height:100%; object-fit:cover; }
  .car-minis button[aria-current="true"]{ opacity:1; border-color:var(--bambu); }

  /* ——— Cómo llegar: mapa dibujado ——— */
  .llegar{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:44px; align-items:center; }
  .mapa{ width:100%; height:auto; }
  .mapa text{ font-family:'Caveat',cursive; font-weight:700; }
  html.js .mapa .trazo{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s ease; }
  html.js .mapa.visto .trazo{ stroke-dashoffset:0; }
  .distancias{ list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:12px; }
  .distancias li{ display:flex; align-items:baseline; gap:12px; }
  .distancias b{ font-family:'Caveat',cursive; font-size:32px; line-height:1; color:var(--verde); min-width:92px; }
  .llegar .acciones{ display:flex; flex-wrap:wrap; gap:10px; }

  /* ——— Contacto ——— */
  .contacto{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:start; }
  .contacto form{ display:flex; flex-direction:column; gap:12px; }
  .contacto input, .contacto textarea{ font:500 15px 'Raleway',sans-serif; color:var(--tinta); padding:13px 14px; border:1px solid var(--borde); border-radius:14px; background:var(--arena-clara); }
  .contacto textarea{ min-height:120px; resize:vertical; }
  .contacto form .btn{ align-self:flex-start; }
  .datos{ display:flex; flex-direction:column; gap:14px; font-size:16px; }
  .datos a{ text-decoration:none; }
  .datos .fila{ display:flex; gap:14px; align-items:flex-start; }
  .datos svg{ width:24px; height:24px; flex:none; color:var(--bambu-osc); margin-top:2px; }
  .redes{ display:flex; gap:10px; margin-top:6px; }
  .redes a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--verde); color:var(--arena-clara); transition:background .25s; }
  .redes a:hover{ background:var(--bambu-osc); }
  .redes svg{ width:20px; height:20px; color:currentColor; margin:0; }

  .insta{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; margin-top:24px; }
  .insta a{ display:block; aspect-ratio:1; border-radius:16px; overflow:hidden; }
  .insta img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
  .insta a:hover img{ transform:scale(1.07); }

  /* ——— Pie ——— */
  footer{ position:relative; background:var(--verde); color:var(--arena); margin-top:70px; padding:80px 16px 34px; }
  footer > .bambu{ position:absolute; left:0; right:0; top:-48px; margin:0; }
  footer .w{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; }
  footer .marca img{ width:280px; height:auto; background:var(--arena-clara); border-radius:22px; padding:12px 18px; }
  footer .marca p{ margin-top:14px; font-size:14px; opacity:.85; max-width:300px; }
  footer .pie-titulo{ font-family:'Caveat',cursive; font-size:30px; font-weight:700; color:var(--bambu); margin-bottom:10px; line-height:1; }
  footer nav{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
  footer nav a{ text-decoration:none; opacity:.9; }
  footer nav a:hover{ opacity:1; text-decoration:underline; }
  footer .final{ width:min(1140px, 100%); margin:40px auto 0; padding-top:18px; border-top:1px solid rgba(245,230,200,.2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; opacity:.75; }

  .flotante{ position:fixed; right:18px; bottom:18px; z-index:25; width:60px; height:60px; border-radius:50%; background:var(--wsp); display:grid; place-items:center; box-shadow:0 6px 22px rgba(0,0,0,.28); }
  .flotante svg{ width:32px; height:32px; color:#fff; }

  /* Modo revisión (?revisar): marca los datos que Martha tiene que confirmar */
  html.revisar [data-confirmar]{ background:rgba(255,214,0,.45); box-shadow:0 0 0 2px rgba(210,51,28,.55); border-radius:4px; cursor:help; }
  .panel-revisar{ position:fixed; left:14px; bottom:14px; z-index:40; width:min(360px, calc(100% - 28px)); max-height:46vh; overflow:auto; padding:14px 16px; background:#fff; border:2px solid var(--rojo); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:13px; }
  .panel-revisar h5{ font-size:14px; margin-bottom:6px; color:var(--rojo); }
  .panel-revisar ol{ padding-left:18px; display:flex; flex-direction:column; gap:4px; }
  .panel-revisar a{ text-decoration:underline; cursor:pointer; }

  :focus-visible{ outline:3px solid var(--rojo); outline-offset:3px; }

  @media (max-width:1020px){
    .servicios{ grid-template-columns:repeat(4, 1fr); }
    .menu{ position:fixed; inset:96px 12px auto 12px; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:var(--arena-clara); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.2); display:none; }
    .menu a:not(.btn){ color:var(--verde); text-shadow:none; padding:10px 8px; }
    .menu.abierto{ display:flex; }
    .abrir-menu{ display:grid; }
  }
  @media (max-width:860px){
    .reserva form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .reserva .btn, .reserva label:nth-child(3){ grid-column:1 / -1; }
    .bienvenida, .pasadia, .llegar, .contacto{ grid-template-columns:minmax(0, 1fr); gap:40px; }
    .bienvenida .foto{ width:min(420px, 88%); margin:0 auto 20px; }
    .bienvenida .foto .chica{ left:-24px; }
    .pasadia .fotos{ width:min(460px, 100%); margin-inline:auto; }
    .exps{ grid-template-columns:1fr 1fr; }
    .insta{ grid-template-columns:repeat(3, 1fr); }
    footer .w{ grid-template-columns:1fr 1fr; }
    footer .marca{ grid-column:1 / -1; }
  }
  @media (max-width:600px){
    body{ font-size:15.5px; }
    .habs, .exps{ grid-template-columns:minmax(0, 1fr); }
    .exp .imagen{ max-width:250px; }
    .reserva form{ padding:14px; }
    .servicios{ grid-template-columns:repeat(2, 1fr); margin-top:48px; }
    .redondas{ justify-content:center; gap:18px; }
    .redondas img{ width:86px; height:86px; }
    .pasadia ul{ grid-template-columns:1fr; }
    .portada .w{ padding-block:110px 130px; }
    .logo img{ height:88px; }
    .barra.solida .logo img{ height:58px; }
    .car-ventana{ aspect-ratio:4/5; border-radius:20px; }
    .car-flecha{ width:40px; height:40px; }
    .car-minis button{ flex-basis:64px; height:46px; }
    .bambu{ height:80px; }
    .bambu .cana{ height:15px; margin-top:-7.5px; --seg:110px !important; }
    .brote svg{ scale:.8; }
    footer .w{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .brote{ animation:none; }
    html.js .bambu .cana, html.js .bambu .brote svg, html.js .aparece, html.js .mapa .trazo{ transition:none; }
  }

  /* Página de bienestar: mismo fondo arena y las mismas cañas que el inicio. */
  .portada.chica{ min-height:max(460px, 66vh); }
  .portada.chica h1{ font-size:clamp(58px, 9vw, 112px); }
  .cristales{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1fr); gap:54px; align-items:center; }
  .cristales .cartel img{ width:100%; border-radius:26px; box-shadow:0 18px 40px rgba(90,62,10,.2); }
  .cristales h3{ font-family:'Caveat',cursive; font-weight:700; font-size:clamp(42px, 5vw, 60px); line-height:1; color:var(--verde); margin-bottom:14px; }
  .beneficios{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; margin:20px 0 26px; }
  .beneficios b{ display:block; font-family:'Caveat',cursive; font-size:30px; line-height:1.05; color:var(--verde); }
  .beneficios li{ font-size:15px; }
  .menu-spa{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 56px; }
  .grupo h3{ font-family:'Caveat',cursive; font-weight:700; font-size:42px; line-height:1; color:var(--verde); margin-bottom:14px; }
  .item{ padding:14px 0; border-bottom:1px dashed var(--borde); }
  .item .fila{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
  .item h4{ font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--verde); }
  .item .valor{ font-family:'Caveat',cursive; font-weight:700; font-size:28px; color:var(--bambu-osc); white-space:nowrap; }
  .item p{ font-size:14.5px; color:var(--suave); margin-top:2px; }
  .item .dura{ font-weight:700; color:var(--tinta); }
  .nota{ text-align:center; color:var(--suave); font-size:14px; margin-top:30px; }
  .cierre{ text-align:center; }
  .cierre .acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:20px; }
  @media (max-width:860px){
    .cristales, .menu-spa{ grid-template-columns:minmax(0, 1fr); gap:36px; }
    .cristales .cartel{ width:min(380px, 100%); margin-inline:auto; }
  }
  @media (max-width:600px){ .beneficios{ grid-template-columns:1fr; } }

  /* ——— Páginas propias ——— */
  .menu a[aria-current="page"]{ text-decoration:underline; text-decoration-color:var(--bambu); text-decoration-thickness:3px; text-underline-offset:7px; }
  .portada.chica .etiqueta{ color:#F8DE93; text-shadow:0 1px 8px rgba(0,0,0,.5); }
  .redondas{ justify-content:center; margin-top:46px; }
  .tira{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
  .tira img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:999px 999px 20px 20px; box-shadow:0 12px 28px rgba(90,62,10,.16); }

  /* Fotos: índice de zonas, grilla y visor */
  .zonas{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .zonas a{ padding:9px 16px; border-radius:999px; border:2px solid var(--borde); background:var(--arena-clara); color:var(--verde); font-weight:700; font-size:14px; text-decoration:none; transition:border-color .25s, background .25s; }
  .zonas a:hover{ border-color:var(--bambu); background:#fff; }
  .galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
  .g-foto{ padding:0; border:0; background:none; cursor:zoom-in; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 10px 24px rgba(90,62,10,.14); }
  .g-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
  .g-foto:hover img{ transform:scale(1.06); }
  .visor{ border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0; }
  .visor::backdrop{ background:rgba(0,26,25,.9); }
  .visor[open]{ display:grid; place-items:center; }
  .visor img{ max-width:min(1200px, 92vw); max-height:80vh; border-radius:16px; object-fit:contain; }
  .visor-texto{ position:absolute; bottom:4vh; left:0; right:0; text-align:center; color:var(--arena); font-family:'Caveat',cursive; font-size:30px; }
  .v-cerrar{ position:absolute; top:18px; right:22px; width:48px; height:48px; border-radius:50%; border:0; background:rgba(251,243,226,.92); color:var(--verde); font-size:30px; line-height:1; cursor:pointer; }
  .visor .car-flecha{ position:absolute; }

  /* Bienestar: el video vertical al costado del menú */
  .spa{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:44px; align-items:start; }
  .spa-video{ position:sticky; top:110px; }
  .spa-video video{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:999px 999px 24px 24px; box-shadow:0 16px 36px rgba(90,62,10,.2); background:var(--verde); }
  .spa-video figcaption{ font-family:'Caveat',cursive; font-size:24px; line-height:1.1; color:var(--verde); text-align:center; margin-top:10px; }
  .exp .imagen video{ width:100%; height:100%; object-fit:cover; }

  @media (max-width:860px){
    .spa{ grid-template-columns:minmax(0, 1fr); }
    .spa-video{ position:static; width:200px; margin-inline:auto; }
    .tira{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:600px){ .galeria{ grid-template-columns:1fr 1fr; gap:10px; } .g-foto{ border-radius:12px; } }

  /* Antes de venir y políticas */
  .datos-utiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; max-width:860px; margin:6px auto 26px; }
  .datos-utiles div{ background:var(--arena-clara); border:1px solid var(--borde); border-radius:18px; padding:16px 18px; text-align:center; }
  .datos-utiles b{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bambu-osc); }
  .datos-utiles span{ display:block; font-family:'Caveat',cursive; font-weight:700; font-size:30px; line-height:1.15; color:var(--verde); margin-top:4px; }
  .consejos{ list-style:none; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
  .consejos li{ padding-left:22px; position:relative; }
  .consejos li::before{ content:''; position:absolute; left:2px; top:.6em; width:9px; height:9px; border-radius:50%; background:var(--hoja); }
  .texto-legal > :not(.titulo):not(.ramita):not(.datos-utiles){ max-width:760px; margin-left:auto; margin-right:auto; }
  .texto-legal h3{ font-family:'Caveat',cursive; font-weight:700; font-size:32px; line-height:1.1; color:var(--verde); margin-top:22px; margin-bottom:4px; }
  .texto-legal p, .texto-legal li{ font-size:16px; }
  .texto-legal p + p{ margin-top:10px; }
  .texto-legal ul{ padding-left:20px; display:flex; flex-direction:column; gap:6px; margin-top:6px; }
  .texto-legal li::marker{ color:var(--bambu-osc); }
  .texto-legal a:not(.btn){ color:var(--verde); font-weight:600; text-decoration-color:var(--bambu); text-underline-offset:3px; }
  .aviso-legal{ background:var(--verde); color:var(--arena-clara); border-radius:16px; padding:16px 20px; margin-bottom:16px; }
  .aviso-legal b{ color:var(--bambu); }
  .vigencia{ color:var(--suave); font-size:14px !important; margin-top:16px !important; }
  footer .marca p a{ text-decoration:none; color:var(--arena); }
  footer .marca p a:hover{ text-decoration:underline; }
  @media (max-width:600px){ .datos-utiles{ grid-template-columns:1fr; } .texto-legal h3{ font-size:28px; } }

  /* Carrusel: zoom lento de la foto activa, en CSS (lo hace la placa de video, no el procesador) */
  .car-foto img{ transform:scale(1); }
  .car-foto.activa img{ animation:acercar 6s ease-out both; }
  @keyframes acercar{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
  @media (prefers-reduced-motion:reduce){ .car-foto.activa img{ animation:none; } }