/* ==========================================================================
   Componentes de marca
   --------------------------------------------------------------------------
   Piezas que existían en la landing y el portal no tenía. Son componentes del
   sistema, no de una página: cualquier pantalla puede usarlas.

   Primer archivo de components/. app.css todavía guarda el resto; se irán
   separando a medida que se toquen.
   ========================================================================== */

/* ---------- Eyebrow ----------
   La pastilla que va encima de un titular. Dice el estado de algo en una
   línea, sin robarle peso al título. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3-5);
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--border));
    background-color: rgb(var(--bg-elev));
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: rgb(var(--fg-muted));
    white-space: nowrap;
}
.eyebrow svg { width: 15px; height: 15px; stroke-width: 2.5; color: rgb(var(--accent)); }

/* El punto que late. Sólo para lo que está pasando ahora mismo: si late todo,
   no late nada. El anillo se expande y se desvanece; el punto se queda. */
.eyebrow-live {
    position: relative;
    display: inline-flex;
    width: 8px; height: 8px;
    flex-shrink: 0;
}
.eyebrow-live::before,
.eyebrow-live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: rgb(var(--accent));
}
.eyebrow-live::before {
    animation: pulse-ring 2.4s var(--ease) infinite;
}
@keyframes pulse-ring {
    0%        { transform: scale(.85); opacity: .55; }
    70%, 100% { transform: scale(1.7);  opacity: 0; }
}

/* ---------- Mark ----------
   El resaltador detrás de una palabra. El lima va de fondo y la palabra se
   queda en ink: lima como texto se lavaría sobre casi-blanco.

   inline-block con leading 1 evita que la caja crezca hasta el em completo
   de la fuente (~1.4em) y choque con la línea de arriba. El titular que lo
   use necesita interlineado de al menos 1.25. */
.mark {
    display: inline-block;
    border-radius: var(--radius-xs);
    background-color: rgb(var(--accent));
    color: rgb(var(--brand-ink));
    padding: 1px var(--space-1-5) 3px;
    line-height: 1;
    vertical-align: baseline;
}

/* ---------- Icon chip ----------
   Cuadrado de color sólido con el glifo en ink. Sólido y no un lavado pálido:
   un glifo lima sobre fondo lima claro no se lee. */
.icon-chip {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background-color: rgb(var(--accent));
    color: rgb(var(--brand-ink));
    transition: transform var(--dur) var(--ease);
}
.icon-chip svg { width: 21px; height: 21px; stroke-width: 2.3; }
.icon-chip-sm { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.icon-chip-sm svg { width: 18px; height: 18px; }

/* Los tres puntos del logo, como tintes de categoría. */
.icon-chip-lime { background-color: rgb(var(--brand-lime)); }
.icon-chip-blue { background-color: rgb(var(--brand-blue)); }
.icon-chip-red  { background-color: rgb(var(--brand-red)); }

.group:hover .icon-chip { transform: scale(1.05); }

/* ---------- Dot mark ----------
   Los tres puntos que dan nombre a la marca, reutilizados como firma. */
.dot-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-shrink: 0;
}
.dot-mark span {
    width: 6px; height: 6px;
    border-radius: var(--radius-full);
    display: block;
}
.dot-mark span:nth-child(1) { background: rgb(var(--brand-lime)); }
.dot-mark span:nth-child(2) { background: rgb(var(--brand-blue)); }
.dot-mark span:nth-child(3) { background: rgb(var(--brand-red)); }

/* ---------- Etiqueta de sección ----------
   Mayúsculas espaciadas. Nombra un bloque sin competir con los titulares. */
.section-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgb(var(--fg-subtle));
}

/* ---------- Regla ----------
   Una línea sólida de lado a lado se lee mucho más brillante de lo que su
   opacidad sugiere, sobre todo en oscuro. Ésta se desvanece en los extremos. */
.rule {
    height: 1px;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(var(--fg) / 0.12),
        transparent
    );
}

/* ---------- Pastilla de canal ----------
   Lo que está vivo se rellena de lima; lo que viene queda neutro y lo dice.
   Ser honesto sobre lo que todavía no existe también es diseño. */
.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--border));
    background-color: rgb(var(--bg-elev));
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgb(var(--fg));
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.channel-chip:hover { border-color: rgb(var(--fg) / 0.28); transform: translateY(var(--lift)); }
.channel-chip svg { width: 17px; height: 17px; stroke-width: 2.3; color: rgb(var(--fg-subtle)); }

.channel-chip.is-live {
    border-color: rgb(var(--accent) / 0.65);
    background-color: rgb(var(--accent) / 0.12);
}
.channel-chip.is-live:hover { border-color: rgb(var(--accent)); }
.channel-chip.is-live svg { color: rgb(var(--fg)); }

.channel-status {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: rgb(var(--fg) / 0.07);
    color: rgb(var(--fg-subtle));
}
.channel-chip.is-live .channel-status {
    background-color: rgb(var(--accent));
    color: rgb(var(--brand-ink));
}

/* ---------- Fila de confirmaciones ----------
   Los "Keep your number · Live in a week" de la landing. */
.check-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: rgb(var(--fg-muted));
}
.check-row > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.check-row svg { width: 17px; height: 17px; stroke-width: 2.5; color: rgb(var(--accent)); flex-shrink: 0; }

/* ---------- Entrada al hacer scroll ----------
   El contenido sube un poco al entrar en pantalla. Lo activa app.js con un
   IntersectionObserver; si el JS no corre, el contenido se ve igual, porque
   el estado visible es el de reposo. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .eyebrow-live::before { animation: none; }
}