/* ==========================================================================
   Cannis — sitio institucional · black premium (PD-105)
   --------------------------------------------------------------------------
   La capa que lleva el sitio al lenguaje de los ingresos, los paneles y la
   Sede (PD-102 y PD-103): negro neutro, Geist, tarjetas de borde fino con
   una luz neutra que sigue al cursor y una jerarquía tipográfica más fuerte.
   A diferencia de los ingresos y los paneles, la web principal NO lleva
   estelas (vuelta 2 de PD-105). Va DESPUÉS de institucional.css (ver el
   layout): pisa tokens y unas pocas reglas, no reescribe los componentes. Lo
   que no se nombra acá sigue como estaba, ahora sobre los tokens nuevos.

   Reglas del sitio que se mantienen:
     · el reset tipográfico sigue en `:where()` (acá no se toca);
     · el revelado al scroll sigue siendo un fundido, con guard `html.js`;
     · el menta sigue siendo EL acento (uno solo); lo que cambia es el fondo,
       los grises y el botón principal, que pasa a ser de tinta clara;
     · con `prefers-reduced-motion`, el bloque del final de institucional.css
       ya apaga todas las animaciones.

   Sólo colores de token. Contraste medido por píxel (ver el registro de
   cambios de PD-105): si cambiás un valor, volvé a medir.
   ========================================================================== */

/* Geist (SIL OFL 1.1, public/fonts/geist/LICENSE.txt), autoalojada: el sitio
   deja de pedir Inter a Google. La URL va sin versionar, igual que la
   precarga del layout, para que el navegador no la baje dos veces. */
@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;
}

:root {
    --w-font-titulos: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --w-font-texto: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* El "navy" de la 3.0 pasa a ser el negro de la marca nueva. Los nombres
       se conservan porque los usan todos los componentes. */
    --w-navy: #0a0c10;           /* el fondo */
    --w-navy-2: #11141a;         /* un escalón arriba: barras, superficies sólidas */
    --w-navy-3: #1c2129;         /* bordes y realces */
    --w-menta-claro: #7ff6b8;    /* el hover del acento */
    --w-blanco: #f2f4f7;         /* el botón principal */
    --w-blanco-hover: #dfe3e9;

    --w-bg: var(--w-navy);
    --w-surface: rgba(255, 255, 255, 0.03);
    --w-surface-2: rgba(255, 255, 255, 0.055);
    --w-border: rgba(255, 255, 255, 0.08);
    --w-border-fuerte: rgba(255, 255, 255, 0.18);

    --w-text: #f2f4f7;
    --w-text-soft: rgba(242, 244, 247, 0.74);
    --w-muted: rgba(242, 244, 247, 0.56);
    --w-ink: var(--w-navy);

    --w-radio: 22px;
    --w-radio-sm: 14px;
    --w-sombra: 0 30px 80px rgba(0, 0, 0, 0.6);

    /* La luz que sigue al cursor sobre las tarjetas (calma.js la mueve): neutra,
       no del acento, para que el menta quede para lo que hay que mirar. */
    --w-luz: rgba(255, 255, 255, 0.06);
}

body.w-body {
    font-size: 17px;
    font-feature-settings: 'ss01' on;
    letter-spacing: -0.006em;
}
::selection { background: var(--w-menta); color: var(--w-ink); }

/* ===== Títulos =====
   Una sola letra: lo que separa un título del texto es el tamaño, el peso y
   la interletra. Más grandes y más apretados que en la 3.0. */
