/* =====================================================================
   LITTLE MOKA · Página de preapertura (temporal)
   Se apoya en styles.css: aquí solo va lo propio de esta página.
   ===================================================================== */

body.pre{ background: var(--cream); }

/* ============================ CABECERA ============================= */
.pre-top{
  padding: 1.1rem 0;
  display:flex; justify-content:center;
}
.pre-top img{ width:52px; height:auto; }

/* ============================== HERO =============================== */
.pre-hero{
  position:relative; overflow:hidden;
  text-align:center;
  padding: .5rem 0 clamp(2.5rem, 6vw, 4rem);
}
.pre-hero__logo{
  width:min(78%, 380px); margin:0 auto clamp(1.2rem, 3vw, 1.8rem);
}
.pre-hero__fecha{
  display:inline-block;
  font-family: var(--f-head); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.76rem;
  color: var(--brown); background: var(--beige);
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1rem;
}
.pre-hero h1{
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  color: var(--brown-dk); margin:0 0 .5rem;
  text-wrap: balance;
}
.pre-hero p{
  margin:0 auto 2rem; max-width: 34ch;
  color: var(--ink-soft); font-size: 1.05rem;
  text-wrap: pretty;
}
.pre-hero__mini{
  margin-top:.9rem !important; font-size:.86rem !important; color: var(--ink-soft);
}

/* Confeti decorativo del hero */
.confeti{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.confeti i{
  position:absolute; display:block;
  width:12px; height:12px; border-radius:3px;
  opacity:.42;
  animation: flota 7s ease-in-out infinite;
}
.confeti i:nth-child(odd){ border-radius:999px; }
@keyframes flota{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-16px) rotate(18deg); }
}
.pre-hero .wrap{ position:relative; z-index:1; }

/* =========================== FORMULARIO ============================ */
.pre-form{ text-align:left; }

.pregunta{ margin-bottom: 2rem; }
.pregunta:last-of-type{ margin-bottom: 1.2rem; }
.pregunta__t{
  font-family: var(--f-head); font-weight:600;
  font-size:1.08rem; color: var(--brown-dk);
  margin:0 0 .2rem;
}
/* .form label de styles.css gana por especificidad: lo devolvemos al tamaño de pregunta */
.pre-form label.pregunta__t{
  font-size:1.08rem; font-weight:600; margin-bottom:.2rem;
  font-family: var(--f-head); color: var(--brown-dk);
}

.pregunta__s{
  margin:0 0 .85rem; font-size:.88rem; color: var(--ink-soft);
}

