/* ===============================
   Punto Diversión · estilo final
   =============================== */
:root{
  --bg: #F6F8F8;
  --ink: #111213;
  --outline: #121212;

  --blue:   #AEE4F8;
  --salmon: #F7A6A1;
  --mint:   #A7E8C9;
  --yellow: #FFF3A6;
  --peach:  #FFD6BE;

  --font-logo: "Luckiest Guy", system-ui, sans-serif;
  --font-round:"Baloo 2", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, sans-serif;

  --r-xl: 18px;
  --shadow-1: 0 8px 22px rgba(0,0,0,.10);
  --shadow-2: 0 10px 26px rgba(0,0,0,.14);
  --t-fast: .18s cubic-bezier(.2,.6,.2,1);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
.container{ width: min(1100px, 94vw); margin-inline: auto; }
.section{ padding: 30px 0; }

/* ===== Título estilo logo (texto) ===== */
.hero{ position: relative; text-align: center; padding: 22px 12px 6px; }
.logo-stack{
  position: relative;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
  width: 100%;
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe{
  0%  { transform: scale(1); }
  50% { transform: scale(1.015); }
  100%{ transform: scale(1); }
}
.row{
  display: inline-block;
  font-family: var(--font-logo);
  line-height: .9;
  letter-spacing: 1px;
  font-size: clamp(38px, 6vw, 96px);
  text-transform: uppercase;
}
.row--punto{ margin-bottom: 2px; }
.ch{
  display: inline-block;
  padding: 0 3px;
  -webkit-text-stroke: 8px var(--outline);
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 var(--outline),
    0 -2px 0 var(--outline),
    -2px 0 0 var(--outline),
    2px 0 0 var(--outline);
}
.c-blue{ color: var(--blue); } .c-salmon{ color: var(--salmon); } .c-mint{ color: var(--mint); }
.c-yellow{ color: var(--yellow); } .c-peach{ color: var(--peach); }

/* ===== Fade-in reusable ===== */
.fade{ opacity: 0; transition: opacity .8s ease; }
.fade.inview{ opacity: 1; }
.fade-group > *{ opacity: 0; transition: opacity .8s ease .08s; }
.fade-group > *.inview{ opacity: 1; }

/* ===== COMBOS ===== */
.section-title{ font-family: var(--font-round); font-size: clamp(22px, 3.8vw, 34px); text-align: center; margin: 6px 0 6px; color: #2a4a41; }

.combos-grid{
  width: min(1100px, 96vw);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.combo-card{
  position: relative; background: #fff; border: 2px solid rgba(94,158,141,.22); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  will-change: transform;
}
.combo-card.motion:hover{ box-shadow: var(--shadow-2); }
.combo-card__body{
  position: relative;
  padding: 12px 12px 12px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: 8px;
  min-height: 280px;
}

/* Decor (sin lápiz) */
.decor .star{ position: absolute; right: 6px; top: 6px; opacity: .9; }
.decor .dots{ position: absolute; left: 50%; top: 0; width: 220px; height: 100px; transform: translateX(-50%);
  background:
    radial-gradient(7px 7px at 10% 30%, rgba(174,228,248,.55), transparent 60%),
    radial-gradient(6px 6px at 75% 50%, rgba(247,166,161,.55), transparent 60%),
    radial-gradient(6px 6px at 55% 20%, rgba(167,232,201,.55), transparent 60%);
  opacity: .7;
}

/* Subtítulos en tarjetas (más chicos, estilo logo) */
.combo-subtitle{ margin: 0; text-align: center; line-height: .9; }
.ch.small{ -webkit-text-stroke: 4px var(--outline); font-family: var(--font-logo); font-size: clamp(18px, 2.7vw, 30px); margin: 0 1px; }

/* Chips compactos */
.chips{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip{ background: #eef6f2; color: #2b3a38; border: 1px solid rgba(94,158,141,.25); border-radius: 999px; padding: 4px 8px; font-weight: 700; font-size: 10px; }

/* Checklist compacta */
.checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.checklist li{ display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 6px; font-size: 14px; }
.checklist .check svg{ width: 14px; height: 14px; }

/* CTA: botón "Consultas" (degradado pastel + icono) */
.cta-line{ display: flex; justify-content: center; margin-top: 6px; }
.btn{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; }
.btn--wa{
  --grad-a: color-mix(in srgb, var(--mint) 75%, white 25%);
  --grad-b: color-mix(in srgb, var(--blue) 70%, white 30%);
  --ring: rgba(37, 211, 102, 0.5);
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn--wa:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14), 0 0 0 6px var(--ring);
  filter: saturate(1.05);
}
.btn--tight{ width: 100%; max-width: 220px; }

/* ===== HORARIOS ===== */
.section--horarios{ padding-top: 8px; padding-bottom: 34px; }
.horarios-card{ background: #ffffff; border: 2px solid rgba(94,158,141,.22); border-radius: var(--r-xl); padding: 16px; width: min(820px, 94vw);
  margin: 0 auto; box-shadow: var(--shadow-1); text-align: center; }
.hx--main{ font-family: var(--font-round); color: #5aa08e; font-size: clamp(24px, 5vw, 38px); margin: 0; }
.hx--sub{ font-family: var(--font-round); color: var(--salmon); font-size: clamp(18px, 4.2vw, 30px); margin: -4px 0 6px; }
.horarios-list{ margin: 8px auto; padding-left: 0; list-style: none; color: #2b3a38; line-height: 1.6; }
.nota{ margin: 6px 0 0; color: #6f8a84; font-size: 13px; }

/* ===== FOOTER ===== */
.site-footer{ padding: 16px 0 26px; text-align: center; color: #5c6b69; }
.footer__inner{ width: min(1100px, 94vw); margin: 0 auto; }
.copyright{ margin: 0; }

/* Mobile tuning */
@media (max-width: 640px){
  .row{ font-size: clamp(34px, 8.5vw, 80px); }
  .ch{ -webkit-text-stroke: 6px var(--outline); }
  .ch.small{ -webkit-text-stroke: 4px var(--outline); }
}


/* ===== Línea guía animada bajo el título ===== */
.title-divider{
  width: min(740px, 92vw);
  height: 40px;
  margin: 8px auto 4px;
  display: block;
  opacity: 0; /* se controla con fade */
}
.title-divider path{
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
/* Cuando entra en vista, se dibuja la línea y aparece */
.fade.inview.title-divider{ opacity: 1; transition: opacity .6s ease .1s; }
.fade.inview.title-divider path{ animation: draw-divider 1.2s ease-out forwards; }
@keyframes draw-divider{
  to{ stroke-dashoffset: 0; }
}