/* LAS PANTALLAS PÚBLICAS DE SOSHALLY.ES — marca.css del paquete de la landing (rebranding/publicas/marca.css,
   f4ecde0), sin la barra de revisión de la maqueta. Va después de soshally-tokens.css (layouts/Publica.astro).
   Soshally · la marca en un solo archivo
   Los mismos colores, letras y tamaños de la landing v5 (landing/landing-v5.html), para las pantallas públicas: registro,
   entrar, olvidé mi contraseña, contraseña nueva, baja de los correos, «no existe» y las páginas legales.
   Dos formas de pantalla:
   · puerta: el formulario a la izquierda y, a la derecha, una pieza sobre el color líquido (registro, entrar, olvidé,
     contraseña nueva). En el móvil, solo el formulario.
   · página: la barra de la landing arriba, el contenido en su ancho y el pie corto (baja, «no existe», legales). */

/* Los colores, letras, radios y sombras comunes vienen de sistema/soshally-tokens.css (el mismo archivo del panel), que
   se carga antes que este. Aquí solo va lo que usan las pantallas públicas y la landing y el panel no: */
:root {
  color-scheme: light;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;   /* lo que es un registro: el ticket, una dirección */
  --anillo: 0 0 0 4px rgba(213, 196, 246, .55);                        /* el foco de un campo */
  --sombra-alta: 0 2px 8px rgba(30, 20, 60, .06), 0 44px 90px -40px rgba(40, 26, 80, .5);
  /* Tamaños de las pantallas públicas: los campos a 16 px para que el móvil no acerque la pantalla al tocarlos */
  --t-portada: clamp(34px, 3.3vw, 46px);   /* el título de una pantalla */
  --t-pagina: clamp(36px, 4.2vw, 60px);    /* el título de una página */
  --t-entrada: 17px;
  --t-publico: 16px;                       /* el cuerpo y los campos */
  --t-nota-publica: 14px;
  --radio-campo: 14px;
  --radio-caja: 22px;
  /* El ancho y los márgenes de la landing */
  --ancho: 1760px;
  --gutter: clamp(16px, 5vw, 96px);
}

* { box-sizing: border-box; }
html { background: var(--pg); }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--pg); color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: var(--t-publico); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--gutter); }
.kick { margin: 0 0 14px; font-size: var(--t-kicker); font-weight: 600; letter-spacing: 1.84px; text-transform: uppercase; color: var(--mut); }
em.luz { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; }

/* ---------- El logo ---------- */
.logo { display: block; width: 122px; flex: none; }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }

/* ---------- La cabecera: logo, ES · EN y «Entrar» (o «Crear cuenta» cuando ya estás en Entrar) ---------- */
.cabecera { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.idioma { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--mut); }
.idioma button { padding: 4px 3px; border: 0; background: none; font: 600 13.5px/1 var(--sans); letter-spacing: .04em; color: var(--mut); cursor: pointer; }
.idioma button[aria-pressed="true"] { color: var(--ink); }
.idioma button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.enlace-fuerte { font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.enlace-fuerte:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace-fuerte:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- El pie corto: los enlaces legales ---------- */
.pie-corto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13px; color: var(--mut); }
.pie-corto nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-corto a { text-decoration: none; }
.pie-corto a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pie-corto a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.pie-corto .copy { margin: 0 auto 0 0; }

