/* === Expo Vestidos de 15 Puebla ===
   Misma paleta/tipografía que /vestidos/ (CDMX), layout de scroll normal
   (no slider) porque esta página necesita FAQ, tabla y barra fija móvil. */

:root{
  --blush:#FFF4F7; --pink:#F7C9D8; --coral:#F48CA5; --coral-deep:#E4577A;
  --plum:#3E2A31; --plum-soft:#6B4E57; --white:#ffffff;
  --mobilebar-h: 64px;
}
*{ margin:0; padding:0; box-sizing:border-box; font-family:"Roboto",sans-serif; }
h1,h2,h3,.serif{ font-family:"Gloock",serif; font-weight:400; }
html{ scroll-behavior:smooth; }
body{
  color:var(--plum); background:var(--blush);
  padding-bottom:0;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{ max-width:1100px; margin:0 auto; padding:0 24px; }
.eyebrow{ display:block; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--coral-deep); font-weight:600; margin-bottom:12px; }
.pending{ color:var(--coral-deep); background:rgba(244,140,165,.16); padding:1px 6px; border-radius:6px; font-weight:500; }

/* Header */
.site-header{ position:sticky; top:0; z-index:500; background:rgba(255,244,247,.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(228,87,122,.12); }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1100px; margin:0 auto; }
.site-header .logos{ display:flex; align-items:center; gap:12px; }
.site-header .logos img{ height:34px; width:auto; }
.site-header .logos .div{ width:1px; height:26px; background:var(--coral); opacity:.5; }
.site-header .social{ display:flex; gap:14px; font-size:16px; }

