/* ============================================================
   DZZERO × AIZOMEDIA — landing embudo WhatsApp
   Hero a pantalla completa con el formulario dentro.
   Patrón de layout: voice.amai.run · identidad: dzzero.com
   ============================================================ */

:root{
  /* Azul petróleo REAL de la marca (#0E1E26), no un casi-negro.
     La web oficial deja ver la foto: el velo oscurece para leer, no para tapar. */
  --ink:#0E1E26;
  --ink-2:#192E39;
  --surface:rgba(16,32,40,.90);
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(199,179,164,.24);
  --line-strong:rgba(199,179,164,.38);

  --cream:#F7F4F1;
  --muted:#C3D0D6;
  --beige:#C7B3A4;
  --bronze:#A07A45;
  --bronze-hi:#D9B47C;
  --wa:#25D366;
  --wa-dark:#1EB855;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --rail:1240px;
  --pad:clamp(20px,4vw,48px);
  --r-lg:20px;
  --r-md:12px;
  --r-pill:999px;
  --t:180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body.dz{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

:where(a,button,input):focus-visible{
  outline:2px solid var(--bronze-hi);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Fondo a sangre ---------- */

.dz-bg{position:fixed;inset:0;z-index:0;pointer-events:none}

.dz-bg__img{
  position:absolute;inset:0;
  background:url("../img/hero-dzzero.jpg") center 40%/cover no-repeat;
  opacity:1;
}

/* Réplica del velo de dzzero.com: una capa de azul petróleo UNIFORME y suave.
   No es un gradiente que tape media foto — la escena se ve entera y con su luz,
   y solo se refuerza un poco abajo para que asiente el pie. */
.dz-bg__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(14,30,38,.58) 0%,
      rgba(14,30,38,.52) 45%,
      rgba(14,30,38,.62) 78%,
      rgba(14,30,38,.80) 100%);
}

/* ---------- Cabecera flotante ---------- */

.dz-header{position:relative;z-index:3}

.dz-header__inner{
  max-width:var(--rail);
  margin:0 auto;
  padding:22px var(--pad) 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.dz-logo{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--serif);
  font-size:clamp(20px,2.2vw,26px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--cream);
  text-decoration:none;
}

.dz-logo__mark{
  width:clamp(34px,4vw,44px);height:auto;
  /* El SVG de marca viene en blanco puro: lo bajamos un punto para que
     conviva con el crema del texto sin cantar. */
  opacity:.92;
}

.dz-logo__word{line-height:1}

.dz-header__tag{
  font-size:10px;font-weight:600;letter-spacing:.18em;
  color:var(--beige);text-transform:uppercase;
}

/* ---------- Hero a pantalla completa ---------- */

.dz-hero{
  position:relative;z-index:2;
  min-height:calc(100svh - 150px);
  display:flex;align-items:center;
  padding:clamp(24px,4vh,48px) 0;
}

.dz-hero__grid{
  width:100%;
  max-width:var(--rail);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}

@media (min-width:960px){
  .dz-hero__grid{grid-template-columns:1.02fr .98fr}
}

.dz-eyebrow{
  margin:0 0 18px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze-hi);
}

.dz-hero__title{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.15rem,5.4vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--cream);
  text-wrap:balance;
  /* Con la foto visible detrás, la sombra asegura la lectura sobre las zonas
     claras (la ventana) sin tener que oscurecer la imagen entera. */
  text-shadow:0 2px 24px rgba(6,16,20,.55);
}

/* En dzzero.com la palabra en itálica del titular va en BEIGE CLARO, no en dorado.
   Se replica ese gesto: destaca sin romper la elegancia. */
.dz-hero__accent{
  font-style:italic;
  color:var(--beige);
}

.dz-hero__sub{
  margin:0 0 26px;
  max-width:34em;
  font-size:clamp(15px,1.5vw,17px);
  color:#E4EAED;
  text-shadow:0 1px 14px rgba(6,16,20,.6);
}

.dz-bullets{margin:0;padding:0;list-style:none;display:grid;gap:11px}

.dz-bullets__item{
  position:relative;
  padding-left:26px;
  font-size:14px;
  color:var(--beige);
}

.dz-bullets__item::before{
  content:"";
  position:absolute;left:0;top:.52em;
  width:8px;height:8px;border-radius:50%;
  background:var(--bronze);
  box-shadow:0 0 0 3px rgba(160,122,69,.20);
}

/* ---------- Panel del formulario ---------- */

.dz-hero__panel{display:flex;flex-direction:column;gap:14px}

.dz-quiz{
  background:var(--surface);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px);
  box-shadow:0 26px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset;
}

.dz-quiz__noscript{margin:0;color:var(--beige);font-size:14px}

/* progreso */
.dz-quiz__progress{
  height:3px;border-radius:var(--r-pill);
  background:rgba(199,179,164,.16);
  overflow:hidden;margin-bottom:20px;
}
.dz-quiz__progress-bar{
  display:block;height:100%;width:0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--bronze),var(--bronze-hi));
  transition:width 320ms cubic-bezier(.4,0,.2,1);
}

/* paso */
.dz-quiz__step{animation:dz-in 300ms cubic-bezier(.4,0,.2,1) both}

@keyframes dz-in{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

.dz-quiz__eyebrow{
  margin:0 0 8px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze-hi);
}

.dz-quiz__question{
  margin:0 0 18px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.28rem,2.2vw,1.6rem);
  line-height:1.22;
  letter-spacing:-.015em;
  color:var(--cream);
  outline:none;                 /* foco programatico: sin anillo visible */
}

.dz-quiz__options{display:grid;gap:9px}

.dz-quiz__option{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;
  padding:14px 16px;
  font-family:var(--sans);
  font-size:14.5px;font-weight:500;
  text-align:left;
  color:var(--cream);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background var(--t),border-color var(--t),transform var(--t);
}

.dz-quiz__option-label{flex:1}

.dz-quiz__option-arrow{
  color:var(--bronze-hi);
  font-size:16px;
  transition:transform var(--t);
}

.dz-quiz__option:hover,
.dz-quiz__option:focus-visible{
  background:rgba(160,122,69,.12);
  border-color:var(--bronze);
}
.dz-quiz__option:hover .dz-quiz__option-arrow,
.dz-quiz__option:focus-visible .dz-quiz__option-arrow{transform:translateX(4px)}

.dz-quiz__option.is-selected{
  background:var(--bronze);
  border-color:var(--bronze-hi);
  color:#12202A;
}
.dz-quiz__option.is-selected .dz-quiz__option-arrow{color:#12202A;transform:translateX(4px)}

.dz-quiz__back{
  margin-top:16px;
  padding:6px 0;
  font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--muted);
  background:none;border:0;cursor:pointer;
  transition:color var(--t);
}
.dz-quiz__back:hover{color:var(--cream)}

/* formulario de captación */
.dz-quiz__form{display:grid;gap:14px}

.dz-quiz__field{display:block}

.dz-quiz__label{
  display:block;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}

.dz-quiz__input{
  width:100%;
  margin-top:6px;
  padding:14px 16px;
  font-family:var(--sans);font-size:15px;
  color:var(--cream);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.dz-quiz__input::placeholder{color:rgba(175,192,199,.55)}
.dz-quiz__input:focus{outline:none;border-color:var(--bronze)}

.dz-quiz__error{
  margin:9px 0 0;
  font-size:12.5px;font-weight:600;
  color:#F0A98A;
}

.dz-quiz__submit{
  width:100%;
  margin-top:14px;
  padding:15px 18px;
  font-family:var(--sans);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#12202A;
  background:linear-gradient(180deg,var(--bronze-hi),var(--bronze));
  border:0;border-radius:var(--r-pill);
  cursor:pointer;
  transition:filter var(--t),transform var(--t);
}
.dz-quiz__submit:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* resumen final */
.dz-quiz__summary{
  margin:16px 0 20px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:4px 14px;
  background:rgba(0,0,0,.20);
}

.dz-quiz__summary-row{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 0;
  border-bottom:1px solid rgba(199,179,164,.10);
}
.dz-quiz__summary-row:last-child{border-bottom:0}

.dz-quiz__summary-k{
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.dz-quiz__summary-v{
  font-size:14px;font-weight:600;
  color:var(--cream);
  overflow-wrap:anywhere;
}

/* CTA WhatsApp — el unico verde de la pagina */
.dz-quiz__cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  margin-top:4px;
  font-family:var(--sans);
  border:0;cursor:pointer;
  padding:17px 22px;
  font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#06210F;
  text-decoration:none;
  background:linear-gradient(180deg,var(--wa),var(--wa-dark));
  border-radius:var(--r-pill);
  box-shadow:0 12px 34px -10px rgba(37,211,102,.55);
  transition:filter var(--t),transform var(--t);
}
.dz-quiz__cta:hover{filter:brightness(1.07);transform:translateY(-2px)}

.dz-quiz__note{
  margin:11px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

/* Va sobre la foto, así que necesita su propio asiento para ser legible
   sin robarle protagonismo al panel del formulario. */
.dz-legal{
  margin:0;
  padding:11px 14px;
  font-size:11px;line-height:1.55;
  color:#C8D4D9;
  background:rgba(10,22,28,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--r-md);
}

/* ---------- Pie ---------- */

.dz-footer{
  position:relative;z-index:2;
  max-width:var(--rail);
  margin:0 auto;
  padding:16px var(--pad) 26px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(175,192,199,.60);
  border-top:1px solid rgba(199,179,164,.10);
}

.dz-footer__brand{display:inline-flex;align-items:center;gap:9px}

.dz-footer__mark{width:22px;height:auto;opacity:.55}

.dz-footer__sign strong{color:var(--beige);font-weight:700}

/* ---------- Móvil ---------- */

@media (max-width:959px){
  .dz-hero{min-height:0;padding:26px 0 34px}

  /* En móvil el texto pasa por encima de toda la foto, así que el velo tiene
     que ser algo más denso que en escritorio — pero solo algo: medido, deja la
     pantalla en ~45/255 frente a los ~56 del escritorio, no en los ~15 de antes. */
  .dz-bg__img{background-position:center 30%;opacity:1}
  .dz-bg__veil{
    background:linear-gradient(180deg,
      rgba(14,30,38,.78) 0%,
      rgba(14,30,38,.70) 42%,
      rgba(14,30,38,.86) 100%);
  }

  .dz-bullets{display:none}          /* demo: la pantalla la manda el formulario */
  .dz-hero__sub{margin-bottom:22px}
}

@media (max-width:560px){
  .dz-header__tag{display:none}
  .dz-footer{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}