/* ===================== POP-UP NUEVA COLECCION "BLACK PROUD" ===================== */
:root{
  --bp-tinta:#1A1614; --bp-gris:#5A514B; --bp-oro:#C9962E; --bp-oro-claro:#E0BE7A;
  --bp-crema:#F4EFE7; --bp-coral:#F4B19E;
}

/* Overlay (fondo oscuro) */
.bp-pop{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  height:100vh;height:100svh;/* el contenedor que centra iguala la zona VISIBLE (no el viewport grande de iOS) */
  padding:clamp(1rem,3vw,2rem);opacity:0;visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease}
.bp-pop.is-open{opacity:1;visibility:visible}
.bp-pop__overlay{position:absolute;inset:0;background:rgba(20,18,16,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Modal */
.bp-pop__modal{position:relative;z-index:1;display:grid;grid-template-columns:42% 58%;
  width:min(960px,94vw);max-height:92vh;background:var(--bp-crema);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(20,18,16,.6);opacity:0}
.bp-pop.is-open .bp-pop__modal{animation:bpModalIn .42s cubic-bezier(.16,1,.3,1) both}

/* Entrada dinamica y rapida: el modal hace un "pop" marcado y el contenido entra en cascada veloz */
@keyframes bpModalIn{
  0%{opacity:0;transform:translateY(26px) scale(.78)}
  50%{opacity:1;transform:translateY(0) scale(1.05)}
  72%{transform:scale(.98)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes bpItemIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bp-pop.is-open .bp-pop__info > *{animation:bpItemIn .34s cubic-bezier(.16,1,.3,1) both}
.bp-pop.is-open .bp-pop__badge{animation-delay:.10s}
.bp-pop.is-open .bp-pop__title{animation-delay:.15s}
.bp-pop.is-open .bp-pop__divider{animation-delay:.20s}
.bp-pop.is-open .bp-pop__tagline{animation-delay:.25s}
.bp-pop.is-open .bp-pop__desc{animation-delay:.30s}
.bp-pop.is-open .bp-pop__features{animation-delay:.35s}
.bp-pop.is-open .bp-pop__cta{animation-delay:.40s}
.bp-pop.is-open .bp-pop__more{animation-delay:.45s}

/* Columna del video */
.bp-pop__media{position:relative;min-height:100%;background:#111}
.bp-pop__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Boton cerrar (X) */
.bp-pop__x{position:absolute;top:.85rem;right:.85rem;z-index:3;width:38px;height:38px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:9999px;color:var(--bp-tinta);
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .25s, transform .25s}
.bp-pop__x:hover{background:#fff;transform:rotate(90deg)}
.bp-pop__x svg{width:18px;height:18px}

/* Columna de info */
.bp-pop__info{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;
  padding:clamp(1.6rem,3.2vw,2.8rem) clamp(1.4rem,3vw,2.6rem);overflow-y:auto}

.bp-pop__badge{display:inline-block;font-family:'Jost',sans-serif;font-weight:500;font-size:.66rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bp-tinta);border:1px solid rgba(20,18,16,.35);border-radius:6px;padding:.55rem 1.1rem}

.bp-pop__title{font-family:'Cormorant Garamond',serif;font-weight:700;line-height:.92;text-transform:uppercase;
  letter-spacing:.02em;margin-top:1.2rem;display:flex;flex-direction:column}
.bp-pop__title .bp-t1{color:var(--bp-tinta);font-size:clamp(2.6rem,5.2vw,4.4rem)}
.bp-pop__title .bp-t2{font-size:clamp(2.6rem,5.2vw,4.4rem);letter-spacing:.04em;
  background:linear-gradient(100deg,var(--bp-oro) 0%,#F2DA94 38%,#C9962E 60%,var(--bp-oro) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.bp-pop__divider{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.1rem 0 0;width:min(320px,80%)}
.bp-pop__divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--bp-oro),transparent)}
.bp-pop__divider i{color:var(--bp-oro);font-style:normal;font-size:.7rem}

.bp-pop__tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:#2c2622;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin-top:1.1rem}

.bp-pop__desc{font-family:'Jost',sans-serif;font-weight:300;color:var(--bp-gris);line-height:1.7;
  font-size:clamp(.9rem,.85rem + .2vw,1rem);margin-top:1rem;max-width:42ch}

/* Features (3 columnas con separadores) */
.bp-pop__features{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;width:100%;max-width:480px}
.bp-pop__features li{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:0 .7rem;position:relative}
.bp-pop__features li + li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(201,150,46,.4)}
.bp-pop__icon{color:var(--bp-oro)}
.bp-pop__icon svg{width:34px;height:34px;display:block}
.bp-pop__features span{font-family:'Jost',sans-serif;font-weight:400;font-size:.74rem;color:var(--bp-tinta);line-height:1.35}

/* CTA */
.bp-pop__cta{display:block;width:100%;max-width:380px;margin-top:1.8rem;text-decoration:none;text-align:center;
  font-family:'Jost',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bp-tinta);
  padding:1.05rem 1.5rem;border-radius:9999px;
  background:linear-gradient(100deg,#F6C9B6,var(--bp-coral) 55%,#E89A82);
  box-shadow:0 14px 30px -12px rgba(232,154,130,.7);transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  position:relative;overflow:hidden}
.bp-pop__cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(232,154,130,.85)}
/* Destello que recorre el boton para llamar la atencion */
.bp-pop__cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg) translateX(-200%)}
.bp-pop.is-open .bp-pop__cta::after{animation:bpSheen 3s ease-in-out 1.4s infinite}
@keyframes bpSheen{0%{transform:skewX(-20deg) translateX(-200%)}45%,100%{transform:skewX(-20deg) translateX(360%)}}

