* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--cal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
p { margin: 0; }
a { color: var(--azul); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
#vista:focus { outline: none; }

/* ── Estructura ───────────────────────────────────────── */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }

.lateral {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--e-6);
  padding: var(--e-6) var(--e-5);
  border-right: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); }
.marca__sello { width: 32px; height: 32px; flex: none; }
.marca__nombre { font-weight: 700; font-size: var(--t-s); letter-spacing: -0.01em; line-height: 1.2; }
.marca__nombre span { display: block; color: var(--tinta-3); font-weight: 500; }

.nav { display: flex; flex-direction: column; gap: var(--e-1); }
.nav a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3); border-radius: var(--radio-s);
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-s); font-weight: 500;
}
.nav a:hover { background: var(--cantera); color: var(--tinta); }
.nav a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.nav a[aria-current="page"] svg { color: var(--marca); }
.nav svg { width: 20px; height: 20px; flex: none; }
.nav .corto { display: none; }

.lateral__pie { margin-top: auto; font-size: var(--t-xs); color: var(--tinta-3); display: grid; gap: var(--e-4); justify-items: start; }
.enlace-pie { color: var(--tinta-2); font-weight: 600; font-size: var(--t-s); text-decoration: none; }
.enlace-pie:hover, .enlace-pie[aria-current="page"] { color: var(--marca); }

/* ── Columna principal, barra móvil y aviso de ejemplo ──── */
.columna { min-width: 0; }
.barra-movil { display: none; }
.banner-demo {
  display: none; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  margin: var(--e-5) var(--e-7) 0; padding: var(--e-4) var(--e-5); border-radius: var(--radio);
  background: var(--jacaranda-suave); color: var(--tinta); font-size: var(--t-s); max-width: calc(1120px - 2 * var(--e-7));
}
.modo-demo .banner-demo { display: flex; }
.banner-demo .boton { min-height: 40px; }
.onboarding .lateral, .onboarding .barra-movil { display: none; }
.onboarding .app { grid-template-columns: minmax(0, 1fr); }
.onboarding .contenido { margin: 0 auto; max-width: 640px; }

/* ── Conectar con Claude ───────────────────────────────── */
.pasos { counter-reset: paso; display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-4); align-items: start; background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); font-size: var(--t-s); color: var(--tinta-2); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cantera); color: var(--tinta); font-weight: 650; }
.pasos strong { color: var(--tinta); }
.copiar { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-3); }
.copiar code { font-size: var(--t-s); background: var(--cantera); padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); color: var(--tinta); overflow-wrap: anywhere; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
.plan { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-3); align-content: start; }
.plan h3 { font-size: var(--t-m); }
.plan ul { margin: 0; padding-left: 1.2em; color: var(--tinta-2); font-size: var(--t-s); display: grid; gap: var(--e-1); }
.plan--destacado { background: var(--terracota-suave); box-shadow: none; }
.cliente-chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: 999px; background: var(--cantera);
  color: var(--tinta); font-size: var(--t-xs); font-weight: 600;
}
.cliente-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }

.contenido { padding: var(--e-8) var(--e-7) var(--e-8); max-width: 1120px; width: 100%; }

/* ── Encabezado de sección ─────────────────────────────── */
.encabezado { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-7); }
.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.encabezado h1 { font-size: var(--t-xxl); }
.encabezado p { color: var(--tinta-2); font-size: var(--t-m); max-width: 60ch; }

.aviso-demo {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  background: var(--jacaranda-suave); color: var(--jacaranda); font-size: var(--t-xs); font-weight: 600;
  border-radius: var(--radio-s);
}

