/* AIdo — estilos de aido.com.ar y /gastos.
   Dos marcas que no se mezclan dentro de una sección:
   - AIdo (marca madre): azul. Header, footer y toda la home.
   - Asistente Financiero: verde profundo y dorado. Manda en /gastos. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/figtree-latin-wght-normal.4ba7d3d0.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca madre */
  --azul: #002fb3;
  --azul-hover: #00259a;
  --azul-suave: #e8eefb;
  --arena: #c8d5da;
  --gris: #343434;
  --negro: #000;
  --blanco: #fff;
  --borde: #d8dfe3;

  /* Asistente Financiero */
  --verde: #0b2922;
  --esmeralda: #0d5e51;
  --noche: #02132c;
  --dorado: #e2be59;
  --dorado-oscuro: #9a7e4e;
  /* Hover del botón dorado: #9a7e4e con texto verde da 4.0:1 y no llega a AA.
     Este da 6.6:1; el dorado oscuro queda para sombras. */
  --dorado-hover: #c9a447;
  --plata: #d8ddd9;
  --gris-verde: #f4f6f5;

  --whatsapp: #25d366;

  --fuente: "Forma DJR Deck", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sombra: 0 4px 24px rgba(0, 47, 179, 0.08);
  --sombra-verde: 0 4px 24px rgba(11, 41, 34, 0.08);
  --radio: 12px;
  --radio-grande: 24px;
  --alto-header: 72px;
  --seccion: 56px;
}

