/* === Expo Vestidos de 15 · landing coral ===
   Estructura tipo expo15.com (slider horizontal + flechas + progreso),
   pero con fondo de partículas en movimiento y paleta rosa/coral. */

:root{
  --blush:#FFF4F7;
  --pink:#F7C9D8;
  --coral:#F48CA5;
  --coral-deep:#E4577A;
  --plum:#3E2A31;
  --plum-soft:#6B4E57;
  --white:#ffffff;
}

*{ 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,body{ height:100%; overflow:hidden; color:var(--plum); }
body{
  background:
    radial-gradient(1200px 700px at 15% 10%, #FFE7EE 0%, rgba(255,231,238,0) 60%),
    radial-gradient(1000px 800px at 90% 90%, #FBD3E0 0%, rgba(251,211,224,0) 55%),
    linear-gradient(135deg, var(--blush) 0%, #FDE4EC 45%, var(--pink) 100%);
}

/* Partículas */
#particles{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}

/* Header */
.header{
  position:fixed; top:0; left:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 34px; z-index:1000; color:var(--plum);
}
.logo{ display:flex; align-items:center; gap:14px; }
.logo .lg-expo15{ width:120px; opacity:.9; }
.logo .lg-vestidos{ height:46px; width:auto; }
.logo-div{ width:1px; height:34px; background:var(--coral); opacity:.6; }
.social{ display:flex; align-items:center; gap:14px; font-size:13px; letter-spacing:2px; }
.social a{ color:var(--plum); text-decoration:none; }
.social a:hover{ color:var(--coral-deep); }
.pleca-top{ position:relative; padding-right:52px; font-size:12px; letter-spacing:2px; }
.pleca-top:after{ content:""; position:absolute; right:0; top:50%; width:40px; height:1px; background:var(--coral); }

/* Slider */
.slider-wrapper{ height:100vh; width:100vw; overflow:hidden; position:relative; z-index:1; }
.slider{ display:flex; transition:transform 1s ease-in-out; height:100%; }
.slide{
  flex:0 0 100vw; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:90px 60px;
  position:relative;   /* ancla ::before y .hero-bg a cada slide (evita que el fondo se cuele) */
}
.content{
  width:100%; max-width:1140px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:48px;
}
.content .col{ flex:1 1 380px; min-width:300px; }
.content.center{ flex-direction:column; text-align:center; gap:24px; }

/* Reveal (entra escalonado como el sitio) */
.reveal{ opacity:0; transform:translateY(22px); }
.slide.active .reveal{ animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.slide.active .reveal:nth-child(2){ animation-delay:.12s; }
.slide.active .reveal:nth-child(3){ animation-delay:.24s; }
.slide.active .reveal:nth-child(4){ animation-delay:.36s; }
.slide.active .reveal:nth-child(5){ animation-delay:.48s; }
.slide.active .reveal:nth-child(6){ animation-delay:.60s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* Tipografía */
.eyebrow{ display:inline-block; font-size:12px; letter-spacing:4px; text-transform:uppercase;
  color:var(--coral-deep); font-weight:600; margin-bottom:14px; }
h2{ font-size:2.6rem; line-height:1.08; margin-bottom:16px; }
.content p{ font-size:1.02rem; line-height:1.6; color:var(--plum-soft); font-weight:300; margin-bottom:14px; }
.content p em{ font-family:"Gloock",serif; font-style:italic; color:var(--coral-deep); }

/* HERO con foto de portada + fondo animado (efecto vórtice/deriva) */
#slide-1{ overflow:hidden; }
.hero-bg{
  position:absolute; inset:-12%; z-index:0;
  background:url('imgs/portada.jpg') center/cover no-repeat;
  transform-origin:58% 42%;
  animation:heroVortex 26s ease-in-out infinite alternate;
}
@keyframes heroVortex{
  0%   { transform:scale(1.12) rotate(0deg)    translate(0, 0); }
  50%  { transform:scale(1.2)  rotate(2.2deg)  translate(-2%, -1.2%); }
  100% { transform:scale(1.14) rotate(-2deg)   translate(2%, 1.2%); }
}
@media (prefers-reduced-motion: reduce){ .hero-bg{ animation:none; } }
#slide-1::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,244,247,.96) 0%, rgba(255,244,247,.9) 30%,
    rgba(255,244,247,.55) 52%, rgba(255,244,247,.12) 72%, rgba(255,244,247,0) 88%);
}
#slide-1 .content{ position:relative; z-index:2; }
.hero{ flex-direction:column; align-items:flex-start; text-align:left; gap:18px;
  max-width:640px; margin:0; margin-right:auto; }
.hero .hero-tag,.hero .hero-meta,.hero .hero-cta,.hero .countdown{ text-align:left; justify-content:flex-start; }
.hero-logo{
  width:min(480px,66vw); height:auto;   /* logo ya viene con fondo transparente */
}
.hero-tag{ font-size:1.35rem; color:var(--plum); font-weight:300; letter-spacing:.3px; }
.hero-tag em{ font-family:"Gloock",serif; font-style:italic; color:var(--coral-deep); }
.hero-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:.95rem; color:var(--plum); letter-spacing:.5px; }
.hero-meta i{ color:var(--coral-deep); margin-right:6px; }
.hero-meta .dot{ color:var(--coral); }

/* Countdown */
.countdown{ display:flex; gap:10px; margin:6px 0 4px; }
.countdown span{
  font-family:"Gloock",serif; font-size:2.2rem; color:var(--white);
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  min-width:76px; padding:10px 8px 4px; border-radius:14px; text-align:center;
  box-shadow:0 10px 24px rgba(228,87,122,.28);
}
.countdown small{ display:block; font-family:"Roboto"; font-size:.62rem; letter-spacing:2px;
  text-transform:uppercase; opacity:.9; margin-top:2px; }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:.92rem; letter-spacing:1.5px; font-weight:600; padding:15px 30px;
  border-radius:40px; text-decoration:none; border:1.5px solid transparent; transition:all .25s ease; }
.btn-solid{ background:linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff;
  box-shadow:0 12px 26px rgba(228,87,122,.32); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(228,87,122,.42); }
.btn-ghost{ background:rgba(255,255,255,.5); color:var(--coral-deep); border-color:var(--coral); }
.btn-ghost:hover{ background:var(--coral); color:#fff; }
.btn-whats{ background:#25D366; color:#fff; justify-content:center; width:100%; margin-top:6px;
  box-shadow:0 12px 26px rgba(37,211,102,.3); }
.btn-whats:hover{ transform:translateY(-2px); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* Highlights */
.hl{ display:flex; align-items:flex-start; gap:16px; padding:16px 0;
  border-bottom:1px solid rgba(228,87,122,.16); }
.hl i{ color:var(--coral-deep); font-size:1.25rem; margin-top:3px; width:26px; text-align:center; }
.hl span{ font-weight:300; color:var(--plum); }
.hl b{ font-weight:600; }

/* Carrusel de vestidos */
.carousel{ position:relative; width:100%; max-width:980px; margin:6px auto 0; }
.car-track{ display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.car-item{ flex:0 0 33.333%; padding:8px; }
.car-item img{ width:100%; height:52vh; max-height:440px; object-fit:cover; border-radius:18px;
  box-shadow:0 16px 34px rgba(228,87,122,.22); }
.car-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--coral-deep); box-shadow:0 8px 20px rgba(228,87,122,.28);
  transition:all .2s; }
.car-nav:hover{ background:var(--coral); color:#fff; }
.car-prev{ left:-14px; } .car-next{ right:-14px; }

/* Marcas (3 logos) — tarjetas blancas para dar contraste a los colores */
.marcas{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin:14px 0 4px; }
.marca{ width:280px; height:180px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border-radius:20px; padding:26px;
  box-shadow:0 14px 30px rgba(228,87,122,.15); border:1px solid rgba(255,255,255,.6); }
.marca img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Sede / mapa */
.sede{ margin:6px 0 20px; }
.sede p{ font-size:1rem; margin-bottom:12px; color:var(--plum); }
.sede i{ color:var(--coral-deep); margin-right:10px; width:20px; text-align:center; }
.sede b{ font-weight:600; }
.sede-foto img{ width:100%; height:auto; max-height:56vh; object-fit:cover;
  border-radius:20px; box-shadow:0 18px 38px rgba(228,87,122,.25); }

/* Formulario VIP */
.form{ display:flex; flex-direction:column; gap:16px;
  background:rgba(255,255,255,.55); padding:26px; border-radius:22px;
  border:1px solid rgba(228,87,122,.18); backdrop-filter:blur(6px); }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; color:var(--plum-soft); }
.form input{ padding:12px 14px; border:1px solid var(--coral); border-radius:12px;
  background:#fff; color:var(--plum); font-size:1rem; }
.form input:focus{ outline:none; border-color:var(--coral-deep); box-shadow:0 0 0 3px rgba(244,140,165,.25); }
.nota-form{ font-size:.8rem; color:var(--plum-soft); text-align:center; margin-top:2px; }

/* Progreso */
.progress{ position:fixed; bottom:34px; left:34px; display:flex; gap:8px; z-index:1000; }
.progress span{ width:36px; height:3px; border-radius:3px; background:rgba(228,87,122,.25); transition:background .4s; }
.progress span.on{ background:var(--coral-deep); }

/* Controles */
.controls{ position:fixed; right:30px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1000; }
.controls button{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--coral);
  background:rgba(255,255,255,.6); color:var(--coral-deep); cursor:pointer; transition:all .25s; }
.controls button:hover{ background:var(--coral); color:#fff; }
.pleca-flechas{ width:1px; height:26px; background:var(--coral); }

/* Footer */
.footer{ position:fixed; bottom:28px; left:0; width:100%; display:flex;
  justify-content:space-between; align-items:center; padding:0 34px; z-index:999;
  font-size:.78rem; color:var(--plum-soft); letter-spacing:1px; pointer-events:none; }
.footer a{ color:var(--plum); text-decoration:none; pointer-events:auto; }
.footer .sep{ margin:0 8px; color:var(--coral); }
.footer-brands{ padding-left:60px; } /* deja espacio a los dots de progreso */

/* Huecos visibles */
.hueco-logo{ border:2px dashed var(--coral); border-radius:16px; background:rgba(255,255,255,.4);
  color:var(--coral-deep); text-align:center; font-weight:600; letter-spacing:1px; }
.hueco-logo small{ font-weight:400; letter-spacing:0; color:var(--plum-soft); }
.hueco-txt,.hueco-inline{ color:var(--coral-deep); background:rgba(244,140,165,.16);
  padding:1px 7px; border-radius:6px; font-size:.85em; font-weight:500; }
.nota{ font-size:.82rem; color:var(--plum-soft); }
.nota i{ color:var(--coral-deep); margin-right:6px; }

/* Responsive */
@media (max-width:900px){
  /* Header compacto */
  .header{ padding:12px 16px; align-items:center; }
  .logo{ gap:8px; }
  .logo .lg-expo15{ width:74px; }
  .logo .lg-vestidos{ height:28px; }
  .logo-div{ display:none; }
  .pleca-top{ display:none; }            /* oculta "¡Dános Follow!" */
  .social{ gap:16px; }
  .social a i{ font-size:18px; }

  /* Slides: contenido desde arriba, despejado del header, con scroll si hace falta */
  .slide{ padding:86px 20px 70px; align-items:flex-start; overflow-y:auto; }
  .content{ gap:20px; }
  .content.center{ gap:14px; }
  h2{ font-size:1.65rem; line-height:1.14; }
  .content p{ font-size:.94rem; }
  .eyebrow{ margin-bottom:8px; font-size:11px; }

  /* Hero */
  .hero{ max-width:100%; gap:14px; }
  .hero-logo{ width:72vw; }
  .hero-tag{ font-size:1.02rem; }
  .hero-meta{ font-size:.8rem; gap:8px; }
  #slide-1::before{ background:linear-gradient(180deg,
    rgba(255,244,247,.92) 0%, rgba(255,244,247,.72) 45%, rgba(255,244,247,.5) 100%); }
  .countdown{ gap:6px; }
  .countdown span{ min-width:50px; font-size:1.45rem; padding:8px 5px 3px; }
  .countdown small{ font-size:.55rem; }
  .hero-cta{ gap:10px; width:100%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }

  /* Marcas */
  .marcas{ gap:16px; }
  .marca{ width:44vw; max-width:200px; height:118px; padding:18px; }

  /* Carrusel: 1 vestido grande por vista (con asomo del siguiente) */
  .car-item{ flex:0 0 82%; }
  .car-item img{ height:52vh; }
  /* Flechas del carrusel abajo-centradas para no chocar con los controles ↑↓ */
  .carousel{ padding-bottom:52px; }
  .car-nav{ top:auto; bottom:4px; transform:none; }
  .car-prev{ left:auto; right:calc(50% + 6px); }
  .car-next{ right:auto; left:calc(50% + 6px); }

  /* Formulario / botones */
  .form{ padding:18px; gap:12px; }
  .btn{ padding:13px 20px; font-size:.85rem; }

  .footer{ display:none; }
  .progress{ bottom:14px; left:16px; }
  .progress span{ width:26px; }
  .controls{ right:12px; }
}