/* ==========================================================================
   JENZZ STUDIOS · web/landing.css
   Landings públicas para Meta Ads. Prefijo jzw-. Vanilla. Cero !important.
   ==========================================================================
   Superficie nueva y separada:
     jzd-  portal interno     jzc-  galería del cliente     jzw-  sitio público
   Mismo ADN visual que Orbit (azul #3B82F6 → violeta #8B5CF6, vidrio, Plus
   Jakarta Sans), pero al servicio de una sola cosa: que el visitante escriba.

   UNA PLANTILLA, SIETE LANDINGS. El esqueleto es idéntico para Smash Cake,
   Embarazo, Newborn, Familiar, Cumpleaños, Bodas y Home; lo único que cambia es
   el contenido y el acento (--jzw-acc). Así las siete se mantienen con un solo
   fichero y las pruebas A/B se hacen cambiando texto, no CSS.

   MÓVIL PRIMERO de verdad: el 95% del tráfico de Meta es móvil.
   ========================================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }

:root{
  --jzw-bg:#080C16;
  --jzw-ink:#F8FAFC;
  --jzw-ink2:rgba(248,250,252,.76);
  --jzw-ink3:rgba(248,250,252,.62);
  --jzw-ink4:rgba(248,250,252,.48);
  --jzw-deco:rgba(248,250,252,.28);   /* SOLO decoración: puntos, marcadores */
  /* CONTRASTE — corregido tras auditoría:
     ink4 estaba en .34, que sobre el fondo #080C16 mide 2.96:1 — por debajo del
     4.5:1 que pide AA. Y no era texto decorativo: llevaba el eyebrow de cada
     sección, la nota "Te contestamos en 1–3 minutos", la línea de detalle de las
     tarjetas de servicio, la etiqueta "Desde" del precio, el aviso legal de
     consentimiento y el pie. En una página que recibe tráfico pagado y muestra
     una nota de consentimiento, eso no se sostiene.
     Ahora: ink3 = 7.4:1 · ink4 = 4.9:1 · los dos AA, con separación real entre
     los dos pasos. Lo que de verdad es decoración pasó a --jzw-deco.
     Es el mismo arreglo que se hizo en el portal subiendo .cita-meta de
     --gray-400 a --gray-500. */

  --jzw-blue:#3B82F6; --jzw-blue-hi:#60A5FA;
  --jzw-violet:#8B5CF6; --jzw-violet-hi:#A78BFA;
  --jzw-wa:#25D366;                    /* verde WhatsApp oficial */
  --jzw-wa-hi:#3DDC7F;

  --jzw-glass:rgba(255,255,255,.07);
  --jzw-brd:rgba(255,255,255,.14);
  --jzw-edge:inset 0 1px 0 rgba(255,255,255,.18);
  --jzw-blur:blur(22px) saturate(180%);

  --jzw-acc:var(--jzw-violet);         /* lo redefine cada landing */

  --jzw-r-sm:12px; --jzw-r-md:18px; --jzw-r-lg:24px; --jzw-r-xl:30px; --jzw-r-pill:999px;
  --jzw-ease:cubic-bezier(.16,1,.3,1);
  --jzw-tap:48px;                      /* CTA con el pulgar: 48, no 44 */
  --jzw-max:640px;
}

