/* assets/css/pages/registro.css — lo propio de «Crear cuenta».
 *
 * El esqueleto (tokens, cabecera, botones, preguntas frecuentes y pie) está en
 * assets/css/landing-comun.css, que esta página carga ANTES que esta hoja.
 * Aquí solo vive lo que no comparte con las demás landings.
 */

/* ══════════ Portada ══════════ */
.hero { padding-top: 46px; }
.hero__rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
  gap: 64px; align-items: start;
}
.hero__texto { padding-top: 26px; }
.hero h1 {
  margin: 22px 0 20px;
  font-family: var(--serif); font-size: clamp(36px, 4.2vw, 55px); font-weight: 600;
  line-height: 1.07; letter-spacing: -.028em;
}
.hero__entrada { max-width: 480px; color: var(--apagado); font-size: 16.5px; line-height: 1.62; }

/* ── Las cifras del catálogo ──
   Salen del catálogo publicado de verdad. Si no se pueden leer, el bloque va
   con `hidden` y no se pinta nada. */
.cifras { display: flex; gap: 38px; margin: 26px 0 0; flex-wrap: wrap; }
.cifras > div { display: grid; gap: 2px; }
.cifras dt { order: 2; color: var(--apagado); font-size: 12.6px; }
.cifras dd { order: 1; margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }

.ventajas { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 15px; }
.ventajas li { display: flex; align-items: center; gap: 13px; font-size: 15.5px; font-weight: 500; }
.ventajas .ico { color: var(--coral); }

.hero__botones { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ── Foto + los tres pasos ── (misma mecánica que /escribir-con-nosotros) */
.hero__media { position: relative; margin: 46px 0 0 calc(-1 * var(--margen)); }
.hero__foto { height: 320px; overflow: hidden; border-radius: 0 var(--radio-g) var(--radio-g) 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

.pasos {
  list-style: none;
  margin: -92px 0 0 var(--margen); padding: 22px 24px;
  /* El `100%` es el de `.hero__media`, ya ensanchado por su margen negativo:
     hay que descontarlo o el bloque se cuela bajo el panel de la derecha. */
  width: calc(100% - var(--margen) + 52px);
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra);
}
.pasos > li { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 0; min-width: 0; }
.pasos__ico { color: var(--coral); display: grid; place-items: center; margin-top: 1px; }
.pasos strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pasos small { display: block; margin-top: 3px; color: var(--apagado); font-size: 12.8px; line-height: 1.45; }
/* Cualificado a propósito: `.pasos > li` (0,1,1) le gana a `.pasos__flecha`
   (0,1,0), y sin esto las flechas crecerían como un paso más. */
.pasos > li.pasos__flecha { flex: 0 0 auto; color: var(--linea-fuerte); font-size: 22px; line-height: 1; }

/* ══════════ El panel del alta ══════════ */
.panel {
  background: var(--blanco); border-radius: var(--radio-g); padding: 28px 30px 24px;
  box-shadow: var(--sombra-panel); scroll-margin-top: 96px;
}
.panel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel__titulo { font-size: 14.5px; font-weight: 700; }
.panel__paso {
  color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--coral-suave); padding: 4px 10px; border-radius: 99px;
}
.panel__h { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
.panel__sub { margin-top: 6px; color: var(--apagado); font-size: 14px; }

.campo { margin-top: 17px; }
.campo label { display: block; margin-bottom: 7px; font-size: 13.2px; font-weight: 600; }
.campo__opc { margin-left: 4px; color: var(--apagado); font-weight: 400; }
.campo__ayuda { margin-top: 6px; color: var(--apagado); font-size: 12.2px; }

.campo input {
  width: 100%; padding: 12px 14px;
  border: 1.4px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta);
  font-family: inherit; font-size: 14.5px; line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo input::placeholder { color: #a8a099; }
.campo input:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 59, 79, .12);
}
.campo input[aria-invalid="true"] { border-color: var(--coral); }
.campo__mal { margin-top: 6px; color: var(--coral-fuerte); font-size: 12.4px; font-weight: 500; }

/* ── Contraseña ── */
.clave { position: relative; }
.clave input { padding-right: 46px; }
.clave__ver {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 7px; color: var(--apagado);
}
.clave__ver:hover { background: var(--crema); color: var(--tinta); }
.clave__ver[aria-pressed="true"] { color: var(--coral); }