@media (min-width: 768px) {
  :root {
    --seccion: 96px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris);
  background: var(--blanco);
  padding-top: var(--alto-header);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  color: var(--negro);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

h3 {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

p + p {
  margin-top: 16px;
}

.bajada {
  font-size: 17px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .bajada {
    font-size: 20px;
  }
}

.icono {
  width: 24px;
  height: 24px;
  flex: none;
}

[id] {
  scroll-margin-top: calc(var(--alto-header) + 16px);
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero--azul :focus-visible,
.seccion--azul :focus-visible,
.footer :focus-visible {
  outline-color: var(--blanco);
}

.hero--verde :focus-visible,
.seccion--verde :focus-visible {
  outline-color: var(--dorado);
}

.pagina-gastos :focus-visible {
  outline-color: var(--verde);
}

.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--azul);
  color: var(--blanco);
  font-weight: 600;
  border-radius: var(--radio);
}

.saltar:focus {
  top: 12px;
}

/* ---------- Layout ---------- */

.contenedor {
  width: 100%;
  max-width: calc(1200px + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.seccion {
  padding: var(--seccion) 0;
}

.seccion--arena {
  background: var(--arena);
}

.seccion--gris {
  background: var(--gris-verde);
}

.seccion--azul {
  background: var(--azul);
  color: var(--arena);
}

.seccion--verde {
  background: var(--verde);
  color: var(--plata);
}

.seccion--azul h2,
.seccion--verde h2 {
  color: var(--blanco);
}

.centrado {
  text-align: center;
}

h2.centrado {
  margin-bottom: 48px;
}

.texto-angosto {
  max-width: calc(680px + 48px);
  text-align: center;
}

.texto-angosto--izq {
  margin-left: 0;
  padding: 0;
  text-align: left;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

.btn .icono {
  width: 20px;
  height: 20px;
}

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

.btn--azul {
  background: var(--azul);
  color: var(--blanco);
}

.btn--azul:hover {
  background: var(--azul-hover);
}

/* Primario sobre fondo azul: un botón azul no se vería. */
.btn--blanco {
  background: var(--blanco);
  color: var(--azul);
}

.btn--blanco:hover {
  background: var(--azul-suave);
}

.btn--dorado {
  background: var(--dorado);
  color: var(--verde);
}

.btn--dorado:hover {
  background: var(--dorado-hover);
  box-shadow: 0 6px 18px rgba(154, 126, 78, 0.35);
}

.btn--borde {
  border-color: var(--azul);
  color: var(--azul);
}

.btn--borde:hover {
  background: var(--azul-suave);
}

/* Secundario sobre fondo azul. */
.btn--borde-claro {
  border-color: var(--blanco);
  color: var(--blanco);
}

.btn--borde-claro:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn--chico {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.btn--grande {
  min-height: 60px;
  padding: 0 40px;
  font-size: 19px;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .btn:not(.btn--chico) {
    width: 100%;
  }
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--alto-header);
  background: var(--blanco);
  transition: box-shadow 0.2s;
}

.header--scroll {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.header__logo {
  display: block;
  flex: none;
  /* margen libre alrededor del logo */
  padding: 4px 0;
}

.header__logo .logo,
.header__logo .logo img {
  height: 28px;
  width: auto;
}

.header__cta {
  margin-left: auto;
}

.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--negro);
  cursor: pointer;
}

.nav__cerrar,
.header--abierto .nav__abrir {
  display: none;
}

.header--abierto .nav__cerrar {
  display: block;
}

.nav {
  display: none;
  position: absolute;
  top: var(--alto-header);
  left: 0;
  right: 0;
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.header--abierto .nav {
  display: block;
}

.nav__lista a {
  display: block;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 500;
  color: var(--gris);
  text-decoration: none;
}

.nav__lista a:hover {
  color: var(--azul);
}

@media (min-width: 768px) {
  .header__logo .logo,
  .header__logo .logo img {
    height: 36px;
  }
}

/* A partir de este ancho entran en un renglón los cinco links más el botón, en las
   dos páginas con menú. Por debajo queda la hamburguesa. */
@media (min-width: 1000px) {
  .nav__toggle {
    display: none;
  }

  .nav {
    display: block;
    position: static;
    margin-left: auto;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .nav__lista {
    display: flex;
    gap: 32px;
  }

  .nav__lista a {
    padding: 8px 0;
    font-size: 16px;
    white-space: nowrap;
  }

  .nav + .header__cta {
    margin-left: 16px;
  }
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 48px 0 56px;
}

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero__nota {
  margin-top: 16px;
  font-size: 14px;
}

.hero__visual {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hero--azul {
  background: var(--azul);
  color: var(--arena);
}

.hero--azul h1 {
  color: var(--blanco);
}

.hero__contraste {
  display: block;
  color: var(--arena);
}

.hero .bajada {
  margin-top: 24px;
}

/* Hero sin imagen (home): es la descripción general de la empresa, así que va
   solo el texto. Centrado desde tablet; en celular queda alineado a la izquierda. */
.hero--solo h1 {
  max-width: 880px;
}

.hero--solo .bajada {
  max-width: 680px;
}

@media (min-width: 768px) {
  .hero--solo {
    text-align: center;
  }

  .hero--solo h1,
  .hero--solo .bajada {
    margin-right: auto;
    margin-left: auto;
  }

  .hero--solo .botones {
    justify-content: center;
  }
}

.hero--verde {
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(13, 94, 81, 0.55), transparent 70%),
    var(--verde);
  color: var(--plata);
}

.hero--verde h1 {
  color: var(--blanco);
}

.sello {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--plata);
}

.sello__logo,
.sello__logo img {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radio);
}

@media (min-width: 768px) {
  .hero {
    padding: 96px 0;
  }
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 3fr 2fr;
    gap: 64px;
  }
}

/* ---------- Marco de celular ---------- */

.celular {
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  background: var(--negro);
  border: 8px solid var(--gris);
  border-radius: 32px;
}

.celular__pantalla,
.celular__pantalla img {
  width: 100%;
}

.celular--rotado {
  transform: rotate(-3deg);
  box-shadow: 0 24px 48px rgba(0, 20, 80, 0.3);
}

/* Sobre verde, sin marco claro. */
.celular--oscuro {
  max-width: 280px;
  border-color: var(--noche);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

@media (min-width: 960px) {
  .celular--rotado,
  .celular--oscuro {
    max-width: 300px;
  }
}

/* ---------- Dashboards y BI: home, /bi/ y la página de cada ejemplo ---------- */

.hero__visual .ventana {
  max-width: 560px;
  box-shadow: 0 24px 64px rgba(0, 20, 80, 0.35);
}

/* Home: los dashboards van en una fila que se desliza hacia los costados, en
   todos los tamaños, y sin fin: main.js agrega una copia de las tarjetas antes y
   otra después, y al terminar cada scroll vuelve a la del medio. Sin JavaScript
   queda una fila común que se desliza. */
.carrusel__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.carrusel__flechas {
  display: none;
  flex: none;
  gap: 8px;
}

.carrusel__flecha {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--blanco);
  border: 2px solid var(--azul);
  border-radius: 50%;
  color: var(--azul);
  cursor: pointer;
  transition: background-color 0.15s;
}

.carrusel__flecha:hover {
  background: var(--azul-suave);
}

.rubros {
  display: flex;
  gap: 16px;
  margin: 40px -24px 12px;
  padding: 4px 24px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scrollbar-width: none;
}

.rubros::-webkit-scrollbar {
  display: none;
}

.rubro {
  position: relative;
  display: flex;
  flex: 0 0 82%;
  flex-direction: column;
  padding: 12px 12px 20px;
  scroll-snap-align: start;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}

.rubro:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 47, 179, 0.16);
}

