/* Integración técnica del diseño de Valeria (diseno-valeria-v2). NO es diseño: su landing.css y tema.css van tal cual.
   Aquí solo: fotos en <picture> (WebP con respaldo), el chat real con su maquetado y la burbuja en celular. */

/* <picture> no debe cambiar el acomodo: la imagen sigue siendo el elemento del grid/flex como en su index.html */
.logo picture, .l-portada-dentro > picture, .l-escena-imagen picture, .l-pie picture { display: contents; }
picture > source { display: none; } /* (si no, el <source> ocupa un lugar en la cuadrícula) */

/* Chat real con su maquetado (.chat-mensaje): respuestas de varios renglones y "escribiendo…" */
.chat-mensaje p { white-space: pre-wrap; word-wrap: break-word; }
.chat-mensaje .escribiendo { display: inline-flex; margin-top: 6px; }

/* Celular: la burbuja "¿Dudas? Pregúntame" no tapa la portada (ahí ya está el botón "Quiero mi semana gratis").
   Aparece en cuanto se baja un poco. Mismo estilo, solo cuándo se ve. */
.chat-burbuja { transition: opacity .25s ease, transform .25s ease; }
.chat-burbuja.en-portada { opacity: 0; transform: translateY(24px); pointer-events: none; }

/* Chat de dudas: botón de registro siempre a la mano (el chat no pide ni guarda datos) */
.chat-registro { margin: 0 12px 8px; width: auto; justify-content: center; }

/* Página de REGISTRO (provechito.com.mx/registro): mismo estilo de la página, un formulario sencillo */
.registro { padding: 28px 16px 48px; box-sizing: border-box; }
.registro h1 { font-family: var(--fuente-titulos); font-size: clamp(32px, 7vw, 46px); margin: 0 0 6px; }
.registro-sub { font-size: var(--texto-grande); margin: 0 0 18px; }
.registro-form { background: var(--color-superficie); border: 2px solid var(--color-borde); border-radius: var(--radio-ventana); padding: 20px; box-shadow: var(--sombra); }
.registro-form label { display: block; font-weight: var(--peso-extra); font-size: var(--texto-mediano); margin: 16px 0 6px; }
.registro-form label:first-child { margin-top: 0; }
.registro-form input { width: 100%; font: inherit; font-size: var(--texto-mediano); min-height: var(--boton-alto); padding: 12px 14px; border: 2px solid var(--color-borde); border-radius: var(--radio-campo); background: var(--color-superficie); color: var(--color-texto); }
.registro-form input[aria-invalid="true"] { border-color: var(--color-agotado); background: var(--color-agotado-claro); }
.registro-nota { font-weight: var(--peso-normal); color: var(--color-texto-suave); font-size: var(--texto-base); }
.registro-ojo { display: flex; gap: 8px; }
.registro-ojo input { flex: 1; min-width: 0; }
.registro-ojo .l-boton { flex: none; }
.registro-error { color: var(--color-agotado-texto); font-weight: var(--peso-fuerte); margin: 6px 0 0; min-height: 0; }
.registro-error:empty { display: none; }
.registro-boton { width: 100%; max-width: none; margin-top: 22px; }
.registro-legal { color: var(--color-texto-suave); margin: 12px 0 0; }
.registro-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.registro-despues { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.registro-despues li { display: flex; gap: 12px; align-items: center; font-size: var(--texto-mediano); background: var(--color-fondo-2); border-radius: var(--radio); padding: 12px 14px; }
.registro-despues span { font-size: 30px; }
.registro-ya { background: var(--color-entregado-claro); border: 2px solid var(--color-entregado); border-radius: var(--radio); padding: 16px; margin-bottom: 16px; }
.registro-ya[hidden] { display: none; }