/* ==========================================================================
   Cuenta · estética calma (PD-102, prueba)

   El ingreso y el registro de TODOS los productos con la misma pantalla calma:
   un lienzo casi negro y liso, una sola columna al medio, el logo de Cannis (su
   versión para fondo oscuro) arriba, todo en Geist (OFL, autoalojada), el
   título grande y apretado; campos hundidos de borde fino, botón de tinta clara, mucho aire. Sin banda de marca, sin degradés, sin sombras
   duras. Toma principios visuales, no la marca de nadie.

   Va ÚLTIMA en el layout (después de la hoja del registro). Colores: sólo
   var(--cu-*) (bloque «Estética calma» de tokens.css).
   ========================================================================== */

@font-face { font-family: 'Geist'; src: url('/fonts/geist/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

body.cu-body { background-color: var(--cu-papel); background-image: var(--cu-calma-fondo); background-attachment: fixed; font-family: var(--cu-font); }

/* ── El ingreso: una sola columna al medio ───────────────────────────────── */

.cu-pantalla {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    padding: 0 20px;
    background: transparent;
}

/* La banda de marca se reduce a la firma: el logo, arriba, solo. El lema, los puntos y el pie no se pintan en esta prueba. */
.cu-marca {
    position: static;
    align-self: center;
    height: auto;
    min-height: 0;
    padding: 56px 0 8px;
    background: none;
    color: var(--cu-tinta);
}
.cu-marca::after,
.cu-marca__lema,
.cu-marca__pie { display: none; }
.cu-marca__firma { justify-content: center; }
.cu-marca__logo { --cu-logo-px: var(--cu-logo-alto); margin-left: 0; }

.cu-panel {
    width: 100%;
    flex: 1;
    justify-content: flex-start;
    padding: 24px 0 40px;
    background: none;
}

.cu-hoja,
.cu-pagina .cu-hoja {
    width: min(400px, 100%);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.cu-hoja::before { display: none; }
.cu-pagina .cu-hoja--media { width: min(560px, 100%); }
.cu-pagina .cu-hoja--ancha { width: min(720px, 100%); }

/* ── La cabeza: el título grande y liviano, al medio ──────────────────────── */

.cu-cabeza { margin-bottom: 32px; text-align: center; }
.cu-eyebrow { display: none; }     /* el nombre del producto ya lo dice el logo */
.cu-titulo {
    font-family: var(--cu-font);
    font-size: clamp(28px, 5.4vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.cu-bajada { margin-top: 12px; font-size: 16px; }

/* ── Campos y botones ────────────────────────────────────────────────────── */

.cu-campo__label { font-size: 14px; font-weight: 500; }
.cu-campo :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    min-height: 48px;
    border: 1px solid var(--cu-borde-campo);
    border-radius: var(--cu-radio-md);
    background: var(--cu-campo);
    font-size: 16px;
}
.cu-campo :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible {
    border-color: var(--cu-tinta);
    outline: 3px solid var(--cu-marca-suave);
    outline-offset: 0;
    box-shadow: 0 0 0 1px var(--cu-tinta);
}
.cu-check input { accent-color: var(--cu-tinta); }

.cu-btn { min-height: 48px; border-radius: var(--cu-radio-md); font-weight: 600; }
.cu-btn--primario { box-shadow: none; }
.cu-btn--primario:hover { filter: none; transform: none; background: var(--cu-tinta-suave); }
.cu-btn--secundario { background: var(--cu-superficie); border-color: var(--cu-borde-campo); }
.cu-btn--secundario:hover { border-color: var(--cu-tinta); color: var(--cu-tinta); }

.cu-separador::before, .cu-separador::after { background: var(--cu-linea); }
.cu-ayuda { border-top: 0; text-align: center; }
.cu-enlace, .cu-hoja a:not(.cu-btn) { color: var(--cu-marca); text-underline-offset: 3px; }

.cu-ecosistema { display: block; color: var(--cu-tinta-suave); font-size: 13px; }

/* ── El registro: la misma calma, con el logo arriba a la izquierda ──────── */

.cu-pagina { background: transparent; }
.cu-pagina__barra { padding: 20px clamp(20px, 4vw, 40px); background: none; border-bottom: 1px solid var(--cu-linea); }
.cu-pagina__cuerpo { padding: clamp(32px, 6vw, 64px) 20px 48px; }
.cu-pagina .cu-cabeza { text-align: left; }

/* ── Teléfono ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .cu-pantalla { grid-template-columns: none; }
    .cu-marca { padding: 32px 0 4px; }
    .cu-marca__logo { --cu-logo-px: calc(var(--cu-logo-alto) * 0.8); }
    .cu-panel { padding: 16px 0 32px; background: none; }
    .cu-hoja { margin-top: 0; padding: 0; }
    .cu-cabeza { margin-bottom: 24px; }
}

/* ── Las estelas, como una aurora (PD-102; movimiento PD-103) ───────────────
   Dos trazos de luz largos y difusos con los colores de Cannis (el verde y un
   azul frío), en diagonal, cada uno con un hilo fino adentro. Criterio:

     · van en los BORDES (arriba a la izquierda, abajo a la derecha): la
       columna del formulario queda en el negro, y el contraste del texto se
       mide contra ese negro EN TODO EL CICLO (en su punto más ancho, la verde
       no llega a la columna del registro: por eso su centro va al 20 % / 43 %);
     · un núcleo claro y fino dentro de un halo ancho y tenue: se leen como
       luz que pasa, no como un dibujo;
     · se mueven como una aurora (PD-103): cada estela en su capa y con su
       ciclo (29 s la verde, 37 s la azul, que no coinciden nunca), deriva
       apenas, se mece ±2°, se ensancha y se afina como una cortina, ondula un
       poco y respira. Poco recorrido, siempre lento, sólo transform/opacity;
     · cada capa gira y se estira desde el centro de SU estela
       (transform-origin), así no se corre de lugar al respirar;
     · sin filter: blur. Los degradés ya son suaves de por sí, el hilo queda
       nítido (con el desenfoque se perdía) y el navegador sólo compone
       transform y opacity;
     · con prefers-reduced-motion quedan quietas;
     · en el teléfono, una sola estela arriba y más tenue.

   Son capas fijas detrás de todo (z-index -1 dentro del body aislado): no
   toman clics ni cambian el layout. */

body.cu-body { position: relative; isolation: isolate; }

body.cu-body::before,
body.cu-body::after {
    content: '';
    position: fixed;
    inset: -25vmax;
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
}

/* La verde, arriba a la izquierda. */
body.cu-body::before {
    background:
        linear-gradient(90deg, transparent 4%, rgba(170, 245, 205, 0.85) 20%, transparent 36%) 0 43% / 100% 1px no-repeat,
        radial-gradient(ellipse 22vmax 1.4vmax at 20% 43%, rgba(170, 245, 205, 0.55), transparent 72%),
        radial-gradient(ellipse 48vmax 7vmax at 20% 43%, rgba(0, 191, 99, 0.42), transparent 70%),
        radial-gradient(ellipse 70vmax 14vmax at 18% 41%, rgba(0, 191, 99, 0.12), transparent 70%),
        radial-gradient(ellipse 34vmax 4vmax at 24% 39%, rgba(45, 212, 191, 0.14), transparent 70%);
    transform-origin: 20% 43%;
    transform: rotate(-16deg);
    animation: cu-aurora-verde 29s ease-in-out infinite;
}

/* La azul fría, abajo a la derecha. */
body.cu-body::after {
    background:
        linear-gradient(90deg, transparent 63%, rgba(190, 215, 255, 0.75) 79%, transparent 95%) 0 67% / 100% 1px no-repeat,
        radial-gradient(ellipse 20vmax 1.2vmax at 79% 67%, rgba(190, 215, 255, 0.45), transparent 72%),
        radial-gradient(ellipse 46vmax 6vmax at 79% 67%, rgba(88, 140, 230, 0.40), transparent 70%),
        radial-gradient(ellipse 66vmax 12vmax at 83% 68%, rgba(88, 140, 230, 0.12), transparent 70%),
        radial-gradient(ellipse 30vmax 3.5vmax at 75% 71%, rgba(167, 139, 250, 0.10), transparent 70%);
    transform-origin: 79% 67%;
    transform: rotate(-16deg);
    animation: cu-aurora-azul 37s ease-in-out infinite;
}

/* Cinco tiempos por ciclo, con valores que no se repiten: así se lee como
   una cortina de luz y no como un vaivén. */
@keyframes cu-aurora-verde {
    0%   { transform: rotate(-16deg) translate3d(0, 0, 0)            scale(1, 1)    skewX(0deg);  opacity: 0.85; }
    22%  { transform: rotate(-14.5deg) translate3d(1.5vmax, -0.6vmax, 0) scale(1.04, 1.28) skewX(-4deg); opacity: 1; }
    47%  { transform: rotate(-17.5deg) translate3d(2.5vmax, 0.4vmax, 0)  scale(0.97, 0.86) skewX(3deg);  opacity: 0.72; }
    74%  { transform: rotate(-15deg) translate3d(0.8vmax, 0.9vmax, 0)  scale(1.02, 1.16) skewX(-2deg); opacity: 0.95; }
    100% { transform: rotate(-16deg) translate3d(0, 0, 0)            scale(1, 1)    skewX(0deg);  opacity: 0.85; }
}

@keyframes cu-aurora-azul {
    0%   { transform: rotate(-16deg) translate3d(0, 0, 0)             scale(1, 1)    skewX(0deg);  opacity: 0.8; }
    28%  { transform: rotate(-17.8deg) translate3d(-1.8vmax, 0.5vmax, 0) scale(0.96, 0.84) skewX(3deg);  opacity: 0.66; }
    53%  { transform: rotate(-14.6deg) translate3d(-2.6vmax, -0.5vmax, 0) scale(1.05, 1.3) skewX(-4deg); opacity: 1; }
    79%  { transform: rotate(-16.6deg) translate3d(-0.9vmax, -0.8vmax, 0) scale(1, 1.1)  skewX(2deg);  opacity: 0.88; }
    100% { transform: rotate(-16deg) translate3d(0, 0, 0)             scale(1, 1)    skewX(0deg);  opacity: 0.8; }
}

@media (max-width: 900px) {
    body.cu-body::before {
        background:
            radial-gradient(ellipse 30vmax 1.6vmax at 38% 27%, rgba(170, 245, 205, 0.40), transparent 72%),
            radial-gradient(ellipse 60vmax 7vmax at 40% 27%, rgba(0, 191, 99, 0.30), transparent 70%),
            radial-gradient(ellipse 50vmax 5vmax at 66% 25%, rgba(88, 140, 230, 0.26), transparent 70%);
        transform-origin: 45% 27%;
    }
    body.cu-body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.cu-body::before,
    body.cu-body::after { animation: none; }
}