/* Foxnice · capa de marca sobre Bootstrap 5.3
   Solo variables y utilidades. No se sobreescriben componentes de Bootstrap. */

:root {
  /* Una sola familia en toda la web. Los rótulos que antes eran monoespaciados se
     quedan con su espaciado y sus mayúsculas, que es lo que de verdad los hacía
     rótulos; el monoespaciado solo hacía falta para cuadrar cifras, y eso lo resuelve
     `font-variant-numeric` donde toca. */
  --fx-font: Manrope, system-ui, sans-serif;

  --fx-orange: #3E68E5;
  --fx-orange-dark: #2B4FBF;
  --fx-orange-soft: #E9EEFC;
  --fx-ink: #1D1E20;
  --fx-plum: #12193A;
  --fx-plum-line: #26304F;
  --fx-plum-text: #AEB6CE;
  --fx-sand: #F4F4F6;
  --fx-line: #E3E4E8;
  --fx-muted: #56575C;
  --fx-muted-2: #8A8C94;
  --fx-green: #21B573;

  --bs-body-bg: #FFFFFF;
  --bs-body-color: var(--fx-ink);
  --bs-body-font-family: var(--fx-font);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-border-color: var(--fx-line);
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 14px;
  --bs-link-color: var(--fx-orange-dark);
  --bs-link-color-rgb: 43, 79, 191;
  --bs-link-hover-color: var(--fx-orange);
  --bs-link-hover-color-rgb: 62, 104, 229;
  --bs-primary: var(--fx-orange);
  --bs-primary-rgb: 62, 104, 229;
  --bs-emphasis-color: var(--fx-ink);
  --bs-secondary-color: var(--fx-muted);
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .fx-display {
  font-family: var(--fx-font);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.125rem, 5.6vw, 4rem); letter-spacing: -0.025em; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
p { text-wrap: pretty; }

/* --- utilidades de marca --- */
.fx-mono {
  font-family: var(--fx-font);
  font-weight: 600;
  /* Cifras de ancho fijo: sin monoespaciado, un precio que cambia al pulsar el
     conmutador mensual/anual bailaría de sitio. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}
.fx-mono-xs { font-family: var(--fx-font); font-weight: 600; letter-spacing: 0.08em; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.fx-eyebrow { color: var(--fx-orange-dark); }
.fx-num { font-family: var(--fx-font); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }

.fx-text-muted { color: var(--fx-muted) !important; }
.fx-text-orange { color: var(--fx-orange) !important; }
.fx-bg-sand { background-color: var(--fx-sand); }
.fx-bg-plum { background-color: var(--fx-plum); color: #FFFFFF; }
.fx-bg-soft { background-color: var(--fx-orange-soft); }
.fx-border-y { border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.fx-section { padding-block: clamp(3.5rem, 9vw, 8rem); }
.fx-section-sm { padding-block: clamp(3rem, 7vw, 6rem); }
.fx-measure { max-width: 64ch; }
.fx-measure-sm { max-width: 52ch; }

/* Botones de marca */
.btn-fox {
  --bs-btn-bg: var(--fx-orange);
  --bs-btn-border-color: var(--fx-orange);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--fx-orange-dark);
  --bs-btn-hover-border-color: var(--fx-orange-dark);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--fx-orange-dark);
  --bs-btn-active-border-color: var(--fx-orange-dark);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-padding-x: 1.625rem;
  --bs-btn-border-radius: 10px;
  min-height: 44px;
}
.btn-fox-outline {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--fx-line);
  --bs-btn-color: var(--fx-ink);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--fx-orange);
  --bs-btn-hover-color: var(--fx-ink);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-padding-x: 1.625rem;
  --bs-btn-border-radius: 10px;
  min-height: 44px;
}
.fx-bg-plum .btn-fox-outline { --bs-btn-border-color: var(--fx-plum-line); --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; }

/* Píldoras de filtro / pestañas */
.fx-pills .nav-link {
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  color: var(--fx-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.6875rem 1.125rem;
  min-height: 44px;
}
.fx-pills .nav-link.active { background: var(--fx-orange); border-color: var(--fx-orange); color: #FFFFFF; }

/* Conmutador mensual / anual */
.fx-switch { background: var(--fx-sand); border: 1px solid var(--fx-line); border-radius: 999px; padding: 4px; gap: 4px; }
.fx-switch .btn {
  border: 0; border-radius: 999px; min-height: 44px; padding: 0.625rem 1.25rem;
  font-weight: 500; font-size: 0.875rem; color: var(--fx-muted); background: transparent;
}
.fx-switch .btn.fx-on { background: var(--fx-ink); color: #FFFFFF; }
.fx-switch .btn-check:focus-visible + .btn { outline: 3px solid var(--fx-orange); outline-offset: 3px; }

/* Tarjetas */
.fx-card { background: #FFFFFF; color: var(--fx-ink); border: 1px solid var(--fx-line); border-radius: 14px; }
.fx-card-link { color: inherit; text-decoration: none; transition: border-color 150ms ease; }
.fx-card-link:hover { border-color: var(--fx-orange); color: inherit; text-decoration: none; }
.fx-bg-plum .fx-card-link { border-color: var(--fx-plum-line); color: #FFFFFF; background: transparent; }
.fx-bg-plum .fx-card-link:hover { border-color: var(--fx-orange); color: #FFFFFF; }

/* Hero oscuro con retícula */
.fx-hero {
  background-color: var(--fx-ink);
  color: #FFFFFF;
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgba(62,104,229,0.55) 0%, rgba(62,104,229,0.12) 45%, rgba(5,6,14,0) 70%),
    radial-gradient(70% 50% at 85% 10%, rgba(18,25,58,0.9) 0%, rgba(5,6,14,0) 60%),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  background-position: center top;
}

/* Portada: fondo con trama diagonal en vez del resplandor radial */
/* La cabecera de la portada, y solo la de la portada: este bloque no lo usa ninguna
   otra página. Azul y negro, con el resplandor subiendo por debajo de la caja para que
   lo más claro del fondo caiga justo detrás de lo que hay que rellenar.

   Va en cuatro capas, de arriba abajo del apilado: el resplandor, las dos rayas de la
   retícula y el degradado de fondo. La retícula se queda muy tenue —45 milésimas— para
   que se intuya y no compita con el titular. */
.fx-hero-home {
  background-color: #05060E;
  background-image:
    radial-gradient(85% 65% at 50% -8%,
      rgba(90, 130, 255, 0.55) 0%,
      rgba(62, 104, 229, 0) 62%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #1E45C9 0%, #14276E 42%, #05060E 100%);
  background-size: auto, 88px 88px, 88px 88px, auto;
  position: relative;
}
.fx-hero-home > * { position: relative; z-index: 1; }

/* Acordeón */
.fx-accordion .accordion-button {
  font-family: var(--fx-font);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--fx-ink);
  background: var(--fx-sand);
  box-shadow: none;
}
.fx-accordion .accordion-button:not(.collapsed) { background: var(--fx-sand); color: var(--fx-ink); }
.fx-accordion .accordion-button::after { filter: none; }

/* Carrusel de testimonios */
.fx-marquee-mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fx-marquee { display: flex; gap: 1rem; width: max-content; animation: fx-marquee 46s linear infinite; }
.fx-marquee figure { width: 360px; flex: none; }
@keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Cabecera a todo el ancho -----------------------------------------------
   El margen lateral de lo que va a sangre: crece con la pantalla pero se para, para
   que en un monitor ancho el logotipo no acabe en la esquina del cristal. */
.fx-bleed { width: 100%; padding-inline: clamp(1rem, 2.5vw, 2.5rem); }

/* En móvil sigue siendo una fila que envuelve: la marca, los iconos y la hamburguesa
   arriba, y el desplegable cayendo debajo, que es como lo monta Bootstrap. */
.fx-navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

@media (min-width: 992px) {
  /* Tres zonas en fila: la marca, el menú justo a su lado y las acciones empujadas al
     borde derecho por el margen automático. */
  .fx-navbar__inner { flex-wrap: nowrap; gap: 2rem; }

  /* El menú y las acciones están dentro del desplegable porque en móvil hace falta que
     lo estén. `display: contents` lo borra como caja y deja que sus dos listas sean
     hermanas de la marca, sin repetir el marcado en dos sitios. */
  .fx-navbar__inner > .navbar-collapse { display: contents !important; }
  .fx-navbar__menu { justify-content: flex-start; }
  .fx-navbar__acciones { margin-left: auto; }
}

/* Navegación */
.fx-navbar { border-bottom: 1px solid var(--fx-line); background: #FFFFFF; }
.fx-navbar .nav-link { color: var(--fx-ink); font-weight: 600; font-size: 0.9375rem; }
.fx-navbar .nav-link:hover, .fx-navbar .nav-link:focus { color: var(--fx-orange-dark); }
.fx-navbar { position: relative; }
@media (min-width: 992px) { .position-lg-static { position: static !important; } }
/* Megamenú a todo el ancho, como el original */
.fx-navbar .dropdown-menu { border-color: var(--fx-line); border-radius: 14px; padding: 0.5rem; }
@media (min-width: 992px) {
  .fx-navbar .dropdown-menu {
    width: 100%; left: 0; right: 0; margin-top: 0;
    border: 0; border-top: 1px solid var(--fx-line); border-radius: 0;
    padding: 2rem 0; box-shadow: 0 18px 32px rgba(20, 18, 16, 0.07);
  }
}
.fx-navbar .dropdown-item { border-radius: 10px; padding: 1rem; white-space: normal; }
.fx-navbar .dropdown-item:hover, .fx-navbar .dropdown-item:focus { background: var(--fx-sand); }
.fx-navbar .dropdown-item:active { background: var(--fx-sand); color: var(--fx-ink); }
.fx-navbar .dropdown-item strong {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-weight: 500; font-size: 1rem; margin-bottom: 0.25rem;
}

/* El precio del producto, en pastilla. Antes iba pegado al nombre y se leia como si
   formara parte de el: "Foxnice Web19€/MES". */
.fx-badge {
  flex-shrink: 0;
  font-family: var(--fx-font);
  font-size: .625rem;
  letter-spacing: .04em;
  line-height: 1;
  padding: .3rem .45rem;
  border-radius: 999px;
  color: var(--fx-orange-dark);
  background: var(--fx-orange-soft);
  white-space: nowrap;
}
.fx-navbar .dropdown-item small { color: var(--fx-muted); display: block; line-height: 1.5; font-size: 0.875rem; }

/* El icono del desplegable: mismo dibujo que la tarjeta de ese servicio en /servicios
   y /soluciones, en su cuadrado suave, para que la fila se reconozca de un vistazo.
   La fila pasa a ser una caja flexible; sin icono queda exactamente como estaba. */
.fx-navbar .dropdown-item { display: flex; align-items: flex-start; gap: .75rem; }
.fx-menu-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--fx-orange-soft); color: var(--fx-orange-dark);
}
.fx-navbar .dropdown-item:hover .fx-menu-icon,
.fx-navbar .dropdown-item:focus .fx-menu-icon { background: #FFFFFF; }
/* min-width:0 para que un titulo largo parta linea en vez de estirar la columna. */
.fx-menu-body { min-width: 0; }

/* --- Teléfono y asistencia en móvil, al lado de la hamburguesa ---------------- */
.fx-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--fx-line); color: var(--fx-ink); text-decoration: none;
}
.fx-nav-icon:hover, .fx-nav-icon:focus { border-color: var(--fx-orange); color: var(--fx-orange-dark); }

:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .fx-marquee { animation: none !important; transform: none !important; }
}


/* ============ Portada: tratamiento editorial ============ */

/* Titular a gran escala con acento */
.fx-display-xl {
  font-family: var(--fx-font); font-weight: 700;
  font-size: clamp(2.5rem, 7.2vw, 6rem); line-height: 0.98; letter-spacing: -0.04em;
}
.fx-display-lg {
  font-family: var(--fx-font); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.03; letter-spacing: -0.035em;
}
.fx-mark { color: var(--fx-orange); }
.fx-underline {
  background-image: linear-gradient(var(--fx-orange), var(--fx-orange));
  background-repeat: no-repeat; background-size: 100% 0.14em; background-position: 0 92%;
}

/* Kicker con filete */
.fx-kicker {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--fx-font); font-weight: 500;
  letter-spacing: 0.1em; font-size: 0.75rem;
}
.fx-kicker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.28; }

/* Índice: filas a todo el ancho en vez de rejilla de tarjetas */
.fx-index { border-top: 1px solid var(--fx-line); }
.fx-index-row {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem 1.5rem;
  align-items: baseline; padding: 1.75rem 1rem 1.75rem 0;
  border-bottom: 1px solid var(--fx-line);
  color: inherit; text-decoration: none;
  transition: background-color 200ms ease, padding-left 200ms ease;
}
@media (min-width: 768px) {
  .fx-index-row { grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr) auto; padding-right: 1.5rem; }
}
.fx-index-row:hover, .fx-index-row:focus-visible {
  background: var(--fx-sand); padding-left: 1rem; text-decoration: none; color: inherit;
}
.fx-index-row .fx-arrow { opacity: 0; transform: translateX(-8px); transition: all 200ms ease; color: var(--fx-orange); }
.fx-index-row:hover .fx-arrow { opacity: 1; transform: translateX(0); }
.fx-index-num { font-family: var(--fx-font); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--fx-muted-2); }
.fx-index-title { font-family: var(--fx-font); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -0.02em; }

/* Variante oscura del índice */
.fx-bg-plum .fx-index, .fx-bg-plum .fx-index-row { border-color: var(--fx-plum-line); }
.fx-bg-plum .fx-index-row:hover { background: rgba(255, 255, 255, 0.04); }
.fx-bg-plum .fx-index-num { color: #7E88A8; }

/* Numeral fantasma para los pasos */
.fx-ghost-num {
  font-family: var(--fx-font); font-weight: 700;
  font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--fx-line);
}

/* Barra-prompt del hero */
.fx-prompt {
  background: #FFFFFF; border-radius: 18px; padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-end; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.fx-prompt textarea {
  border: 0; outline: 0; resize: none; flex: 1; font: inherit; font-size: 1.0625rem;
  line-height: 1.5; padding: 1rem 0; color: var(--fx-ink); background: transparent;
}
.fx-prompt textarea::placeholder { color: var(--fx-muted-2); }
@media (max-width: 575.98px) {
  .fx-prompt { flex-direction: column; align-items: stretch; padding: 1.25rem; gap: 0.75rem; }
}

/* Pestañas verticales de servicios */
.fx-vtabs .nav-link {
  width: 100%; text-align: left; border: 0; border-left: 2px solid var(--fx-line); border-radius: 0;
  padding: 1rem 1.25rem; color: var(--fx-muted);
  font-family: var(--fx-font); font-weight: 500; font-size: 1.125rem;
}
.fx-vtabs .nav-link:hover { color: var(--fx-ink); }
.fx-vtabs .nav-link.active { border-left-color: var(--fx-orange); color: var(--fx-ink); background: transparent; }
.fx-vtabs .nav-link.active span { color: var(--fx-orange); }

/* Cifra grande sobre filete */
.fx-stat { border-top: 2px solid var(--fx-ink); padding-top: 1.25rem; }
.fx-bg-plum .fx-stat { border-top-color: var(--fx-orange); }


