/* =========================================================================
   QENT — sitio público (index, nosotros, seguridad, soporte)
   Tema claro, sin Tailwind ni librerías: este archivo es todo el estilo.
   Paleta tomada del logo (azul → turquesa) sobre blanco; la maqueta de la
   app es lo único oscuro ("la app por dentro").
   ========================================================================= */

:root {
  --fondo: #ffffff;
  --fondo-suave: #f6f7f9;
  --tinta: #0f172a;
  --texto: #475063;
  --texto-suave: #5f6878;
  --linea: #e6e8ec;
  --linea-fuerte: #d5d9e0;
  --azul: #1d4ed8;
  --azul-hover: #1e40af;
  --azul-claro: #eef3fe;
  --turquesa: #0e8f9a;
  --turquesa-claro: #e6f6f7;
  --durazno: #fde7cf;
  --verde: #15803d;
  --verde-claro: #e7f6ee;
  --ambar: #b45309;
  --ambar-claro: #fef3c7;
  --app-fondo: #0e1116;
  --app-panel: #151a23;
  --app-linea: #222836;
  --app-texto: #e6e8ec;
  --app-suave: #9aa1ae;
  --radio: 12px;
  --radio-g: 20px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --fuente: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;

  /* ===== PROFUNDIDAD: manchas de color del hero y tinte de secciones alternas =====
     Solo gradientes CSS, sin imágenes ni animación. --malla-intensidad: 0 las apaga; 1.5 las sube. */
  --malla-intensidad: 1;
  --malla-azul: rgba(59, 110, 246, calc(.22 * var(--malla-intensidad)));
  --malla-lila: rgba(139, 92, 246, calc(.18 * var(--malla-intensidad)));
  --malla-turquesa: rgba(14, 143, 154, calc(.12 * var(--malla-intensidad)));
  --tinte-seccion:
    radial-gradient(55% 70% at 100% 0%, rgba(139, 92, 246, calc(.05 * var(--malla-intensidad))), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(59, 110, 246, calc(.05 * var(--malla-intensidad))), transparent 70%),
    #f5f7fc;

  /* ===== EFECTOS: una variable por efecto para subir o bajar la intensidad =====
     Los tiempos de rotación (maqueta, tarjetas flotantes, conteo) están en
     assets/js/sitio.js, objeto FX. Para atenuar todo de una vez: --fx-intensidad: .5 */
  --fx-intensidad: 1;                                         /* multiplica levantes, desplazamientos y escalas */
  --fx-hover-dur: .28s;                                       /* hover de tarjetas, chips y módulos */
  --fx-hover-levante: calc(-8px * var(--fx-intensidad));      /* cuánto sube una tarjeta al pasar el mouse */
  --fx-hover-sombra: 0 calc(18px * var(--fx-intensidad)) calc(40px * var(--fx-intensidad)) -12px rgba(15, 23, 42, .22);
  --fx-pantalla-dur: .5s;                                     /* cambio de pantalla en la maqueta */
  --fx-pantalla-desplaz: calc(14px * var(--fx-intensidad));
  --fx-chip-dur: .55s;                                        /* entrada/salida de las tarjetas flotantes del hero */
  --fx-chip-desplaz: calc(18px * var(--fx-intensidad));
  --fx-flotar-dur: 6s;                                        /* vaivén suave de la tarjeta flotante */
  --fx-flotar-dist: calc(-6px * var(--fx-intensidad));
  --fx-pulso-dur: 1.8s;                                       /* puntos verdes "en vivo" */
  --fx-pulso-escala: calc(1 + 1.6 * var(--fx-intensidad));
  --fx-panel-dur: .4s;                                        /* cambio de panel en "Para quién" */
  --fx-panel-desplaz: calc(16px * var(--fx-intensidad));
  --fx-revelar-dur: .65s;                                     /* aparición al hacer scroll */
  --fx-revelar-desplaz: calc(28px * var(--fx-intensidad));
  --fx-barras-dur: .9s;                                       /* crecimiento de barras y medidores */
}
/* Quien pide menos movimiento no ve animaciones (se apagan aquí, en un solo lugar; sitio.js tampoco rota). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fx-intensidad: 0; --fx-hover-dur: 0s; --fx-pantalla-dur: 0s; --fx-chip-dur: 0s; --fx-flotar-dur: 0s;
    --fx-pulso-dur: 0s; --fx-panel-dur: 0s; --fx-revelar-dur: 0s; --fx-barras-dur: 0s;
  }
  *, *::before, *::after { animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.sitio {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sitio img { max-width: 100%; height: auto; display: block; }
.sitio h1, .sitio h2, .sitio h3 { color: var(--tinta); margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.sitio p { margin: 0; }
.sitio a { color: var(--azul); text-decoration: none; }
.sitio a:hover { color: var(--azul-hover); }
.sitio :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.sitio .ico { flex-shrink: 0; }
.num { font-family: var(--mono); font-feature-settings: "tnum"; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--tinta); color: #fff !important; padding: 10px 14px; border-radius: 8px; }
.saltar:focus { top: 12px; }
.centro { text-align: center; }

.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.contenedor.angosto { max-width: 860px; }
@media (max-width: 640px) { .contenedor { padding: 0 16px; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px; border-radius: 10px;
  font: 500 15px/1.2 var(--fuente); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sitio a.btn-primario, .btn-primario { background: var(--azul); color: #fff; }
.sitio a.btn-primario:hover, .btn-primario:hover { background: var(--azul-hover); color: #fff; }
.btn-primario:disabled { opacity: .6; cursor: progress; }
.sitio a.btn-borde, .btn-borde { background: #fff; color: var(--tinta); border-color: var(--linea-fuerte); }
.sitio a.btn-borde:hover, .btn-borde:hover { border-color: var(--tinta); color: var(--tinta); }
.sitio a.btn-oscuro, .btn-oscuro { background: var(--tinta); color: #fff; }
.sitio a.btn-oscuro:hover, .btn-oscuro:hover { background: #1e293b; color: #fff; }
.btn-chico { min-height: 40px; padding: 9px 16px; font-size: 14px; border-radius: 8px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--azul); }

/* ---------- Navegación ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--linea); }
.nav-in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta) !important; font-weight: 700; font-size: 19px; letter-spacing: .04em; }
.marca img { width: 28px; height: 28px; }
.nav-enlaces { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
.nav-enlaces a { color: var(--texto); font-size: 14.5px; }
.nav-enlaces a:hover, .nav-enlaces a[aria-current="page"] { color: var(--tinta); }
.nav-enlaces a[aria-current="page"] { font-weight: 500; }
.nav-acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--linea); border-radius: 10px; background: #fff; color: var(--tinta); cursor: pointer; }
.nav-toggle .ico-cerrar { display: none; }
.nav-toggle[aria-expanded="true"] .ico-abrir { display: none; }
.nav-toggle[aria-expanded="true"] .ico-cerrar { display: block; }
.nav-enlaces .nav-demo-movil { display: none; } /* solo dentro del menú de celular */