.rubro:focus-within {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

.rubro__captura {
  overflow: hidden;
  background: var(--azul-suave);
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.rubro__captura img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

.rubro h3 {
  margin: 16px 8px 2px;
  font-size: 20px;
}

.rubro p {
  margin: 0 8px;
}

/* Toda la tarjeta es un link: el del título se estira sobre ella. */
.rubro__enlace {
  color: inherit;
  text-decoration: none;
}

.rubro__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
}

.rubro__enlace:focus-visible {
  outline: none;
}

.rubro__mas {
  margin: 12px 8px 0;
  color: var(--azul);
  font-weight: 600;
}

.rubro:hover .rubro__mas {
  text-decoration: underline;
}

/* Desde tablet se ven dos tarjetas y un poco de la siguiente; en pantallas
   grandes, tres. Ese pedacito avisa que la fila sigue. */
@media (min-width: 768px) {
  .carrusel--listo .carrusel__flechas {
    display: flex;
  }

  .rubros {
    gap: 24px;
    margin: 48px -12px 12px;
    padding: 4px 12px 28px;
    scroll-padding-inline: 12px;
  }

  .rubro {
    flex-basis: calc((100% - 48px) / 2.3);
  }
}

@media (min-width: 1100px) {
  .rubro {
    flex-basis: calc((100% - 72px) / 3.3);
  }
}

/* /bi/: un bloque por ejemplo, con la captura a un lado y el texto al otro,
   alternando. */
.rubro-bloque {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--borde);
}

/* Sin esto, una columna de grilla no se achica por debajo de su contenido. */
.rubro-bloque > * {
  min-width: 0;
}

/* El primero va pegado al título de la sección, sin línea arriba. */
.rubro-bloque:first-of-type {
  padding-top: 24px;
  border-top: 0;
}

.rubro-bloque h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
}

.antetitulo {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

.rubro-bloque__texto > p {
  margin-top: 12px;
}

.rubro-bloque .checks {
  margin-top: 20px;
}

/* Doble clase: tiene que ganarle al dorado de .checks, que se define más abajo. */
.checks.checks--azul .icono {
  color: var(--azul);
}

.hallazgo {
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--azul-suave);
  border-radius: var(--radio);
}

.hallazgo figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul);
}

.hallazgo figcaption .icono {
  width: 18px;
  height: 18px;
}

.hallazgo blockquote {
  margin: 8px 0 0;
}

/* La captura de escritorio con la de celular montada en la esquina. */
.muestra {
  position: relative;
  display: block;
  padding: 0 7% 9% 0;
  color: inherit;
  text-decoration: none;
}

.muestra .ventana {
  transition: transform 0.15s;
}

.muestra:hover .ventana {
  transform: translateY(-2px);
}

.muestra .muestra__celular {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  max-width: none;
  border-width: 5px;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 20, 80, 0.3);
}

/* ---------- /forecast/: gráficos de ejemplo ----------
   Los textos son HTML; en SVG van solo las líneas, que se estiran con la caja. */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.grafico {
  --alerta: #b3261e;
  --tinta-suave: #5b6474;
  width: 100%;
  margin: 0;
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 16px 48px rgba(0, 47, 179, 0.12);
  color: var(--gris);
  text-align: left;
}

.rubro-bloque__grafico {
  min-width: 0;
}

.grafico__cabeza {
  display: grid;
  gap: 2px;
}

.grafico__cabeza strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--negro);
}

.grafico__cabeza span,
.grafico__pie,
.grafico__ejetitulo {
  font-size: 13px;
  color: var(--tinta-suave);
}

.grafico__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 13px;
}

.grafico__leyenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ley {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--azul);
}

.ley--guion {
  background: repeating-linear-gradient(90deg, var(--azul) 0 5px, transparent 5px 8px);
}

.ley--banda {
  height: 10px;
  background: var(--azul-suave);
  border-radius: 2px;
}

.ley--barra {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ley--alerta {
  background: var(--alerta);
}

.ley--gris {
  background: repeating-linear-gradient(90deg, var(--gris) 0 5px, transparent 5px 8px);
}

.ley--marca {
  width: 2px;
  height: 14px;
  margin-right: 8px;
  background: var(--gris);
  vertical-align: -2px;
}

/* Líneas: ventas y pronóstico */
.grafico__area {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 16px;
}

.grafico__ejey {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1;
  color: var(--tinta-suave);
  text-align: right;
}

.grafico__lienzo {
  position: relative;
  aspect-ratio: 16 / 9;
}

.grafico__lienzo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.grafico__lienzo svg * {
  vector-effect: non-scaling-stroke;
}

.g-grilla {
  stroke: var(--borde);
  stroke-width: 1;
}

.g-hoy {
  stroke: var(--tinta-suave);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.g-banda {
  fill: var(--azul-suave);
}

.g-linea {
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-linea--guion {
  stroke-dasharray: 5 4;
}

.grafico__punto {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--azul);
  border: 2px solid var(--blanco);
  border-radius: 50%;
}

.grafico__nota {
  position: absolute;
  max-width: 46%;
  padding: 4px 8px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--negro);
  transform: translateY(-100%);
}

.grafico__ejex {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0 28px;
  font-size: 12px;
  color: var(--tinta-suave);
}

.grafico__ejex span[style] {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--negro);
}