/* ---------- Títulos y textos de una pantalla ---------- */
.titulo { margin: 0 0 10px; font-size: var(--t-portada); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.titulo:focus { outline: none; }
.lead { margin: 0 0 30px; font-size: var(--t-entrada); color: var(--soft); }
.lead b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.nota { margin: 0; font-size: 12.5px; color: var(--mut); }
.pie-paso { margin: 20px 0 0; font-size: 14.5px; color: var(--mut); }
.pie-paso a, .enlace-btn { font-weight: 700; color: var(--ink); }

/* ---------- Campos ---------- */
label, .etiqueta { display: block; margin: 0 0 7px; font-size: var(--t-nota-publica); font-weight: 600; }
.fila-etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fila-etiqueta a { margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--mut); text-decoration: none; }
.fila-etiqueta a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.campo { display: block; width: 100%; height: 52px; margin: 0 0 18px; padding: 0 16px; border: 1px solid var(--gris-1); border-radius: var(--radio-campo); font: 500 16px/1 var(--sans); color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.campo:focus { outline: none; border-color: var(--ink); box-shadow: var(--anillo); }
.campo[aria-invalid="true"] { border-color: var(--alerta); }
.campo[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .14); }
textarea.campo { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
select.campo { appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%236c6c6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.clave { position: relative; }
.clave .campo { padding-right: 84px; }
.ver-clave { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; font: 600 13.5px/1 var(--sans); color: var(--soft); background: var(--suelo); cursor: pointer; }
.ver-clave:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ayuda-campo { margin: -10px 0 18px; font-size: 13px; color: var(--mut); }
.consent { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 12px; font-size: var(--t-nota-publica); line-height: 1.45; color: var(--soft); }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.consent label { margin: 0; font-size: inherit; font-weight: 500; }
.consent a { font-weight: 600; color: var(--ink); }
/* El código: seis casillas, una cifra en cada una */
.cajas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.cajas input { width: 100%; height: 62px; padding: 0; border: 1px solid var(--gris-1); border-radius: var(--radio-campo); text-align: center; font: 700 26px/1 var(--sans); color: var(--ink); background: #fff; caret-color: var(--lila-v); transition: border-color .2s, box-shadow .2s, transform .3s var(--curva); }
.cajas input:focus { outline: none; border-color: var(--ink); box-shadow: var(--anillo); }
.cajas input.llena { transform: translateY(-2px); }
.cajas.mal input { border-color: var(--alerta); animation: temblor .4s ease; }
@keyframes temblor { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ---------- Mensajes ---------- */
.msg { position: relative; margin: 4px 0 16px; padding: 12px 14px 12px 40px; border-radius: 12px; font-size: var(--t-nota-publica); font-weight: 500; line-height: 1.45; color: var(--alerta); background: var(--alerta-bg); }
.msg::before { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Cpath d='M8 4v5M8 11.2v.3' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7.1 4h1.8v5.2H7.1zm0 6.8h1.8v1.8H7.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.msg a, .msg button { font: inherit; font-weight: 700; color: inherit; }
.msg.ok { color: var(--vivo); background: var(--vivo-bg); }
.msg.ok::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.6-10.4L7 10.2 4.4 7.6 3.3 8.7 7 12.4l5.7-5.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.6-10.4L7 10.2 4.4 7.6 3.3 8.7 7 12.4l5.7-5.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.veredicto { min-height: 22px; margin: 8px 0 18px; font-size: var(--t-nota-publica); font-weight: 600; color: var(--mut); }
.veredicto.libre { color: var(--vivo); }
.veredicto.no { color: var(--alerta); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 600 16px/1 var(--sans); color: #fff; background: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .4s var(--curva), opacity .3s; }
.boton.ancho { width: 100%; }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: scale(.985); }
.boton:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.boton.claro { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--gris-1); }
/* Mientras espera: solo cambia el texto, con lo que está pasando */
.boton.cargando { cursor: progress; pointer-events: none; }
.enlace-btn { padding: 0; border: 0; font: inherit; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- «No soy un robot»: lo dibuja Cloudflare (Turnstile); aquí, su sitio y su medida ---------- */
.robot { display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%; height: 65px; margin: 0 0 18px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: 6px; font: 400 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d1d1d; background: #fafafa; }
.robot i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #c9c9c9; border-radius: 4px; background: #fff; }
.robot.hecho i { border-color: #1a8f3c; background: #1a8f3c; }
.robot.hecho i::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.robot small { margin-left: auto; font-size: 10px; line-height: 1.2; color: #7a7a7a; text-align: right; }

/* ---------- Forma «puerta»: el formulario y, al lado, una pieza sobre el color líquido ---------- */
.puerta { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.puerta-form { display: flex; flex-direction: column; padding: 0 clamp(24px, 5.5vw, 88px) 28px; padding-left: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); }
.puerta-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 440px; padding-block: 40px; }
.puerta-lado { position: relative; isolation: isolate; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); overflow: hidden; background: linear-gradient(120deg, #f5c2da, #d5c4f6 30%, #b3c8fa 52%, #a6e3ee 72%, #c3efd3); }
.puerta-lado canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.paso[hidden] { display: none; }
.paso.entra { animation: entra .6s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateX(24px); } }
.pasos-barra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 34px; }
.seg { display: grid; gap: 9px; }
.seg .barra-s { display: block; height: 3px; border-radius: 99px; background: var(--pista); overflow: hidden; }
.seg .barra-s i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(var(--lleno, 0)); transition: transform .8s var(--curva); }
.seg small { font-size: 12.5px; font-weight: 600; color: var(--mut); transition: color .3s; }
.seg.actual small { color: var(--ink); }
/* Tarjetas de vidrio sobre el color líquido */
.vidrio { border-radius: var(--radio-caja); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -34px rgba(40, 26, 80, .5); }
.lado-cab { margin: 0 0 16px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(14, 14, 14, .66); background: rgba(255, 255, 255, .6); justify-self: center; }

/* ---------- Forma «página»: la barra arriba, el contenido y el pie corto ---------- */
.pagina { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.pagina > * { width: 100%; }
.pagina > main { flex: 1; }
.pagina > .pie-corto { padding-block: 26px 30px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .puerta { grid-template-columns: minmax(0, 1fr); }
  .puerta-lado { display: none; }
  /* En el teléfono, el formulario queda en la mitad vertical de la pantalla: la cabecera flota arriba y no empuja */
  .puerta-form { position: relative; padding-inline: var(--gutter); }
  .puerta-form > .cabecera { position: absolute; z-index: 2; top: 0; left: var(--gutter); right: var(--gutter); }
  .puerta-centro { max-width: none; min-height: 100vh; min-height: 100svh; justify-content: center; padding-block: 84px; }
}
/* En el teléfono, las páginas cortas (baja, «no existe», portafolio no disponible) quedan en la mitad vertical exacta de la
   pantalla: el contenido ocupa la pantalla entera y la cabecera queda encima, sin empujarlo; el pie, debajo */
@media (max-width: 900px) {
  .pagina > .cabecera { position: relative; z-index: 2; }
  .pagina > main.centrada { min-height: 100vh; min-height: 100svh; margin-top: -72px; padding-block: 72px; display: grid; place-items: center; align-content: center; }
}
@media (max-width: 420px) {
  .cajas { gap: 7px; }
  .cajas input { height: 54px; font-size: 22px; }
  .cabecera-acciones { gap: 14px; }
  .logo { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .paso.entra, .cajas.mal input { animation: none; }
  .seg .barra-s i, .boton { transition: none; }
}

/* ---------- Mientras carga: la pantalla en blanco y la dirección de la creadora con el barrido de luz líquida ----------
   El mismo barrido de los titulares de la landing: la dirección, en tinta, y una franja con los seis colores que la
   recorre entera. Dura al menos un barrido completo, aunque la respuesta llegue antes. Nombre y dominio, del mismo tamaño. */
.cargando-pantalla { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; align-content: center; gap: 18px; padding: var(--gutter); background: var(--pg); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.cargando-pantalla.visible { opacity: 1; pointer-events: auto; }
.cargando-dir { margin: 0; max-width: 100%; font: 700 clamp(28px, 5.4vw, 76px)/1.05 var(--sans); letter-spacing: -.045em; text-align: center; overflow-wrap: anywhere; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--ink) 42%, var(--lila-v) 46.5%, var(--pervinca-v) 49%, var(--agua-v) 51.5%, var(--menta-v) 54%, var(--ink) 58%); background-size: 320% 100%; background-position: 100% 0; }
.cargando-pantalla.visible .cargando-dir { animation: luz-cargando 2.4s cubic-bezier(.45, .05, .4, 1) .15s infinite; }
@keyframes luz-cargando { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cargando-texto { margin: 0; font-size: 15px; font-weight: 600; color: var(--mut); }
@media (prefers-reduced-motion: reduce) { .cargando-pantalla.visible .cargando-dir { animation: none; } }