/* ====================================================================
   CATALOGO DE PAQUETES  ·  femasport.management/paquetes
   --------------------------------------------------------------------
   DE DONDE SALE EL TONO. De app.femasport.management/paquetes. Y lo que
   hacia fina aquella pagina NO era el color ni el radio de las esquinas:
   era la TIPOGRAFIA y el AIRE.

     · Plus Jakarta Sans en peso 200 para los titulares, en MINUSCULAS.
       Una condensada en mayuscula -Oswald- se lee como un cartel de
       estadio. En peso 200 y minuscula se lee como una firma. Ese era
       todo el secreto, y es lo que la primera version no entendio.

     · Mayusculas SOLO en rotulos diminutos (9-11 px con mucho espaciado).
       Ahi la mayuscula no grita, ordena. Es lo que hacia `.c-level`.

     · Aire: 44 px de relleno, 34 bajo la descripcion, 36 bajo el precio,
       42 bajo la lista. Si algun dia hay que apretar esta hoja, esto es
       lo ultimo que se toca.

   NADA DE backdrop-filter EN LO QUE SE MUEVE. La version anterior ponia
   `backdrop-filter: blur(10px)` en la ficha Y le animaba el `transform`
   al pasar el raton. El navegador tiene entonces que volver a muestrear
   el fondo en cada fotograma de la animacion, y mientras lo hace la
   capa se queda en blanco: la ficha «se desaparecia». El cristal se
   consigue igual con un degradado translucido, que no cuesta una capa
   de composicion por ficha -y aqui hay catorce.
   ==================================================================== */

/* ====================================================================
   EL TITULAR DE LA PAGINA
   Se redefine aqui, no en la hoja de la pagina, porque es el mismo
   cambio de tono que el catalogo y conviene que viajen juntos.
   ==================================================================== */
.page-header { text-align: center; margin-bottom: 58px; }