/* Hero */
.hero{ position:relative; padding:64px 0 48px; text-align:center; overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% 0%, #FFE7EE 0%, rgba(255,231,238,0) 60%),
    radial-gradient(800px 600px at 90% 90%, #FBD3E0 0%, rgba(251,211,224,0) 55%),
    linear-gradient(135deg,#FFF4F7 0%,#FDE4EC 45%,#F7C9D8 100%);
}
/* Foto de fondo con deriva lenta (mismo recurso que /vestidos/ CDMX) + velo para legibilidad */
.hero-bg{
  position:absolute; inset:-12%; z-index:0;
  background:url('imgs/portada.jpg') center 22%/cover no-repeat;
  opacity:.4;
  transform-origin:55% 40%;
  animation:heroVortex 28s ease-in-out infinite alternate;
}
@keyframes heroVortex{
  0%   { transform:scale(1.1) rotate(0deg) translate(0,0); }
  50%  { transform:scale(1.18) rotate(1.6deg) translate(-1.5%,-1%); }
  100% { transform:scale(1.12) rotate(-1.6deg) translate(1.5%,1%); }
}
@media (prefers-reduced-motion: reduce){ .hero-bg{ animation:none; } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,244,247,.55) 0%, rgba(255,244,247,.88) 60%, var(--blush) 100%);
}
#particles{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%; height:100%; }
.hero-content{ position:relative; z-index:3; }
.hero-badge{
  display:inline-flex; align-items:center; gap:4px; margin-bottom:18px;
  background:#fff; border:1.5px solid var(--coral); color:var(--coral-deep);
  font-family:"Roboto",sans-serif; font-size:.88rem; font-weight:600; letter-spacing:.3px;
  padding:10px 20px; border-radius:30px; cursor:pointer;
  box-shadow:0 10px 24px rgba(228,87,122,.22);
  animation:badgePulse 2.4s ease-in-out infinite;
}
.hero-badge strong{ color:var(--coral-deep); }
.hero-badge u{ text-underline-offset:2px; }
.hero-badge:hover{ background:var(--coral); color:#fff; }
.hero-badge:hover strong{ color:#fff; }
@keyframes badgePulse{
  0%,100%{ box-shadow:0 10px 24px rgba(228,87,122,.22); transform:scale(1); }
  50%{ box-shadow:0 10px 30px rgba(228,87,122,.42); transform:scale(1.025); }
}
@media (prefers-reduced-motion: reduce){ .hero-badge{ animation:none; } }
.hero .eyebrow{ text-align:center; }
.hero h1{ font-size:2.4rem; line-height:1.14; max-width:760px; margin:0 auto 14px; color:var(--plum); }
.hero .sub{ font-size:1.05rem; color:var(--plum-soft); max-width:620px; margin:0 auto 28px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.hero .microcopy{ font-size:.82rem; color:var(--plum-soft); margin-top:8px; }
.hero .under-cta{ font-size:.82rem; color:var(--plum-soft); margin-top:10px; max-width:420px; margin-left:auto; margin-right:auto; }
.hero .under-cta a{ color:var(--coral-deep); text-decoration:underline; }

/* Countdown */
.countdown{ display:flex; gap:10px; justify-content:center; margin-bottom:26px; }
.countdown div{
  font-family:"Gloock",serif; font-size:1.7rem; color:#fff; text-align:center;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  min-width:62px; padding:9px 6px 4px; border-radius:12px;
  box-shadow:0 8px 18px rgba(228,87,122,.28);
}
.countdown small{ display:block; font-family:"Roboto",sans-serif; font-size:.56rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.9; margin-top:2px; }

/* Reveal al hacer scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.92rem; letter-spacing:.5px; font-weight:600; padding:15px 28px; border-radius:40px; text-decoration:none; border:1.5px solid transparent; transition:all .2s ease; }
.btn-solid{ background:linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff; box-shadow:0 10px 22px rgba(228,87,122,.3); }
.btn-solid:hover{ transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.6); color:var(--coral-deep); border-color:var(--coral); }
.btn-ghost:hover{ background:var(--coral); color:#fff; }
.btn-whats{ background:#25D366; color:#fff; }

/* Secciones */
section{ padding:56px 0; }
.section-title{ font-size:1.8rem; margin-bottom:8px; text-align:center; }
.section-sub{ text-align:center; color:var(--plum-soft); max-width:560px; margin:0 auto 32px; }

/* Sal con tu vestido: 3 bloques */
.beneficios{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.beneficios-2{ grid-template-columns:1fr 1fr; max-width:620px; margin-left:auto; margin-right:auto; }
.beneficio{ background:#fff; border-radius:18px; padding:26px 20px; text-align:center; box-shadow:0 10px 26px rgba(228,87,122,.1); }
.beneficio i{ font-size:1.8rem; color:var(--coral-deep); margin-bottom:12px; }
.beneficio h3{ font-size:1.05rem; margin-bottom:6px; }
.beneficio p{ font-size:.88rem; color:var(--plum-soft); line-height:1.4; }
.beneficio .cond{ display:block; font-size:.72rem; color:var(--plum-soft); opacity:.75; margin-top:8px; }

.marcas-mini{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.marcas-mini .hl{ display:flex; align-items:flex-start; gap:12px; max-width:260px; }
.marcas-mini i{ color:var(--coral-deep); font-size:1.2rem; margin-top:2px; }
.marcas-mini span{ font-size:.88rem; color:var(--plum); font-weight:300; }
.marcas-mini b{ font-weight:600; }

/* Tabla comparativa */
.compare-wrap{ overflow-x:auto; }
table.compare{ width:100%; border-collapse:collapse; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(228,87,122,.1); min-width:520px; }
table.compare th,table.compare td{ padding:16px 18px; text-align:center; border-bottom:1px solid rgba(228,87,122,.12); font-size:.92rem; }
table.compare th{ background:rgba(244,140,165,.12); font-family:"Gloock",serif; font-weight:400; font-size:1.05rem; }
table.compare td:first-child,table.compare th:first-child{ text-align:left; font-weight:600; color:var(--plum-soft); font-size:.85rem; }
table.compare tr:last-child td{ border-bottom:none; }
table.compare .btn{ padding:10px 18px; font-size:.82rem; }
table.compare .hidden-row{ display:none; }

/* Galería (carrusel simple) */
.carousel{ position:relative; width:100%; max-width:960px; margin:0 auto; }
.car-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.car-track::-webkit-scrollbar{ height:6px; }
.car-track::-webkit-scrollbar-thumb{ background:var(--coral); border-radius:4px; }
.car-item{ flex:0 0 260px; scroll-snap-align:start; }
.car-item img{ width:100%; height:340px; object-fit:cover; border-radius:16px; box-shadow:0 12px 26px rgba(228,87,122,.18); }

.carousel{ display:flex; align-items:center; gap:10px; }
.car-nav{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--coral-deep); box-shadow:0 8px 20px rgba(228,87,122,.22); transition:all .2s; }
.car-nav:hover{ background:var(--coral); color:#fff; }
.car-dots{ display:flex; gap:7px; justify-content:center; margin-top:16px; }
.car-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(228,87,122,.25); cursor:pointer; transition:background .2s; }
.car-dots span.active{ background:var(--coral-deep); }

.marcas{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:36px; }
.marca-card{ width:180px; height:110px; background:rgba(255,255,255,.75); border-radius:16px; display:flex; align-items:center; justify-content:center; padding:18px; box-shadow:0 10px 22px rgba(228,87,122,.12); }
.marca-card img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Formulario */
.form-section{ background:#fff; }
.form-box{ max-width:640px; margin:0 auto; background:var(--blush); border-radius:22px; padding:32px 28px; box-shadow:0 10px 26px rgba(228,87,122,.12); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.form-grid.full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--plum-soft); font-weight:600; }
.field input,.field select{ padding:12px 14px; border:1px solid var(--coral); border-radius:12px; background:#fff; font-size:.95rem; color:var(--plum); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--coral-deep); box-shadow:0 0 0 3px rgba(244,140,165,.2); }
.field.err input,.field.err select{ border-color:#c0392b; }
.field small.hint{ font-size:.75rem; color:var(--coral-deep); }
fieldset.radio-group{ border:none; padding:0; margin-bottom:18px; }
fieldset.radio-group legend{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--plum-soft); font-weight:600; margin-bottom:10px; }
.radio-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.radio-opts label{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--coral); border-radius:10px; padding:10px 12px; font-size:.86rem; cursor:pointer; }
.radio-opts input{ accent-color:var(--coral-deep); }
.consent{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:.82rem; color:var(--plum-soft); }
.consent input{ margin-top:3px; accent-color:var(--coral-deep); }
.consent a{ color:var(--coral-deep); text-decoration:underline; }
.hp-field{ position:absolute; left:-9999px; }
.form-msg{ margin-top:14px; font-size:.85rem; }
.form-msg.ok{ color:var(--coral-deep); }
.form-msg.err{ color:#c0392b; }
.form-submit{ width:100%; justify-content:center; margin-top:4px; }

/* Sede */
.sede-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.sede-info p{ font-size:1rem; margin-bottom:12px; }
.sede-info i{ color:var(--coral-deep); margin-right:8px; width:18px; text-align:center; }
.sede-map{ border-radius:18px; overflow:hidden; height:320px; background:#eee; box-shadow:0 10px 24px rgba(228,87,122,.14); }
.sede-map iframe{ width:100%; height:100%; border:0; }

/* FAQ */
.faq-item{ background:#fff; border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:0 6px 16px rgba(228,87,122,.08); }
.faq-q{ width:100%; text-align:left; padding:18px 20px; background:none; border:none; font-size:.98rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--plum); }
.faq-q i{ color:var(--coral-deep); transition:transform .2s; }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px; }
.faq-item.open .faq-a{ max-height:300px; padding-bottom:18px; }
.faq-a p{ font-size:.88rem; color:var(--plum-soft); line-height:1.5; }

/* Footer */
.site-footer{ padding:32px 24px; text-align:center; font-size:.78rem; color:var(--plum-soft); border-top:1px solid rgba(228,87,122,.14); }
.site-footer a{ color:var(--plum); text-decoration:underline; }

/* Modal de bienvenida */
.promo-overlay{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(62,42,49,.5); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; }
.promo-overlay.show{ opacity:1; visibility:visible; }
.promo-card{ position:relative; width:100%; max-width:440px; text-align:center; padding:38px 30px 26px;
  background:linear-gradient(160deg,#fff 0%,#FFF0F4 100%); border-radius:24px;
  border:1px solid rgba(244,140,165,.3); box-shadow:0 30px 70px rgba(228,87,122,.3);
  transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.promo-overlay.show .promo-card{ transform:none; }
.promo-close{ position:absolute; top:14px; right:16px; width:34px; height:34px; border:none; border-radius:50%;
  background:rgba(228,87,122,.1); color:var(--coral-deep); font-size:22px; line-height:1; cursor:pointer; }
.promo-close:hover{ background:rgba(228,87,122,.22); }
.promo-eyebrow{ display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--coral-deep); font-weight:600; margin-bottom:12px; }
.promo-title{ font-size:1.6rem; line-height:1.15; color:var(--plum); margin-bottom:10px; }
.promo-title em{ font-style:italic; color:var(--coral-deep); }
.promo-sub{ font-size:.92rem; color:var(--plum-soft); margin-bottom:22px; }
.promo-perks{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:22px; text-align:left; }
.promo-perks li{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--plum); font-weight:500; }
.promo-perks i{ color:var(--coral-deep); width:18px; text-align:center; }
.promo-btns{ display:flex; flex-direction:column; gap:10px; }
.promo-fine{ font-size:.74rem; color:var(--plum-soft); margin-top:14px; opacity:.85; }

.vip-form{ text-align:left; }
.vip-form .field{ margin-bottom:16px; }
.vip-submit{ width:100%; justify-content:center; margin-top:4px; }
.vip-submit[disabled]{ opacity:.6; pointer-events:none; }
.cita-legal{ font-size:.68rem; line-height:1.5; color:var(--plum-soft); opacity:.85; margin-top:12px; text-align:left; }

/* Barra fija móvil */
.mobile-bar{ display:none; }

/* Responsive */
@media (max-width:860px){
  .beneficios{ grid-template-columns:1fr; }
  .sede-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  /* Mantiene las 4 opciones en 2x2: más compacto y fácil de tocar con el pulgar que 4 filas */
  .radio-opts{ grid-template-columns:1fr 1fr; gap:8px; }
  .radio-opts label{ padding:12px 10px; font-size:.8rem; justify-content:center; text-align:center; }
}
@media (max-width:600px){
  .hero{ padding:40px 0 32px; }
  .hero h1{ font-size:1.7rem; }
  .hero .sub{ font-size:.92rem; }
  .section-title{ font-size:1.4rem; }
  body{ padding-bottom:var(--mobilebar-h); }
  .mobile-bar{
    display:flex; position:fixed; bottom:0; left:0; width:100%; z-index:600;
    background:#fff; box-shadow:0 -6px 18px rgba(228,87,122,.2);
    padding:8px 10px; gap:8px;
  }
  .mobile-bar .btn{ flex:1; justify-content:center; padding:12px 8px; font-size:.78rem; }
}