/* ── Plano Barragán: bloque de color plano para el dato principal ── */
.plano {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: end;
  padding: var(--e-6); border-radius: var(--radio);
  background: var(--terracota-suave); margin-bottom: var(--e-6);
}
.plano::after {
  /* dos planos que se cruzan, como un muro de Barragán visto de frente */
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  background: var(--terracota); opacity: .12; border-radius: 4px; transform: rotate(8deg);
}
.plano__etiqueta { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e-2); }
.plano__valor { font-size: var(--t-xxl); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.plano__nota { font-size: var(--t-s); color: var(--tinta-2); margin-top: var(--e-3); max-width: 46ch; }

/* ── Métricas ──────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-7); }
.metrica { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); }
.metrica__etiqueta { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; }
.metrica__valor { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; margin-top: var(--e-2); font-variant-numeric: tabular-nums; }
.delta { font-size: var(--t-xs); font-weight: 600; margin-top: var(--e-1); }
.metrica__nota { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-1); }
.delta--sube { color: var(--agave); }
.delta--baja { color: var(--chile); }

/* ── Bloques y tablas ──────────────────────────────────── */
.bloque { margin-bottom: var(--e-7); }
.bloque__titulo { font-size: var(--t-l); margin-bottom: var(--e-4); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }

.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th {
  text-align: left; font-weight: 500; color: var(--tinta-3); font-size: var(--t-xs);
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); white-space: nowrap;
}
td { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.barra { height: 6px; border-radius: 3px; background: var(--cantera); min-width: 64px; }
.barra > i { display: block; height: 100%; border-radius: 3px; background: var(--azul); }

/* ── Lista de prioridades / recomendaciones ───────────── */
.lista { display: flex; flex-direction: column; gap: var(--e-3); }
.item {
  display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--e-4);
  background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra);
}
.item__acento { border-radius: 2px; background: var(--linea); }
.item[data-prioridad="alta"] .item__acento { background: var(--terracota); }
.item[data-prioridad="media"] .item__acento { background: var(--azul); }
.item h3 { font-size: var(--t-m); margin-bottom: var(--e-2); }
.item p { color: var(--tinta-2); font-size: var(--t-s); }
.etiqueta {
  display: inline-block; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3);
  margin-bottom: var(--e-2); text-transform: uppercase; letter-spacing: .06em;
}

/* ── Botones ───────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5); border-radius: 999px; border: 0; cursor: pointer;
  background: var(--terracota); color: #fff; font-weight: 600; font-size: var(--t-s);
  text-decoration: none; text-align: center;
}
.boton:hover { filter: brightness(.95); }
.boton:disabled { opacity: .6; cursor: progress; }
.boton--secundario { background: var(--cantera); color: var(--tinta); }

/* ── Cobro por uso ─────────────────────────────────────── */
.cobro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5); border-radius: var(--radio); background: var(--azul-suave); margin-bottom: var(--e-6);
}
.cobro__texto { font-size: var(--t-s); color: var(--tinta-2); max-width: 52ch; }
.cobro__texto strong { color: var(--tinta); }

.vacio { padding: var(--e-7) var(--e-5); text-align: center; color: var(--tinta-3); font-size: var(--t-s); }
.error { padding: var(--e-5); border-radius: var(--radio); background: var(--terracota-suave); color: var(--tinta); }