.page-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(2.1rem, 5vw, 4rem) !important;
    font-weight: 200 !important;
    text-transform: none !important;
    letter-spacing: -.03em !important;
    line-height: 1.12 !important;
    color: #fff !important;
    text-shadow: none !important;
}
.page-title strong { font-weight: 600; color: #fff; }
/* La regla vieja pintaba un degradado dorado sobre el <span> del titular.
   Ya no hay <span>, pero si alguien reintroduce uno, que no reviva. */
.page-title span {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
}

/* --------------------------------------------------- los ganchos
   La portada no pedia nada. Estas son las dos unicas acciones que
   existen -ver los planes, o hablar con alguien-, y conviene que esten
   en el primer pantallazo. El primario es el que no cuesta nada al
   visitante; hablar va en segundo lugar porque compromete mas. */
.page-acciones {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 14px; margin-top: 34px;
}
.pa-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 11px; text-decoration: none;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}
.pa-btn:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }
.pa-btn i { font-size: 1rem; }
.pa-btn--primario {
    background: var(--gold-fema, #C1BA8A);
    border-color: var(--gold-fema, #C1BA8A);
    color: var(--navy-core, #141C2F);
}
.pa-btn--primario:hover {
    background: var(--gold-bright, #EAE3B3);
    border-color: var(--gold-bright, #EAE3B3);
    color: var(--navy-core, #141C2F);
}

.page-subtitle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(.9rem, 1.4vw, 1.02rem) !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, .58) !important;
    max-width: 620px !important;
    margin: 26px auto 0 !important;
}

/* ====================================================================
   EL PUNTERO
   --------------------------------------------------------------------
   La hoja de la pagina escondia el puntero del sistema para dibujar uno
   propio que nunca se implemento: los dos divs que lo formaban se
   quedaban parados en la esquina porque no habia JavaScript que los
   siguiera. La pagina se quedaba sin puntero en todas partes menos
   sobre los <button>. Devuelto el del sistema, aqui se le dan sus
   formas: la mano donde se hace clic, la barra donde se escribe.
   ==================================================================== */
a[href], button, label[for], summary,
[role="button"], [role="tab"], [onclick] {
    cursor: pointer;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
textarea, [contenteditable="true"] {
    cursor: text;
}
button[disabled], .cm-pagar[disabled] { cursor: not-allowed; }

/* ====================================================================
   LA CABECERA
   --------------------------------------------------------------------
   Era una caja dorada de esquina 4 px con el texto en mayuscula a peso
   700 y 3 px de espaciado, el selector de idioma dentro de otra caja, y
   el logo dando un brinco con `scale` al pasar por encima. Cuatro cosas
   que gritan a la vez.

   Pasa al idioma de la app: nada de cajas, filos de un pixel, minuscula
   y peso ligero. Lo que se mueve es la flecha, no el boton entero.
   ==================================================================== */
header {
    height: 84px !important;
    padding: 0 clamp(20px, 5vw, 54px) !important;
    background: rgba(8, 12, 21, .74) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    /* El filo era dorado al 10% y teñia toda la linea. Blanco al 5,5%
       separa sin llamar la atencion. */
    border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
}

/* El lado izquierdo: logo, un filo, y donde estas. Antes el logo iba
   suelto contra el borde y en medio quedaba un vacio enorme -en el
   telefono la cabecera parecia sin terminar. */
.head-izq { display: flex; align-items: center; gap: 16px; min-width: 0; }

.head-filo {
    width: 1px; height: 22px; flex-shrink: 0;
    background: rgba(255, 255, 255, .12);
}
.head-seccion {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .72rem; font-weight: 400; letter-spacing: .1em;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.header-logo-img {
    width: clamp(40px, 4.2vw, 54px) !important;
    filter: none !important;
    opacity: .92;
    transition: opacity .35s ease !important;
}
/* El logo saltaba con scale(1.08) y subia 2 px. Un logo que brinca no es
   fino; que se encienda, si. */
.header-logo-container:hover .header-logo-img {
    transform: none !important;
    opacity: 1;
}

.header-tools { gap: 26px !important; }

/* ------------------------------------------------------- los idiomas */
.lang-selector {
    background: none !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    padding: 0 24px 0 0 !important;
    gap: 0 !important;
}
.lang-btn {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: .6rem !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    color: rgba(255, 255, 255, .36) !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
    position: relative;
    transition: color .3s ease !important;
}
.lang-btn:hover { color: rgba(255, 255, 255, .8) !important; }
.lang-btn.active { background: none !important; color: #fff !important; }
/* El idioma activo se marca con un filo, no con un bloque dorado. */
.lang-btn::after {
    content: ""; position: absolute; left: 50%; bottom: 1px;
    transform: translateX(-50%); width: 0; height: 1px;
    background: var(--gold-fema, #C1BA8A);
    transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.lang-btn.active::after { width: 16px; }

/* --------------------------------------------------- volver al portal */
.back-btn {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .68) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    gap: 11px !important;
    position: relative;
    transition: color .35s ease !important;
}
.back-btn i {
    font-size: .82rem !important;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}
/* El filo que crece de derecha a izquierda, en el sentido del regreso. */
.back-btn::after {
    content: ""; position: absolute; right: 0; bottom: 2px;
    width: 0; height: 1px;
    background: var(--gold-bright, #EAE3B3);
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.back-btn:hover {
    background: none !important;
    box-shadow: none !important;
    color: var(--gold-bright, #EAE3B3) !important;
}
.back-btn:hover::after { width: 100%; }
/* Lo que se mueve es la flecha: apunta hacia donde lleva. */
.back-btn:hover i { transform: translateX(-5px) !important; }

@media (prefers-reduced-motion: reduce) {
    .back-btn:hover i { transform: none !important; }
}

@media (max-width: 768px) {
    header {
        height: 68px !important;
        padding: 0 16px !important;
        /* Sin desenfoque en el telefono: la hoja de la pagina ya lo
           apagaba a proposito por rendimiento, y el mio se lo estaba
           reponiendo. Un fondo solido tapa igual y no cuesta una capa
           que se recompone en cada desplazamiento. */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0a0e18 !important;
    }
    .head-izq { gap: 12px; min-width: 0; flex: 1 1 auto; }
    .head-seccion { font-size: .68rem; letter-spacing: .06em; }
    .header-logo-img { width: 36px !important; }

    .header-tools { gap: 0 !important; flex-shrink: 0; }
    /* Los idiomas se ocultan por espacio, asi que el filo divisorio
       sobraria. */
    .lang-selector { display: none !important; }
    /* El texto de volver SI se queda: cabe de sobra y una flecha suelta
       no dice a donde lleva. */
    .back-btn span { display: inline !important; }
    .back-btn { font-size: .64rem !important; gap: 8px !important; }
}

/* Por debajo de 360 px la seccion y el enlace de volver se pelean por el
   ancho. Gana el enlace, que es una accion; la seccion es informativa. */
@media (max-width: 360px) {
    .head-filo, .head-seccion { display: none; }
}

/* ====================================================================
   EL VELO DE SALIDA
   --------------------------------------------------------------------
   Sustituye al telon que caia al pulsar «Volver al portal»: tardaba
   1,6 segundos en animarse ANTES de empezar a cargar el destino, y
   mostraba el logo con la frase «Volviendo a la base...».

   Una transicion de salida tiene un solo trabajo: tapar el parpadeo
   entre una pagina y la siguiente. 260 ms lo hacen. Mas que eso ya no
   es transicion, es espera.
   ==================================================================== */
.velo-salida {
    position: fixed; inset: 0; z-index: 999999;
    pointer-events: none;
    background: #0a0e18;
    opacity: 0;
    transition: opacity .26s cubic-bezier(.4, 0, .2, 1);
}
.velo-salida.on { opacity: 1; }

/* ====================================================================
   LOS OTROS DOS TITULARES DE LA PAGINA
   Quedaban en Oswald condensada a 2,5 y 3 rem en mayusculas, justo
   encima y debajo del catalogo. Con el titular principal ya en Plus
   Jakarta la pagina hablaba a dos voces, y la vieja se notaba el doble
   por contraste. Se alinean aqui.
   ==================================================================== */

/* El FAQ. En el HTML pone «Preguntas Frecuentes» en minuscula: eran las
   mayusculas del CSS. Quitando `text-transform` se recupera entero. */
.faq-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
    font-weight: 200 !important;
    text-transform: none !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
    margin-bottom: 42px !important;
}

/* «CREATOR AUDIT» es un nombre de producto y se queda en mayusculas
   -ademas, estan escritas asi en el HTML y en el diccionario de
   idiomas, no las pone el CSS. Lo que cambia es el porte: a 3 rem en
   condensada era un cartel; a 1,6 rem con mucho espaciado es una marca. */
.ai-lab-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem) !important;
    font-weight: 300 !important;
    letter-spacing: .3em !important;
    color: #fff !important;
}
.ai-lab-sub {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
}
.success-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 300 !important;
    font-size: 1.5rem !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

/* ====================================================================
   LA SECCION
   ==================================================================== */
.catalogo {
    max-width: 1260px;
    margin: 0 auto;
    padding: 20px 20px 40px;
    position: relative;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    /* El ancla #planes no queda debajo de la cabecera fija. */
    scroll-margin-top: 108px;

    /* `clip` y no `hidden`: las manchas del fondo se salen por el costado
       y abririan barra horizontal en toda la pagina. `hidden` las cortaria
       igual, pero crea un contenedor de desplazamiento y la barra de
       grupos dejaria de quedarse pegada. `clip` recorta sin crearlo. */
    overflow-x: clip;
    overflow-y: visible;
}

/* AQUI NO VA NINGUNA MANCHA DE LUZ, y es deliberado.
   Habia dos -una dorada arriba a la izquierda, una blanca abajo a la
   derecha-, ambas de 150 px de desenfoque. Pero la pagina YA trae su
   propio resplandor centrado (.bg-glow, 864 px) mas un radial en el
   body mas el grano: sumando las mias eran CINCO capas de luz
   superpuestas, y las dos mias estaban descentradas (left -12%,
   right -10%), asi que rompian la simetria del resplandor que ya
   habia. El resultado no se leia como atmosfera sino como una mancha
   sucia, y en pantallas de 8 bits un degradado grande y de poco
   contraste ademas se escalona a la vista.

   Una sola fuente de luz, centrada, es lo que se ve fino. En el
   telefono la pagina apaga la suya, y ahi si pongo una -vease el
   bloque del telefono, mas abajo. */
.catalogo > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ entradilla */
.cat-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }

.cat-sub {
    font-size: .92rem; font-weight: 300; line-height: 1.75;
    color: rgba(255, 255, 255, .55); margin: 0;
}

/* El interruptor de moneda. Dos pastillas y no un <select>: se ve que
   hay dos opciones sin tener que abrirlo. */
.cat-moneda {
    display: inline-flex; margin-top: 28px;
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 100px; padding: 4px;
    background: rgba(255, 255, 255, .02);
}
.cat-moneda button {
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit;
    font-size: .64rem; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255, 255, 255, .42);
    padding: 9px 24px; border-radius: 100px;
    transition: color .3s ease, background .3s ease;
}
.cat-moneda button:hover { color: #fff; }
.cat-moneda button.is-on {
    background: var(--gold-fema, #C1BA8A); color: var(--navy-core, #141C2F);
}

/* ====================================================================
   LOS GRUPOS
   NO se quedan pegados, y es deliberado. Estuvieron pegados bajo la
   cabecera fija y el resultado fue el contrario del buscado: entre la
   cabecera (90 px) y la barra (70 px) habia 160 px de pantalla tapados
   de forma permanente, y las fichas se metian debajo al desplazarse
   -de una tarjeta llegaba a verse solo el boton. Daba la sensacion de
   que el contenido desaparecia.

   La pagina de la app tampoco los llevaba pegados. Y ya no hace falta:
   el catalogo mide 4.700 px en vez de 6.900, asi que volver arriba a
   cambiar de grupo cuesta poco.
   ==================================================================== */
/* SIN CAJA. Esto llevaba dos rondas sin convencer, y el problema no era
   el detalle: le habia puesto una caja contenedora y otra por pestana. La
   pagina de la app nunca las tuvo -eran botones transparentes con un filo
   dorado debajo y una sola linea separando la fila. Eso es lo que se veia
   fino, y es a lo que vuelve. */
/* Pegada bajo la cabecera. Al ser un ATAJO y no un filtro tiene que
   estar a mano todo el rato, porque la pagina ahora es mas larga: los
   cinco grupos estan uno debajo de otro en vez de escondidos. */
/* Cuando la cabecera se esconde al bajar, la barra sube a ocupar su
   sitio: si no, dejaba una franja de 84 px en blanco por encima. */
html.cab-fuera .cat-tabs { top: 0; }
.cat-tabs {
    position: sticky; top: var(--cab-alto); z-index: 30;
    transition: top .4s cubic-bezier(.4, 0, .2, 1);
    display: flex; justify-content: center; align-items: flex-end;
    gap: clamp(18px, 3.4vw, 52px);
    margin: 0 -20px 64px; padding: 14px 20px;
    background: rgba(10, 14, 24, .93);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 0; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* El indicador que viaja de un grupo al siguiente. Va DETRAS de los
   botones (z-index 0 contra 1) para no tapar ni el texto ni el icono, y
   solo se transiciona una vez COLOCADO: si no, al cargar la pagina
   saldria volando desde la esquina izquierda. */
/* El indicador deja de ser una caja y pasa a ser EL FILO que se desliza
   por debajo de la fila -el gesto de la app, pero viajando en vez de
   aparecer y desaparecer. */
.cat-tabs__ind {
    position: absolute; bottom: 0; left: 20px; width: 0; height: 2px;
    z-index: 1; pointer-events: none; border: 0; border-radius: 0;
    background: var(--gold-fema, #C1BA8A);
    box-shadow: 0 0 14px rgba(193, 186, 138, .45);
}
.cat-tabs__ind.listo {
    transition: transform .55s cubic-bezier(.16, 1, .3, 1),
                width .55s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .cat-tabs__ind.listo { transition: none; } }

a.cat-tab { text-decoration: none; }
.cat-tab {
    flex: 0 1 auto; min-width: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; border: 0; cursor: pointer;
    padding: 6px 2px; border-radius: 0;
    font-family: inherit;
    color: rgba(255, 255, 255, .42);
    transition: color .35s ease;
    position: relative;
}
.cat-tab i { font-size: 1.12rem; line-height: 1; transition: color .35s ease; opacity: .8; }
.cat-tab__t {
    font-size: .74rem; font-weight: 500; letter-spacing: .04em;
    white-space: nowrap; line-height: 1.3;
}
.cat-tab:hover { color: rgba(255, 255, 255, .85); }
.cat-tab:hover i { opacity: 1; }
.cat-tab:focus-visible { outline: 2px solid var(--gold-fema, #C1BA8A); outline-offset: 2px; }
/* El fondo del activo lo pinta ahora el indicador. Aqui queda el color
   del texto, y un fondo de respaldo por si el JavaScript no llega a
   colocarlo: la pestana activa tiene que distinguirse igual. */
.cat-tab.is-on { color: #fff; }
.cat-tab.is-on i { color: var(--gold-bright, #EAE3B3); opacity: 1; }
/* Respaldo si el JavaScript no llega a colocar el filo deslizante. */
.cat-tabs:not(:has(.cat-tabs__ind.listo)) .cat-tab.is-on { box-shadow: 0 17px 0 -16px var(--gold-fema, #C1BA8A); }
.cat-tab.is-on i { color: var(--gold-bright, #EAE3B3); }
/* La pregunta suelta que habia aqui se fue: ahora cada grupo trae la
   suya en su propia cabecera, junto al titulo. */
/* El filo dorado que crece desde el centro: el gesto de la app. */
/* El filo por pestana se fue: ahora hay UNO que se desliza por la fila.
   Dos filos -uno fijo que crece y otro que viaja- se pisaban. */

/* ---------------------------------------------------------- los paneles
   Al cambiar de grupo todo entraba de golpe, como un bloque que aparece.
   Ahora entra por partes: primero el gancho, luego el rotulo, y despues
   las fichas una tras otra con 70 ms de diferencia. El ojo sigue el
   orden en que se lee, en vez de recibirlo todo a la vez.

   El indice de cada ficha -la variable --i- lo escribe PHP, no el
   JavaScript: si el navegador no ejecuta nada, las fichas siguen ahi. */
/* Los grupos ya no se esconden. Estaban detras de pestanas, y habia que
   hacer clic a ciegas para saber que habia en cada uno: 11 de los 14
   paquetes quedaban invisibles. Ahora van uno debajo de otro, con su
   titulo, y la barra de arriba es un atajo, no un filtro. */
/* ------------------------------------------------- UNA REJILLA CONTINUA
   Aqui vivian los cinco paneles apilados. Median 9.100 px: para llegar al
   ultimo grupo habia que pasar por los cuatro anteriores. Y antes de eso
   eran pestanas, que escondian once de los catorce paquetes.

   Ahora hay UNA rejilla con los catorce, y la barra de arriba filtra las
   fichas donde estan. No se abre nada ni se intercambian paneles: las que
   no toca se retiran y las demas ocupan su sitio.

   Los rotulos de grupo y los ganchos ocupan la fila entera, asi que
   siguen separando los grupos a la vista -y siguen siendo <h2>. */
.cat-grupo-cab, .cat-gancho { grid-column: 1 / -1; }
/* Content Strategy Lab es el unico que el cliente arma el mismo, y ocupa
   la fila entera. Antes lo conseguia un `:has()` sobre la rejilla, que con
   una sola rejilla colapsaria las catorce fichas a una columna. */
.cat-card--medida { grid-column: 1 / -1; }
/* Lo que el filtro aparta. Retirarlo del flujo es lo que deja que las
   demas ocupen su sitio; con `visibility` quedarian huecos. */
.cat-grid > .fuera { display: none; }
/* El recuento en cada filtro: dice cuanto hay detras antes de pulsarlo. */
.cat-tab__n {
    display: inline-block; margin-left: 7px;
    font-size: .64rem; font-weight: 600; letter-spacing: .02em;
    color: rgba(255, 255, 255, .34);
}
.cat-tab.is-on .cat-tab__n { color: var(--gold-fema, #C1BA8A); }
/* Al llegar por el atajo, el titulo no queda bajo la cabecera fija. */
.cat-grupo-cab { scroll-margin-top: calc(var(--cab-alto) + 88px); }
.cat-grid > * { position: relative; z-index: 1; }

/* ---------------------------------------------- la cabecera del grupo
   El nombre del grupo solo existia dentro de una pestana, asi que el h2
   tenia que ir oculto para no repetirlo. Ahora la barra es navegacion y
   no un titulo: el h2 puede verse, que es como debe ser, y encabeza su
   seccion. El numero ordena los cinco; la pregunta dice para quien es. */
.cat-grupo-cab {
    display: grid; grid-template-columns: auto 1fr; column-gap: 20px;
    align-items: baseline; margin-bottom: 28px;
    padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.cat-grupo-n {
    grid-row: 1 / span 2; padding-top: .4em;
    font-size: .72rem; font-weight: 600; letter-spacing: .14em;
    color: var(--gold-fema, #C1BA8A); opacity: .6;
}
.cat-grupo-titulo {
    margin: 0; font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 200;
    letter-spacing: -.025em; color: #fff; line-height: 1.12;
}
.cat-grupo-busca {
    grid-column: 2; margin: 8px 0 0;
    font-size: .82rem; font-weight: 300; color: rgba(255, 255, 255, .45);
}

/* Aparecen AL LLEGAR a ellas, no todas de golpe al cambiar de pestana:
   eso es lo que da vida al desplazarse. Parten de invisible, asi que si
   el observador no corriera no se veria nada -por eso el JavaScript
   lleva un respaldo que lo marca todo como visto cuando no hay
   IntersectionObserver. */
/* VISIBLE POR DEFECTO. Esto llevaba `opacity: 0` a secas, y el resultado
   medido fue que las catorce fichas quedaban invisibles cuando el
   observador no disparaba. Una pagina de precios no puede depender de que
   un observador funcione para mostrar los precios. Ahora solo se esconde
   si el script ha podido poner `.cat-anim` en <html>, y aun asi hay un
   temporizador que la quita si el observador no da senales. */
.cat-anim .cat-grupo-cab, .cat-anim .cat-bloque__t, .cat-anim .cat-card { opacity: 0; }
.cat-grupo-cab.visto, .cat-bloque__t.visto {
    animation: catSube .6s cubic-bezier(.16, 1, .3, 1) both;
}
.cat-card.visto {
    animation: catFicha .6s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 85ms);
}

@keyframes catSube {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes catFicha {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Quien pidio menos movimiento lo ve aparecer, sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .cat-grupo-cab.visto, .cat-bloque__t.visto, .cat-card.visto {
        animation: catAparece .25s ease both;
        animation-delay: 0ms;
    }
    @keyframes catAparece { from { opacity: 0; } to { opacity: 1; } }
}

/* Centrado y con 50 px debajo cuando encabezaba una seccion. Ahora es una
   fila de la rejilla, justo bajo su rotulo: se alinea con las fichas y
   respira lo justo. */
.cat-gancho {
    font-size: .88rem; font-weight: 300; line-height: 1.7;
    color: rgba(255, 255, 255, .5);
    max-width: 640px; margin: -14px 0 10px;
}

/* Dentro del grupo: mensual arriba, proyecto abajo. Es la duda que mas
   se repite -plan o servicio suelto- contestada por el orden. */
/* Ya no hay dos bloques por grupo sino uno, asi que no necesita margen
   de separacion con el siguiente: el que separa es el del grupo. */
.cat-bloque { margin-bottom: 0; }

.cat-bloque__t {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 32px;
    font-size: .62rem; font-weight: 700; letter-spacing: .26em;
    text-transform: uppercase; color: rgba(255, 255, 255, .38);
}
.cat-bloque__t::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent);
}
.cat-bloque__t b {
    font-weight: 300; letter-spacing: 0; text-transform: none;
    font-size: .76rem; color: rgba(255, 255, 255, .3);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    align-items: stretch;
    gap: 30px;
}
/* Las reglas por numero de fichas -data-n 1 y 2- y el `:has()` que daba
   la fila entera a Content Strategy Lab se fueron: existian porque cada
   grupo tenia SU rejilla. Con una sola, `data-n` no significa nada y el
   `:has()` colapsaria las catorce fichas a una columna.

   Tres columnas en escritorio. Con `auto-fit` a 1440 px entraban cuatro de
   325 px, y una ficha de 752 px de alto y 325 de ancho queda como una
   columna de texto, no como una ficha. */
@media (min-width: 1120px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ====================================================================
   LA FICHA
   .cat-card no se mueve nunca: es la caja que recibe el raton.
   .cat-card__in lleva todo lo visible, y es lo que sube. El cursor no
   puede perder lo que no se mueve, asi que no hay parpadeo.
   ==================================================================== */
.cat-card { display: flex; position: relative; }

.cat-card__in {
    display: flex; flex-direction: column; width: 100%;
    /* Cristal sin backdrop-filter: un degradado translucido da la misma
       sensacion y no cuesta una capa de composicion por ficha. */
    background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%,
                                        rgba(255, 255, 255, .012) 100%);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 20px;
    padding: 44px 28px 32px;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                border-color .5s ease, background .5s ease, box-shadow .5s ease;
    /* `isolation` fuerza un contexto de apilado propio: asi el degradado
       del cursor -con z-index -1- cae ENCIMA del fondo de la ficha y
       DEBAJO del texto. Sin esto se iria detras del fondo. */
    position: relative; isolation: isolate;
}
/* La destacada se distinguia solo por un borde algo mas dorado: con
   cuatro fichas iguales en fila, nada guiaba la mirada. Un filo
   encendido arriba la senala sin agrandarla ni romper la rejilla. */
.cat-card[data-badge="1"] .cat-card__in {
    border-color: rgba(193, 186, 138, .3);
    background: linear-gradient(180deg, rgba(193, 186, 138, .055) 0%,
                                        rgba(255, 255, 255, .012) 58%);
}
.cat-card[data-badge="1"] .cat-card__in::after {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-bright, #EAE3B3), transparent);
    opacity: .7; pointer-events: none;
    transition: opacity .5s ease, left .5s ease, right .5s ease;
}
.cat-card[data-badge="1"]:hover .cat-card__in::after { opacity: 1; left: 5%; right: 5%; }

/* TRES COSAS, NO SIETE. Esto cambiaba tambien el fondo, y el fondo lo
   pinta ya el halo que sigue al cursor: dos degradados compitiendo en la
   misma superficie es lo que hacia que la ficha pareciera parpadear en
   vez de responder. Se queda el gesto -sube, se perfila, proyecta- y la
   luz hace el resto. */
.cat-card:hover .cat-card__in,
.cat-card:focus-within .cat-card__in {
    transform: translateY(-5px);
    border-color: rgba(193, 186, 138, .34);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
}
@media (prefers-reduced-motion: reduce) {
    .cat-card:hover .cat-card__in, .cat-card:focus-within .cat-card__in { transform: none; }
}

/* La luz que sigue al cursor. Lo unico que se mueve es el centro de un
   degradado -dos variables que escribe el raton-, no la ficha.
   `border-radius: inherit` la mantiene dentro de la esquina redondeada
   sin recortar nada: si recortaramos, se perderia la marquilla, que
   sobresale un pixel por arriba. */
.cat-card__in::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
                                rgba(193, 186, 138, .1), transparent 62%);
    opacity: 0; transition: opacity .45s ease;
}
.cat-card:hover .cat-card__in::before { opacity: 1; }

/* La marquilla, en la esquina, como en la app. */
.cat-badge {
    position: absolute; top: -1px; right: 26px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--gold-bright, #EAE3B3) 0%, var(--gold-fema, #C1BA8A) 100%);
    color: var(--navy-core, #141C2F);
    font-size: .55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .13em; padding: 6px 13px; border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 22px rgba(193, 186, 138, .2);
}
.cat-badge i { font-size: .66rem; }

/* El rotulo diminuto en mayuscula: aqui ordena, no grita. */
/* La etiqueta que antes era un rotulo de bloque entero. Mensual en
   dorado -es lo recurrente, lo que sostiene el negocio-; puntual en
   gris. Asi se distinguen de un vistazo dentro de una sola rejilla. */
.cat-tipo {
    display: inline-block; margin-bottom: 14px;
    padding: 4px 11px; border-radius: 100px;
    font-size: .56rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .11);
}
.cat-tipo--mes {
    color: var(--gold-bright, #EAE3B3);
    border-color: rgba(193, 186, 138, .3);
    background: rgba(193, 186, 138, .07);
}

.cat-nivel {
    display: block;
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .2em; color: rgba(255, 255, 255, .42);
    margin-bottom: 14px;
}
/* El nombre, en minuscula y peso medio. Esto es lo que cambia el tono
   entero de la pagina respecto a la version anterior. */
.cat-nombre {
    font-size: 1.44rem; font-weight: 500; letter-spacing: -.025em;
    text-transform: none; color: #fff;
    margin: 0 0 14px; line-height: 1.15;
}
.cat-desc {
    font-size: .83rem; font-weight: 300; line-height: 1.68;
    color: rgba(255, 255, 255, .58);
    margin: 0 0 34px;
}

/* El precio, con su filo arriba. El aire de aqui es la mitad del efecto. */
.cat-precio {
    border-top: 1px solid rgba(255, 255, 255, .055);
    padding-top: 28px; margin-bottom: 36px;
}
.cat-precio__cifra {
    display: block;
    /* clamp para que un importe de ocho cifras no se corte en una
       columna estrecha: el truco de la hoja original. */
    font-size: clamp(1.65rem, 2.1vw, 2.15rem);
    font-weight: 200; letter-spacing: -.035em; line-height: 1.1;
    color: #fff; white-space: nowrap;
}
.cat-precio__un {
    display: block; margin-top: 8px;
    font-size: .6rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.cat-precio__iva {
    display: block; margin-top: 12px;
    font-size: .71rem; font-weight: 300; line-height: 1.55;
    color: rgba(255, 255, 255, .36);
}
.cat-precio__iva b { font-weight: 500; color: var(--gold-fema, #C1BA8A); }
.cat-precio--medida .cat-precio__cifra { font-size: 1.3rem; font-weight: 300; letter-spacing: -.02em; }

/* Las tres piezas con su precio. Donde las demas fichas tienen UNA cifra
   grande, esta tiene TRES: el hueco que parecia un precio ausente pasa a
   ser la propuesta misma -tu eliges cuantas de cada una. */
.cat-card--medida .cat-items { display: none; }
.cat-piezas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 1px;
    background: rgba(255, 255, 255, .05); border-radius: 10px; overflow: hidden; }
.cat-piezas li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 12px 15px; background: rgba(255, 255, 255, .022);
}
.cat-piezas span { font-size: .78rem; font-weight: 300; color: rgba(255, 255, 255, .68); }
.cat-piezas b {
    font-size: .98rem; font-weight: 300; letter-spacing: -.02em;
    color: var(--gold-bright, #EAE3B3); white-space: nowrap;
}

/* En fila entera la ficha respira en dos columnas: a la izquierda que es,
   a la derecha cuanto cuesta cada pieza. */
@media (min-width: 861px) {
    .cat-card--medida .cat-card__in {
        display: grid; grid-template-columns: 1fr 1fr;
        column-gap: 46px; align-items: start; padding: 44px 40px 36px;
    }
    .cat-card--medida .cat-badge { right: 40px; }
    .cat-card--medida .cat-nivel,
    .cat-card--medida .cat-nombre,
    .cat-card--medida .cat-desc   { grid-column: 1; }
    /* La lista de la izquierda repetia las mismas tres piezas que la
       tabla de precios de la derecha. Una vez, con su precio, basta. */
    .cat-card--medida .cat-items  { display: none; }
    .cat-card--medida .cat-precio { grid-column: 2; grid-row: 1 / span 4; border-top: 0; padding-top: 0; margin-bottom: 0; }
    .cat-card--medida .cat-btn    { grid-column: 2; margin-top: 24px; }
}

.cat-items { list-style: none; margin: 0 0 42px; padding: 0; flex: 1 1 auto; }
.cat-items li {
    display: flex; gap: 12px; align-items: flex-start;
    /* 13,3 px y no 12,6: esto es contenido, lo que de verdad se lee
       para decidir. Los rotulos en mayuscula aguantan 9-10 px porque son
       dos palabras de un vistazo; una lista de caracteristicas, no. */
    font-size: .83rem; font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 16px;
}
.cat-items li:last-child { margin-bottom: 0; }
.cat-items li i {
    font-size: .92rem; margin-top: .2em; flex-shrink: 0;
    color: rgba(255, 255, 255, .32); transition: color .4s ease;
}
/* El dorado de los iconos al pasar por la ficha se fue: ocho vinetas
   cambiando de color a la vez llamaban mas la atencion que el precio. */

.cat-legal {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .71rem; font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, .4);
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding-top: 16px; margin: 0 0 24px;
}
.cat-legal i { color: var(--gold-fema, #C1BA8A); font-size: .9rem; flex-shrink: 0; margin-top: .1em; }

.cat-btn {
    width: 100%; padding: 17px; cursor: pointer;
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px;
    font-family: inherit;
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .18em;
    transition: all .45s cubic-bezier(.16, 1, .3, 1);
}
/* Un insinuado, no un salto: el boton se enciende de verdad cuando el
   raton esta EN EL BOTON, dos reglas mas abajo. */
.cat-card:hover .cat-btn { border-color: rgba(255, 255, 255, .28); }
.cat-btn:hover, .cat-btn:focus-visible {
    background: var(--gold-fema, #C1BA8A); border-color: var(--gold-fema, #C1BA8A);
    color: var(--navy-core, #141C2F);
}
.cat-card[data-badge="1"] .cat-btn {
    border-color: rgba(193, 186, 138, .45); color: var(--gold-bright, #EAE3B3);
}
.cat-card[data-badge="1"] .cat-btn:hover { color: var(--navy-core, #141C2F); }

/* ------------------------------------------------- la puerta de ventas
   Los planes por encima del umbral no abren el checkout. El boton se ve
   DISTINTO a proposito -relleno en vez de contorno-: si pareciera el
   mismo, el visitante esperaria pagar y se encontraria un WhatsApp. */
.cat-asesor {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .73rem; font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, .47);
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding-top: 16px; margin: 0 0 20px;
}
.cat-asesor i { color: var(--gold-fema, #C1BA8A); font-size: .95rem; flex-shrink: 0; margin-top: .1em; }

a.cat-btn--ventas {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    text-decoration: none;
    background: rgba(193, 186, 138, .12) !important;
    border-color: rgba(193, 186, 138, .5) !important;
    color: var(--gold-bright, #EAE3B3) !important;
}
a.cat-btn--ventas i { font-size: 1rem; }
/* `.cat-card:hover` salia de aqui. Rellenaba el boton de dorado macizo
   por tocar la ficha en cualquier punto, y con `!important` para que nada
   lo pudiera suavizar: el cambio mas brusco de la pagina, disparado por
   el gesto mas leve. Ahora se enciende cuando el raton esta encima DEL
   BOTON, que es cuando quiere decir algo. */
a.cat-btn--ventas:hover, a.cat-btn--ventas:focus-visible {
    background: var(--gold-fema, #C1BA8A) !important;
    border-color: var(--gold-fema, #C1BA8A) !important;
    color: var(--navy-core, #141C2F) !important;
}

/* ====================================================================
   EL CHECKOUT
   Uno solo para los tres tipos: plan mensual, proyecto puntual y
   calculadora. Lo que cambia es el rotulo de la cantidad -«Duracion» o
   «Cantidad»- y, en Cantera, la confirmacion del acudiente.
   ==================================================================== */
/* EL ATRIBUTO `hidden` TIENE QUE GANAR.
   `hidden` vale `display: none`, pero solo desde la hoja del navegador: una
   regla de autor con `display: flex` -como la de .cm-tutor o .cm-fila- le gana
   por especificidad. El JavaScript las ocultaba correctamente y el CSS las
   volvia a mostrar, asi que la casilla del acudiente salia en TODOS los planes
   y las filas de «Tarifa regular» e «Incluye» aparecian vacias.

   Esto no se arregla fila por fila: cualquier elemento del checkout que algun
   dia lleve `hidden` tiene que obedecer. */
.cat-modal [hidden] { display: none !important; }

/* LA CABECERA ES FIJA Y OCUPA SITIO. El checkout se centraba en la
   pantalla ENTERA con 20 px de margen, como si no hubiera nada encima.
   En un portatil de 820 px de alto, Cantera (703 px) acababa 26 px POR
   DEBAJO del borde de la cabecera y la calculadora 51 px: se veian
   aplastados contra ella. Aqui se le reserva su altura. */
:root { --cab-alto: 84px; }
@media (max-width: 768px) { :root { --cab-alto: 68px; } }

.cat-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    padding: calc(var(--cab-alto) + 22px) 20px 26px;
    background: rgba(5, 8, 15, .94);
    opacity: 0; transition: opacity .35s ease;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.cat-modal.is-on { display: flex; opacity: 1; }

.cat-modal__box {
    width: 100%; max-width: 820px;
    /* Lo que queda de pantalla una vez descontadas la cabecera y los
       margenes. `dvh` para que encoja con la barra del navegador movil. */
    max-height: calc(100vh - var(--cab-alto) - 48px);
    max-height: calc(100dvh - var(--cab-alto) - 48px);
    overflow-y: auto;
    /* Color plano, no degradado: sobre 650 px de alto un degradado de
       tan poco contraste se escalona en pantallas de 8 bits, y lo que
       se ve no es profundidad sino bandas. */
    background: #0e1524;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px; padding: 0;
    position: relative;
    transform: translateY(16px);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .8);
}
.cat-modal.is-on .cat-modal__box { transform: translateY(0); }

/* ---------------------------------------------- las dos columnas
   A la izquierda QUE compras, con lo que incluye; a la derecha tus
   datos. Antes era una columna estrecha donde el plan era solo un
   titulo, y habia que acordarse de lo que llevaba mientras se
   rellenaba el formulario. */
.cm-split { display: grid; grid-template-columns: 38fr 62fr; align-items: stretch; }

.cm-lado {
    padding: 38px 32px;
    background: linear-gradient(180deg, rgba(193, 186, 138, .05) 0%, rgba(255, 255, 255, .012) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px 0 0 20px;
}
.cm-principal { padding: 38px 36px 30px; min-width: 0; }

.cm-incluye { list-style: none; margin: 24px 0 0; padding: 0; }
.cm-incluye li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .76rem; font-weight: 300; line-height: 1.55;
    color: rgba(255, 255, 255, .62); margin-bottom: 13px;
}
.cm-incluye li:last-child { margin-bottom: 0; }
.cm-incluye li i { font-size: .88rem; margin-top: .2em; flex-shrink: 0; color: var(--gold-fema, #C1BA8A); }

.cm-lado__legal {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: .66rem; font-weight: 300; line-height: 1.55;
    color: rgba(255, 255, 255, .4);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 15px; margin: 22px 0 0;
}
.cm-lado__legal i { color: var(--gold-fema, #C1BA8A); flex-shrink: 0; margin-top: .1em; }

.cat-modal__x {
    position: absolute; top: 20px; right: 20px; z-index: 3;
    width: 38px; height: 38px; display: grid; place-items: center;
    background: transparent; border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%; cursor: pointer;
    color: rgba(255, 255, 255, .5); font-size: 1.05rem;
    transition: all .3s ease;
}
.cat-modal__x:hover { color: #fff; border-color: #fff; transform: rotate(90deg); }

.cat-modal__nivel {
    display: block;
    font-size: .6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .2em; color: var(--gold-fema, #C1BA8A);
    margin-bottom: 9px; padding-right: 48px;
}
.cat-modal__t {
    font-size: 1.55rem; font-weight: 300; letter-spacing: -.03em;
    text-transform: none; color: #fff;
    margin: 0 0 12px; padding-right: 48px; line-height: 1.15;
}
/* Lo que estas comprando, antes de escribir nada. El precio estaba
   abajo del todo: se rellenaba el formulario a ciegas. */
.cat-modal__precio {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
    margin: 0; padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cat-modal__precio b {
    font-size: 1.32rem; font-weight: 200; letter-spacing: -.03em;
    color: #fff; line-height: 1;
}
.cat-modal__precio span {
    font-size: .68rem; font-weight: 300; letter-spacing: .02em;
    color: rgba(255, 255, 255, .42);
}

.cm-campo { margin-bottom: 19px; }
.cm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Cuando el item es la calculadora no hay duracion y el telefono se
   quedaria solo ocupando media fila. */
.cm-dos:has(> [hidden]) { grid-template-columns: 1fr; }
.cm-et {
    display: block;
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .15em; color: rgba(255, 255, 255, .45); margin-bottom: 8px;
}
.cm-in, .cm-sel {
    width: 100%; padding: 10px 0;
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #fff; font-family: inherit;
    font-size: .95rem; font-weight: 300; outline: none;
    transition: border-color .3s ease;
}
.cm-sel { cursor: pointer; color: var(--gold-bright, #EAE3B3); font-weight: 500; }
.cm-sel option { background: #0a0f1b; color: #fff; }
.cm-in:focus, .cm-sel:focus { border-color: var(--gold-fema, #C1BA8A); }
.cm-in::placeholder { color: rgba(255, 255, 255, .24); }

/* La calculadora de Content Strategy Lab, dentro del checkout. Antes
   ocupaba una tarjeta del ancho de la pagina. */
.cm-calc { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 16px; margin-bottom: 16px; }
/* 8 px y no 11: con tres filas, el relleno de mas llevaba la ventana de
   la calculadora al 91% de la pantalla cuando las demas van al 59%. */
.cm-calc__fila {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.cm-calc__fila:last-of-type { border-bottom: 0; }
.cm-calc__fila span { font-size: .8rem; font-weight: 300; color: rgba(255, 255, 255, .68); }
.cm-calc__fila small {
    display: block; font-size: .64rem; font-weight: 300;
    color: rgba(255, 255, 255, .32); margin-top: 3px;
}
.cm-calc__fila input {
    width: 78px; flex-shrink: 0; text-align: center;
    padding: 9px 6px; border-radius: 9px;
    background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1);
    color: #fff; font-family: inherit;
    font-size: .92rem; font-weight: 500; outline: none;
}
.cm-calc__fila input:focus { border-color: var(--gold-fema, #C1BA8A); }

/* La confirmacion del acudiente en Cantera Digital. Sin esto marcado el
   cobro no sale: lo contrata quien tiene la patria potestad. */
.cm-tutor {
    display: flex; gap: 13px; align-items: flex-start;
    border: 1px solid rgba(193, 186, 138, .22); border-radius: 13px;
    background: rgba(193, 186, 138, .045);
    padding: 16px 18px; margin-bottom: 22px;
}
.cm-tutor input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--gold-fema, #C1BA8A); cursor: pointer; }
/* Se senala solo cuando se intenta pagar sin marcarla. */
.cm-tutor.falta { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .055); }
.cm-tutor label { font-size: .74rem; font-weight: 300; line-height: 1.58; color: rgba(255, 255, 255, .7); cursor: pointer; }

/* El codigo de aliado, plegado. Casi nadie trae uno, y abierto ocupaba una
   fila entera con su boton en una pantalla donde cada fila cuenta. */
.cm-cod-caja { margin-bottom: 22px; }
.cm-cod-caja > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    font-size: .72rem; font-weight: 400; letter-spacing: .02em;
    color: rgba(255, 255, 255, .5);
    padding: 11px 0; transition: color .3s ease;
}
.cm-cod-caja > summary::-webkit-details-marker { display: none; }
.cm-cod-caja > summary:hover { color: rgba(255, 255, 255, .85); }
.cm-cod-caja > summary i {
    font-size: .72rem; color: var(--gold-fema, #C1BA8A);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.cm-cod-caja[open] > summary i { transform: rotate(90deg); }

.cm-codigo { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 4px; }
.cm-codigo > div { flex: 1; min-width: 0; }
.cm-codigo button {
    background: transparent; border: 0; cursor: pointer; padding: 0 0 11px;
    font-family: inherit;
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .16em; color: rgba(255, 255, 255, .55);
    transition: color .3s ease; flex-shrink: 0;
}
.cm-codigo button:hover { color: var(--gold-fema, #C1BA8A); }

.cm-aviso {
    font-size: .72rem; font-weight: 400; line-height: 1.55;
    border-radius: 9px; padding: 11px 14px; margin-bottom: 18px;
}
.cm-aviso.bien { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); color: #6EE7B7; }
/* Neutro: al abrir la ventana nadie ha hecho nada mal todavia. El rojo es
   para cuando algo FALLA, no para recibir a quien llega. */
.cm-aviso.info { background: rgba(193, 186, 138, .07); border: 1px solid rgba(193, 186, 138, .22); color: rgba(234, 227, 179, .9); }
.cm-aviso.mal  { background: rgba(239, 68, 68, .1);  border: 1px solid rgba(239, 68, 68, .3);  color: #FCA5A5; }

.cm-cierre { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 22px; }
.cm-resumen { margin-bottom: 18px; }
.cm-fila {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    font-size: .76rem; font-weight: 300; color: rgba(255, 255, 255, .48);
    margin-bottom: 9px;
}
.cm-fila s { color: rgba(255, 255, 255, .32); }
.cm-fila em { font-style: normal; color: var(--gold-fema, #C1BA8A); font-weight: 500; }
.cm-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.cm-total span {
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .16em; color: rgba(255, 255, 255, .45);
}
/* 1,65 rem y no 1,9: al lado del boton dorado, dos elementos pesados
   competian entre si y el ojo no sabia donde mirar primero. */
.cm-total b {
    font-size: 1.65rem; font-weight: 200; letter-spacing: -.04em;
    color: #fff; line-height: 1; white-space: nowrap;
}

.cm-pagar {
    width: 100%; padding: 16px; cursor: pointer;
    background: var(--gold-fema, #C1BA8A); border: 1px solid var(--gold-fema, #C1BA8A);
    border-radius: 11px; color: var(--navy-core, #141C2F);
    font-family: inherit;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .15em; transition: all .35s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.cm-pagar:hover { background: var(--gold-bright, #EAE3B3); border-color: var(--gold-bright, #EAE3B3); }
/* En espera, no averiado: conserva el filo dorado en vez de apagarse del
   todo. Un boton gris se lee como roto; uno vaciado, como «falta algo». */
.cm-pagar[disabled] {
    background: transparent; color: rgba(234, 227, 179, .5);
    border-color: rgba(193, 186, 138, .3); cursor: not-allowed;
}
.cm-pagar[disabled]:hover { background: transparent; border-color: rgba(193, 186, 138, .3); }
.cm-pagar i { font-size: 1rem; }

/* Debajo del boton: ahi es donde se duda. Flotando mas arriba no
   tranquilizaba a nadie, porque aun no habias decidido pagar. */
/* En bloque y con el icono EN LINEA, no como hermano flexible: en flex
   el escudo se quedaba pegado al borde izquierdo mientras el texto iba
   centrado, y en cuanto la nota pasaba a dos lineas se veia torcido. */
.cm-pie {
    display: block; text-align: center;
    font-size: .66rem; font-weight: 300; line-height: 1.55;
    color: rgba(255, 255, 255, .33); margin: 14px 0 0;
    max-width: 38ch; margin-inline: auto;
}
.cm-pie i {
    color: var(--gold-fema, #C1BA8A);
    margin-right: 6px; vertical-align: -.08em;
}

/* ====================================================================
   EL PIE
   Eran tres iconos y un «HECHO POR FEMASPORT 2027». En una pagina de
   precios el pie tiene trabajo: decir quien vende, como se paga y bajo
   que condicion fiscal. Eso es lo que da confianza para poner una
   tarjeta.
   ==================================================================== */
footer.pie {
    display: block !important;
    border-top: 1px solid rgba(255, 255, 255, .055) !important;
    background: rgba(8, 12, 21, .96) !important;
    padding: 64px 5vw 38px !important;
    position: relative; z-index: 10;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ------------------------------------------------- volver arriba
   Aparece a partir de 900 px, que es cuando ya hay desde donde volver.
   `pointer-events: none` mientras esta escondido: si no, un boton
   invisible se queda cazando clics en esa esquina. */
.cat-subir {
    position: fixed; right: 26px; bottom: 26px; z-index: 900;
    width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: 50%; cursor: pointer;
    background: rgba(13, 19, 33, .9);
    border: 1px solid rgba(193, 186, 138, .3);
    color: var(--gold-bright, #EAE3B3); font-size: 1.1rem;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1),
                background .3s ease, border-color .3s ease;
}
.cat-subir.se-ve { opacity: 1; transform: none; pointer-events: auto; }
.cat-subir:hover {
    background: var(--gold-fema, #C1BA8A);
    border-color: var(--gold-fema, #C1BA8A);
    color: var(--navy-core, #141C2F);
}
@media (max-width: 860px) {
    .cat-subir { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ------------------------------------------------- la llamada del pie
   El pie tenia marca, enlaces, redes, pagos y nota fiscal: correcto pero
   inerte. Quien llega hasta aqui ha bajado catorce paquetes y sigue sin
   decidirse. Esta franja es la unica parte del pie que puede convertir. */
.pie-llamada {
    max-width: 1180px; margin: 0 auto 44px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
    padding: 30px 34px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(193, 186, 138, .09) 0%, rgba(255, 255, 255, .015) 70%);
    border: 1px solid rgba(193, 186, 138, .22);
}
.pie-llamada__txt { min-width: 0; }
.pie-llamada__txt span {
    display: block; font-size: 1.12rem; font-weight: 300;
    letter-spacing: -.02em; color: #fff; margin-bottom: 7px;
}
.pie-llamada__txt p {
    margin: 0; font-size: .82rem; font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}
.pie-llamada__b {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; border-radius: 11px; text-decoration: none;
    background: var(--gold-fema, #C1BA8A); color: var(--navy-core, #141C2F);
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .15em; transition: background .35s ease;
}
.pie-llamada__b:hover { background: var(--gold-bright, #EAE3B3); }
.pie-llamada__b i { font-size: 1rem; }

@media (max-width: 860px) {
    .pie-llamada { padding: 24px 20px; gap: 20px; margin-bottom: 32px; }
    .pie-llamada__txt span { font-size: 1rem; }
    .pie-llamada__b { width: 100%; justify-content: center; }
}

.pie-cuerpo {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.3fr 1.4fr auto;
    gap: 40px; align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.pie-logo {
    display: inline-block; text-decoration: none;
    font-size: .88rem; font-weight: 300; letter-spacing: .42em;
    text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.pie-logo span { font-weight: 700; color: var(--gold-fema, #C1BA8A); }
.pie-marca p {
    font-size: .78rem; font-weight: 300; line-height: 1.75;
    color: rgba(255, 255, 255, .45); margin: 0;
}

.pie-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 40px; justify-content: start; }
.pie-nav a {
    font-size: .8rem; font-weight: 300; color: rgba(255, 255, 255, .6);
    text-decoration: none; transition: color .3s ease;
}
.pie-nav a:hover { color: var(--gold-bright, #EAE3B3); }

.pie-redes { display: flex; gap: 18px; }
.pie-redes a {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%;
    color: rgba(255, 255, 255, .6); font-size: 1.15rem;
    text-decoration: none; transition: all .35s ease;
}
.pie-redes a:hover {
    color: var(--navy-core, #141C2F); background: var(--gold-fema, #C1BA8A);
    border-color: var(--gold-fema, #C1BA8A);
}

/* Los medios de pago. En una pagina de precios esto no es adorno: es la
   respuesta a «¿y con que pago?» antes de que la pregunta se haga. */
.pie-pagos {
    max-width: 1180px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 14px 34px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.pie-pagos span {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .7rem; font-weight: 400; letter-spacing: .03em;
    color: rgba(255, 255, 255, .5);
}
.pie-pagos i { font-size: 1.05rem; color: var(--gold-fema, #C1BA8A); }

.pie-legal { max-width: 1180px; margin: 0 auto; padding-top: 26px; }
.pie-legal p {
    font-size: .69rem; font-weight: 300; line-height: 1.7;
    color: rgba(255, 255, 255, .33); margin: 0 0 10px; max-width: 760px;
}
.pie-legal p:last-child { margin-bottom: 0; letter-spacing: .04em; }

/* ====================================================================
   EL TELEFONO
   Los grupos se deslizan con enganche, las fichas van a una columna y
   el relleno baja -pero no tanto que se pierda el aire, que es la mitad
   de lo que hace que esto se vea fino.
   ==================================================================== */
@media (max-width: 1024px) {
    .cat-tab__q { display: none; }
    .cat-tab { gap: 8px; padding: 13px 8px; }
    .pie-cuerpo { grid-template-columns: 1fr 1fr; gap: 34px; }
    .pie-redes { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    /* ---------------------------------------------------- la profundidad
       La hoja de la pagina deja el fondo del telefono en un color PLANO
       -#141C2F, sin degradado- y apaga el grano y el resplandor. Lo caro
       de aquellos era `filter: blur()`, que obliga a recomponer en cada
       desplazamiento. Un degradado estatico no cuesta nada de eso: se
       pinta una vez. Asi que se repone la profundidad sin el coste, que
       era lo que dejaba la pagina como una losa de un solo color. */
    body {
        background-color: transparent !important;
        background-image: none !important;
    }
    html { background: #0A0E18; }
    body::after {
        content: ""; position: fixed; inset: 0; z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(112% 56% at 50% -8%, rgba(193, 186, 138, .085), transparent 62%),
            radial-gradient(92% 55% at 104% 102%, rgba(255, 255, 255, .05), transparent 60%),
            linear-gradient(180deg, #0D1322 0%, #151D30 52%, #0A0E18 100%);
    }

    .page-header { margin-bottom: 34px; }
    /* A 390 px el titular caia en cuatro lineas. En tres respira igual y
       se lee de un golpe. */
    .page-title { font-size: 1.95rem !important; }
    .page-subtitle { font-size: .88rem !important; margin-top: 20px !important; }

    .catalogo { padding: 8px 16px 30px; }
    .cat-head { margin-bottom: 36px; }

    /* Antes de llegar al primer precio habia TRES parrafos grises
       seguidos: el del heroe, el del catalogo y el del grupo. En un
       telefono eso es un muro de texto. Se va el del medio -el heroe ya
       dice a que se dedica la casa, y el del grupo cambia con cada
       estante, que es el que de verdad informa. */
    .cat-head .cat-sub { display: none; }

    /* Se deslizan en vez de apretarse. El enganche deja cada grupo
       centrado al soltar.

       Los botones bajan de 140 a 112 px a proposito: con 140 solo
       entraban dos y medio y parecia que no hubiera mas. Con 112 asoma
       un tercero, y un elemento cortado por el borde es la unica senal
       que de verdad dice «esto se desliza» sin ocupar sitio. */
    .cat-grupo-cab { column-gap: 14px; margin-bottom: 10px; padding-bottom: 18px; }
    /* En la rejilla continua, el aire entre un grupo y el siguiente lo da
       el rotulo, que ya no tiene una seccion que lo separe. */
    .cat-grupo-cab + .cat-gancho { margin-top: -4px; }
    .cat-card + .cat-grupo-cab { margin-top: 34px; }
    .cat-grupo-n { font-size: .66rem; }
    .cat-grupo-busca { font-size: .78rem; }
    .cat-tabs {
        gap: 22px; margin: 0 -16px 42px; padding: 11px 16px;
        justify-content: flex-start; flex-wrap: nowrap;
        overflow-x: auto; scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .cat-tabs::-webkit-scrollbar { display: none; }
    /* LA SENAL DE QUE HAY MAS. Medido a 375 px: 994 px de filtros en 338
       visibles, con la barra de scroll escondida. Se veian dos de seis, y
       los otros cuatro grupos no existian para quien no probara a arrastrar
       -el mismo defecto de las pestanas, producto escondido.

       Va en el `::after` del contenedor de la barra, no en la barra: un
       pseudoelemento dentro de algo que se desplaza se desplaza con el, y
       se perderia por la derecha justo cuando hace falta. */
    .catalogo { position: relative; }
    .cat-tabs::after {
        content: ""; position: sticky; right: 0; flex: 0 0 34px;
        align-self: stretch; margin-right: -20px; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(10, 14, 24, .96));
    }
    .cat-tabs__ind { left: 16px; }
    .cat-tab { flex: 0 0 auto; scroll-snap-align: center; padding: 4px 2px; gap: 8px; }
    .cat-tab__t { font-size: .72rem; }
    .cat-tab i { font-size: 1.05rem; }

    .cat-gancho { margin-bottom: 8px; font-size: .85rem; }
    .cat-bloque { margin-bottom: 0; }
    .page-acciones { gap: 11px; margin-top: 28px; }
    .pa-btn { padding: 14px 22px; font-size: .64rem; }
    .cat-tipo { margin-bottom: 12px; font-size: .54rem; }

    /* En escritorio el rotulo va en una linea: ROTULO - aclaracion - filo.
       A 390 px los tres se peleaban por el ancho y quedaban DOS COLUMNAS DE
       DOS LINEAS cada una, que es lo que parecia roto. Apilado y con el filo
       debajo se lee de corrido. */
    .cat-bloque__t {
        display: block;
        margin-bottom: 24px;
        padding-bottom: 11px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .cat-bloque__t::after { display: none; }
    .cat-bloque__t b { display: block; margin-top: 6px; }

    .cat-grid {
        grid-template-columns: 1fr; gap: 20px;
    }
    .cat-card__in { padding: 36px 24px 28px; }
    .cat-desc { margin-bottom: 28px; }
    .cat-precio { padding-top: 24px; margin-bottom: 30px; }
    .cat-items { margin-bottom: 34px; }
    .cat-badge { right: 22px; font-size: .53rem; padding: 5px 11px; }

    /* ------------------------------------------------- el checkout
       Ocupaba el 94% del alto con todo a la vez -nombre, correo,
       telefono, duracion, codigo, resumen, boton y nota- y el TOTAL se
       perdia de vista en cuanto se empezaba a rellenar: el dato por el
       que estas ahi desaparecia mientras escribias.

       Ahora es una hoja que sube desde abajo, con el total y el boton
       pegados al pie mientras el formulario se desliza detras. */

    /* En el telefono no caben dos columnas: se apila, y la columna
       izquierda se queda solo con el encabezado -el nombre y el precio-,
       sin la lista de lo que incluye, que ya se acaba de leer en la
       ficha de la que se vino. */
    .cm-split { display: block; }
    .cm-lado {
        padding: 0 0 20px; background: none; border-right: 0; border-radius: 0;
    }
    .cm-incluye { display: none; }
    .cm-lado__legal { margin-top: 16px; padding-top: 13px; }
    .cm-principal { padding: 0; }

    /* Hoja desde abajo: no hace falta margen superior, pero el alto
       maximo sigue descontando la cabecera para que nunca la toque. */
    .cat-modal { padding: 0; align-items: flex-end; }
    .cat-modal__box {
        max-width: 100%;
        /* `dvh` y no `vh`: al abrirse el teclado, `vh` sigue valiendo la
           altura de la pantalla COMPLETA, asi que la hoja se queda mas
           alta que el hueco que queda y el pie pegado se va por debajo
           del teclado -con el boton de pagar dentro. `dvh` encoge con el
           teclado. El `vh` se deja antes como respaldo para navegadores
           que no lo entiendan. */
        max-height: calc(100vh - var(--cab-alto) - 14px);
        max-height: calc(100dvh - var(--cab-alto) - 14px);
        border-radius: 20px 20px 0 0;
        padding: 14px 20px 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        display: flex; flex-direction: column;
    }
    /* Al tocar un campo, el navegador lo desplaza hasta hacerlo visible,
       y «visible» para el incluye el trozo que tapa el pie pegado. Con
       este margen queda por encima. */
    .cm-in, .cm-sel, .cm-calc__fila input { scroll-margin-bottom: 150px; }
    /* El asa: dice «esto es una hoja» antes de leer nada. */
    .cat-modal__box::before {
        content: ""; display: block; flex-shrink: 0;
        width: 38px; height: 4px; margin: 0 auto 18px;
        border-radius: 100px; background: rgba(255, 255, 255, .18);
    }
    .cat-modal__x { top: 12px; right: 12px; width: 34px; height: 34px; }
    .cat-modal__nivel { padding-right: 42px; font-size: .58rem; }
    .cat-modal__t { font-size: 1.3rem; padding-right: 42px; margin-bottom: 10px; }
    .cat-modal__precio { margin-bottom: 20px; padding-bottom: 20px; gap: 7px; }
    .cat-modal__precio b { font-size: 1.18rem; }
    .cat-modal__precio span { font-size: .64rem; }

    /* Una columna: a 390 px dos campos lado a lado dejan 170 px cada
       uno, y ahi no cabe ni un prefijo con el numero. */
    .cm-dos, .cm-dos:has(> [hidden]) { grid-template-columns: 1fr; gap: 17px; }
    .cm-campo { margin-bottom: 17px; }

    /* El total y el boton se quedan pegados abajo: `position: sticky`
       dentro de la caja que se desplaza. El importe no se va nunca de
       la pantalla mientras se rellena. */
    .cm-cierre {
        position: sticky; bottom: 0; z-index: 2;
        margin: 0 -20px; padding: 13px 20px 16px;
        /* SOLIDO. Llevaba un degradado que empezaba transparente para
           suavizar el borde, y el resultado era que el campo de debajo
           -«¿Tienes un código de aliado?»- SE VEIA A TRAVES de la barra,
           encabalgado con el total. El desvanecido va por fuera, con una
           sombra hacia arriba: suaviza igual sin dejar pasar nada. */
        background: #0e1524;
        box-shadow: 0 -16px 22px -10px #0e1524;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
    .cm-resumen { margin-bottom: 12px; }
    .cm-total b { font-size: 1.5rem; }
    .cm-pagar { padding: 15px; }
    /* La nota se queda, compacta. Cuesta 18 px del pie pegado, pero es
       justo donde mas se duda: en un telefono, poniendo una tarjeta. */
    .cm-pie { margin-top: 10px; font-size: .61rem; line-height: 1.45; gap: 6px; }

    footer.pie { padding: 44px 20px 30px !important; }
    .pie-cuerpo { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
    .pie-nav { grid-template-columns: 1fr; gap: 12px; }
    .pie-pagos { gap: 12px 22px; padding: 22px 0; }
}

/* Entre 400 y 300 px el importe mas largo -47.880.000- no cabe en una
   linea con el relleno de 24 px. Se deja respirar en vez de cortarse. */
@media (max-width: 400px) {
    .cat-card__in { padding: 32px 19px 24px; }
    .cat-precio__cifra { font-size: 1.45rem; }
    .cm-total b { font-size: 1.4rem; }
}

/* ====================================================================
   LA TRAMA
   --------------------------------------------------------------------
   Sustituye a la palabra enorme que habia detras de cada grupo. Tres
   circunferencias finisimas girando muy despacio en sentidos contrarios,
   con un punto recorriendo la mayor: una trayectoria que avanza, que es
   de lo que va esta pagina.

   TRAZO, no mancha. Una linea de 1 px no tiene gradiente que se escalone
   -ese fue el problema de las manchas desenfocadas que hubo que quitar.
   150 y 220 segundos por vuelta: nadie la persigue con la mirada, solo
   evita que la pagina se sienta congelada.
   ==================================================================== */
.trama {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.trama svg {
    position: absolute; top: 50%; left: 58%;
    width: 118vmax; height: 118vmax;
    transform: translate(-50%, -50%);
}
/* Sin esto el <circle> se pinta NEGRO Y RELLENO por defecto, que es
   exactamente lo que paso cuando esta hoja se rompio: un disco opaco
   tapando la pagina entera. */
.trama circle {
    fill: none;
    stroke: var(--gold-fema, #C1BA8A);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: .085;
}
.trama .trama-punto { fill: var(--gold-bright, #EAE3B3); stroke: none; opacity: .5; }

.trama-lento  { animation: tramaGira 220s linear infinite;         transform-origin: 700px 700px; }
.trama-rapido { animation: tramaGira 150s linear infinite reverse; transform-origin: 700px 700px; }
@keyframes tramaGira { to { transform: rotate(360deg); } }

/* El contenido, siempre por delante de la trama.
   OJO: `header` NO va aqui. Estaba, y le quitaba su `position: fixed`
   -al bajar 600 px se iba a -600 y dejaba de seguir al visitante. Un
   elemento `fixed` ya crea su propio contexto de apilado: le basta el
   z-index, que la hoja de la pagina le da (1000). */
.main-content, footer.pie { position: relative; z-index: 10; }

/* La cabecera se esconde al bajar y vuelve al subir: en una pagina larga,
   84 px de barra permanente estorban mientras se lee, y al primer gesto
   hacia arriba es justo cuando se la busca. */
header {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform;
}
header.cab-oculta { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
    header { transition: none !important; }
    header.cab-oculta { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .trama-lento, .trama-rapido { animation: none; }
}
/* En el telefono, una sola orbita y mas tenue: tres trazos girando en
   390 px es ruido, no atmosfera. */
@media (max-width: 860px) {
    .trama .trama-lento circle:first-child { display: none; }
    .trama circle { opacity: .06; }
    .trama svg { left: 50%; width: 150vmax; height: 150vmax; }
}

/* ====================================================================
   CREATOR AUDIT
   Desentonaba por dos cosas concretas: tres iconos en rosa, cian y rojo
   saturados -los unicos colores vivos de toda la pagina, justo en la
   seccion que deberia leerse como instrumento- y esquinas de 30 px
   contra las 20 del catalogo.
   ==================================================================== */
.ai-lab-section { border-radius: 20px !important; }
.social-icon-top {
    background: none !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .55) !important;
    color: rgba(255, 255, 255, .55) !important;
    filter: none !important;
    font-size: 1.7rem !important;
    transition: -webkit-text-fill-color .35s ease, color .35s ease;
}
.ai-lab-section:hover .social-icon-top {
    -webkit-text-fill-color: var(--gold-fema, #C1BA8A) !important;
    color: var(--gold-fema, #C1BA8A) !important;
}