/* ==========================================================================
   Alfy Inversiones — hoja de estilos del sitio
   Port del template V0 (Tailwind) a CSS propio. Tokens según manual de marca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens de marca
   - `brand-blue` / `brand-blue-dark` cambian según el tema: en oscuro se
     aclaran para que texto, links e iconos pasen AA.
   - `brand-blue-fill` / `brand-blue-deep` son FIJOS: se usan como fondo de
     botones y en degradados, donde el color institucional debe mantenerse.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --brand-blue: #0083ad;
  --brand-blue-dark: #005f7e;
  --brand-blue-soft: #eaf6fa;
  /* Azul de relleno para botones: 4 pasos más oscuro que el institucional
     para llegar a 4.56:1 con texto blanco (AA). */
  --brand-blue-fill: #007fa8;
  --brand-blue-deep: #005f7e;
  /* Azul claro fijo para superficies siempre oscuras (footer, banda app). */
  --brand-blue-on-dark: #6fc6e0;

  --brand-green: #62e676;
  --brand-green-deep: #1c8f43;
  --on-green: #16302b;

  --brand-orange: #f9b233;
  --brand-graphite: #3c3c3b;
  --brand-ink: #3c3c3b;

  --chart-grid: rgb(0 60 80 / 0.1);

  --background: #ffffff;
  --foreground: #3c3c3b;
  --card: #ffffff;
  --card-foreground: #3c3c3b;
  --primary: #007fa8;
  --primary-foreground: #ffffff;
  --secondary: #eaf6fa;
  --secondary-foreground: #005f7e;
  --muted: #f3f8fb;
  --muted-foreground: #6b7b83;
  --accent: #eaf6fa;
  --accent-foreground: #005f7e;
  --destructive: #d64545;
  --border: #e2edf2;
  --input: #dbe8ef;
  --ring: #0083ad;
  --radius: 0.875rem;

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);

  --sombra-tarjeta: 0 30px 70px -40px rgb(0 60 80 / 0.45);
  --sombra-hover: 0 24px 48px -32px rgb(0 90 120 / 0.5);
  --ring-tarjeta: rgb(60 60 59 / 0.08);

  --font-sans: 'Lato', 'Lato Fallback', ui-sans-serif, system-ui, sans-serif;
}

