/* ════════════════════════════════════════════════════════════════════
   WEBLYM · CREAR CUENTA CON LA OFERTA DE LANZAMIENTO            (12/10)

   Pedido: «que el apartado de crear la cuenta para el descuento tenga un
   diseño similar al del formulario de Contáctanos». Esta página
   (SignIn/index.html) es la MISMA para el registro de siempre y para el
   que viene de los botones de descuento de la portada, así que TODO LO DE
   AQUÍ CUELGA DE `html.con-oferta`, que solo pone app.js cuando la URL
   trae ?oferta=lanzamiento. Sin la oferta, la página no cambia ni un
   píxel.

   Lo que se copia de la portada (landing/contacto.css y landing.css):
   · La barra de arriba: el logo, y «Contáctanos» subrayado a la derecha.
   · El titular, el lema y la pastilla ARRIBA y el formulario debajo, en
     una sola columna centrada (12/10, pedido: «que el título y el
     subtítulo estén arriba»; primero iban a la izquierda, como en
     Contáctanos).
   · Las mismas unidades (`--u`, el ancho entre 1088) y el mismo zoom del
     90 % en ordenador, para que los dos formularios midan lo mismo.
   · Los campos en píldora con el canto #c9c9c9 y el azul al enfocar, y el
     botón azul de los de descuento, con su relieve.
   · Fuera los tres accesos de Google, GitHub y Apple: no hacen nada todavía
     y el formulario de contacto no los tiene.
   ════════════════════════════════════════════════════════════════════ */

.oferta-barra {
  display: none;
}

html.con-oferta,
html.con-oferta body {
  background: #fff;
}

@media (min-width: 641px) {
  html.con-oferta {
    zoom: 0.9;
  }
}

/* ── LA BARRA ─────────────────────────────────────────────────────── */
.con-oferta .oferta-barra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 71px;
  padding: 16.7px 9px 0 23px;
}

.oferta-barra__logo {
  display: block;
  margin-top: 5.5px;
}

.oferta-barra__logo img {
  display: block;
  width: auto;
  height: 33px;
}

.oferta-barra__contacto {
  margin: 8px 22px 0 0;
  color: #4a4a4a;
  font-size: 17.6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-underline-offset 0.15s ease;
}

@media (hover: hover) {
  .oferta-barra__contacto:hover {
    color: #737373;
    text-underline-offset: 4px;
  }
}

/* ── LA COMPOSICIÓN ───────────────────────────────────────────────── */
.con-oferta .acceso {
  --u: calc(min(100vw, 1920px) / 1088);
  display: block;
  min-height: 0;
  padding: 0;
  font-size: 16px;
}

/* UNA COLUMNA: el ancho del formulario de Contáctanos (560u), centrada. */
.con-oferta .acceso__caja {
  display: block;
  max-width: calc(560 * var(--u) + 40px);
  margin: 0 auto;
  padding: calc(56 * var(--u)) 20px calc(120 * var(--u));
  box-sizing: border-box;
}

.con-oferta .acceso__titulo,
.con-oferta .acceso__lema,
.con-oferta .acceso__oferta {
  margin-left: 0;
  text-align: left;
}

/* 36u y no los 43 de las cabeceras: encima de una columna de 560 el
   titular de 43 partía en «Hazla / crecer.». */
.con-oferta .acceso__titulo {
  font-size: max(26px, calc(36 * var(--u)));
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: normal;
  color: #000;
}

.con-oferta .acceso__lema {
  margin-top: calc(18 * var(--u));
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.3;
  color: #262626;
}

.con-oferta .acceso__oferta {
  margin-top: calc(22 * var(--u));
}

/* Los tres pasos, debajo de la cabecera. */
.con-oferta .acceso__col {
  width: 100%;
  max-width: none;
  margin-top: calc(36 * var(--u));
}

.con-oferta .acceso__sociales {
  display: none;
}

/* ── LOS CAMPOS ───────────────────────────────────────────────────── */
.con-oferta .acceso__label {
  margin: calc(20 * var(--u)) 0 6px 2px;
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 500;
  color: #000;
}