/* Selector de idioma */
.idioma { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; color: var(--texto-suave); background: #fff; }
.idioma > svg { margin: 0 3px 0 6px; flex-shrink: 0; }
.idioma-op { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px; padding: 4px 8px; border-radius: 6px; font: 600 12px/1 var(--fuente); letter-spacing: .03em; color: var(--texto) !important; }
.idioma-op:hover { background: var(--fondo-suave); color: var(--tinta) !important; }
.idioma-op.activo { background: var(--tinta); color: #fff !important; }

@media (max-width: 1080px) {
  .nav-enlaces { gap: 18px; }
}
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav-acciones .btn { display: none; }
  .nav-enlaces {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--linea); padding: 8px 16px 16px; box-shadow: var(--sombra);
  }
  .nav-enlaces.abierto { display: flex; }
  .nav-enlaces a { padding: 13px 4px; border-bottom: 1px solid var(--linea); font-size: 16px; }
  .nav-enlaces a.nav-demo-movil { display: flex; justify-content: center; margin-top: 16px; padding: 13px 20px; border-bottom: 0; font-weight: 600; }
  .nav-in { position: relative; }
}

/* ---------- Encabezados de sección ---------- */
.eyebrow { font-size: 13.5px; font-weight: 500; color: var(--azul); margin-bottom: 12px !important; }
.seccion { padding: 96px 0; }
.seccion-tight { padding-top: 24px; }
.seccion-suave { background: var(--tinte-seccion); }
.seccion-suave .usos-lista, .seccion-suave .beneficio-visual { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--linea); }
.seccion-cab { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.seccion-cab.izquierda { text-align: left; margin: 0 0 32px; }
.seccion-cab h2 { font-size: clamp(30px, 4vw, 42px); }
.seccion-sub { margin-top: 16px !important; font-size: 18px; color: var(--texto); }
@media (max-width: 640px) { .seccion { padding: 64px 0; } .seccion-cab { margin-bottom: 40px; } }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 40px; }
.hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.etiqueta { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--azul); background: var(--azul-claro); padding: 6px 12px; border-radius: 999px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; }
.hero-sub { font-size: 19px; line-height: 1.6; max-width: 540px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.hero-micro { font-size: 13.5px; color: var(--texto-suave); }

.hero-visual { flex: 1 1 540px; min-width: 0; position: relative; padding: 28px 0 28px 28px; }
.hero-formas { position: absolute; inset: 0; border-radius: 24px; background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08); overflow: hidden; }

/* Manchas difusas detrás del hero y de las cabeceras de página. Van en un ::before con z-index -1
   dentro de un contexto aislado: no reciben clics, no ocupan espacio (sin CLS) y no desbordan. */