/* ---------- Creativos de sector (dibujados) ---------- */
.fx-mini{height:150px;border-radius:10px;background:var(--fx-plum);border:1px solid var(--fx-plum-line);padding:12px;margin-bottom:1rem;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.fx-mini-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fx-mini-lbl{font-family:var(--fx-font);font-size:8.5px;letter-spacing:.09em;color:var(--fx-plum-text);opacity:.72}
.fx-mini-tag{font-family:var(--fx-font);font-size:8.5px;letter-spacing:.06em;color:#fff;background:var(--fx-orange);border-radius:3px;padding:2px 5px;white-space:nowrap}
.fx-mini-tag.is-ok{background:var(--fx-green)}
.fx-mini-tag.is-ghost{background:transparent;border:1px solid var(--fx-plum-line);color:var(--fx-plum-text)}
.fx-mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.fx-mini-cell{aspect-ratio:1/.82;border-radius:2px;background:#1B2547;border:1px solid var(--fx-plum-line)}
.fx-mini-cell.is-on{background:var(--fx-orange);border-color:var(--fx-orange)}
.fx-mini-cell.is-half{background:linear-gradient(135deg,var(--fx-orange) 50%,#1B2547 50%);border-color:var(--fx-plum-line)}
.fx-mini-rows{display:flex;flex-direction:column;gap:5px}
.fx-mini-row{display:flex;align-items:center;gap:6px}
.fx-mini-bar{height:6px;border-radius:3px;background:#26304F;flex:1}
.fx-mini-bar > i{display:block;height:100%;border-radius:3px;background:var(--fx-orange)}
.fx-mini-num{font-family:var(--fx-font);font-size:8.5px;color:var(--fx-plum-text);opacity:.8;min-width:34px}
.fx-mini-tables{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;align-content:center;flex:1}
.fx-mini-t{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--fx-plum-line);background:#1B2547}
.fx-mini-cal{align-content:center;flex:1}
.fx-mini-t.is-on{background:var(--fx-orange);border-color:var(--fx-orange)}
.fx-mini-t.is-sq{border-radius:3px}
.fx-mini-flow{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.fx-mini-node{flex:1;min-width:0;border:1px solid var(--fx-plum-line);border-radius:4px;padding:6px 4px;text-align:center;font-family:var(--fx-font);font-size:8px;letter-spacing:.05em;color:var(--fx-plum-text);background:#1B2547;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-mini-node.is-on{border-color:var(--fx-orange);color:#fff}
.fx-mini-arrow{color:var(--fx-orange);font-size:10px;line-height:1}
.fx-mini-agenda{display:flex;flex-direction:column;gap:4px}
.fx-mini-slot{display:flex;align-items:center;gap:6px;border-left:2px solid var(--fx-orange);padding-left:6px}
.fx-mini-slot.is-free{border-left-color:var(--fx-plum-line)}
.fx-mini-slot span{font-family:var(--fx-font);font-size:8.5px;color:var(--fx-plum-text)}
.fx-mini-slot .fx-mini-bar{height:5px}


/* ---------- Creativo: tres pasos ---------- */
.fx-proc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;background:#fff;border:2px solid var(--fx-ink);border-radius:14px;overflow:hidden}
.fx-proc-col{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.fx-proc-sep{width:2px;background:var(--fx-line)}
.fx-proc-k{font-family:var(--fx-font);font-size:9px;letter-spacing:.1em;color:var(--fx-muted-2)}
.fx-proc-line{height:7px;border-radius:4px;background:var(--fx-line)}
.fx-proc-line.is-o{background:var(--fx-orange-soft)}
.fx-proc-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-family:var(--fx-font);font-size:10px;color:var(--fx-muted);border-bottom:1px dashed var(--fx-line);padding-bottom:5px}
.fx-proc-total{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-family:var(--fx-font);font-size:11px;color:var(--fx-ink);font-weight:600}
.fx-proc-check{display:flex;align-items:center;gap:.5rem;font-family:var(--fx-font);font-size:10px;color:var(--fx-muted)}
.fx-proc-check b{width:14px;height:14px;border-radius:50%;background:var(--fx-green);color:#fff;font-size:8px;display:grid;place-items:center;flex:none}
.fx-proc-bubble{border:1px solid var(--fx-line);border-radius:10px;padding:.5rem .625rem;font-size:11px;color:var(--fx-muted);line-height:1.35}
.fx-proc-bubble.is-us{background:var(--fx-orange-soft);border-color:#C9D6FA}
@media (max-width:767.98px){.fx-proc{grid-template-columns:1fr}.fx-proc-sep{width:auto;height:2px}}

/* ---------- Creativo: siete productos en producción ---------- */
.fx-prodstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;border:1px solid var(--fx-plum-line);border-radius:12px;padding:.75rem;background:rgba(255,255,255,.03)}
.fx-prodstrip > div{display:flex;flex-direction:column;gap:.375rem;padding:.625rem .75rem;border-radius:8px;background:#1B2547;border:1px solid var(--fx-plum-line)}
.fx-prodstrip span{font-family:var(--fx-font);font-size:9px;letter-spacing:.05em;color:var(--fx-plum-text)}
.fx-prodstrip strong{font-size:12px;color:#fff;font-weight:500}
.fx-prodstrip i{display:block;height:4px;border-radius:2px;background:var(--fx-green)}


/* ---------- Fotografía con tratamiento de marca (duotono ciruela/naranja) ---------- */
.fx-photo{position:relative;overflow:hidden;border-radius:14px;border:2px solid var(--fx-ink);background:var(--fx-plum);isolation:isolate}
.fx-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) sepia(.42) contrast(1.06) brightness(1.02)}
.fx-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(215deg,rgba(62,104,229,.42),rgba(18,25,58,.55) 72%);pointer-events:none}
.fx-photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px);pointer-events:none}
.fx-photo figcaption{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--fx-font);font-size:9px;letter-spacing:.09em;color:#fff;background:var(--fx-ink);padding:5px 10px;border-top-right-radius:8px}

/* --- Artículo del blog ---------------------------------------------------- */

/* Un artículo se lee en columna estrecha y centrada. Estrecha también los bloques
   que vengan dentro, que traen el contenedor ancho del resto de páginas. */
.fx-article .container,
.fx-article .fx-col { max-width: 720px; }

/* Dentro del artículo la columna ya es estrecha: volver a limitar el texto por número
   de caracteres lo dejaba más angosto todavía que en la maqueta. */
.fx-article .fx-measure { max-width: none; }
.fx-article .fx-section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.fx-article h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: 1.75rem; }
.fx-article h2:first-child { margin-top: 0; }
.fx-article p { margin-bottom: 1.25rem; }

/* La banda naranja de cierre no es parte del texto: recupera su ancho. */
.fx-article section[style*="--fx-orange"] .container { max-width: 760px; }

/* --- Entradilla ----------------------------------------------------------- */

/* Primer párrafo grande y el resto en tono secundario: abre una página con una idea
   antes de entrar en detalle. */
.fx-lead > p:first-child { font-size: 1.5rem; line-height: 1.5; margin-bottom: 1.5rem; }
.fx-lead > p:first-child + p { color: var(--fx-muted); max-width: 68ch; }

/* --- Secciones seguidas --------------------------------------------------- */

/* Dos secciones con el mismo fondo, una detrás de otra, sumaban el relleno de las dos
   y dejaban un hueco que la maqueta no tiene. La segunda pierde el de arriba.

   Las dos tienen que ser del mismo color, y por eso la primera parte del selector
   tambien excluye los fondos: antes bastaba con que la anterior fuera una seccion
   cualquiera, asi que lo que iba detras de una banda crema o granate se quedaba sin
   aire arriba y aparecia pegado al cambio de color. Habia una regla despues para
   devolverselo, pero tenia menos especificidad y no ganaba nunca.

   Las excepciones con nombre propio -las dos cabeceras oscuras, la banda de cierre y la
   cabecera de un articulo- son secciones que ya rematan por su cuenta, con un fondo de
   color o con una linea, pero sin una clase `fx-bg-`: se lo pone su propia regla o un
   estilo en linea. Sin nombrarlas, esta regla las tomaba por secciones en blanco y lo
   que venia detras aparecia pegado al borde. */
:is(.fx-section, .fx-section-sm):not([class*="fx-bg-"], .fx-hero, .fx-hero-home, .fx-article__head, .fx-cta)
    + :is(.fx-section, .fx-section-sm):not([class*="fx-bg-"], .fx-hero, .fx-hero-home, .fx-cta),
.fx-bg-sand + .fx-bg-sand,
.fx-bg-plum + .fx-bg-plum { padding-top: 0; }

/* Y sin la linea de separacion entre ambas: son la misma banda, no dos. */
.fx-bg-sand + .fx-bg-sand,
.fx-bg-plum + .fx-bg-plum { border-top: 0; }

/* Cuando CAMBIA el fondo, el aire tambien se duplicaba: el relleno de abajo de la
   banda mas el de arriba de la seccion siguiente, dos veces `clamp(3.5rem, 9vw, 8rem)`
   = hasta 256 px de nada entre un parrafo y el titular de despues. En una pagina de
   servicio, con texto seguido, eso es un quinto de pantalla en blanco.

   El corte de color ya separa por si solo, asi que solo hace falta un aire, no dos. Se
   recorta el lado SIN fondo y se deja intacto el relleno de la banda: ese relleno es lo
   que la hace banda, y quitarselo le pegaria el texto al borde del color.

   Es el mismo valor que ya usa la cabecera de pagina interior unas lineas mas abajo,
   por el mismo motivo. */
:is([class*="fx-bg-"], .fx-cta, .fx-hero, .fx-hero-home)
    + :is(.fx-section, .fx-section-sm):not([class*="fx-bg-"], .fx-cta) {
    padding-top: clamp(2rem, 5vw, 4rem);
}

:is(.fx-section, .fx-section-sm):not([class*="fx-bg-"], .fx-cta, .fx-hero, .fx-hero-home, .fx-pagehero):has(+ :is([class*="fx-bg-"], .fx-cta)) {
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* Ancho de lectura de los bloques de texto. Va en clase y no en estilo en línea para
   que el artículo pueda estrecharlo: un estilo en línea gana siempre a la hoja. */
.fx-col { max-width: 820px; }

/* --- Cabecera de página interior ------------------------------------------ */

/* Sin esto los botones acaban pegados al borde de la sección siguiente, justo en el
   cambio de color. Es poco: lo justo para que respiren sin duplicar el aire que ya
   pone la sección de abajo. */
.fx-pagehero { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* Si lo que sigue no cambia de fondo, ese aire ya lo pone la otra sección. */
.fx-pagehero:not([class*="fx-bg-"]) + .fx-section:not([class*="fx-bg-"]) { padding-top: clamp(2rem, 5vw, 4rem); }

/* --- Iconos de tarjeta ------------------------------------------------------
   El icono va dentro de un cuadrado suave del color de marca y no suelto sobre el
   fondo: en una rejilla de ocho tarjetas, ocho dibujos flotando se leen como ruido;
   dentro de su caja se leen como una serie. */
.fx-icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--fx-orange-soft); color: var(--fx-orange-dark);
}
.fx-bg-plum .fx-icon-box { background: rgba(255, 255, 255, .08); color: var(--fx-orange); }

/* --- Lista de precios ----------------------------------------------------- */

.fx-precios li + li { border-top: 1px solid var(--fx-line); }
.fx-precios__fila { color: inherit; text-decoration: none; }
a.fx-precios__fila:hover { background: var(--fx-sand); }
a.fx-precios__fila:hover .fx-num { color: var(--fx-orange); }

/* ---------------------------------------------------------------------------
   Mini-maquetas en pantallas estrechas

   Cada fila de las ilustraciones es un concepto que crece y dos piezas fijas
   -el dato y el estado- que no encogen. Por debajo de 576 px la suma puede no
   caber y la pagina entera se desplazaba en horizontal. Se les deja partirse en
   dos lineas, que solo ocurre cuando de verdad no caben; cortar el texto con
   puntos suspensivos dejaba etiquetas ilegibles.

   La cabecera de cada maqueta -titulo a un lado y sello al otro- se queda en
   una linea: ahi el titulo ya sabe partirse solo.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* Un punto menos de cuerpo y menos aire entre piezas: con esto la mayoria de
       filas siguen cabiendo en una linea en un movil corriente. */
    .fx-maqueta { font-size: 0.9375rem; }
    .fx-maqueta .gap-3 { gap: 0.75rem !important; }
    .fx-maqueta .d-flex { flex-wrap: wrap; }
    .fx-maqueta .d-flex.justify-content-between { flex-wrap: nowrap; }
}

/* --- Lista de comprobación ------------------------------------------------- */

/* La lista es lo único con color de la sección, así que la primera línea lleva un
   filete más grueso: marca dónde empieza sin necesidad de otro título. Va en el color
   de marca y no en verde, que era el único verde suelto de toda la página.

   Con !important porque la clase `border-top` de Bootstrap ya lo lleva y, sin él, la
   utilidad gana aunque esta regla vaya después. */
.fx-check li:first-child { border-top-width: 2px !important; border-top-color: var(--fx-orange) !important; }

/* Sobre la banda oscura las líneas grises de Bootstrap no se ven. */
.fx-bg-plum.fx-check li { border-top-color: var(--fx-plum-line) !important; }

/* --- Palabras que no caben -------------------------------------------------- */

/* Un nombre de fichero, una URL pegada o un identificador largo dentro de un texto
   no tienen por dónde partirse, y en un móvil estrecho empujan la página entera.
   Se les deja partir en cualquier punto, que es preferible a un desplazamiento
   horizontal en toda la web. */
.fx-col, .fx-article, .fx-measure { overflow-wrap: anywhere; }

/* --- Bloques en columna ----------------------------------------------------- */

/* Un bloque puede colocarse a media fila junto a otro. La fila la monta el núcleo y
   es la que pone el aire vertical y el contenedor, así que aquí solo hay que quitarle
   al bloque lo que ya trae puesto: su propio relleno, su contenedor y su fondo de
   banda. Sin esto se anidarían dos contenedores y el aire se sumaría dos veces.

   Se hace en el tema y no en el núcleo porque estas clases son del tema. */
.fx-col-block > section {
    padding-block: 0;
}
.fx-col-block > section > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

/* Las bandas de color pierden el fondo: dentro de una fila el fondo lo pone la fila,
   no cada columna, y si no quedarían dos rectángulos de color desalineados. */
.fx-col-block > .fx-bg-sand,
.fx-col-block > .fx-bg-plum {
    background: none;
    border: 0;
    color: inherit;
}

/* Los anchos de lectura sobran: la columna ya es estrecha. */
.fx-col-block .fx-measure,
.fx-col-block .fx-col { max-width: none; }

/* Y las rejillas internas del propio bloque se aplanan. Un bloque que se reparte en
   5 y 7 columnas tiene sentido a lo ancho de la pagina; dentro de media fila, no.
   Solo se tocan las de escritorio: las parejas de campos (col-md-*) se quedan. */
.fx-col-block .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Varios bloques en la misma columna se separan entre ellos; el primero no, que el
   aire de arriba lo pone la fila. */
.fx-col-block > section + section { margin-top: 2rem; }

/* --- IP del visitante ------------------------------------------------------- */

/* Un dato que se copia y se pega, no que se lee: grande, monoespaciado y
   seleccionable de un toque. */
.fx-ip {
    font-family: var(--fx-font);
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    /* Se parte si hace falta: una IPv6 no cabe entera en un movil. */
    overflow-wrap: anywhere;
    user-select: all;
}


/* ============================================================================
   Páginas de solución

   Todo lo que hay bajo `.fx-solution` es de la plantilla «Solución» —el índice de
   soluciones y las seis fichas— y de ningún otro sitio: la cabecera en degradado, las
   preguntas a filete fino y la forma de la banda de cierre. La clase la pone
   page-solucion.blade.php, así que el resto de la web se queda exactamente como está.

   Lo que sí es de todo el tema son las piezas de abajo —la rejilla bento, la pastilla
   del antetítulo, la ilustración montada y la tabla de planes—, porque son componentes
   y no el maquillaje de una página: dos aspectos distintos para el mismo bloque de
   tarifas serían dos diseños que mantener.
   ============================================================================ */

/* --- Cabecera oscura en degradado ------------------------------------------
   Ciruela arriba a la izquierda, brasa arriba a la derecha y violeta subiendo desde
   abajo. Es el mismo salto de color de la portada, pero apaisado: la ficha abre a dos
   columnas y un resplandor centrado dejaba el lado del texto plano. */
.fx-solution .fx-pagehero.fx-bg-plum {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(115% 80% at 86% 2%, rgba(62, 104, 229, 0.40) 0%, rgba(62, 104, 229, 0.08) 44%, rgba(18, 25, 58, 0) 70%),
    radial-gradient(85% 70% at 4% 106%, rgba(122, 79, 182, 0.42) 0%, rgba(18, 25, 58, 0) 62%),
    linear-gradient(158deg, #24346B 0%, #12193A 48%, #0B1027 100%);
  border-bottom: 3px solid var(--fx-orange);
}
/* La retícula va en un pseudoelemento y no como cuarta capa del fondo: encima del
   degradado se ve, mezclada con él se pierde en las zonas claras. */
.fx-solution .fx-pagehero.fx-bg-plum::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  pointer-events: none;
}
.fx-solution .fx-pagehero.fx-bg-plum > .container { position: relative; z-index: 1; }

/* --- Antetítulo en pastilla -------------------------------------------------
   El antetítulo de una cabecera oscura pasa a ser una pastilla, pero SOLO en las
   páginas de solución: el mismo bloque abre las nueve páginas de servicios, que no
   entran en este rediseño. Por eso la clase tiene dos estados —el de siempre, mono y
   naranja, y la pastilla— y no dos marcados distintos: el bloque se pinta igual en
   todas partes y es la página la que decide cómo se ve.

   El punto naranja no es adorno: es lo que hace que la pastilla se lea como una
   etiqueta y no como un botón desactivado. */
.fx-chip {
  font-family: var(--fx-font);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--fx-orange);
}
.fx-solution .fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  line-height: 1.4;
}
.fx-solution .fx-chip::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fx-orange);
}

/* --- Ilustración montada ----------------------------------------------------
   Como la pastilla, solo en las páginas de solución: los divs que la envuelven se
   pintan siempre, pero sin estas reglas no hacen nada y la cabecera de un servicio
   sale exactamente igual que antes.

   Una maqueta blanca recortada sobre un degradado se lee como una captura pegada. Se
   le pone detrás un panel desplazado y un halo del color de marca, y se la inclina
   grado y pico: con eso pasa a estar dentro de la escena.

   La sombra va en `drop-shadow` y no en `box-shadow` porque sigue la silueta real de
   la maqueta; una sombra de caja dejaría las esquinas cuadradas por fuera del redondeo
   de la tarjeta. */
.fx-solution .fx-stage { position: relative; }
.fx-solution .fx-stage::before {
  content: "";
  position: absolute;
  inset: 12% -4% -9% 9%;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fx-solution .fx-stage::after {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(circle at 58% 42%, rgba(62, 104, 229, 0.30), rgba(62, 104, 229, 0) 62%);
  pointer-events: none;
}
.fx-solution .fx-stage__main {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.45));
}
@media (max-width: 991.98px) {
  .fx-solution .fx-stage::before { inset: 10% -2% -6% 5%; }
}

/* --- Rejilla bento ----------------------------------------------------------
   Seis columnas porque es el único reparto que se divide igual de bien en dos y en
   tres: el mismo bloque compone tres tarjetas y seis sin decidir nada por cada una.

   La celda grande ocupa cuatro columnas y dos filas, y las normales dos columnas y
   una. Con eso, tres tarjetas salen como una grande y dos apiladas al lado, y seis
   como esa misma pareja más una fila de tres debajo. El tamaño lo dice cada tarjeta,
   así que reordenarlas desde el panel no descoloca la composición.

   Hasta 768 px no hay rejilla: una columna. Una celda «grande» en un móvil de 360 px
   no es grande, es la única. */
.fx-bento { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .fx-bento { grid-template-columns: repeat(6, 1fr); }
  .fx-bento__cell { grid-column: span 3; }
  .fx-bento__cell--hero,
  .fx-bento__cell--wide { grid-column: span 6; }
}
@media (min-width: 992px) {
  .fx-bento__cell { grid-column: span 2; }
  .fx-bento__cell--wide { grid-column: span 4; }
  .fx-bento__cell--hero { grid-column: span 4; grid-row: span 2; }
}

.fx-tile {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--fx-line);
  border-radius: 20px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
a.fx-tile:hover, a.fx-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20, 18, 16, 0.10);
  border-color: var(--fx-orange);
  color: inherit;
  text-decoration: none;
}

/* El resplandor de la esquina es lo que separa una celda bento de una tarjeta: da
   profundidad sin meter otra imagen que cargar. */
.fx-tile::after {
  content: "";
  position: absolute;
  right: -18%; top: -38%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 104, 229, 0.14), rgba(62, 104, 229, 0) 68%);
  pointer-events: none;
}

/* Los cuatro tintes, todos de la paleta: arena, naranja suave, ciruela y brasa. */
.fx-tile--sand  { background-image: linear-gradient(155deg, #FBFBFC 0%, #E9EAEE 100%); border-color: #E0E1E7; }
.fx-tile--peach { background-image: linear-gradient(155deg, #EEF2FE 0%, #C9D6FA 100%); border-color: #BCCCF8; }
.fx-tile--plum  { background-image: linear-gradient(155deg, #24346B 0%, #080C1D 100%); border-color: var(--fx-plum-line); color: #FFFFFF; }
.fx-tile--ember { background-image: linear-gradient(155deg, #4A73E8 0%, #2246B0 100%); border-color: #2246B0; color: #FFFFFF; }
.fx-tile--plum::after  { background: radial-gradient(circle, rgba(62, 104, 229, 0.40), rgba(62, 104, 229, 0) 68%); }
.fx-tile--ember::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 68%); }

.fx-tile > * { position: relative; z-index: 1; }
.fx-tile__title {
  font-family: var(--fx-font);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.fx-bento__cell--hero .fx-tile { padding: 2.25rem; }
.fx-bento__cell--hero .fx-tile__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* En la celda grande el texto baja al pie: ocupa dos filas y, con el contenido
   arriba, la mitad de abajo se quedaba vacía y parecía un fallo. Anclado abajo, el
   hueco pasa a ser el aire de la tarjeta —el icono arriba, lo que se lee abajo—, que
   es como se compone una pieza grande. */
.fx-bento__cell--hero .fx-tile__title { margin-top: auto; }
/* Y la línea de cierre deja de empujar: con dos márgenes automáticos el hueco se
   repartía entre los dos y quedaba una franja suelta entre el texto y el precio. */
.fx-bento__cell--hero .fx-tile__spec { margin-top: 0.5rem; }
.fx-tile__text { margin: 0; font-size: 0.9375rem; color: var(--fx-muted); }
.fx-tile__more { font-weight: 500; font-size: 0.9375rem; color: var(--fx-orange-dark); }
.fx-tile--plum .fx-tile__text,
.fx-tile--ember .fx-tile__text { color: rgba(255, 255, 255, 0.78); }
.fx-tile--plum .fx-tile__more,
.fx-tile--ember .fx-tile__more { color: #FFFFFF; }

/* La línea de cierre se pega abajo: en una rejilla de alturas desiguales, los precios
   alineados entre sí son lo que deja comparar de un vistazo. */
.fx-tile__spec {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 18, 16, 0.10);
  font-family: var(--fx-font);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fx-muted-2);
}
.fx-tile--plum .fx-tile__spec,
.fx-tile--ember .fx-tile__spec { border-top-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.72); }

.fx-tile--sand .fx-icon-box,
.fx-tile--peach .fx-icon-box { background: rgba(255, 255, 255, 0.70); }
.fx-tile--plum .fx-icon-box  { background: rgba(255, 255, 255, 0.10); color: var(--fx-orange); }
.fx-tile--ember .fx-icon-box { background: rgba(255, 255, 255, 0.20); color: #FFFFFF; }

/* Una mini-maqueta dentro de una celda ya trae su propio aire por debajo. */
.fx-tile__art .fx-mini { margin-bottom: 0; }

/* --- Tabla de planes --------------------------------------------------------
   El destacado deja de ser «la tarjeta naranja clarita» y pasa a ser la oscura, un
   punto más alta que las otras dos y con su sello encima. Sin el sello, «destacado»
   es un color de fondo que hay que interpretar. */
.fx-plan { position: relative; }
.fx-plan__badge {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  padding: 0.35rem 0.625rem;
  border-radius: 999px;
  background: var(--fx-orange);
  color: #FFFFFF;
  font-family: var(--fx-font);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  line-height: 1;
}
.fx-card-featured {
  background: linear-gradient(158deg, #1E45C9 0%, #06070E 100%);
  border-color: var(--fx-plum-line);
  color: #FFFFFF;
  box-shadow: 0 26px 60px rgba(20, 18, 16, 0.24);
}
.fx-card-featured h3 { color: #FFFFFF; }
.fx-card-featured .fx-text-muted { color: rgba(255, 255, 255, 0.72) !important; }
@media (min-width: 992px) { .fx-card-featured { transform: translateY(-14px); } }

/* Lo que entra en el plan, con su marca de verificación: una lista de conceptos
   sueltos se lee como un párrafo troceado. */
.fx-feat { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--fx-muted); }
.fx-feat__tick { flex: none; margin-top: 0.175rem; color: var(--fx-green); }
.fx-card-featured .fx-feat { color: rgba(255, 255, 255, 0.86); }
/* Sobre el degradado azul, el azul de marca desaparece: la marca de verificacion
   pasa a un azul claro, que es lo que se ve sobre fondo oscuro. */
.fx-card-featured .fx-feat__tick { color: #8FAEFF; }

/* --- Preguntas a filete fino ------------------------------------------------
   Sin caja de color y con un «+» que gira a aspa al abrirse: la sección de preguntas
   de una ficha es una lista larga, y seis bloques arena seguidos pesan más que las
   respuestas que contienen. */
.fx-solution .fx-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.375rem;
  --bs-accordion-body-padding-x: 0;
}
.fx-solution .fx-accordion .accordion-item { border-top: 1px solid var(--fx-line); background: transparent; }
.fx-solution .fx-accordion .accordion-item:last-child { border-bottom: 1px solid var(--fx-line); }
.fx-solution .fx-accordion .accordion-button { background: transparent; }
.fx-solution .fx-accordion .accordion-button:not(.collapsed) { background: transparent; color: var(--fx-orange-dark); }
.fx-solution .fx-accordion .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D1E20' stroke-width='1.6' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B4FBF' stroke-width='1.6' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-transform: rotate(45deg);
  --bs-accordion-btn-icon-width: 1.125rem;
}
.fx-solution .fx-accordion .accordion-body { padding-bottom: 1.5rem; }

/* --- Banda de cierre con forma ---------------------------------------------
   Dos cuadrados girados sobre el naranja, uno lleno y otro solo de contorno. Es lo
   único que separa la banda de un rectángulo de color, y se queda detrás del texto. */
.fx-solution .fx-cta,
.fx-hz .fx-cta { position: relative; overflow: hidden; }
.fx-solution .fx-cta > .container,
.fx-hz .fx-cta > .container { position: relative; z-index: 1; }
.fx-solution .fx-cta::before,
.fx-solution .fx-cta::after,
.fx-hz .fx-cta::before,
.fx-hz .fx-cta::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  transform: rotate(38deg);
  pointer-events: none;
}
.fx-solution .fx-cta::before,
.fx-hz .fx-cta::before {
  right: -8%; top: 20%;
  width: min(34rem, 58%);
  border-radius: 64px;
  background: rgba(255, 255, 255, 0.10);
}
.fx-solution .fx-cta::after,
.fx-hz .fx-cta::after {
  right: 6%; top: 42%;
  width: min(20rem, 34%);
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}


/* --- Imagen y texto ---------------------------------------------------------
   El patrón que repite una página de producto larga: media a un lado y, al otro, el
   titular con lo que hace en forma de lista. Va sin acotar a `.fx-solution` porque el
   bloque es nuevo y no tiene un aspecto anterior que respetar. */
.fx-feature__media {
  border-radius: 20px;
  overflow: hidden;
}
.fx-feature__media img { display: block; width: 100%; height: auto; }

/* Un punto de la lista: la marca de verificación fuera, y dentro el concepto en
   negrita con su explicación debajo. Sin el título es una línea normal, que es como se
   usa cuando los puntos son cortos. */
.fx-point { display: flex; align-items: flex-start; gap: 0.75rem; }
.fx-point__tick { flex: none; margin-top: 0.15rem; color: var(--fx-green); }
.fx-point__title {
  display: block;
  font-family: var(--fx-font);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.125rem;
}
.fx-point__text { color: var(--fx-muted); font-size: 0.9375rem; }

/* Sobre la banda oscura el gris del texto secundario no se lee y el verde del check
   se apaga: los dos se cambian por los de la paleta oscura. */
.fx-bg-plum .fx-point__text { color: var(--fx-plum-text); }
.fx-bg-plum .fx-point__tick { color: var(--fx-orange); }
.fx-bg-plum .fx-point__title { color: #FFFFFF; }


/* --- Hueco de una foto pendiente --------------------------------------------
   Cuando el campo Imagen lleva un encargo `magnific:<término>` en vez de una ruta. No
   es una ilustración que haga las veces de la foto: es el hueco con su proporción y el
   término escrito dentro, para que al revisar se vea la composición real y se sepa qué
   foto falta en cada sitio. Se va solo en cuanto la foto entra. */
.fx-foto-hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 3 / 2;
  padding: 1.5rem;
  text-align: center;
  border-radius: 20px;
  border: 1px dashed var(--fx-line);
  background:
    repeating-linear-gradient(135deg, rgba(20, 18, 16, 0.028) 0 1px, transparent 1px 9px),
    var(--fx-sand);
  color: var(--fx-muted-2);
}
.fx-foto-hueco__tit {
  font-family: var(--fx-font);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
}
.fx-foto-hueco__term {
  font-family: var(--fx-font);
  font-size: 0.9375rem;
  color: var(--fx-muted);
  max-width: 28ch;
}

/* Sobre la banda oscura y dentro de la cabecera montada, el hueco se aclara: el arena
   sobre ciruela se lee como un recorte de otra página. */
.fx-bg-plum .fx-foto-hueco,
.fx-stage__main .fx-foto-hueco {
  border-color: rgba(255, 255, 255, 0.22);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px),
    rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.62);
}
.fx-bg-plum .fx-foto-hueco__term,
.fx-stage__main .fx-foto-hueco__term { color: rgba(255, 255, 255, 0.82); }


/* --- Barra de secciones -----------------------------------------------------
   Se queda pegada arriba al desplazar. No sustituye al menú del sitio: va debajo y
   solo habla de la página en la que estás.

   `scroll-margin-top` en las secciones con ancla es lo que evita que, al saltar a una,
   la barra tape justo el titular al que acabas de ir. */
.fx-subnav {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--fx-line);
}
.fx-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
}
.fx-subnav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /* En un móvil no caben seis secciones: la tira se desplaza en horizontal en vez de
     partirse en dos líneas y doblar la altura de la barra. */
  overflow-x: auto;
  scrollbar-width: none;
}
.fx-subnav__list::-webkit-scrollbar { display: none; }
.fx-subnav__list a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--fx-ink);
  text-decoration: none;
}
.fx-subnav__list a:hover,
.fx-subnav__list a:focus-visible { background: var(--fx-sand); color: var(--fx-orange-dark); }

