/* ===========================================================
   Bar Hopping Panamá — «El Cartel de la Rumba»
   Tokens: aqua #78E4CE · coral #FF6848 · berenjena #36232E
           crema #FFF8EC · whatsapp #25D366
   =========================================================== */

:root{
  --aqua:#78E4CE;
  --coral:#FF6848;
  --berenjena:#36232E;
  --crema:#FFF8EC;
  --whatsapp:#25D366;
  --borde:3px solid var(--berenjena);
}

*,*::before,*::after{box-sizing:border-box;}

html,body{margin:0;padding:0;background:var(--crema);}
body{
  font-family:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  color:var(--berenjena);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:var(--berenjena);text-decoration:none;}
a:hover{color:var(--coral);}

.display{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;}

/* Kicker reutilizable */
.kicker{
  font-family:'Anton',Impact,sans-serif;
  font-size:13px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--coral);
  margin:0 0 14px;
}
.kicker--aqua{color:var(--aqua);}

/* Botones — sombra dura, sin blur */
.btn{
  display:inline-block;
  font-family:'Anton',Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:var(--borde);
  background:var(--coral);
  color:var(--berenjena);
  padding:16px 26px;
  font-size:19px;
  box-shadow:5px 5px 0 var(--berenjena);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{
  color:var(--berenjena);
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--berenjena);
}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--berenjena);}
.btn--aqua{background:var(--aqua);}
.btn--sm{font-size:16px;padding:13px 20px;box-shadow:4px 4px 0 var(--berenjena);}
.btn--sm:hover{box-shadow:2px 2px 0 var(--berenjena);}

/* Duotono: contenedor con color de marca + imagen multiply */
.duo{background:var(--aqua);overflow:hidden;}
.duo>img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(1.05);
  mix-blend-mode:multiply;
}

/* ---------- 0. Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--crema);
  border-bottom:var(--borde);
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
}
.header__icon{width:42px;height:42px;border-radius:50%;}
.header__mark{
  font-family:'Anton',Impact,sans-serif;
  font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  margin-right:auto;line-height:1.1;
}
.header__mark span{color:var(--coral);}
.header__cta{
  background:var(--berenjena);color:var(--aqua);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;border:none;white-space:nowrap;
}
.header__cta:hover{color:var(--crema);}

/* ---------- 0b. Marquee ---------- */
.marquee{
  background:var(--berenjena);
  overflow:hidden;
  padding:8px 0;
  white-space:nowrap;
}
.marquee__track{
  display:inline-block;
  animation:marquee 18s linear infinite;
}
.marquee__track span{
  font-family:'Anton',Impact,sans-serif;
  color:var(--crema);
  font-size:15px;letter-spacing:.15em;text-transform:uppercase;
  padding-right:0;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;}
}

/* ---------- 1. Hero ---------- */
.hero{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  border-bottom:var(--borde);
}
.hero__copy{padding:36px 20px 40px;align-self:center;}
.hero__title{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(52px,10vw,110px);
  line-height:.92;text-transform:uppercase;
  margin:0 0 20px;
}
.hero__title em{font-style:normal;color:var(--coral);}
.hero__text{
  font-size:clamp(16px,2.2vw,19px);line-height:1.5;
  max-width:44ch;margin:0 0 28px;
}
.hero__photo{min-height:380px;border-left:var(--borde);}
@media (max-width:719px){
  .hero__photo{border-left:none;border-top:var(--borde);min-height:320px;}
}

/* ---------- 2. Dos rutas ---------- */
.rutas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.ruta{
  padding:36px 20px 40px;
  border-bottom:var(--borde);
  border-right:var(--borde);
}
.ruta:last-child{border-right:none;}
@media (max-width:719px){.ruta{border-right:none;}}
.ruta h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(28px,5vw,40px);line-height:1;text-transform:uppercase;
  margin:0 0 14px;
}
.ruta p{font-size:16px;line-height:1.5;max-width:40ch;margin:0 0 26px;}

/* ---------- 3. Line-up ---------- */
.lineup{background:var(--berenjena);color:var(--crema);padding:56px 20px 60px;}
.lineup__head{text-align:center;margin:0 auto 36px;max-width:900px;}
.lineup__head h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(40px,7vw,80px);line-height:.95;text-transform:uppercase;
  margin:0;
}
.lineup__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0;
  border:var(--borde);
}
.parada{
  position:relative;
  min-height:300px;
  border:var(--borde);
  overflow:hidden;
  display:flex;
}
.parada__bg{position:absolute;inset:0;}
.parada__bg img{
  width:100%;height:100%;object-fit:cover;
  /* Las fotos propias son nocturnas y muy oscuras: se levanta brillo y se
     baja opacidad para que el color de marca (y el texto) sigan legibles. */
  filter:grayscale(1) contrast(1.05) brightness(1.95);
  mix-blend-mode:multiply;
  opacity:.6;
}
.parada__body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:20px;width:100%;color:var(--berenjena);
}
.parada__hora{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:60px;line-height:1;
}
.parada__genero{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:30px;line-height:1.02;text-transform:uppercase;
  margin:0 0 6px;
}
.parada__bar{font-weight:800;font-size:15px;line-height:1.3;}
.parada--coral{background:var(--coral);}
.parada--aqua{background:var(--aqua);}
.parada--crema{background:var(--crema);}

/* ---------- 4. Ticket info ---------- */
.ticket{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.ticket__cell{
  padding:28px 20px 32px;
  border-bottom:var(--borde);
  border-right:var(--borde);
}
.ticket__cell:last-child{border-right:none;}
@media (max-width:719px){.ticket__cell{border-right:none;}}
.ticket__big{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(40px,6vw,56px);line-height:1;text-transform:uppercase;
}
.ticket__big small{font-size:.42em;letter-spacing:.04em;}
.ticket__text{font-size:16px;line-height:1.45;margin:0;max-width:32ch;}

/* ---------- 5. Galería ---------- */
.galeria{padding:56px 20px 0;}
.galeria h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,5.5vw,56px);line-height:1;text-transform:uppercase;
  margin:0 0 28px;
}
.galeria__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:3px;background:var(--berenjena);
  border:var(--borde);
}
.galeria__grid img{width:100%;height:200px;object-fit:cover;}

/* ---------- 6. FAQ ---------- */
.faq{max-width:820px;margin:0 auto;padding:56px 20px 60px;}
.faq h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,5.5vw,56px);line-height:1;text-transform:uppercase;
  margin:0 0 24px;
}
.faq details{border:var(--borde);margin-bottom:-3px;background:var(--crema);}
.faq summary{
  font-weight:800;font-size:16px;line-height:1.35;
  padding:14px 16px;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:'';}
.faq summary:hover{color:var(--coral);}
.faq p{margin:0;padding:0 16px 16px;font-size:16px;line-height:1.55;}

/* ---------- 7. Cierre ---------- */
.cierre{
  background-color:var(--aqua);
  background-image:url('assets/bhp-patron.jpg');
  background-size:420px;
  background-blend-mode:soft-light;
  padding:64px 20px 72px;
}
.cierre__card{
  max-width:640px;margin:0 auto;text-align:center;
  background:var(--crema);border:var(--borde);
  box-shadow:8px 8px 0 var(--berenjena);
  padding:36px 22px 40px;
}
.cierre__icon{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;}
.cierre__card h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(32px,6vw,54px);line-height:.98;text-transform:uppercase;
  margin:0 0 26px;
}
.cierre__tel{display:block;margin-top:22px;font-weight:800;font-size:17px;}

/* ---------- 8. Footer ---------- */
.footer{
  background:var(--berenjena);
  padding:22px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer img{height:26px;width:auto;}
.footer p{margin:0;font-size:13px;color:rgba(255,248,236,.6);}

/* ---------- 9. Botón flotante WhatsApp ---------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:99;
  width:58px;height:58px;border-radius:50%;
  background:var(--whatsapp);border:var(--borde);
  box-shadow:4px 4px 0 var(--berenjena);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.wa-float:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--berenjena);}
.wa-float svg{width:32px;height:32px;fill:#fff;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===========================================================
   BLOG
   =========================================================== */

/* --- Teaser en la home --- */
.blogteaser{padding:56px 20px 60px;border-top:var(--borde);}
.blogteaser h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,5.5vw,56px);line-height:1;text-transform:uppercase;
  margin:0 0 28px;
}
.blogteaser__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;}
.postcard{
  display:block;border:var(--borde);margin:0 -1.5px -1.5px 0;
  padding:24px 20px 26px;background:var(--crema);
  transition:background .12s ease;
}
.postcard:hover{background:var(--aqua);color:var(--berenjena);}
.postcard h3{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:26px;line-height:1.02;text-transform:uppercase;
  margin:0 0 10px;
}
.postcard p{margin:0;font-size:15px;line-height:1.5;}
.postcard__more{
  display:inline-block;margin-top:16px;
  font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
}

/* --- Páginas de artículo --- */
.crumbs{
  padding:14px 20px;border-bottom:var(--borde);
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.crumbs span{opacity:.45;padding:0 6px;}

.post{max-width:760px;margin:0 auto;padding:44px 20px 24px;}
.post__kicker{
  font-family:'Anton',Impact,sans-serif;
  font-size:13px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--coral);margin:0 0 14px;
}
.post h1{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(34px,6.5vw,62px);line-height:.98;text-transform:uppercase;
  margin:0 0 18px;
}
.post__lede{font-size:19px;line-height:1.55;font-weight:500;margin:0 0 10px;}
.post__meta{font-size:13px;opacity:.6;margin:0 0 30px;}

.prose{font-size:17px;line-height:1.72;}
.prose h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(26px,4.5vw,38px);line-height:1.05;text-transform:uppercase;
  margin:44px 0 14px;
}
.prose h3{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:19px;line-height:1.3;margin:30px 0 10px;
}
.prose p{margin:0 0 18px;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;}
.prose li{margin-bottom:9px;}
.prose strong{font-weight:800;}
.prose a{text-decoration:underline;text-underline-offset:3px;font-weight:700;}
.prose img{width:100%;height:auto;border:var(--borde);margin:26px 0;}

/* Caja destacada dentro del texto */
.nota{
  border:var(--borde);background:var(--aqua);
  padding:20px 20px 22px;margin:30px 0;
}
.nota p{margin:0 0 10px;}
.nota p:last-child{margin:0;}
.nota strong{display:block;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;}

/* Tabla dentro del texto */
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;}
.prose th,.prose td{border:2px solid var(--berenjena);padding:9px 11px;text-align:left;}
.prose th{background:var(--berenjena);color:var(--crema);font-size:13px;letter-spacing:.06em;text-transform:uppercase;}

/* CTA al pie del artículo */
.postcta{
  border:var(--borde);background:var(--coral);
  padding:30px 22px 34px;margin:44px 0 0;text-align:center;
}
.postcta h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(26px,5vw,40px);line-height:1;text-transform:uppercase;
  margin:0 0 8px;
}
.postcta p{margin:0 0 20px;font-size:16px;}

/* --- Índice del blog --- */
.bloghead{padding:48px 20px 10px;max-width:900px;margin:0 auto;}
.bloghead h1{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(38px,8vw,84px);line-height:.95;text-transform:uppercase;
  margin:0 0 14px;
}
.bloghead p{font-size:18px;line-height:1.5;max-width:52ch;margin:0;}
.bloglist{max-width:900px;margin:0 auto;padding:32px 20px 60px;}

/* Footer con links */
.footer__links{
  display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.footer__links a{color:var(--crema);}
.footer__links a:hover{color:var(--aqua);}