.hero, .pagina-cab, .articulo-cab { position: relative; isolation: isolate; }
.hero::before, .pagina-cab::before, .articulo-cab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 45% at 92% 12%, var(--malla-azul), transparent 72%),
    radial-gradient(36% 50% at 50% 78%, var(--malla-lila), transparent 72%),
    radial-gradient(26% 40% at 98% 80%, var(--malla-turquesa), transparent 72%),
    radial-gradient(40% 55% at 70% 45%, var(--malla-azul), transparent 75%),
    radial-gradient(32% 48% at 0% 0%, var(--malla-lila), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
/* En las cabeceras de página, más tenue y arriba: solo da aire al título. */
.pagina-cab::before, .articulo-cab::before {
  opacity: .75;
  background:
    radial-gradient(40% 80% at 88% 10%, var(--malla-azul), transparent 70%),
    radial-gradient(34% 70% at 62% 0%, var(--malla-lila), transparent 70%),
    radial-gradient(30% 60% at 4% 0%, var(--malla-turquesa), transparent 70%);
}
@media (max-width: 760px) {
  .hero::before {
    background:
      radial-gradient(70% 30% at 85% 62%, var(--malla-azul), transparent 70%),
      radial-gradient(60% 25% at 20% 88%, var(--malla-lila), transparent 70%),
      radial-gradient(60% 22% at 0% 4%, var(--malla-lila), transparent 72%);
  }
}
.hero-formas span { position: absolute; display: block; }
.hero-formas .f1 { width: 150px; height: 150px; border-radius: 999px; background: #dce6fd; top: -30px; right: 48px; }
.hero-formas .f2 { width: 80px; height: 80px; border-radius: 20px; background: var(--durazno); bottom: 18px; left: 14px; transform: rotate(12deg); }
.hero-formas .f3 { width: 110px; height: 110px; border-radius: 999px; background: var(--turquesa-claro); bottom: -40px; right: -20px; }

/* Maqueta oscura de la app */
.app { position: relative; margin: 0 28px 0 0; background: var(--app-fondo); border: 1px solid #1f2430; border-radius: 14px; overflow: hidden; font-size: 13px; color: var(--app-texto); box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .35); }
.app-barra { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--app-linea); }
.app-barra span { width: 9px; height: 9px; border-radius: 99px; background: #3a3f4b; }
.app-cuerpo { display: flex; }

/* Pestañas de la maqueta: son botones de verdad (rotan solas; un clic toma el control). */
.app-menu { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; width: 148px; flex-shrink: 0; border-right: 1px solid var(--app-linea); }
.app-menu [role="tab"] { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--app-suave); font: 500 13px/1.2 var(--fuente); text-align: left; cursor: pointer; transition: background-color var(--fx-hover-dur) ease, color var(--fx-hover-dur) ease; }
.app-menu [role="tab"]:hover { background: #161b24; color: #fff; }
.app-menu [role="tab"][aria-selected="true"] { background: #1d2430; color: #fff; }
.app-menu [role="tab"]:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
/* Barra de progreso de la rotación: dura lo mismo que FX.pantallasMs (sitio.js la pasa como --rotacion-ms). */
.app-progreso { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: #3b82f6; transform: scaleX(0); transform-origin: left; opacity: 0; }
.app.rotando [aria-selected="true"] .app-progreso { opacity: 1; animation: app-progreso var(--rotacion-ms, 5s) linear forwards; }
.app.rotando.en-pausa [aria-selected="true"] .app-progreso { animation-play-state: paused; }
@keyframes app-progreso { to { transform: scaleX(1); } }

/* Las pantallas se apilan en la misma celda: la maqueta no cambia de alto al rotar (sin layout shift). */
.app-pantallas { flex: 1 1 auto; min-width: 0; display: grid; }
.app-pantalla { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(var(--fx-pantalla-desplaz)); transition: opacity var(--fx-pantalla-dur) ease, transform var(--fx-pantalla-dur) ease, visibility 0s linear var(--fx-pantalla-dur); }
.app-pantalla.activa { opacity: 1; visibility: visible; transform: none; transition: opacity var(--fx-pantalla-dur) ease, transform var(--fx-pantalla-dur) ease, visibility 0s; }
.app-main { min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.app-titulo { font-size: 15px; font-weight: 600; color: #fff; }
.app-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-kpi, .app-grafico { background: var(--app-panel); border: 1px solid var(--app-linea); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.app-kpi span, .app-grafico > span { color: var(--app-suave); font-size: 12px; }
.app-kpi strong { font: 500 17px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.barras i { flex: 1 1 0; height: var(--alto); border-radius: 4px 4px 0 0; background: #2a3445; transform-origin: bottom; }
.barras i.hoy { background: #3b82f6; }
.app-pantalla.activa .barras i { animation: crecer-y var(--fx-barras-dur) cubic-bezier(.2, .8, .2, 1) both; }
.app-pantalla.activa .barras i:nth-child(2) { animation-delay: .05s; } .app-pantalla.activa .barras i:nth-child(3) { animation-delay: .1s; }
.app-pantalla.activa .barras i:nth-child(4) { animation-delay: .15s; } .app-pantalla.activa .barras i:nth-child(5) { animation-delay: .2s; }
.app-pantalla.activa .barras i:nth-child(6) { animation-delay: .25s; } .app-pantalla.activa .barras i:nth-child(7) { animation-delay: .3s; }
@keyframes crecer-y { from { transform: scaleY(0); } }
.app-fila { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--app-linea); }
.app-fila .num { color: var(--app-suave); width: 62px; flex-shrink: 0; font-size: 12.5px; }
.app-fila .cli { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-fila .cli small { display: block; color: var(--app-suave); font-size: 11.5px; }
.app-fila .val { width: auto; color: var(--app-texto); }
.app-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 99px; background: #1d2a44; color: #93c5fd; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.app-medidor { flex: 0 0 34%; height: 6px; border-radius: 99px; background: #222836; overflow: hidden; }
.app-medidor i { display: block; width: var(--pct); height: 100%; border-radius: 99px; background: #14b8a6; transform-origin: left; }
.app-stock.bajo .app-medidor i { background: #f59e0b; }
.app-pantalla.activa .app-medidor i { animation: crecer-x var(--fx-barras-dur) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crecer-x { from { transform: scaleX(0); } }
.app-stock .val { width: 34px; text-align: right; }
.estado { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.estado.ok { color: #4ade80; background: rgba(34, 197, 94, .12); }
.estado.pend { color: #fbbf24; background: rgba(251, 191, 36, .12); }

/* Tarjetas flotantes del hero: se apilan en la misma celda y se turnan (FX.chipsMs en sitio.js).
   Sobresalen por debajo de la maqueta para no tapar las filas. */
.hero-visual { padding-bottom: 52px; }
.chips-flotantes { position: absolute; left: 0; bottom: 8px; display: grid; z-index: 2; animation: flotar var(--fx-flotar-dur) ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(var(--fx-flotar-dist)); } }
.chip-flotante { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .25); font-size: 13px;
  opacity: 0; visibility: hidden; transform: translateY(var(--fx-chip-desplaz)) scale(.97);
  transition: opacity var(--fx-chip-dur) ease, transform var(--fx-chip-dur) cubic-bezier(.2, .8, .2, 1), visibility 0s linear var(--fx-chip-dur); }
.chip-flotante.activa { opacity: 1; visibility: visible; transform: none; transition: opacity var(--fx-chip-dur) ease, transform var(--fx-chip-dur) cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.chip-flotante.saliendo { transform: translateY(calc(-1 * var(--fx-chip-desplaz))) scale(.97); }
.chip-flotante strong { display: block; color: var(--tinta); font-weight: 600; white-space: nowrap; }
.chip-flotante small { display: block; color: var(--texto-suave); font-size: 12.5px; white-space: nowrap; }
.chip-ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--verde-claro); color: var(--verde); display: inline-flex; align-items: center; justify-content: center; }
.chip-ico.chip-nomina { background: var(--azul-claro); color: var(--azul); }
.chip-ico.chip-copia { background: var(--turquesa-claro); color: var(--turquesa); }
.chip-flotante.activa .chip-ico { animation: chip-pop var(--fx-chip-dur) cubic-bezier(.2, .8, .2, 1.4) both; }
@keyframes chip-pop { from { transform: scale(.4); } }

@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .hero-visual { padding: 16px 0 16px 16px; }
  .app { margin-right: 16px; }
  .app-cuerpo { flex-direction: column; }
  .app-menu { flex-direction: row; width: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--app-linea); overflow-x: auto; scrollbar-width: none; }
  .app-menu [role="tab"] { flex: 0 0 auto; white-space: nowrap; }
  .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-kpi:nth-child(3) { display: none; }
  .app-fila .num:first-child { display: none; }
  .chips-flotantes { position: relative; left: auto; bottom: auto; margin: 16px 16px 0 0; }
}

.confianza { list-style: none; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; font-size: 14.5px; color: var(--texto); }
.confianza li { display: inline-flex; align-items: center; gap: 8px; }
.confianza .ico { color: var(--azul); }

/* ---------- Beneficios (texto + tarjeta de la app) ---------- */
.beneficio { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding: 40px 0; }
.beneficio + .beneficio { border-top: 1px solid var(--linea); }
.beneficio.invertido { flex-direction: row-reverse; }
.beneficio-texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.beneficio-texto h3 { font-size: 28px; }
.beneficio-texto > p { font-size: 17px; }
.beneficio-ico, .tarjeta-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--azul-claro); color: var(--azul); }
.beneficio-visual { flex: 1 1 380px; min-width: 0; background: var(--fondo-suave); border-radius: var(--radio-g); padding: 40px; display: flex; justify-content: center; }
.invertido .beneficio-visual { background: var(--turquesa-claro); }
.lista-check { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; color: var(--tinta); font-size: 15px; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; }
.lista-check .ico { color: var(--azul); margin-top: 4px; }
.lista-check.dos-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .lista-check.dos-col { grid-template-columns: minmax(0, 1fr); } .beneficio-visual { padding: 24px; } .beneficio { padding: 24px 0; gap: 28px; } }

.tarjeta-ui { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.tui-titulo { font-weight: 600; color: var(--tinta); }
.tui-factura { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 10px; background: var(--fondo-suave); }
.tui-factura strong { color: var(--tinta); }
.tui-ok { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--verde); background: var(--verde-claro); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 500; }
.tui-pie, .tui-linea { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.tui-linea:first-of-type { border-top: 0; padding-top: 0; }
.tui-linea.total strong { color: var(--verde); }
.tui-pie strong, .tui-linea strong { color: var(--tinta); font-weight: 500; }
.tui-stock { display: flex; flex-direction: column; gap: 6px; }
.tui-stock-l { display: flex; justify-content: space-between; gap: 12px; }
.tui-medidor { height: 6px; border-radius: 99px; background: var(--fondo-suave); overflow: hidden; }
.tui-medidor i { display: block; height: 100%; border-radius: 99px; background: var(--turquesa); }
.tui-stock.bajo .tui-medidor i { background: var(--ambar); }
.tui-stock small { color: var(--ambar); font-weight: 500; font-size: 12.5px; }

/* ---------- Todo conectado ---------- */
.ilustracion { margin: 0 auto; }
#conectado .ilustracion { width: 100%; max-width: 880px; margin-bottom: 40px; }
.flujo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.flujo li { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.flujo strong { color: var(--tinta); font-weight: 600; }
.flujo li > span:last-child { font-size: 14.5px; }
.flujo-n { width: 28px; height: 28px; border-radius: 999px; background: var(--tinta); color: #fff; font: 600 13px/28px var(--fuente); text-align: center; margin-bottom: 6px; }
@media (max-width: 860px) { .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .flujo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Para quién (chips de casos de uso) ---------- */
.usos-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: #fff; color: var(--texto); font: 500 14px/1.2 var(--fuente); cursor: pointer;
  transition: transform var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease, color var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease; }
.chip:hover { border-color: var(--azul); color: var(--azul); transform: translateY(calc(var(--fx-hover-levante) / 3)); box-shadow: 0 6px 16px -8px rgba(29, 78, 216, .45); }
.chip:active { transform: scale(.97); }
.chip[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .6); }
.usos-paneles { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-g); box-shadow: var(--sombra); }
/* Sin JS se ven todos los paneles uno debajo del otro; con JS se apilan en la misma celda (alto fijo, sin layout shift). */
.usos-panel { padding: 40px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 56px; }
.usos-panel + .usos-panel { border-top: 1px solid var(--linea); }
.js-tabs .usos-paneles { display: grid; }
.js-tabs .usos-panel { grid-area: 1 / 1; border-top: 0; opacity: 0; visibility: hidden; transform: translateX(var(--fx-panel-desplaz)); transition: opacity var(--fx-panel-dur) ease, transform var(--fx-panel-dur) ease, visibility 0s linear var(--fx-panel-dur); }
.js-tabs .usos-panel.activa { opacity: 1; visibility: visible; transform: none; transition: opacity var(--fx-panel-dur) ease, transform var(--fx-panel-dur) ease, visibility 0s; }
.js-tabs .usos-panel.activa .usos-lista li { animation: entrar-lista var(--fx-panel-dur) ease both; }
.js-tabs .usos-panel.activa .usos-lista li:nth-child(2) { animation-delay: .06s; }
.js-tabs .usos-panel.activa .usos-lista li:nth-child(3) { animation-delay: .12s; }
.js-tabs .usos-panel.activa .usos-lista li:nth-child(4) { animation-delay: .18s; }
@keyframes entrar-lista { from { opacity: 0; transform: translateX(var(--fx-panel-desplaz)); } }
.usos-panel-texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.usos-panel-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--azul-claro); color: var(--azul); display: inline-flex; align-items: center; justify-content: center; }
.usos-panel h3 { font-size: 24px; }
.usos-panel-texto > p { font-size: 17px; }
.usos-lista { flex: 1 1 300px; min-width: 0; background: var(--fondo-suave); border-radius: var(--radio); padding: 20px 22px; gap: 12px; }
.usos-nota { text-align: center; margin-top: 28px !important; color: var(--texto); }
@media (max-width: 640px) { .usos-panel { padding: 24px; } .usos-chips { justify-content: flex-start; } }

/* ---------- Módulos (se levantan al pasar el mouse y se abren con un clic) ---------- */
.modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .modulos { grid-template-columns: minmax(0, 1fr); } }
.modulo { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden;
  transition: transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease; }
.modulo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--turquesa)); transform: scaleX(0); transform-origin: left; transition: transform var(--fx-hover-dur) ease; }
.modulo:hover, .modulo.abierto { transform: translateY(var(--fx-hover-levante)); box-shadow: var(--fx-hover-sombra); border-color: #c7d5fb; background: #fbfcff; }
.modulo:hover::before, .modulo.abierto::before { transform: scaleX(1); }
.modulo-boton { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--texto); cursor: pointer; }
.modulo-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--azul-claro); color: var(--azul); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; transition: transform var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease, color var(--fx-hover-dur) ease; }
.modulo:hover .modulo-ico, .modulo.abierto .modulo-ico { transform: scale(calc(1 + .1 * var(--fx-intensidad))) rotate(calc(-6deg * var(--fx-intensidad))); background: var(--azul); color: #fff; }
.modulo-t { font-size: 18px; font-weight: 600; color: var(--tinta); letter-spacing: -0.01em; }
.modulo-d { font-size: 15px; }
/* El detalle extra ocupa su lugar desde el inicio (solo cambia la opacidad): no mueve nada al aparecer. */
.modulo-extra { font-size: 14px; color: var(--turquesa); font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity var(--fx-hover-dur) ease, transform var(--fx-hover-dur) ease; }
.modulo:hover .modulo-extra, .modulo.abierto .modulo-extra, .modulo-boton:focus-visible .modulo-extra { opacity: 1; transform: none; }
@media (hover: none) { .modulo-extra { opacity: 1; transform: none; } }
.modulo-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--azul); }
.modulo-ver .ico { transition: transform var(--fx-hover-dur) ease; }
.modulo.abierto .modulo-ver .ico { transform: rotate(180deg); }
.modulo-detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--fx-panel-dur) ease; }
/* Cerrado: alto 0 y "visibility: hidden" (el lector de pantalla y el tabulador lo saltan); se abre animando el alto. */
.modulo-detalle > * { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--fx-panel-dur); }
.modulo.abierto .modulo-detalle { grid-template-rows: 1fr; }
.modulo.abierto .modulo-detalle > * { visibility: visible; transition: visibility 0s; }
.modulo-detalle .lista-check { margin: 0 24px; padding: 16px 0 22px; border-top: 1px solid var(--linea); font-size: 14.5px; }

