/* =============================================================
   NIMBO — la portada, al dia
   =============================================================
   Va en su propio archivo y SOLO la carga index.html, a proposito.
   style.css lo comparten todas las paginas, y vocal-space es la
   pagina de destino de la campaña de Meta: cualquier cambio alli
   reinicia la medicion. Con esto aparte, la ficha de producto no
   recibe ni un byte distinto.

   Todo va acotado a body.portada para ganarle a style.css por
   especificidad sin un solo !important.

   DE DONDE SALE EL ESTILO
   De las laminas de marca (adlibs-wide/marketing) y de la interfaz
   del plugin, no de una plantilla. Una primera version llevaba
   pildoras con un punto brillante, degradados en el texto y halos
   naranjas, y Cristian la vio "muy IA": tenia razon, son los tics de
   cualquier pagina generada. Lo que hace a NIMBO reconocible es otra
   cosa:
     - colores planos, sin brillos ni halos;
     - el titular rotundo subrayado con una barra de color, como en
       las laminas ("UN DOUBLER CON ESTEROIDES." y su barra amarilla);
     - rotulos en mayusculas muy espaciadas ("VOCAL SPACE · NIMBO
       AUDIO" al pie de cada lamina);
     - esquinas casi rectas y lineas finas: la regla de style.css,
       "la profundidad la hacen capas, no sombras difusas".

   QUE MAS CAMBIA
   - Fuera VT323 de la portada: la letra pixelada era lo que mas la
     anclaba a otra epoca, y el plugin no rotula asi. No se descarga.
   - El plugin se ve: donde habia un emoji esta su interfaz.
   - Es una pagina de VENTAS: el texto sigue igual de legible y el
     boton de compra manda.

   QUE NO SE TOCA
   - Nada que pese o repinte en movil.
   - Las clases que usan los scripts (.interactive, .card, .btn,
     .object-reveal, .hero) siguen en su sitio.
   ============================================================= */

.portada {
    --mono-ui: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Los rotulos que eran VT323: en la sans, en mayusculas y muy
   espaciados, como el pie de las laminas. */
.portada .hero-kicker,
.portada .badge,
.portada .card-tag,
.portada .footer,
.portada .nav-link {
    font-family: var(--font);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* =============================================================
   ENCABEZADO
   ============================================================= */
.portada .nav-link {
    font-size: .72rem;
}

/* =============================================================
   BOTONES
   ============================================================= */
/* La sans y no la pixelada: un boton se lee, no se descifra. El
   relleno que sube desde abajo se queda: es el movimiento mecanico
   de la casa y no tiene nada de plantilla. */
.portada .btn {
    font-family: var(--font);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .06em;
    padding: .95rem 1.6rem;
}

.portada .btn .flecha {
    display: inline-block;
    transition: transform var(--t) var(--ease);
}

.portada .btn:hover .flecha {
    transform: translateX(3px);
}

/* =============================================================
   HERO
   ============================================================= */
/* El rotulo de arriba: una linea, en naranja, sin caja. Se probo
   como aviso de lo nuevo con un rotulo marcado y no convencio: le
   restaba peso al titular, que es lo que tiene que leerse primero. */
.portada .hero-kicker {
    font-size: .7rem;
    color: var(--accent);
    margin-bottom: 1.6rem;
}

/* El titular, rotundo y plano, con la barra debajo como en las
   laminas. En las laminas es amarilla, pero aqui va en naranja: se
   probo en amarillo y desentonaba, porque en la web todo lo demas que
   lleva color —el globo del titular, los botones, el rotulo de arriba,
   los titulos de seccion— es naranja. La forma es la de la marca; el
   color, el de la web. */
.portada .hero-title {
    font-size: clamp(2.6rem, 10.5vw, 6.6rem);
    line-height: .95;
    letter-spacing: -.04em;
    font-weight: 800;
    margin-bottom: 1.8rem;
}

.portada .hero-title::after {
    content: '';
    display: block;
    width: min(62%, 9.5em);
    height: .11em;
    margin-top: .32em;
    background: var(--accent);
    border-radius: 2px;
}

.portada .hero-sub {
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    line-height: 1.5;
    margin-bottom: 2.2rem;
}

/* Las etiquetas: una fila de texto separada por lineas finas, como
   el pie de las laminas. Sin cajas: en una version anterior cada una
   iba en su celda y la placa entera se veia como una hoja de calculo. */
.portada .badges {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 0;
    margin-top: 2.8rem;
    padding-top: 1.6rem;
}

.portada .badge {
    font-size: .66rem;
    line-height: 1.5;
    color: var(--text-3);
    padding: 0 1.2rem;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
}

.portada .badge:first-child {
    padding-left: 0;
    border-left: 0;
}

.portada .badge strong {
    font-weight: 600;
}

/* =============================================================
   SECCIONES
   ============================================================= */
.portada .section-title {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    letter-spacing: -.02em;
}

/* =============================================================
   LA TARJETA DEL PLUGIN
   ============================================================= */
/* Con un solo plugin a la venta, la tarjeta es el escaparate: un
   escenario negro con el plugin a la derecha, como en los anuncios, y
   lo que hace falta para decidir a la izquierda. Con dos o mas (cuando
   vuelvan los de <template>) cada una vuelve a su columna, porque solo
   la que lleva .card--escaparate se abre asi.

   El negro es el del fondo del render (#050501, medido en la imagen):
   con el gris de las otras tarjetas se veia el borde de la foto como
   un rectangulo pegado. */
.portada .card--escaparate {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    padding-right: 0;
    background: #050502;
    border-color: rgba(255, 255, 255, .06);
}

/* El efecto de luz que sigue al raton (style.css) en naranja se veia
   como una mancha sobre el negro del render. */
.portada .card--escaparate::before {
    display: none;
}

/* La imagen se funde por la izquierda y por abajo con el negro, para
   que el plugin parezca puesto en el escenario y no una foto encima. */
.portada .card-shot {
    order: 2;
    margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    transition: transform .6s var(--ease-out);
}

.portada .card-shot img {
    width: 100%;
    height: auto;
}

/* El mismo motivo que con .vc-shot en style.css: sobre el papel crema
   del plugin, el puntero de adorno (mix-blend difference) sale como un
   aro negro pegado al producto. Ahi manda el puntero del sistema. */
body:has(.card-shot:hover) .cursor,
body:has(.card-shot:hover) .cursor-follower {
    opacity: 0;
}

.portada .card--escaparate:hover .card-shot {
    transform: scale(1.02);
}

/* El escaparate no salta entero al pasar el raton: ya se mueve la
   imagen, y si se mueve todo la tarjeta parece suelta. */
.portada .card--escaparate:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .1);
}