.fx-subnav__cta {
  flex: none;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.125rem;
  min-height: 40px;
  font-size: 0.9375rem;
}
/* Con poco sitio el botón sobra: los enlaces son lo que hace falta. */
@media (max-width: 575.98px) { .fx-subnav__cta { display: none; } }

[id] { scroll-margin-top: 72px; }


/* ============================================================================
   Maqueta con el lenguaje visual de la referencia

   Todo lo que hay bajo `.fx-hz` sale de los valores del CSS de la web que se puso de
   ejemplo, traducidos a la paleta de Foxnice: superficie gris muy clara en vez de las
   bandas arena y ciruela, esquinas de 16 px en las tarjetas y 24 px en los planes,
   filete de un píxel sin sombra, aire de sección de 96 px en escritorio, y las
   secciones de imagen y texto montadas dentro de una sola tarjeta con la foto a
   sangre por un lado.

   Va acotado a su clase porque conviven dos diseños: /soluciones mantiene el suyo.
   ============================================================================ */
.fx-hz {
  --hz-surface: #F4F4F6;
  --hz-line: #E6E6EA;
  --hz-radius: 16px;
  --hz-radius-lg: 24px;
}

/* Aire de sección: 64 px en móvil y 96 en escritorio, como la referencia. */
.fx-hz .fx-section,
.fx-hz .fx-section-sm { padding-block: clamp(4rem, 8vw, 6rem); }

/* Las bandas de color se convierten en superficie gris, que es lo que separa una
   sección de otra en la referencia: no hay bloques crema ni granate. */
.fx-hz .fx-bg-sand {
  background: var(--hz-surface);
  border-top-color: var(--hz-line);
  border-bottom-color: var(--hz-line);
}

/* --- Tarjetas ---------------------------------------------------------------
   Filete de un píxel y esquina de 16: sin sombra, que es lo que da el aspecto plano
   y ordenado de la referencia. */
.fx-hz .fx-card,
.fx-hz .fx-tile {
  border-radius: var(--hz-radius);
  border-color: var(--hz-line);
  box-shadow: none;
}
.fx-hz .fx-tile--sand { background: var(--hz-surface); background-image: none; }
.fx-hz .fx-tile--peach { background-image: linear-gradient(160deg, #EEF2FE, #DCE5FD); }

/* --- Antetítulo en pastilla -------------------------------------------------
   En la referencia el antetítulo de una cabecera es una pastilla con fondo tenue,
   también sobre claro. Aquí se le da esa forma al `fx-eyebrow` de siempre, sin tocar
   el marcado. */
.fx-hz .fx-pagehero .fx-eyebrow,
.fx-hz .fx-feature .fx-eyebrow {
  display: inline-block;
  /* La columna es una caja flexible, así que sin esto la pastilla se estira a todo el
     ancho y deja de ser una pastilla. */
  align-self: flex-start;
  width: fit-content;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--fx-orange-soft);
  color: var(--fx-orange-dark);
}

/* --- Imagen y texto, dentro de una sola tarjeta -----------------------------
   Es el patrón que más repite la referencia: una superficie redondeada que contiene
   las dos mitades, con la imagen pegada al borde —sin margen— y el texto acolchado al
   otro lado. `--bs-gutter-*` a cero porque la separación la quita la tarjeta. */
.fx-hz .fx-feature > .container > .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  background: var(--hz-surface);
  border-radius: var(--hz-radius);
  overflow: hidden;
  /* El bloque trae `align-items-center` de Bootstrap, que es una utilidad y viene con
     `!important`. Sin estirar la columna, el `height:100%` de la foto no tiene contra
     qué resolverse y se queda a su altura natural: la imagen salía centrada y la
     tarjeta asomando por arriba y por abajo. Contra un `!important` la especificidad
     no sirve de nada, así que hay que repetirlo. */
  align-items: stretch !important;
}
.fx-hz .fx-feature > .container > .row > [class*="col-"] { display: flex; flex-direction: column; justify-content: center; }
.fx-hz .fx-feature > .container > .row > [class*="col-"]:has(.fx-feature__media) { padding: 0; }
.fx-hz .fx-feature > .container > .row > [class*="col-"]:not(:has(.fx-feature__media)) {
  padding: clamp(1.75rem, 4vw, 3rem);
}
.fx-hz .fx-feature__media { border-radius: 0; height: 100%; }
.fx-hz .fx-feature__media > * { height: 100%; }
.fx-hz .fx-feature__media img { height: 100%; object-fit: cover; }

/* Sobre la banda oscura la tarjeta se oscurece con ella. */
.fx-hz .fx-feature.fx-bg-plum > .container > .row { background: rgba(255, 255, 255, 0.05); }

/* --- Hueco de foto ----------------------------------------------------------
   Dentro de la tarjeta de imagen y texto la foto va a sangre, así que el hueco pierde
   su esquina y su proporción fija y se estira a la altura de la tarjeta. */
.fx-hz .fx-feature__media .fx-foto-hueco {
  aspect-ratio: auto;
  min-height: 20rem;
  height: 100%;
  border-radius: 0;
  border: 0;
  background:
    repeating-linear-gradient(135deg, rgba(20, 18, 16, 0.03) 0 1px, transparent 1px 10px),
    #EAEAEE;
}
@media (max-width: 991.98px) {
  .fx-hz .fx-feature__media .fx-foto-hueco { min-height: 14rem; }
}

/* --- Barra de secciones -----------------------------------------------------
   Misma pastilla flotante de la referencia: fondo elevado, filete y sombra corta. */
.fx-hz .fx-subnav {
  background: transparent;
  border: 0;
  padding-top: 1rem;
}
.fx-hz .fx-subnav__inner {
  background: #FFFFFF;
  border: 1px solid var(--hz-line);
  border-radius: 999px;
  padding: 4px 4px 4px 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-height: 52px;
}
.fx-hz .fx-subnav__list a { border-radius: 999px; }
.fx-hz .fx-subnav__list a:hover { background: var(--hz-surface); }

/* --- Preguntas --------------------------------------------------------------
   Filete inferior y 20 px de aire, como la referencia; el «+» ya lo pone el tema. */
.fx-hz .fx-accordion { --bs-accordion-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-padding-x: 0; --bs-accordion-body-padding-x: 0; }
.fx-hz .fx-accordion .accordion-item { border-bottom: 1px solid var(--hz-line); background: transparent; }
.fx-hz .fx-accordion .accordion-button { background: transparent; font-size: 1.25rem; }
.fx-hz .fx-accordion .accordion-button:not(.collapsed) { background: transparent; color: var(--fx-ink); }
.fx-hz .fx-accordion .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D1E20' stroke-width='1.6' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D1E20' stroke-width='1.6' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-transform: rotate(45deg);
  --bs-accordion-btn-icon-width: 1rem;
}

/* --- Rejilla de tarjetas ----------------------------------------------------
   En la referencia esta rejilla va sobre gris con las tarjetas en blanco, no al revés. */
.fx-hz .fx-tile { background: #FFFFFF; }
.fx-hz .fx-tile::after { display: none; }

/* Menos las oscuras, que siguen siendo oscuras. La línea de arriba usa el atajo
   `background`, que borra el `background-image` con el que están hechas: la baldosa se
   quedaba en blanco y el texto, que es blanco, desaparecía dentro. Va después y no
   antes porque a igual especificidad manda la última. */
.fx-hz .fx-tile--plum { background-image: linear-gradient(155deg, #24346B 0%, #080C1D 100%); }
.fx-hz .fx-tile--ember { background-image: linear-gradient(155deg, #4A73E8 0%, #2246B0 100%); }


/* --- Fotos redondeadas y barra con más aire ---------------------------------
   La referencia redondea toda imagen suelta a 16 px, el mismo radio que sus tarjetas;
   la que va a sangre dentro de una tarjeta no lleva radio propio, lo hereda del
   recorte de la tarjeta. Y el botón de la barra de secciones respira por los lados:
   pegado al borde de la pastilla se leía apretado. */
.fx-hz .fx-pagehero img,
.fx-hz .tab-pane img,
.fx-hz .fx-tile__art img,
.fx-hz .fx-imagerow img { border-radius: var(--hz-radius); }

.fx-hz .fx-pagehero .fx-foto-hueco,
.fx-hz .tab-pane .fx-foto-hueco { border-radius: var(--hz-radius); }

/* El botón de la barra, con aire por los lados y separado de los enlaces: pegado al
   borde de la pastilla y al último enlace se leía apretado. */
.fx-hz .fx-subnav__inner { padding-inline: 1rem 0.625rem; }
.fx-hz .fx-subnav__cta {
  --bs-btn-padding-x: 2.25rem;
  --bs-btn-padding-y: 0.625rem;
  min-height: 42px;
  margin-inline-start: 1.5rem;
}

/* --- Botón flotante de WhatsApp ---------------------------------------------
   Círculo de 56 px abajo a la derecha, verde de marca de WhatsApp, con el icono
   oficial dentro y un halo que late para que se vea sin llegar a molestar.

   El halo va en un pseudoelemento propio y no en el botón: animar una sombra o el
   propio círculo obliga al navegador a repintar el botón en cada fotograma, y esto
   está fijo encima de todo el rato. Así solo se anima una capa suelta. */
.fx-wa {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: background-color 150ms ease;
}
.fx-wa:hover,
.fx-wa:focus-visible { background: #20BD5A; color: #FFFFFF; text-decoration: none; }

.fx-wa__icono {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  transition: transform 150ms ease;
}
.fx-wa:hover .fx-wa__icono { transform: scale(1.1); }

.fx-wa__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.3);
  animation: fx-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes fx-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Quien pide menos movimiento se queda con el botón quieto: un halo latiendo sin
   parar en una esquina fija es justo lo que molesta a quien lo ha desactivado. */
@media (prefers-reduced-motion: reduce) {
  .fx-wa, .fx-wa__icono { transition: none; }
  .fx-wa__halo { animation: none; opacity: 0; }
}

/* --- La base del pie ----------------------------------------------------------
   Debajo de las columnas de enlaces: la marca con su frase a la izquierda, las formas
   de pago a la derecha y, más abajo, la fila legal. Cada zona con su filete, que es lo
   que separa "adónde puedes ir" de "quiénes somos y bajo qué condiciones". */
.fx-pie-base {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--fx-plum-line);
}

/* Centrada y sin tope de ancho: con 34ch la dirección, el teléfono y el correo se
   partían en tres líneas desiguales. Ahora van en una, y en móvil saltan por los puntos. */
.fx-pie-base { justify-content: center; }
.fx-pie-marca { display: grid; justify-items: center; gap: 0.875rem; width: 100%; text-align: center; }
.fx-pie-marca .fx-pie-sede { max-width: none; }

/* El logotipo del sitio es una silueta oscura pensada para fondo blanco. `brightness(0)`
   lo aplana a negro puro —da igual de qué color viniera— e `invert(1)` lo pasa a blanco.
   Así vale el mismo fichero arriba y abajo. */
.fx-pie-logo { height: 34px; width: auto; filter: brightness(0) invert(1); }

.fx-pie-claim { color: #FFFFFF; font-size: 1.0625rem; line-height: 1.5; }

.fx-pagos { display: grid; gap: 0.75rem; }
.fx-pagos .fx-mono-xs { color: #8E97B4; }
.fx-pagos__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Cada forma de pago en su pastilla. Sin logotipos de marca a propósito: son marcas de
   terceros y una reproducción mala sienta peor que el nombre escrito. */
.fx-pagos__lista li {
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--fx-plum-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
}

.fx-pie-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fx-plum-line);
  font-size: 0.8125rem;
  color: #8E97B4;
}

/* Los enlaces legales separados por un punto medio dibujado con CSS: en el marcado son
   una lista, que es lo que son, y el separador no lo lee nadie en voz alta. */
.fx-pie-legal__enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.fx-pie-legal__enlaces li { display: flex; align-items: center; gap: 1rem; }
.fx-pie-legal__enlaces li:not(:last-child)::after {
  content: '';
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fx-plum-line);
}
.fx-pie-legal__enlaces a { color: #8E97B4; text-decoration: none; }
.fx-pie-legal__enlaces a:hover, .fx-pie-legal__enlaces a:focus { color: #FFFFFF; text-decoration: underline; }

@media (max-width: 767.98px) {
  .fx-pie-base { gap: 2rem; }
  .fx-pie-legal { justify-content: flex-start; }
}

/* El formulario de contacto, acotado al ancho de lectura y centrado: a todo el ancho
   del contenedor los campos salen de 1.200 px, que se leen mal y se rellenan peor. */
.fx-contacto-form { max-width: 46rem; margin-inline: auto; }

/* La ventana de «¿te llamamos?»: la misma esquina y el mismo filete que una tarjeta,
   para que no parezca un cuadro de diálogo del navegador. */
.fx-llamada { border: 1px solid var(--fx-line); border-radius: 16px; }
.fx-llamada .modal-header { padding-inline: 1.5rem; padding-top: 1.5rem; }
.fx-llamada .modal-body { padding: 1.5rem; }

/* El formulario dentro de la banda de cierre. Fondo blanco porque va sobre color: los
   campos transparentes sobre azul no se leen como campos y nadie los rellena. */
.fx-cta__form { max-width: 28rem; }
.fx-cta__form .form-label { color: #FFFFFF; }
.fx-cta__form .form-control { background: #FFFFFF; border-color: transparent; }
.fx-cta__form .form-control:focus { border-color: var(--fx-ink); box-shadow: none; }

/* --- Consentimiento de los formularios ---------------------------------------
   La casilla y, debajo, la información básica de protección de datos en cuerpo
   pequeño: es la primera capa que pide la Agencia, y va donde se firma, no en un
   enlace que nadie abre. */
.form-consent { margin-bottom: 1.25rem; }
.form-consent .form-check { margin-bottom: 0.5rem; }
.form-consent .form-check-input { margin-top: 0.3rem; }
.form-consent .form-check-input:checked { background-color: var(--fx-orange); border-color: var(--fx-orange); }
.form-consent .form-check-label { font-size: 0.875rem; line-height: 1.5; }
.form-consent__aviso {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--fx-muted-2);
}
/* Dentro de la banda de color el texto pequeño en gris no se lee. */
.fx-cta__form .form-consent .form-check-label,
.fx-cta__form .form-consent__aviso { color: rgba(255, 255, 255, 0.82); }
.fx-cta__form .form-consent a { color: #FFFFFF; }

/* --- Aviso de cookies --------------------------------------------------------
   Barra al pie, por encima del botón de WhatsApp: mientras esté sin contestar es lo
   único que hay que poder pulsar ahí abajo. */
.fx-cookies {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  /* Por encima de la burbuja del chat, que tapaba «Aceptar todas» en el móvil. */
  z-index: 2147483647;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: 62rem;
  margin-inline: auto;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--fx-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(20, 18, 16, 0.16);
}
.fx-cookies__texto { flex: 1 1 22rem; font-size: 0.875rem; line-height: 1.55; color: var(--fx-muted); }
.fx-cookies__botones { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.fx-cookies .btn { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1.125rem; min-height: 40px; }

@media (max-width: 575.98px) {
  .fx-cookies__botones { width: 100%; }
  .fx-cookies__botones .btn { flex: 1 1 0; }
}

/* El encabezado de una rejilla de tarjetas, centrado. Solo dentro de la maqueta: las
   fichas de solución llevan el suyo a la izquierda y no entran aquí. El titular tiene
   un ancho máximo en línea, así que sin los márgenes automáticos se quedaría pegado al
   borde izquierdo aunque el texto fuera centrado. */
.fx-hz .fx-secc-cab { text-align: center; }
.fx-hz .fx-secc-cab h2 { margin-inline: auto; }
/* La entradilla de una seccion va justo debajo del encabezado, fuera de su caja
   —viene del bloque, no del encabezado—, asi que se centra aparte. `fx-measure` le
   pone un ancho maximo y sin margenes automaticos se quedaria a la izquierda. */
.fx-hz .fx-secc-cab + .fx-measure,
.fx-hz .fx-secc-cab + p { margin-inline: auto; text-align: center; }

/* La dirección bajo la frase de marca, en el pie. */
.fx-pie-sede { font-size: 0.8125rem; color: #8E97B4; }

/* El antetítulo de la portada iba en el azul de marca, y ahora el fondo de esa zona es
   ese mismo azul: desaparecía dentro. Sobre el degradado va en blanco a media opacidad,
   que es lo que lo mantiene por debajo del titular sin llegar a esconderse. */
.fx-hero-home .fx-text-orange { color: rgba(255, 255, 255, 0.72) !important; }

/* --- Cabecera de la portada, al aire de la referencia -------------------------
   Mucho arriba y abajo, el titular grande y una sola fila de acciones centrada. Sin la
   caja de captación, lo que sostiene la pantalla es el espacio. */
.fx-hero-home { padding-block: clamp(4.5rem, 11vw, 9rem); }
.fx-hero-home h1 { font-size: clamp(2.375rem, 5.2vw, 4.25rem); letter-spacing: -0.03em; }
.fx-hero-home .fx-measure { max-width: 54ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }

.fx-hero-home__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}
/* El botón de la portada es más grande que el del resto del sitio: es el único que hay
   en toda la pantalla y tiene que pesar como tal. */
.fx-hero-home__acciones .btn {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 2rem;
  font-size: 1.0625rem;
  min-height: 52px;
}
/* El secundario, en filete blanco: sobre el degradado el gris del filete normal no se
   ve, y relleno sólido competiría con el principal. */
.fx-hero-home__acciones .btn-fox-outline {
  --bs-btn-border-color: rgba(255, 255, 255, 0.32);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
}

.fx-hero-home__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.66);
}
.fx-hero-home__nota svg { flex: none; color: #8FAEFF; }

/* Una cabecera de página sin foto ocupa el ancho entero, y el titular se quedaba
   colgando a la izquierda de una página vacía. Centrada se sostiene sola. Con foto va
   a dos columnas y se queda como está; y las fichas de solución tienen su propio
   diseño, así que quedan fuera. */
:not(.fx-solution) > .fx-pagehero--solo { text-align: center; }
:not(.fx-solution) > .fx-pagehero--solo h1,
:not(.fx-solution) > .fx-pagehero--solo p { margin-inline: auto; }
:not(.fx-solution) > .fx-pagehero--solo .d-flex { justify-content: center; }

/* El titular del formulario de contacto, centrado con él: la página abre centrada y
   ese «Escríbenos» a la izquierda de un formulario centrado se leía descolgado. */
.fx-hz .fx-contacto-form h2 { text-align: center; }

/* --- Fichas de contacto ------------------------------------------------------
   El dato manda y la explicación acompaña: el número o el buzón en grande y
   pulsable, y debajo en pequeño para qué es cada uno. */
.fx-dato { display: flex; flex-direction: column; }
.fx-dato__valor {
  margin: 0 0 0.5rem;
  font-family: var(--fx-font);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  word-break: break-word;
}
.fx-dato__valor a { color: var(--fx-ink); text-decoration: none; }
.fx-dato__valor a:hover, .fx-dato__valor a:focus-visible { color: var(--fx-orange-dark); text-decoration: underline; }
.fx-dato__texto { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--fx-muted); }
/* El WhatsApp se pega abajo para que las cuatro tarjetas cierren a la misma altura
   aunque los textos no midan lo mismo. */
.fx-dato__extra {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--fx-line);
}
.fx-dato__extra a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #128C4A;
  text-decoration: none;
}
.fx-dato__extra a:hover, .fx-dato__extra a:focus-visible { text-decoration: underline; }

/* La segunda captura de la escena: delante de la principal y desplazada a la esquina
   de abajo a la izquierda. Con filete y sombra propios, para que se lea como una
   pantalla encima de otra y no como un recorte pegado. */
.fx-solution .fx-stage__aside {
  position: absolute;
  z-index: 3;
  left: -5%;
  bottom: -9%;
  width: 52%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}
.fx-solution .fx-stage__aside img { display: block; width: 100%; height: auto; }

/* En móvil la escena ya ocupa el ancho entero: la segunda deja de flotar y se pone
   debajo, que superpuesta a ese tamaño no se lee ni una ni otra. */
@media (max-width: 991.98px) {
  .fx-solution .fx-stage__aside {
    position: static;
    width: 72%;
    margin: 1rem auto 0;
  }
}


/* --- Casos de éxito ----------------------------------------------------------

   Un caso es un proyecto, no un párrafo. A un lado las pantallas de lo que se
   construyó y el relato de cómo; al otro, fija mientras se desplaza, la columna con
   lo que le quedó al cliente: las cifras y su frase.

   Los lados y el fondo se alternan de un caso al siguiente. Tres casos con la misma
   composición se leen como uno repetido, y entonces solo se lee el primero. */

.fx-caso { padding-block: clamp(3rem, 7vw, 5.5rem); }
.fx-caso--alt { background: var(--fx-sand); }

/* La columna del resultado acompaña a la lectura de las pantallas: la cifra tiene que
   seguir delante cuando se está leyendo cómo se consiguió. */
@media (min-width: 992px) {
  .fx-caso__rail { position: sticky; top: 6.5rem; }
}

.fx-caso__num {
  font-family: var(--fx-font);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--fx-orange);
  margin-bottom: 0.75rem;
}
.fx-caso__quien { margin-bottom: 0.875rem; }
.fx-caso__titular {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.fx-caso__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fx-muted);
  margin-bottom: 1.75rem;
}

/* Las cifras, una debajo de otra y separadas por filete. En fila se leen como una
   tabla de resultados; en columna, como tres golpes seguidos. */
.fx-caso__cifras { margin: 0 0 1.75rem; }
.fx-caso__cifras li { padding-block: 0.875rem; border-top: 1px solid var(--fx-line); }
.fx-caso__cifras li:last-child { border-bottom: 1px solid var(--fx-line); }
.fx-caso__cifras .fx-num {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fx-ink);
}
.fx-caso__cifra-txt {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fx-muted);
}