/* ── Móvil: barra inferior tipo app ────────────────────── */
/* ── Estrategia nórdica ────────────────────────────────── */
.bloque__texto { color: var(--tinta-2); font-size: var(--t-s); margin: calc(-1 * var(--e-2)) 0 var(--e-4); max-width: 62ch; }
.nota-final { margin-top: var(--e-4); }
.subtitulo { font-size: var(--t-m); margin: var(--e-6) 0 var(--e-3); }
.principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); }
.principio { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-2); align-content: start; }
.principio__num { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); font-weight: 700; font-size: var(--t-xs); }
.principio h3 { font-size: var(--t-m); }
.principio p { color: var(--tinta-2); font-size: var(--t-s); }
.principio summary { font-size: var(--t-xs); color: var(--tinta-3); cursor: pointer; font-weight: 600; }
.principio details p { margin-top: var(--e-2); font-size: var(--t-xs); }
.formulario { padding: var(--e-5); display: grid; gap: var(--e-4); margin-bottom: var(--e-4); }
.formulario label { display: grid; gap: var(--e-2); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.formulario textarea, .formulario input {
  font: inherit; font-size: var(--t-s); color: var(--tinta); background: var(--cal);
  border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-3); width: 100%;
}
.formulario input { min-height: 48px; }
.formulario .boton { justify-self: start; }
.formulario--linea { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.plano--compacto { margin: 0 0 var(--e-4); }
.plano__valor small { font-size: var(--t-l); color: var(--tinta-3); font-weight: 500; }
.auditoria { padding: var(--e-5); }
.auditoria__texto { font-weight: 600; margin-bottom: var(--e-3); }
.auditoria ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.hallazgo { display: grid; gap: 2px; padding-left: var(--e-4); border-left: 3px solid var(--azul); font-size: var(--t-s); }
.hallazgo[data-nivel="riesgo"] { border-left-color: var(--terracota); }
.hallazgo span { color: var(--tinta-2); }
.celda-nota { color: var(--tinta-3); font-size: var(--t-xs); }
.grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.grupo { border-radius: var(--radio); padding: var(--e-5); display: grid; gap: var(--e-2); }
.grupo h3 { font-size: var(--t-m); }
.grupo p { color: var(--tinta-2); font-size: var(--t-s); }
.grupo--prueba { background: var(--terracota-suave); }
.grupo--control { background: var(--cantera); }
.error + .error, .error + .tarjeta { margin-top: var(--e-3); }

/* ── Registro y cuentas ─────────────────────────────────── */
.formulario select {
  font: inherit; font-size: var(--t-s); color: var(--tinta); background: var(--cal); min-height: 48px;
  border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-3); width: 100%;
}
.opcional { color: var(--tinta-3); font-weight: 500; }
.formulario .error[hidden] { display: none; }
.siguiente-paso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5);
  padding: var(--e-6); border-radius: var(--radio); background: var(--azul-suave); margin-bottom: var(--e-7);
}
.siguiente-paso > div { max-width: 56ch; display: grid; gap: var(--e-2); }
.siguiente-paso h2 { font-size: var(--t-l); }
.siguiente-paso p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); }
.aviso { padding: var(--e-4) var(--e-5); border-radius: var(--radio); margin-bottom: var(--e-5); font-size: var(--t-s); }
.aviso--bien { background: var(--agave-suave); }
.aviso--aviso { background: var(--terracota-suave); }
.conexiones { display: grid; gap: var(--e-4); }
.conexion {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-5); align-items: start;
  background: var(--superficie); border-radius: var(--radio); padding: var(--e-6); box-shadow: var(--sombra);
}
.conexion__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--cal); display: grid; place-items: center; }
.conexion__texto { display: grid; gap: var(--e-3); justify-items: start; }
.conexion__texto h2 { font-size: var(--t-l); }
.conexion__texto > p { color: var(--tinta-2); font-size: var(--t-s); max-width: 56ch; }
.conexion__estado { font-size: var(--t-s); font-weight: 600; color: var(--tinta-3) !important; }
.conexion__estado--ok { color: var(--agave) !important; }
.conexion__estado--ok::before { content: "● "; }
.conexion__detalle { font-size: var(--t-s); }
.conexion__sitio { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.conexion__sitio select { font: inherit; min-height: 44px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-3); background: var(--cal); color: var(--tinta); }
.conexion--pronto { opacity: .75; }
.cuenta-datos { margin-top: var(--e-7); }
.cuenta-datos__caja { padding: var(--e-5); display: grid; gap: var(--e-3); font-size: var(--t-s); }
.cuenta-datos__caja span { color: var(--tinta-3); display: inline-block; min-width: 110px; }
.cuenta-datos__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

/* ── Avisos legales ─────────────────────────────────────── */
.casilla { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--e-3); align-items: start; font-weight: 500 !important; color: var(--tinta-2); font-size: var(--t-s) !important; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--terracota); min-height: 0 !important; padding: 0 !important; }
.aviso-legal { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-4); max-width: 70ch; }
.pie-legal {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); padding: 0 var(--e-7) var(--e-6);
  font-size: var(--t-xs); color: var(--tinta-3); max-width: 1120px;
}
.pie-legal a { color: var(--tinta-3); }
.banner-legal {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  margin: var(--e-5) var(--e-7) 0; padding: var(--e-4) var(--e-5); border-radius: var(--radio);
  background: var(--terracota-suave); font-size: var(--t-s); max-width: calc(1120px - 2 * var(--e-7));
}
.banner-legal[hidden] { display: none; }
.privacidad__links { font-size: var(--t-xs); color: var(--tinta-3); }
.zona-peligro { margin-top: var(--e-5); font-size: var(--t-s); color: var(--tinta-2); }
.zona-peligro summary { cursor: pointer; color: var(--chile); font-weight: 600; }
.zona-peligro p { margin: var(--e-3) 0; }
.boton--peligro { background: var(--chile); }