/* Barras: semanas de stock */
.barras-stock {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.barras-stock li {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.barras-stock__nombre {
  line-height: 1.25;
  color: var(--negro);
}

.barras-stock__nombre em {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--alerta);
}

.barras-stock__pista {
  position: relative;
  height: 14px;
  background: var(--azul-suave);
  border-radius: 0 4px 4px 0;
}

.barras-stock__pista i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  background: var(--azul);
  border-radius: 0 4px 4px 0;
}

.barras-stock .es-alerta .barras-stock__pista i {
  background: var(--alerta);
}

.barras-stock__pista::after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(var(--reposicion) * 100%);
  width: 2px;
  background: var(--gris);
}

.barras-stock__valor {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--negro);
}

.grafico__pie {
  margin-top: 16px;
}

/* Columnas: saldo de caja */
.columnas {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 220px;
  margin-top: 20px;
  padding-bottom: 22px;
}

.columnas__col {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.columnas__col i {
  width: 100%;
  max-width: 28px;
  height: calc(var(--v) * 100%);
  background: var(--azul);
  border-radius: 4px 4px 0 0;
}

.columnas__col.es-alerta i {
  background: var(--alerta);
}

/* El número va sobre fondo blanco y por encima de la línea del mínimo, para que
   la línea no lo tache. */
.columnas__col b {
  position: relative;
  z-index: 1;
  margin-bottom: 3px;
  padding: 0 2px;
  background: var(--blanco);
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--negro);
}

.columnas__col span {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  color: var(--tinta-suave);
}

/* La línea del mínimo cruza todas las columnas; se explica en la leyenda. */
.columnas::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(22px + var(--minimo) * (100% - 22px));
  border-top: 2px dashed var(--gris);
}

.grafico__ejetitulo {
  margin-top: 6px;
  text-align: center;
}

.hero__visual .grafico,
.hero__visual .maqueta {
  max-width: 520px;
  box-shadow: 0 24px 64px rgba(0, 20, 80, 0.35);
}

/* Con el hero apilado, la ilustración quedaría repetida arriba de los ejemplos. */
@media (max-width: 959px) {
  .pagina-forecast .hero__visual,
  .pagina-modelos .hero__visual {
    display: none;
  }

  .pagina-forecast .hero,
  .pagina-modelos .hero {
    min-height: 0;
  }
}

/* ---------- /modelos/: casos e ilustraciones ---------- */

.casos {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.caso {
  --tinta-suave: #5b6474;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  overflow: hidden;
}

.caso > * {
  min-width: 0;
}

.caso__visual {
  display: grid;
  align-content: center;
  padding: 20px;
  background: var(--azul-suave);
}

/* Las fotos van de borde a borde, sin el marco celeste. */
.caso__visual:has(> .foto-ia) {
  padding: 0;
}

.caso .maqueta {
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 47, 179, 0.08);
}

.caso__texto {
  padding: 24px;
}

.caso h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
}

.caso__texto > p {
  margin-top: 10px;
}

.caso__mas {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}

.caso__mas:hover {
  text-decoration: underline;
}

.nota {
  margin-top: 20px;
  font-size: 14px;
  color: #5b6474;
}

/* En tablet, cada tarjeta va acostada: ilustración a la izquierda y texto al lado. */
@media (min-width: 700px) and (max-width: 1099px) {
  .caso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .caso__texto {
    align-self: center;
  }
}