.dark {
  color-scheme: dark;

  /* Azul institucional aclarado para texto/iconos (AA sobre fondos oscuros).
     El azul original se conserva en `--brand-blue-fill`. */
  --brand-blue: #33a5c9;
  --brand-blue-dark: #6fc6e0;
  --brand-blue-soft: #1b2b33;
  --brand-blue-fill: #007fa8;
  --brand-blue-deep: #005f7e;
  --brand-blue-on-dark: #6fc6e0;

  /* El verde de marca rinde muy bien en oscuro: se usa tal cual. */
  --brand-green: #62e676;
  --brand-green-deep: #62e676;
  --on-green: #16302b;

  --brand-orange: #f9b233;

  /* Tinta de títulos: gris claro cálido, no blanco puro. */
  --brand-graphite: #ece9e4;
  --brand-ink: #1b1e21;

  --chart-grid: rgb(232 230 227 / 0.12);

  /* Grises azulados muy oscuros derivados del gris de marca — nunca negro. */
  --background: #16181a;
  --foreground: #e6e3de;
  --card: #1e2124;
  --card-foreground: #e6e3de;
  --primary: #007fa8;
  --primary-foreground: #ffffff;
  --secondary: #1b2b33;
  --secondary-foreground: #8fd3e8;
  --muted: #21252a;
  --muted-foreground: #a3a9ae;
  --accent: #1b2b33;
  --accent-foreground: #8fd3e8;
  --destructive: #ff7a7a;
  --border: #2c3238;
  --input: #333a41;
  --ring: #33a5c9;

  --sombra-tarjeta: 0 30px 70px -40px rgb(0 0 0 / 0.85);
  --sombra-hover: 0 24px 48px -32px rgb(0 0 0 / 0.9);
  --ring-tarjeta: rgb(230 227 222 / 0.12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

strong, b {
  font-weight: 700;
}

table {
  border-collapse: collapse;
}

/* Sobre el verde de marca siempre va tinta oscura, nunca blanco. */
::selection {
  background: var(--brand-green);
  color: var(--on-green);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.label-xs {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.texto-xs {
  font-size: 0.75rem;
}

.texto-suave {
  color: var(--muted-foreground);
}

.es-positivo {
  color: var(--brand-green-deep);
}

.es-negativo {
  color: var(--destructive);
}

.alinear-der {
  text-align: right;
}

.solo-sm {
  display: none;
}

@media (min-width: 640px) {
  .solo-sm {
    display: table-cell;
  }
}

/* Alternar contenido según tema (iconos y textos del toggle) */
.solo-oscuro { display: none; }
.dark .solo-claro { display: none; }
.dark .solo-oscuro { display: block; }
.dark span.solo-oscuro { display: inline; }

/* Iconos */
.icono { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icono-xxs { width: 0.75rem; height: 0.75rem; }
.icono-xs { width: 0.875rem; height: 0.875rem; }
.icono-sm { width: 1rem; height: 1rem; }
.icono-md { width: 1.5rem; height: 1.5rem; }

/* Chips de variación */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.chip--verde {
  background: color-mix(in srgb, var(--brand-green) 22%, transparent);
  color: var(--brand-green-deep);
}

.dark .chip--verde {
  background: color-mix(in srgb, var(--brand-green) 16%, transparent);
}

.chip--rojo {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}

.dark .chip--rojo {
  background: color-mix(in srgb, var(--destructive) 16%, transparent);
}

/* Ficha con el ticker (cuadradito celeste) */
.ficha-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    transform 0.2s, box-shadow 0.2s;
}

.btn--lg { height: 3rem; padding-inline: 1.5rem; }
.btn--xl { height: 3.25rem; padding-inline: 1.75rem; font-size: 1rem; }

.btn--primario {
  background: var(--brand-blue-fill);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px -8px var(--brand-blue-fill);
}

.btn--primario:hover {
  background: var(--brand-blue-deep);
  transform: translateY(-1px);
}

.btn--outline {
  border: 1px solid color-mix(in srgb, var(--brand-blue) 35%, transparent);
  color: var(--brand-blue);
}

.btn--outline:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

.btn--ghost {
  color: var(--brand-blue-dark);
}

.btn--ghost:hover {
  background: var(--brand-blue-soft);
}

.btn--blanco {
  background: #fff;
  color: var(--brand-blue-deep);
  font-weight: 700;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5);
}

.btn--blanco:hover {
  transform: translateY(-2px);
}

.btn--icono {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--brand-blue);
}

.btn--icono:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

/* --------------------------------------------------------------------------
   Logo (imagen oficial)
   -------------------------------------------------------------------------- */
.logo-img {
  height: 2.375rem;
  width: auto;
}

/* La visibilidad la manejan .solo-claro / .solo-oscuro; acá sólo se define
   el display del que corresponde mostrar. */
.logo-img.solo-oscuro { display: none; }
.dark .logo-img.solo-claro { display: none; }
.dark .logo-img.solo-oscuro { display: block; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}

.navbar.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--background) 75%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.navbar.is-open {
  background: var(--background);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.navbar__logo {
  padding-block: 0.5rem;
  border-radius: var(--radius-lg);
}

.navbar__nav {
  display: none;
}

.navbar__nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
  transition: color 0.2s;
}

.navbar__link:hover {
  color: var(--brand-blue);
}

.navbar__chevron {
  transition: transform 0.2s;
}

/* Dropdowns del header (Operá, Tutoriales): abren con hover o teclado */
.navbar__item--dropdown {
  position: relative;
}

.navbar__item--dropdown .navbar__link {
  gap: 0.25rem;
}

.navbar__nav ul.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.5rem;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 24px 48px -24px rgb(0 60 80 / 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.dark .navbar__dropdown {
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 24px 48px -24px rgb(0 0 0 / 0.8);
}

.navbar__item--dropdown:hover .navbar__dropdown,
.navbar__item--dropdown:focus-within .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__item--dropdown:hover .navbar__chevron,
.navbar__item--dropdown:focus-within .navbar__chevron {
  transform: rotate(180deg);
}

.navbar__dropdown a {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 85%, transparent);
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.navbar__dropdown a:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

/* Submenú anidado (fondos individuales dentro de Invertí) */
.navbar__subitem {
  position: relative;
}

.navbar__subitem > a {
  justify-content: space-between;
  gap: 0.5rem;
}

.navbar__subflecha {
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.navbar__nav ul.navbar__submenu {
  top: -0.5rem;
  left: 100%;
  min-width: 20rem;
  max-height: 70vh;
  overflow-y: auto;
}

.navbar__submenu a {
  white-space: normal;
}

/* El hover del dropdown padre no debe abrir el submenú: sólo el del ítem Fondos */
.navbar__item--dropdown:hover .navbar__submenu,
.navbar__item--dropdown:focus-within .navbar__submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.navbar__subitem:hover > .navbar__submenu,
.navbar__subitem:focus-within > .navbar__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__acciones {
  display: none;
  align-items: center;
  gap: 0.625rem;
}

/* Botones del header: más grandes y con más peso que el resto del sitio */
.navbar__acciones .btn--outline,
.navbar__acciones .btn--primario {
  height: 3rem;
  padding-inline: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}

/* "Ingresá": relleno suave + borde firme para que no se pierda sobre el
   fondo, en ambos temas (header y menú móvil). */
.navbar__acciones .btn--outline,
.navbar__movil-cta .btn--outline {
  border-width: 2px;
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 8%, var(--brand-blue-soft));
  color: var(--brand-blue-dark);
  font-weight: 700;
}

.navbar__acciones .btn--outline:hover,
.navbar__movil-cta .btn--outline:hover {
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 16%, var(--brand-blue-soft));
}

.dark .navbar__acciones .btn--outline,
.dark .navbar__movil-cta .btn--outline {
  border-color: var(--brand-blue-dark);
  color: var(--brand-blue-dark);
}

.navbar__hamburguesa .icono-cerrar { display: none; }
.navbar.is-open .navbar__hamburguesa .icono-menu { display: none; }
.navbar.is-open .navbar__hamburguesa .icono-cerrar { display: block; }

.navbar__movil {
  border-top: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
}

.navbar__movil nav {
  padding: 1.25rem;
}

.navbar__movil ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.navbar__movil-link {
  display: flex;
  align-items: center;
  height: 3rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  transition: background-color 0.2s, color 0.2s;
}

.navbar__movil-link:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

/* Acordeones del menú móvil (Operá, Tutoriales) */
.navbar__movil-grupo summary {
  list-style: none;
  cursor: pointer;
  justify-content: space-between;
}

.navbar__movil-grupo summary::-webkit-details-marker {
  display: none;
}

.navbar__movil-grupo[open] summary .navbar__chevron {
  transform: rotate(180deg);
}

.navbar__movil-grupo ul {
  padding-left: 0.75rem;
}

.navbar__movil-sublink {
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
  transition: background-color 0.2s, color 0.2s;
}

.navbar__movil-sublink:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

/* Subgrupo anidado del menú móvil (fondos individuales) */
.navbar__movil-subgrupo summary {
  justify-content: space-between;
}

.navbar__movil-subgrupo ul .navbar__movil-sublink {
  height: auto;
  min-height: 2.75rem;
  padding-block: 0.5rem;
}

.navbar__movil-tema {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.navbar__movil-tema-btn {
  height: 3rem;
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius-xl);
  padding-inline: 0.75rem;
  font-size: 1rem;
  color: var(--brand-blue);
}

.navbar__movil-cta {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.navbar__movil-cta .btn {
  height: 3rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .navbar__nav { display: block; }
  .navbar__acciones { display: flex; }
  .navbar__hamburguesa { display: none; }
  .navbar__movil { display: none !important; }
  .container { padding-inline: 2rem; }
}

/* --------------------------------------------------------------------------
   Ticker de cotizaciones
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--brand-blue) 15%, transparent);
  background: color-mix(in srgb, var(--brand-blue-soft) 60%, transparent);
  padding-block: 0.875rem;
}

.ticker__fade {
  position: absolute;
  inset-block: 0;
  width: 5rem;
  z-index: 10;
  pointer-events: none;
}

.ticker__fade--izq {
  left: 0;
  background: linear-gradient(to right, var(--background), transparent);
}

.ticker__fade--der {
  right: 0;
  background: linear-gradient(to left, var(--background), transparent);
}

.ticker__lista {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  padding-right: 2.25rem;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  font-size: 0.875rem;
}

.ticker__nombre {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-graphite);
}

.ticker__precio {
  color: color-mix(in srgb, var(--foreground) 75%, transparent);
}

.ticker__var {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}

.ticker__var .icono-xs {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   Secciones (cabecera común)
   -------------------------------------------------------------------------- */
.seccion {
  padding-block: 5rem;
  scroll-margin-top: 7rem;
}

.seccion__cabecera {
  max-width: 42rem;
}

.seccion__etiqueta {
  color: var(--brand-blue);
}

.seccion__titulo {
  margin-top: 1rem;
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--brand-graphite);
}

.seccion__titulo strong {
  color: var(--brand-blue);
}

.seccion__bajada {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .seccion__titulo { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .seccion { padding-block: 7rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 8rem;
  padding-bottom: 0;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__gradiente {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 760px;
  background: radial-gradient(120% 90% at 12% -10%, var(--brand-blue-soft) 0%, transparent 62%);
}

.hero__orbe {
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-green) 26%, transparent) 0%, transparent 68%);
  filter: blur(40px);
}

.hero__contenido {
  position: relative;
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--brand-blue-soft);
  padding: 0.5rem 0.875rem;
  color: var(--brand-blue-dark);
}