/* ---------- Tarjetas y rejillas ---------- */
.rejilla { display: grid; gap: 16px; }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rejilla.tres { grid-template-columns: minmax(0, 1fr); } }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-align: left; font: inherit; color: var(--texto);
  transition: transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease; }
.tarjeta:hover { transform: translateY(calc(var(--fx-hover-levante) / 2)); box-shadow: var(--sombra); border-color: var(--linea-fuerte); }
.tarjeta h3, .tarjeta .tarjeta-t { font-size: 18px; font-weight: 600; color: var(--tinta); letter-spacing: -0.01em; line-height: 1.3; margin: 6px 0 0; }
.tarjeta-d { font-size: 15px; }
.tarjeta-ico { transition: transform var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease, color var(--fx-hover-dur) ease; }
.tarjeta-enlace, .tarjeta-tema { cursor: pointer; }
.tarjeta-enlace:hover, .tarjeta-tema:hover { transform: translateY(var(--fx-hover-levante)); box-shadow: var(--fx-hover-sombra); border-color: #c7d5fb; }
.tarjeta-enlace:hover .tarjeta-ico, .tarjeta-tema:hover .tarjeta-ico { background: var(--azul); color: #fff; transform: scale(calc(1 + .08 * var(--fx-intensidad))); }
.tarjeta-enlace:active, .tarjeta-tema:active { transform: translateY(calc(var(--fx-hover-levante) / 2)) scale(.99); }
.sitio a.tarjeta-enlace { color: var(--texto); }
.tarjeta-enlace .enlace-flecha { margin-top: auto; padding-top: 6px; }
.enlace-flecha .ico { transition: transform var(--fx-hover-dur) ease; }
.enlace-flecha:hover .ico, .tarjeta-enlace:hover .enlace-flecha .ico { transform: translateX(calc(4px * var(--fx-intensidad))); }
.tarjeta-tema.elegida { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }

/* Beneficios y flujo: también reaccionan al mouse. */
.tarjeta-ui { transition: transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease; }
.beneficio:hover .tarjeta-ui { transform: translateY(var(--fx-hover-levante)) rotate(calc(-1deg * var(--fx-intensidad))); box-shadow: var(--fx-hover-sombra); }
.flujo li { transition: transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease; }
.flujo li:hover { transform: translateY(var(--fx-hover-levante)); box-shadow: var(--fx-hover-sombra); border-color: #c7d5fb; }
.flujo li:hover .flujo-n { background: var(--azul); }

/* ---------- Seguridad: panel de estado (ilustrativo) ---------- */
.seg-home { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.seg-home .monitor { flex: 1 1 440px; }
.seg-lista { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.seg-lista .enlace-flecha { margin-top: 8px; }
.tarjeta-fila { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; }
.tarjeta-fila h3 { margin: 0 0 4px; font-size: 17px; }
.tarjeta-fila p { font-size: 15px; }
.monitor-solo { max-width: 720px; margin: 0 auto 32px; }
.monitor { min-width: 0; display: flex; flex-direction: column; background: var(--tinta); color: #c7cdd8; border-radius: var(--radio-g); padding: 24px; box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .45); }
.monitor-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid #253046; flex-wrap: wrap; }
.monitor-cab strong { color: #fff; font-size: 15px; font-weight: 600; }
.monitor-ejemplo { margin-left: auto; font-size: 12px; color: #8b95a7; border: 1px solid #2c3850; border-radius: 999px; padding: 3px 10px; }
.monitor-lista { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-around; }
.monitor-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #1e2738; border-radius: 10px; transition: background-color var(--fx-hover-dur) ease, transform var(--fx-hover-dur) ease; }
.monitor-item:last-child { border-bottom: 0; }
.monitor-item:hover { background: #172033; transform: translateX(calc(4px * var(--fx-intensidad))); }
.monitor-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #172033; color: #93c5fd; display: inline-flex; align-items: center; justify-content: center; }
.monitor-txt { flex: 1 1 auto; min-width: 0; }
.monitor-txt strong { display: block; color: #fff; font-weight: 500; font-size: 14.5px; }
.monitor-txt small { display: block; font-size: 13px; color: #8b95a7; }
.monitor-ok { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(34, 197, 94, .15); color: #4ade80; }
.monitor-ok .pulso { position: absolute; inset: 0; width: auto; height: auto; background: rgba(74, 222, 128, .35); animation-delay: calc(var(--i, 0) * .45s); }
/* Punto "en vivo": un halo que se expande y se apaga. Velocidad: --fx-pulso-dur; tamaño: --fx-pulso-escala. */
.pulso { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #4ade80; animation: pulso var(--fx-pulso-dur) ease-out infinite; }
.monitor-cab .pulso { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 calc(7px * var(--fx-pulso-escala)) rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.monitor-ok .pulso { animation-name: halo; }
@keyframes halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(var(--fx-pulso-escala)); opacity: 0; } }

/* ---------- Cómo empiezas ---------- */
.empezar { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.empezar > div { flex: 1 1 420px; min-width: 0; }
.empezar .ilustracion { flex: 1 1 360px; min-width: 0; max-width: 480px; }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.pasos li { display: flex; gap: 16px; }
.pasos strong { color: var(--tinta); font-size: 18px; font-weight: 600; }
.pasos p { margin-top: 4px !important; }
.pasos-n { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--azul-claro); color: var(--azul); font: 600 15px/36px var(--fuente); text-align: center; }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; color: var(--tinta); font-weight: 500; font-size: 16.5px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--texto-suave); transition: transform .2s ease; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; font-size: 15.5px; }

/* ---------- Formularios ---------- */
.caja-demo { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 48px; box-shadow: var(--sombra); }
.caja-demo .seccion-cab { margin-bottom: 32px; }
@media (max-width: 640px) { .caja-demo { padding: 28px 20px; } }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .formulario { grid-template-columns: minmax(0, 1fr); } }
.campo label { font-size: 14px; font-weight: 500; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  background: #fff; color: var(--tinta); font: 400 15px/1.4 var(--fuente);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input::placeholder, .campo textarea::placeholder { color: #8a92a0; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.campo.con-error input, .campo.con-error select { border-color: #dc2626; }
.campo-error { min-height: 18px; font-size: 13px; color: #b91c1c; }
.form-pie { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-msg { font-size: 14.5px; }
.form-msg.ok { color: var(--verde); }
.form-msg.error { color: #b91c1c; }

/* ---------- Páginas internas ---------- */
.pagina-cab { padding: 88px 0 48px; }
.pagina-cab h1 { font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.03em; }
.pagina-intro { margin-top: 20px !important; font-size: 19px; max-width: 680px; }
.texto-largo h2 { font-size: 28px; margin-bottom: 16px; }
.texto-largo p { font-size: 17px; }
.texto-largo p + p { margin-top: 14px; }
.banda-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  background: radial-gradient(45% 120% at 100% 0%, rgba(99, 102, 241, calc(.28 * var(--malla-intensidad))), transparent 70%),
    radial-gradient(35% 100% at 0% 100%, rgba(29, 78, 216, calc(.22 * var(--malla-intensidad))), transparent 70%), var(--tinta); border-radius: var(--radio-g); padding: 40px; }
.banda-cta h2 { color: #fff; font-size: 28px; }
.banda-cta p { color: #c7cdd8; margin-top: 8px; }
@media (max-width: 640px) { .banda-cta { padding: 28px 20px; } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 64px 0 32px; background: #fff; }
.pie-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .pie-in { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
.pie-marca p { margin-top: 14px; max-width: 320px; font-size: 14.5px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.pie ul a { color: var(--texto); display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.pie ul a:hover { color: var(--tinta); }
.pie-contacto { margin-top: 18px !important; }
.pie .pie-t { font-size: 14px; font-weight: 600; color: var(--tinta); margin: 0 0 14px; letter-spacing: 0; }
.pie-nota { color: var(--texto-suave); font-size: 13px; }
.pie-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--texto-suave); }

/* ---------- WhatsApp flotante (QENTbot va justo encima) ---------- */
.wa-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 52px; height: 52px; border-radius: 999px; background: #25d366; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(15, 23, 42, .18); }
.wa-flotante:hover { background: #1fb457; }
@media (max-width: 640px) { .wa-flotante { right: 16px; bottom: 16px; width: 48px; height: 48px; } }


/* ---------- Aviso "solo en español" (páginas que no se tradujeron) ---------- */
.aviso-idioma { position: relative; z-index: 60; background: var(--ambar-claro); color: #78350f; font: 500 14px/1.4 var(--fuente); text-align: center; padding: 10px 16px; }

/* ---------- Aparición al hacer scroll (solo con JS). Usa la propiedad "translate" para no pisar el "transform" del hover. ---------- */
.js-revelar .revelar { opacity: 0; translate: 0 var(--fx-revelar-desplaz); transition: opacity var(--fx-revelar-dur) ease, translate var(--fx-revelar-dur) cubic-bezier(.2, .8, .2, 1), transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease; }
.js-revelar .revelar.visible { opacity: 1; translate: none; }

/* =========================================================================
   Blog, artículos y páginas legales
   ========================================================================= */
/* Colores por categoría (contenido/blog/indice.php, campo "tono") */
.tono-azul { --tono: #1d4ed8; --tono-claro: #eef3fe; --tono-banda: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.tono-turquesa { --tono: #0b6e77; --tono-claro: #e6f6f7; --tono-banda: linear-gradient(135deg, #0e7c86, #14b8a6); }
.tono-violeta { --tono: #6d28d9; --tono-claro: #f1ebfe; --tono-banda: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.tono-verde { --tono: #15803d; --tono-claro: #e7f6ee; --tono-banda: linear-gradient(135deg, #15803d, #22c55e); }
.tono-ambar { --tono: #a14a08; --tono-claro: #fef3c7; --tono-banda: linear-gradient(135deg, #b45309, #f59e0b); }
.pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; font: 600 12.5px/1.2 var(--fuente); color: var(--tono, var(--azul)); background: var(--tono-claro, var(--azul-claro)); white-space: nowrap; }
.pill-destacado { color: #92400e; background: var(--ambar-claro); }

/* Listado */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.sitio a.post, .post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden; color: var(--texto);
  transition: transform var(--fx-hover-dur) ease, box-shadow var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease; }
.post:hover { transform: translateY(var(--fx-hover-levante)); box-shadow: var(--fx-hover-sombra); border-color: #c7d5fb; color: var(--texto); }
.post:active { transform: translateY(calc(var(--fx-hover-levante) / 2)) scale(.995); }
.post-banda { position: relative; display: flex; align-items: flex-end; height: 120px; padding: 18px 22px; background: var(--tono-banda); color: #fff; overflow: hidden; }
.post-banda-ico { position: absolute; right: -6px; bottom: -14px; opacity: .25; stroke-width: 1.25; transition: transform var(--fx-hover-dur) ease; }
.post:hover .post-banda-ico { transform: rotate(calc(-8deg * var(--fx-intensidad))) scale(calc(1 + .08 * var(--fx-intensidad))); }
.post-etiqueta { position: relative; font: 500 12.5px/1.2 var(--mono); letter-spacing: .02em; }
.post-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.post-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.post-t { font-size: 19px; font-weight: 600; color: var(--tinta); line-height: 1.3; letter-spacing: -0.01em; }
.post-t-grande { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
.post-d { font-size: 15px; flex: 1 1 auto; }
.post-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--texto-suave); padding-top: 6px; }
.post-pie > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.post:hover .enlace-flecha .ico { transform: translateX(calc(4px * var(--fx-intensidad))); }
.post-destacado { grid-column: 1 / -1; flex-direction: row-reverse; }
.post-destacado .post-banda { flex: 0 0 42%; height: auto; min-height: 260px; padding: 28px; }
.post-destacado .post-cuerpo { padding: 40px; justify-content: center; }
@media (max-width: 760px) { .post-destacado { flex-direction: column; } .post-destacado .post-banda { min-height: 160px; } .post-destacado .post-cuerpo { padding: 24px; } }
.post-chico .post-cuerpo, .post-chico { padding: 0; }
.post-chico { padding: 22px; gap: 12px; }

.boletin { margin-top: 40px; text-align: center; background: linear-gradient(135deg, var(--azul-claro), var(--turquesa-claro)); border-radius: var(--radio-g); padding: 48px 24px; }
.boletin h2 { font-size: clamp(24px, 3vw, 30px); }
.boletin > p { margin-top: 10px !important; }
.boletin-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 480px; margin: 24px auto 0; }
.boletin-form input { flex: 1 1 240px; min-height: 46px; padding: 11px 16px; border: 1px solid var(--linea-fuerte); border-radius: 10px; font: 400 15px/1.4 var(--fuente); color: var(--tinta); background: #fff; }
.boletin-form input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.boletin .form-msg { margin-top: 12px; }

/* Artículo */
.articulo-ancho { max-width: 1100px; }
.articulo-cab { padding: 56px 0 32px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto-suave); margin-bottom: 28px; }
.migas a { color: var(--texto); }
.migas a:hover { color: var(--azul); }
.articulo-cab .pill { margin-bottom: 18px; }
.articulo-cab h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.03em; line-height: 1.1; max-width: 820px; }
.articulo-extracto { margin-top: 18px !important; font-size: 19px; max-width: 760px; }
.articulo-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--texto-suave); max-width: 760px; }
.articulo-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg, var(--azul), var(--turquesa)); color: #fff; font: 700 11px/28px var(--fuente); text-align: center; }
.articulo-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; padding-bottom: 56px; }
.articulo-cuerpo > .prosa { flex: 1 1 560px; min-width: 0; max-width: 720px; }
.articulo-lateral { flex: 0 1 280px; min-width: 240px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .articulo-lateral { position: static; flex-basis: 100%; } }
.lateral-caja { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.lateral-t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin-bottom: 12px !important; }
.toc { display: flex; flex-direction: column; }
.toc a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid var(--linea); font-size: 14px; line-height: 1.4; color: var(--texto); transition: color var(--fx-hover-dur) ease, border-color var(--fx-hover-dur) ease, background-color var(--fx-hover-dur) ease; }
.toc a:hover { color: var(--azul); border-left-color: var(--azul); }
.toc a.activo { color: var(--azul); border-left-color: var(--azul); font-weight: 500; background: linear-gradient(90deg, var(--azul-claro), transparent); }
.lateral-cta { background: var(--tinte-seccion); }
.lateral-cta > p:not(.lateral-t) { font-size: 14px; margin-bottom: 14px !important; }
.lateral-cta .btn { width: 100%; }
.banda-cta-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sitio a.enlace-claro { display: inline-flex; align-items: center; gap: 6px; color: #c7cdd8; font-size: 14.5px; }
.sitio a.enlace-claro:hover { color: #fff; }
.relacionados-t { font-size: 24px; margin-bottom: 24px !important; }

/* Texto largo: cuerpo de artículos y páginas legales */
.prosa { font-size: 17px; line-height: 1.8; color: #3b4352; }
.sitio .prosa > * + * { margin-top: 20px; }
.sitio .prosa h2 { font-size: 26px; line-height: 1.25; margin-top: 48px; scroll-margin-top: 88px; }
.sitio .prosa h3 { font-size: 19px; line-height: 1.3; margin-top: 32px; scroll-margin-top: 88px; }
.sitio .prosa h2 + *, .sitio .prosa h3 + * { margin-top: 12px; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: 8px; }
.prosa li::marker { color: var(--azul); }
.prosa a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa a:hover { color: var(--azul-hover); }
.callout-box { background: var(--azul-claro); border-left: 4px solid var(--azul); border-radius: 0 var(--radio) var(--radio) 0; padding: 18px 22px; }
.sitio .prosa .callout-box { margin-top: 32px; margin-bottom: 32px; }
.callout-box p { font-size: 16px; line-height: 1.7; }
.callout-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--azul); margin-bottom: 8px; }
.legal { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 40px; }
.legal > section + section { margin-top: 36px; }
.legal > section > * + * { margin-top: 14px; }
.legal > section:first-child p { font-size: 18.5px; color: var(--texto); }
.sitio .legal h2 { margin-top: 0; font-size: 22px; }
@media (max-width: 640px) { .legal { padding: 24px 20px; } }