@media (min-width: 1100px) {
  .casos--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Cada tarjeta ocupa dos filas de la grilla (ilustración y texto), así los
     textos de una misma fila arrancan a la misma altura. */
  .caso {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Foto con los recuadros que marca un modelo de visión */
.foto-ia {
  width: 100%;
  margin: 0;
  background: #0b1220;
}

.foto-ia__lienzo {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.foto-ia picture,
.foto-ia img {
  display: block;
  width: 100%;
  height: auto;
}

.marco {
  position: absolute;
  border: 2px solid var(--c);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* El z-index deja las etiquetas por encima de los bordes de los demás recuadros. */
.marco b {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  padding: 1px 5px 2px;
  background: var(--c);
  border-radius: 3px 0;
  font-size: clamp(9px, 2.9cqw, 13px);
  font-weight: 700;
  line-height: 1.3;
  color: #0b1220;
  white-space: nowrap;
}

.marco.es-abajo b {
  top: auto;
  bottom: -2px;
  border-radius: 0 3px;
}

.marco.es-izq b {
  right: -2px;
  left: auto;
}

.marco i {
  font-style: normal;
  font-weight: 600;
}

/* En las fotos chicas no entra el porcentaje de confianza. */
@container (max-width: 440px) {
  .marco i {
    display: none;
  }
}

.foto-ia__dato {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blanco);
}

.foto-ia__dato::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: #6ef08c;
  border-radius: 50%;
}

/* Hero de /modelos/: la foto con recuadros y, encima, el aviso de un modelo predictivo */
.hero__visual--ia {
  position: relative;
}

.hero__visual--ia .foto-ia {
  border-radius: var(--radio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.hero__aviso {
  position: absolute;
  right: -12px;
  bottom: 56px;
  display: grid;
  gap: 1px;
  padding: 10px 14px;
  background: var(--blanco);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  line-height: 1.35;
  color: var(--gris);
  text-align: left;
}

.hero__aviso span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

.hero__aviso b {
  font-size: 14px;
  color: var(--negro);
}

.maqueta {
  --alerta: #b3261e;
  --tinta-suave: #5b6474;
  width: 100%;
  margin: 0;
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 16px 48px rgba(0, 47, 179, 0.12);
  color: var(--gris);
  text-align: left;
}

.maqueta__cabeza {
  display: grid;
  gap: 2px;
  margin-bottom: 16px;
}

.maqueta__cabeza strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--negro);
}

.maqueta__cabeza span {
  font-size: 13px;
  color: var(--tinta-suave);
}

.maqueta__pie {
  margin-top: 14px;
  font-size: 13px;
  color: var(--tinta-suave);
}

/* Etiqueta: color y además palabra o símbolo. */
.nivel {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.nivel--alto {
  background: #fde8e6;
  color: var(--alerta);
}

.nivel--medio {
  background: #fff1d6;
  color: #7a4b00;
}

.nivel--bajo {
  background: #eef1f4;
  color: var(--tinta-suave);
}

.nivel--azul {
  background: #dfe7fa;
  color: var(--azul);
}

.nivel--bien {
  background: #dff5e8;
  color: #136c3d;
}

/* Lista de fichas: clientes con riesgo, sugerencias, movimientos */
.fichas {
  display: grid;
  gap: 10px;
}

.fichas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f5f7fc;
  border-radius: 8px;
}

.fichas b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--negro);
}

.fichas div span {
  font-size: 13px;
  color: var(--tinta-suave);
}

/* Ausentismo: una columna por día, con el número arriba */
.dias {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.dias li {
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 4px;
  height: 128px;
  font-size: 13px;
}

.dias b {
  font-weight: 600;
  color: var(--negro);
}

.dias i {
  width: 100%;
  height: calc(var(--v) * 76px);
  background: #aebfee;
  border-radius: 4px 4px 0 0;
}

.dias span {
  color: var(--tinta-suave);
}

.dias .es-alerta b {
  color: var(--alerta);
}

.dias .es-alerta i {
  background: var(--alerta);
}

/* Cobranzas: una barra de riesgo por factura */
.temas {
  display: grid;
  gap: 14px;
  font-size: 14px;
}

.temas li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 12px;
}

.temas__nombre b {
  font-weight: 600;
  color: var(--negro);
}

.temas__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--negro);
}

.temas__pista {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--azul-suave);
  border-radius: 4px;
}

.temas__pista i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  background: var(--azul);
  border-radius: 4px;
}

.temas .es-alto .temas__valor {
  color: var(--alerta);
}

.temas .es-alto .temas__pista i {
  background: var(--alerta);
}

.temas .es-medio .temas__pista i {
  background: #c98a00;
}

/* Lenguaje: mensajes con las etiquetas que les pone el modelo */
.mensajes {
  display: grid;
  gap: 10px;
}

.mensajes li {
  padding: 10px 12px;
  background: #f5f7fc;
  border-radius: 10px 10px 10px 2px;
}

.mensajes p {
  font-size: 14px;
  color: var(--negro);
}

.mensajes div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Qué más puede hacer la IA: otros casos, agrupados por rubro */
.familias {
  display: grid;
  gap: 24px;
  margin: 48px 0 32px;
}