.hero__titulo {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--brand-graphite);
}

.hero__titulo strong {
  color: var(--brand-blue);
}

.hero__bajada {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.hero__bajada strong {
  color: var(--foreground);
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero__cta-principal {
  box-shadow: 0 14px 34px -14px var(--brand-blue-fill);
}

.hero__cta-secundaria {
  color: var(--brand-blue-dark);
}

@media (min-width: 640px) {
  .hero__titulo { font-size: 3rem; }
  .hero__cta { flex-direction: row; align-items: center; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 10rem; }
  .hero__titulo { font-size: 3.75rem; }
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }
}

/* Banner de la app: celular + logos de marcas flotando (como la web oficial) */
.hero-app {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.5rem 0;
}

.hero-app__lineas {
  position: absolute;
  inset: -6% -10%;
  width: 120%;
  height: 112%;
  z-index: 0;
  pointer-events: none;
}

.hero-app__celular {
  position: relative;
  z-index: 2;
  display: block;
  width: 47%;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 30px 50px color-mix(in srgb, var(--brand-ink) 30%, transparent));
}

/* Burbujas con los logos de las marcas que se operan */
.hero-app__logo {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  animation: hero-flotar var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.hero-app__logo--detras {
  z-index: 1;
}

/* El anillo blanco es un margen proporcional a la burbuja (el % del
   padding resolvería contra el contenedor y quedaría gigante). */
.hero-app__logo img {
  display: block;
  width: 86%;
  margin: 7%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity 0.42s ease, transform 0.42s ease;
}

.hero-app__logo img.is-cambiando {
  opacity: 0;
  transform: scale(0.55);
}

.hero-app__logo--1 { width: 13%; top: 2%;  left: 17%; }
.hero-app__logo--2 { width: 15%; top: 6%;  right: 17%; }
.hero-app__logo--3 { width: 21%; top: 27%; left: 1%; }
.hero-app__logo--4 { width: 26%; bottom: 13%; left: 4%; }
.hero-app__logo--5 { width: 16%; bottom: 7%;  right: 20%; }

/* Panel de productos que acompaña al celular */
.hero-app__panel {
  position: absolute;
  z-index: 3;
  top: 26%;
  right: -2%;
  width: 40%;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 18px 40px -12px color-mix(in srgb, var(--brand-ink) 30%, transparent);
  animation: hero-flotar var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes hero-flotar {
  from { transform: translateY(-7px); }
  to   { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-app__logo,
  .hero-app__panel { animation: none; }
}

/* Trust strip */
.hero__trust {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .hero__trust { margin-top: 5rem; }
}

.hero__trust p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.hero__trust strong {
  color: var(--brand-blue);
}

.hero__punto {
  color: var(--border);
}

.dark .hero__punto {
  color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
}

/* --------------------------------------------------------------------------
   Cotizaciones
   -------------------------------------------------------------------------- */
.cotizaciones {
  background: linear-gradient(to bottom, var(--background), color-mix(in srgb, var(--muted) 50%, transparent));
}

.cotizaciones__vivo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.punto-vivo {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
}

.punto-vivo__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-green);
  opacity: 0.75;
  animation: alfy-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.punto-vivo__nucleo {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-green-deep);
}

@keyframes alfy-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.cotizaciones__panel {
  margin-top: 2.5rem;
}

.tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow-x: auto;
  border-radius: 9999px;
  background: var(--card);
  padding: 0.375rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
  width: 100%;
}

.tabs__boton {
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  padding-inline: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: background-color 0.2s, color 0.2s;
}

.tabs__boton:hover {
  color: var(--foreground);
}

.tabs__boton.is-active {
  background: var(--brand-blue-fill);
  color: #fff;
}

.tabla-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
}

.tabla {
  width: 100%;
  text-align: left;
}

.tabla thead tr {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}

.tabla th,
.tabla td {
  padding: 0.875rem 1.25rem;
}

.tabla thead th {
  color: var(--muted-foreground);
}

.tabla tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background-color 0.2s;
}

.tabla tbody tr:last-child {
  border-bottom: 0;
}

.tabla tbody tr:hover {
  background: color-mix(in srgb, var(--brand-blue-soft) 50%, transparent);
}

.tabla tbody th {
  font-weight: 400;
  padding-block: 1rem;
}

.tabla tbody td {
  padding-block: 1rem;
}

.tabla__instrumento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tabla__nombres {
  display: flex;
  flex-direction: column;
}

.tabla__ticker {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.tabla__precio {
  display: inline-block;
  border-radius: var(--radius-md);
  padding: 0.125rem 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

/* Flecha del chip según signo: el JS alterna las clases chip--verde/rojo */
.chip .icono-sube { display: none; }
.chip .icono-baja { display: none; }
.chip--verde .icono-sube { display: block; }
.chip--rojo .icono-baja { display: block; }

.tabla__spark {
  margin-left: auto;
  height: 2rem;
  width: 110px;
}

.cotizaciones__descargo {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Productos
   -------------------------------------------------------------------------- */
.productos__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .productos__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .productos__grid { grid-template-columns: repeat(3, 1fr); }
}

.producto {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.5rem;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.producto:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand-blue) 40%, transparent);
  box-shadow: var(--sombra-hover);
}

.producto__icono {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  transition: background-color 0.3s, color 0.3s;
}

.producto:hover .producto__icono {
  background: var(--brand-blue-fill);
  color: #fff;
}

.producto__punto {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--brand-green);
  opacity: 0;
  transition: opacity 0.3s;
}

.producto:hover .producto__punto {
  opacity: 1;
}

