:root{
      --ink:#042C44;
      --ink2:#001426;
      --muted:#5991AC;
      --sky:#9ED1DC;
      --bg:#F6F8FA;
      --card:#FFFFFF;
      --line:#E6EDF2;
      --shadow: 0 12px 30px rgba(0,0,0,.08);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
      background: linear-gradient(180deg, #FFFFFF, var(--bg));
      color: var(--ink2);
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:1080px; margin:0 auto; padding:0 18px}

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.82);
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; padding:12px 0;
    }
    .brand{display:flex; align-items:center; gap:10px; min-width:0;}
    .brand img{
      width:36px; height:36px; border-radius:12px; object-fit:cover;
      border:1px solid var(--line);
    }
    .brand .t1{font-size: 16px; line-height: 1.1;}
    .brand .t2{font-size: 11px; line-height: 1.2;}
    .brand{gap: 8px;}
    .brand img{width:32px; height:32px; border-radius:10px;}
    .actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
    @media (max-width: 520px){
  .topbar-inner{
    align-items:flex-start;   /* para que marca y botones no se “peleen” */
  }

  .actions{
    flex-direction: column;   /* en vez de wrap */
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;     /* botones mismo ancho */
    width: 140px;             /* ajusta 130–160 según te guste */
  }

  .actions .btn{
    width: 100%;
    justify-content: center;
    padding: 9px 12px;        /* más compacto */
    font-size: 13px;          /* más pequeño */
    border-radius: 999px;
  }

 .brand .t1{font-size: 16px;}
 .brand .t2{font-size: 11px;}
 .actions{width: 100%;}
}


    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px; border-radius:999px;
      border:1px solid var(--line);
      background: #fff;
      font-weight:800; font-size:14px;
      transition: transform .08s ease, box-shadow .08s ease;
    }
    .btn:hover{transform: translateY(-1px)}
    .btn.primary{
      background: var(--ink);
      color:#fff; border-color:transparent;
      box-shadow: 0 10px 18px rgba(4,44,68,.18);
    }
    .btn.ghost{
      background: rgba(158,209,220,.22);
      border-color: rgba(158,209,220,.45);
      color: var(--ink);
    }

    /* Hero */
    .hero{padding:22px 0 10px;}
    .hero-card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
    }
    .hero-media{
      background: radial-gradient(circle at 20% 20%, rgba(158,209,220,.35), transparent 55%),
                  radial-gradient(circle at 80% 20%, rgba(89,145,172,.25), transparent 55%),
                  #fff;
      padding:22px;
      display:flex; align-items:center; justify-content:center;
      min-height: 360px;
    }
    .hero-media img{
      width:100%; max-width:420px; height:auto;
      border-radius: 22px;
      border:1px solid var(--line);
      box-shadow: 0 18px 40px rgba(0,0,0,.10);
      object-fit:cover;
    }
    .hero-copy{
      padding:26px 24px;
      display:flex; flex-direction:column; gap:14px;
    }
    .pill{
      display:inline-flex; gap:8px; align-items:center;
      padding:8px 12px; border-radius:999px;
      background: rgba(158,209,220,.22);
      border:1px solid rgba(158,209,220,.45);
      font-weight:900; color:var(--ink);
      width:fit-content;
    }
    h1{
      margin:0;
      font-size: clamp(17px, 3vw, 19px);
      line-height: 1.08;
      color: var(--ink);
      letter-spacing:-.4px;
    }
    .sub{
      margin:0;
      color:#2A4556;
      font-weight:600;
      line-height:1.5;
    }
    .chips{display:flex; flex-wrap:wrap; gap:10px;}
    .chip{
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:800; font-size:13px;
      color:#2A4556;
    }
    .hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

    /* Section */
    .section{padding:18px 0}
    .section h2{margin:0 0 10px; font-size:18px; color:var(--ink); letter-spacing:-.2px;}
    .hint{margin:0 0 14px; color:#486372; font-weight:600}

    /* Feed carousel */
    .feed{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:14px;
    }
    .rail{
      display:grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(220px, 1fr);
      gap:12px;
      overflow-x:auto;
      padding:6px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .rail::-webkit-scrollbar{height:10px}
    .rail::-webkit-scrollbar-thumb{background:#DDE6ED; border-radius:999px}
    .post{
      scroll-snap-align:start;
      border-radius: 18px;
      border:1px solid var(--line);
      overflow:hidden;
      background:#fff;
      position:relative;
      cursor:pointer;
      transition: transform .12s ease;
      min-height: 280px;
    }
    .post:hover{transform: translateY(-2px)}
    .post img{width:100%; height: 280px; object-fit:cover; display:block;}
    .post .overlay{
      position:absolute; inset:auto 12px 12px 12px;
      background: rgba(4,44,68,.88);
      color:#fff;
      border-radius: 14px;
      padding:10px 12px;
      font-weight:800;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
    }
    .post .overlay span{font-size:13px; opacity:.95}
    /* Badge fixed so it never distorts */
    .post .overlay b{
      font-size:13px;
      padding:6px 12px;
      border-radius:999px;
      background: rgba(158,209,220,.22);
      border: 1px solid rgba(158,209,220,.35);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    /* Grid cards */
    .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
    .card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:16px;
    }
    .card h3{margin:0 0 6px; color:var(--ink); font-size:16px}
    .card p{margin:0; color:#486372; font-weight:600; line-height:1.5}
    .small{font-size:13px}

    /* Locations */
    .loc{display:flex; flex-direction:column; gap:10px;}
    .loc .row{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      padding:14px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: #fff;
    }
    .loc .name{font-weight:1000; color:var(--ink); font-size:16px}
    .loc .meta{color:#486372; font-weight:700}
    .loc .days{color:var(--muted); font-weight:900}
    .loc .right{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

    /* Footer */
    footer{padding:26px 0 36px; color:#4B6676;}
    footer .fine{
      background: rgba(205,215,225,.35);
      border:1px solid rgba(205,215,225,.65);
      border-radius: var(--radius);
      padding:14px;
      line-height:1.55;
      font-weight:600;
    }

    /* Modal */
    .modal{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none; align-items:center; justify-content:center;
      padding:18px;
      z-index:100;
    }
    .modal.open{display:flex}
    .modal-card{
      width:min(980px, 100%);
      background:#fff;
      border-radius: 22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.25);
      box-shadow: 0 30px 80px rgba(0,0,0,.35);
    }
    .modal-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 14px;
      border-bottom:1px solid var(--line);
    }
    .modal-head .title{font-weight:1000; color:var(--ink)}
    .modal-head button{
      border:none; background:transparent; font-size:20px; cursor:pointer;
      color:#2A4556; padding:6px 10px; border-radius:12px;
    }
    .modal-body{display:grid; grid-template-columns: 1.2fr .8fr;}
    .modal-body img{width:100%; height:100%; object-fit:contain; background:#F3F6F9; min-height:420px}
    .modal-side{padding:14px; display:flex; flex-direction:column; gap:10px}
    .modal-side p{margin:0; color:#486372; font-weight:600; line-height:1.5}
    .modal-side .btn{width:100%}

    @media (max-width: 920px){
      .hero-card{grid-template-columns:1fr}
      .hero-media{min-height: 280px}
      .grid{grid-template-columns:1fr}
      .modal-body{grid-template-columns:1fr}
      .modal-body img{min-height:320px}
    }

    .btn i{
  margin-right: 8px;
  font-size: 14px;
  line-height: 0;
}

    @media (max-width: 520px){
  .actions{width: 56px;}               /* columna estrecha */
  .actions .btn{padding: 10px 0;}      /* botón cuadradito */
  .actions .btn span{display:none;}    /* ocultar texto */
  .actions .btn i{margin:0; font-size:16px;}
}

@media (max-width: 520px){

  .actions{
    flex-direction: row;      /* en línea */
    flex-wrap: nowrap;
    gap: 8px;
    width: auto;
  }

  .actions .btn{
    width: 40px;              /* botón cuadrado */
    height: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
  }

  .actions .btn span{
    display: none;            /* ocultar texto */
  }

  .actions .btn i{
    margin: 0;
    font-size: 16px;
  }

}

@media (max-width: 520px){
  .topbar-inner{
    align-items: center;
  }
}

/* --- FIX MODAL MOBILE: close siempre visible + contenido scrolleable --- */
.modal{
  align-items: center;
}

.modal-card{
  max-height: 92vh;           /* nunca más alto que la pantalla */
  display: flex;
  flex-direction: column;
}

.modal-head{
  position: sticky;           /* header pegado arriba */
  top: 0;
  z-index: 2;
  background: #fff;
}

/* El cuerpo del modal scrollea, no toda la pantalla */
.modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Limitar altura de la imagen dentro del modal */
.modal-body img{
  min-height: auto;           /* quita el min-height gigante */
  max-height: 52vh;           /* ajusta 45–55vh si quieres */
  width: 100%;
  object-fit: contain;
  background:#F3F6F9;
}

@media (max-width: 920px){
  .modal-body{
    display: block;           /* en móvil una sola columna */
  }
  .modal-side{
    padding: 12px;
  }
}

/* Floating WhatsApp button */
.fab-wa{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #25D366;              /* WhatsApp green */
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  border: 0;
}

.fab-wa:hover{
  transform: translateY(-1px);
}

.fab-wa i{
  color: #fff;
  font-size: 22px;
}

/* en móvil un poquito más grande */
@media (max-width: 520px){
  .fab-wa{
    width: 60px;
    height: 60px;
    border-radius: 20px;
    right: 14px;
    bottom: 14px;
  }
}