.familia {
  padding: 24px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.familia h3 {
  margin: 16px 0 12px;
  font-size: 20px;
}

.familia ul {
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.familia ul li {
  position: relative;
  padding-left: 16px;
}

.familia ul li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--azul);
  border-radius: 50%;
}

.seccion--suave .otro-rubro {
  background: var(--blanco);
}

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

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

/* En /forecast/, el gráfico alterna de lado como las capturas de /bi/. */
@media (min-width: 960px) {
  .rubro-bloque:nth-of-type(even) .rubro-bloque__grafico {
    order: 2;
  }
}

.otro-rubro {
  padding: 24px;
  background: var(--azul-suave);
  border-radius: var(--radio);
}

.otro-rubro a {
  color: var(--azul);
  font-weight: 600;
}

.items--seis {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .rubro-bloque {
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    padding: 72px 0;
  }

  .rubro-bloque:nth-of-type(even) {
    grid-template-columns: 1fr 1.25fr;
  }

  .rubro-bloque:nth-of-type(even) .muestra {
    order: 2;
  }
}

/* La página de cada ejemplo: una barra propia y, debajo, el dashboard en un iframe
   que ocupa el resto de la pantalla. */
.pagina-demo {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  overflow: hidden;
}

.demo-barra {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.demo-barra__volver {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}

.demo-barra__volver .icono {
  width: 20px;
  height: 20px;
}

.demo-barra__texto {
  flex: 1;
  min-width: 0;
  font-size: 15px;
}

.demo-barra__texto strong {
  color: var(--negro);
}

.demo-marco {
  flex: 1;
  min-height: 0;
}

.demo-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .demo-barra {
    gap: 8px;
    padding: 8px 12px;
  }

  .demo-barra__texto {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .demo-barra__largo {
    display: none;
  }

  /* En la barra, el botón va sin ícono para que entre todo en un renglón. */
  .demo-barra .btn .icono {
    display: none;
  }
}

/* ---------- Home: franja y bloque destacado del asistente ----------
   Los únicos lugares de la home con el verde y el dorado del producto: son una
   cita visual de /gastos. */

.franja {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 24px;
  background: var(--verde);
  border-bottom: 1px solid rgba(216, 221, 217, 0.12);
  color: var(--plata);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s;
}

.franja b,
.franja em {
  color: var(--dorado);
  font-style: normal;
}

.franja em {
  font-weight: 600;
}

/* Sobre esmeralda, el dorado original da 4.3:1; este da 4.7:1. */
.franja:hover {
  background: var(--esmeralda);
}

.franja:hover b,
.franja:hover em {
  color: #e8c86a;
}

.franja:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: -6px;
}

.franja__largo {
  display: none;
}

/* En mobile el texto corto entra en una línea, dentro de los 64px de alto. */
@media (max-width: 767px) {
  .franja {
    padding-inline: 16px;
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  .franja__largo {
    display: inline;
  }

  .franja__corto {
    display: none;
  }
}

.destacado {
  padding: var(--seccion) 0;
  background: var(--verde);
  color: var(--plata);
}

.destacado h2 {
  color: var(--blanco);
}

.destacado__corte {
  display: block;
}

.destacado :focus-visible {
  outline-color: var(--dorado);
}

.destacado__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.destacado__visual {
  display: flex;
  justify-content: center;
}

.sello--chico .sello__logo,
.sello--chico .sello__logo img {
  width: 48px;
  height: 48px;
}

.checks {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.checks li {
  display: flex;
  gap: 12px;
}

.checks .icono {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--dorado);
  stroke-width: 3;
}

.btn--borde-dorado {
  border-color: var(--dorado);
  color: var(--dorado);
}

.btn--borde-dorado:hover {
  background: rgba(226, 190, 89, 0.12);
}

@media (min-width: 960px) {
  .destacado__grid {
    grid-template-columns: 55fr 45fr;
    gap: 64px;
  }
}

/* ---------- Home: qué hacemos ---------- */

.ofertas {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}

.oferta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--blanco);
  border: 2px solid transparent;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}

.oferta--producto {
  border-color: var(--azul);
}

.oferta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 47, 179, 0.16);
}

.oferta:focus-within {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

/* Cada tarjeta es un link entero: el del título se estira sobre ella. */
.oferta__enlace {
  color: inherit;
  text-decoration: none;
}

.oferta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
}

.oferta__enlace:focus-visible {
  outline: none;
}

.oferta__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.oferta__logo,
.oferta__logo img {
  width: 56px;
  height: 56px;
  border-radius: var(--radio);
}

/* Más específico que .item__icono, que se define después con 48px. */
.oferta .oferta__icono {
  width: 56px;
  height: 56px;
}

.oferta__icono .icono {
  width: 28px;
  height: 28px;
}

