:root{
      --brand:#0aa37a;           /* principal */
      --brand-2:#2b7fff;         /* secundario */
      --accent:#fd3a84;          /* acento */
      --bg:#f6f8fb;              /* fondo */
      --card:#ffffff;            /* tarjetas */
      --text:#0f172a;            /* texto */
      --muted:#64748b;
      --border:#e5e7eb;
      --ring:rgba(10,163,122,.25);
      --chip:#f1f5f9;
      --shadow:0 10px 30px rgba(2,8,23,.08);
      --grad-btn:linear-gradient(90deg,var(--brand),#38bdf8);
      --grad-cta:linear-gradient(90deg,#ff6aa2,var(--accent));

      /* Calendario */
      --cal-low:#ecfdf5;
      --cal-mid:#eef2ff;
      --cal-high:#fff7ed;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial}
    a{color:inherit;text-decoration:none}
    .container{max-width:1240px;margin-inline:auto;padding:18px}
    .pill{display:inline-flex;gap:6px;align-items:center;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px}
    .btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer}
    .btn.primary{background:var(--grad-btn);color:#032a1e;box-shadow:0 14px 30px -16px var(--ring)}
    .btn.ghost{background:transparent;border:1px solid var(--border);color:#0f172a}
    .btn.cta{background:var(--grad-cta);color:white;box-shadow:0 14px 30px -16px rgba(253,58,132,.35)}
    .muted{color:var(--muted)}
    .tiny{font-size:12px}
    .stars{color:#f59e0b}
    .hide{display:none!important}
    .no-scroll{overflow:hidden;height:100vh}

    /* Headings */
    h1,h2,h3,h4{margin:0 0 8px;color:#0f172a}
    h1{font-size:clamp(28px,4.5vw,42px);font-weight:900;letter-spacing:-.02em}
    h2{font-size:clamp(22px,3vw,28px);font-weight:800;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--brand),#38bdf8) 1;border-image-slice:1;padding-bottom:6px}
    h3{font-size:18px;font-weight:800}

    /* Header con logo centrado */
    .sitebar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:30}
    .sitebar .wrap{display:flex;align-items:center;justify-content:center;padding:10px 18px;max-width:1240px;margin:0 auto}
    .brand{display:flex;align-items:center;gap:10px}
    .brand img{height:40px;width:auto}
    .brand-name{font-weight:900;letter-spacing:-.02em}

    /* HERO + GALERÍA */
    .hero{background:#fff;border-bottom:1px solid var(--border)}
    .toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;flex-wrap:wrap}
    .title-wrap{display:grid;gap:6px}
    .price-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .price{font-size:24px;font-weight:900}
    .oldprice{font-size:14px;color:#ef4444;text-decoration:line-through;margin-right:6px}
    @media(max-width:720px){
      .toprow{align-items:flex-start}
      .title-wrap h1{width:100%}
    }

    /* Desktop mosaic */
    .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:10px}
    .slide,.gallery picture{width:100%;height:100%;object-fit:cover;border-radius:16px;overflow:hidden}
    .big{grid-row:span 2}
    .slide img{width:100%;height:100%;object-fit:cover;display:block}

    /* Mobile slider */
    @media(max-width:768px){
      .gallery{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:8px}
      .slide{flex:0 0 auto;min-width:88vw;height:58vh;scroll-snap-align:center;border-radius:16px;overflow:hidden}
      .big{grid-row:auto;height:58vh}
      .gallery::-webkit-scrollbar{display:none}
    }

    /* Tabs pegadas arriba en scroll */
    .tabs{position:sticky;top:0;z-index:20;background:rgba(246,248,251,.9);backdrop-filter:saturate(1.2) blur(6px);display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px;border-bottom:1px solid var(--border)}
    .tabs a{padding:8px 10px;border-radius:10px;background:var(--chip);border:1px solid var(--border);font-weight:700}

    /* Layout con sidebar */
    .layout{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
    @media(min-width:1080px){.layout{grid-template-columns:2fr 1fr}}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
    .list{display:grid;gap:8px;margin:0;padding-left:18px}
    .inline-icons{display:flex;gap:8px;flex-wrap:wrap}
    .chip{display:inline-flex;gap:6px;align-items:center;background:var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px}

    /* Sidebar booking */
    .booking{position:sticky;top:16px}
    .cal-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
    .cal-header .month{font-weight:800;font-size:16px;text-transform:capitalize}
    .cal-nav{display:inline-flex;gap:8px}
    .cal-nav button{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
    .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;color:#475569;font-weight:700;font-size:12px;text-align:center}
    .cal-weekdays>div{padding:6px 0}
    .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
    .cal-day{aspect-ratio:1/1.05;border:1px solid var(--border);border-radius:12px;background:#fff;padding:6px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .05s}
    .cal-day .d{font-weight:800}
    .cal-day.low{background:var(--cal-low)}
    .cal-day.mid{background:var(--cal-mid)}
    .cal-day.high{background:var(--cal-high)}
    .cal-day.selected{outline:2px solid var(--brand)}
    .cal-day[aria-disabled="true"]{opacity:.45;pointer-events:none;filter:grayscale(.2)}
    .legend{margin-top:6px;font-size:12px;color:var(--muted)}
    .soldout{position:absolute;inset:6px;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.08) 8px,rgba(0,0,0,.04) 8px,rgba(0,0,0,.04) 16px);display:flex;align-items:center;justify-content:center;font-weight:800;color:#334155}

    .participants-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    @media (max-width: 720px) {.participants-grid{grid-template-columns:1fr;} .qtyrow input[type=number]{width:56px;}}
    .qtyrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
    .stepper{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border);border-radius:12px;padding:4px}
    .step-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:pointer}
    .step-btn:hover{background:#2563eb;color:#fff}
    .qtyrow input[type=number]{width:70px;border:0;background:transparent;text-align:center}

    /* Paquete + alojamiento */
    .mode-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
    .chip-radio{position:relative}
    .chip-radio input{position:absolute;opacity:0}
    .chip-radio label{
        display:inline-flex;
        gap:8px;
        align-items:center;
        background:var(--card);
        border:1px solid var(--border);
        border-radius:999px;
        padding:8px 12px;
        cursor:pointer;
        transition: all 0.2s ease-in-out;
    }
    .chip-radio input:checked + label{
        outline:2px solid var(--ring);
        border-color:var(--brand);
        background:var(--cal-low);
    }
    .lodging-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:10px;margin-top:10px}
    @media(min-width:520px){.lodging-grid{grid-template-columns:repeat(2,1fr)}}
    .lodging-card{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap:8px;
        border:1px solid var(--border);
        background:var(--card);
        border-radius:14px;
        padding:14px;
        box-shadow:var(--shadow);
        cursor: pointer;
        transition: transform .05s, box-shadow .2s, background-color .2s;
    }
    .lodging-card.selected{
        background: var(--cal-mid);
        border-color: var(--brand-2);
        box-shadow: var(--shadow-hover);
    }
    .lodging-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
    .lodging-card .icon{font-size:32px; margin-bottom: 8px;}
    .lodging-card .title{font-weight:800}
    .lodging-card .note{font-size:12px;color:var(--muted)}
    .lodging-card .price{font-weight:900; margin-top: auto;}
    .lodging-card input{accent-color:var(--brand)}

    .extras{display:grid;gap:8px;margin-top:6px}
    .extras label{display:flex;justify-content:space-between;align-items:center;background:var(--chip);border:1px solid var(--border);border-radius:12px;padding:8px 10px}

    .paybox{display:grid;gap:12px;margin-top:10px}
    .pay-full input{position:absolute;opacity:0}
    .pay-full label{display:block;width:100%;text-align:center;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:12px;font-weight:800;cursor:pointer}
    .pay-full input:checked + label{border-color:var(--brand);outline:2px solid var(--ring);background:var(--cal-low)}
    .pay-deposits{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .pay-deposits input{position:absolute;opacity:0}
    .pay-deposits label{
        display:block;
        text-align:center;
        border:1px solid var(--border);
        background:var(--card);
        border-radius:12px;
        padding:10px;
        cursor:pointer;
        transition: all 0.2s ease-in-out;
    }
    .pay-deposits input:checked + label{
        border-color:var(--brand);
        outline:2px solid var(--ring);
        background:var(--cal-low);
    }

    .floatbar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(2,8,23,.06);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px;z-index:50}
    .float-total{font-size:20px;font-weight:900}
    .float-note{font-size:12px;color:var(--muted)}
    .page-spacer{height:90px}

    /* Móvil: CTA abre el sidebar como pantalla completa */
    .mobile-cta{position:fixed;left:0;right:0;bottom:65px;display:none;justify-content:center;z-index:40}
    .mobile-cta .btn{width:92%;max-width:520px}
    @media(max-width:1080px){.mobile-cta{display:flex} .booking{display:none} }
    .drawer{position:fixed;inset:0;background:rgba(2,8,23,.45);display:none;align-items:flex-end;z-index:60}
    .drawer.open{display:flex}
    .drawer .panel{background:var(--card);border-top-left-radius:18px;border-top-right-radius:18px;width:100%;max-height:92vh;overflow:auto;padding:14px 12px;box-shadow:0 -20px 40px rgba(2,8,23,.25)}
    .drawer .bar{height:5px;width:42px;background:var(--border);border-radius:999px;margin:6px auto 12px}
    .drawer .booking{display:block !important; position:static; top:auto}
    .badge{display:inline-flex;align-items:center;gap:6px;background:var(--cal-low);border:1px solid #bbf7d0;color:#166534;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
    .warn{display:inline-flex;align-items:center;gap:6px;background:var(--cal-high);border:1px solid #fed7aa;color:#9a3412;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}