:where(.w-body) :where(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -0.03em; }
.w-titulo {
    font-size: clamp(2.1rem, 4.8vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}
.w-titulo--chico { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.w-bajada { color: var(--w-text-soft); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; }
.w-cabecera { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

/* El rótulo chico arriba de cada título se lee a plantilla.
     · En las SECCIONES (los que no llevan `w-reveal`) se saca: el título ya
       dice de qué se trata.
     · En la cabecera de una PÁGINA interior (`w-eyebrow w-reveal`: «Legales»,
       «Tutoriales», «Documentación») orienta, así que queda, pero como texto
       quieto en el acento, sin la pastilla.
     · El del hero queda como está: es un enlace al trámite. */
.w-eyebrow:not(.w-eyebrow--link):not(.w-reveal) { display: none; }
.w-eyebrow.w-reveal:not(.w-eyebrow--link) {
    padding: 0;
    background: none;
    border-radius: 0;
    letter-spacing: 0.08em;
}

.w-seccion { padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.w-seccion--apretada { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ===== Fondo =====
   Negro casi puro, sin estelas (vuelta 2: la web principal no las lleva).
   Sólo una luz neutra muy baja arriba, para que el negro no sea plano. */
.w-fondo {
    background:
        radial-gradient(80rem 36rem at 50% -14%, rgba(255, 255, 255, 0.05), transparent 62%),
        var(--w-navy);
}

/* ===== Barra =====
   Transparente arriba y vidrio negro al bajar. */
.w-nav.w-nav--pegada {
    background: rgba(10, 12, 16, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ===== Botones =====
   El principal es de tinta clara sobre el negro, como en los paneles: se lee
   más premium que el menta lleno y deja al menta como acento. El contraste
   del texto sobre el botón es negro sobre casi blanco (más de 17:1). */
.w-btn {
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform var(--w-transicion), background var(--w-transicion),
                border-color var(--w-transicion), color var(--w-transicion), box-shadow 0.25s ease;
}
.w-btn--primario {
    background: var(--w-blanco);
    color: var(--w-ink);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px -10px rgba(82, 242, 156, 0.35);
}
.w-btn--primario:hover { background: var(--w-blanco-hover); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 40px -12px rgba(82, 242, 156, 0.5); }
.w-btn--fantasma { border-color: var(--w-border-fuerte); }
.w-btn--fantasma:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--w-text); background: var(--w-surface-2); }
.w-btn--texto:hover { color: var(--w-menta-claro); }
.w-btn:active { transform: scale(0.98); }
.w-btn:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 3px; }

/* ===== Hero =====
   El video sigue (sólo en computadora, como en la 3.0); el velo pasa a negro.
   El título crece y se aprieta. */
.w-hero__velo {
    background:
        linear-gradient(90deg, rgba(6, 10, 20, 0.98) 0%, rgba(6, 10, 20, 0.86) 34%, rgba(6, 10, 20, 0.4) 70%, rgba(6, 10, 20, 0.2) 100%),
        linear-gradient(180deg, rgba(6, 10, 20, 0.75) 0%, transparent 24%, transparent 66%, var(--w-navy) 100%);
}
.w-hero::before {
    background:
        radial-gradient(55rem 40rem at 78% 28%, rgba(255, 255, 255, 0.04), transparent 60%),
        var(--w-navy);
}
.w-hero__titulo {
    font-size: clamp(2.4rem, min(7.8vw, 9vh), 5.9rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
    max-width: 15ch;
}
/* El acento del título: el menta en degradé hacia un menta más claro. Con el
   texto recortado sobre el fondo, el contraste se mide contra el negro. */
.w-hero__titulo em {
    background: linear-gradient(100deg, var(--w-menta) 10%, var(--w-menta-claro) 60%, #c9fbe0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.w-hero__bajada { color: var(--w-text-soft); }

/* El video sigue, pero sobrio: menos saturado y más oscuro, para que la
   portada se lea negra y el título mande. */
.w-hero__video { opacity: 0.55; filter: saturate(0.55) brightness(0.85) contrast(1.05); }

/* ===== Cifras del hero =====
   Grandes, tabulares, separadas por filetes finos y no por cajas. */
.w-contador__valor {
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.w-contador + .w-contador { border-left: 1px solid var(--w-border); padding-left: var(--w-s3); }
@media (max-width: 760px) { .w-contador + .w-contador { border-left: 0; padding-left: 0; } }

/* ===== Tarjetas =====
   Superficie apenas más clara que el fondo, borde fino, esquinas amplias y
   una luz del acento que sigue al cursor (calma.js escribe --mx / --my en la
   tarjeta). Sin JS, la luz queda arriba al centro, quieta. */
.w-producto,
.w-acceso,
.w-paso,
.w-publico,
.w-pilar,
.w-tarjeta,
.w-integracion,
.w-repro {
    position: relative;
    border: 1px solid var(--w-border);
    background-color: var(--w-surface);
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--w-luz), transparent 45%);
    transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.w-repro {
    background-image:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--w-luz), transparent 45%),
        radial-gradient(38rem 22rem at 88% 20%, var(--w-repro-brillo), transparent 62%);
}
.w-producto:hover,
.w-acceso:hover,
.w-publico:hover,
.w-tarjeta:hover,
.w-integracion:hover {
    border-color: var(--w-border-fuerte);
    background-color: var(--w-surface-2);
    transform: translateY(-2px);
}
.w-producto__nombre { letter-spacing: -0.035em; }
.w-producto__ir { transition: gap 0.2s ease, color 0.2s ease; }
.w-producto:hover .w-producto__ir { color: var(--w-menta); }

/* Las preguntas: más aire y el signo como un detalle. */
.w-faq details { background: var(--w-surface); border-color: var(--w-border); }
.w-faq details[open] { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }
.w-faq summary { font-weight: 600; letter-spacing: -0.01em; }

/* La cita: grande, liviana, centrada. */
.w-cita { letter-spacing: -0.03em; }

/* ===== Pie ===== */
.w-footer { background: #07080b; border-top: 1px solid var(--w-border); }

/* ===== Revelado =====
   Sigue siendo un fundido (la 3.0 sacó el desplazamiento a propósito), un
   poco más largo y con una curva más suave. */
.js .w-reveal { transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* ===== Detalles de la portada (PD-105) ===== */

/* Los pasos: un filete del acento arriba de cada uno, que se apaga hacia la
   derecha, como un recorrido. (El ::before ya es el número del paso.) */
.w-paso { position: relative; overflow: hidden; }
.w-paso::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--w-s4);
    right: var(--w-s4);
    height: 1px;
    background: linear-gradient(90deg, var(--w-menta), transparent);
    opacity: 0.7;
}

/* La cita: el bloque de la frase, con un borde fino y una luz neutra arriba. */
.w-cita {
    position: relative;
    border: 1px solid var(--w-border);
    background:
        radial-gradient(40rem 16rem at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
        var(--w-surface);
}
.w-cita__texto { font-weight: 600; letter-spacing: -0.045em; }

/* ==========================================================================
   Cannis Pro en la portada (PD-105, vuelta 2) · partials/cannis-pro
   El lanzamiento del módulo de cultivo: cabecera centrada con el logo, el
   antes y el después junto a una ficha de planta de ejemplo, lo que incluye
   en una grilla de filetes, los dos planes y por qué conviene.
   ========================================================================== */

.w-pro { position: relative; }
.w-pro::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 40rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60rem 28rem at 50% 0%, rgba(255, 255, 255, 0.045), transparent 70%);
}

/* ── Qué es ── */
.w-pro__cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 50rem;
    margin: 0 auto clamp(3rem, 7vw, 5rem);
    text-align: center;
}
.w-pro__nuevo {
    display: inline-flex;
    margin-bottom: var(--w-s3);
    padding: 0.38rem 0.9rem;
    border: 1px solid rgba(82, 242, 156, 0.35);
    border-radius: 999px;
    background: rgba(82, 242, 156, 0.08);
    color: var(--w-menta);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.w-pro__logo { margin-bottom: var(--w-s2); }
.w-pro__logo .w-marca { --w-marca-alto: 150px; }
.w-pro__titulo { font-size: clamp(2.6rem, 6.4vw, 4.8rem); letter-spacing: -0.055em; line-height: 0.98; margin-bottom: var(--w-s3); }
.w-pro__bajada { max-width: 46rem; margin-inline: auto; }
.w-pro__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--w-s2); margin-top: var(--w-s4); }

/* ── El antes y el después, y la ficha ── */
.w-pro__escena {
    display: grid;
    grid-template-columns: 1fr minmax(0, 0.92fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-bottom: clamp(4rem, 9vw, 7rem);
}
.w-pro__contraste { display: grid; gap: var(--w-s4); }
.w-pro__rotulo {
    margin-bottom: var(--w-s2);
    color: var(--w-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.w-pro__columna--pro .w-pro__rotulo { color: var(--w-menta); }
.w-pro__lista { display: grid; gap: 0.7rem; }
.w-pro__lista li { color: var(--w-text-soft); font-size: 1.02rem; line-height: 1.5; }
.w-pro__columna--hoy .w-pro__lista li { padding-left: 1.1rem; position: relative; color: var(--w-muted); }
.w-pro__columna--hoy .w-pro__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.45rem;
    height: 1px;
    background: var(--w-muted);
}
.w-pro__columna--pro .w-pro__lista li { display: flex; gap: 0.6rem; color: var(--w-text); }
.w-pro__columna--pro .w-ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: var(--w-menta); }

/* La ficha: una ventana del producto, con borde de filete en degradé. */
.w-pro__ficha {
    margin: 0;
    border-radius: var(--w-radio);
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 40%, rgba(82, 242, 156, 0.28));
    box-shadow: var(--w-sombra);
}
.w-pro__ficha-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.75rem 1rem;
    border-radius: calc(var(--w-radio) - 1px) calc(var(--w-radio) - 1px) 0 0;
    background: #0e1116;
    border-bottom: 1px solid var(--w-border);
}
.w-pro__ficha-barra span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.w-pro__ficha-barra em { margin-left: auto; color: var(--w-muted); font-size: 0.76rem; font-style: normal; }
.w-pro__ficha-cuerpo {
    display: grid;
    gap: var(--w-s3);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border-radius: 0 0 calc(var(--w-radio) - 1px) calc(var(--w-radio) - 1px);
    background: linear-gradient(180deg, #0d1015, #0a0c10);
}
.w-pro__ficha-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--w-s3); }
.w-pro__ficha-id { display: block; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.w-pro__ficha-estado {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(82, 242, 156, 0.1);
    color: var(--w-menta);
    font-size: 0.78rem;
    font-weight: 600;
}
.w-pro__qr {
    display: grid;
    grid-template-columns: repeat(11, 6px);
    gap: 1px;
    padding: 6px;
    border-radius: 8px;
    background: var(--w-blanco);
}
.w-pro__qr-celda { width: 6px; height: 6px; }
.w-pro__qr-celda.es-llena { background: var(--w-navy); }
.w-pro__ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem var(--w-s3); margin: 0; }
.w-pro__ficha-datos dt { color: var(--w-muted); font-size: 0.76rem; }
.w-pro__ficha-datos dd { margin: 0.1rem 0 0; font-size: 0.95rem; font-weight: 500; }
.w-pro__historial { position: relative; display: grid; gap: 0.85rem; padding-top: var(--w-s2); border-top: 1px solid var(--w-border); }
.w-pro__historial li { display: flex; gap: 0.75rem; align-items: flex-start; }
.w-pro__historial p { margin: 0; display: grid; gap: 0.1rem; }
.w-pro__historial strong { font-size: 0.92rem; font-weight: 500; }
.w-pro__historial p span { color: var(--w-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.w-pro__punto { flex: none; width: 8px; height: 8px; margin-top: 0.4rem; border-radius: 50%; background: var(--w-menta); box-shadow: 0 0 0 4px rgba(82, 242, 156, 0.12); }
.w-pro__historial li + li .w-pro__punto { background: rgba(255, 255, 255, 0.35); box-shadow: none; }
.w-pro__ficha-pie { display: flex; gap: 0.5rem; align-items: center; margin: 0; color: var(--w-text-soft); font-size: 0.84rem; }
.w-pro__ficha-pie .w-ico { width: 1rem; height: 1rem; color: var(--w-menta); flex: none; }

/* ── Qué incluye: una grilla de filetes, sin cajas ── */
.w-pro__bloque { margin-bottom: clamp(4rem, 9vw, 7rem); }
.w-pro__bloque:last-child { margin-bottom: 0; }
.w-pro__subtitulo { margin-bottom: var(--w-s4); font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.04em; text-align: center; }
.w-pro__funciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-border);
    overflow: hidden;
}
.w-pro__funcion { padding: clamp(1.4rem, 3vw, 2rem); background: var(--w-navy); transition: background-color 0.25s ease; }
.w-pro__funcion:hover { background: #0e1116; }
.w-pro__funcion-ico {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: var(--w-s3);
    border: 1px solid var(--w-border);
    border-radius: 12px;
    color: var(--w-menta);
}
.w-pro__funcion-ico .w-ico { width: 1.15rem; height: 1.15rem; }
.w-pro__funcion-titulo { margin-bottom: 0.4rem; font-size: 1.08rem; letter-spacing: -0.02em; }
.w-pro__funcion-texto { margin: 0; color: var(--w-text-soft); font-size: 0.95rem; line-height: 1.55; }

/* ── Los planes ── */
.w-pro__planes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-s3); max-width: 58rem; margin: 0 auto var(--w-s5); }
.w-pro__plan {
    padding: clamp(1.6rem, 3vw, 2.2rem);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
/* El destacado: borde en degradé del acento (dos fondos, uno recortado al relleno y otro al borde). */
.w-pro__plan--destacado {
    border-color: transparent;
    background:
        linear-gradient(#0d1015, #0d1015) padding-box,
        linear-gradient(160deg, rgba(82, 242, 156, 0.7), rgba(255, 255, 255, 0.08) 45%, rgba(82, 242, 156, 0.25)) border-box;
}
.w-pro__plan-nombre { margin-bottom: 0.3rem; font-size: 1.5rem; letter-spacing: -0.035em; }
.w-pro__plan--destacado .w-pro__plan-nombre { color: var(--w-menta); }
.w-pro__plan-para { margin: 0 0 var(--w-s3); color: var(--w-text-soft); }
.w-pro__plan-lista { display: grid; gap: 0.6rem; }
.w-pro__plan-lista li { display: flex; gap: 0.6rem; font-size: 0.97rem; }
.w-pro__plan-lista .w-ico { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--w-menta); }

/* ── Por qué conviene ── */
.w-pro__puentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s4); max-width: 64rem; margin: 0 auto var(--w-s5); }
.w-pro__puente { padding-top: var(--w-s3); border-top: 1px solid var(--w-border-fuerte); }
.w-pro__puente-titulo { margin-bottom: 0.35rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.w-pro__puente-texto { margin: 0; color: var(--w-text-soft); font-size: 0.95rem; }

.w-pro__cierre { display: flex; flex-direction: column; align-items: center; gap: var(--w-s2); text-align: center; }
.w-pro__cierre-nota { margin: 0; color: var(--w-muted); font-size: 0.9rem; }

/* La etiqueta «Nuevo» de la tarjeta del bento: la misma pastilla que «Pronto». */
.w-producto__nuevo { margin-right: var(--w-s2); }

@media (max-width: 960px) {
    .w-pro__escena { grid-template-columns: 1fr; }
    .w-pro__funciones { grid-template-columns: 1fr 1fr; }
    .w-pro__puentes { grid-template-columns: 1fr; gap: var(--w-s3); }
}
@media (max-width: 640px) {
    .w-pro__funciones, .w-pro__planes { grid-template-columns: 1fr; }
    .w-pro__logo .w-marca { --w-marca-alto: 112px; }
    .w-pro__ficha-datos { grid-template-columns: 1fr; }
}

/* Los avisos del hero (vuelta 2): el atajo al trámite y, al lado, el lanzamiento de Cannis Pro. */
.w-hero__avisos { display: flex; flex-wrap: wrap; gap: var(--w-s2); margin-bottom: var(--w-s3); }
.w-hero__avisos .w-eyebrow { margin-bottom: 0; }
.w-hero__aviso-pro {
    border-color: var(--w-border-fuerte);
    background: rgba(255, 255, 255, 0.04);
    color: var(--w-text);
    letter-spacing: 0.04em;
}
.w-hero__aviso-pro:hover { background: rgba(255, 255, 255, 0.08); }
.w-hero__aviso-etiqueta {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--w-menta);
    color: var(--w-ink);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   Vidrio (PD-105, vuelta 3)
   --------------------------------------------------------------------------
   Un poco de glasmorfismo, con criterio: el vidrio necesita algo detrás para
   tener sentido, así que el fondo suma tres luces de color quietas, grandes y
   muy bajas (menta y un azul frío). No son estelas: no tienen trazo ni se
   mueven. Las superficies que van de vidrio son las que agrupan: tarjetas,
   banners, preguntas, el panel de cifras del hero y la sección de Cannis Pro.

   La receta, una sola, en tokens:
     · relleno translúcido con un degradé apenas más claro arriba;
     · desenfoque y saturación de lo que hay detrás (backdrop-filter);
     · borde fino y un reflejo de 1 px en el canto de arriba (inset).
   Sin backdrop-filter (navegadores viejos) queda el relleno translúcido, que
   igual se lee: el contraste del texto se midió sobre el vidrio.
   ========================================================================== */

:root {
    --w-vidrio: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    --w-vidrio-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    --w-vidrio-borde: rgba(255, 255, 255, 0.11);
    --w-vidrio-filtro: blur(18px) saturate(150%);
    --w-vidrio-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}

/* Las luces del fondo: quietas, enormes y bajas. Fijas, así cada sección
   tiene algo de color detrás de su vidrio. */
.w-fondo {
    background:
        radial-gradient(46rem 34rem at 88% 8%, rgba(82, 242, 156, 0.11), transparent 70%),
        radial-gradient(42rem 32rem at 4% 52%, rgba(88, 140, 230, 0.10), transparent 70%),
        radial-gradient(40rem 30rem at 82% 96%, rgba(82, 242, 156, 0.07), transparent 70%),
        radial-gradient(80rem 36rem at 50% -14%, rgba(255, 255, 255, 0.05), transparent 62%),
        var(--w-navy);
}

/* Las superficies de vidrio. */
.w-producto,
.w-acceso,
.w-paso,
.w-publico,
.w-pilar,
.w-tarjeta,
.w-integracion,
.w-faq details,
.w-cita,
.w-pro__plan,
.w-pro__funciones {
    border-color: var(--w-vidrio-borde);
    background-color: transparent;
    background-image:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--w-luz), transparent 45%),
        var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
}
.w-producto:hover,
.w-acceso:hover,
.w-publico:hover,
.w-tarjeta:hover,
.w-integracion:hover {
    background-color: transparent;
    background-image:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--w-luz), transparent 45%),
        var(--w-vidrio-hover);
    border-color: rgba(255, 255, 255, 0.2);
}
.w-faq details[open] { background-image: var(--w-vidrio-hover); border-color: rgba(255, 255, 255, 0.18); }

