/* =========================
   FlowSignals - app.css
   (reorganizado, mismo look & feel)
========================= */

/* =========================
   Global / Reset
========================= */
html { scroll-behavior: smooth; }

/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Listas */
ul, ol { list-style: none; padding-left: 0; }

/* =========================
   Base
========================= */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #0B0F1A;
    background-attachment: fixed;
    color: #F5F7FA;
    line-height: 1.6;
    letter-spacing: 0.01em;
    position: relative;
    min-height: 100vh;
}

/* =========================
   Starfield — Layer 1: Nebulosas
========================= */
.starfield-nebulae {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 18% 8%, rgba(107, 92, 255, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 82% 6%, rgba(63, 140, 255, 0.11) 0%, transparent 55%),
        radial-gradient(ellipse 80% 65% at 48% 88%, rgba(107, 92, 255, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 87% 55%, rgba(180, 100, 255, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse 55% 50% at 12% 62%, rgba(63, 100, 220, 0.06) 0%, transparent 50%);
}

/* =========================
   Starfield — Layer 2: Galaxias (espirales tenues)
========================= */
.starfield-galaxies {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.starfield-galaxies::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 250px;
    top: 8%;
    right: 12%;
    background:
        radial-gradient(ellipse 100% 60% at 50% 50%, rgba(107, 92, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 70% 35% at 55% 45%, rgba(180, 140, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 20% at 52% 48%, rgba(200, 180, 255, 0.05) 0%, transparent 50%);
    transform: rotate(-25deg);
    filter: blur(18px);
    opacity: 0.85;
}

.starfield-galaxies::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 200px;
    bottom: 15%;
    left: 8%;
    background:
        radial-gradient(ellipse 100% 55% at 50% 50%, rgba(63, 140, 255, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 65% 30% at 48% 52%, rgba(107, 120, 255, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 35% 18% at 50% 50%, rgba(160, 150, 255, 0.04) 0%, transparent 50%);
    transform: rotate(35deg);
    filter: blur(22px);
    opacity: 0.75;
}

/* =========================
   Starfield — Layer 3: Estrellas (alta densidad)
========================= */
.starfield-stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.starfield-stars::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    box-shadow:
        120px 45px 0 rgba(255,255,255,0.5),
        280px 22px 0 rgba(255,255,255,0.35),
        450px 68px 0 rgba(255,255,255,0.45),
        620px 35px 0 rgba(255,255,255,0.4),
        780px 80px 0 rgba(255,255,255,0.55),
        950px 18px 0 rgba(255,255,255,0.3),
        1120px 55px 0 rgba(255,255,255,0.5),
        1300px 42px 0 rgba(255,255,255,0.35),
        1480px 75px 0 rgba(255,255,255,0.45),
        1650px 28px 0 rgba(255,255,255,0.4),
        1820px 62px 0 rgba(255,255,255,0.5),
        85px 140px 0 rgba(255,255,255,0.4),
        230px 165px 0 rgba(255,255,255,0.55),
        390px 128px 0 rgba(255,255,255,0.3),
        560px 152px 0 rgba(255,255,255,0.45),
        710px 175px 0 rgba(255,255,255,0.5),
        880px 135px 0 rgba(255,255,255,0.35),
        1050px 168px 0 rgba(255,255,255,0.4),
        1220px 142px 0 rgba(255,255,255,0.55),
        1400px 158px 0 rgba(255,255,255,0.3),
        1580px 132px 0 rgba(255,255,255,0.45),
        1750px 172px 0 rgba(255,255,255,0.4),
        65px 260px 0 rgba(255,255,255,0.45),
        200px 285px 0 rgba(255,255,255,0.35),
        365px 248px 0 rgba(255,255,255,0.5),
        520px 272px 0 rgba(255,255,255,0.4),
        690px 295px 0 rgba(255,255,255,0.55),
        850px 255px 0 rgba(255,255,255,0.3),
        1020px 278px 0 rgba(255,255,255,0.45),
        1190px 242px 0 rgba(255,255,255,0.5),
        1360px 268px 0 rgba(255,255,255,0.35),
        1530px 292px 0 rgba(255,255,255,0.4),
        1700px 252px 0 rgba(255,255,255,0.45),
        110px 380px 0 rgba(255,255,255,0.4),
        260px 355px 0 rgba(255,255,255,0.5),
        420px 395px 0 rgba(255,255,255,0.35),
        580px 368px 0 rgba(255,255,255,0.45),
        740px 342px 0 rgba(255,255,255,0.55),
        910px 388px 0 rgba(255,255,255,0.3),
        1080px 352px 0 rgba(255,255,255,0.5),
        1250px 378px 0 rgba(255,255,255,0.4),
        1420px 345px 0 rgba(255,255,255,0.45),
        1590px 392px 0 rgba(255,255,255,0.35),
        1760px 362px 0 rgba(255,255,255,0.5),
        55px 475px 0 rgba(255,255,255,0.45),
        220px 498px 0 rgba(255,255,255,0.35),
        380px 462px 0 rgba(255,255,255,0.5),
        540px 485px 0 rgba(255,255,255,0.4),
        700px 508px 0 rgba(255,255,255,0.55),
        870px 468px 0 rgba(255,255,255,0.3),
        1040px 492px 0 rgba(255,255,255,0.45),
        1200px 458px 0 rgba(255,255,255,0.5),
        1380px 488px 0 rgba(255,255,255,0.35),
        1550px 472px 0 rgba(255,255,255,0.4),
        1720px 505px 0 rgba(255,255,255,0.45),
        95px 580px 0 rgba(255,255,255,0.4),
        250px 558px 0 rgba(255,255,255,0.5),
        410px 595px 0 rgba(255,255,255,0.35),
        570px 565px 0 rgba(255,255,255,0.45),
        730px 588px 0 rgba(255,255,255,0.55),
        900px 548px 0 rgba(255,255,255,0.3),
        1070px 575px 0 rgba(255,255,255,0.5),
        1240px 598px 0 rgba(255,255,255,0.4),
        1410px 555px 0 rgba(255,255,255,0.45),
        1570px 585px 0 rgba(255,255,255,0.35),
        1740px 565px 0 rgba(255,255,255,0.5),
        75px 680px 0 rgba(255,255,255,0.45),
        240px 655px 0 rgba(255,255,255,0.35),
        395px 698px 0 rgba(255,255,255,0.5),
        555px 672px 0 rgba(255,255,255,0.4),
        715px 645px 0 rgba(255,255,255,0.55),
        885px 695px 0 rgba(255,255,255,0.3),
        1055px 662px 0 rgba(255,255,255,0.45),
        1225px 685px 0 rgba(255,255,255,0.5),
        1390px 648px 0 rgba(255,255,255,0.35),
        1560px 692px 0 rgba(255,255,255,0.4),
        1730px 668px 0 rgba(255,255,255,0.45),
        130px 780px 0 rgba(255,255,255,0.4),
        290px 758px 0 rgba(255,255,255,0.5),
        460px 795px 0 rgba(255,255,255,0.35),
        630px 768px 0 rgba(255,255,255,0.45),
        790px 742px 0 rgba(255,255,255,0.55),
        960px 788px 0 rgba(255,255,255,0.3),
        1130px 755px 0 rgba(255,255,255,0.5),
        1300px 778px 0 rgba(255,255,255,0.4),
        1470px 748px 0 rgba(255,255,255,0.45),
        1640px 792px 0 rgba(255,255,255,0.35),
        1810px 762px 0 rgba(255,255,255,0.5);
    animation: twinkle-slow 8s ease-in-out infinite alternate;
}

.starfield-stars::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow:
        180px 38px 1px rgba(255,255,255,0.7),
        490px 95px 1px rgba(255,255,255,0.6),
        820px 52px 1px rgba(255,255,255,0.75),
        1150px 78px 1px rgba(255,255,255,0.65),
        1500px 45px 1px rgba(255,255,255,0.7),
        150px 195px 1px rgba(255,255,255,0.6),
        480px 218px 1px rgba(255,255,255,0.75),
        760px 175px 1px rgba(255,255,255,0.65),
        1100px 198px 1px rgba(255,255,255,0.7),
        1450px 225px 1px rgba(255,255,255,0.6),
        320px 315px 1px rgba(255,255,255,0.75),
        650px 338px 1px rgba(255,255,255,0.65),
        980px 305px 1px rgba(255,255,255,0.7),
        1320px 328px 1px rgba(255,255,255,0.6),
        1680px 345px 1px rgba(255,255,255,0.75),
        240px 448px 1px rgba(255,255,255,0.65),
        570px 425px 1px rgba(255,255,255,0.7),
        900px 468px 1px rgba(255,255,255,0.6),
        1230px 435px 1px rgba(255,255,255,0.75),
        1560px 458px 1px rgba(255,255,255,0.65),
        110px 555px 1px rgba(255,255,255,0.7),
        440px 578px 1px rgba(255,255,255,0.6),
        770px 545px 1px rgba(255,255,255,0.75),
        1090px 568px 1px rgba(255,255,255,0.65),
        1420px 535px 1px rgba(255,255,255,0.7),
        350px 678px 1px rgba(255,255,255,0.6),
        680px 645px 1px rgba(255,255,255,0.75),
        1010px 698px 1px rgba(255,255,255,0.65),
        1340px 665px 1px rgba(255,255,255,0.7),
        1670px 688px 1px rgba(255,255,255,0.6),
        200px 785px 1px rgba(255,255,255,0.75),
        530px 748px 1px rgba(255,255,255,0.65),
        860px 792px 1px rgba(255,255,255,0.7),
        1190px 758px 1px rgba(255,255,255,0.6),
        1520px 788px 1px rgba(255,255,255,0.75);
    animation: twinkle-med 6s ease-in-out infinite alternate;
}

@keyframes twinkle-slow {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes twinkle-med {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.75; }
}

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

@media (max-width: 768px) {
    .starfield-galaxies::before {
        width: 280px;
        height: 160px;
        opacity: 0.5;
    }
    .starfield-galaxies::after {
        width: 220px;
        height: 130px;
        opacity: 0.45;
    }
}

main {
    position: relative;
    z-index: 1;
}

/* =========================
   Layout / Contenedor
========================= */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* =========================
   Tipografía
========================= */
h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

h2 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    line-height: 1.25;
    color: #E6E9F2;
}

.subtitle {
    font-size: 1.2rem;
    color: #9AA0B2; /* Mist Gray */
    margin-bottom: 2.5rem;
    line-height: 1.7;
    letter-spacing: 0.015em;
}

.tagline {
    color: #9AA0B2;
    margin-bottom: 2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* =========================
   Botones / CTA
========================= */
.btn-primary {
    background-color: #6B5CFF; /* Violet Signal */
    color: #FFFFFF;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(107, 92, 255, 0.25);
}

.btn-primary:hover {
    background-color: #5A4CE0;
    box-shadow: 0 14px 36px rgba(107, 92, 255, 0.35);
}

/* Fix Chrome: eliminar subrayado en <a class="btn-primary"> */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited {
    text-decoration: none !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
    outline: none;
}

a.btn-primary:focus-visible {
    outline: 2px solid rgba(107, 92, 255, 0.6);
    outline-offset: 4px;
}

/* CTA intermedio (solo mobile) */
.mobile-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.btn-mobile-cta {
    display: none; /* por defecto, oculto (desktop) */
}

/* =========================
   Secciones (base)
========================= */
.section { width: 100%; }
.section-soft { opacity: 0.95; }
.section-closing { text-align: center; }

/* Separadores suaves entre secciones */
.section:not(.section-hero):not(.section-closing) {
    position: relative;
}

.section:not(.section-hero):not(.section-closing)::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
    margin-bottom: 3rem;
}

/* Paneles suaves (para secciones bajo hero) */
.section:not(.section-hero):not(.section-closing) {
    background: rgba(255, 255, 255, 0.025);
    margin: 2.5rem auto;
    border-radius: 18px;
}

.section:not(.section-hero):not(.section-closing) .container {
    padding-top: 0.5rem;
    padding-bottom: 3.5rem;
}

/* Evitar caja dentro de caja en secciones con tarjetas */
#how-it-works.section,
#benefits.section {
    background: transparent;
    margin: 0 auto;
    border-radius: 0;
}

#how-it-works.section .container,
#benefits.section .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* =========================
   HERO
========================= */
.section-hero {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 15% 25%, rgba(107, 92, 255, 0.22), transparent 60%),
        radial-gradient(800px 400px at 85% 20%, rgba(63, 140, 255, 0.18), transparent 55%);
}