/* ── Planes, saldo, candados Pro y anuncios ─────────────── */
.recargas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.insignia { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--jacaranda-suave); color: var(--jacaranda); vertical-align: middle; }
.plan__detalle { display: block; color: var(--tinta-3); font-size: var(--t-xs); }
.plan li { display: grid; gap: 2px; }
.plan li .insignia { justify-self: start; }
.candado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5);
  padding: var(--e-6); border-radius: var(--radio); background: var(--jacaranda-suave);
}
.candado > div { max-width: 56ch; display: grid; gap: var(--e-2); }
.candado h2 { font-size: var(--t-l); }
.candado h2::before { content: "🔒 "; }
.candado p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); }
.anuncio { margin: var(--e-7) 0 0; padding: var(--e-4); border: 1px dashed var(--linea); border-radius: var(--radio); }
.anuncio__etiqueta { font-size: var(--t-xs); color: var(--tinta-3); margin-bottom: var(--e-2); }

/* ── Aprende mientras lo haces ──────────────────────────── */
.termino {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-align: inherit;
  text-decoration: underline dotted; text-decoration-color: var(--azul); text-underline-offset: 3px;
}
.termino:hover { color: var(--azul); }
th .termino { font-weight: inherit; }
.que-es { background: var(--superficie); border-left: 3px solid var(--azul); border-radius: var(--radio-s); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-6); box-shadow: var(--sombra); }
.que-es__titulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); margin-bottom: var(--e-2); }
.que-es p:last-child { color: var(--tinta-2); font-size: var(--t-s); max-width: 75ch; }
.acciones-aprende { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: calc(-1 * var(--e-3)) 0 var(--e-6); }
.acciones-aprende .boton { min-height: 40px; font-size: var(--t-xs); }
.consejo { background: var(--agave-suave); border-radius: var(--radio); padding: var(--e-5) var(--e-6); margin-bottom: var(--e-7); display: grid; gap: var(--e-2); }
.consejo:empty { display: none; }
.consejo h2 { font-size: var(--t-l); }
.consejo p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); max-width: 70ch; }
.explicacion { border: 0; padding: 0; border-radius: 20px; max-width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--tinta); box-shadow: 0 24px 64px rgba(28, 36, 64, .25); }
.explicacion::backdrop { background: rgba(20, 23, 31, .45); }
.explicacion__caja { padding: var(--e-6); display: grid; gap: var(--e-3); }
.explicacion__titulo { font-size: var(--t-l); }
.explicacion__cuerpo { display: grid; gap: var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.explicacion__corto { font-size: var(--t-m); color: var(--tinta); font-weight: 600; }
.explicacion__ejemplo { background: var(--cantera); border-radius: var(--radio-s); padding: var(--e-3) var(--e-4); }
.explicacion__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; margin-top: var(--e-3); }
.guias { display: grid; gap: var(--e-3); }
.guia, .definicion { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.guia > summary, .definicion > summary { cursor: pointer; list-style: none; padding: var(--e-5); display: grid; gap: var(--e-1); }
.guia > summary::-webkit-details-marker, .definicion > summary::-webkit-details-marker { display: none; }
.guia__titulo { font-size: var(--t-m); font-weight: 650; }
.guia__resumen { color: var(--tinta-2); font-size: var(--t-s); }
.guia__pasos { margin: 0; padding: 0 var(--e-5) var(--e-4) calc(var(--e-5) + 1.2em); display: grid; gap: var(--e-3); color: var(--tinta-2); font-size: var(--t-s); }
.guia__terminos { padding: 0 var(--e-5) var(--e-5); font-size: var(--t-xs); color: var(--tinta-3); }
.buscador { display: grid; gap: var(--e-2); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-4); }
.buscador input { font: inherit; font-size: var(--t-s); min-height: 48px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-4); background: var(--superficie); color: var(--tinta); }
.glosario { display: grid; gap: var(--e-3); }
.definicion > summary span { color: var(--tinta-2); font-size: var(--t-s); }
.definicion > :not(summary) { padding: 0 var(--e-5); }
.definicion > :last-child { padding-bottom: var(--e-5); }
.definicion p { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e-3); }
.definicion .explicacion__corto { display: none; }
.definicion[hidden], .glosario__grupo[hidden] { display: none; }