/* Los banners (Repronline, Advisorgs) conservan su brillo de color, ahora sobre vidrio. */
.w-repro {
    border-color: var(--w-vidrio-borde);
    background-color: transparent;
    background-image:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--w-luz), transparent 45%),
        radial-gradient(38rem 22rem at 88% 20%, var(--w-repro-brillo), transparent 62%),
        var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
}

/* La grilla de «Lo que incluye» de Cannis Pro: las celdas transparentes sobre
   el vidrio del contenedor, separadas por filetes. */
.w-pro__funciones { gap: 0; background-color: transparent; }
.w-pro__funcion { background: transparent; border-right: 1px solid var(--w-vidrio-borde); border-bottom: 1px solid var(--w-vidrio-borde); }
.w-pro__funcion:nth-child(3n) { border-right: 0; }
.w-pro__funcion:nth-last-child(-n + 3) { border-bottom: 0; }
.w-pro__funcion:hover { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 960px) {
    .w-pro__funcion:nth-child(3n) { border-right: 1px solid var(--w-vidrio-borde); }
    .w-pro__funcion:nth-child(2n) { border-right: 0; }
    .w-pro__funcion:nth-last-child(-n + 3) { border-bottom: 1px solid var(--w-vidrio-borde); }
    .w-pro__funcion:nth-last-child(-n + 1) { border-bottom: 0; }
}
@media (max-width: 640px) {
    .w-pro__funcion { border-right: 0 !important; }
}