/* La cita cierra la columna: sin comillas grandes ni cursiva, solo una barra al margen. */
.fx-caso__cita {
  border-left: 3px solid var(--fx-orange);
  padding-left: 1.125rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fx-ink);
}
.fx-caso__cita footer { color: var(--fx-muted-2); }

/* --- Las pantallas -----------------------------------------------------------

   Cada captura dentro de una ventana de navegador. No es adorno: una tabla suelta
   sobre fondo blanco parece un gráfico del artículo; la misma tabla dentro de una
   ventana se lee como lo que es, una pantalla de algo que funciona.

   La imagen conserva su proporción en vez de recortarse a una caja fija. Las capturas
   vienen como vengan —una casi cuadrada, una tira ancha— y recortarlas para cuadrar
   una rejilla es justo tirar la parte que se quería enseñar. */
.fx-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fx-shot { margin: 0; }
.fx-shot--ancha { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
  .fx-shots { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .fx-shot { grid-column: 1 / -1; }
}

.fx-shot__marco {
  border: 1px solid var(--fx-line);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -28px rgba(5, 6, 14, 0.45);
}
.fx-caso--alt .fx-shot__marco { border-color: rgba(5, 6, 14, 0.09); }
.fx-shot__marco img { display: block; width: 100%; height: auto; }
.fx-shot__marco .fx-foto-hueco { border: 0; border-radius: 0; }

/* La barra de la ventana. Tres puntos y el nombre de lo que se está mirando: con eso
   basta para que se lea como una aplicación y no como una captura pegada. */
.fx-shot__barra {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: var(--fx-sand);
  border-bottom: 1px solid var(--fx-line);
}
.fx-caso--alt .fx-shot__barra { background: #FFFFFF; }
.fx-shot__puntos { display: inline-flex; gap: 0.3125rem; flex: 0 0 auto; }
.fx-shot__puntos i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(5, 6, 14, 0.16);
}
.fx-shot__tab {
  font-family: var(--fx-font);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--fx-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Una foto no es una pantalla: va sin ventana, que si no miente sobre lo que enseña. */
.fx-shot--foto .fx-shot__marco { border-radius: 16px; box-shadow: none; }

.fx-shot__pie {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fx-muted);
  padding-left: 0.875rem;
  border-left: 2px solid var(--fx-line);
}

/* --- El relato ---------------------------------------------------------------

   Tres tiempos, cada uno con su epígrafe: lo que había, lo que se montó, lo que pasó.
   En columnas y no seguido, para que se vea de un vistazo que hay un antes y un
   después y no un texto largo. */
.fx-caso__relato {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 767.98px) {
  .fx-caso__relato { grid-template-columns: minmax(0, 1fr); }
}

.fx-caso__paso { padding-top: 1rem; border-top: 2px solid var(--fx-ink); }
/* El tiempo de en medio es el trabajo: se marca en color para que se distinga de los
   otros dos, que son el antes y el después. */
.fx-caso__paso:nth-child(2) { border-top-color: var(--fx-orange); }
.fx-caso__paso-tit {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  color: var(--fx-ink);
  margin-bottom: 0.625rem;
}
.fx-caso__paso-txt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fx-muted);
}

.fx-caso__piezas { margin: 0.875rem 0 0; }
.fx-caso__piezas li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fx-ink);
}
.fx-caso__piezas li:last-child { margin-bottom: 0; }
.fx-caso__piezas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 2px;
  background: var(--fx-orange);
}

.fx-caso__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fx-line);
}

/* ===========================================================================
   Reestructuración: barra superior, cabecera con desplegables y menú de móvil
   Solo con las variables de arriba: ni colores ni fuentes nuevos.
   =========================================================================== */


/* --- Botón principal con subtítulo ----------------------------------------- */
.fx-nav-cta { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.fx-nav-cta__sub { font-size: .75rem; font-weight: 500; opacity: .85; }

/* --- Disparadores de los desplegables -----------------------------------------
   Son <button> para que Enter y Espacio los abran: se les quita el aspecto de botón. */
.fx-navbar button.nav-link { background: none; border: 0; }

/* --- Enlaces de la barra ----------------------------------------------------
   El elemento abierto se marca con un fondo suave, no solo con color: con el
   desplegable a todo el ancho debajo, tiene que verse de qué pestaña sale. */
@media (min-width: 992px) {
  .fx-navbar__menu .nav-link {
    padding: .5rem .875rem !important; border-radius: 10px;
    transition: background-color .15s, color .15s;
  }
  .fx-navbar__menu .nav-link:hover,
  .fx-navbar__menu .nav-link[aria-expanded="true"] { background: var(--fx-sand); color: var(--fx-ink); }
  .fx-navbar__menu .nav-link.active { color: var(--fx-orange-dark); }
}
/* El triángulo de Bootstrap cambia a una flecha de trazo, que gira al abrir. */
.fx-navbar .dropdown-toggle::after {
  border: 0; width: .45rem; height: .45rem; margin-left: .45rem; vertical-align: .2em;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.fx-navbar .dropdown-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* --- Menú de móvil a pantalla completa ---------------------------------------- */
@media (max-width: 991.98px) {
  .fx-navbar__panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--fx-nav-bottom, 64px);
    z-index: 1040; background: #FFFFFF; overflow-y: auto; overscroll-behavior: contain;
  }
  /* Bootstrap anima la altura al abrir: con la caja fija se anima hasta abajo. */
  .fx-navbar__panel.collapsing { height: calc(100dvh - var(--fx-nav-bottom, 64px)) !important; transition: none; }
  body.fx-menu-abierto { overflow: hidden; }
}
.fx-movil { padding: 1rem clamp(1rem, 2.5vw, 2.5rem) 2rem; display: flex; flex-direction: column; gap: 1rem; }
.fx-acordeon { border-top: 1px solid var(--fx-line); }
.fx-acordeon__item, .fx-acordeon__enlace { border-bottom: 1px solid var(--fx-line); }
.fx-acordeon__boton, .fx-acordeon__enlace {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 1rem 0; background: none; border: 0; color: var(--fx-ink);
  font-weight: 700; font-size: 1.0625rem; text-align: left; text-decoration: none;
}
.fx-acordeon__boton .fx-icon { transition: transform .2s; }
.fx-acordeon__boton:not(.collapsed) .fx-icon { transform: rotate(180deg); }
.fx-acordeon__idiomas { padding: 1rem 0; }
/* En el móvil, un interruptor de dos con los nombres enteros: es fácil de acertar con el
   dedo y se ve de un vistazo en qué idioma se está. */
.fx-acordeon__idiomas .fx-idiomas { display: flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--fx-sand, #F4F1EC); }
.fx-acordeon__idiomas .fx-idiomas a {
  flex: 1; padding: .625rem 1rem; border-radius: 999px; text-align: center;
  font-weight: 600; color: var(--fx-ink); text-decoration: none;
}
.fx-acordeon__idiomas .fx-idiomas a[aria-current="true"] { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.fx-movil-mega { padding-bottom: 1rem; }
.fx-movil-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .625rem 0; color: var(--fx-ink); text-decoration: none;
}
.fx-movil-fila:hover, .fx-movil-fila:focus { color: var(--fx-orange-dark); }
.fx-movil-mega__pie { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--fx-line); }
.fx-movil__pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; margin-top: auto; }
.fx-movil__boton {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .75rem .5rem; border: 1px solid var(--fx-line); border-radius: 12px;
  background: #FFFFFF; color: var(--fx-ink); font-weight: 600; font-size: .875rem; text-decoration: none;
}
.fx-movil__boton:hover, .fx-movil__boton:focus, .fx-movil__boton:not(.collapsed)[aria-expanded="true"] { border-color: var(--fx-orange); color: var(--fx-orange-dark); }
.fx-movil__cliente { display: grid; gap: .25rem; padding: .75rem 0 0; }
.fx-movil__cliente a { display: block; padding: .5rem 0; font-weight: 600; }

/* --- Planes: pie de tarjeta y tabla comparativa ----------------------------- */
.fx-plan__pie { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--fx-line); color: var(--fx-muted); font-weight: 600; }
.fx-tabla { border: 1px solid var(--fx-line); border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.fx-tabla .table { --bs-table-bg: transparent; }
.fx-tabla th, .fx-tabla td { padding: 1rem 1.25rem; border-color: var(--fx-line); }
.fx-tabla thead th { font-weight: 700; font-size: 1.0625rem; width: 22%; }
.fx-tabla tbody th { font-weight: 600; width: 34%; }
.fx-tabla tbody td { color: var(--fx-muted); }
.fx-tabla tbody tr:last-child > * { border-bottom: 0; }
.fx-tabla-movil { display: grid; gap: .5rem; }
.fx-tabla-movil > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; }
.fx-tabla-movil dt { font-weight: 600; }
.fx-tabla-movil dd { margin: 0; color: var(--fx-muted); }

/* --- Pie: franja superior con la frase y el botón ----------------------------- */
.fx-pie-cabeza {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--fx-plum-line);
}
.fx-pie-cabeza__frase { color: #FFFFFF; font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.2; max-width: 22ch; }
.fx-pie-sede a { color: inherit; white-space: nowrap; }

/* --- Calculadora de horas --------------------------------------------------- */
.fx-calc__resultado { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--fx-line); }
.fx-calc__resultado .fx-num { font-size: 1.75rem; }