/* --- Estrellas --- */
.stars{
  display:flex; gap:.35rem; justify-content:center;
  border:0; padding:0; margin:0;
}
.stars button{
  background:none; border:0; cursor:pointer; padding:.15rem;
  font-size: clamp(2.4rem, 11vw, 3.2rem); line-height:1;
  color: var(--beige-dk);
  transition: transform .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.stars button::before{ content:'★'; }
.stars button:hover{ transform: scale(1.12); }
.stars button.on{ color: var(--amber); }
.stars__txt{
  text-align:center; margin:.5rem 0 0; min-height:1.5em;
  font-family: var(--f-head); font-weight:600; color: var(--brown);
}

/* --- Caritas por aspecto --- */
.aspecto{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem 0; border-bottom:1px dashed var(--beige-dk);
  flex-wrap:wrap;
}
.aspecto:last-child{ border-bottom:0; }
.aspecto__t{ flex:1 1 130px; font-weight:600; font-size:.97rem; }
.caritas{ display:flex; gap:.3rem; flex:none; }
.caritas button{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--beige-dk); background:#fff;
  font-size:1.35rem; line-height:1; cursor:pointer;
  display:grid; place-content:center;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.caritas button:hover{ transform: translateY(-2px); }
.caritas button.on{ border-color: var(--teal); background: #E6F1F3; transform: scale(1.06); }

/* --- Chips --- */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  border:2px solid var(--beige-dk); background:#fff;
  color: var(--ink); font-family: var(--f-body); font-weight:600;
  font-size:.92rem; padding:.5rem .9rem; border-radius:999px;
  cursor:pointer; transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover{ border-color: var(--brown-lt); }
.chip.on{ background: var(--brown); border-color: var(--brown); color:#fff; }

/* --- Recomendarías --- */
.opciones{ display:grid; gap:.5rem; }
.opcion{
  display:flex; align-items:center; gap:.7rem;
  border:2px solid var(--beige-dk); background:#fff;
  border-radius: var(--r-sm); padding:.75rem .95rem;
  cursor:pointer; font-weight:600; transition: all .12s ease;
}
.opcion:hover{ border-color: var(--brown-lt); }
.opcion.on{ border-color: var(--teal); background:#E6F1F3; }
.opcion span:first-child{ font-size:1.3rem; line-height:1; }

/* --- Aviso de configuración pendiente (lo ve el dueño) --- */
.aviso-config{
  background:#FFF3DC; border-left:6px solid var(--amber);
  border-radius: var(--r-sm); padding:.9rem 1.1rem; margin:0 0 1.5rem;
  font-size:.9rem; color:#6b4c15;
}
.aviso-config code{
  background: rgba(0,0,0,.06); padding:.1rem .35rem; border-radius:6px;
}

/* ============================= GRACIAS ============================= */
.gracias{ text-align:center; }
.gracias__owl{ width:120px; margin:0 auto 1rem; }
.gracias h2{ font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--brown-dk); }
.gracias p{ color: var(--ink-soft); max-width:38ch; margin:0 auto 1.6rem; }
#confetiCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:90;
}

.resena{
  background:#fff; border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem); text-align:center;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--amber);
}
.resena__estrellas{
  display:block; color: var(--amber); font-size:2rem;
  letter-spacing:.2em; line-height:1; margin-bottom:.7rem;
}
.resena__t{ font-size: clamp(1.4rem, 5vw, 1.9rem); color: var(--brown-dk); margin-bottom:.5rem; max-width:none; }
.resena__p{ color: var(--ink-soft); margin:0 auto 1.5rem; max-width:44ch; }
.resena__o{
  text-align:center; margin:1.6rem 0 0;
  color: var(--ink-soft); font-size:.92rem;
}

.pre-share__btns{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.4rem;
}

/* ============================ COMPARTIR ============================ */
.pre-share{ text-align:center; }
.pre-share .btnrow{
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap;
  margin-top:1.4rem;
}

/* =========================== PRÓXIMAMENTE ========================== */
.pronto{
  position:relative; overflow:hidden;
  border-radius: var(--r-xl);
  background: var(--cream-2);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(107,68,35,.14) 2px, transparent 0);
  background-size: 26px 26px;
  padding: clamp(2.2rem, 6vw, 3.4rem) clamp(1.3rem, 4vw, 2.6rem);
  text-align:center;
  box-shadow: var(--shadow-sm);
}
.pronto__logo{ width:min(70%, 300px); margin:0 auto 1.4rem; }
.pronto__badge{
  display:inline-block;
  font-family: var(--f-head); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; font-size:.8rem;
  color:#fff; background: var(--coral);
  padding:.5rem 1.2rem; border-radius:999px;
  margin-bottom:1rem;
  box-shadow: 0 4px 0 rgba(0,0,0,.14);
}
.pronto h2{ font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--brown-dk); margin-bottom:.4rem; max-width:none; }
.pronto p{ color: var(--ink-soft); max-width:44ch; margin:0 auto 1.6rem; }

/* ============================== PIE ================================ */
.pre-foot{
  text-align:center; padding: 2.5rem 0 3rem;
  color: var(--ink-soft); font-size:.9rem;
}
.pre-foot img{ width:44px; margin:0 auto .8rem; opacity:.75; }
.pre-foot a{ color: var(--brown); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .confeti i{ animation:none; }
  .stars button, .caritas button, .chip, .opcion{ transition:none; }
}