.producto__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.producto__descripcion {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.producto__mas {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.producto__mas .icono-sm {
  transition: transform 0.3s;
}

.producto:hover .producto__mas .icono-sm {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Cómo funciona
   -------------------------------------------------------------------------- */
.como-funciona {
  background: color-mix(in srgb, var(--brand-blue-soft) 50%, transparent);
}

.como-funciona__grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .como-funciona__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

.como-funciona__cta-grupo {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.como-funciona__cta-grupo .btn--primario {
  box-shadow: 0 14px 34px -14px var(--brand-blue-fill);
}

.como-funciona__nota {
  margin-top: 1rem;
}

.como-funciona__pasos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: pasos;
}

.paso {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
  transition: box-shadow 0.3s;
}

.paso:hover {
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 24px 48px -34px rgb(0 90 120 / 0.45);
}

.dark .paso:hover {
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 24px 48px -34px rgb(0 0 0 / 0.9);
}

.paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-2xl);
  background: var(--brand-blue-fill);
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
}

.paso__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.paso__detalle {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Por qué Alfy (ventajas)
   -------------------------------------------------------------------------- */
.ventajas__grid {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem 2rem;
}

@media (min-width: 640px) {
  .ventajas__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ventajas__grid { grid-template-columns: repeat(3, 1fr); }
}

.ventaja {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  margin: -1.25rem;
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.ventaja:hover {
  transform: translateY(-4px);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-hover);
}

.ventaja__icono {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-fill);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s;
}

.ventaja:hover .ventaja__icono {
  transform: scale(1.08) rotate(-6deg);
  background: var(--brand-blue-deep);
}

.ventaja__icono .icono-md {
  width: 1.25rem;
  height: 1.25rem;
}

.ventaja__punto {
  position: absolute;
  right: -0.375rem;
  bottom: -0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  background: var(--brand-green);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ventaja:hover .ventaja__punto {
  transform: scale(1.25) rotate(12deg);
}

.ventaja__titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-graphite);
  transition: color 0.3s;
}

.ventaja:hover .ventaja__titulo {
  color: var(--brand-blue);
}

.ventaja__link {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-blue);
  transition: color 0.2s;
}

.ventaja__link:hover {
  color: var(--brand-blue-dark);
}

.ventaja__link .icono-sm {
  transition: transform 0.3s;
}

.ventaja__link:hover .icono-sm {
  transform: translateX(3px);
}

.ventaja__detalle {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Novedades
   -------------------------------------------------------------------------- */
.novedades {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}

.novedades__cabecera {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .novedades__cabecera {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.novedades__ver-todas {
  flex-shrink: 0;
  font-weight: 700;
}

.novedades__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .novedades__grid { grid-template-columns: repeat(3, 1fr); }
}

.articulo {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
  transition: transform 0.3s, box-shadow 0.3s;
}

.articulo:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 28px 56px -36px rgb(0 90 120 / 0.5);
}

.dark .articulo:hover {
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 28px 56px -36px rgb(0 0 0 / 0.9);
}

.articulo__imagen-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.articulo__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.articulo:hover .articulo__imagen {
  transform: scale(1.05);
}

.articulo__categoria {
  position: absolute;
  top: 1rem;
  left: 1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  padding: 0.375rem 0.75rem;
  color: var(--brand-blue-dark);
  backdrop-filter: blur(4px);
}

.articulo__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
}

.articulo__titulo {
  font-size: 1.125rem;
  line-height: 1.375;
  font-weight: 700;
  text-wrap: balance;
  color: var(--brand-graphite);
  transition: color 0.3s;
}

.articulo:hover .articulo__titulo {
  color: var(--brand-blue);
}

.articulo__resumen {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.articulo__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.articulo__lectura {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  scroll-margin-top: 7rem;
  background: var(--brand-ink);
  color: rgb(255 255 255 / 0.7);
}

.footer__inner {
  padding-block: 4rem;
}

@media (min-width: 1024px) {
  .footer__inner { padding-block: 5rem; }
}

.footer__grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.1fr 1.55fr 0.95fr; }
}

/* Mapa de la oficina */
.footer__mapa-iframe {
  margin-top: 1.25rem;
  display: block;
  width: 100%;
  height: 14rem;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.06);
}

/* En dark mode el mapa se invierte a una versión oscura (Google no ofrece
   tema en el embed); el hue-rotate devuelve los colores a su tono real. */
.dark .footer__mapa-iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.8) contrast(0.92);
}

.footer__mapa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.footer__descripcion {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.65;
}

.footer__contacto {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  font-size: 0.875rem;
}

.footer__contacto li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer__contacto-icono {
  margin-top: 0.125rem;
  color: var(--brand-green);
}

.footer__contacto a {
  transition: color 0.2s;
}

.footer__contacto a:hover {
  color: #fff;
}

.footer__redes {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.footer__red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 50%;
  transition: border-color 0.2s, color 0.2s;
}

.footer__red svg {
  width: 1rem;
  height: 1rem;
}

.footer__red:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.footer__columnas {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .footer__columnas { grid-template-columns: repeat(3, 1fr); }
}

.footer__columna-titulo {
  color: var(--brand-green);
}

.footer__columnas ul {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__link {
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer__link:hover {
  color: #fff;
}

/* Bloque regulatorio */
.footer__regulatorio {
  margin-top: 3.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 2.5rem;
}

.footer__organismos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.footer__organismos li {
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  color: rgb(255 255 255 / 0.6);
}

.footer__legales {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.55);
}

.footer__pie {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 1.75rem;
}

@media (min-width: 640px) {
  .footer__pie {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__copyright {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.5);
}

.footer__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer__boton {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  transition: border-color 0.2s, color 0.2s;
}

.footer__boton:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

/* --------------------------------------------------------------------------
   Páginas internas (migradas del WordPress)
   -------------------------------------------------------------------------- */
.pagina {
  padding-top: 8rem;
  padding-bottom: 5rem;
  min-height: 60dvh;
}

@media (min-width: 1024px) {
  .pagina { padding-top: 9rem; padding-bottom: 7rem; }
}

/* Hero compacto (página Servicios/Productores): sin la banda vacía que el
   min-height de .pagina deja entre el CTA y la primera sección */
.pagina.pagina--compacta {
  padding-bottom: 0;
  min-height: 0;
}

/* Hero que ya no abre la página (tiene una sección arriba): no necesita
   el padding-top que despeja el navbar fijo */
.pagina.pagina--intermedia {
  padding-top: 3rem;
  /* Al llegar por ancla, las migas no quedan tapadas por el navbar fijo */
  scroll-margin-top: 5.5rem;
}

/* Primera sección de una página: despeja el navbar fijo (mismo aire que
   el padding-top de .pagina) */
.seccion--tope {
  padding-top: 8rem;
}

@media (min-width: 1024px) {
  .seccion--tope { padding-top: 9rem; }
}

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.migas a {
  transition: color 0.2s;
}

.migas a:hover {
  color: var(--brand-blue);
}

.migas__actual {
  font-weight: 700;
  color: var(--foreground);
}

.pagina__titulo {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--brand-graphite);
}

.pagina__titulo strong {
  color: var(--brand-blue);
}

@media (min-width: 640px) {
  .pagina__titulo { font-size: 2.75rem; }
}

.pagina__bajada {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.pagina__grid {
  margin-top: 2.5rem;
}

.pagina__pendiente {
  margin-top: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 44rem;
  border: 1px dashed color-mix(in srgb, var(--brand-blue) 40%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in srgb, var(--brand-blue-soft) 55%, transparent);
  padding: 1.5rem;
}

.pagina__pendiente-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-fill);
  color: #fff;
}