.etiqueta {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--azul-suave);
  color: var(--azul);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.oferta h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.oferta__lista {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 15px;
}

.oferta__lista li {
  position: relative;
  padding-left: 16px;
}

.oferta__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azul);
}

.oferta__mas {
  margin-top: auto;
  padding-top: 16px;
  color: var(--azul);
  font-weight: 600;
}

.oferta:hover .oferta__mas {
  text-decoration: underline;
}

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

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

/* ---------- Home: cómo trabajamos ---------- */

.seccion--suave {
  background: #f5f7fc;
}

.proceso {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}

.proceso__paso {
  padding-top: 20px;
  border-top: 2px solid var(--azul);
}

.proceso__numero {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--azul);
}

.proceso__paso h3 {
  margin: 8px 0;
  font-size: 20px;
}

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

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

.botones--centro {
  justify-content: center;
}

/* ---------- Items con ícono ("Y del otro lado, control" en /gastos) ---------- */

.items {
  display: grid;
  gap: 32px;
  margin: 48px 0;
}

.item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.item h3 {
  font-size: 20px;
}

.item p {
  margin-top: 4px;
}

.item__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radio);
  background: var(--azul-suave);
  color: var(--azul);
}

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

/* ---------- /gastos ---------- */

.circulo {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--dorado);
}

.circulo .icono {
  width: 26px;
  height: 26px;
}

.video {
  padding-top: 0;
}

.video__marco {
  position: relative;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--negro);
  border: 8px solid var(--noche);
  border-radius: var(--radio-grande);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.video__medio {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.video__sonido {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--dorado);
  border-radius: 999px;
  background: rgba(11, 41, 34, 0.88);
  color: var(--blanco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.video__sonido .icono {
  width: 18px;
  height: 18px;
  color: var(--dorado);
}

.sonido__on,
.video__sonido[aria-pressed="true"] .sonido__off {
  display: none;
}

.video__sonido[aria-pressed="true"] .sonido__on {
  display: block;
}

@media (min-width: 768px) {
  .video__marco {
    max-width: 340px;
  }
}

.formas {
  display: grid;
  gap: 24px;
}

.tarjeta {
  padding: 32px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-verde);
}

.tarjeta h3 {
  margin: 20px 0 8px;
}

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

/* Cargalo como te quede cómodo: las cuatro formas y, al lado, el video de los
   3 segundos. */
.formas-video {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .formas-video {
    grid-template-columns: 1.7fr 1fr;
  }
}

/* Y del otro lado, control: capturas del informe de ejemplo.
   Mobile: escritorio, los dos celulares lado a lado, escritorio.
   Desktop: dos filas que alternan ventana + celular y celular + ventana; con
   tres columnas (1 / 1.4 / 1) cada ventana ocupa 2.4 y cada celular 1. */

.capturas-informe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 16px;
  align-items: center;
  margin-top: 16px;
}

.captura--ventana,
.capturas-informe__nota {
  grid-column: 1 / -1;
}

.captura {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
}

.captura figcaption {
  max-width: 44ch;
  font-size: 15px;
  text-align: center;
  color: var(--gris);
}

.captura .celular {
  max-width: 260px;
}

.captura--celular figcaption {
  font-size: 14px;
}

.ventana {
  width: 100%;
  overflow: hidden;
  background: #071612;
  border-radius: var(--radio);
  box-shadow: 0 24px 64px rgba(11, 41, 34, 0.25);
}

.ventana img {
  width: 100%;
}

.ventana__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: #1a2a26;
}

.ventana__barra i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(216, 221, 217, 0.35);
}

.ventana__barra span {
  min-width: 0;
  margin-left: 10px;
  overflow: hidden;
  font-size: 13px;
  color: var(--plata);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Variante clara, para las capturas de dashboards sobre los colores de la marca madre. */
.ventana--clara {
  background: var(--blanco);
  border: 1px solid var(--borde);
  box-shadow: 0 16px 48px rgba(0, 47, 179, 0.16);
}

.ventana--clara .ventana__barra {
  background: var(--azul-suave);
}

.ventana--clara .ventana__barra i {
  background: rgba(0, 47, 179, 0.28);
}

.ventana--clara .ventana__barra span {
  color: var(--gris);
}

.capturas-informe__nota {
  font-size: 14px;
  text-align: center;
  color: var(--gris);
}

@media (min-width: 900px) {
  .capturas-informe {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 56px 48px;
  }

  .capturas-informe > :nth-child(1) {
    grid-column: 1 / 3;
  }

  .capturas-informe > :nth-child(2) {
    grid-column: 3;
  }

  .capturas-informe > :nth-child(3) {
    grid-column: 1;
  }

  .capturas-informe > :nth-child(4) {
    grid-column: 2 / 4;
  }

  .captura--celular figcaption {
    font-size: 15px;
  }
}

/* Precio */

.precio {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  background: var(--blanco);
  border: 2px solid var(--dorado);
  border-radius: var(--radio);
  box-shadow: var(--sombra-verde);
}

.precio__titulo {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
}

.precio__monto {
  margin-top: 16px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--verde);
}

