:root{
  --cream: #FFF8EC;
  --cream-2: #FCEFD8;
  --ink: #1F3D38;
  --ink-soft: #5C7A73;
  --coral: #FF5A45;
  --green: #1E9E6D;
  --green-deep: #0F6B4C;
  --gold: #FFC53D;
  --purple: #8B5CF6;
  --pink: #FF6FA5;
  --blue: #3E8EDE;
  --rule: rgba(31,61,56,0.14);
  --radius: 3px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body.no-scroll{ overflow:hidden; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(260px + var(--safe-bottom));
}

.display{
  font-family: 'Anton', 'Work Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top:0; z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:8px;
  padding: 12px 16px;
}
.topbar__brand{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1;
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
}
.topbar__pueblo{
  font-family:'Anton', sans-serif; font-size:22px; color:var(--coral);
  letter-spacing:0.01em;
}
.topbar__sub{ font-size:11px; color:var(--ink-soft); margin-top:3px; text-transform: uppercase; letter-spacing:0.08em; }
.topbar__actions{ display:flex; gap:8px; }
.topbar__iconbtn{
  background:none; border:1px solid var(--rule); border-radius:50%;
  width:38px; height:38px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.topbar__minibtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  background: var(--cream-2); border:1px solid var(--rule);
  border-radius: 10px; padding: 6px 9px;
  min-width:68px;
  cursor:pointer; text-align:center;
}
.topbar__minibtn-main{ font-size:10px; font-weight:700; color: var(--ink); line-height:1.1; white-space:nowrap; }
.topbar__minibtn-sub{ font-size:7.5px; color: var(--ink-soft); line-height:1.1; }

.topbar__minibtn--install{
  background: var(--coral); border-color: var(--coral);
  padding: 8px 12px; min-width:76px;
  box-shadow: 0 2px 0 rgba(200,60,40,0.35);
}
.topbar__minibtn--install .topbar__minibtn-main{ color:#fff; font-size:11.5px; }
.topbar__minibtn--install .topbar__minibtn-sub{ color: rgba(255,255,255,0.85); }
.topbar__minibtn--install:active{ transform: translateY(1px); box-shadow:none; }

.hero__eyebrow{
  font-size:10.5px; letter-spacing:0.07em; font-weight:600;
  text-transform:uppercase; color: var(--ink-soft);
  margin: 14px 18px 5px;
}

/* ---------- Popup de aviso urgente ---------- */
.aviso-backdrop{
  position:fixed; inset:0; z-index:300;
  background: rgba(10,10,10,0.6);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.aviso-backdrop.is-open{ opacity:1; pointer-events:auto; }

.aviso-modal{
  position:fixed; left:50%; top:50%; z-index:310;
  transform: translate(-50%, -50%) scale(0.92);
  width: calc(100% - 40px); max-width:380px;
  background: var(--coral);
  border: 3px solid #fff;
  border-radius: 24px;
  padding: 32px 26px 26px;
  text-align:center; color:#fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
}
.aviso-modal.is-open{ opacity:1; pointer-events:auto; transform: translate(-50%, -50%) scale(1); }
.aviso-modal__icon{ font-size:52px; margin-bottom:8px; }
.aviso-modal__eyebrow{
  font-family:'Anton', sans-serif; font-size:22px; text-transform:uppercase;
  letter-spacing:0.03em; margin-bottom:4px;
}
.aviso-modal__from{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color: rgba(255,255,255,0.8); margin-bottom:18px;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.3);
}
.aviso-modal__text{ font-size:16px; font-weight:700; line-height:1.55; margin:0 0 24px; }
.aviso-modal__close{
  background:#fff; color: var(--coral); border:none;
  font-family:'Work Sans', sans-serif; font-weight:800; font-size:15px;
  padding: 14px 36px; border-radius: 999px; cursor:pointer;
  width:100%;
}

/* ---------- Hero: próximos actos, franja discreta ---------- */
.hero{
  margin: 0 18px 4px;
  display:flex; flex-direction:column; gap:5px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--cream-2);
}
.hero__row{
  display:flex; align-items:baseline; gap:7px;
  font-size:12.5px; line-height:1.35;
  cursor:pointer;
}
.hero__dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--cat-color, var(--ink-soft)); flex-shrink:0;
  margin-bottom:1px;
}
.hero__tag{
  font-size:10px; font-weight:700; text-transform:uppercase; color: var(--ink-soft); flex-shrink:0;
}
.hero__time{ font-weight:700; color: var(--ink); margin-right:2px; }
.hero__title{ color: var(--ink-soft); }
.hero__empty{
  padding:10px 12px; font-size:12.5px; color: var(--ink-soft);
  background: var(--cream-2); border-radius:12px;
}