/* ── Crear anuncio ──────────────────────────────────────── */
.formulario__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.formulario input[type="file"] { background: var(--superficie); padding: var(--e-3); }
.opciones-anuncio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-5); margin-bottom: var(--e-5); }
.opcion { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-3); align-content: start; }
.opcion h3 { font-size: var(--t-s); margin-top: var(--e-2); }
.opcion__para, .opcion__auditoria { font-size: var(--t-xs); color: var(--tinta-3); }
.opcion__lienzo { width: 100%; height: auto; border-radius: var(--radio-s); display: block; }
.opcion__texto { font-size: var(--t-s); color: var(--tinta-2); }
.opcion__titulos, .opcion__descripciones { margin: 0; padding-left: 1.1em; font-size: var(--t-s); color: var(--tinta-2); display: grid; gap: 2px; }
.opcion__titulos li { color: var(--azul); font-weight: 600; }
.descargas { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-5); }
.tipografias, .formatos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.tipografias legend, .formatos legend { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-2); width: 100%; }
.formatos { display: grid; }
.tipografia { position: relative; }
.tipografia input { position: absolute; opacity: 0; }
.tipografia span {
  display: grid; gap: 2px; min-width: 120px; padding: var(--e-3) var(--e-4); border: 1px solid var(--linea);
  border-radius: var(--radio-s); background: var(--superficie); font-size: var(--t-m); font-weight: 700; color: var(--tinta); cursor: pointer;
}
.tipografia small { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }
.tipografia input:checked + span { border-color: var(--terracota); box-shadow: 0 0 0 2px var(--terracota-suave); }
.tipografia input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.fotos-ia { margin: 0 0 var(--e-6); padding: 0; }
.fotos-ia > summary { cursor: pointer; padding: var(--e-5); display: grid; gap: var(--e-1); list-style: none; }
.fotos-ia > summary::-webkit-details-marker { display: none; }
.fotos-ia > summary span { color: var(--tinta-2); font-size: var(--t-s); }
.fotos-ia[open] > summary { border-bottom: 1px solid var(--linea); }
#prompts { padding: 0 var(--e-5) var(--e-5); display: grid; gap: var(--e-4); }
.prompt { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.prompt__texto { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); background: var(--cal); border-radius: var(--radio-s); padding: var(--e-4); margin: 0; color: var(--tinta); }
.prompt__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.prompt details summary { font-size: var(--t-xs); color: var(--tinta-3); cursor: pointer; margin-bottom: var(--e-2); }
.plan__iva { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; inset: auto 0 0 0; top: auto; height: auto; z-index: 10;
    flex-direction: row; padding: var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--linea); background: color-mix(in srgb, var(--cal) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .marca, .lateral__pie { display: none; }
  .barra-movil {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea);
  }
  .barra-movil a { font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); text-decoration: none; }
  .banner-demo, .banner-legal { margin: var(--e-4) var(--e-4) 0; }
  .pie-legal { padding: 0 var(--e-4) calc(96px + env(safe-area-inset-bottom)); }
  .nav { flex-direction: row; justify-content: space-around; width: 100%; }
  .nav a { flex-direction: column; gap: 2px; padding: var(--e-2) 0; font-size: 11px; flex: 1 1 0; min-width: 0; text-align: center; }
  .nav a[aria-current="page"] { background: transparent; box-shadow: none; }
  .nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav .largo { display: none; }
  .nav .corto { display: inline; }
  .contenido { padding: var(--e-6) var(--e-4) var(--e-6); }
  .encabezado { margin-bottom: var(--e-6); }
  .plano { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .metrica { padding: var(--e-4); }
  .metrica__valor { font-size: var(--t-l); }
  .formulario--linea, .formulario__fila { grid-template-columns: minmax(0, 1fr); }
  .conexion { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
  .siguiente-paso { padding: var(--e-5); }
  th, td { padding: var(--e-3) var(--e-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .vista { animation: aparecer .24s ease-out; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ── Registro: tipo de cuenta y encuesta ───────────────── */
.tipos-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.tipo-cuenta {
  display: grid; gap: var(--e-2); align-content: start; text-align: left; cursor: pointer;
  background: var(--superficie); color: var(--tinta-2); border: 2px solid var(--linea); border-radius: var(--radio);
  padding: var(--e-5); font-size: var(--t-s); min-height: 44px;
}
.tipo-cuenta strong { color: var(--tinta); font-size: var(--t-m); }
.tipo-cuenta__icono svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-2); }
.tipo-cuenta:hover { border-color: var(--tinta-3); }
.tipo-cuenta[aria-checked="true"] { border-color: var(--marca); box-shadow: var(--sombra); }
.tipo-cuenta[aria-checked="true"] .tipo-cuenta__icono svg { color: var(--marca); }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.formulario__acciones .boton { justify-self: auto; }
.encuesta { gap: var(--e-5); }
.encuesta__pregunta { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--tinta); }
.encuesta__pregunta legend { padding: 0; margin-bottom: var(--e-2); }
.encuesta__ayuda { font-weight: 500; color: var(--tinta-3); font-size: var(--t-xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { position: relative; display: inline-flex !important; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-4); border-radius: 999px;
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-2); font-weight: 500; font-size: var(--t-s);
}
.chip input:checked + span { background: var(--terracota-suave); border-color: var(--marca); color: var(--tinta); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
button.chip { background: none; border: 0; padding: 0; font: inherit; }
.chip[aria-selected="true"] span { background: var(--terracota-suave); border-color: var(--marca); color: var(--tinta); font-weight: 600; }
button.chip:focus-visible span { outline: 2px solid var(--azul); outline-offset: 2px; }
.cliente-chip--selector select {
  font: inherit; font-weight: 600; color: var(--tinta); background: transparent; border: 0; max-width: 190px;
  padding: 0; cursor: pointer; text-overflow: ellipsis;
}
.perfil-resumen { display: grid; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-2); }
.negocios-lista { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.negocios-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.negocios-lista li:last-child { border-bottom: 0; }

/* ── Reporte mensual (imprimible) ──────────────────────── */
.reporte__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-5); }
.reporte {
  --marca-reporte: #243f8f;
  background: #fff; color: #1c2440; border: 1px solid var(--linea); border-top: 8px solid var(--marca-reporte);
  padding: var(--e-6); display: grid; gap: var(--e-5); max-width: 900px;
}
.reporte__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); }
.reporte__marca { font-size: var(--t-l); font-weight: 700; color: var(--marca-reporte); }
.reporte__contacto, .reporte__periodo { font-size: var(--t-xs); color: #5b6177; }
.reporte__periodo { text-align: right; }
.reporte__titulo { font-size: var(--t-xl); font-weight: 300; }
.reporte__titulo span { color: #8b8fa0; }
.reporte__resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #e4ddd1; border: 1px solid #e4ddd1; }
.reporte__dato { background: #fff; padding: var(--e-4); }
.reporte__etiqueta { font-size: var(--t-xs); color: #5b6177; font-weight: 600; }
.reporte__valor { font-size: 1.75rem; font-weight: 300; color: var(--marca-reporte); margin-top: var(--e-1); font-variant-numeric: tabular-nums; }
.reporte__nota { font-size: var(--t-xs); color: #8b8fa0; margin-top: var(--e-1); }
.reporte__bloque h2 { font-size: var(--t-m); margin-bottom: var(--e-3); color: var(--marca-reporte); }
.reporte__lista { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-3); font-size: var(--t-s); color: #5b6177; }
.reporte__lista strong { color: #1c2440; }
.reporte table th, .reporte table td { color: #1c2440; border-color: #e4ddd1; padding: var(--e-2) var(--e-3); }
.reporte__pie { border-top: 1px solid #e4ddd1; padding-top: var(--e-3); font-size: var(--t-xs); color: #8b8fa0; display: grid; gap: var(--e-1); }
@media (max-width: 600px) { .reporte { padding: var(--e-4); } .reporte__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reporte__periodo { text-align: left; } }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  .lateral, .barra-movil, .banner-demo, .banner-legal, .pie-legal, .no-imprimir, .anuncio { display: none !important; }
  .app { display: block; }
  .contenido { padding: 0; max-width: none; }
  .reporte { border-left: 0; border-right: 0; border-bottom: 0; max-width: none; padding: 0 0 0 0; }
  .reporte, .reporte * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reporte__bloque { break-inside: avoid; }
}

/* Los ejemplos dentro de los campos no deben parecer respuestas ya escritas. */
.formulario ::placeholder { font-weight: 400; color: var(--tinta-3); opacity: .8; font-style: italic; }

.enlace-boton { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; font: inherit; }

/* ── Asistente de ayuda ────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asistente { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: grid; justify-items: end; gap: var(--e-3); }
.asistente__abrir {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5);
  background: var(--terracota); color: #fff; border: 2px solid transparent; border-radius: 2px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(28, 36, 64, .25);
}
.asistente__abrir svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.asistente--abierto .asistente__abrir { display: none; }
.asistente__panel {
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 12px 40px rgba(28, 36, 64, .25);
}
.asistente__panel[hidden] { display: none; }
.asistente__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--rail, #1c2440); color: #fff; }
.asistente__cabeza span { display: block; font-size: var(--t-xs); opacity: .8; }
.asistente__cerrar { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.asistente__mensajes { flex: 1; overflow-y: auto; padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.asistente__msg { max-width: 90%; padding: var(--e-3); font-size: var(--t-s); line-height: 1.45; }
.asistente__msg--asistente { background: var(--cantera); color: var(--tinta); justify-self: start; }
.asistente__msg--usuario { background: var(--azul); color: #fff; justify-self: end; }
.asistente__fuentes, .asistente__aviso { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-2); }
.asistente__fuentes a { color: var(--azul); }
.asistente__pensando p { opacity: .7; font-style: italic; }
.asistente__sugerencias { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3); }
.asistente__sugerencias[hidden] { display: none; }
.asistente__sugerencia { background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta-2); font: inherit; font-size: var(--t-xs); padding: var(--e-2) var(--e-3); cursor: pointer; min-height: 36px; }
.asistente__sugerencia:hover { border-color: var(--marca); color: var(--tinta); }
.asistente__form { display: flex; gap: var(--e-2); padding: var(--e-3); border-top: 1px solid var(--linea); }
.asistente__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); font: inherit; border-radius: 2px; }
.asistente__form .boton { min-height: 44px; padding: 0 var(--e-4); }
.asistente__nota { font-size: 11px; color: var(--tinta-3); padding: 0 var(--e-3) var(--e-3); }
@media (max-width: 860px) {
  .asistente { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .asistente__abrir span { display: none; }
  .asistente__abrir { padding: 0 var(--e-3); }
  .asistente--abierto { inset: 0; right: 0; bottom: 0; }
  .asistente--abierto .asistente__panel { width: 100vw; height: 100dvh; }
}
@media print { .asistente { display: none !important; } }

/* ── Funciones Pro ─────────────────────────────────────── */
.vista-whatsapp { white-space: pre-wrap; font: inherit; font-size: var(--t-s); background: #e7f7e3; color: #1c2440; padding: var(--e-4); border-left: 4px solid #25d366; margin: 0; max-width: 46ch; }
.vista-whatsapp[hidden] { display: none; }
.resena { display: grid; gap: var(--e-2); }
.resena__respuesta { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.resena__respuesta textarea { font: inherit; font-size: var(--t-s); padding: var(--e-3); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); border-radius: 2px; }
.consejos { margin: var(--e-4) 0; padding-left: 1.2em; display: grid; gap: var(--e-2); color: var(--tinta-2); font-size: var(--t-s); }
.item ol { margin: var(--e-2) 0; padding-left: 1.2em; color: var(--tinta-2); font-size: var(--t-s); }
.item details summary { cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--azul); margin-top: var(--e-2); }
.barra-movil__enlaces { display: inline-flex; gap: var(--e-4); }

/* El reporte nunca se sale de la pantalla (tablas con scroll propio). */
.reporte > * { min-width: 0; }
.reporte table { display: block; overflow-x: auto; }
.reporte__titulo { overflow-wrap: anywhere; }
.pagina-cliente .contenido { margin: 0 auto; }
@media (max-width: 600px) { .pagina-cliente .contenido { padding: var(--e-5) var(--e-4); } }

/* ── Inicio "un botón" ─────────────────────────────────── */
.retorno { background: var(--color-retorno, var(--mosaico-4)); color: #fff; padding: var(--e-6); margin-bottom: var(--e-5); }
.retorno__frase { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 300; line-height: 1.15; }
.retorno__detalle { margin-top: var(--e-3); opacity: .92; font-size: var(--t-s); }
.retorno__transparencia { margin-top: var(--e-4); background: rgba(0, 0, 0, .15); padding: var(--e-3) var(--e-4); font-size: var(--t-s); }
.retorno__transparencia summary { cursor: pointer; font-weight: 600; }
.retorno__transparencia p, .retorno__transparencia table { margin-top: var(--e-3); }
.retorno__transparencia th, .retorno__transparencia td, .retorno__transparencia .opcional { color: #fff; border-color: rgba(255, 255, 255, .25); }
.retorno__transparencia input { color: var(--tinta); }
.retorno__transparencia label { color: #fff; }
.control-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-2); }
.boton--grande { min-height: 60px; font-size: var(--t-m); padding: 0 var(--e-6); }
.boton--voz { background: var(--azul); }
.estado-anuncios { margin-bottom: var(--e-5); }
.mosaicos-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
.mosaico { color: #fff; text-decoration: none; padding: var(--e-4); min-height: 130px; display: flex; flex-direction: column; gap: var(--e-1); outline: 2px solid transparent; outline-offset: -2px; }
.mosaico:hover { outline-color: rgba(255, 255, 255, .55); }
.mosaico span { font-size: var(--t-s); font-weight: 600; }
.mosaico strong { font-size: 2rem; font-weight: 300; margin-top: auto; }
.mosaico small { font-size: var(--t-xs); opacity: .9; }
.mosaico--1 { background: var(--mosaico-1); } .mosaico--2 { background: var(--mosaico-2); } .mosaico--3 { background: var(--mosaico-3); }
.mosaico--4 { background: var(--mosaico-4); } .mosaico--5 { background: var(--mosaico-5); }

/* ── Agentes ───────────────────────────────────────────── */
.freno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-4) var(--e-5); border: 1px solid var(--linea); border-left: 6px solid var(--mosaico-4); background: var(--superficie); margin-bottom: var(--e-6); }
.freno--activo { border-left-color: var(--chile); }
.agentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
.agente { background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }
.agente h3 { font-size: var(--t-m); }
.agente p { color: var(--tinta-2); font-size: var(--t-s); }
.agente label { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.agente select { font: inherit; min-height: 44px; padding: 0 var(--e-2); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); }
.codigo { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); background: var(--cal); color: var(--tinta); padding: var(--e-3); border: 1px solid var(--linea); max-height: 320px; overflow: auto; }

/* ── Órdenes por voz ───────────────────────────────────── */
.voz__abrir {
  position: fixed; right: 20px; bottom: 80px; z-index: 29; width: 52px; height: 52px; border: 0; cursor: pointer;
  background: var(--azul); color: #fff; font-size: 24px; box-shadow: 0 6px 20px rgba(28, 36, 64, .25);
}
.voz {
  position: fixed; right: 20px; bottom: 20px; z-index: 31; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 12px 40px rgba(28, 36, 64, .25);
}
.voz[hidden] { display: none; }
.voz__cuerpo { padding: var(--e-4); display: grid; gap: var(--e-3); overflow-y: auto; justify-items: center; text-align: center; }
.voz__mic { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--terracota); color: #fff; font-size: 40px; cursor: pointer; }
.voz__mic--escuchando { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(192, 85, 45, .2); } }
.voz__estado { font-weight: 600; }
.voz__ejemplos { font-size: var(--t-xs); color: var(--tinta-3); }
.voz__form { width: 100%; padding: 0; border: 0; }
.voz__resultado { width: 100%; text-align: left; }
.voz__plan { background: var(--cantera); padding: var(--e-4); display: grid; gap: var(--e-2); }
.voz__plan--ok { background: var(--agave-suave); }
@media (max-width: 860px) {
  .voz__abrir { right: 12px; bottom: calc(132px + env(safe-area-inset-bottom)); }
  .voz { inset: 0; width: 100vw; max-height: 100dvh; }
}
@media print { .voz, .voz__abrir { display: none !important; } }

.plan__lema { font-weight: 700; color: var(--marca); font-size: var(--t-s); margin-top: calc(-1 * var(--e-2)); }

/* Velocidad (Core Web Vitals) */
.velocidad__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-block: var(--e-3); }
.velocidad__metricas > * { min-width: 0; }
.velocidad__metrica[data-estado="mal"] { border-left: 4px solid var(--chile); }
.velocidad__metrica[data-estado="mejorar"] { border-left: 4px solid var(--terracota); }
.velocidad__metrica[data-estado="bien"] { border-left: 4px solid var(--agave); }
@media (max-width: 640px) { .velocidad__metricas { grid-template-columns: 1fr; } }

/* WhatsApp: simulador de chat */
.wa-chat { display: flex; flex-direction: column; gap: var(--e-2); max-height: 420px; overflow-y: auto; background: var(--cal); }
.wa-chat__msg { align-self: flex-start; max-width: min(85%, 520px); background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-2) var(--e-3); overflow-wrap: anywhere; }
.wa-chat__msg p { margin: 0 0 var(--e-2); }
.wa-chat__msg .boton { margin: 0 var(--e-2) var(--e-1) 0; }
.wa-chat__msg--propio { align-self: flex-end; background: var(--agave-suave); color: var(--tinta); }