.pagina__pendiente-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.pagina__pendiente-texto {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.pagina__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pagina__cta .btn--primario,
.pagina__cta .btn--ghost {
  font-weight: 700;
}

.pagina__cta .btn--ghost {
  color: var(--brand-blue-dark);
}

/* Bloques de contenido (páginas migradas) */
.bloque {
  margin-top: 3rem;
  max-width: 52rem;
}

.bloque__titulo {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-graphite);
}

.bloque__parrafo {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--foreground);
}

.bloque__lista {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bloque__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bloque__item-check {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-green) 22%, transparent);
  color: var(--brand-green-deep);
}

.bloque__item-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.bloque__item-detalle {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.bloque__pasos {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bloque__tabla-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
  background: var(--card);
}

.bloque__tabla {
  width: 100%;
  font-size: 0.875rem;
  min-width: 640px;
}

.bloque__tabla th,
.bloque__tabla td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  vertical-align: top;
}

.bloque__tabla thead th {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  font-weight: 700;
  color: var(--brand-graphite);
}

.bloque__tabla tbody th {
  font-weight: 700;
  color: var(--foreground);
}

.bloque__tabla tbody td:first-of-type {
  background: color-mix(in srgb, var(--brand-blue-soft) 45%, transparent);
  font-weight: 400;
}

.bloque__tabla tbody tr:last-child th,
.bloque__tabla tbody tr:last-child td {
  border-bottom: 0;
}

.bloque__nota {
  margin-top: 1rem;
  border-left: 3px solid var(--brand-green-deep);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: color-mix(in srgb, var(--brand-green) 12%, transparent);
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--foreground);
}

/* FAQs acordeón */
.bloque__faqs {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}

.faq[open] {
  border-color: color-mix(in srgb, var(--brand-blue) 35%, transparent);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.9688rem;
  font-weight: 700;
  color: var(--brand-graphite);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta:hover {
  color: var(--brand-blue);
}

.faq__chevron {
  flex-shrink: 0;
  color: var(--brand-blue);
  transition: transform 0.2s;
}

.faq[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__respuesta {
  padding: 0 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__respuesta p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* Tutoriales: lista de videos + reproductor */
.tutoriales {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
  max-width: 62rem;
}

@media (min-width: 900px) {
  .tutoriales {
    grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
    align-items: stretch;
  }
}

.tutoriales__lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tutorial-btn {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 0.875rem 1rem;
  text-align: left;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.tutorial-btn:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 40%, transparent);
  transform: translateX(2px);
}

.tutorial-btn.is-active {
  border-color: var(--brand-blue-fill);
  background: color-mix(in srgb, var(--brand-blue-soft) 70%, transparent);
}

.tutorial-btn__icono {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  transition: background-color 0.2s, color 0.2s;
}

.tutorial-btn.is-active .tutorial-btn__icono {
  background: var(--brand-blue-fill);
  color: #fff;
}

.tutorial-btn__textos {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tutorial-btn__titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.tutorial-btn.is-active .tutorial-btn__titulo {
  color: var(--brand-blue-dark);
}

.tutorial-btn__detalle {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.tutoriales__player {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--brand-ink);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-tarjeta);
  aspect-ratio: 16 / 9;
}

/* En desktop el reproductor se estira a la altura de la lista de
   tutoriales; el video se centra con letterbox sobre el fondo oscuro. */
@media (min-width: 900px) {
  .tutoriales__player {
    aspect-ratio: auto;
    height: 100%;
    min-height: 20rem;
  }
}

.tutoriales__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Calculadora de Dólar MEP */
.calculadora {
  margin-top: 1.75rem;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-tarjeta);
  max-width: 52rem;
}

@media (min-width: 768px) {
  .calculadora { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Panel de cotización: degradado institucional fijo, como el CTA final */
.calculadora__cotizacion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.75rem;
  background: linear-gradient(135deg,
    var(--brand-blue-deep) 0%,
    var(--brand-blue-fill) 62%,
    color-mix(in srgb, var(--brand-green) 55%, var(--brand-blue-fill)) 100%);
  color: #fff;
}

.calculadora__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(255 255 255 / 0.85);
}

.calculadora__etiqueta .punto-vivo__ping,
.calculadora__etiqueta .punto-vivo__nucleo {
  background: var(--brand-green);
}

.calculadora__precio {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.calculadora__fecha {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.7);
}

.calculadora__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.75rem;
  min-width: 0;
}

.calculadora__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.calculadora__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1.5px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  padding-inline: 1rem;
  transition: border-color 0.2s;
}

.calculadora__input-wrap:focus-within {
  border-color: var(--brand-blue);
  outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent);
}

.calculadora__moneda {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

.calculadora__input {
  width: 100%;
  height: 3.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.calculadora__input:focus {
  outline: none;
}

.calculadora__input::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  font-weight: 400;
}

.calculadora__resultado {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  gap: 0.5rem;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--brand-blue-soft) 70%, transparent);
  padding: 1rem 1.25rem;
}

/* El monto siempre va en una sola línea y en una caja de tamaño fijo:
   ocupa todo el espacio entre las etiquetas (flex: 1) y su line-height en
   rem no depende de la fuente, así cuando el JS achica el número para que
   entre, ni la fila ni la página se mueven. */
.calculadora__resultado > .texto-xs {
  flex: none;
}

.calculadora__monto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--brand-blue-dark);
}

.calculadora__cta {
  align-self: flex-start;
  font-weight: 700;
}

/* Divisor entre secciones de la landing */
.divisor__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.divisor__linea {
  flex: 1;
  height: 1px;
}

.divisor__linea--izq {
  background: linear-gradient(to right, transparent, var(--border));
}

.divisor__linea--der {
  background: linear-gradient(to left, transparent, var(--border));
}

.divisor__isotipo {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand-blue);
  opacity: 0.55;
}

.dark .divisor__isotipo {
  opacity: 0.75;
}

