/* ══════════ APERTURA DE VENTAS ══════════
   Se usa solo cuando el panel pone las ventas en pausa (ver assets/js/apertura.js): banner fino arriba, botones «Avísame cuando
   abramos» y el formulario de correo. Con las ventas abiertas, este archivo no cambia nada. */

/* Banner: arriba de todo, en el flujo normal (se va al bajar; el encabezado fijo queda debajo). */
.ap-banner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 16px;
  padding:9px var(--pad); background:var(--burdeo-hondo,#4A1620); color:#FBF3E8;
  font-size:.86rem; line-height:1.45; text-align:center; font-weight:400;
}
.ap-banner__txt{ max-width:70ch; text-wrap:balance }
.ap-banner__btn{
  flex:none; min-height:36px; padding:6px 16px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(221,190,102,.75); background:transparent; color:#F1DE9F;
  font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  transition:background .25s, color .25s;
}
.ap-banner__btn:hover{ background:#DDBE66; color:#2A2420 }
.ap-banner__btn:focus-visible{ outline:2px solid #FBF3E8; outline-offset:2px }

/* Con las ventas en pausa la tienda NO cambia de aspecto (botones, listados, carro, fichas): solo el banner opcional y el
   formulario que aparece al intentar pagar. */
.ap-dialogo__aclara{ margin:0 0 14px; font-size:.86rem; line-height:1.5; color:var(--gris) }

/* Nota del cupón dentro del popup de captación. */
.ap-cupon-nota{ margin:10px 0 0; font-size:.78rem; line-height:1.5; color:var(--gris); text-align:center }

/* Formulario «Avísame cuando abramos» */
body.ap-dialogo-abierto{ overflow:hidden }
.ap-dialogo{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px }
.ap-dialogo__velo{ position:absolute; inset:0; background:rgba(42,36,32,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
.ap-dialogo__caja{
  position:relative; width:min(460px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:30px 28px 26px;
  background:var(--superficie-alta,#FDFBF7); color:var(--tinta); border-radius:var(--r-l,16px);
  box-shadow:var(--sombra-3); outline:none;
}
.ap-dialogo__x{
  position:absolute; top:8px; right:10px; width:44px; height:44px; display:grid; place-items:center;
  font-size:1.7rem; line-height:1; background:none; border:0; color:var(--gris); cursor:pointer; border-radius:50%;
}
.ap-dialogo__x:hover{ color:var(--marfil) }
.ap-dialogo__x:focus-visible, .ap-dialogo__input:focus-visible{ outline:2px solid var(--marfil); outline-offset:2px }
.ap-dialogo__tit{ font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1.15; margin:0 36px 10px 0 }
.ap-dialogo__txt{ font-size:.95rem; line-height:1.6; color:var(--tinta); margin:0 0 16px }
.ap-dialogo__form{ display:grid; gap:14px }
.ap-dialogo__campo{ display:grid; gap:6px }
.ap-dialogo__etq{ font-size:.78rem; letter-spacing:.06em; color:var(--gris) }
.ap-dialogo__input{
  width:100%; min-height:48px; padding:10px 14px; font:inherit; font-size:1rem; color:var(--tinta);
  background:#fff; border:1.5px solid var(--carbon); border-radius:12px;
}
.ap-dialogo__consent{ display:flex; gap:10px; align-items:flex-start; font-size:.84rem; line-height:1.5; color:var(--tinta); cursor:pointer }
.ap-dialogo__consent input{ margin-top:4px; flex:none; width:18px; height:18px }
.ap-dialogo__trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.ap-dialogo__estado{ min-height:1.3em; margin:0; font-size:.86rem; color:var(--gris); line-height:1.5 }
.ap-dialogo__estado--error{ color:var(--error) }
.ap-dialogo__listo{ display:grid; gap:6px }
.ap-dialogo__listo-tit{ font-family:var(--serif); font-size:1.35rem; margin:0 }

@media (max-width:640px){
  .ap-banner{ font-size:.82rem; padding-block:8px; gap:6px 10px }
  .ap-banner__btn{ min-height:40px }
  .ap-dialogo{ place-items:end center; padding:0 }
  .ap-dialogo__caja{ width:100%; border-radius:var(--r-l,16px) var(--r-l,16px) 0 0; padding:26px 20px calc(22px + env(safe-area-inset-bottom)) }
}
@media (prefers-reduced-motion:no-preference){
  .ap-dialogo__caja{ animation:apDialogo .24s var(--curva) }
  @keyframes apDialogo{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }
}