/* Pop-up de captacion — pantalla completa, collage de trabajo + pregunta en dos pasos.
   Colores y fuentes de marca: negro, hueso, verde profit; Inter en titulares,
   Archivo en cuerpo, Playfair italic en la palabra de acento, Anton en el wordmark. */
.pu-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(7,7,7,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s ease;
}
.pu-backdrop.is-visible { opacity: 1; }
.pu-card {
  position: relative; display: grid; grid-template-columns: 1fr;
  width: 100%; height: 100%; max-height: 100dvh; overflow: auto;
  background: #070707; color: #F6F4EF;
  transform: scale(.97); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pu-backdrop.is-visible .pu-card { transform: none; }
.pu-backdrop.is-reduced .pu-card { transition: none; transform: none; }
@media (min-width: 900px) {
  .pu-backdrop { padding: 28px; }
  .pu-card { grid-template-columns: 1.05fr 1fr; height: min(760px, calc(100vh - 56px)); max-width: 1320px; border-radius: 28px; border: 1px solid rgba(246,244,239,.1); box-shadow: 0 60px 140px -40px rgba(0,0,0,.9); overflow: hidden; }
}

/* ---- lado visual ---- */
.pu-visual {
  position: relative; overflow: hidden; min-height: 38vh;
  background:
    radial-gradient(circle at 30% 30%, rgba(31,191,107,.35), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(31,191,107,.22), transparent 50%),
    #0A0A0A;
}
.pu-visual::after { /* grano */
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pu-glow { position: absolute; width: 60%; aspect-ratio: 1; left: 20%; top: 20%; border-radius: 50%; background: rgba(31,191,107,.35); filter: blur(80px); animation: puPulse 6s ease-in-out infinite; }
@keyframes puPulse { 50% { transform: scale(1.15); opacity: .7; } }
.pu-shot { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); border: 1px solid rgba(246,244,239,.18); background: #111; }
.pu-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pu-shot.s1 { width: 44%; aspect-ratio: 1; left: 7%; top: 12%; transform: rotate(-7deg); animation: puFloat 7s ease-in-out infinite; }
.pu-shot.s2 { width: 34%; aspect-ratio: .42; right: 9%; top: 6%; transform: rotate(5deg); animation: puFloat 8s ease-in-out -2s infinite; }
.pu-shot.s3 { width: 38%; aspect-ratio: 1; left: 26%; bottom: 6%; transform: rotate(3deg); animation: puFloat 9s ease-in-out -4s infinite; }
@keyframes puFloat { 50% { translate: 0 -12px; } }
.pu-tag { position: absolute; z-index: 2; padding: .5rem .8rem; border-radius: 999px; background: #1FBF6B; color: #0A0A0A; font-family: 'Anton', sans-serif; font-size: 1rem; letter-spacing: .06em; box-shadow: 0 10px 30px -8px rgba(31,191,107,.7); }
.pu-tag.t1 { left: 44%; top: 44%; }
.pu-tag.t2 { right: 8%; bottom: 22%; }
@media (max-width: 899px) {
  .pu-visual { min-height: 34vh; }
  .pu-shot.s1 { width: 40%; left: 6%; top: 10%; }
  .pu-shot.s2 { width: 26%; right: 8%; top: 8%; }
  .pu-shot.s3 { width: 34%; left: 38%; bottom: -12%; }
  .pu-tag { font-size: .8rem; }
}

/* ---- lado del contenido ---- */
.pu-body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px 32px; }
@media (min-width: 900px) { .pu-body { padding: 56px 60px; } }
.pu-brand { font-family: 'Anton', sans-serif; letter-spacing: .04em; font-size: 1.15rem; margin: 0; }
.pu-brand span { color: #1FBF6B; }
.pu-steps { display: flex; gap: 6px; margin: 18px 0 26px; }
.pu-steps i { height: 4px; width: 42px; border-radius: 4px; background: rgba(246,244,239,.15); transition: background .3s; }
.pu-steps i.on { background: #1FBF6B; box-shadow: 0 0 10px rgba(31,191,107,.7); }
.pu-title { font-family: 'InterVariable', Archivo, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; font-feature-settings: 'cv11' 1, 'cv03' 1, 'cv04' 1, 'cv09' 1; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; margin: 0; text-wrap: balance; }
.pu-title em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; color: #1FBF6B; letter-spacing: normal; }
.pu-line { margin: 14px 0 0; font-family: Archivo, sans-serif; font-size: 1.02rem; line-height: 1.6; color: rgba(246,244,239,.76); max-width: 46ch; }
.pu-opts { display: grid; gap: 10px; margin-top: 24px; }
.pu-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(246,244,239,.14);
  background: rgba(246,244,239,.04); color: #F6F4EF; font: 600 1rem/1.3 Archivo, sans-serif;
  transition: border-color .2s, background .2s, transform .2s;
}
.pu-opt:hover, .pu-opt:focus-visible { border-color: #1FBF6B; background: rgba(31,191,107,.1); transform: translateX(4px); outline: none; }
.pu-opt-n { font-family: 'Anton', sans-serif; color: #1FBF6B; font-size: .95rem; letter-spacing: .06em; }
.pu-opt-go { margin-left: auto; color: #1FBF6B; opacity: 0; transition: opacity .2s; }
.pu-opt:hover .pu-opt-go, .pu-opt:focus-visible .pu-opt-go { opacity: 1; }
.pu-chip { display: inline-flex; align-self: flex-start; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: rgba(31,191,107,.12); border: 1px solid rgba(31,191,107,.4); color: #1FBF6B; font: 600 .85rem Archivo, sans-serif; }
.pu-label { display: block; margin: 26px 0 8px; font: 600 .85rem Archivo, sans-serif; color: rgba(246,244,239,.76); }
.pu-row { display: grid; gap: 10px; }
@media (min-width: 560px) { .pu-row { grid-template-columns: 1fr auto; } }
.pu-input { width: 100%; box-sizing: border-box; padding: 17px 18px; border-radius: 14px; border: 1px solid rgba(246,244,239,.2); background: rgba(246,244,239,.05); color: #F6F4EF; font: 1rem Archivo, sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.pu-input::placeholder { color: rgba(246,244,239,.4); }
.pu-input:focus { border-color: #1FBF6B; box-shadow: 0 0 0 4px rgba(31,191,107,.15); }
.pu-input[aria-invalid="true"] { border-color: #c84040; }
.pu-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 17px 24px; border: 0; border-radius: 14px; background: #1FBF6B; color: #0A0A0A; font: 700 1rem Archivo, sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 14px 40px -12px rgba(31,191,107,.75); transition: transform .2s; text-decoration: none; }
.pu-submit:hover { transform: translateY(-2px); }
.pu-submit:disabled { opacity: .6; cursor: default; transform: none; }
.pu-link { margin-top: 24px; align-self: flex-start; }
.pu-error { margin: 8px 0 0; font: 600 .85rem Archivo, sans-serif; color: #c84040; }
.pu-micro { margin: 14px 0 0; font: .82rem Archivo, sans-serif; color: rgba(246,244,239,.5); }
.pu-step[hidden] { display: none; }
.pu-step { animation: puIn .45s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
@keyframes puIn { from { opacity: 0; transform: translateY(14px); } }
.pu-close { position: absolute; z-index: 5; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #F6F4EF; color: #0A0A0A; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .2s; }
.pu-close:hover { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .pu-shot, .pu-glow, .pu-step { animation: none; }
}

/* movil: tarjeta flotante, no pantalla completa, sin scroll interno */
@media (max-width: 899px) {
  .pu-backdrop { padding: 14px; }
  .pu-card { height: auto; max-height: calc(100dvh - 28px); max-width: 440px; border-radius: 24px; border: 1px solid rgba(246,244,239,.12); overflow: hidden; grid-template-rows: auto auto; box-shadow: 0 40px 100px -30px rgba(0,0,0,.95); }
  .pu-visual { min-height: 0; height: 26vh; max-height: 190px; }
  .pu-shot.s1 { width: 34%; left: 8%; top: 14%; }
  .pu-shot.s2 { width: 22%; right: 10%; top: 8%; }
  .pu-shot.s3 { width: 28%; left: 40%; bottom: -18%; }
  .pu-tag { font-size: .72rem; padding: .35rem .6rem; }
  .pu-body { padding: 18px 18px 20px; }
  .pu-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .pu-line { font-size: .92rem; margin-top: 8px; }
  .pu-label { margin: 16px 0 6px; }
  .pu-input, .pu-submit { padding: 14px 16px; }
  .pu-micro { margin-top: 10px; }
  .pu-close { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 1.3rem; }
}
@media (max-width: 899px) and (max-height: 640px) { .pu-visual { display: none; } }

/* ---- pop-up con la animacion de Amazon ---- */
.pu-visual .flow-wrap { position: absolute; inset: 0; height: 100%; }
.pu-visual .flow { --flow-s: .64; }
.pu-visual .flow-veil { background: radial-gradient(closest-side, #0A0A0A 0%, #0A0A0A 52%, rgba(10,10,10,0) 100%); }
.pu-visual .flow-card { background: #131313; border-color: rgba(31,191,107,.35); color: #D9D9D9; }
.pu-visual .flow-meter { background: #131313; border-color: #242424; }
.pu-visual .flow-meter b { color: #D9D9D9; }
@media (min-width: 900px) { .pu-visual .flow { --flow-s: .66; } }
@media (max-width: 899px) {
  .pu-visual { height: 36vh; max-height: 250px; min-height: 200px; }
  .pu-visual .flow { --flow-s: .44; }
  .pu-visual .flow-spark-l, .pu-visual .flow-review { display: none; }
}
@media (max-width: 899px) and (max-height: 640px) { .pu-visual { display: block; height: 170px; min-height: 0; } .pu-visual .flow { --flow-s: .36; } }

/* ---- escritorio: sombra sin cortes + recursos alrededor de la animacion ---- */
/* la mascara horizontal de .flow recorta todo lo que sale de su caja (mask-clip):
   en la web no se nota porque el fondo es del color del velo; aqui el fondo es verde */
.pu-visual .flow { -webkit-mask: none; mask: none; }
.pu-visual .flow-wrap { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.pu-visual .flow-veil { background: radial-gradient(closest-side, rgba(10,10,10,.92) 0%, rgba(10,10,10,.8) 45%, rgba(10,10,10,0) 100%); }
.pu-grid, .pu-rs, .pu-cap { display: none; }
@media (min-width: 900px) {
  .pu-visual .flow { --flow-s: .8; }
  .pu-grid { display: block; position: absolute; inset: 0; opacity: .45; pointer-events: none;
    background-image: linear-gradient(rgba(246,244,239,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(246,244,239,.06) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%); mask: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%); }
  .pu-rs { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .45rem; width: 30%; max-width: 230px; padding: 1rem 1rem .9rem; border-radius: 16px;
    background: linear-gradient(160deg, rgba(24,28,25,.96), rgba(12,12,12,.96)); border: 1px solid rgba(31,191,107,.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9);
    color: #F6F4EF; opacity: 0; translate: 0 24px; }
  .pu-backdrop.is-visible .pu-rs { animation: puRsIn .7s cubic-bezier(.2,.8,.2,1) forwards, puFloat 8s ease-in-out 1.2s infinite, puRsOn 8s ease-in-out 1.2s infinite; }
  .pu-rs.r1 { left: 7%; top: 7%; rotate: -6deg; animation-delay: .25s, 1.2s, 1.2s !important; }
  .pu-rs.r2 { right: 7%; top: 9%; rotate: 5deg; animation-delay: .4s, -2s, 3.2s !important; }
  .pu-rs.r3 { left: 9%; bottom: 10%; rotate: 4deg; animation-delay: .55s, -4s, 5.2s !important; }
  .pu-rs.r4 { right: 8%; bottom: 7%; rotate: -5deg; animation-delay: .7s, -6s, 7.2s !important; }
  .pu-rs-t { align-self: flex-start; padding: .2rem .55rem; border-radius: 6px; background: #1FBF6B; color: #0A0A0A; font: 800 .64rem Archivo, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
  .pu-rs b { font: 700 1rem/1.2 Archivo, sans-serif; }
  .pu-rs i { display: block; height: 5px; border-radius: 5px; background: rgba(246,244,239,.13); }
  .pu-rs i.s { width: 60%; }
  .pu-rs-f { display: flex; align-items: baseline; gap: .45rem; margin-top: .2rem; font: 600 .72rem Archivo, sans-serif; color: rgba(246,244,239,.55); }
  .pu-rs-f em { font: 400 1.35rem/1 'Anton', sans-serif; font-style: normal; color: rgba(31,191,107,.75); }
  .pu-rs-ok { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1FBF6B; color: #0A0A0A; font: 800 .9rem/1 Archivo, sans-serif;
    box-shadow: 0 6px 18px -4px rgba(31,191,107,.8); transform: scale(0); animation: puOk 8s ease-in-out infinite; }
  .pu-rs.r1 .pu-rs-ok { animation-delay: 1.2s; } .pu-rs.r2 .pu-rs-ok { animation-delay: 3.2s; } .pu-rs.r3 .pu-rs-ok { animation-delay: 5.2s; } .pu-rs.r4 .pu-rs-ok { animation-delay: 7.2s; }
  .pu-cap { display: block; position: absolute; z-index: 3; left: 50%; bottom: 3.2%; transform: translateX(-50%); margin: 0; white-space: nowrap; padding: .45rem .9rem; border-radius: 999px;
    background: rgba(10,10,10,.7); border: 1px solid rgba(246,244,239,.12); font: 600 .76rem Archivo, sans-serif; color: rgba(246,244,239,.7); backdrop-filter: blur(6px); }
  .pu-cap span { color: #1FBF6B; }
}
@keyframes puRsIn { to { opacity: 1; translate: 0 0; } }
@keyframes puRsOn { 0%, 30%, 100% { border-color: rgba(31,191,107,.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); } 8%, 22% { border-color: rgba(31,191,107,.85); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 40px -6px rgba(31,191,107,.6); } }
@keyframes puOk { 0%, 4% { transform: scale(0); } 9%, 24% { transform: scale(1); } 30%, 100% { transform: scale(0); } }
@media (min-width: 900px) and (max-height: 760px) { .pu-rs { width: 27%; padding: .75rem .85rem; } .pu-rs b { font-size: .88rem; } .pu-rs i { display: none; } .pu-visual .flow { --flow-s: .72; } }
@media (prefers-reduced-motion: reduce) { .pu-backdrop.is-visible .pu-rs { animation: none; opacity: 1; translate: none; } .pu-rs-ok { animation: none; } }