/* Capa extra sutil */
.section-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 400px at 50% 10%, rgba(107, 92, 255, 0.12), transparent 60%);
    pointer-events: none;
}

.section-hero .container { max-width: 720px; }
.section-hero h1 { letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(107, 92, 255, 0.12); }
.section-hero .subtitle { margin-left: auto; margin-right: auto; max-width: 560px; }
.section-hero .btn-primary { margin-top: 1rem; }

/* Indicador de scroll bajo el hero */
.hero-scroll-hint {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.hero-scroll-hint a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #9AA0B2;
    text-decoration: none;
}

.hero-scroll-hint a:hover {
    color: #F5F7FA;
}

.hero-scroll-icon svg {
    width: 20px;
    height: 20px;
    opacity: 0.9;
    animation: scroll-bounce 1.6s infinite;
}

@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(2px); }
}

/* Wordmark dentro del hero */
.hero-brand--wordmark {
    margin-bottom: 2.2rem;
    text-align: center;
}

.hero-wordmark {
    font-size: 3.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #F5F7FA;
}

.hero-wordmark .word-signals { color: #6B5CFF; }

.hero-underline {
    color: rgba(63, 140, 255, 0.75);
    display: inline-flex;
    margin-top: 0.65rem;
}

.hero-underline svg {
    width: 270px;
    height: auto;
}

/* =========================
   Cards (How it works / Beneficios / etc.)
========================= */
.cards-vertical {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.card {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 18px;
    padding: 1.4rem 1.4rem;
    text-align: center;
}

.cards-vertical--soft .card { background: rgba(255, 255, 255, 0.028); }

.card-kicker {
    color: rgba(107, 92, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.card-text {
    color: #9AA0B2;
    font-size: 1rem;
}

.card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.card-icon svg {
    width: 32px;
    height: 32px;
    stroke: rgba(245, 247, 250, 0.55);
    stroke-width: 1.8;
    fill: none;
}

.profile-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .cards-vertical {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

/* =========================
   Canales - Minimal
========================= */
.section-channels { text-align: center; opacity: 0.9; }

.channels-label {
    color: #9AA0B2;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.channels-inline {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0;
}

.channels-logos {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    padding: 0;
    margin-top: 1rem;
}

.channel {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #E6E9F2;
}

.channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.channel-icon svg {
    width: 22px;
    height: 22px;
    fill: rgba(245, 247, 250, 0.55);
}

.channel-name {
    color: rgba(245, 247, 250, 0.75);
    font-size: 0.98rem;
}

.channels-payments {
    margin-top: 2rem;
    text-align: center;
}

.payment {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.payment-icon svg {
    width: 22px;
    height: 22px;
    fill: rgba(245, 247, 250, 0.55);
}

.payment-name {
    color: rgba(245, 247, 250, 0.75);
    font-size: 0.95rem;
}

.payment-logo {
    margin-bottom: 20px;
}

.channels-inline li { font-size: 1rem; color: #E6E9F2; }
.channels-inline .muted { color: #9AA0B2; font-size: 0.95rem; }

/* =========================
   Header (internas)
========================= */
.site-header {
    position: relative;
    z-index: 20;
}

/* Anula el padding gigante del .container SOLO en el header */
.site-header .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Header finito con altura real */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 1.5rem;
    margin-bottom: -40px;
}

/* User menu en el header */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.4rem 0.5rem 0.4rem 0.9rem;
    color: #E6E9F2;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(107, 92, 255, 0.35);
}

.user-menu-name {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.user-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(107, 92, 255, 0.18);
    color: #C9C1FF;
    font-size: 1rem;
    line-height: 1;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: #141828;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.user-menu-dropdown[hidden] {
    display: none;
}

.user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: #E6E9F2;
    font-size: 0.92rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.user-menu-item:hover {
    background: rgba(107, 92, 255, 0.15);
    color: #F5F7FA;
}

.user-menu-item--button {
    color: #C9C1FF;
}

.user-menu-item--button:hover {
    background: rgba(107, 92, 255, 0.15);
    color: #F5F7FA;
}

/* Logo con presencia */
.brand-img {
    height: 80px;
    width: 290px;
    display: block;
}

/* =========================
   Footer
========================= */
footer { opacity: 0.7; text-align: center; }
footer .container { padding-top: 3rem; padding-bottom: 3rem; }

.footer-nav {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.footer-nav a {
    color: #9AA0B2;
    text-decoration: none;
}

.footer-nav a:hover { color: #F5F7FA; }

.footer-social { margin-bottom: 0.75rem; }

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #9AA0B2;
    text-decoration: none;
    line-height: 1;
}

.footer-social-link:hover { color: #F5F7FA; }

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-social-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.footer-social-name { font-size: 0.9rem; }

@media (max-width: 768px) {
    /* Footer – mejor lectura en mobile */
  .footer-nav {
    flex-direction: column;
    gap: 0.6rem;
  }

  .footer-nav span[aria-hidden="true"] {
    display: none;
  }

  .footer-nav a {
    font-size: 0.95rem;
  }

  footer .container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

}


/* =========================
   Signup page
========================= */
.section-signup { text-align: center; }
.signup-container { max-width: 640px; }

.profile-container {
    max-width: 900px;
}

@media (min-width: 1200px) {
    .profile-container {
        max-width: 1060px;
    }
}

.signup-form {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

.field { display: grid; gap: 0.5rem; text-align: left; }

.field-label {
    color: #9AA0B2;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.input {
    width: 100%;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #F5F7FA;
}

.input::placeholder { color: rgba(154, 160, 178, 0.7); }

.input:focus {
    outline: none;
    border-color: rgba(107, 92, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(107, 92, 255, 0.12);
}

.signup-note {
    margin-top: 1.25rem;
    color: #9AA0B2;
    font-size: 0.95rem;
}

/* =========================
   FAQ – bloques horizontales
========================= */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: 3rem;
}

.faq-item {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item .card-title {
    margin-bottom: 0.6rem;
    font-size: 1.25rem;
}

.faq-item .card-text {
    max-width: 640px;
    color: #9AA0B2;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* =========================
   Responsive (Mobile)
========================= */
@media (max-width: 768px) {
    .container { padding: 3rem 1.25rem; }

    /* Header */
    .header-inner {
        min-height: 52px;
        padding: 0;
        gap: 0.75rem;
    }

    .brand-img {
        height: 60px;
        width: 218px;
    }

    .user-menu-trigger { padding: 0.35rem 0.4rem 0.35rem 0.75rem; }
    .user-menu-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Hero (mobile-first) */
    .section-hero {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }

    .section-hero .btn-primary { margin-top: 0.75rem; }
    .hero-scroll-hint { margin-top: 1.75rem; }

    /* Tipografía */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }

    .subtitle {
        font-size: 1rem;
        margin-bottom: 1.8rem;
    }

    /* CTA */
    .btn-primary { width: 100%; max-width: 320px; }

    .hero-wordmark { font-size: 2.775rem; }
    .hero-underline svg { width: 240px; }

    /* Texto más cómodo en secciones internas (mobile) */
    .section.section-soft .container {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .cards-vertical { gap: 0.9rem; }
    .card { padding: 1.1rem 1.1rem; }
    .card-title { font-size: 1.1rem; }
    .card-text { font-size: 0.95rem; line-height: 1.7; }

    /* CTA intermedio (solo mobile) */
    .btn-mobile-cta {
        display: inline-flex;
        width: 100%;
        max-width: 320px;
    }

    #how-it-works .mobile-cta { margin-top: 2rem; }

    /* Títulos centrados en mobile */
    h1, h2 { text-align: center; }
    .card-title { text-align: center; }

    /* (quedó comentado en tu original; lo mantengo por compatibilidad) */
    /* .brand-underline svg { width: 110px; } */
}


/* =========================
   Admin Layout
========================= */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 240px;
    background-color: #0E1324;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 2rem 1.5rem;
}

.admin-brand {
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

.admin-subtitle {
    display: block;
    font-size: 0.85rem;
    color: #9AA0B2;
    margin-top: 0.2rem;
}

.admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav li {
    margin-bottom: 0.75rem;
}

.admin-nav a {
    display: block;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    color: #9AA0B2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-nav a:hover {
    background-color: rgba(107, 92, 255, 0.08);
    color: #F5F7FA;
}

.admin-nav a.is-active {
    background-color: #6B5CFF;
    color: #FFFFFF;
}

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header del admin */
.admin-header {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1.75rem 0;
}

.admin-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.admin-breadcrumb {
    font-size: 0.85rem;
    color: #9AA0B2;
    margin-bottom: 0.3rem;
}

.admin-page-title {
    font-size: 1.6rem;
    font-weight: 500;
}

/* Contenido del admin */
.admin-content {
    padding: 2.5rem 0 3rem 0;
}

.admin-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.admin-section {
    margin-bottom: 2.5rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-top: 1rem;
}

.admin-table th {
    text-align: left;
    color: #9AA0B2;
    font-weight: 500;
    padding: .6rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.admin-table td {
    padding: .85rem .75rem;
    color: #E6E9F2;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-alert {
    padding: .85rem 1rem;
    border-radius: 10px;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.admin-alert-success {
    background: rgba(52,211,153,.08);
    border: 1px solid rgba(52,211,153,.3);
    color: #34d399;
}

.admin-alert-error {
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.3);
    color: #f87171;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: .85rem;
    color: #9AA0B2;
    margin-bottom: .4rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: .6rem .75rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #E6E9F2;
    font-size: .9rem;
}

.form-hint {
    display: block;
    font-size: .78rem;
    color: #9AA0B2;
    margin-top: .3rem;
    opacity: .75;
}

/* =========================
   Admin Dashboard KPIs
========================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.kpi-card {
    background-color: #111628;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}

.kpi-label {
    font-size: 0.9rem;
    color: #9AA0B2;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 600;
}


/* =========================
   Admin Auth
========================= */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-header {
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.auth-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.auth-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
}

.auth-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 2.5rem;
    display: flex;
    justify-content: center;
}

.auth-container {
    width: 100%;
    max-width: 420px;
}

.auth-card {
    background-color: #111628;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.auth-card h1 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.auth-errors {
    background-color: rgba(255, 99, 132, 0.12);
    border: 1px solid rgba(255, 99, 132, 0.4);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.auth-field label {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: #9AA0B2;
}

.auth-field input[type="email"],
.auth-field input[type="password"] {
    background-color: #0B0F1A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    color: #F5F7FA;
    font-size: 0.95rem;
    outline: none;
}

.auth-field input[type="email"]:focus,
.auth-field input[type="password"]:focus {
    border-color: #6B5CFF;
}

.auth-remember {
    font-size: 0.9rem;
}

.auth-remember input {
    margin-right: 0.4rem;
}

.auth-actions {
    margin-top: 1rem;
    text-align: right;
}

.inspector-filters {
    display: flex;
    gap: 1.5rem;
    align-items: end;
    flex-wrap: wrap;
}

.inspector-filters label {
    font-size: 0.85rem;
    color: #9AA0B2;
    margin-bottom: 0.3rem;
    display: block;
}

.inspector-filters select,
.inspector-filters input[type="date"] {
    background-color: #0B0F1A;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.6rem 1rem;
    color: #F5F7FA;
}

.admin-box {
    background-color: #0B0F1A;
    border-radius: 12px;
    padding: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.message-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.message-card {
    background-color: #111628;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.message-slot {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9AA0B2;
    margin-bottom: 0.75rem;
}

.message-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;        /* respeta saltos de línea pero corta */
    word-break: break-word;       /* corta palabras largas tipo URLs */
    max-height: 260px;            /* para que no rompa el layout */
    overflow-y: auto;             /* scroll interno si es muy largo */
    background: transparent;      /* sin fondo extra, usa el de la card */
}


.inspector-day-nav {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.inspector-day-label {
    font-size: 0.95rem;
    color: #9AA0B2;
}

/* Botón secundario */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: #F5F7FA;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover {
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.35);
}

.admin-box-compact {
    font-size: 0.9rem;
    white-space: normal;
}

.message-plan {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #CBD1E5;
}

.message-plan-line {
    margin-bottom: 0.2rem;
}

/* nav inferior (puede cambiar solo margenes) */
.inspector-day-nav-bottom {
    margin-top: 1.5rem;
}

/* =========================
   Pricing
========================= */
.cards-pair {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 900px) {
    .cards-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
}

.card-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #F5F7FA;
    margin: 0.4rem 0 0.85rem;
    letter-spacing: -0.01em;
}

.card .btn-primary {
    margin-top: 1.25rem;
}

.card--highlight {
    position: relative;
    border: 1px solid rgba(107, 92, 255, 0.45);
    background: rgba(107, 92, 255, 0.08);
    box-shadow: 0 18px 40px rgba(107, 92, 255, 0.15);
}

.card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6B5CFF;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(107, 92, 255, 0.4);
}

@media (min-width: 900px) {
    .cards-vertical--2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pricing-group-title {
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 3rem;
    margin-bottom: 0.25rem;
    color: #E6E9F2;
    text-align: center;
}

.pricing-footnote {
    text-align: center;
    margin-top: 2rem;
}

.card-price-suffix {
    font-size: 0.95rem;
    font-weight: 400;
    color: #9AA0B2;
    margin-left: 0.25rem;
}

.price-original {
    color: #9AA0B2;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.85em;
    margin-right: 0.5rem;
    opacity: 0.75;
}

.price-discount-note {
    color: #C9C1FF;
    font-size: 0.8rem;
    margin: 0 0 1.25rem;
    letter-spacing: 0.02em;
}