/* ---------- Day strip: banderines de fiesta colgando de un hilo ---------- */
.daystrip{
  position:relative;
  display:flex; overflow-x:auto;
  padding: 22px 18px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.daystrip::-webkit-scrollbar{ display:none; }
.daystrip__track{
  position:relative;
  display:inline-flex; gap:14px;
  touch-action: pan-x;
}
.daystrip__track::before{
  content:"";
  position:absolute; left:0; right:0; top:11px; height:1px;
  background: repeating-linear-gradient(to right, var(--ink) 0 6px, transparent 6px 10px);
  opacity:0.35;
}
.daychip{
  flex-shrink:0;
  scroll-snap-align:start;
  border:none;
  width:56px;
  padding: 12px 4px 14px;
  cursor:pointer;
  text-align:center;
  line-height:1.1;
  position:relative;
  color:#fff;
  clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 50% 100%, 0% 78%);
  transition: transform .15s ease;
}
.daychip::before{
  content:"";
  position:absolute; left:50%; top:-11px; width:1px; height:12px;
  background: var(--ink); opacity:0.35; transform:translateX(-50%);
}
.daychip:nth-child(6n+1){ background: var(--coral); }
.daychip:nth-child(6n+2){ background: var(--green); }
.daychip:nth-child(6n+3){ background: var(--gold); }
.daychip:nth-child(6n+4){ background: var(--blue); }
.daychip:nth-child(6n+5){ background: var(--purple); }
.daychip:nth-child(6n+6){ background: var(--pink); }
.daychip__dow{ display:block; font-size:7.5px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.8; margin-bottom:1px; }
.daychip__num{ display:block; font-family:'Anton', sans-serif; font-size:20px; }
.daychip__mon{ display:block; font-size:8.5px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.85; margin-top:1px; }
.daychip.is-active{ transform: translateY(-6px) scale(1.06); }
.daychip.is-active::after{
  content:"★"; position:absolute; top:2px; right:4px; font-size:8px; color:rgba(255,255,255,0.85);
}
.daychip.is-today .daychip__num::after{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background: var(--cream); margin-left:3px; vertical-align:top; margin-top:2px;
}

/* ---------- Main / views ---------- */
main{ padding: 4px 18px 20px; }
.view{ display:none; }
.view--active{ display:block; }