body{
  background:var(--jzw-bg); color:var(--jzw-ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* la barra fija de WhatsApp no puede tapar el final del contenido */
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
img,video{ max-width:100%; display:block; }
a{ color:var(--jzw-blue-hi); text-decoration:none; }
button,input,select,textarea{ font-family:inherit; -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--jzw-blue-hi); outline-offset:3px; }

.jzw-wrap{ max-width:var(--jzw-max); margin:0 auto; padding:0 18px; }
.jzw-sec{ padding:44px 0; }
.jzw-eyebrow{
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--jzw-ink4); margin:0 0 10px;
}
.jzw-h2{ font-size:clamp(21px,5.4vw,27px); font-weight:800; letter-spacing:-.025em; line-height:1.16; margin:0 0 12px; text-wrap:balance; }
.jzw-p{ font-size:14.5px; line-height:1.65; color:var(--jzw-ink2); margin:0; text-wrap:pretty; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.jzw-hero{ position:relative; overflow:hidden; padding:0 0 34px; }
.jzw-hero__media{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(150deg,#1E1B4B,#4C1D95 55%,#831843);
}
@media (min-width:700px){ .jzw-hero__media{ aspect-ratio:16/10; } }
.jzw-hero__media img,.jzw-hero__media video{ width:100%; height:100%; object-fit:cover; }
/* degradado hacia el fondo: el texto se apoya en la foto sin caja */
.jzw-hero__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,var(--jzw-bg) 2%,rgba(8,12,22,.72) 34%,rgba(8,12,22,.08) 72%);
}
.jzw-hero__txt{ position:relative; z-index:1; margin-top:-96px; }

