/* ==========================================================================
   Sistemas de facturación
   --------------------------------------------------------------------------
   Página sin el menú del sitio.

   Los bloques oscuros usan el mismo negro azulado del pie de página, que
   llega como --fx-oscuro desde la plantilla; así el día que se cambie el
   color del pie en el panel, cambia también aquí. De ese color sale un
   segundo tono, --fx-medio, más azul y más claro, que es el fondo de
   «Conoce el sistema»: dos bloques oscuros seguidos del mismo color se
   leen como uno solo y la página se aplana.

   El ritmo va oscuro · blanco · azul · tenue · blanco · oscuro. Cada rubro
   y cada plan traen su propio acento (--acento) desde el panel.
   ========================================================================== */

.fx {
    /* El casi negro de antes pesaba con tantas negritas seguidas: la tinta
       va en #2b3a4d, que sobre blanco da 11,6:1. */
    --fx-tinta: #2b3a4d;
    --fx-suave: #5f6e81;
    --fx-tenue: #7b8899;
    --fx-linea: #e3eaf2;
    --fx-papel: #f2f5f9;
    --fx-oscuro: #00020f;          /* lo pisa la plantilla con el color del pie */
    --fx-medio: color-mix(in srgb, var(--fx-oscuro) 40%, #123a61);
    --fx-verde: #15704a;
    --fx-verde-hover: #115b3c;
    --acento: var(--fx-verde);
    color: var(--fx-tinta);
    font-size: 16px;
    line-height: 1.65;
}

.fx-ancho {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

.fx-eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.fx-eyebrow-oscuro { color: var(--fx-verde); }

.fx-icono { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------- portada */
.fx-hero {
    position: relative;
    background: var(--fx-oscuro);
    color: #fff;
    padding-top: clamp(48px, 7vw, 82px);
    overflow: hidden;
}
/* Un resplandor frío y muy tenue, nada más: sobre un negro tan cerrado
   cualquier halo de color se nota de inmediato. */
.fx-hero::before {
    content: "";
    position: absolute;
    inset: -30% 38% 28% -22%;
    background: radial-gradient(60% 60% at 50% 50%, rgba(120, 165, 220, .1), transparent 70%);
    pointer-events: none;
}

.fx-hero-interior {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
    padding-bottom: clamp(38px, 5vw, 60px);
}
.fx-hero-interior:has(.fx-hero-imagen) { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.fx-hero-texto h1 {
    margin: 12px 0 0;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 750;
    color: #fff;
    text-wrap: balance;
}
.fx-hero-bajada {
    margin: 16px 0 0;
    max-width: 58ch;
    font-size: clamp(15px, 1.5vw, 17.5px);
    color: rgba(255, 255, 255, .76);
}

.fx-hero-rubros {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.fx-hero-rubros a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.fx-hero-rubros a:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .3);
}
.fx-hero-rubros svg { width: 17px; height: 17px; opacity: .8; }

.fx-hero-botones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

.fx-hero-imagen {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.fx-hero-imagen img { display: block; width: 100%; height: auto; }

.fx-hero-tira {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.fx-hero-tira li {
    padding: 20px clamp(14px, 2vw, 26px) 22px;
    border-left: 1px solid rgba(255, 255, 255, .09);
}
.fx-hero-tira li:first-child { border-left: 0; padding-left: 0; }
.fx-hero-tira strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.fx-hero-tira span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
}

/* -------------------------------------------------------------- botones */
.fx-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.fx-boton:hover { transform: translateY(-1px); }
.fx-boton svg { width: 17px; height: 17px; flex: 0 0 auto; }
.fx-boton-lleno { background: #fff; color: #17293d; }
.fx-boton-lleno:hover { background: #eef3f9; box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
.fx-boton-linea {
    border-color: rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .92);
}
.fx-boton-linea:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .07); }
.fx-boton-verde { background: var(--fx-verde); color: #fff; }
.fx-boton-verde:hover { background: var(--fx-verde-hover); box-shadow: 0 12px 28px rgba(21, 112, 74, .3); }

/* El botón del plan: gris plomo liso, a todo el ancho de la tarjeta, sin
   sombra ni saltos; solo se oscurece al pasar por encima. */
.fx-boton-acento {
    background: #3a3a3c;
    color: #fff;
    padding-block: 15px;
    font-size: 15px;
    box-shadow: none;
}
.fx-boton-acento:hover {
    background: #1d1d1f;
    box-shadow: none;
    transform: none;
}
.fx-boton-acento svg { transition: transform .18s ease; }
.fx-boton-acento:hover svg { transform: translateX(3px); }
.fx-boton-ancho { width: 100%; }

/* ------------------------------------------------------------- bloques */
.fx-bloque { padding: clamp(54px, 7vw, 86px) 0; }
.fx-bloque-blanco { background: #fff; }
.fx-bloque-tenue { background: var(--fx-papel); }
.fx-bloque-medio { background: var(--fx-medio); color: rgba(255, 255, 255, .82); }

.fx-cabecera { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 46px); }
.fx-cabecera h2 {
    margin: 11px 0 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.16;
    letter-spacing: -.018em;
    font-weight: 700;
    color: var(--fx-tinta);
    text-wrap: balance;
}
.fx-cabecera p { margin: 12px 0 0; color: var(--fx-suave); font-size: 15.5px; }
.fx-cabecera-clara h2 { color: #fff; }
.fx-cabecera-clara p { color: rgba(255, 255, 255, .66); }

/* Lista de viñetas con palomita. Se dibuja con bordes y no con un SVG de
   color fijo para que pueda teñirse con el acento de cada rubro. */
.fx-lista {
    --fx-marca: var(--fx-verde);
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}
.fx-lista li {
    position: relative;
    padding-left: 27px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fx-suave);
}
.fx-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fx-marca) 14%, transparent);
}
.fx-lista li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: .52em;
    width: 4px;
    height: 8px;
    border: solid var(--fx-marca);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}
.fx-lista-acento { --fx-marca: var(--acento); }
.fx-lista-clara { --fx-marca: #fff; }
.fx-lista-clara li { color: rgba(255, 255, 255, .72); }
.fx-lista-clara li::before { background: rgba(255, 255, 255, .13); }

/* -------------------------------------------------------------- rubros */
.fx-rubros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
}
.fx-rubro {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fx-linea);
    border-radius: 18px;
    background: #fff;
    scroll-margin-top: 90px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fx-rubro:hover {
    border-color: color-mix(in srgb, var(--acento) 36%, var(--fx-linea));
    box-shadow: 0 22px 46px rgba(22, 40, 60, .1);
    transform: translateY(-3px);
}

/* Cabecera: la foto que se sube desde el panel. Sin foto no queda un
   hueco, se dibuja un panel teñido con el icono del rubro en grande. */
.fx-rubro-portada {
    position: relative;
    aspect-ratio: 16 / 7;
}
.fx-rubro-portada:has(.es-vacia) { aspect-ratio: 16 / 4.6; }
/* El recorte vive aqui y no en la portada: la insignia del icono cuelga
   por debajo del borde y si la portada recortara se la comeria. */
.fx-rubro-foto {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--acento) 10%, #fff);
}
.fx-rubro-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.fx-rubro:hover .fx-rubro-foto img { transform: scale(1.04); }
.fx-rubro-foto.es-vacia {
    background:
        radial-gradient(120% 140% at 82% 12%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 62%),
        color-mix(in srgb, var(--acento) 8%, #fff);
}
.fx-rubro-marca {
    position: absolute;
    right: -14px;
    bottom: -22px;
    width: 148px;
    height: 148px;
    color: var(--acento);
    opacity: .14;
}
/* El distintivo del precio: sale del plan del rubro, o del general si ese
   rubro no tiene uno propio. */
.fx-rubro-precio {
    position: absolute;
    z-index: 1;
    text-decoration: none;
    top: 14px;
    right: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: -.005em;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--acento) 34%, transparent);
}
.fx-rubro-icono {
    position: absolute;
    z-index: 1;
    left: clamp(18px, 2.2vw, 26px);
    bottom: -26px;
    width: 54px;
    height: 54px;
    padding: 13px;
    border-radius: 15px;
    background: var(--acento);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--acento) 30%, transparent);
}

.fx-rubro-cuerpo { padding: 40px clamp(20px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px); }
.fx-rubro h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.014em;
    color: var(--fx-tinta);
}
.fx-rubro-titular {
    margin: 5px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--acento);
    font-weight: 650;
}
.fx-rubro-resumen { margin: 14px 0 0; font-size: 14.8px; color: var(--fx-suave); }

/* ------------------------------------------------- conoce el sistema */
.fx-modulos {
    display: grid;
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 42px);
    align-items: start;
}
.fx-modulos-lista {
    display: grid;
    gap: 3px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(0, 0, 0, .2);
    position: sticky;
    top: 86px;
}
.fx-modulo-boton {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    width: 100%;
    padding: 12px 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.fx-modulo-boton:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.fx-modulo-boton.es-activo {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}
.fx-modulo-numero {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .32);
    font-variant-numeric: tabular-nums;
}
.fx-modulo-boton.es-activo .fx-modulo-numero { color: var(--fx-verde); }
.fx-modulo-icono {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: inherit;
}
.fx-modulo-boton.es-activo .fx-modulo-icono { background: var(--fx-verde); color: #fff; }
.fx-modulo-nombre { display: block; min-width: 0; }
.fx-modulo-nombre strong {
    display: block;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.008em;
}
.fx-modulo-nombre small {
    display: block;
    margin-top: 2px;
    font-size: 12.3px;
    line-height: 1.42;
    color: rgba(255, 255, 255, .48);
}
.fx-modulo-boton.es-activo .fx-modulo-nombre small { color: rgba(255, 255, 255, .62); }
/* La flecha solo aparece en el activo: marca hacia dónde se lee. */
.fx-modulo-flecha {
    margin-top: 11px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .15s ease;
}
.fx-modulo-boton.es-activo .fx-modulo-flecha { opacity: .75; }

.fx-modulos-detalle {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(255, 255, 255, .045);
}
/* Sin el guion se leen todos, separados por una línea. Con el guion, solo
   el elegido, y entra con un desplazamiento corto para que se note el
   cambio de módulo sin marear. */
.fx-modulo-panel + .fx-modulo-panel {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.fx-modulos.con-guion .fx-modulo-panel { display: none; }
.fx-modulos.con-guion .fx-modulo-panel.es-activo {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    animation: fx-entra .28s ease both;
}
@keyframes fx-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.fx-modulo-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.fx-modulo-marca {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 13px;
    background: var(--fx-verde);
    color: #fff;
}
.fx-modulo-contador {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}
.fx-modulo-panel h3 {
    margin: 3px 0 0;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: -.016em;
    color: #fff;
}
.fx-modulo-panel p {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .74);
    max-width: 68ch;
}
.fx-modulo-captura {
    margin: 20px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
}
.fx-modulo-captura img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------- planes */
/* El selector de rubro. Cada botón toma el acento de su rubro cuando está
   elegido; el general se queda con el verde del sitio. */
.fx-planes-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(24px, 3vw, 34px);
}
.fx-selector-boton {
    --acento: var(--fx-verde);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 14px;
    border: 1px solid var(--fx-linea);
    border-radius: 999px;
    background: #fff;
    color: var(--fx-suave);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.fx-selector-boton svg { width: 18px; height: 18px; opacity: .65; }
.fx-selector-boton:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--fx-linea)); color: var(--fx-tinta); }
.fx-selector-boton.es-activo {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--acento) 28%, transparent);
}
.fx-selector-boton.es-activo svg { opacity: 1; }

.fx-planes { display: grid; gap: clamp(18px, 2.2vw, 26px); align-items: start; }
/* Con el guion se ve una tarjeta cada vez, centrada. Sin él caen todas en
   columna y se leen igual. */
.fx-planes.con-guion { max-width: 760px; margin-inline: auto; }
.fx-planes.con-guion .fx-plan { display: none; }
.fx-planes.con-guion .fx-plan.es-activo { display: flex; animation: fx-entra .28s ease both; }

.fx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--fx-linea);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(22, 40, 60, .06);
}
.fx-plan::before { content: none; } /* Sin rayas de color (pedido del usuario). */
.fx-plan-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.fx-plan-cinta {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acento) 12%, #fff);
    color: var(--acento);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fx-plan h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.016em;
    color: var(--fx-tinta);
}
.fx-plan-resumen { margin: 7px 0 0; font-size: 14.5px; color: var(--fx-suave); max-width: 46ch; }

.fx-plan-precios {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    margin: 24px 0 4px;
    padding: 22px 0;
    border-top: 1px solid var(--fx-linea);
    border-bottom: 1px solid var(--fx-linea);
}
.fx-precio { flex: 1 1 130px; min-width: 0; }
.fx-precio-cifra {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    font-size: clamp(34px, 4.2vw, 46px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--fx-tinta);
    font-variant-numeric: tabular-nums;
}
.fx-precio-cifra i {
    font-style: normal;
    font-size: .44em;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--acento);
    transform: translateY(.24em);
}
.fx-precio-nota {
    display: block;
    margin-top: 8px;
    font-size: 12.8px;
    line-height: 1.45;
    color: var(--fx-tenue);
}
.fx-precio-mas {
    align-self: center;
    font-size: 24px;
    font-weight: 300;
    color: #c3ccd8;
    margin-top: -14px;
}
.fx-plan .fx-lista { margin-bottom: 26px; }
.fx-plan .fx-boton { margin-top: auto; }
.fx-plan-nota {
    margin: 14px 0 0;
    font-size: 12.4px;
    line-height: 1.5;
    color: var(--fx-tenue);
}

/* ----------------------------------------------------------- preguntas */
.fx-preguntas { display: grid; gap: 10px; max-width: 880px; }
.fx-pregunta {
    border: 1px solid var(--fx-linea);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}
.fx-pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -.008em;
    color: var(--fx-tinta);
    cursor: pointer;
    list-style: none;
}
.fx-pregunta summary::-webkit-details-marker { display: none; }
.fx-pregunta summary::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--fx-tenue);
    border-bottom: 2px solid var(--fx-tenue);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.fx-pregunta[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fx-pregunta[open] summary { color: var(--fx-verde); }
.fx-pregunta-cuerpo { padding: 0 20px 18px; }
.fx-pregunta-cuerpo p {
    margin: 0 0 10px;
    font-size: 14.8px;
    line-height: 1.68;
    color: var(--fx-suave);
    max-width: 70ch;
}
.fx-pregunta-cuerpo p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- cierre */
.fx-cierre {
    background: var(--fx-oscuro);
    color: #fff;
    padding: clamp(40px, 5vw, 62px) 0;
}
.fx-cierre-interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}
.fx-cierre h2 {
    margin: 0;
    font-size: clamp(21px, 2.6vw, 29px);
    font-weight: 700;
    letter-spacing: -.018em;
    color: #fff;
    text-wrap: balance;
}
.fx-cierre p {
    margin: 9px 0 0;
    max-width: 52ch;
    font-size: 15px;
    color: rgba(255, 255, 255, .68);
}
.fx-cierre-acciones { display: flex; flex-wrap: wrap; gap: 11px; }

/* El pie mínimo se separa 48 px del contenido —lo trae minima.css— y eso
   funciona en una página que acaba en blanco. Esta acaba en la franja
   oscura del cierre, así que ese hueco se lee como una banda clara suelta
   entre dos bloques. Se cierra solo aquí, sin tocar la regla compartida. */
body:has(.fx-cierre) .pie-minimo { margin-top: 0; }

/* --------------------------------------------------- pantallas medianas */
@media (max-width: 980px) {
    .fx-hero-interior:has(.fx-hero-imagen) { grid-template-columns: minmax(0, 1fr); }
    .fx-modulos { grid-template-columns: minmax(0, 1fr); }
    .fx-modulos-lista {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: minmax(230px, 1fr);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .fx-modulo-boton { scroll-snap-align: start; }
    .fx-modulo-nombre small,
    .fx-modulo-flecha { display: none; }
}

/* --------------------------------------------------- pantallas pequeñas */
@media (max-width: 760px) {
    .fx-rubros { grid-template-columns: minmax(0, 1fr); }
    .fx-hero-tira { grid-template-columns: minmax(0, 1fr); }
    .fx-hero-tira li {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
        padding-left: 0;
        padding-block: 15px;
    }
    .fx-hero-tira li:first-child { border-top: 0; }
    .fx-hero-botones .fx-boton { flex: 1 1 100%; }
    .fx-plan-cabecera { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
    .fx-plan-precios { gap: 10px; }
    .fx-precio-mas { display: none; }
    .fx-precio { flex-basis: 100%; }
    .fx-plan-precios .fx-precio + .fx-precio,
    .fx-plan-precios .fx-precio-mas + .fx-precio {
        padding-top: 16px;
        border-top: 1px dashed var(--fx-linea);
    }
    .fx-cierre-acciones { width: 100%; }
    .fx-cierre-acciones .fx-boton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-boton, .fx-rubro, .fx-rubro-foto img,
    .fx-pregunta summary::after, .fx-boton-acento svg { transition: none; }
    .fx-boton:hover, .fx-rubro:hover { transform: none; }
    .fx-rubro:hover .fx-rubro-foto img { transform: none; }
    .fx-modulos.con-guion .fx-modulo-panel.es-activo,
    .fx-planes.con-guion .fx-plan.es-activo { animation: none; }
}

/* ==========================================================================
   PORTADA MINIMA
   Menos texto y mejor puesto: titular en peso medio, una frase, una accion
   en pildora y WhatsApp como enlace. Las garantias, tres frases cortas con
   su marca, sin filetes. Sin resplandor ni sombra pesada en la foto.
   ========================================================================== */
.fx-hero::before { display: none; }
.fx-hero { padding-top: clamp(40px, 6vw, 72px); }
.fx-hero-interior { padding-bottom: clamp(32px, 4vw, 48px); }
.fx-hero .fx-eyebrow { color: rgba(255, 255, 255, .55); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.fx-hero-texto h1 {
    margin-top: 14px;
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.035em;
}
.fx-hero-bajada {
    margin-top: 16px;
    max-width: 40ch;
    color: rgba(255, 255, 255, .66);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.45;
    text-align: left !important;
    text-align-last: auto;
    hyphens: manual;
}
.fx-hero-botones { align-items: center; gap: 22px; margin-top: 32px; }
.fx-hero-botones .fx-boton-lleno {
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}
.fx-hero-botones .fx-boton-lleno:hover { background: #e8e8ed; transform: none; }
.fx-hero-enlace {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.fx-hero-enlace span { display: inline-block; margin-left: 2px; transition: transform .2s ease; }
.fx-hero-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.fx-hero-enlace:hover span { transform: translateX(3px); }
.fx-hero-imagen { border-radius: 24px; box-shadow: none; }

.fx-hero-tira {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding: 22px 0 30px;
    border-top: 0;
}
.fx-hero-tira li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14.5px;
    font-weight: 500;
}
.fx-hero-tira li::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat;
}
@media (max-width: 760px) {
    .fx-hero-tira { flex-direction: column; gap: 12px; }
    .fx-hero-tira li { border: 0; padding: 0; }
    .fx-hero-botones { flex-direction: column; align-items: stretch; gap: 16px; }
    .fx-hero-botones .fx-boton-lleno { width: 100%; }
    .fx-hero-enlace { text-align: center; }
}

/* ==========================================================================
   TARJETAS DE RUBRO EN COLOR ENTERO
   Sin degradado, sin icono fantasma de fondo ni filete de color: la
   cabecera es un plano del color del rubro con su icono en blanco y el
   precio en una pildora blanca. La tarjeta, lisa y quieta.
   ========================================================================== */
.fx-rubro {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 28px rgba(16, 24, 40, .06);
}
.fx-rubro:hover { transform: none; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 36px rgba(16, 24, 40, .1); }

.fx-rubro-foto { border-bottom: 0; background: var(--acento); }
.fx-rubro-foto.es-vacia { background: var(--acento); }
.fx-rubro:hover .fx-rubro-foto img { transform: none; }
.fx-rubro-portada:has(.es-vacia) { aspect-ratio: auto; height: 132px; }

/* Sin foto, el icono del rubro va en blanco y entero en la cabecera. */
.fx-rubro-marca {
    left: clamp(20px, 2.4vw, 30px);
    right: auto;
    top: auto;
    bottom: 22px;
    width: 46px;
    height: 46px;
    color: #fff;
    opacity: 1;
}
.fx-rubro-portada:has(.es-vacia) .fx-rubro-icono { display: none; }
/* Con foto, la insignia se queda pero sin sombra de color. */
.fx-rubro-icono { box-shadow: 0 0 0 4px #fff; }

.fx-rubro-precio {
    top: 18px;
    right: 18px;
    padding: 7px 14px;
    background: #fff;
    color: var(--acento);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
}

.fx-rubro-cuerpo { padding: 26px clamp(22px, 2.6vw, 32px) clamp(26px, 2.8vw, 34px); }
.fx-rubro-portada:not(:has(.es-vacia)) + .fx-rubro-cuerpo { padding-top: 40px; }
.fx-rubro h3 { color: #1d1d1f; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.fx-rubro-titular { margin-top: 6px; font-size: 15px; font-weight: 600; }
.fx-rubro-resumen { color: #6e6e73; font-size: 15px; line-height: 1.6; }
.fx-rubro :is(p, li) { text-align: left; text-align-last: auto; hyphens: manual; }
.fx-rubro .fx-lista li { color: #1d1d1f; }

/* ==========================================================================
   "CONOCE EL SISTEMA" EN PLOMO
   Fondo gris plomo entero en vez del azul. Paneles en tonos lisos del
   mismo gris, sin bordes. El modulo activo se marca solo con un plano mas
   claro: fuera la raya vertical y la flechita.
   ========================================================================== */
.fx-bloque-medio {
    --fx-plomo: #2c2e33;
    background: var(--fx-plomo);
    color: rgba(255, 255, 255, .82);
}
.fx-modulos-lista { border: 0; background: #232529; }
.fx-modulo-boton.es-activo { background: #3a3d43; box-shadow: none; }
.fx-modulo-boton:hover { background: #33363b; }
.fx-modulo-flecha { display: none; }
.fx-modulo-boton { grid-template-columns: auto auto minmax(0, 1fr); }
.fx-modulos-detalle { border: 0; background: #35383d; border-radius: 24px; }
.fx-modulo-panel + .fx-modulo-panel { border-top-color: rgba(255, 255, 255, .08); }
.fx-bloque-medio :is(p, li) { text-align: left; text-align-last: auto; hyphens: manual; }