/* Sección "Todo lo que podés hacer con la App de Alfy" (landing) */
.funciones__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .funciones__grid {
    grid-template-columns: 1fr 0.95fr;
    gap: 4.5rem;
  }
}

.funciones__lista {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.funcion {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.funcion__icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

.funcion__titulo {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
}

.funcion__detalle {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

/* Collage de pantallas reales de la app */
.funciones__collage {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
  /* La pantalla principal define la altura; las tarjetas se superponen */
  padding-bottom: 1.5rem;
}

.collage__pantalla {
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 24px 48px -16px color-mix(in srgb, var(--brand-ink) 35%, transparent);
  height: auto;
}

.collage__pantalla--principal {
  display: block;
  width: 54%;
  margin-left: auto;
  margin-right: 2%;
}

.collage__pantalla--cedears {
  position: absolute;
  top: 4%;
  left: 0;
  width: 52%;
  animation: hero-flotar 5.4s ease-in-out -1.5s infinite alternate;
}

.collage__pantalla--biometria {
  position: absolute;
  bottom: 6%;
  left: 6%;
  width: 46%;
  animation: hero-flotar 4.6s ease-in-out -0.4s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .collage__pantalla--cedears,
  .collage__pantalla--biometria { animation: none; }
}

/* Sección "¿Por qué operar con Alfy Inversiones?" (landing) */
.operar__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .operar__grid {
    /* minmax(0, 1fr): el contenido sin quiebre (el monto de la calculadora)
       no puede agrandar su columna y correr las tarjetas */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.operar-card {
  height: 100%;
  border-radius: var(--radius-3xl);
  background: var(--card);
  padding: 2rem 1.75rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-tarjeta);
  text-align: center;
}

.operar-card__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--brand-blue-fill);
  color: #fff;
}

.operar-card__titulo {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--brand-blue-dark);
  text-wrap: balance;
}

.operar-card__dato {
  margin-top: 1.75rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.operar-card__contador {
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--brand-graphite);
  white-space: nowrap;
}

.operar-card__detalle {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.operar-card__lista {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}

.operar-card__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--foreground);
}

.operar-card__lista .icono {
  flex: none;
  margin-top: 0.125rem;
  color: var(--brand-green-deep);
}

/* La calculadora MEP se reutiliza compacta dentro de la tarjeta */
.operar-card .calculadora {
  margin-top: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  text-align: left;
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
}

.operar-card .calculadora__cotizacion {
  padding: 1.25rem;
  gap: 0.375rem;
}

.operar-card .calculadora__precio {
  font-size: 2rem;
}

.operar-card .calculadora__form {
  padding: 1.25rem;
  gap: 0.875rem;
}

.operar-card .calculadora__monto {
  font-size: 1.375rem;
}

/* Ficha de fondo */
.fondo__perfil {
  margin-top: 1.25rem;
}

.fondo__ficha {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 52rem;
}

@media (min-width: 768px) {
  .fondo__ficha { grid-template-columns: repeat(4, 1fr); }
}

.fondo__dato {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 1rem 1.125rem;
}

.fondo__dato-valor {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

/* Listado de fondos */
.fondos__lista {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .fondos__lista { grid-template-columns: repeat(2, 1fr); }
}

.fondo-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 1rem 1.25rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.fondo-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-blue) 40%, transparent);
  box-shadow: var(--sombra-hover);
}

.fondo-item__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

.fondo-item__nombre {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.fondo-item__flecha {
  margin-left: auto;
  color: var(--brand-blue);
  opacity: 0;
  transition: opacity 0.2s;
}

.fondo-item:hover .fondo-item__flecha {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.blog__filtros {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog__filtro {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  padding-inline: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.blog__filtro:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 40%, transparent);
  color: var(--brand-blue);
}

.blog__filtro.is-active {
  border-color: var(--brand-blue-fill);
  background: var(--brand-blue-fill);
  color: #fff;
}

.blog__grid {
  margin-top: 2rem;
}

/* Entrada individual */
.entrada__container {
  max-width: 860px;
}

.entrada__categoria a {
  color: var(--brand-blue);
  margin-top: 1.25rem;
  display: inline-block;
}

.entrada__titulo {
  margin-top: 0.75rem;
}

.entrada__meta {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.entrada__portada {
  margin-top: 2rem;
  width: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
}

/* Tipografía del contenido que viene del WordPress */
.entrada__contenido {
  margin-top: 2.5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--foreground);
}

.entrada__contenido h1,
.entrada__contenido h2 {
  margin-top: 2.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--brand-graphite);
}

.entrada__contenido h3,
.entrada__contenido h4 {
  margin-top: 1.75rem;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.entrada__contenido p {
  margin-top: 1.125rem;
}

.entrada__contenido a {
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-blue) 35%, transparent);
  text-underline-offset: 3px;
}

.entrada__contenido a:hover {
  text-decoration-color: var(--brand-blue);
}

.entrada__contenido ul,
.entrada__contenido ol {
  margin-top: 1.125rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.entrada__contenido ul {
  list-style: disc;
}

.entrada__contenido ol {
  list-style: decimal;
}

.entrada__contenido img {
  margin-top: 1.5rem;
  border-radius: var(--radius-xl);
}

.entrada__contenido blockquote {
  margin: 1.5rem 0 0;
  border-left: 3px solid var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue-soft) 60%, transparent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1rem 1.25rem;
  color: var(--foreground);
}

.entrada__contenido table {
  margin-top: 1.5rem;
  width: 100%;
  font-size: 0.9375rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entrada__contenido th,
.entrada__contenido td {
  border: 1px solid var(--border);
  padding: 0.625rem 0.875rem;
  text-align: left;
}

.entrada__contenido th {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  font-weight: 700;
}

.entrada__contenido iframe {
  max-width: 100%;
  margin-top: 1.5rem;
  border-radius: var(--radius-xl);
  border: 0;
}

.entrada__cta {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border-radius: var(--radius-2xl);
  background: color-mix(in srgb, var(--brand-blue-soft) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, transparent);
  padding: 1.5rem;
}

.entrada__cta-texto {
  font-size: 1rem;
  color: var(--foreground);
  max-width: 28rem;
}

.entrada__relacionadas {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}

.entrada__relacionadas-titulo {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.entrada__relacionadas .novedades__grid {
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-pagina {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
}

.login-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-fondo__gradiente {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 12% -10%, var(--brand-blue-soft) 0%, transparent 62%);
}

.login-fondo__orbe {
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-green) 24%, transparent) 0%, transparent 68%);
  filter: blur(40px);
}