.jzw-logo{ font-size:13px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--jzw-ink3); margin:0 0 14px; }
.jzw-h1{
  font-size:clamp(30px,8.4vw,44px); font-weight:800; letter-spacing:-.035em;
  line-height:1.04; margin:0 0 13px; text-wrap:balance;
}
.jzw-h1 b{
  font-weight:800;
  background:linear-gradient(100deg,var(--jzw-acc),var(--jzw-blue-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jzw-sub{ font-size:15.5px; line-height:1.6; color:var(--jzw-ink2); margin:0 0 20px; max-width:34ch; }

/* precio "Desde RD$" */
.jzw-desde{
  display:inline-flex; align-items:baseline; gap:7px; margin:0 0 22px;
  padding:9px 16px; border-radius:var(--jzw-r-pill);
  background:var(--jzw-glass); border:1px solid var(--jzw-brd); box-shadow:var(--jzw-edge);
  backdrop-filter:var(--jzw-blur); -webkit-backdrop-filter:var(--jzw-blur);
}
.jzw-desde small{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--jzw-ink4); }
.jzw-desde b{ font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   2 · BOTONES
   ========================================================================== */
.jzw-ctas{ display:flex; flex-direction:column; gap:10px; }
.jzw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--jzw-tap); padding:0 24px; border:none; cursor:pointer;
  border-radius:var(--jzw-r-pill);
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  transition:transform .16s var(--jzw-ease), box-shadow .16s var(--jzw-ease);
}
.jzw-btn:active{ transform:scale(.985); }

/* WhatsApp es el CTA PRINCIPAL. Verde de WhatsApp, no azul de marca: el
   visitante reconoce el color antes de leer el texto. */
.jzw-btn--wa{
  color:#052E16; background:linear-gradient(135deg,var(--jzw-wa-hi),var(--jzw-wa));
  box-shadow:0 10px 30px -8px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.jzw-btn--wa:hover{ box-shadow:0 14px 36px -8px rgba(37,211,102,.68), inset 0 1px 0 rgba(255,255,255,.4); }
/* formulario: secundario, de vidrio */
.jzw-btn--form{
  color:var(--jzw-ink); background:var(--jzw-glass);
  border:1px solid var(--jzw-brd); box-shadow:var(--jzw-edge);
  backdrop-filter:var(--jzw-blur); -webkit-backdrop-filter:var(--jzw-blur);
}
.jzw-btn--form:hover{ background:rgba(255,255,255,.13); }
.jzw-btn:disabled{ opacity:.5; cursor:not-allowed; }
.jzw-cta-nota{ font-size:11.5px; color:var(--jzw-ink4); margin:11px 0 0; }

/* ---------- Barra fija de WhatsApp (móvil) ---------- */
.jzw-fija{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(8,12,22,.96),rgba(8,12,22,.6) 72%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.jzw-fija__in{ max-width:var(--jzw-max); margin:0 auto; display:flex; gap:10px; }
.jzw-fija .jzw-btn{ flex:1; }

/* ==========================================================================
   3 · PRUEBA SOCIAL
   ========================================================================== */
.jzw-prueba{ display:flex; gap:9px; }
.jzw-prueba__c{
  flex:1; padding:14px 12px; border-radius:var(--jzw-r-md); text-align:center;
  background:var(--jzw-glass); border:1px solid var(--jzw-brd); box-shadow:var(--jzw-edge);
}
.jzw-prueba__n{ font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.jzw-prueba__k{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jzw-ink4); margin-top:3px; }

/* ==========================================================================
   4 · QUÉ INCLUYE
   ========================================================================== */
.jzw-incluye{ display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; }
.jzw-incluye li{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; border-radius:var(--jzw-r-md);
  background:var(--jzw-glass); border:1px solid var(--jzw-brd); box-shadow:var(--jzw-edge);
  font-size:14px; font-weight:600; color:var(--jzw-ink2); line-height:1.5;
}
.jzw-incluye li::before{
  content:'✓'; flex:none; width:21px; height:21px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:800; color:#052E16;
  background:linear-gradient(135deg,var(--jzw-wa-hi),var(--jzw-wa)); margin-top:1px;
}

/* ==========================================================================
   5 · GALERÍA (cuadrada, para reusar los mismos assets de los anuncios 1:1)
   ========================================================================== */
.jzw-galeria{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (min-width:520px){ .jzw-galeria{ grid-template-columns:repeat(3,1fr); } }
.jzw-galeria__f{
  aspect-ratio:1; border-radius:var(--jzw-r-sm); overflow:hidden;
  background:linear-gradient(150deg,#312E81,#6D28D9);
}
.jzw-galeria__f img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   6 · CÓMO FUNCIONA
   ========================================================================== */
.jzw-pasos{ display:flex; flex-direction:column; gap:11px; counter-reset:p; margin:0; padding:0; list-style:none; }
.jzw-pasos li{ counter-increment:p; display:flex; gap:14px; align-items:flex-start; }
.jzw-pasos li::before{
  content:counter(p); flex:none;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--jzw-acc),var(--jzw-blue));
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--jzw-acc) 60%,transparent);
}
.jzw-pasos b{ display:block; font-size:14.5px; font-weight:800; margin-bottom:3px; }
.jzw-pasos span{ font-size:13.5px; color:var(--jzw-ink3); line-height:1.55; }

/* ==========================================================================
   7 · FORMULARIO (secundario)
   ========================================================================== */
.jzw-form{
  padding:24px 20px; border-radius:var(--jzw-r-xl);
  background:var(--jzw-glass); border:1px solid var(--jzw-brd);
  box-shadow:var(--jzw-edge), 0 22px 60px -24px rgba(0,0,0,.8);
  backdrop-filter:var(--jzw-blur); -webkit-backdrop-filter:var(--jzw-blur);
}
.jzw-form__t{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 5px; }
.jzw-form__s{ font-size:13px; color:var(--jzw-ink3); margin:0 0 18px; }
.jzw-campos{ display:flex; flex-direction:column; gap:13px; }
.jzw-c{ display:flex; flex-direction:column; gap:6px; }
.jzw-c--2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jzw-lbl{ font-size:11.5px; font-weight:700; color:var(--jzw-ink3); letter-spacing:.02em; }
.jzw-in{
  min-height:var(--jzw-tap); padding:0 15px; width:100%;
  font-size:15px; font-weight:500; color:var(--jzw-ink);   /* 15px: iOS no hace zoom */
  background:rgba(255,255,255,.06); border:1px solid var(--jzw-brd);
  border-radius:var(--jzw-r-sm); box-shadow:var(--jzw-edge);
  transition:border-color .18s linear, box-shadow .18s linear, background .18s linear;
}
select.jzw-in{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--jzw-ink3) 50%),linear-gradient(135deg,var(--jzw-ink3) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; }
.jzw-in::placeholder{ color:var(--jzw-ink4); }
.jzw-in:focus{ outline:none; border-color:var(--jzw-blue); background:rgba(59,130,246,.10); box-shadow:0 0 0 3px rgba(59,130,246,.20); }
.jzw-in[aria-invalid="true"]{ border-color:#F87171; box-shadow:0 0 0 3px rgba(248,113,113,.18); }
.jzw-err{ font-size:11.5px; font-weight:600; color:#FCA5A5; display:none; }
.jzw-c[data-mal="true"] .jzw-err{ display:block; }
.jzw-legal{ font-size:11px; color:var(--jzw-ink4); line-height:1.6; margin:14px 0 0; }
.jzw-legal a{ color:var(--jzw-ink3); text-decoration:underline; }

/* barra de "solo toma 30 segundos" */
.jzw-progreso{ height:4px; border-radius:2px; background:rgba(255,255,255,.09); overflow:hidden; margin:0 0 16px; }
.jzw-progreso i{
  display:block; height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg,var(--jzw-acc),var(--jzw-blue-hi));
  transition:width .3s var(--jzw-ease);
}

/* éxito */
.jzw-ok{ display:none; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:14px 0; }
.jzw-form[data-ok="true"] .jzw-ok{ display:flex; }
.jzw-form[data-ok="true"] .jzw-campos,
.jzw-form[data-ok="true"] .jzw-form__t,
.jzw-form[data-ok="true"] .jzw-form__s,
.jzw-form[data-ok="true"] .jzw-progreso,
.jzw-form[data-ok="true"] .jzw-legal{ display:none; }
.jzw-ok__s{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-size:27px;
  background:linear-gradient(135deg,var(--jzw-wa-hi),var(--jzw-wa));
  box-shadow:0 12px 32px -10px rgba(37,211,102,.6);
  animation:jzw-pop .5s var(--jzw-ease) both;
}
@keyframes jzw-pop{ from{ transform:scale(.6) } 60%{ transform:scale(1.08) } to{ transform:scale(1) } }

/* ==========================================================================
   8 · FAQ
   ========================================================================== */
.jzw-faq{ display:flex; flex-direction:column; gap:8px; }
.jzw-faq details{
  border-radius:var(--jzw-r-md); overflow:hidden;
  background:var(--jzw-glass); border:1px solid var(--jzw-brd); box-shadow:var(--jzw-edge);
}
.jzw-faq summary{
  list-style:none; cursor:pointer; padding:15px 17px;
  font-size:14px; font-weight:700; color:var(--jzw-ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--jzw-tap);
}
.jzw-faq summary::-webkit-details-marker{ display:none; }
.jzw-faq summary::after{ content:'+'; font-size:19px; font-weight:700; color:var(--jzw-ink3); flex:none; }
.jzw-faq details[open] summary::after{ content:'−'; }
.jzw-faq p{ margin:0; padding:0 17px 17px; font-size:13.5px; line-height:1.65; color:var(--jzw-ink3); }

/* ==========================================================================
   9 · PIE
   ========================================================================== */
.jzw-pie{ padding:34px 0 12px; text-align:center; font-size:11.5px; color:var(--jzw-ink4); line-height:1.8; }
.jzw-pie b{ color:var(--jzw-ink3); font-weight:700; }
/* TACTIL: los enlaces del pie median 12px de alto. En una pagina con 95% de
   trafico movil no se pueden pulsar con el pulgar. Ahora ocupan los 44px
   minimos sin cambiar como se ven. */
.jzw-pie a{ display:inline-flex; align-items:center; min-height:44px; padding:0 6px; }

/* ==========================================================================
   ACENTOS POR LANDING — solo una variable
   ========================================================================== */
[data-landing="smashcake"]{ --jzw-acc:#EC4899; }
[data-landing="embarazo"]{  --jzw-acc:#A78BFA; }
[data-landing="newborn"]{   --jzw-acc:#38BDF8; }
[data-landing="familiar"]{  --jzw-acc:#34D399; }
[data-landing="anito"]{     --jzw-acc:#FBBF24; }
[data-landing="bodas"]{     --jzw-acc:#D4AF37; }
[data-landing="home"]{      --jzw-acc:#8B5CF6; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .jzw-ok__s{ animation:none; }
}