.fuerza { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.fuerza__barra { flex: 1; height: 4px; border-radius: 99px; background: var(--crema-2); overflow: hidden; }
.fuerza__barra i { display: block; height: 100%; border-radius: 99px; width: var(--pct, 0%); background: var(--nivel, var(--coral)); transition: width .2s ease, background .2s ease; }
.fuerza__txt { font-size: 12.2px; font-weight: 600; color: var(--nivel, var(--apagado)); min-width: 62px; }

.acepto { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 13.4px; color: var(--tinta-2); line-height: 1.5; }
.acepto input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--coral); }
.acepto a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }

.panel__pie { display: flex; gap: 10px; margin-top: 22px; }
.panel__nota { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--apagado); font-size: 12.4px; }
.panel__nota .ico { width: 15px; height: 15px; }
.panel__entrar { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13.6px; color: var(--apagado); text-align: center; }
.panel__entrar a { color: var(--coral); font-weight: 600; }

.aviso { margin-top: 16px; padding: 13px 15px; border-radius: var(--radio); font-size: 13.6px; line-height: 1.5; }
.aviso--ok { background: #f0fdf5; border: 1px solid #bbf0d0; color: #10693c; }
.aviso--mal { background: var(--coral-suave); border: 1px solid #ffd0d5; color: var(--coral-fuerte); }

.panel [data-turnstile]:not(:empty) { margin-top: 18px; }

/* ══════════ Qué incluye ══════════ */
.incluye { padding: 92px 0 96px; background: var(--blanco); }
.incluye__h {
  max-width: 900px; margin: 0 auto 52px; text-align: center; text-wrap: balance;
  font-family: var(--serif); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.2;
}
.incluye__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.incluye__lista li {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 18px; border: 1px solid var(--linea); border-radius: 12px;
  font-size: 14.6px; font-weight: 500; line-height: 1.4;
}
.incluye__lista i {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--coral-suave); color: var(--coral);
  font-style: normal; font-size: 16px;
}

/* ══════════ Gratis vs. comprada ══════════ */
.planes { padding: 88px 0 96px; }
.planes__h {
  text-align: center; text-wrap: balance; max-width: 760px; margin: 0 auto 12px;
  font-family: var(--serif); font-size: clamp(27px, 3vw, 38px); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.2;
}
.planes__sub { max-width: 620px; margin: 0 auto 46px; text-align: center; color: var(--apagado); font-size: 15.4px; line-height: 1.6; }
.planes__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 940px; margin: 0 auto; }
.plan { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 30px 30px 32px; }
.plan--destacado { border-color: var(--coral); box-shadow: var(--sombra); }
.plan__rotulo { color: var(--apagado); font-size: 12.6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan__precio { margin-top: 8px; font-family: var(--serif); font-size: 31px; font-weight: 600; letter-spacing: -.02em; }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.plan li { position: relative; padding-left: 27px; font-size: 14.8px; line-height: 1.55; color: var(--tinta-2); }
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--coral); font-weight: 700; font-size: 14px;
}
.plan strong { color: var(--tinta); }

/* ══════════ Pantallas medianas ══════════ */
@media (max-width: 1080px) {
  .hero__rejilla { grid-template-columns: 1fr; gap: 42px; }
  .hero__texto { padding-top: 0; }
  .hero__entrada { max-width: none; }
  .panel { max-width: 560px; }

  .hero__media { margin-left: 0; }
  .hero__foto { height: 250px; border-radius: var(--radio-g); }
  .pasos { margin-left: 0; margin-top: -60px; width: 100%; }

  .incluye__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════ Móvil ══════════ */
@media (max-width: 760px) {
  .hero { padding-top: 30px; }
  .hero h1 { margin: 16px 0 14px; }
  .cifras { gap: 26px; margin-top: 22px; }
  .cifras dd { font-size: 25px; }
  .hero__botones { gap: 16px; }
  .hero__botones .btn { width: 100%; }

  .panel { padding: 22px 20px 20px; border-radius: 14px; }
  .panel__h { font-size: 23px; }
  .panel__pie .btn { width: 100%; }

  .hero__foto { height: 200px; width: calc(100% - 36px); }
  .pasos { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; margin-top: -32px; }
  .pasos > li.pasos__flecha { display: none; }
  .pasos > li { flex: 1 1 auto; }

  .incluye { padding: 62px 0 64px; }
  .incluye__h { margin-bottom: 32px; }
  .incluye__lista { grid-template-columns: 1fr; gap: 12px; }

  .planes { padding: 58px 0 64px; }
  .planes__rejilla { grid-template-columns: 1fr; gap: 18px; }
  .plan { padding: 24px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .fuerza__barra i { transition: none; }
}