/* NUEVO: un rotulo de texto en naranja, sin caja ni pildora. */
.portada .card-tag {
    font-size: .66rem;
    font-weight: 600;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.portada .card-tag--nuevo {
    color: var(--accent);
    background: none;
}

.portada .card--escaparate .card-tag {
    position: static;
    align-self: flex-start;
    margin-bottom: 1.1rem;
}

.portada .card-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -.03em;
    margin-bottom: .9rem;
}

.portada .card-desc {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

/* El precio: la cifra grande en mono, y la prueba gratis debajo en
   el verde del plugin, que es el color de "activo". Texto, no ficha. */
.portada .card-price {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-family: var(--mono-ui);
    font-size: 1.7rem;
    letter-spacing: -.01em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    margin-bottom: 1.4rem;
}

.portada .card-price small {
    font-family: var(--font);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
}

.portada .card--escaparate .btn {
    margin-top: 0;
    align-self: flex-start;
}

/* =============================================================
   PREGUNTAS
   ============================================================= */
/* Se quedan como lista con lineas finas, que es lo de la casa. Solo
   cambia el angulito por un + que gira, a la derecha y sin circulo. */
.portada .faq-item summary {
    justify-content: space-between;
}

.portada .faq-item summary::before {
    display: none;
}

.portada .faq-item summary::after {
    content: '+';
    flex: none;
    font: 300 1.5rem/1 var(--font);
    color: var(--accent);
    transition: transform var(--t) var(--ease);
}

.portada .faq-item[open] summary::after {
    transform: rotate(45deg);
}

.portada .faq-item p {
    padding-left: .25rem;
}

/* =============================================================
   PIE
   ============================================================= */
.portada .footer {
    font-size: .64rem;
}

.portada .footer-links {
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
}

/* =============================================================
   MOVIL
   ============================================================= */
@media (max-width: 760px) {

    /* La imagen arriba y el texto debajo: en el telefono se lee de
       arriba abajo, y lo primero que tiene que ver es el plugin. */
    .portada .card--escaparate {
        grid-template-columns: 1fr;
        padding: 0 1.25rem 1.5rem;
    }

    .portada .card-shot {
        order: 0;
        margin: 0 -1.25rem;
        -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%);
        mask-image: linear-gradient(to top, transparent 0, #000 22%);
    }

    /* Las etiquetas de dos en dos, sin lineas: partidas por filas, una
       linea al principio de la segunda fila quedaba colgando. */
    .portada .badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .9rem 1rem;
    }

    .portada .badge,
    .portada .badge:first-child {
        padding: 0;
        border-left: 0;
    }

    /* TODO lo de arriba del boton se aprieta para que el boton quepa en
       la primera pantalla, por encima del cartel del pixel: en el
       navegador de Instagram son unos 390x664 y el cartel tapa desde
       los ~509 px. Con la barra amarilla puesta y sin estos ajustes el
       boton acababa en 542 y quedaba medio tapado. Si se añade algo al
       hero, volver a medirlo ahi. */
    .portada .hero {
        padding-top: 1rem;
    }

    .portada .hero-kicker {
        margin-bottom: 1.2rem;
        font-size: .64rem;
        letter-spacing: .1em;
    }

    .portada .hero-title {
        font-size: clamp(2.3rem, 11.5vw, 3.3rem);
        margin-bottom: 1.2rem;
    }

    .portada .hero-sub {
        margin-bottom: 1.5rem;
    }

}