.precio__monto span {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
}

.precio__unidad {
  margin-top: 8px;
  font-weight: 700;
  color: var(--gris);
}

.precio__lista {
  margin: 32px 0;
  text-align: left;
}

.precio__lista li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
}

.precio__lista .icono {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--dorado);
  stroke-width: 3;
}

.precio__btn {
  width: 100%;
}

.precio__nota {
  margin-top: 16px;
  font-size: 14px;
  font-style: italic;
  color: var(--gris);
}

@media (min-width: 768px) {
  .precio {
    padding: 48px 40px;
  }

  .precio__monto {
    font-size: 72px;
  }
}

/* Cómo empezás: vertical en mobile, horizontal en desktop */

.timeline {
  display: grid;
  gap: 32px;
  max-width: 480px;
  margin: 0 auto;
}

.timeline__paso {
  position: relative;
  padding-left: 80px;
}

.timeline__paso .circulo {
  position: absolute;
  left: 0;
  top: 0;
}

.timeline__paso:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: -24px;
  width: 2px;
  background: var(--dorado-oscuro);
  opacity: 0.5;
}

.timeline__paso h3 {
  padding-top: 12px;
  margin-bottom: 8px;
}

.circulo--numero {
  font-size: 22px;
  font-weight: 700;
}

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .timeline__paso {
    padding-left: 0;
    text-align: center;
  }

  .timeline__paso .circulo {
    position: static;
    margin: 0 auto 16px;
  }

  .timeline__paso:not(:last-child)::before {
    left: calc(50% + 40px);
    top: 27px;
    bottom: auto;
    width: calc(100% - 48px);
    height: 2px;
  }

  .timeline__paso h3 {
    padding-top: 0;
  }
}

/* Preguntas frecuentes */

.faq {
  text-align: left;
  border-top: 1px solid var(--borde);
}

.faq__item {
  border-bottom: 1px solid var(--borde);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--negro);
  cursor: pointer;
  list-style: none;
}

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

.faq__flecha {
  color: var(--verde);
  transition: transform 0.2s;
}

.faq__item[open] .faq__flecha {
  transform: rotate(180deg);
}

.faq__item p {
  padding-bottom: 20px;
}

/* ---------- Cierre ---------- */

.cierre .btn {
  margin-top: 32px;
}

/* ---------- Footer ---------- */

.footer {
  padding: 64px 0 32px;
  background: var(--gris);
  color: var(--arena);
  font-size: 15px;
}

.footer__grid {
  display: grid;
  gap: 32px;
}

.footer .logo,
.footer .logo img {
  height: 36px;
  width: auto;
}

.footer__marca p {
  margin-top: 16px;
}

.footer__titulo {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanco);
}

.footer li + li {
  margin-top: 8px;
}

.footer a {
  text-decoration: none;
}

.footer li a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.footer__legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(200, 213, 218, 0.2);
  font-size: 14px;
}

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

  .footer__marca {
    grid-column: 1 / -1;
  }

  .footer__legal {
    border-top: 0;
    position: relative;
  }

  .footer__legal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    border-top: 1px solid rgba(200, 213, 218, 0.2);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }

  .footer__marca {
    grid-column: auto;
  }
}

/* ---------- Botón flotante de WhatsApp ---------- */

.wa-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s,
    transform 0.15s;
}

.wa-flotante .icono {
  width: 32px;
  height: 32px;
}

.wa-flotante--visible {
  opacity: 1;
  visibility: visible;
}

.wa-flotante:hover {
  transform: translateY(-2px);
}

.wa-flotante:focus-visible {
  outline-color: var(--negro);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* preview:inicio — solo existe en el preview; el armado de producción lo borra */
.falta-img {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 8px;
  background: repeating-linear-gradient(45deg, #fdeaea 0 10px, #fff 10px 20px);
  border: 2px dashed #c00;
  color: #a00;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.logo.falta-img {
  width: auto;
  aspect-ratio: 3 / 1;
  padding: 2px;
  font-size: 9px;
}

.sello__logo.falta-img {
  width: 64px;
  font-size: 8px;
  padding: 2px;
}

[data-falta] {
  outline: 3px dashed #c00 !important;
  outline-offset: 3px;
}
/* preview:fin */