/* --- Desplegable en el menú de móvil --------------------------------------- */
.fx-mm-icono--sm { width: 2rem; height: 2rem; border-radius: 8px; }
.fx-movil-fila { gap: .75rem; }
.fx-movil-mega__seccion { margin: 1rem 0 .25rem; font-weight: 700; font-size: .9375rem; color: var(--fx-orange-dark); }
.fx-movil-mega__panel { margin-top: .75rem; padding: 1rem; border-radius: 12px; background: var(--fx-plum); color: var(--fx-plum-text); }
.fx-movil-mega__panel .fw-bold { color: #FFFFFF; }
.fx-movil-mega__panel a { color: #FFFFFF; text-decoration: underline; }

/* El botón de la cabecera, en una línea y sin subtítulo: a su lado ya no hay nada,
   el teléfono y los accesos de cliente van en la franja de encima. */
.fx-navbar__acciones .fx-nav-cta { white-space: nowrap; padding: .625rem 1.25rem; }

/* El botón de la cabecera con su flecha: el texto a la izquierda y una flecha en un
   círculo claro a la derecha, que se adelanta un poco al pasar el ratón (pide que
   sigas) y el botón se hunde al pulsar (responde). Solo transform y opacidad, con una
   curva de salida fuerte y por debajo de 200 ms: se ve muchas veces al día. */
.fx-navbar__acciones .fx-nav-cta--flecha {
  flex-direction: row; gap: .625rem;
  padding: .5rem .5rem .5rem 1.125rem; border-radius: 999px;
  --fx-curva: cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 160ms var(--fx-curva), box-shadow 160ms ease, background-color 160ms ease;
}
.fx-nav-cta__flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #FFFFFF;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fx-nav-cta--flecha:hover .fx-nav-cta__flecha { transform: translateX(3px); background: rgba(255, 255, 255, .28); }
}
.fx-navbar__acciones .fx-nav-cta--flecha:active { transform: scale(0.97); }
.fx-navbar__acciones .fx-nav-cta--flecha:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .fx-navbar__acciones .fx-nav-cta--flecha, .fx-nav-cta__flecha { transition: background-color 160ms ease; }
  .fx-nav-cta--flecha:hover .fx-nav-cta__flecha, .fx-navbar__acciones .fx-nav-cta--flecha:active { transform: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .fx-navbar__menu .nav-link { padding-inline: .6rem !important; }
}

/* --- Franja fina de encima de la cabecera (escritorio) -----------------------
   Azul noche, el del pie, con letra pequeña alineada a la derecha: separa con claridad
   los accesos de cliente del menú blanco y no compite con él. */
.fx-topbar { background: var(--fx-plum); font-size: .8125rem; }
.fx-topbar__inner {
  display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem;
  min-height: 34px; padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}
.fx-topbar a {
  display: inline-flex; align-items: center; gap: .375rem;
  color: var(--fx-plum-text); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.fx-topbar a:hover, .fx-topbar a:focus { color: #FFFFFF; }
.fx-topbar__idiomas { padding-left: 1.5rem; border-left: 1px solid var(--fx-plum-line); }
.fx-topbar__idiomas .fx-idiomas { display: flex; gap: .625rem; }
.fx-topbar__idiomas a { text-decoration: none; }
.fx-topbar__idiomas a[aria-current="true"] { color: #FFFFFF; font-weight: 700; }
/* La nota de Google, sola a la izquierda: el margen automático la separa del resto. */
.fx-topbar__nota { margin-right: auto; }
.fx-topbar__estrella { color: #FBBC04; font-size: .9375rem; line-height: 1; }

/* ===========================================================================
   Segunda pasada visual: más contraste y más jerarquía
   ---------------------------------------------------------------------------
   Lo que hacía la web «sosa»: todas las secciones con la misma forma (rótulo en
   mayúsculas, titular centrado, tres tarjetas iguales sobre gris), cifras pequeñas y
   ningún sitio donde mirar primero. Aquí: titulares más gruesos, fondos que alternan
   blanco, azul hielo y marino, precios y cifras grandes, y una sola pieza con
   carácter por pantalla. Los colores son los de marca; solo el gris pasa a azul hielo.
   =========================================================================== */
:root {
  --fx-sand: #F2F5FD;
  --fx-line: #E1E6F0;
  --fx-sombra: 0 1px 2px rgba(18, 25, 58, .05), 0 12px 32px -16px rgba(18, 25, 58, .18);
  --fx-sombra-alta: 0 2px 4px rgba(18, 25, 58, .06), 0 24px 48px -20px rgba(18, 25, 58, .28);
}

h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 2.875rem); letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-weight: 800; letter-spacing: -0.02em; }

/* Los rótulos, en minúscula y sin espaciar: una etiqueta azul que dice de qué va la
   sección, no un grito. */
.fx-mono, .fx-mono-xs { letter-spacing: 0; }
.fx-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--fx-orange-soft); color: var(--fx-orange-dark);
  font-size: .875rem; font-weight: 700; letter-spacing: 0;
}
.fx-bg-sand .fx-eyebrow { background: #FFFFFF; }
.fx-bg-plum .fx-eyebrow { background: rgba(255, 255, 255, .1); color: #C9D6FF; }

/* Botones: un punto más grandes y con sombra del propio azul, que es lo que hace que
   el principal se vea antes que nada. */
.btn-fox, .btn-fox-outline { --bs-btn-font-weight: 700; --bs-btn-border-radius: 12px; }
.btn-fox { box-shadow: 0 10px 24px -12px rgba(62, 104, 229, .8); transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn-fox:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(62, 104, 229, .9); }
.btn-fox-outline { --bs-btn-border-color: #C9D2E6; border-width: 1.5px; }
.btn-fox-outline:hover { --bs-btn-hover-border-color: var(--fx-orange); --bs-btn-hover-color: var(--fx-orange-dark); }

/* Tarjetas: más redondas, sin el filete gris duro y con sombra suave. */
.fx-card { border-radius: 20px; border-color: var(--fx-line); box-shadow: var(--fx-sombra); }
.fx-card-link { transition: border-color .15s, box-shadow .2s, transform .2s; }
.fx-card-link:hover { transform: translateY(-3px); box-shadow: var(--fx-sombra-alta); border-color: #C9D6FF; }
.fx-icon-box { border-radius: 14px; }

/* --- Portada ---------------------------------------------------------------- */
.fx-hero-home {
  background-color: var(--fx-plum);
  background-image:
    radial-gradient(60% 70% at 85% 30%, rgba(62, 104, 229, .55) 0%, rgba(62, 104, 229, 0) 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(62, 104, 229, .28) 0%, rgba(62, 104, 229, 0) 70%),
    linear-gradient(180deg, #12193A 0%, #0C1230 100%);
  background-size: auto;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
  text-align: left;
}
.fx-hero-home__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .fx-hero-home__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } }
.fx-hero-home h1 { font-size: clamp(2.5rem, 5.4vw, 4.375rem); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 1.5rem; }
.fx-hero-home__antetitulo { display: inline-block; margin-bottom: 1.25rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #C9D6FF; font-weight: 700; font-size: .875rem; }
.fx-hero-home__entrada { color: #C3CAE0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 46ch; margin-bottom: 2rem; }
.fx-hero-home__acciones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-start; margin: 0; }
.fx-hero-home__acciones .btn { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }
.fx-hero-home__acciones .btn-fox-outline { --bs-btn-border-color: rgba(255, 255, 255, .28); --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; --bs-btn-hover-bg: rgba(255, 255, 255, .06); }
.fx-hero-home__nota { display: flex; align-items: center; gap: .5rem; justify-content: flex-start; margin: 1.5rem 0 0; color: #C3CAE0; font-size: .9375rem; }
.fx-hero-home__nota .fx-icon { color: #FFC24B; flex: none; }
.fx-hero-home__caja { max-width: 560px; margin-bottom: 1.5rem; padding: 1.25rem; border-radius: 18px; background: #FFFFFF; color: var(--fx-ink); }
.fx-hero-home__caja textarea { border: 2px solid var(--fx-orange); border-radius: 12px; resize: none; }
.fx-hero-home__foto { width: 100%; border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }

/* La maqueta del panel: una ventana blanca con una nota flotante que se sale del
   borde. Es la única pieza de la portada con volumen. */
.fx-hero-home__visual { position: relative; }
.fx-panel-demo { position: relative; max-width: 520px; margin-inline: auto; }
.fx-panel-demo__barra { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; border-radius: 20px 20px 0 0; background: #E9EDF7; }
.fx-panel-demo__punto { width: .6rem; height: .6rem; border-radius: 50%; background: #C7CEDF; }
.fx-panel-demo__url { margin-left: .75rem; padding: .2rem .75rem; border-radius: 999px; background: #FFFFFF; color: var(--fx-muted-2); font-size: .75rem; }
.fx-panel-demo__cuerpo { display: grid; gap: 1.125rem; padding: 1.5rem; border-radius: 0 0 20px 20px; background: #FFFFFF; color: var(--fx-ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65); }
.fx-panel-demo__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.fx-panel-demo__hola { margin: 0; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.fx-panel-demo__sub { margin: 0; color: var(--fx-muted); font-size: .875rem; }
.fx-panel-demo__estado { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: #E3F7EE; color: #127A4C; font-weight: 700; font-size: .8125rem; white-space: nowrap; }
.fx-panel-demo__luz { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fx-green); box-shadow: 0 0 0 3px rgba(33, 181, 115, .2); }
.fx-panel-demo__checks { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fx-panel-demo__checks li { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 12px; background: var(--fx-sand); font-size: .9375rem; font-weight: 600; }
.fx-panel-demo__checks .fx-icon { color: var(--fx-orange); flex: none; }
.fx-panel-demo__checks em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .8125rem; color: #127A4C; }
.fx-panel-demo__horas { font-size: .875rem; color: var(--fx-muted); }
.fx-panel-demo__horas strong { color: var(--fx-ink); }
.fx-panel-demo__pista { height: .5rem; margin-top: .5rem; border-radius: 999px; background: var(--fx-orange-soft); overflow: hidden; }
.fx-panel-demo__pista span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fx-orange), #6E8EF0); }
.fx-panel-demo__tit { margin: 0 0 .5rem; font-weight: 700; font-size: .875rem; }
.fx-panel-demo__peticion { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--fx-line); font-size: .875rem; }
.fx-panel-demo__peticion b { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: #FFF4DB; color: #8A5A00; white-space: nowrap; }
.fx-panel-demo__peticion b.is-hecho { background: #E3F7EE; color: #127A4C; }
.fx-panel-demo__flotante {
  position: absolute; left: -1.5rem; bottom: -1.25rem;
  display: flex; align-items: center; gap: .6rem; max-width: 17rem;
  padding: .8rem 1rem; border-radius: 14px; background: var(--fx-orange); color: #FFFFFF;
  font-size: .875rem; line-height: 1.35; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
}
.fx-panel-demo__flotante .fx-icon { flex: none; }
@media (max-width: 575.98px) { .fx-panel-demo__flotante { position: static; margin-top: 1rem; max-width: none; } }

/* --- Planes: el precio es lo que se compara --------------------------------- */
.fx-plan { padding: 2rem !important; transition: box-shadow .2s, border-color .2s; }
.fx-plan h3 { font-size: 1.5rem !important; }
.fx-plan__precio { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--fx-line); }
.fx-plan__cifra { font-size: clamp(2.75rem, 4vw, 3.5rem); letter-spacing: -0.04em; color: var(--fx-ink); }
.fx-plan__unidad { font-weight: 600; color: var(--fx-muted); font-size: 1rem; }
.fx-plan .fx-feat { font-size: .9375rem; color: var(--fx-ink); }
.fx-plan .btn { width: 100%; min-height: 52px; }
.fx-plan:hover { box-shadow: var(--fx-sombra-alta); border-color: #C9D6FF; }

/* --- Cifras: banda marina con los números grandes ---------------------------- */
.fx-bg-banda { background: var(--fx-plum); color: #FFFFFF; background-image: radial-gradient(50% 80% at 100% 0%, rgba(62, 104, 229, .35), transparent 70%); }
.fx-bg-banda h2 { color: #FFFFFF; }
.fx-bg-banda .fx-eyebrow { background: rgba(255, 255, 255, .1); color: #C9D6FF; }
.fx-bg-banda .fx-stat { border-top: 0; padding: 1.75rem; border-radius: 20px; background: rgba(255, 255, 255, .06); height: 100%; }
.fx-bg-banda .fx-num { font-size: clamp(2rem, 3.6vw, 2.75rem); color: #FFFFFF; letter-spacing: -0.03em; margin-bottom: .75rem !important; }
.fx-bg-banda .fx-text-muted { color: #C3CAE0 !important; font-size: 1rem !important; }

/* El rótulo ocupa lo que su texto, también dentro de una rejilla. */
.fx-eyebrow { width: fit-content; }
.fx-secc-cab .fx-eyebrow { margin-inline: inherit; }
.fx-hz .fx-secc-cab .fx-eyebrow { margin-inline: auto; }

/* La banda de cifras rinde como cualquier sección de color: con su aire arriba y
   abajo, y dejando el suyo a la siguiente. */
.fx-bg-banda .fx-secc-cab { margin-bottom: 2.5rem !important; }

/* Pasos: un número en su círculo, que sí es una secuencia, y cada paso en su tarjeta. */
.fx-paso { height: 100%; padding: 1.75rem; border-radius: 20px; background: #FFFFFF; box-shadow: var(--fx-sombra); }
.fx-paso__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: 50%;
  background: var(--fx-orange); color: #FFFFFF; font-weight: 800; font-size: 1.125rem;
  box-shadow: 0 8px 18px -8px rgba(62, 104, 229, .8);
}
.fx-paso__tit { margin-bottom: .5rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }

/* Planes: la frase reserva su alto para que los tres precios queden a la misma
   altura y se comparen de un vistazo. */
@media (min-width: 992px) { .fx-plan > .fx-text-muted.small { min-height: 4.5em; } }
.fx-plan > .fx-text-muted.small { font-size: .9375rem; }

/* Tarjetas de sector y de servicio: título con peso, icono en su caja con más color
   y el precio al pie como etiqueta, no como letra pequeña gris. */
.fx-tile { box-shadow: var(--fx-sombra); }
a.fx-tile:hover, a.fx-tile:focus-visible { box-shadow: var(--fx-sombra-alta); border-color: #C9D6FF; }
.fx-tile__title { font-weight: 800; }
.fx-tile .fx-icon-box { width: 52px; height: 52px; background: #DFE7FD; color: var(--fx-orange-dark); }
.fx-tile__more { font-weight: 700; }
.fx-tile__spec { font-size: .875rem; letter-spacing: 0; color: var(--fx-ink); font-weight: 600; }

/* Tarjetas corrientes: el titular manda sobre el texto. */
.fx-card h3, .fx-card .fs-5 { font-weight: 800 !important; letter-spacing: -.02em; }

/* La maqueta de la portada deja hueco abajo para la nota flotante. */
.fx-panel-demo__cuerpo { padding-bottom: 2.25rem; }
.fx-panel-demo__flotante { bottom: -1.75rem; }

/* El diseño de las páginas de servicio (.fx-hz) era plano a propósito: gris y sin
   sombra. Pasa al azul hielo y a la misma sombra suave que el resto. */
.fx-hz { --hz-surface: #F2F5FD; --hz-line: #E1E6F0; --hz-radius: 20px; }
.fx-hz .fx-card, .fx-hz .fx-tile { box-shadow: var(--fx-sombra); }
.fx-hz a.fx-tile:hover, .fx-hz .fx-card-link:hover { box-shadow: var(--fx-sombra-alta); }
.fx-hz .fx-feature > .container > .row { box-shadow: var(--fx-sombra); background: #FFFFFF; border: 1px solid var(--hz-line); }
.fx-hz .fx-bg-sand .fx-feature > .container > .row,
.fx-bg-sand.fx-feature > .container > .row { background: #FFFFFF; }

@media (min-width: 992px) { .fx-plan > .fx-text-muted.small { min-height: 5.2em; } }

/* Pie: títulos de columna legibles y enlaces sin subrayar hasta pasar por encima. */
footer h3.fx-mono-xs { font-size: .9375rem; font-weight: 800 !important; letter-spacing: 0; }
footer .row a { text-decoration: none; transition: color .15s; }
footer .row a:hover, footer .row a:focus { color: #FFFFFF !important; text-decoration: underline; }
footer .fx-pagos .fx-mono-xs { font-size: .8125rem; font-weight: 700; }

/* Cabecera de página interior en claro: un velo azul hielo que baja hasta blanco, en
   vez del blanco liso que la confundía con el resto de la página. */
.fx-pagehero:not([class*="fx-bg-"]) {
  background-image: radial-gradient(60% 90% at 90% 0%, rgba(62, 104, 229, .12), transparent 70%), linear-gradient(180deg, #F2F5FD 0%, #FFFFFF 100%);
}

/* --- Cabecera de página sin foto: banda azul noche ----------------------------
   Casos, Planes, Contacto, Blog… abrían con un titular negro sobre casi blanco y se
   confundían con el cuerpo de la página. Ahora hablan el mismo idioma que la portada
   y las fichas de servicio: azul noche con dos halos del azul de marca, una rejilla
   muy tenue que se desvanece hacia los bordes y el antetítulo en pastilla. Solo las
   que no llevan foto ni fondo propio; las fichas de solución tienen su diseño. */
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  color: var(--fx-plum-text);
  background-color: var(--fx-plum);
  background-image:
    radial-gradient(55% 80% at 50% -10%, rgba(62, 104, 229, .6) 0%, rgba(62, 104, 229, 0) 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(62, 104, 229, .25) 0%, rgba(62, 104, 229, 0) 70%),
    linear-gradient(180deg, #12193A 0%, #0C1230 100%);
}
/* La rejilla va en una capa aparte para poder desvanecerla con una máscara: sobre el
   texto apenas se ve y en los bordes se pierde, así que da textura sin ruido. */
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"])::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 50% 0%, #000 20%, transparent 75%);
}
/* Una línea de luz en el borde inferior cierra la banda contra la sección blanca. */
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(120, 150, 255, .55), transparent);
}
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) h1 {
  color: #FFFFFF; font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.05;
  text-wrap: balance;
}
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) h1 + p,
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .fx-text-muted {
  color: var(--fx-plum-text) !important; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6;
  text-wrap: pretty;
}
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .fx-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  color: #C9D6FF; font-family: var(--fx-font); font-weight: 600; font-size: .8125rem;
  letter-spacing: .02em; text-transform: none;
}
/* El punto del antetítulo, del azul más claro: lo convierte en etiqueta. */
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .fx-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #7F9CFF; box-shadow: 0 0 0 3px rgba(127, 156, 255, .2);
}
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .fx-num,
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .fx-text-orange { color: #FFFFFF; }
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .btn-fox-outline {
  --bs-btn-border-color: rgba(255, 255, 255, .28); --bs-btn-color: #FFFFFF;
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; --bs-btn-hover-bg: rgba(255, 255, 255, .06);
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgba(255, 255, 255, .1); --bs-btn-active-border-color: #FFFFFF;
}
:not(.fx-solution) > .fx-pagehero--solo:not([class*="fx-bg-"]) .btn:active { transform: scale(0.97); }
/* Lo que viene detrás ya no continúa el blanco de la cabecera: necesita su respiro. */
.fx-pagehero--solo:not([class*="fx-bg-"]) + .fx-section:not([class*="fx-bg-"]) { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* ===========================================================================
   Tercera pasada: fotos y grafismo, a la manera de Hostinger
   ---------------------------------------------------------------------------
   Titulares de sección grandes y de peso medio (el grueso queda para la portada y
   los precios), secciones oscuras con foto y tarjetas de la aplicación flotando
   encima, y tarjetas de sector con foto y flecha.
   =========================================================================== */
h2 { font-weight: 600; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.035em; line-height: 1.12; }
.fx-hero-home h1 { font-weight: 800; }

/* --- Portada con foto -------------------------------------------------------- */
.fx-hero-home__composicion { position: relative; max-width: 540px; margin: 0 auto; padding: 1.5rem 0 2rem; }
.fx-hero-home__halo {
  position: absolute; inset: 8% -6% 4% 10%; border-radius: 40px; z-index: 0;
  background: linear-gradient(140deg, #6E8EF0 0%, #3E68E5 45%, #23379A 100%);
  transform: rotate(4deg); opacity: .9;
}
.fx-hero-home__halo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.4px);
  background-size: 18px 18px; mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.fx-hero-home__composicion .fx-hero-home__foto {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}

.fx-flota {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-radius: 16px; background: #FFFFFF; color: var(--fx-ink);
  box-shadow: 0 24px 48px -18px rgba(5, 8, 25, .55); font-size: .875rem; line-height: 1.3;
}
.fx-flota strong { display: block; font-weight: 800; }
.fx-flota small { display: block; color: var(--fx-muted); font-size: .8125rem; }
.fx-flota__icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--fx-orange); color: #FFFFFF;
}
.fx-flota__icono--verde { background: #E3F7EE; color: #127A4C; }
.fx-flota--pedido { top: 12%; left: -12%; }
.fx-flota--panel { display: grid; gap: .4rem; right: -10%; top: 46%; width: 15.5rem; padding: 1rem 1.1rem; }
.fx-flota__tit { margin: 0 0 .15rem; font-weight: 800; }
.fx-flota__fila { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.fx-flota__fila .fx-icon { color: var(--fx-orange); flex: none; }
.fx-flota__fila em { margin-left: auto; font-style: normal; font-size: .75rem; font-weight: 700; color: #127A4C; }
.fx-flota--tel { bottom: 0; left: -6%; background: var(--fx-orange); color: #FFFFFF; }
.fx-flota--tel small { color: rgba(255, 255, 255, .8); }
.fx-flota--tel .fx-flota__icono { background: rgba(255, 255, 255, .18); }

/* Entrada de las tarjetas: un solo momento, al cargar, y nada más. */
@media (prefers-reduced-motion: no-preference) {
  .fx-flota { animation: fx-flota-entra .6s cubic-bezier(.2, .8, .2, 1) both; }
  .fx-flota--panel { animation-delay: .15s; }
  .fx-flota--tel { animation-delay: .3s; }
}
@keyframes fx-flota-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
  .fx-hero-home__composicion { max-width: 420px; }
  .fx-flota--pedido { left: -4%; }
  .fx-flota--panel { right: -4%; }
  .fx-flota--tel { left: 0; }
}
@media (max-width: 575.98px) {
  .fx-flota--panel { display: none; }
  .fx-flota--pedido { left: 0; top: 6%; }
}

/* Lo de la derecha llega hasta el borde del contenedor: a la misma distancia del margen
   derecho que el texto del izquierdo. Las tarjetas y el halo no pasan de ahí. */
@media (min-width: 992px) {
  .fx-hero-home__composicion, .fx-panel-demo { margin-right: 0; }
  .fx-hero-home__halo { inset: 8% 4% 4% 10%; }
  .fx-flota--panel { right: 1rem; }
}

/* Entre 992 y 1100 px la cabecera no cabe entera y el botón se salía de la pantalla. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .fx-navbar__inner { gap: 1rem; }
  .fx-navbar__menu .nav-link { padding-inline: .4rem !important; }
  .fx-navbar__acciones .fx-nav-cta { padding-inline: 1rem; }
}
/* Y justo al entrar en escritorio, las filas con hueco grande sobresalían 4 px del
   contenedor: su margen negativo era mayor que el relleno de este. */
@media (min-width: 992px) and (max-width: 1023.98px) {
  .container { --bs-gutter-x: 3rem; }
}

/* Titulares que rotan: todos ocupan la misma celda y los invisibles dan el alto del más
   largo. Dos voces en cada uno: el planteamiento en una cursiva fina y el remate en la
   letra de la marca, que es lo que se tiene que quedar. */
.fx-hero-home__titulares { display: grid; }
.fx-hero-home__titulares > * { grid-area: 1 / 1; min-width: 0; }
.fx-hero-home__actual { transition: opacity .3s ease, transform .3s ease; }
.fx-hero-home__actual.is-cambiando { opacity: 0; transform: translateY(6px); }
.fx-hero-home__medida { visibility: hidden; pointer-events: none; }
.fx-hero-home .fx-hero-home__titular { font-size: clamp(2.125rem, 4.6vw, 4.125rem); line-height: 1.04; letter-spacing: normal; margin-bottom: 1.5rem; }
.fx-hero-home__suave, .fx-hero-home__fuerte { display: block; text-wrap: balance; }
.fx-hero-home__suave {
  margin-bottom: .18em; color: #AEC0F8; font-family: Newsreader, Georgia, serif;
  font-style: italic; font-weight: 400; font-size: .78em; line-height: 1.1; letter-spacing: -.015em;
}
.fx-hero-home__fuerte { color: #FFFFFF; font-weight: 700; letter-spacing: -.025em; }

/* Portátiles: el texto se aprieta para que la cabecera entera quepa en la pantalla (el alto
   de la foto lo limita «La portada cabe en la primera pantalla»). Depende del alto: en un
   monitor grande no cambia nada. */
@media (min-width: 992px) and (max-height: 860px) {
  .fx-hero-home__rejilla { gap: 3rem; }
  .fx-hero-home .fx-hero-home__titular { font-size: clamp(2.25rem, min(3.9vw, 7.4vh), 3.5rem); margin-bottom: 1rem; }
  .fx-hero-home__entrada { font-size: 1.0625rem; margin-bottom: 1.25rem; }
  .fx-hero-home__acciones .btn { min-height: 50px; }
  .fx-hero-home__nota { margin-top: 1rem; }
}

/* Móvil: menos aire arriba, los dos botones en una línea y la foto más a la vista. */
@media (max-width: 575.98px) {
  .fx-hero-home { padding-block: 1.75rem 2.25rem; }
  .fx-hero-home__rejilla { gap: 1.75rem; }
  .fx-hero-home .fx-hero-home__titular { margin-bottom: 1rem; }
  .fx-hero-home__entrada { font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .fx-hero-home__acciones { gap: .5rem; }
  .fx-hero-home__acciones .btn { flex: 1 1 auto; min-height: 52px; padding-inline: .9rem; font-size: 1rem; white-space: nowrap; }
  .fx-hero-home__nota { margin-top: 1rem; }
  /* La tarjeta, montada sobre el borde de arriba de la foto para que no tape la cara. */
  .fx-hero-home__composicion { padding-top: 1.75rem; }
  .fx-flota--pedido { top: 0; }
}

/* En los móviles más estrechos, el logo cede para que el menú no baje a otra línea. */
@media (max-width: 359.98px) {
  .fx-navbar__inner img { max-width: 92px; height: auto !important; }
}

/* --- Pestañas ---------------------------------------------------------------- */
.fx-tabs__cab { text-align: center; }
.fx-tabs__cab h2 { max-width: 22ch; margin-inline: auto; }
.fx-tabs__cab .fx-eyebrow { margin-inline: auto; }
.fx-tabs__entrada { max-width: 56ch; margin-inline: auto; color: var(--fx-muted); font-size: 1.125rem; }
.fx-tabs__control-caja { display: flex; justify-content: center; margin: 2.5rem 0 3rem; overflow-x: auto; }
.fx-tabs__control {
  flex-wrap: nowrap; gap: .25rem; padding: .35rem; border-radius: 999px;
  background: #FFFFFF; box-shadow: var(--fx-sombra);
}
.fx-tabs__control .nav-link {
  min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px; white-space: nowrap;
  font-weight: 700; color: var(--fx-ink); background: none; border: 0;
}
.fx-tabs__control .nav-link.active { background: var(--fx-plum); color: #FFFFFF; }
.fx-tabs--oscuro .fx-tabs__control { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fx-tabs--oscuro .fx-tabs__control .nav-link { color: #C3CAE0; }
.fx-tabs--oscuro .fx-tabs__control .nav-link.active { background: #FFFFFF; color: var(--fx-plum); }
.fx-tabs--oscuro .fx-tabs__entrada, .fx-tabs--oscuro .fx-tabs__texto { color: #C3CAE0; }
.fx-tabs--oscuro {
  background-image: radial-gradient(55% 60% at 10% 100%, rgba(62, 104, 229, .45), transparent 70%),
                    radial-gradient(40% 50% at 100% 0%, rgba(110, 142, 240, .25), transparent 70%);
}

.fx-tabs__visual { position: relative; }
.fx-tabs__foto { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.fx-tabs__chip {
  position: absolute; left: 1.25rem; bottom: 1.25rem; margin: 0;
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem .7rem .7rem;
  border-radius: 14px; background: #FFFFFF; color: var(--fx-ink); font-weight: 700; font-size: .9375rem;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .5);
}
.fx-tabs__chip-icono { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--fx-orange); color: #FFFFFF; }
.fx-tabs__titulo { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 1rem; }
.fx-tabs__texto { font-size: 1.0625rem; line-height: 1.65; color: var(--fx-muted); }
.fx-tabs__enlace {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--fx-line);
  font-weight: 700; font-size: 1.125rem; color: var(--fx-ink); text-decoration: none;
}
.fx-tabs__enlace .fx-icon { transition: transform .2s; }
.fx-tabs__enlace:hover { color: var(--fx-orange-dark); }
.fx-tabs__enlace:hover .fx-icon { transform: translateX(4px); }
.fx-tabs--oscuro .fx-tabs__enlace { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, .2); }
.fx-tabs--oscuro .fx-tabs__enlace:hover { color: #C9D6FF; }

/* --- Tarjetas de sector con foto y flecha ----------------------------------- */
.fx-tile__flecha {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--fx-ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); transition: background-color .2s, color .2s, transform .2s;
}
a.fx-tile:hover .fx-tile__flecha { background: var(--fx-orange); color: #FFFFFF; transform: rotate(45deg); }
.fx-tile--foto { padding-top: 0; }
.fx-tile--foto::after { display: none; }
.fx-tile__foto { display: block; margin: 0 -1.75rem .25rem; height: 11rem; overflow: hidden; }
.fx-tile__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.fx-tile:hover .fx-tile__foto img { transform: scale(1.04); }
.fx-tile--foto .fx-icon-box { margin-top: -2.5rem; position: relative; z-index: 2; background: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(18, 25, 58, .35); }
.fx-tile--foto .fx-tile__spec { color: var(--fx-orange-dark); }

/* --- Garantías encima de los planes ------------------------------------------ */
.fx-garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin: 0 0 2.5rem; padding: 0; }
.fx-garantias li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fx-ink); }
.fx-garantias .fx-icon { color: var(--fx-green); flex: none; }
.fx-bg-plum .fx-garantias li { color: #FFFFFF; }

/* --- Imagen y texto: la foto con su halo ---------------------------------------- */
.fx-feature__media { border-radius: 24px; }
.fx-feature img { border-radius: 24px; }

/* --- Pestañas: que el bloque entero quepa en la pantalla ------------------------
   La foto se limita al alto de la ventana, y en móvil los botones se reparten el
   ancho en vez de salirse por la derecha. */
.fx-tabs.fx-section { padding-block: clamp(3rem, 6vw, 5rem); }
.fx-tabs__control-caja { margin: 1.75rem 0 2.25rem; overflow: visible; }
.fx-tabs__foto { aspect-ratio: 16 / 10; max-height: min(400px, 52vh); }
.fx-tabs__titulo { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.fx-tabs__enlace { margin-top: 1.25rem; }
@media (max-width: 767.98px) {
  .fx-tabs__control-caja { display: block; }
  .fx-tabs__control { display: grid; grid-template-columns: repeat(var(--fx-tabs-n, 3), minmax(0, 1fr)); border-radius: 16px; }
  .fx-tabs__control .nav-link { white-space: normal; min-height: 52px; padding: .5rem .4rem; border-radius: 12px; font-size: .875rem; line-height: 1.2; width: 100%; }
  .fx-tabs__foto { aspect-ratio: 4 / 3; }
  .fx-tabs__chip { left: .75rem; bottom: .75rem; font-size: .8125rem; }
}

/* --- Sectores: tarjetas compactas, del tamaño de las de la web actual --------- */
.fx-tile--foto { gap: .5rem; padding: 0 1.25rem 1.25rem; }
.fx-tile--foto .fx-tile__foto { margin: 0 -1.25rem .25rem; height: 7.5rem; }
.fx-tile--foto .fx-icon-box { width: 44px; height: 44px; margin-top: -2.1rem; }
.fx-tile--foto .fx-tile__title { font-size: 1.125rem; }
.fx-tile--foto .fx-tile__text { font-size: .9375rem; }
/* La flecha de la esquina ya dice que es un enlace: el «Ver …» sobraba. */
.fx-tile--foto .fx-tile__more { display: none; }
.fx-tile--foto .fx-tile__spec { padding-top: .75rem; font-size: .8125rem; }
.fx-tile__flecha { top: .75rem; right: .75rem; width: 2rem; height: 2rem; }

/* --- La portada cabe en la primera pantalla ----------------------------------
   En un portátil de 768 px de alto la foto y el titular la hacían más alta que la
   ventana. Se limita el alto de la foto al de la ventana menos la cabecera y el aire,
   y el titular baja un punto para que quepa en tres líneas. */
@media (min-width: 992px) {
  .fx-hero-home { padding-block: clamp(2.5rem, 5vh, 4.5rem); }
  .fx-hero-home h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
  .fx-hero-home__composicion { padding: 1rem 0 1.5rem; }
  .fx-hero-home__composicion .fx-hero-home__foto { max-height: calc(100svh - 79px - 8rem); min-height: 380px; }
  .fx-hero-home__composicion { width: fit-content; }
  .fx-hero-home__composicion .fx-hero-home__foto { width: auto; max-width: 100%; aspect-ratio: 4 / 5; }
}
@media (max-width: 991.98px) {
  /* Casi cuadrada y encuadrada en la cara: a 5:4 la cara quedaba cortada. */
  .fx-hero-home__composicion .fx-hero-home__foto { aspect-ratio: 1 / 1; object-position: 50% 24%; }
}

/* En un portátil la foto de las pestañas baja un punto más para que el panel quepa. */
.fx-tabs__foto { max-height: min(380px, 44vh); }

/* ===========================================================================
   Cuarta pasada: más cerca de Hostinger
   ---------------------------------------------------------------------------
   DM Sans, un azul más vivo, superficies planas (borde fino, sin sombras, esquinas
   de 8 px) y fondos claros: la única sección oscura de la portada es la de arriba.
   =========================================================================== */
:root {
  --fx-font: "DM Sans", system-ui, sans-serif;
  --fx-orange: #2D5BFF;
  --fx-orange-dark: #1E44D8;
  --fx-orange-soft: #EBF0FF;
  --fx-sand: #F4F6FF;
  --fx-line: #E3E6EF;
  --fx-sombra: none;
  --fx-sombra-alta: none;
  --bs-link-color: var(--fx-orange-dark);
  --bs-link-color-rgb: 30, 68, 216;
  --bs-link-hover-color: var(--fx-orange);
  --bs-link-hover-color-rgb: 45, 91, 255;
  --bs-primary-rgb: 45, 91, 255;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 8px;
}
body { font-family: var(--fx-font); }

/* Titulares: grandes y de peso normal, como Hostinger. El grueso, solo arriba. */
h2 { font-weight: 500; letter-spacing: -0.025em; }
h3, .fx-card h3, .fx-card .fs-5, .fx-tile__title, .fx-paso__tit, .fx-plan h3 { font-weight: 600 !important; letter-spacing: -0.015em; }
.fx-hero-home h1 { font-weight: 700; letter-spacing: -0.035em; }
.fx-tabs__titulo { font-weight: 500; }

/* Superficies planas: borde fino, sin sombra, esquinas de 8 px. */
.btn-fox, .btn-fox-outline { --bs-btn-border-radius: 8px; box-shadow: none !important; }
.btn-fox:hover { transform: none; }
.fx-card, .fx-tile, .fx-paso, .fx-plan, .fx-hz .fx-card, .fx-hz .fx-tile { border-radius: 8px !important; box-shadow: none !important; border: 1px solid var(--fx-line); }
.fx-card-link:hover, a.fx-tile:hover, a.fx-tile:focus-visible, .fx-plan:hover { transform: none; box-shadow: none !important; border-color: var(--fx-orange) !important; }
.fx-icon-box, .fx-tile .fx-icon-box { border-radius: 8px; }
.fx-paso__num { box-shadow: none; }
.fx-tabs__foto, .fx-feature img, .fx-feature__media, .fx-hz .fx-feature > .container > .row { border-radius: 8px; box-shadow: none !important; }
.fx-tabs__chip, .fx-flota { border-radius: 8px; }
.fx-hero-home__composicion .fx-hero-home__foto { border-radius: 12px; }
.fx-hero-home__halo { border-radius: 16px; }
.form-control, .form-select { border-radius: 8px; }

/* --- Fondos claros: las bandas oscuras de en medio pasan a azul muy claro ------ */
.fx-bg-banda { background: var(--fx-sand); background-image: none; color: var(--fx-ink); }
.fx-bg-banda h2 { color: var(--fx-ink); }
.fx-bg-banda .fx-eyebrow { background: #FFFFFF; color: var(--fx-orange-dark); }
.fx-bg-banda .fx-stat { background: #FFFFFF; border: 1px solid var(--fx-line); border-radius: 8px; }
.fx-bg-banda .fx-num { color: var(--fx-orange); }
.fx-bg-banda .fx-text-muted { color: var(--fx-muted) !important; }
.fx-hero-home {
  background-image:
    radial-gradient(60% 70% at 85% 30%, rgba(45, 91, 255, .55) 0%, rgba(45, 91, 255, 0) 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(45, 91, 255, .3) 0%, rgba(45, 91, 255, 0) 70%),
    linear-gradient(180deg, #121A3F 0%, #0B1235 100%);
}
.fx-hero-home__halo { background: linear-gradient(140deg, #7C9BFF 0%, #2D5BFF 50%, #1A3BC4 100%); }

/* ===========================================================================
   Megamenú: panel flotante del ancho del contenido, al estilo de tinyEmail
   =========================================================================== */
@media (min-width: 992px) {
  .fx-navbar .dropdown-menu.fx-mm {
    width: 100%; left: 0; right: 0; margin-top: 0; padding: .5rem 1rem 1.5rem;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    pointer-events: none;
  }
  .fx-navbar .fx-mm.show { animation: fx-mm-abrir .16s ease-out; }
}
@keyframes fx-mm-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fx-mm__caja {
  pointer-events: auto; max-width: 1180px; margin: 0 auto; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--fx-line); border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(16, 24, 64, .22);
}
.fx-mm--planes .fx-mm__caja { max-width: 860px; }
.fx-mm__cuerpo { display: grid; }
@media (min-width: 992px) { .fx-mm__cuerpo--panel { grid-template-columns: minmax(0, 1fr) 20rem; } }
.fx-mm__columnas { display: grid; gap: .5rem 1.5rem; padding: 1.75rem 2rem; grid-template-columns: repeat(var(--fx-mm-cols, 1), minmax(0, 1fr)); }
.fx-mm__grupo { margin: 0 0 .5rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--fx-muted-2); }
.fx-mm--sectores .fx-mm__col:nth-child(2) { padding-top: 1.75rem; }

.fx-navbar .fx-mm .fx-mm__item {
  display: flex; align-items: flex-start; gap: .85rem; padding: .7rem .75rem; border-radius: 8px;
  color: var(--fx-ink); white-space: normal;
}
.fx-navbar .fx-mm .fx-mm__item:hover, .fx-navbar .fx-mm .fx-mm__item:focus { background: var(--fx-sand); }
.fx-mm-icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 8px;
  background: var(--fx-orange-soft); color: var(--fx-orange-dark); transition: background-color .15s, color .15s;
}
.fx-mm__item:hover .fx-mm-icono, .fx-mm__item:focus-visible .fx-mm-icono { background: var(--fx-orange); color: #FFFFFF; }
.fx-mm-icono--sm { width: 2rem; height: 2rem; }
.fx-mm__item-texto { display: grid; gap: .1rem; min-width: 0; }
.fx-mm__item-nombre { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.fx-mm__item-frase { font-size: .8125rem; line-height: 1.45; color: var(--fx-muted); }
.fx-mm__item-meta { font-size: .75rem; color: var(--fx-muted-2); }
.fx-mm-precio {
  display: inline-block; margin-left: .35rem; vertical-align: .1em; white-space: nowrap;
  padding: .05rem .45rem; border-radius: 999px; font-size: .6875rem; font-weight: 700;
  background: var(--fx-orange-soft); color: var(--fx-orange-dark);
}

/* La tarjeta de la derecha: azul de marca, con un dibujo grande y tenue al fondo. */
.fx-mm__panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem; background: linear-gradient(155deg, #2D5BFF 0%, #1A3BC4 100%); color: rgba(255, 255, 255, .85);
}
.fx-mm__panel-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.fx-mm__panel-titulo { margin: .25rem 0 0; color: #FFFFFF; font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; }
.fx-mm__panel-texto { margin: 0; font-size: .875rem; line-height: 1.55; }
.fx-navbar .fx-mm .fx-mm__panel-boton {
  position: relative; z-index: 1; align-self: flex-start; width: auto; margin-top: auto;
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5);
  background: transparent; color: #FFFFFF; font-weight: 600; font-size: .875rem;
}
.fx-navbar .fx-mm .fx-mm__panel-boton:hover, .fx-navbar .fx-mm .fx-mm__panel-boton:focus { background: #FFFFFF; color: var(--fx-orange-dark); }
.fx-mm__panel-dibujo { position: absolute; right: -2.5rem; bottom: -2.5rem; color: rgba(255, 255, 255, .12); pointer-events: none; }

/* La franja de abajo. */
.fx-mm__franja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  padding: .9rem 2.75rem; border-top: 1px solid var(--fx-line); background: var(--fx-sand);
  font-size: .875rem; color: var(--fx-muted);
}
.fx-navbar .fx-mm .fx-mm__enlace { width: auto; padding: .25rem .5rem; border-radius: 6px; font-weight: 600; color: var(--fx-orange-dark); }
.fx-navbar .fx-mm .fx-mm__enlace:hover { background: #FFFFFF; }

/* La pestaña abierta en la barra. */
@media (min-width: 992px) {
  .fx-navbar__menu .nav-link { border-radius: 8px; }
}

/* Megamenú: la etiqueta de precio salta de línea sin sangría, y «Qué hacemos» gana
   ancho para que las frases quepan en una o dos líneas. */
.fx-mm__item-nombre { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4rem; row-gap: .15rem; }
.fx-mm__item-nombre .fx-mm-precio { margin-left: 0; }
/* La segunda etiqueta y siguientes son ventajas, no precio: en verde. */
.fx-mm-precio + .fx-mm-precio { margin-left: .25rem; }
.fx-mm-precio.fx-mm-precio--extra { background: #E6F7EF; color: #127A4C; }
.fx-mm--columnas .fx-mm__caja { max-width: 1260px; }
@media (min-width: 992px) { .fx-mm--columnas .fx-mm__cuerpo--panel { grid-template-columns: minmax(0, 1fr) 16.5rem; } }
.fx-mm--columnas .fx-mm__item { padding: .55rem .6rem; }
.fx-mm--columnas .fx-mm__columnas { padding: 1.5rem 1.5rem; column-gap: .75rem; }

/* DM Sans ya es estrecha: menos apretada que Manrope en los titulares. */
h2 { letter-spacing: -0.012em; }
.fx-hero-home h1 { letter-spacing: -0.025em; }
.fx-tabs__foto { border-radius: 8px !important; box-shadow: none !important; }

/* Etiqueta sobre la foto de la tarjeta: «0 % comisión», «Gratis». */
.fx-tile__badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 3;
  padding: .3rem .7rem; border-radius: 999px; background: var(--fx-green); color: #FFFFFF;
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
}

/* «Qué hacemos»: pestañas laterales. A la izquierda las tres secciones; al lado,
   solo los servicios de la elegida, a dos columnas. */
.fx-mm--columnas .fx-mm__caja { max-width: 1120px; }
@media (min-width: 992px) { .fx-mm--columnas .fx-mm__cuerpo--panel { grid-template-columns: minmax(0, 1fr) 17rem; } }
.fx-mm__tabs { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100%; }
.fx-mm__tabs-lista { display: grid; align-content: start; gap: .25rem; padding: 1.25rem .75rem; background: var(--fx-sand); border-right: 1px solid var(--fx-line); }
.fx-mm-tab { position: relative; display: grid; gap: .15rem; width: 100%; padding: .8rem 1rem; text-align: left; border: 0; border-radius: 8px; background: none; color: var(--fx-ink); transition: background-color .15s; }
.fx-mm-tab:hover { background: rgba(255, 255, 255, .7); }
.fx-mm-tab.is-on { background: #FFFFFF; box-shadow: inset 3px 0 0 var(--fx-orange); }
.fx-mm-tab__nombre { font-weight: 600; font-size: .9375rem; }
.fx-mm-tab.is-on .fx-mm-tab__nombre { color: var(--fx-orange-dark); }
.fx-mm-tab__frase { font-size: .8125rem; line-height: 1.4; color: var(--fx-muted); }
.fx-mm__tabs-paneles { padding: 1.5rem 1.5rem 1.25rem; }
.fx-mm__tabs-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; }

/* ===========================================================================
   Cabeceras de servicios y soluciones: caben en la pantalla y llevan grafismo
   ---------------------------------------------------------------------------
   En escritorio la cabecera (más la barra de secciones que la sigue) acaba justo
   al final de la ventana. El titular y la foto se ajustan al alto disponible.
   =========================================================================== */
@media (min-width: 992px) {
  .fx-pagehero:not(.fx-pagehero--solo) {
    --fx-ph-alto: calc(100svh - 79px);
    min-height: var(--fx-ph-alto);
    display: flex; align-items: center;
    padding-block: clamp(1.5rem, 4vh, 3rem) !important;
  }
  .fx-pagehero:not(.fx-pagehero--solo):has(+ .fx-subnav) { --fx-ph-alto: calc(100svh - 79px - 70px); }
  .fx-pagehero:not(.fx-pagehero--solo) > .container { width: 100%; }
  .fx-pagehero:not(.fx-pagehero--solo) h1 { font-size: clamp(2.25rem, min(4.1vw, 6.6vh), 3.75rem); line-height: 1.05; }
  .fx-pagehero:not(.fx-pagehero--solo) h1 + p { font-size: clamp(.9375rem, 2.2vh, 1.0625rem); margin-bottom: clamp(.75rem, 2.5vh, 1.5rem) !important; }
  .fx-pagehero:not(.fx-pagehero--solo) .fx-num { font-size: clamp(1.875rem, 4.6vh, 2.75rem) !important; }
  .fx-pagehero:not(.fx-pagehero--solo) .fx-eyebrow,
  .fx-pagehero:not(.fx-pagehero--solo) .fx-chip { margin-bottom: clamp(.5rem, 2vh, 1rem); }
  .fx-pagehero:not(.fx-pagehero--solo) p.d-flex { margin-bottom: clamp(.5rem, 2vh, 1.5rem) !important; }
  .fx-pagehero:not(.fx-pagehero--solo) p.small { margin-bottom: clamp(.75rem, 2.5vh, 1.5rem) !important; }
}

/* --- La imagen montada ------------------------------------------------------- */
.fx-ph-visual { position: relative; max-width: 560px; margin: 1rem auto 1.5rem; }
.fx-ph-visual__halo {
  position: absolute; inset: 6% -5% -4% 8%; z-index: 0; border-radius: 16px;
  background: linear-gradient(140deg, #7C9BFF 0%, #2D5BFF 50%, #1A3BC4 100%); transform: rotate(3deg);
}
.fx-ph-visual__halo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.4px);
  background-size: 18px 18px; mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.fx-ph-visual__main { position: relative; z-index: 1; }
.fx-ph-visual__foto {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
}
@media (min-width: 992px) {
  .fx-ph-visual__foto { max-height: calc(var(--fx-ph-alto, 100svh) - 7rem); }
}
.fx-ph-visual__main--maqueta > * { margin: 0; }

/* La segunda imagen: una ventana de la aplicación delante, abajo a la izquierda. */
.fx-ph-visual__aside {
  position: absolute; z-index: 2; left: -8%; bottom: -6%; width: 62%;
  border-radius: 10px; overflow: hidden; background: #FFFFFF;
  box-shadow: 0 30px 60px -20px rgba(5, 8, 25, .6); border: 1px solid rgba(255, 255, 255, .5);
}
.fx-ph-visual__aside img { display: block; width: 100%; height: auto; }
.fx-ph-visual__aside .fx-mini, .fx-ph-visual__aside .fx-maqueta { margin: 0 !important; box-shadow: none; transform: none; font-size: .8125rem; }

/* Los avisos: arriba a la izquierda, abajo a la derecha y el azul abajo. */
.fx-ph-chip { z-index: 3; }
.fx-ph-chip--1 { top: 8%; left: -9%; }
.fx-ph-chip--2 { bottom: 12%; right: -7%; }
.fx-ph-chip--3 { bottom: -4%; left: 6%; background: var(--fx-orange); color: #FFFFFF; }
.fx-ph-chip--3 small { color: rgba(255, 255, 255, .8); }
.fx-ph-chip--3 .fx-flota__icono { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
/* Con pantalla del producto delante, el primer aviso pasa arriba a la derecha. */
.fx-ph-visual--doble .fx-ph-chip--1 { left: auto; right: -7%; top: 6%; }
.fx-ph-visual--doble .fx-ph-chip--2 { bottom: auto; top: 34%; right: -9%; }

@media (max-width: 991.98px) {
  .fx-ph-visual { max-width: 460px; margin-top: 2rem; }
  .fx-ph-chip--1 { left: -2%; }
  .fx-ph-chip--2 { right: -2%; }
  .fx-ph-visual__aside { left: -2%; width: 58%; }
  .fx-ph-visual--doble .fx-ph-chip--1 { right: -2%; }
}
@media (max-width: 575.98px) {
  .fx-ph-chip--2, .fx-ph-visual--doble .fx-ph-chip--2 { display: none; }
}

/* La pantalla del producto no tapa más de tres cuartos de la foto. */
.fx-ph-visual__aside { max-height: 72%; width: 54%; }
@media (min-width: 992px) { .fx-pagehero:not(.fx-pagehero--solo):has(+ .fx-subnav) { --fx-ph-alto: calc(100svh - 79px - 71px); } }

/* La barra de secciones mide lo que mide (theme.js deja su alto en --fx-subnav-h),
   y el grafismo que asoma por los lados no crea scroll horizontal en móvil. */
@media (min-width: 992px) { .fx-pagehero:not(.fx-pagehero--solo):has(+ .fx-subnav) { --fx-ph-alto: calc(100svh - 79px - var(--fx-subnav-h, 70px)); } }
.fx-pagehero { overflow-x: clip; }

/* ===========================================================================
   Casos de éxito: índice en tarjetas y una página por caso (a lo Webflow)
   =========================================================================== */
.fx-casos__cab { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.fx-casos__cab .fx-eyebrow { margin-inline: auto; }
.fx-casos__rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fx-casos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .fx-casos__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fx-caso-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--fx-line); border-radius: 8px;
  color: var(--fx-ink); text-decoration: none; transition: border-color .2s;
}
a.fx-caso-card:hover, a.fx-caso-card:focus-visible { border-color: var(--fx-orange); color: var(--fx-ink); }
.fx-caso-card__imagen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fx-plum); }
.fx-caso-card__imagen img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .5s ease; }
a.fx-caso-card:hover .fx-caso-card__imagen img { transform: scale(1.03); }
.fx-caso-card__tags { position: absolute; left: .75rem; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.fx-caso-card__tags span { padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--fx-orange-dark); font-size: .75rem; font-weight: 700; }
.fx-caso-card__cuerpo { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.5rem; }
.fx-caso-card__quien { font-size: .8125rem; font-weight: 600; color: var(--fx-muted); }
.fx-caso-card__titulo { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.fx-caso-card__cifra { display: grid; gap: .15rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--fx-line); }
.fx-caso-card__cifra strong { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--fx-orange); }
.fx-caso-card__cifra span { font-size: .875rem; color: var(--fx-muted); }
.fx-caso-card__leer { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9375rem; color: var(--fx-orange-dark); }
.fx-caso-card__leer .fx-icon { transition: transform .2s; }
a.fx-caso-card:hover .fx-caso-card__leer .fx-icon { transform: translateX(4px); }

/* --- Índice en filas: un caso a lo ancho, imagen a un lado y la historia al otro -- */
.fx-casos--filas { padding-top: clamp(3rem, 7vw, 5.5rem); }
.fx-caso-fila {
  display: grid; gap: 2rem; align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.fx-caso-fila + .fx-caso-fila { border-top: 1px solid var(--fx-line); }
.fx-caso-fila:first-child { padding-top: 0; }
@media (min-width: 992px) {
  .fx-caso-fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .fx-caso-fila--inversa .fx-caso-fila__imagen { order: 2; }
}

.fx-caso-fila__imagen {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 16px; background: var(--fx-plum);
}
.fx-caso-fila__imagen img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  transition: transform .5s var(--fx-curva, ease);
}
@media (hover: hover) and (pointer: fine) {
  .fx-caso-fila:hover .fx-caso-fila__imagen img { transform: scale(1.03); }
}

.fx-caso-fila__cuerpo { display: flex; flex-direction: column; gap: 1.25rem; }
.fx-caso-fila__quien { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: .875rem; font-weight: 600; color: var(--fx-muted); }
.fx-caso-fila__num {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 999px; background: var(--fx-orange-soft); color: var(--fx-orange-dark);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fx-caso-fila__titulo { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.fx-caso-fila__titulo a { color: var(--fx-ink); text-decoration: none; }
.fx-caso-fila__titulo a:hover { color: var(--fx-orange-dark); }

.fx-caso-fila__cita { margin: 0; padding-left: 1rem; border-left: 3px solid var(--fx-orange); }
.fx-caso-fila__cita p { margin: 0 0 .35rem; font-size: 1.0625rem; line-height: 1.5; color: var(--fx-ink); }
.fx-caso-fila__cita footer { font-size: .8125rem; color: var(--fx-muted); }

.fx-caso-fila__cifras {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0;
  padding: 1.25rem; border-radius: 12px; background: var(--fx-sand);
}
.fx-caso-fila__cifras dt { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--fx-orange); font-variant-numeric: tabular-nums; }
.fx-caso-fila__cifras dd { margin: .35rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--fx-muted); }
@media (max-width: 575.98px) {
  .fx-caso-fila__cifras { grid-template-columns: 1fr; }
  .fx-caso-fila__cifras > div + div { padding-top: .75rem; border-top: 1px solid var(--fx-line); }
}

.fx-caso-fila__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.fx-caso-fila__boton { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; transition: transform .16s var(--fx-curva, ease-out); }
.fx-caso-fila__boton .fx-icon { transition: transform .16s var(--fx-curva, ease-out); }
@media (hover: hover) and (pointer: fine) { .fx-caso-fila__boton:hover .fx-icon { transform: translateX(3px); } }
.fx-caso-fila__boton:active { transform: scale(.97); }
.fx-caso-fila__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-caso-fila__tags li { padding: .25rem .65rem; border: 1px solid var(--fx-line); border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--fx-muted); }

.fx-casos__nota { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--fx-line); text-align: center; color: var(--fx-muted); }
.fx-casos__nota a { margin-left: .35rem; font-weight: 700; color: var(--fx-orange-dark); text-decoration: none; }
.fx-casos__nota a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .fx-caso-fila__imagen img, .fx-caso-fila__boton, .fx-caso-fila__boton .fx-icon { transition: none; }
}
.fx-caso-fila__lead { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--fx-muted); }

/* ===========================================================================
   Grafismos animados de los casos: una pantalla de lo que se montó, sobre azul
   noche. Arrancan al asomar (theme.js pone .is-activo) y se animan una vez; solo
   un detalle sigue vivo (la luz, la línea que lee, el aviso). Solo transform y
   opacity. Con movimiento reducido se ven en su estado final, quietos.
   =========================================================================== */
.fx-caso-fila__imagen--grafismo {
  aspect-ratio: auto; min-height: 440px;
  display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(60% 55% at 85% 10%, rgba(45, 91, 255, .45), transparent 70%),
    radial-gradient(50% 50% at 10% 100%, rgba(45, 91, 255, .28), transparent 70%),
    linear-gradient(160deg, #12193A, #0C1230);
  isolation: isolate;
}
.fx-caso-fila__imagen--grafismo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.fx-caso-fila__imagen--grafismo, .fx-caso-fila__imagen--grafismo * { text-decoration: none; }
.fx-gc { --fx-gc-curva: cubic-bezier(0.23, 1, 0.32, 1); position: relative; width: min(100%, 440px); padding-bottom: 2rem; font-size: .8125rem; color: var(--fx-ink); }
.fx-gc__panel { display: grid; gap: .9rem; padding: 1.1rem; padding-bottom: 3.75rem; border-radius: 14px; background: #FFFFFF; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6); }
.fx-gc__cab { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.fx-gc__cab strong { font-size: .875rem; font-weight: 700; }
.fx-gc__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; background: #EAF8F1; color: #127A4C; font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.fx-gc__luz { width: .45rem; height: .45rem; border-radius: 50%; background: var(--fx-green, #21B573); }

/* La cifra que flota sobre la esquina y el aviso que entra cada pocos segundos. */
.fx-gc__cifra {
  position: absolute; left: -.75rem; bottom: 0; display: grid; gap: .1rem;
  padding: .75rem 1rem; border-radius: 12px; background: var(--fx-orange); color: #FFFFFF;
  box-shadow: 0 18px 40px -16px rgba(45, 91, 255, .8);
}
.fx-gc__cifra small { font-size: .6875rem; font-weight: 600; opacity: .85; }
.fx-gc__cifra strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.fx-gc__cifra em { font-style: normal; font-size: .6875rem; opacity: .85; }
.fx-gc__aviso {
  position: absolute; right: -.75rem; top: -1rem; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-radius: 12px; background: #FFFFFF; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
}
.fx-gc__aviso > span:last-child { display: grid; font-size: .6875rem; color: var(--fx-muted); }
.fx-gc__aviso strong { font-size: .75rem; color: var(--fx-ink); }
.fx-gc__aviso-icono { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--fx-orange-soft); color: var(--fx-orange-dark); }

/* --- Hotel: calendario y cuota de directas ------------------------------------ */
.fx-gc-res { display: grid; gap: .45rem; }
.fx-gc-res li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .6rem; }
.fx-gc-res__hab { font-size: .6875rem; font-weight: 600; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-gc-res__pista { position: relative; height: 1.5rem; border-radius: 6px; background: repeating-linear-gradient(90deg, #F2F4F9 0 calc(100% / 14 - 2px), #FFFFFF calc(100% / 14 - 2px) calc(100% / 14)); }
.fx-gc-res__barra {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-inline: .5rem;
  border-radius: 6px; background: #DCE0EA; color: #4A5068; font-size: .625rem; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.fx-gc-res__barra.is-directa { background: var(--fx-orange); color: #FFFFFF; }
.fx-gc-cuota { display: grid; gap: .4rem; padding-top: .8rem; border-top: 1px solid var(--fx-line); }
.fx-gc-cuota__tit { margin: 0 0 .1rem; font-size: .6875rem; font-weight: 700; color: var(--fx-muted); text-transform: uppercase; letter-spacing: .04em; }
.fx-gc-cuota__fila { display: grid; grid-template-columns: 3rem 1fr 3.25rem; align-items: center; gap: .6rem; font-size: .75rem; color: var(--fx-muted); }
.fx-gc-cuota__fila b { text-align: right; color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-gc-cuota__pista { height: .5rem; border-radius: 999px; background: #EEF0F5; overflow: hidden; }
.fx-gc-cuota__pista i { display: block; height: 100%; border-radius: inherit; background: #AEB6CE; transform-origin: left; transform: scaleX(var(--v)); }
.fx-gc-cuota__fila.is-ahora .fx-gc-cuota__pista i { background: var(--fx-orange); }
.fx-gc-cuota__fila.is-ahora b { color: var(--fx-orange-dark); }

/* --- Distribuidor: factura que se lee sola ------------------------------------- */
.fx-gc-fac { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; }
.fx-gc-fac__doc { position: relative; display: grid; align-content: start; gap: .45rem; padding: .75rem; border: 1px solid var(--fx-line); border-radius: 8px; background: #FAFBFD; overflow: hidden; }
.fx-gc-fac__logo { width: 1.6rem; height: 1.6rem; margin-bottom: .2rem; border-radius: 6px; background: #DCE0EA; }
.fx-gc-fac__linea { height: .35rem; border-radius: 999px; background: #E3E6EF; }
.fx-gc-fac__linea--gap { margin-top: .35rem; }
.fx-gc-fac__linea--total { justify-self: end; margin-top: .35rem; height: .5rem; background: #C9D1E6; }
.fx-gc-fac__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2.25rem;
  background: linear-gradient(180deg, transparent, rgba(45, 91, 255, .18) 70%, rgba(45, 91, 255, .9) 96%, transparent);
  transform: translateY(-100%);
}
.fx-gc-fac__datos { display: grid; gap: .3rem; align-content: start; }
.fx-gc-fac__datos > div { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border-radius: 6px; background: #F4F6FF; }
.fx-gc-fac__datos dt { font-weight: 600; color: var(--fx-muted); font-size: .6875rem; }
.fx-gc-fac__datos dd { margin: 0; font-weight: 700; font-size: .6875rem; font-variant-numeric: tabular-nums; }
.fx-gc-cola { display: grid; gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--fx-line); }
.fx-gc-cola li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .75rem; }
.fx-gc-cola b, .fx-gc-socios__estado b { padding: .15rem .5rem; border-radius: 999px; font-size: .625rem; font-weight: 700; white-space: nowrap; }
.fx-gc-cola .is-ok, .fx-gc-socios__estado .is-pagado { background: #EAF8F1; color: #127A4C; }
.fx-gc-cola .is-revisar { background: #FFF4E0; color: #9A5B00; }

/* --- Club: fichas que se pagan solas -------------------------------------------- */
.fx-gc-temp { display: grid; gap: .4rem; font-size: .75rem; color: var(--fx-muted); }
.fx-gc-temp b { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-gc-temp__pista { height: .5rem; border-radius: 999px; background: #EEF0F5; overflow: hidden; }
.fx-gc-temp__pista i { display: block; height: 100%; border-radius: inherit; background: var(--fx-orange); transform-origin: left; }
.fx-gc-socios { display: grid; gap: .4rem; }
.fx-gc-socios li { display: grid; grid-template-columns: 1.75rem 1fr auto; align-items: center; gap: .6rem; padding: .4rem .5rem; border: 1px solid var(--fx-line); border-radius: 8px; }
.fx-gc-socios__avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, #DCE3FF, #B9C7FF); }
.fx-gc-socios__cat { display: grid; font-weight: 700; font-size: .75rem; }
.fx-gc-socios__cat small { font-weight: 500; font-size: .625rem; color: var(--fx-muted); }
.fx-gc-socios__estado { display: grid; justify-items: end; }
.fx-gc-socios__estado b { grid-area: 1 / 1; }
.fx-gc-socios__estado .is-pendiente { background: #F1F2F6; color: var(--fx-muted); }
.fx-gc-dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.fx-gc-dias li { padding: .35rem 0; border-radius: 6px; background: #F1F2F6; color: var(--fx-muted); font-size: .625rem; font-weight: 700; text-align: center; }
.fx-gc-dias li.is-fin { background: var(--fx-orange); color: #FFFFFF; }

/* --- Movimiento ---------------------------------------------------------------- */
@keyframes fx-gc-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fx-gc-barra { from { opacity: 0; transform: translateX(-10px) scaleX(.6); } to { opacity: 1; transform: none; } }
@keyframes fx-gc-llena { from { transform: scaleX(0); } }
@keyframes fx-gc-llena-todo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-gc-sale { to { opacity: 0; transform: scale(.9); } }
@keyframes fx-gc-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fx-gc-lee { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(600%); } }
@keyframes fx-gc-aviso { 0%, 8% { opacity: 0; transform: translateY(-8px) scale(.96); } 14%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }

.fx-gc :is(.fx-gc-res__barra, .fx-gc-cuota__pista i, .fx-gc-fac__datos > div, .fx-gc-cola li, .fx-gc-temp__pista i, .fx-gc-socios li, .fx-gc-socios__estado b, .fx-gc-dias li, .fx-gc__cifra, .fx-gc__aviso, .fx-gc-fac__scan, .fx-gc__luz) {
  animation-play-state: paused;
}
.fx-gc.is-activo :is(.fx-gc-res__barra, .fx-gc-cuota__pista i, .fx-gc-fac__datos > div, .fx-gc-cola li, .fx-gc-temp__pista i, .fx-gc-socios li, .fx-gc-socios__estado b, .fx-gc-dias li, .fx-gc__cifra, .fx-gc__aviso, .fx-gc-fac__scan, .fx-gc__luz) {
  animation-play-state: running;
}

.fx-gc__luz { animation: fx-gc-pulso 1.8s ease-in-out infinite; }
.fx-gc__cifra { animation: fx-gc-entra .6s var(--fx-gc-curva) 1.6s both; }

.fx-gc-res__barra { transform-origin: left; animation: fx-gc-barra .5s var(--fx-gc-curva) both; animation-delay: calc(.2s + var(--i) * .15s); }
.fx-gc-res li { --i: 0; }
.fx-gc-cuota__pista i { animation: fx-gc-llena 1s var(--fx-gc-curva) 1s both; }
.fx-gc-cuota__fila.is-ahora .fx-gc-cuota__pista i { animation-delay: 1.25s; }
.fx-gc__aviso { opacity: 0; animation: fx-gc-aviso 6s var(--fx-gc-curva) 2.2s infinite; }

.fx-gc-fac__scan { animation: fx-gc-lee 2.6s cubic-bezier(0.77, 0, 0.175, 1) .2s infinite; }
.fx-gc-fac__datos > div { animation: fx-gc-entra .45s var(--fx-gc-curva) both; animation-delay: calc(.5s + var(--i) * .18s); }
.fx-gc-cola li { animation: fx-gc-entra .45s var(--fx-gc-curva) both; animation-delay: calc(1.7s + var(--i) * .2s); }

.fx-gc-temp__pista i { animation: fx-gc-llena-todo 2.2s var(--fx-gc-curva) .3s both; }
.fx-gc-socios li { animation: fx-gc-entra .45s var(--fx-gc-curva) both; animation-delay: calc(.2s + var(--i) * .12s); }
.fx-gc-socios__estado .is-pendiente { animation: fx-gc-sale .25s ease-out both; animation-delay: calc(.9s + var(--i) * .35s); }
.fx-gc-socios__estado .is-pagado { animation: fx-gc-entra .35s var(--fx-gc-curva) both; animation-delay: calc(.95s + var(--i) * .35s); }
.fx-gc-dias li { animation: fx-gc-entra .4s var(--fx-gc-curva) both; animation-delay: calc(.6s + var(--i) * .3s); }

@media (max-width: 575.98px) {
  .fx-gc__aviso { display: none; }
  .fx-gc__cifra { left: .5rem; }
  .fx-gc-fac { grid-template-columns: 5.5rem 1fr; }
  .fx-gc-res li { grid-template-columns: 5rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-gc *, .fx-gc *::before { animation: none !important; }
  .fx-gc__aviso { opacity: 1; }
  .fx-gc-socios__estado .is-pendiente { opacity: 0; }
  .fx-gc-fac__scan { display: none; }
}

/* --- La página de un caso ------------------------------------------------------ */
.fx-caso-hero__volver { display: inline-block; margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600; color: var(--fx-muted); text-decoration: none; }
.fx-caso-hero__volver:hover { color: var(--fx-orange-dark); }
.fx-caso-hero__cifras { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: .5rem 0 0; padding: 0; }
.fx-caso-hero__cifras li { display: grid; gap: .25rem; max-width: 15rem; }
.fx-caso-hero__cifras .fx-num { font-size: clamp(2rem, 3.4vw, 2.75rem); color: var(--fx-orange); }
.fx-caso__cifra-txt { font-size: .875rem; color: var(--fx-muted); line-height: 1.45; }
.fx-shot--portada { margin: 0; }
.fx-shot--portada .fx-shot__marco { border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.fx-shot--portada img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }

.fx-caso-datos { border-block: 1px solid var(--fx-line); background: var(--fx-sand); }
.fx-caso-datos__lista { display: grid; gap: 1rem; margin: 0; padding: 1.5rem 0; }
@media (min-width: 768px) { .fx-caso-datos__lista { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.fx-caso-datos__lista dt { font-size: .8125rem; font-weight: 600; color: var(--fx-muted-2); }
.fx-caso-datos__lista dd { margin: .15rem 0 0; font-weight: 600; }

.fx-caso-indice { position: sticky; top: 100px; padding: 1.5rem; border: 1px solid var(--fx-line); border-radius: 8px; background: #FFFFFF; }
.fx-caso-indice__tit { margin-bottom: .75rem; font-weight: 700; }
.fx-caso-indice li + li { border-top: 1px solid var(--fx-line); }
.fx-caso-indice li a { display: block; padding: .7rem 0; color: var(--fx-ink); text-decoration: none; font-weight: 500; }
.fx-caso-indice li a:hover { color: var(--fx-orange-dark); }

.fx-caso-cita { margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--fx-line); }
.fx-caso-cita blockquote { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.4; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.fx-caso-cita figcaption { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-weight: 600; color: var(--fx-muted); }
.fx-caso-cita__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--fx-orange-soft); color: var(--fx-orange-dark); }

.fx-caso-seccion { margin-bottom: 2.5rem; scroll-margin-top: 100px; }
.fx-caso-seccion__tit { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.fx-caso-seccion p { font-size: 1.0625rem; line-height: 1.7; color: var(--fx-muted); }
.fx-caso-cuerpo .fx-caso__piezas { display: grid; gap: .6rem; margin: 1.25rem 0 1.5rem; padding: 0; }
.fx-caso-cuerpo .fx-caso__piezas li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; }
.fx-caso-cuerpo .fx-caso__piezas li::before { display: none; }
.fx-caso-cuerpo .fx-caso__piezas .fx-icon { flex: none; margin-top: .2rem; color: var(--fx-green); }

.fx-caso-cifras { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; }
@media (min-width: 768px) { .fx-caso-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-caso-cifras li { display: grid; gap: .35rem; padding: 1.5rem; border-radius: 8px; background: var(--fx-sand); border: 1px solid var(--fx-line); }
.fx-caso-cifras .fx-num { font-size: clamp(1.75rem, 2.8vw, 2.25rem); color: var(--fx-orange); }

/* Caso: «Todos los casos» en su propia línea, el titular un punto más pequeño y la
   cabecera pegada a la franja de datos. */
.fx-caso-hero__volver { display: block; width: fit-content; }
.fx-caso-hero h1 { font-size: clamp(2rem, 3.6vw, 3.25rem) !important; }
.fx-caso-hero.fx-pagehero { min-height: 0 !important; padding-block: clamp(2.5rem, 6vh, 4.5rem) !important; }
.fx-caso-hero.fx-pagehero + .fx-caso-datos, .fx-caso-hero + .fx-caso-datos { margin-top: 0; }

/* --- Megamenú: el mismo ancho para los tres -----------------------------------
   Caja centrada y fija, casi a todo el ancho pero sin tocar los bordes: abrir
   Planes, Qué hacemos o Sectores no cambia el tamaño del panel. */
.fx-mm__caja,
.fx-mm--planes .fx-mm__caja,
.fx-mm--columnas .fx-mm__caja,
.fx-mm--sectores .fx-mm__caja { width: min(1240px, 100%); max-width: none; }
@media (min-width: 992px) {
  .fx-mm__cuerpo--panel,
  .fx-mm--columnas .fx-mm__cuerpo--panel { grid-template-columns: minmax(0, 1fr) 17rem; }
  .fx-mm__cuerpo { min-height: 21rem; }
}

/* --- Qué hacemos: la pestaña activa, sin franja de color al lado --------------
   Se marca con el fondo blanco, el nombre en negrita y una flecha que apunta a sus
   servicios: dice «esto es lo que se ve a la derecha» sin adorno. */
.fx-mm-tab.is-on { box-shadow: none; background: #FFFFFF; border: 1px solid var(--fx-line); }
.fx-mm-tab { border: 1px solid transparent; padding-right: 2.25rem; }
.fx-mm-tab.is-on .fx-mm-tab__nombre { color: var(--fx-ink); font-weight: 700; }
.fx-mm-tab::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: .45rem; height: .45rem;
  border-right: 1.75px solid var(--fx-muted-2); border-top: 1.75px solid var(--fx-muted-2);
  transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity .15s;
}
.fx-mm-tab.is-on::after { opacity: 1; border-color: var(--fx-ink); }
.fx-mm-tab:focus-visible { outline: 2px solid var(--fx-orange); outline-offset: 2px; }

/* --- Planes: tres cajas una al lado de otra ------------------------------------ */
.fx-mm--planes .fx-mm__cuerpo > .fx-mm-cajas { padding: 1.75rem 2rem; }
.fx-mm-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-content: start; }
.fx-navbar .fx-mm .fx-mm-caja {
  display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.5rem;
  border: 1px solid var(--fx-line); border-radius: 8px; color: var(--fx-ink); white-space: normal;
  transition: border-color .15s, background-color .15s;
}
.fx-navbar .fx-mm .fx-mm-caja:hover, .fx-navbar .fx-mm .fx-mm-caja:focus { border-color: var(--fx-orange); background: #FFFFFF; }
.fx-mm-caja__cab { display: flex; align-items: center; gap: .75rem; }
.fx-mm-caja__nombre { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.fx-mm-caja__precio { display: flex; align-items: baseline; gap: .2rem; padding-bottom: .75rem; border-bottom: 1px solid var(--fx-line); }
.fx-mm-caja__precio strong { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-mm-caja__precio span { color: var(--fx-muted); font-size: .9375rem; }
.fx-mm-caja__frase { font-size: .875rem; line-height: 1.5; color: var(--fx-muted); }
.fx-mm-caja__respuesta { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; }
.fx-mm-caja__respuesta .fx-icon { color: var(--fx-orange); flex: none; }
.fx-mm-caja__ver { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; font-weight: 700; font-size: .875rem; color: var(--fx-orange-dark); }
.fx-mm-caja__ver .fx-icon { transition: transform .15s; }
.fx-mm-caja:hover .fx-mm-caja__ver .fx-icon { transform: translateX(3px); }

.fx-navbar .fx-mm .fx-mm-caja__precio strong { display: inline; font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--fx-ink); }
.fx-navbar .fx-mm .fx-mm-caja__precio { padding-bottom: 1rem; }
.fx-navbar .fx-mm .fx-mm-caja__precio { width: 100%; }

/* ===========================================================================
   Formulario guiado (Formularios con «Salto de paso») y la cabecera que lo lleva
   (bloque Formulario en forma de cabecera: /diagnostico).
   Sin JavaScript se ve todo el formulario; con él, form-steps.js pone .is-pasos y
   enseña un paso cada vez.
   =========================================================================== */
.fx-formhero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 79px - 34px); display: grid; align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(55% 60% at 50% -10%, rgba(45, 91, 255, .55), transparent 70%),
    radial-gradient(40% 45% at 100% 100%, rgba(45, 91, 255, .3), transparent 70%),
    linear-gradient(180deg, #12193A, #0C1230);
  color: var(--fx-plum-text);
}
.fx-formhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 70%);
}
.fx-formhero__cab { max-width: 46rem; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.fx-formhero__cab .fx-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-inline: auto;
  padding: .35rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.06); color: #C9D6FF;
}
.fx-formhero__cab .fx-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #7F9CFF; }
.fx-formhero__titulo { margin: 0 0 1rem; color: #FFFFFF; font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.fx-formhero__texto { margin: 0 auto; max-width: 38rem; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.55; }
.fx-formhero__tarjeta {
  width: min(100%, 36rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 20px; background: #FFFFFF; color: var(--fx-ink);
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, .7);
}
.fx-formhero__puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; margin-top: 1.75rem; font-size: .875rem; }
.fx-formhero__puntos li { display: inline-flex; align-items: center; gap: .45rem; }
.fx-formhero__puntos .fx-icon { color: #7F9CFF; }

/* --- El formulario por pasos ------------------------------------------------- */
.fx-pasos { --fx-pasos-curva: cubic-bezier(0.23, 1, 0.32, 1); position: relative; }
.fx-pasos__progreso { display: none; }
.fx-pasos.is-pasos .fx-pasos__progreso { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.fx-pasos__contador { font-size: .8125rem; font-weight: 600; color: var(--fx-muted); }
.fx-pasos__contador b { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-pasos__barra { display: block; height: 4px; border-radius: 999px; background: var(--fx-line); overflow: hidden; }
.fx-pasos__barra i { display: block; height: 100%; border-radius: inherit; background: var(--fx-orange); transform-origin: left; transform: scaleX(var(--progreso, 0)); transition: transform .35s var(--fx-pasos-curva); }

.fx-pasos__paso { margin: 0; padding: 0; border: 0; min-width: 0; }
.fx-pasos:not(.is-pasos) .fx-pasos__paso + .fx-pasos__paso { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--fx-line); }
.fx-pasos.is-pasos .fx-pasos__paso:not([hidden]) { animation: fx-pasos-entra .28s var(--fx-pasos-curva) both; }
@keyframes fx-pasos-entra { from { opacity: 0; transform: translateY(6px); } }
.fx-pasos__titulo { float: none; width: 100%; margin: 0 0 .35rem; padding: 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--fx-ink); }
.fx-pasos__entradilla { margin: 0 0 1.25rem; color: var(--fx-muted); }
.fx-pasos__titulo + .row { margin-top: .75rem; }
.fx-pasos__pregunta { display: block; margin-bottom: .6rem; font-weight: 600; color: var(--fx-ink); }
.fx-pasos .form-control-lg { min-height: 3.5rem; border-radius: 12px; font-size: 1.125rem; }

/* Las opciones, como tarjetas que se pulsan. */
.fx-opciones { display: grid; gap: .5rem; }
@media (min-width: 576px) { .fx-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-opcion { position: relative; display: flex; align-items: center; min-height: 3.25rem; padding: .75rem 1rem .75rem 2.75rem; border: 1px solid var(--fx-line); border-radius: 12px; background: #FFFFFF; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .16s var(--fx-pasos-curva); }
.fx-opcion input { position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0; accent-color: var(--fx-orange); }
@media (hover: hover) and (pointer: fine) { .fx-opcion:hover { border-color: var(--fx-orange); } }
.fx-opcion:active { transform: scale(.98); }
.fx-opcion:has(input:checked) { border-color: var(--fx-orange); background: var(--fx-orange-soft); color: var(--fx-orange-dark); }
.fx-opcion:has(input:focus-visible) { outline: 2px solid var(--fx-orange); outline-offset: 2px; }

.fx-pasos__atajos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.fx-pasos__atajo { padding: .35rem .85rem; border: 1px dashed #C5CBDA; border-radius: 999px; background: transparent; color: var(--fx-muted); font-size: .875rem; font-weight: 600; transition: color .15s ease, border-color .15s ease; }
.fx-pasos__atajo:hover { color: var(--fx-orange-dark); border-color: var(--fx-orange); }
.fx-pasos:not(.is-pasos) .fx-pasos__atajos { display: none; }

.fx-pasos__consentimiento { margin-top: 1.25rem; font-size: .875rem; }
.fx-pasos__consentimiento .form-consent__aviso { margin: .5rem 0 0; font-size: .75rem; color: var(--fx-muted); }

.fx-pasos__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.fx-pasos__nav [hidden] { display: none !important; }
.fx-pasos:not(.is-pasos) [data-paso-siguiente], .fx-pasos:not(.is-pasos) [data-paso-atras] { display: none !important; }
.fx-pasos__boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-left: auto; min-height: 3.25rem; padding-inline: 1.5rem; border-radius: 999px; font-size: 1.0625rem; transition: transform .16s var(--fx-pasos-curva); }
.fx-pasos__boton:active { transform: scale(.97); }
.fx-pasos__boton .fx-icon { transition: transform .16s var(--fx-pasos-curva); }
@media (hover: hover) and (pointer: fine) { .fx-pasos__boton:hover .fx-icon { transform: translateX(3px); } }
.fx-pasos__atras { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 0; border: 0; background: none; color: var(--fx-muted); font-weight: 600; }
.fx-pasos__atras .fx-icon { transform: rotate(180deg); }
.fx-pasos__atras:hover { color: var(--fx-ink); }
@media (max-width: 575.98px) { .fx-pasos__boton { flex: 1; } }

.fx-pasos--hecho { display: grid; justify-items: center; gap: .75rem; text-align: center; }
.fx-pasos__hecho-icono { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #E6F7EF; color: #127A4C; }
.fx-pasos__hecho-texto { margin: 0; font-size: 1.125rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fx-pasos.is-pasos .fx-pasos__paso:not([hidden]) { animation: none; }
  .fx-pasos__barra i, .fx-opcion, .fx-pasos__boton, .fx-pasos__boton .fx-icon { transition: none; }
}

/* ===================== Reseñas y testimonios =====================
   Lo grande es la nota de Google, a la izquierda; las reseñas, planas y en mosaico a la
   derecha. Las estrellas son una sola capa de texto rellena hasta --relleno con un
   degradado de corte seco: un 4,6 se ve como 4,6 y no como cinco llenas. */
.fx-resenas {
  --fx-estrella: #FBBC04;
  --fx-estrella-vacia: #DADCE0;
}

.fx-resenas__marco {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.fx-resenas__nota {
  position: sticky;
  top: 7rem;
  padding-top: 0.25rem;
}
.fx-resenas__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--fx-ink);
}
.fx-resenas__cifra small {
  font-size: 0.28em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fx-muted-2);
}
.fx-resenas__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 1.5rem;
  font-size: 1rem;
  color: var(--fx-muted);
}
.fx-logo-google { display: inline-block; height: 1.15em; width: auto; transform: translateY(0.12em); }
.fx-resenas__boton { width: 100%; max-width: 280px; }

.fx-resenas__estrellas {
  --relleno: 100%;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--fx-estrella) var(--relleno), var(--fx-estrella-vacia) var(--relleno));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fx-resenas__estrellas::before { content: "★★★★★"; }
.fx-resenas__estrellas--grandes { font-size: 1.6rem; letter-spacing: 0.08em; }

/* Mosaico por columnas: una reseña de dos palabras y otra de seis líneas encajan sin
   los huecos de una rejilla de filas. */
.fx-resenas__mosaico { columns: 3 300px; column-gap: 1.25rem; }
.fx-resenas__mosaico--dos { columns: 2 280px; }
.fx-resenas__mosaico > .fx-resena { break-inside: avoid; margin-bottom: 1.25rem; }

.fx-resena {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--fx-line);
  border-radius: var(--bs-border-radius);
  color: var(--fx-ink);
}
.fx-resena__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fx-resena__cuando { font-size: 0.8125rem; color: var(--fx-muted-2); white-space: nowrap; }
.fx-resena__texto {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fx-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.fx-resena.is-abierta .fx-resena__texto { -webkit-line-clamp: unset; display: block; }
.fx-resena__mas {
  align-self: flex-start;
  margin-top: -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fx-orange-dark);
  cursor: pointer;
}
.fx-resena__mas:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-resena__mas:focus-visible { outline: 2px solid var(--fx-orange); outline-offset: 3px; border-radius: 2px; }

.fx-resena__autor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--fx-line);
}
.fx-resena__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fx-orange-soft);
}
.fx-resena__avatar--iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fx-orange-dark);
}
.fx-resena__quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fx-resena__quien > a,
.fx-resena__quien > span { font-weight: 600; font-size: 0.9375rem; color: var(--fx-ink); text-decoration: none; }
.fx-resena__quien > a:hover { color: var(--fx-orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.fx-resena__quien small { font-size: 0.8125rem; color: var(--fx-muted-2); }

/* En la cinta, las tarjetas no se cortan: van enteras y del mismo ancho. */
.fx-marquee .fx-resena__texto { -webkit-line-clamp: unset; display: block; }

/* Sobre fondo oscuro, las tarjetas se quedan claras y la nota pasa a blanco. */
.fx-resenas--oscuro .fx-resenas__cifra { color: #FFFFFF; }
.fx-resenas--oscuro .fx-resenas__total { color: var(--fx-plum-text); }
.fx-resenas--oscuro { --fx-estrella-vacia: #3A4366; }

@media (max-width: 991.98px) {
  .fx-resenas__marco { grid-template-columns: 1fr; }
  .fx-resenas__nota {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    align-items: center;
  }
  .fx-resenas__cifra { grid-row: span 2; margin: 0; }
  .fx-resenas__total { margin: 0.5rem 0 0; }
  .fx-resenas__boton { grid-column: 1 / -1; margin-top: 1.25rem; max-width: none; }
}

/* ===================== Antes y después =====================
   Una tarjeta por caso: «Antes» en gris, «Ahora» en azul, a escala entre sí, y la
   ventaja en verde. La secuencia, escalonada por tarjeta (--orden):
     1. la barra de antes se dibuja;
     2. la de ahora sale de donde acabó la de antes y crece o encoge hasta su valor;
     3. salta la ventaja.
   Sin JavaScript o con «reducir movimiento», todo está ya en su sitio. */
.fx-mejoras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.fx-mejora {
  --retraso: calc(var(--orden, 0) * 220ms);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  background: #FFFFFF;
  border: 1px solid var(--fx-line);
  border-radius: var(--bs-border-radius);
  color: var(--fx-ink);
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
a.fx-mejora:hover { border-color: var(--fx-orange); color: var(--fx-ink); text-decoration: none; transform: translateY(-2px); }
a.fx-mejora:focus-visible { outline: 2px solid var(--fx-orange); outline-offset: 3px; }

.fx-mejora__cliente { margin: 0; font-size: 0.875rem; color: var(--fx-muted-2); }
.fx-mejora__que { margin: -0.75rem 0 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.fx-mejora__barras { display: grid; gap: 0.875rem; margin: 0; }
.fx-mejora__fila { display: grid; gap: 0.375rem; }
.fx-mejora__fila dt { font-size: 0.8125rem; font-weight: 500; color: var(--fx-muted); }
/* Columna del valor de ancho fijo: si cada valor se llevara su ancho, la pista de
   «Ahora» (cifra grande) saldría más corta que la de «Antes» y la comparación mentiría. */
.fx-mejora__fila dd { display: grid; grid-template-columns: 1fr 6.75rem; align-items: center; gap: 0.875rem; margin: 0; }

.fx-mejora__pista { position: relative; height: 12px; border-radius: 999px; background: var(--fx-sand); overflow: hidden; }
.fx-mejora__barra { position: absolute; inset: 0 auto 0 0; width: var(--ancho); border-radius: inherit; }
.fx-mejora__fila--antes .fx-mejora__barra { background: #C9CFDD; }
.fx-mejora__fila--ahora .fx-mejora__barra { background: var(--fx-orange); }

.fx-mejora__valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-mejora__fila--antes .fx-mejora__valor { font-size: 1rem; color: var(--fx-muted-2); }
.fx-mejora__fila--ahora .fx-mejora__valor { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--fx-ink); }

.fx-mejora__ventaja {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  border-radius: 999px;
  background: #E3F7EE;
  color: #127A4C;
  font-size: 0.9375rem;
  font-weight: 600;
}
.fx-mejora__enlace { margin-top: auto; font-size: 0.875rem; font-weight: 500; color: var(--fx-orange-dark); }
a.fx-mejora:hover .fx-mejora__enlace { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* Estado de partida, solo mientras la sección no ha asomado. */
  .fx-mejoras:not(.is-activo) .fx-mejora__fila--antes .fx-mejora__barra { width: 0; }
  .fx-mejoras:not(.is-activo) .fx-mejora__fila--ahora .fx-mejora__barra { width: 0; }
  .fx-mejoras:not(.is-activo) .fx-mejora__fila--ahora .fx-mejora__valor { opacity: 0; transform: translateY(6px); }
  .fx-mejoras:not(.is-activo) .fx-mejora__ventaja { opacity: 0; transform: scale(0.85); }

  .fx-mejoras.is-activo .fx-mejora__fila--antes .fx-mejora__barra {
    animation: fx-barra-dibuja 700ms cubic-bezier(.22, 1, .36, 1) var(--retraso) both;
  }
  .fx-mejoras.is-activo .fx-mejora__fila--ahora .fx-mejora__barra {
    animation: fx-barra-cambia 1100ms cubic-bezier(.34, 1.36, .64, 1) calc(var(--retraso) + 550ms) both;
  }
  .fx-mejoras.is-activo .fx-mejora__fila--ahora .fx-mejora__valor {
    transition: opacity 400ms ease, transform 400ms ease;
    transition-delay: calc(var(--retraso) + 900ms);
  }
  .fx-mejoras.is-activo .fx-mejora__ventaja {
    animation: fx-ventaja 520ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--retraso) + 1500ms) both;
  }
}
@keyframes fx-barra-dibuja { from { width: 0; } to { width: var(--ancho); } }
@keyframes fx-barra-cambia { 0% { width: 0; } 30% { width: var(--desde); } 100% { width: var(--ancho); } }
@keyframes fx-ventaja { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }