/* Gana con la Promesa de Pedigree — landing de registro */

:root{
  --naranja:      #FBBA00;
  --naranja-hondo:#F0A800;
  --azul:         #1246C8;
  --azul-campo:   #1E5BE4;
  --azul-borde:   #3A78F0;
  --boton:        #F58634;
  --boton-hover:  #E07524;
  --amarillo:     #FFC94A;
  --error-fondo:  #FFE3E0;
  --error-texto:  #A32316;
  --radio:        26px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  min-height:100vh;
  min-height:100svh;
  background:var(--naranja);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color:#fff;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
}

.escena{
  position:relative;
  width:100%;
  max-width:440px;
  min-height:100vh;
  min-height:100svh;
  padding:22px 20px 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* --- Logo --- */
.logo{
  display:block;
  width:74%;
  max-width:300px;
  margin:0 auto 18px;
  height:auto;
}

/* --- Bodegón de los Echo Pop --- */
.echo{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:112%;
  max-width:520px;
  z-index:1;
  pointer-events:none;
  user-select:none;
}

/* --- Tarjeta azul --- */
.tarjeta{
  position:relative;
  z-index:2;
  background:var(--azul);
  border-radius:var(--radio);
  padding:28px 22px;
  text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.tarjeta h1{
  font-size:clamp(23px, 6.7vw, 31px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:.2px;
  text-transform:uppercase;
}

/* La confirmación lleva un titular más largo: un punto más chico */
.escena--listo h1{ font-size:clamp(19px, 5.5vw, 27px); letter-spacing:0; }

/* Portada: el titular debe caber en dos renglones */
.escena--portada h1{ font-size:clamp(21px, 6.1vw, 30px); }

/* Portada: el producto va ENCIMA del cuadro azul.
   Aquí la imagen no va posicionada sino en el flujo, montada sobre el
   borde inferior de la tarjeta: así siempre tapa el filo del azul y
   nunca el texto, sin importar qué tan alta sea la pantalla. */
.escena--portada .tarjeta{ padding:34px 24px 30px; }
.escena--portada .echo{
  position:static;
  transform:none;
  z-index:3;
  width:112%;
  max-width:520px;
  margin:-46px auto 0;
  align-self:center;
}

/* --- Botones --- */
.boton{
  position:relative;
  z-index:4;
  display:block;
  width:100%;
  border:0;
  border-radius:16px;
  background:var(--boton);
  color:#fff;
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  padding:17px 20px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition:background .15s ease, transform .12s ease;
}
.boton:hover{ background:var(--boton-hover); }
.boton:active{ transform:translateY(2px); }
.boton:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.boton--portada{
  margin:auto auto 34px;
  max-width:320px;
}
.boton--formulario{ margin-top:22px; }
.boton--listo{ max-width:290px; margin:26px auto 0; }

/* --- Formulario --- */
.campos{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }

.campo{
  width:100%;
  border:2px solid transparent;
  border-radius:14px;
  background:var(--azul-campo);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  padding:16px 18px;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
}
.campo::placeholder{ color:rgba(255,255,255,.92); font-weight:600; }
.campo:focus{ outline:0; border-color:#fff; background:var(--azul-borde); }
.campo:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 60px var(--azul-campo) inset;
}

select.campo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 17 3.5 7.5h17z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:17px;
  padding-right:46px;
  cursor:pointer;
}
select.campo option{ color:#111; background:#fff; }
select.campo:invalid{ color:rgba(255,255,255,.92); }

/* --- Aviso de error --- */
.aviso{
  margin-top:18px;
  background:var(--error-fondo);
  color:var(--error-texto);
  border-radius:13px;
  padding:13px 15px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
}

/* --- Pantalla de confirmación --- */
.confirma-sub{
  margin-top:14px;
  color:var(--amarillo);
  font-size:15px;
  font-weight:700;
}
.confirma-texto{
  margin-top:22px;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
}
.legal{
  margin-top:24px;
  font-size:11.5px;
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,.9);
}

/* En formulario y confirmación el producto va ENCIMA de la tarjeta,
   como en el diseño: la tarjeta reserva abajo el espacio que ocupa. */
.escena--formulario .echo,
.escena--listo .echo{ z-index:3; width:72%; max-width:320px; }

/* La tarjeta reserva abajo justo lo que mide el producto,
   para que nunca tape un campo ni el botón. */
.escena--formulario .tarjeta,
.escena--listo .tarjeta{ padding-bottom:min(52vw, 236px); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}