.login-tarjeta {
  position: relative;
  width: 100%;
  max-width: 26rem;
  border-radius: var(--radius-3xl);
  background: var(--card);
  padding: 2.5rem 2rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-tarjeta);
}

@media (min-width: 640px) {
  .login-tarjeta { padding: 2.75rem 2.5rem; }
}

.login-logo {
  display: inline-flex;
}

.login-titulo {
  margin-top: 1.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-graphite);
}

.login-bajada {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.login-error {
  margin-top: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent);
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--destructive);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.campo label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.campo input {
  height: 3rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--input);
  background: var(--background);
  padding-inline: 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--foreground);
  transition: border-color 0.2s;
}

.campo input::placeholder {
  color: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
}

.campo input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent);
  outline-offset: 0;
  border-color: var(--brand-blue);
}

.login-boton {
  width: 100%;
  margin-top: 1.75rem;
  font-weight: 700;
}

.login-volver {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.login-volver:hover {
  color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   Panel de administración
   -------------------------------------------------------------------------- */
.panel {
  min-height: 100dvh;
  background: var(--background);
}

.panel-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: blur(12px);
}

.panel-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.5rem;
}

.panel-topbar__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-usuario {
  display: none;
  align-items: center;
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .panel-usuario { display: inline-flex; }
}

.panel-usuario__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-blue-fill);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.panel-usuario__nombre {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.panel-salir {
  font-weight: 700;
}

.panel-main {
  padding-block: 3rem 5rem;
}

.panel-titulo {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--brand-graphite);
}

.panel-titulo strong {
  color: var(--brand-blue);
}

.panel-bajada {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.panel-tarjetas {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .panel-tarjetas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .panel-tarjetas { grid-template-columns: repeat(3, 1fr); }
}

.panel-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.5rem;
}

.panel-tarjeta__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

.panel-tarjeta__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.panel-tarjeta__detalle {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.panel-tarjeta__pronto {
  margin-top: auto;
  align-self: flex-start;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand-orange) 18%, transparent);
  padding: 0.375rem 0.75rem;
  color: color-mix(in srgb, var(--brand-orange) 60%, var(--foreground));
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */

/* Ticker de cotizaciones */
@keyframes alfy-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.animate-marquee {
  animation: alfy-marquee 48s linear infinite;
}

.marquee-mask:hover .animate-marquee {
  animation-play-state: paused;
}

/* Fondo animado suave del hero */
@keyframes alfy-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

.animate-drift {
  animation: alfy-drift 18s ease-in-out infinite;
}

/* Figuras flotantes del CTA final */
@keyframes alfy-flotar {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(4%, -9%, 0) rotate(7deg); }
}

@keyframes alfy-girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Flash al actualizar un precio */
@keyframes alfy-flash {
  0% { background-color: color-mix(in srgb, var(--brand-green) 34%, transparent); }
  100% { background-color: transparent; }
}

.animate-flash {
  animation: alfy-flash 900ms ease-out;
}

/* La entrada animada se reserva para el hero, que se ve al cargar.
   El resto del contenido nunca depende de una animación para ser visible. */