.day-heading{
  display:flex; align-items:baseline; justify-content:space-between;
  margin: 18px 0 4px;
}
.day-heading__label{
  font-family:'Anton', sans-serif; font-size:20px; text-transform:uppercase;
}
.day-heading__nota{
  font-size:11.5px; color: var(--coral); font-weight:600;
  margin: 0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.day-heading + .day-heading__nota{ margin-top:-2px; }

.icon-bubble{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; font-size:11px;
}
.filter-row{
  display:flex; gap:8px; overflow-x:auto; padding: 2px 0 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex-shrink:0; display:flex; align-items:center; gap:5px;
  border:1.5px solid var(--rule); background:none;
  border-radius: 20px; padding: 6px 13px 6px 9px;
  font-size:12px; font-weight:600; color: var(--ink-soft); cursor:pointer;
  white-space:nowrap;
}
.filter-chip__dot{ font-size:13px; }
.filter-chip.is-active{ background: var(--cat-color, var(--coral)); border-color: var(--cat-color, var(--coral)); color:#fff; }

/* ---------- Tarjetas de actos ---------- */
.acts{ display:flex; flex-direction:column; gap:12px; margin-bottom: 75px; }
.act-card{
  position:relative;
  background:#fff;
  border-radius: 16px;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--cat-color, var(--coral));
  padding: 14px 14px 12px 16px;
  cursor:pointer;
}
.act-card__top{ display:flex; align-items:flex-start; gap:10px; }
.act-card__stamp{
  flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background: var(--cat-color, var(--coral));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:15px; transform: rotate(-8deg);
  box-shadow: 0 2px 0 rgba(43,36,32,0.12);
}
.act-card__time{ font-family:'Anton', sans-serif; font-size:16px; color: var(--cat-color, var(--coral)); line-height:1; padding-top:2px; }
.act-card__title{ font-size:14.5px; font-weight:700; line-height:1.35; margin-top:3px; }
.act-card__place{ font-size:12px; color: var(--ink-soft); margin-top:3px; }
.act-card__fav{
  margin-left:auto; background:none; border:none; font-size:20px; color: var(--rule); cursor:pointer; flex-shrink:0;
}
.act-card__fav.is-fav{ color: var(--gold); }
.act-card__bottom{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--rule);
}
.act-card__tag{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color: var(--cat-color, var(--coral));
  background: color-mix(in srgb, var(--cat-color, var(--coral)) 14%, white);
  padding: 3px 9px; border-radius: 10px;
}
.act-card__tag--infantil{ color:#fff; background: var(--cat-color, var(--coral)); }
.act-card__more{
  font-size:12px; font-weight:700; color: var(--ink);
  display:flex; align-items:center; gap:3px;
}
.act-card__more::after{ content:"›"; font-size:15px; line-height:0; }

/* ---------- Portada ---------- */
.portada{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(120% 90% at 50% -10%, #35B584 0%, var(--green) 32%, var(--green-deep) 78%, #0A4E38 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .35s ease;
}
.portada.is-hidden{ transform: translateY(-100%); opacity:0; pointer-events:none; }


.portada__skyline{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:auto;
  filter: brightness(0) invert(1);
  opacity:0.9;
}

.portada__content{
  position:relative; z-index:2;
  width:100%; max-width:420px;
  padding: 40px 30px calc(110px + var(--safe-bottom));
  text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center;
}
.portada__eyebrow{
  display:inline-block; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; color: rgba(255,255,255,0.8);
  padding: 5px 16px; border:1px solid rgba(255,255,255,0.35); border-radius:20px;
}
.portada__title{
  font-family:'Anton', sans-serif; font-size:60px; line-height:0.95; margin: 22px 0 0;
  text-shadow: 0 4px 0 rgba(10,40,30,0.25);
}
.portada__year{
  display:inline-block; font-family:'Anton', sans-serif; font-size:19px;
  background: var(--coral); color:#fff; padding:4px 16px; border-radius:20px; margin-top:16px;
}
.portada__dates{ font-size:14.5px; font-weight:700; margin: 26px 0 0; }
.portada__cta{
  margin-top:34px;
  border:none; background: #fff; color: var(--green-deep);
  font-family:'Work Sans', sans-serif; font-weight:800; font-size:15px;
  padding: 15px 32px; border-radius: 30px; cursor:pointer;
  box-shadow: 0 6px 0 rgba(10,40,30,0.35);
}
.portada__cta:active{ transform: translateY(3px); box-shadow: 0 3px 0 rgba(10,40,30,0.35); }
.portada__precios{
  margin-top:14px;
  border:1.5px solid rgba(255,255,255,0.55); background:none; color:#fff;
  font-family:'Work Sans', sans-serif; font-weight:700; font-size:13px;
  padding: 10px 22px; border-radius: 30px; cursor:pointer;
}

/* ---------- Panel de precios ---------- */
.precios__tabs{ display:flex; gap:8px; margin: 14px 0 4px; }
.precios__tab{
  flex:1; padding:10px; border-radius: 12px; border:1.5px solid var(--rule);
  background:none; font-family:'Work Sans', sans-serif; font-weight:700; font-size:13px;
  color: var(--ink-soft); cursor:pointer;
}
.precios__tab.is-active{ background: var(--coral); border-color: var(--coral); color:#fff; }

.precios__aviso{
  display:flex; gap:9px; align-items:flex-start;
  background: var(--cream-2); border-radius:14px; padding:12px 14px;
  margin: 14px 0 6px; font-size:12.5px; line-height:1.5; color: var(--ink);
}
.precios__aviso-icon{ font-size:17px; flex-shrink:0; }

.precios__table{ margin-top:10px; }
.precios__row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0; border-bottom:1px solid var(--rule);
  gap:10px;
}
.precios__row-name{ font-size:13px; font-weight:600; flex:1; }
.precios__row-vals{ display:flex; gap:12px; flex-shrink:0; }
.precios__col-val{ width:52px; text-align:center; font-family:'Anton', sans-serif; font-size:14px; color: var(--coral); }
.precios__single{ font-family:'Anton', sans-serif; font-size:14px; color: var(--coral); }
.precios__headrow{
  display:flex; justify-content:flex-end; gap:12px; padding-bottom:8px;
  margin-bottom:4px; border-bottom:1px solid var(--rule);
}
.precios__col-label{
  width:52px; text-align:center; font-size:8.5px; text-transform:uppercase;
  color: var(--ink-soft); font-weight:700; line-height:1.25;
}

.portada__slogan{
  font-family:'Anton', sans-serif; font-size:18px; letter-spacing:0.02em;
  color: var(--gold); margin-top:26px;
  transform: rotate(-4deg);
  text-shadow: 0 2px 0 rgba(10,40,30,0.3);
}

/* ---------- Panel Stop agresiones ---------- */
.sheet--stop{ padding-top:8px; }
.stop__badge{
  width:52px; height:52px; border-radius:50%; background: var(--coral);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  margin: 4px auto 12px;
}
.sheet--stop .sheet__title{ text-align:center; }
.stop__intro{ font-size:13.5px; line-height:1.55; text-align:center; margin: 8px 0 18px; }
.stop__telefonos{ display:flex; flex-direction:column; gap:8px; margin-bottom: 6px; }
.stop__tel{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--rule); border-radius: var(--radius);
  padding: 11px 14px; text-decoration:none; color:var(--ink);
}
.stop__tel-label{ font-size:12.5px; color: var(--ink-soft); }
.stop__tel-num{ font-family:'Anton', sans-serif; font-size:16px; color: var(--coral); }
.stop__bloque{
  display:flex; gap:12px; padding: 16px 0; border-top:1px solid var(--rule);
}
.stop__bloque-icon{ font-size:22px; flex-shrink:0; width:28px; text-align:center; }
.stop__bloque-title{ font-size:14px; font-weight:700; margin-bottom:4px; }
.stop__bloque-text{ font-size:13px; line-height:1.55; color: var(--ink); }

.empty-state{
  text-align:center; padding: 60px 20px; color: var(--ink-soft);
}
.empty-state__title{ font-family:'Anton', sans-serif; font-size:18px; color:var(--ink); margin-bottom:8px; }
.empty-state__desc{ font-size:13.5px; line-height:1.5; }

/* ---------- Sheets (modal drawers) ---------- */
.sheet-backdrop{
  position:fixed; inset:0; background: rgba(43,36,32,0.45);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
  z-index: 140;
}
.sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background: var(--cream);
  border-radius: 14px 14px 0 0;
  border-top: 1px solid var(--ink);
  max-height: 82vh; overflow-y:auto;
  padding: 10px 20px calc(24px + var(--safe-bottom));
  transform: translateY(105%);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.sheet.is-open{ transform: translateY(0); }
.sheet__handle{
  width:36px; height:4px; border-radius:2px; background: var(--rule);
  margin: 6px auto 14px;
}
.sheet__title{ font-family:'Anton', sans-serif; font-size:19px; margin: 0 0 4px; }
.sheet__subtitle{ font-family:'Anton', sans-serif; font-size:15px; margin: 20px 0 8px; text-transform:uppercase; }
.sheet__notas{ padding-left:18px; margin:12px 0; }
.sheet__notas li{ font-size:13px; line-height:1.55; margin-bottom:10px; color: var(--ink); }
.sheet__religiosos{ list-style:none; padding:0; margin:0; }
.sheet__religiosos li{
  font-size:13px; padding: 9px 0; border-bottom: 1px solid var(--rule); display:flex; gap:8px;
}
.sheet__religiosos li b{ color: var(--green); flex-shrink:0; }
.sheet__close{
  display:block; width:100%; margin-top:10px; padding:14px;
  background: transparent; color: var(--ink); border: 1.5px solid var(--rule); border-radius: 999px;
  font-family:'Work Sans', sans-serif; font-weight:700; font-size:14px; cursor:pointer;
}

.evt-cat{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft);
  margin-bottom: 10px;
}
.evt-day{ font-size:12px; color:var(--coral); font-weight:700; margin-bottom:2px; text-transform:uppercase; }
.evt-time{ font-family:'Anton', sans-serif; font-size:30px; margin: 2px 0 6px; }
.evt-title{ font-size:18px; font-weight:700; line-height:1.3; margin-bottom:10px; }
.evt-place{ font-size:13.5px; color: var(--ink-soft); margin-bottom:12px; }
.evt-desc{ font-size:14px; line-height:1.6; }
.evt-favbtn{
  margin-top:18px; width:100%; padding:14px; border-radius: 999px;
  border:1.5px solid var(--coral); background:none; color: var(--coral); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
}
.evt-favbtn.is-fav{ background: var(--gold); border-color:var(--gold); color:#fff; }

/* ---------- Tabbar: dock flotante y colorido ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:space-around; align-items:flex-start;
  background: linear-gradient(100deg, var(--green-deep) 0%, #2C3E6B 100%);
  border-radius: 22px 22px 0 0;
  padding: 12px 6px calc(10px + var(--safe-bottom));
  box-shadow: 0 -6px 20px rgba(15,60,45,0.22);
}
.tabbar__btn{
  flex:1; max-width:80px;
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Work Sans', sans-serif;
  padding: 2px 2px 0;
}
.tabbar__circle{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; background: rgba(255,255,255,0.12);
  transition: transform .15s cubic-bezier(.32,.72,0,1), background .15s ease;
}
.tabbar__circle--programa{ box-shadow: inset 0 0 0 2px var(--coral); }
.tabbar__circle--favoritos{ box-shadow: inset 0 0 0 2px var(--gold); }
.tabbar__circle--precios{ box-shadow: inset 0 0 0 2px var(--pink); }
.tabbar__circle--notas{ box-shadow: inset 0 0 0 2px var(--blue); }
.tabbar__label{
  font-size:8.8px; line-height:1.2; font-weight:600;
  color: rgba(255,255,255,0.68); text-align:center;
}
.tabbar__btn--active .tabbar__circle{ background: var(--coral); transform: translateY(-3px) scale(1.1); box-shadow:none; }
.tabbar__btn--active .tabbar__label{ color: #fff; font-weight:700; }
.tabbar__btn:active .tabbar__circle{ transform: scale(0.92); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom: calc(78px + var(--safe-bottom));
  transform: translate(-50%, 12px);
  background: var(--ink); color:var(--cream); font-size:13px;
  padding: 10px 18px; border-radius: 20px; z-index:60;
  opacity:0; pointer-events:none; transition: all .22s ease;
}
.toast.is-visible{ opacity:1; transform: translate(-50%, 0); }

@media (min-width: 640px){
  body{ max-width:480px; margin:0 auto; box-shadow: 0 0 0 1px var(--rule); }
  .tabbar, .topbar{ max-width:480px; left:50%; transform:translateX(-50%); }
  .sheet{ max-width:480px; left:50%; transform: translate(-50%, 105%); }
  .sheet.is-open{ transform: translate(-50%, 0); }
  .sheet-backdrop{ }
}