.bp-pop__more{margin-top:1rem;font-family:'Jost',sans-serif;font-size:.82rem;letter-spacing:.04em;color:var(--bp-oro);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.bp-pop__more:hover{color:#a87a1f}

/* ===================== PESTAÑA LATERAL (minimizada) ===================== */
.bp-tab{position:fixed;left:0;top:50%;z-index:3900;
  transform:translateX(-110%) translateY(-50%);
  display:flex;align-items:center;gap:.5rem;cursor:pointer;border:none;
  padding:1rem .55rem;border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,var(--bp-coral),#E89A82);
  box-shadow:0 14px 34px -12px rgba(20,18,16,.5);
  writing-mode:vertical-rl;transform-origin:center;
  transition:transform .45s cubic-bezier(.16,1,.3,1), filter .25s, background .3s ease, box-shadow .3s ease}
.bp-tab.is-shown{transform:translateX(0) translateY(-50%)}
.bp-tab:hover{filter:brightness(1.04)}
.bp-tab__small{font-family:'Jost',sans-serif;font-weight:500;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(20,18,16,.7);rotate:180deg}
.bp-tab__big{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-tinta);rotate:180deg}
.bp-tab__mini{display:none} /* solo se usa en móvil (pestaña mínima "Abrir") */

/* Sobre una seccion del mismo color (coral) o de fondo negro la pestaña se vuelve blanca para resaltar */
.bp-tab--contrast{background:#fff;
  box-shadow:0 14px 34px -12px rgba(20,18,16,.55), 0 0 0 1px rgba(20,18,16,.06)}

/* ===================== RESPONSIVE ===================== */
@media(max-width:720px){
  /* Una sola columna en flex para poder acotar la altura y hacer scroll interno
     del texto: así el CTA y "Descubrir más" nunca quedan cortados.
     dvh (viewport dinámico) evita que la barra del navegador tape el fondo. */
  .bp-pop__modal{display:flex;flex-direction:column;
    max-height:92vh;max-height:92svh}
  /* Franja del video grande (≈ mitad del modal) y encuadrada hacia arriba para
     que entre la cabeza entera y no se corte la coronilla en móvil. */
  .bp-pop__media{flex:0 0 auto;min-height:0;height:300px}
  .bp-pop__media video{object-position:center 10%}
  .bp-pop__info{flex:1 1 auto;min-height:0;overflow-y:auto;
    justify-content:flex-start;padding:1.4rem 1.3rem 1.7rem}
  .bp-pop__title{margin-top:.9rem}
  .bp-pop__divider{margin-top:.9rem}
  .bp-pop__tagline{margin-top:.85rem}
  .bp-pop__desc{margin-top:.75rem}
  .bp-pop__features{max-width:none;margin-top:1.2rem}
  .bp-pop__cta{margin-top:1.4rem}
  .bp-pop__more{margin-top:.85rem;margin-bottom:.15rem}

  /* En móvil, pestaña mínima: se oculta el texto largo y solo se ve "Abrir",
     así deja de ocupar media pantalla de alto. */
  .bp-tab{padding:.72rem .3rem;gap:0;border-radius:0 8px 8px 0}
  .bp-tab__small,.bp-tab__big{display:none}
  .bp-tab__mini{display:block;font-family:'Jost',sans-serif;font-weight:600;
    font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bp-tinta);rotate:180deg}
}
@media(prefers-reduced-motion:reduce){
  .bp-pop,.bp-pop__modal,.bp-tab,.bp-pop__cta{transition:none}
  .bp-pop.is-open .bp-pop__modal,.bp-pop.is-open .bp-pop__info > *{animation:none;opacity:1;transform:none}
  .bp-pop__cta::after{display:none}
}