/* El plan destacado: vidrio con el borde en degradé del acento. */
.w-pro__plan--destacado {
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(20, 26, 24, 0.82), rgba(13, 16, 21, 0.82)) padding-box,
        linear-gradient(160deg, rgba(82, 242, 156, 0.75), rgba(255, 255, 255, 0.1) 45%, rgba(82, 242, 156, 0.3)) border-box;
}

/* La ficha de ejemplo de Cannis Pro: cuerpo de vidrio oscuro. */
.w-pro__ficha-barra { background: rgba(14, 17, 22, 0.7); }
.w-pro__ficha-cuerpo {
    background: linear-gradient(180deg, rgba(14, 17, 22, 0.72), rgba(10, 12, 16, 0.86));
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
}

/* Las cifras del hero, en un solo panel de vidrio en lugar del filete suelto. */
.w-contadores {
    padding: clamp(1.1rem, 2.6vh, 1.75rem) clamp(1.1rem, 2.4vw, 1.75rem);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: var(--w-radio);
    background: var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
}

/* La barra, un vidrio más espeso al bajar. */
.w-nav.w-nav--pegada {
    background: rgba(10, 12, 16, 0.6);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

/* ===== Detalles premium ===== */

/* El botón principal: un brillo interno arriba y una sombra suave abajo. */
.w-btn--primario {
    background-image: linear-gradient(180deg, #ffffff, var(--w-blanco));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(10, 12, 16, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 12px 32px -12px rgba(82, 242, 156, 0.4);
}
.w-btn--primario:hover { background-image: linear-gradient(180deg, #ffffff, var(--w-blanco-hover)); }

/* El secundario (fantasma), de vidrio. */
.w-btn--fantasma {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Los títulos grandes, un punto más livianos: con Geist el 600 en 5rem pesa demasiado. */
.w-hero__titulo, .w-pro__titulo { font-weight: 560; }
.w-titulo { font-weight: 580; }

/* El teléfono no gana nada con tanto desenfoque y le cuesta: menos blur. */
@media (max-width: 760px) {
    :root { --w-vidrio-filtro: blur(10px) saturate(140%); }
}

/* ==========================================================================
   PD-107 · selector de idioma, aviso de idioma y efectos premium
   --------------------------------------------------------------------------
   Todo lo que se mueve acá se apaga con prefers-reduced-motion (bloque final),
   y nada esconde contenido: sin JS los títulos están nítidos y quietos.
   ========================================================================== */

/* ── Selector ES / EN: una píldora de vidrio con dos posiciones ── */
.w-idioma {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--w-vidrio-borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.w-idioma__opcion {
    min-width: 2.1rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    color: var(--w-text-soft);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.w-idioma__opcion:hover { color: var(--w-text); }
.w-idioma__opcion.es-activo {
    background: rgba(255, 255, 255, 0.92);
    color: var(--w-navy);
    box-shadow: inset 0 1px 0 #fff, 0 2px 10px -4px rgba(82, 242, 156, 0.6);
}
.w-idioma__opcion:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 2px; }
@media (max-width: 420px) {
    .w-idioma__opcion { min-width: 1.85rem; padding: 0.3rem 0.4rem; font-size: 0.7rem; }
}

/* ── El aviso de idioma: una franja fina de vidrio bajo la barra ── */
.w-aviso-idioma {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--w-vidrio-borde);
    background: rgba(255, 255, 255, 0.035);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.88rem;
}
.w-aviso-idioma__cont {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding-block: 0.6rem;
    color: var(--w-text-soft);
}
.w-aviso-idioma__link { color: var(--w-menta); font-weight: 600; }
.w-aviso-idioma__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.w-aviso-idioma__link--suave { color: var(--w-text-soft); font-weight: 400; }

/* ==========================================================================
   PD-110 · «El Apple de las aplicaciones cannábicas»
   --------------------------------------------------------------------------
   La dirección de diseño de TODA la familia (el sitio, las páginas de
   producto, Repronline y Advisorgs heredan esta hoja). Sale lo que se veía
   genérico —el grano, las luces de color del fondo, el vidrio con resplandor,
   la luz que sigue al cursor, la luz que gira por los bordes, la inclinación
   3D, los brillos en botones y títulos, el desenfoque de entrada— y queda:

     · un solo fondo, igual en todos los productos: desde PD-113, el azul
       medianoche con su luz azul suave (antes negro liso);
     · superficies sólidas y sobrias, un escalón sobre el fondo, sin borde
       visible ni sombra;
     · tipografía grande y segura (Geist), mucho aire, alineación precisa;
     · un solo acento por producto (Cannis: menta; Repronline: azul;
       Advisorgs: champagne), que va en enlaces, íconos y el botón;
     · movimiento sólo al aparecer: un fundido con una subida corta.

   Esto va al final y gana sobre los bloques de PD-105 que quedan arriba.
   ========================================================================== */

:root {
    /* PD-113: la base es el azul medianoche (el que tuvo Repronline en PD-108), igual para toda la familia. */
    --w-navy: #060a14;
    --w-navy-2: #0c1322;
    --w-navy-3: #18233a;
    --w-bg: #060a14;
    --w-ink: #060a14;

    --w-text: #f5f7fb;
    --w-text-soft: rgba(232, 240, 252, 0.76);
    --w-muted: #8d97ab;

    /* Las superficies: un escalón de azul sobre el fondo, sólidas. Los nombres «vidrio» se conservan porque los usan todas las hojas. */
    --w-surface: #0c1322;
    --w-surface-2: #111a2d;
    --w-border: rgba(140, 185, 255, 0.08);
    --w-border-fuerte: rgba(140, 185, 255, 0.2);
    --w-vidrio: linear-gradient(#0c1322, #0c1322);
    --w-vidrio-hover: linear-gradient(#111a2d, #111a2d);
    --w-vidrio-borde: rgba(140, 185, 255, 0.1);
    --w-vidrio-filtro: none;
    --w-vidrio-sombra: none;
    --w-luz: transparent;
    --w-sombra: none;

    --w-radio: 24px;
    --w-radio-sm: 16px;
}

/* ── El fondo: azul medianoche con su luz azul suave (PD-113). Sin grilla, sin grano, sin textura. ── */
.w-fondo,
.w-body .w-fondo {
    background:
        radial-gradient(62rem 40rem at 88% -12%, rgba(51, 153, 255, 0.24), transparent 62%),
        radial-gradient(48rem 32rem at -6% 34%, rgba(0, 102, 204, 0.16), transparent 70%),
        radial-gradient(44rem 30rem at 60% 112%, rgba(82, 242, 157, 0.07), transparent 70%),
        #060a14;
}
.w-fondo::before,
.w-fondo::after { content: none; display: none; }
body.w-body { background: #060a14; }

/* ── La barra: negra translúcida, como la de un sistema operativo. ── */
.w-nav.w-nav--pegada {
    background: rgba(6, 10, 20, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 rgba(140, 185, 255, 0.12);
}

/* ── Títulos: grandes, apretados y en un peso firme. ── */
.w-hero__titulo,
.w-portada__titulo,
.w-pro__titulo { font-weight: 600; letter-spacing: -0.045em; }
.w-titulo { font-weight: 600; letter-spacing: -0.035em; }
/* El acento del título: el color del producto, plano. Sin degradé ni brillo. */
.w-hero__titulo em,
.w-portada__titulo em,
.w-titulo em {
    font-style: normal;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--w-menta);
    animation: none;
}

/* ── Superficies: sólidas, sin borde visible, sin sombra, sin luz. ── */
.w-producto,
.w-acceso,
.w-paso,
.w-publico,
.w-pilar,
.w-tarjeta,
.w-integracion,
.w-faq details,
.w-cita,
.w-pro__plan,
.w-pro__funciones,
.w-repro {
    border-color: transparent;
    background: var(--w-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.w-producto:hover,
.w-acceso:hover,
.w-publico:hover,
.w-tarjeta:hover,
.w-integracion:hover {
    border-color: transparent;
    background: var(--w-surface-2);
    transform: none;
}
.w-faq details[open] { background: var(--w-surface-2); border-color: transparent; }
.w-pro__plan--destacado { background: var(--w-surface); border: 1px solid var(--w-menta); }
.w-paso::after { content: none; }
.w-cita { background: var(--w-surface); }

/* ── Las cifras de la portada: sólo los números, sin panel ni filetes. ── */
.w-contadores {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.w-contador + .w-contador { border-left: 0; padding-left: 0; }
.w-contador__valor { font-weight: 600; letter-spacing: -0.05em; }

/* ── Botones: píldoras planas. El principal, claro en Cannis (cada producto pone su acento). ── */
.w-btn { border-radius: 999px; }
.w-btn--primario {
    background: var(--w-text);
    background-image: none;
    color: #060a14;
    box-shadow: none;
}
.w-btn--primario:hover { background: #ffffff; background-image: none; box-shadow: none; }
.w-btn--fantasma {
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.w-btn--fantasma:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); }

/* ── El pie: el mismo negro, separado por un filete. ── */
.w-footer { background: #060a14; border-top: 1px solid rgba(140, 185, 255, 0.1); }

/* ── Movimiento: sólo al aparecer, un fundido con una subida corta. ── */
.js .w-reveal {
    transform: translateY(18px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.js .w-reveal.visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .w-reveal { transform: none; transition: none; }
}