.con-oferta #signup-form > .acceso__label:first-of-type {
  margin-top: 0;
}

.con-oferta .acceso__campo {
  height: max(42px, calc(46 * var(--u)));
  padding: 0 16px;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  background: #fff;
  background-image: none;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
  color: #000;
  font-size: 16px;
  transition: border-color 0.15s ease;
}

.con-oferta .acceso__campo::placeholder {
  color: #969696;
}

.con-oferta .acceso__campo:focus {
  border-color: #397ef8;
}

.con-oferta .acceso__dicho,
.con-oferta .acceso__pie,
.con-oferta .acceso__legal {
  text-align: left;
}

.con-oferta .acceso__dicho {
  font-size: 16px;
}

/* ── EL BOTÓN: EL AZUL DE LOS DE DESCUENTO ────────────────────────────
   La receta de `.inicio__accion` de la portada (landing.css): sin borde,
   un anillo de medio píxel del propio azul, el relleno que se aclara
   abajo y un anillo de 1 px por dentro, claro arriba y oscuro abajo. */
.con-oferta .acceso__enviar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: max(38px, calc(44 * var(--u)));
  margin-top: calc(24 * var(--u));
  padding: 0 max(24px, calc(36.7 * var(--u)));
  border: 0;
  border-radius: 999px;
  background-color: #397ef8;
  background-image: linear-gradient(to bottom,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 69%,
      rgb(255 255 255 / 0.16) 85%);
  box-shadow: 0 0 0 0.5px #397ef8;
  color: #fff;
  font-size: max(15px, calc(17.7 * var(--u)));
  font-weight: 400;
  text-decoration: none;
}

.con-oferta .acceso__enviar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom,
      rgb(153 184 239) 0%,
      rgb(153 184 239) 44%,
      rgb(48 82 142) 56%,
      rgb(48 82 142) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.con-oferta .acceso__enviar:hover {
  background-color: #2f6fe6;
}

.con-oferta .acceso__enviar:active {
  box-shadow: 0 0 0 0.5px #397ef8;
}

/* Mientras carga (con el giro de auth.css), el azul baja poco: con el .65 de
   la casa quedaba de un celeste lavado. */
.con-oferta .acceso__enviar:disabled {
  opacity: .82;
}

.con-oferta .acceso__legal {
  max-width: none;
  margin: 14px 0 0 2px;
  font-size: 13.5px;
  color: #6b6b6b;
}

.con-oferta .acceso__legal a {
  color: #4a4a4a;
}

/* El paso de «Tu cuenta está creada», alineado como el resto. */
.con-oferta .acceso__listo {
  align-items: flex-start;
  text-align: left;
}

.con-oferta .acceso__listo-titulo {
  font-size: max(22px, calc(28 * var(--u)));
  font-weight: 400;
}

.con-oferta .acceso__listo-texto {
  font-size: 16px;
}

/* ── MÓVIL ────────────────────────────────────────────────────────────
   En una columna y en píxeles, como la portada de móvil y su formulario
   de contacto. La barra, la de móvil de la portada. */
@media (max-width: 640px) {
  .con-oferta .oferta-barra {
    height: 70px;
    padding: 21.5px 15.8px 0 20.3px;
  }

  .oferta-barra__logo {
    margin-top: -6px;
  }

  .oferta-barra__logo img {
    height: 39.7px;
  }

  .oferta-barra__contacto {
    margin: 4px 0 0;
    font-size: 15px;
  }

  .con-oferta .acceso__caja {
    max-width: none;
    padding: 32px 20px 64px;
  }

  .con-oferta .acceso__titulo {
    font-size: 30px;
  }

  .con-oferta .acceso__lema {
    margin-top: 12px;
    font-size: 16px;
  }

  .con-oferta .acceso__oferta {
    margin: 14px 0 0;
  }

  .con-oferta .acceso__col {
    margin-top: 28px;
  }

  .con-oferta .acceso__label {
    margin-top: 16px;
  }

  .con-oferta .acceso__enviar {
    display: flex;
    width: 100%;
    height: 44px;
    margin-top: 22px;
    font-size: 17px;
  }
}