@keyframes alfy-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.alfy-rise {
  animation: alfy-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .alfy-rise,
  .animate-marquee,
  .animate-drift,
  .animate-flash,
  .punto-vivo__ping {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   UX: transiciones de página, reveals al scrollear y aperturas animadas
   -------------------------------------------------------------------------- */

/* Transición entre páginas (View Transitions API — Chrome/Edge/Safari 18+).
   La página vieja se desvanece y la nueva entra con un deslizamiento sutil. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-salir 0.2s ease both;
}

::view-transition-new(root) {
  animation: vt-entrar 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-salir {
  to { opacity: 0; }
}

@keyframes vt-entrar {
  from { opacity: 0; transform: translateY(10px); }
}

/* Fallback para navegadores sin View Transitions (Firefox): fade de entrada */
@supports not (view-transition-name: none) {
  body {
    animation: vt-entrar 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Reveal al scrollear: el JS marca los elementos con .js-reveal y les agrega
   .is-visible cuando entran en pantalla (con delay escalonado por hermano). */
.js-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Menú móvil: desliza y desvanece al abrir/cerrar */
.navbar__movil {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.navbar__movil.is-abierto {
  opacity: 1;
  transform: none;
}

/* Acordeones (FAQs y grupos del menú móvil): el JS anima la altura del
   contenido; overflow oculto para que el recorte se vea limpio. */
.faq__respuesta,
.navbar__movil-grupo > ul {
  overflow: hidden;
}

/* Reproductor de tutoriales: fade al cambiar de video */
.tutoriales__player iframe {
  transition: opacity 0.28s ease;
}

/* Micro-interacciones: tarjetas que se elevan al pasar el mouse */
.operar-card,
.articulo,
.funcion__icono {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.operar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 22px 44px -18px color-mix(in srgb, var(--brand-ink) 28%, transparent);
}

.funcion:hover .funcion__icono {
  transform: scale(1.08) rotate(-4deg);
}

.btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  body {
    animation: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .navbar__movil {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tutoriales__player iframe,
  .operar-card,
  .articulo,
  .funcion__icono {
    transition: none;
  }
}

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgb(37 211 102 / 0.65);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
  animation: whatsapp-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.whatsapp-flotante svg {
  width: 1.75rem;
  height: 1.75rem;
}

.whatsapp-flotante:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 30px -8px rgb(37 211 102 / 0.75);
}

.whatsapp-flotante:active {
  transform: scale(0.96);
}

@keyframes whatsapp-entra {
  from { opacity: 0; transform: scale(0.4) translateY(20px); }
}

@media (min-width: 1024px) {
  .whatsapp-flotante {
    right: 1.75rem;
    bottom: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante {
    animation: none;
    transition: none;
  }
}

/* Tarjetas de acceso (página Nueva cuenta) */
.bloque__accesos {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .bloque__accesos { grid-template-columns: 1fr 1fr; }
}

.acceso {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.75rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta), var(--sombra-tarjeta);
}

.acceso__titulo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
}

.acceso__detalle {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  flex: 1;
}

.acceso__btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Grilla de personas (página Nuestro equipo) */
.bloque__personas {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .bloque__personas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .bloque__personas { grid-template-columns: repeat(3, 1fr); }
}

.persona {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.875rem 1.125rem;
}

.persona__nombre {
  font-weight: 700;
  color: var(--foreground);
}

.persona__detalle {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Página 404 */
.error404__codigo {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--brand-blue) 30%, transparent);
}

.error404__acciones {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Modal de apertura de cuenta */
.modal-cuenta {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(28rem, calc(100vw - 2rem));
  margin: auto;
}

.modal-cuenta::backdrop {
  background: rgb(22 24 26 / 0.55);
  backdrop-filter: blur(4px);
}

.modal-cuenta[open] {
  animation: modal-entra 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-cuenta[open]::backdrop {
  animation: modal-fondo 0.32s ease;
}

.modal-cuenta.is-cerrando {
  animation: modal-sale 0.2s ease both;
}

@keyframes modal-entra {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
}

@keyframes modal-sale {
  to { opacity: 0; transform: translateY(12px) scale(0.97); }
}

@keyframes modal-fondo {
  from { opacity: 0; }
}

.modal-cuenta__caja {
  position: relative;
  border-radius: var(--radius-3xl);
  background: var(--card);
  padding: 2rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 32px 64px -24px rgb(0 0 0 / 0.45);
}

.modal-cuenta__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--muted-foreground);
  transition: background-color 0.2s, color 0.2s;
}

.modal-cuenta__cerrar:hover {
  background: var(--muted);
  color: var(--foreground);
}

.modal-cuenta__titulo {
  padding-right: 2.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-graphite);
  text-wrap: balance;
}

.modal-cuenta__bajada {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.modal-cuenta__opciones {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-cuenta__opcion {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1rem 1.125rem;
  transition: border-color 0.2s, background-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-cuenta__opcion:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent);
  background: color-mix(in srgb, var(--brand-blue-soft) 60%, transparent);
  transform: translateY(-2px);
}

.modal-cuenta__opcion-icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

.modal-cuenta__opcion-textos {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.modal-cuenta__opcion-textos strong {
  color: var(--brand-blue-dark);
}

.modal-cuenta__opcion-textos small {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.modal-cuenta__opcion-flecha {
  flex: none;
  color: var(--brand-blue);
}

.modal-cuenta__nota {
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .modal-cuenta[open],
  .modal-cuenta[open]::backdrop,
  .modal-cuenta.is-cerrando {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Panel: gestor de novedades del blog
   -------------------------------------------------------------------------- */
.panel-tarjeta--link {
  display: block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}

.panel-tarjeta--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--ring-tarjeta), 0 18px 40px -16px color-mix(in srgb, var(--brand-ink) 30%, transparent);
}

.panel-tarjeta__ir {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--brand-blue);
}

.panel-blog__cabecera {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-aviso {
  margin-top: 1.25rem;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--brand-green) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-green-deep) 40%, transparent);
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  color: var(--brand-green-deep);
}

.panel-aviso--error {
  background: color-mix(in srgb, #e5484d 12%, transparent);
  border-color: color-mix(in srgb, #e5484d 45%, transparent);
  color: #c93b40;
}

.panel-buscador {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}

.panel-buscador__input {
  flex: 1;
  height: 2.75rem;
  border: 1.5px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  padding-inline: 1rem;
  font: inherit;
  color: var(--foreground);
}

.panel-buscador__input:focus {
  outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent);
  border-color: var(--brand-blue);
}

.panel-entradas {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel-entrada {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 0.875rem 1.125rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
}

.panel-entrada--vacia {
  justify-content: center;
  color: var(--muted-foreground);
  padding: 2rem;
}

.panel-entrada__imagen-wrap {
  flex: none;
  width: 4.5rem;
  height: 3.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
}

.panel-entrada__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-entrada__datos {
  flex: 1;
  min-width: 0;
}

.panel-entrada__titulo {
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-entrada__meta {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chip--celeste {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

.panel-entrada__acciones {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.panel-entrada__borrar {
  color: #c93b40;
}

.panel-entrada__borrar:hover {
  background: color-mix(in srgb, #e5484d 12%, transparent);
}

@media (max-width: 640px) {
  .panel-entrada { flex-wrap: wrap; }
  .panel-entrada__acciones { width: 100%; justify-content: flex-end; }
}

/* Editor de entradas */
.editor {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .editor { grid-template-columns: 1fr 20rem; }
}

.editor__campo {
  display: block;
}

.editor__campo + .editor__campo {
  margin-top: 1rem;
}

.editor__etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-graphite);
}

.editor__input {
  width: 100%;
  border: 1.5px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  padding: 0.625rem 0.875rem;
  font: inherit;
  color: var(--foreground);
}

.editor__input:focus {
  outline: 3px solid color-mix(in srgb, var(--ring) 35%, transparent);
  border-color: var(--brand-blue);
}

.editor__input--titulo {
  font-size: 1.375rem;
  font-weight: 700;
}

.editor__quill {
  margin-top: 1rem;
}

.editor__panel {
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.25rem;
  box-shadow: 0 0 0 1px var(--ring-tarjeta);
}

.editor__panel + .editor__panel {
  margin-top: 1rem;
}

.editor__panel-titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-graphite);
  margin-bottom: 1rem;
}

.editor__portada {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
}

.editor__portada.is-oculta {
  display: none;
}

.editor__subir {
  width: 100%;
  cursor: pointer;
  margin-bottom: 0.625rem;
}

.editor__acciones {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor__guardar {
  width: 100%;
}

/* Quill adaptado al design system (claro y oscuro) */
.editor__quill .ql-toolbar {
  border: 1.5px solid var(--input);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--card);
}

.editor__quill .ql-container {
  border: 1.5px solid var(--input);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--background);
  font-family: inherit;
  font-size: 1rem;
}

.editor__quill .ql-editor {
  min-height: 24rem;
  color: var(--foreground);
}

.editor__quill .ql-editor img {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.dark .editor__quill .ql-toolbar .ql-stroke { stroke: #cfd6da; }
.dark .editor__quill .ql-toolbar .ql-fill { fill: #cfd6da; }
.dark .editor__quill .ql-toolbar .ql-picker-label { color: #cfd6da; }
.dark .editor__quill .ql-toolbar .ql-picker-options { background: var(--card); }
.dark .editor__quill .ql-editor.ql-blank::before { color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Página Productores
   -------------------------------------------------------------------------- */

/* Botón dentro de una tarjeta (links de Alfy Nexus) */
.operar-card__btn {
  margin-top: 1.5rem;
}

/* Cierre con stats + CTA */
.prod-cierre {
  background: color-mix(in srgb, var(--brand-blue-soft) 50%, transparent);
}

.prod-cierre__cta {
  margin-top: 2.5rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Paginación (páginas de autor del blog)
   -------------------------------------------------------------------------- */
.paginacion {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.paginacion__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.875rem;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.paginacion__link:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue-dark);
}

.paginacion__link.is-active {
  background: var(--brand-blue-fill);
  border-color: var(--brand-blue-fill);
  color: #fff;
}

.paginacion__prev {
  transform: rotate(180deg);
}