/* mic.css · sistema visual de menteiacreativa.com
   Tokens heredados de mic-linkedin/plantillas/base.css (fondo claro siempre).
   Tema único, claro. Cada color se pinta explícitamente. */

:root {
  --fondo: #FFFFFF;
  --relleno: #F8FAFC;
  --texto: #0F172A;
  --texto-2: #475569;
  --linea: #E2E8F0;
  --acento: #19C1D8;        /* cian del logotipo: marca, ilustración, marcas de tramo */
  --acento-texto: #0B7F91;  /* teal para texto, enlaces y botones (≥ 4.5:1 sobre blanco) */
  --acento-hover: #08657A;
  --acento-suave: #DDF6FA;
  --problema: #EF4444;
  --problema-texto: #C81E1E;
  --problema-suave: #FDE7E7;
  --navy: #1A2430;          /* tinta del logotipo */
  --ok: #0B7F91;
  --ok-suave: #DDF6FA;
  --marca: #64748B;
  --wa: #25D366;
  --wa-hover: #1FB955;

  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --ancho: 1120px;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --dur: 220ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
strong { font-weight: 700; }

.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.contenedor--lectura { width: min(720px, 100% - 40px); margin-inline: auto; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; color: var(--texto); font-size: 17px; }
.marca:hover { text-decoration: none; }
.marca__logo { width: 36px; height: 36px; color: var(--texto); flex-shrink: 0; }
.marca__logo svg { width: 100%; height: 100%; }
.marca em { font-style: normal; color: var(--acento-texto); }
.nav { display: none; gap: 4px; align-items: center; }
.nav a { color: var(--texto-2); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--texto); background: var(--relleno); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--acento-texto); background: transparent; font-weight: 700; position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--acento-texto); }
.btn.cabecera__cta { display: none; }
.hamburguesa { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--linea); background: var(--fondo); border-radius: 10px; color: var(--texto); }
.menu-movil { display: none; border-top: 1px solid var(--linea); padding: 12px 0 20px; background: var(--fondo); }
.menu-movil[data-abierto="true"] { display: block; }
.menu-movil a:not(.btn) { display: block; padding: 12px 8px; color: var(--texto-2); font-weight: 500; border-radius: 8px; }
.menu-movil a:not(.btn):hover { background: var(--relleno); text-decoration: none; color: var(--texto); }
.menu-movil .btn { margin-top: 10px; width: 100%; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .btn.cabecera__cta { display: inline-flex; }
  .hamburguesa, .menu-movil { display: none !important; }
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap;
  transition: background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--acento-texto); color: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .12), 0 6px 18px rgba(11, 127, 145, .28); }
.btn--primario:hover { background: var(--acento-hover); transform: translateY(-1px); }
.btn--secundario { background: var(--fondo); color: var(--texto); border-color: var(--linea); }
.btn--secundario:hover { border-color: var(--texto-2); }
.btn--chico { padding: 10px 16px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; }

/* ── Tipografía de sección ────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--texto-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--acento); border-radius: 2px; }
.eyebrow--problema::before { background: var(--problema); }
.h1 { font-size: clamp(30px, 5.2vw, 52px); font-weight: 800; }
.h2 { font-size: clamp(25px, 3.4vw, 36px); font-weight: 800; }
.h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sub { font-size: 18px; color: var(--texto-2); max-width: 62ch; }
@media (min-width: 900px) { .sub { font-size: 18px; } }
.nota { font-size: 14px; color: var(--marca); }
.mono { font-family: var(--mono); }

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion { padding: 44px 0; border-top: 1px solid var(--linea); }
.seccion--relleno { background: var(--relleno); }
.seccion--sin-borde { border-top: 0; }
.seccion__cabeza { display: grid; gap: 12px; max-width: 760px; margin-bottom: 26px; }
@media (min-width: 900px) { .seccion { padding: 64px 0; } .seccion__cabeza { margin-bottom: 32px; } }

/* Regla técnica: numeración de plano (mono) al margen de cada sección */
.plano { position: relative; }
.plano__num {
  font-family: var(--mono); font-size: 12px; color: var(--marca); letter-spacing: .08em;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.plano__num::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 36px 0 44px; }
.hero__grid { display: grid; gap: 36px; align-items: center; }
.hero__texto { display: grid; gap: 22px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__figura { display: none; }
.hero__geo { font-family: var(--sans); font-size: 14px; color: var(--marca); letter-spacing: .04em; }
@media (min-width: 900px) {
  .hero { padding: 64px 0 68px; }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero__figura { display: block; }
}
.metafora { width: 100%; max-width: 420px; margin-inline: auto; }
.metafora svg { width: 100%; height: auto; overflow: visible; }
.m-acento { stroke: var(--acento); fill: none; }
.m-problema { stroke: var(--problema); fill: none; }
.m-neutro { stroke: var(--texto-2); fill: none; }
.m-marca { stroke: var(--marca); fill: none; }
.m-relleno { fill: var(--relleno); stroke: none; }
.m-relleno-acento { fill: var(--acento); stroke: none; }
.m-relleno-acento-suave { fill: var(--acento-suave); stroke: none; }
.m-relleno-problema { fill: var(--problema); stroke: none; }
.m-relleno-problema-suave { fill: var(--problema-suave); stroke: none; }
.m-relleno-texto { fill: var(--texto); stroke: none; }
.m-relleno-blanco { fill: #fff; stroke: none; }
.m-punteado { stroke-dasharray: 10 10; }

/* ── Síntomas ─────────────────────────────────────────────────────────── */
.sintomas { display: grid; gap: 14px; }
@media (min-width: 700px) { .sintomas { grid-template-columns: 1fr 1fr; } }
.sintoma {
  text-align: left; display: grid; gap: 8px; padding: 18px 18px 16px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  color: var(--texto); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.sintoma:hover { border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-2px); }
.sintoma__tramo { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-texto); display: flex; align-items: center; gap: 8px; }
.sintoma__tramo b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--acento); }
.sintoma__titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.sintoma__hecho { color: var(--texto-2); font-size: 16px; }
.sintoma__accion { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--acento-texto); display: inline-flex; align-items: center; gap: 6px; }
.sintoma__accion svg { width: 16px; height: 16px; stroke: currentColor; }
.sintomas__cierre { margin-top: 28px; font-size: 18px; font-weight: 600; max-width: 56ch; }

/* ── Contraste (antipatrón / sistema) ─────────────────────────────────── */
.contraste { display: grid; gap: 16px; }
@media (min-width: 860px) { .contraste { grid-template-columns: 1fr 1fr; gap: 20px; } }
.lado { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); padding: 20px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 860px) { .lado { padding: 26px; gap: 18px; } }
.lado--problema { border-top: 4px solid var(--problema); }
.lado--acento { border-top: 4px solid var(--acento); }
.lado__titulo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.badge { font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.badge--problema { background: var(--problema-suave); color: var(--problema-texto); }
.badge--acento { background: var(--acento-suave); color: var(--acento-texto); }
.badge--ok { background: var(--ok-suave); color: var(--ok); }
.cadena { display: grid; gap: 0; }
.cadena__paso { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 10px 0; }
.cadena__paso + .cadena__paso { border-top: 1px dashed var(--linea); }
.cadena__num { font-family: var(--mono); font-size: 12px; color: var(--marca); padding-top: 3px; }
.cadena__texto { font-size: 16px; }
.cadena__texto small { display: block; color: var(--texto-2); font-size: 14px; margin-top: 2px; }
.lado__resultado { border-radius: 10px; padding: 14px 16px; font-size: 16px; font-weight: 600; }
.lado--problema .lado__resultado { background: var(--problema-suave); color: var(--problema-texto); }
.lado--acento .lado__resultado { background: var(--acento-suave); color: var(--acento-texto); }

/* ── Flujo MIC ────────────────────────────────────────────────────────── */
.flujo { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 10px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.flujo > * { scroll-snap-align: start; }
@media (min-width: 900px) { .flujo { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; gap: 12px; overflow: visible; padding: 14px 0 0; margin: 0; } }
.tramo { position: relative; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); padding: 20px 18px 18px; display: grid; gap: 8px; align-content: start; }
.tramo__num { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--marca); }
.tramo__nombre { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.tramo__falla { font-size: 14px; color: var(--texto-2); }
.tramo__falla b { color: var(--texto); font-weight: 600; }
.tramo--mic { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 4px rgba(25, 193, 216, .16); }
.tramo--mic .tramo__num, .tramo--mic .tramo__nombre { color: var(--acento-texto); }
.tramo__mic { position: absolute; top: -12px; left: 14px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--acento-texto); color: #fff; padding: 4px 9px; border-radius: 999px; }
.flujo__linea { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 18px; }
.flujo__linea svg { width: 26px; height: 26px; color: var(--acento-texto); stroke: var(--acento-texto); flex-shrink: 0; }

/* ── Sprint (pasos) ───────────────────────────────────────────────────── */
.pasos { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); overflow: hidden; }
.paso { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 16px; }
@media (min-width: 860px) { .paso { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; } }
.paso + .paso { border-top: 1px solid var(--linea); }
.paso__num { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--acento-texto); line-height: 1; padding-top: 2px; }
.paso__titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.paso__desc { color: var(--texto-2); font-size: 16px; }
.paso__semana { font-family: var(--mono); font-size: 12px; color: var(--marca); letter-spacing: .08em; margin-top: 8px; }
.ejes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.eje { border: 1px solid var(--linea); background: var(--fondo); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--texto); }
.eje b { font-family: var(--mono); font-weight: 700; color: var(--acento-texto); margin-right: 6px; }

/* ── Casos ────────────────────────────────────────────────────────────── */
.casos { display: grid; gap: 12px; }
.caso { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); display: grid; gap: 10px; padding: 16px; }
.caso__sector { font-family: var(--sans); font-size: 16px; color: var(--texto); font-weight: 700; }
.caso__col { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
@media (min-width: 860px) { .caso__col { grid-template-columns: 1fr; gap: 4px; } }
.caso__etq { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.caso__etq--antes { color: var(--problema-texto); }
.caso__etq--despues { color: var(--acento-texto); }
.caso__txt { font-size: 16px; color: var(--texto-2); }
.caso__col--despues .caso__txt { color: var(--texto); }
@media (min-width: 860px) {
  .casos { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; gap: 0; background: var(--fondo); }
  .caso { grid-template-columns: 180px 1fr 1fr; gap: 24px; border: 0; border-radius: 0; padding: 20px 24px; align-items: start; }
  .caso + .caso { border-top: 1px solid var(--linea); }
  .casos__cab { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 24px; padding: 12px 24px; background: var(--relleno); border-bottom: 1px solid var(--linea); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marca); }
}
.casos__cab { display: none; }
@media (min-width: 860px) { .casos__cab { display: grid; } .caso__etq { display: none; } }

/* ── Encaje ───────────────────────────────────────────────────────────── */
.encaje { display: grid; gap: 16px; }
@media (min-width: 860px) { .encaje { grid-template-columns: 1fr 1fr; gap: 20px; } }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; }
.lista svg { width: 22px; height: 22px; stroke-width: 2.2; margin-top: 1px; }
.lista--ok svg { stroke: var(--ok); }
.lista--no svg { stroke: var(--problema); }

/* ── Criterio ─────────────────────────────────────────────────────────── */
.criterio { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .criterio { grid-template-columns: 300px 1fr; gap: 48px; } }
.retrato { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: var(--radio); background: var(--relleno); border: 1px solid var(--linea); overflow: hidden; }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.criterio__texto { display: grid; gap: 14px; }
.criterio__cargos { font-family: var(--sans); font-size: 14px; color: var(--marca); }

/* ── Cierre ───────────────────────────────────────────────────────────── */
.cierre { background: var(--navy); color: #fff; padding: 52px 0; }
@media (min-width: 900px) { .cierre { padding: 80px 0; } }
.cierre .eyebrow { color: rgba(255, 255, 255, .72); }
.cierre .eyebrow::before { background: var(--acento); }
.cierre .h2 { color: #fff; }
.cierre__texto { color: rgba(255, 255, 255, .84); font-size: 18px; max-width: 60ch; }
.cierre .btn--primario { background: var(--acento); color: var(--navy); box-shadow: none; }
.cierre .btn--primario:hover { background: #5FD6E6; }
.cierre__grid { display: grid; gap: 22px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--marca); font-size: 18px; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 18px 18px; color: var(--texto-2); font-size: 16px; max-width: 72ch; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); padding: 36px 0 28px; background: var(--fondo); }
.pie__grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.pie__titulo { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a, .pie button { color: var(--texto-2); font-size: 14px; background: none; border: 0; padding: 0; text-align: left; }
.pie a:hover, .pie button:hover { color: var(--texto); text-decoration: underline; }
.pie__desc { color: var(--texto-2); font-size: 14px; max-width: 34ch; margin-top: 12px; }
.pie__abajo { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--marca); }
.pie__abajo .mono { letter-spacing: .04em; }

/* ── Flotante ─────────────────────────────────────────────────────────── */
.flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wa); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 18px; font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
  transition: background var(--dur), transform var(--dur);
}
.flotante:hover { background: var(--wa-hover); transform: translateY(-1px); }
.flotante svg { width: 22px; height: 22px; stroke: #fff; }
.flotante span { display: none; }
@media (min-width: 640px) { .flotante span { display: inline; } }
.flotante[hidden] { display: none; }

/* ── Asistente ────────────────────────────────────────────────────────── */
.asistente { position: fixed; inset: 0; z-index: 100; display: none; }
.asistente[data-abierto="true"] { display: block; }
.asistente__velo { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.asistente__panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(560px, 100%); max-height: 92vh; overflow: auto;
  background: var(--fondo); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(15, 23, 42, .25);
  display: grid; grid-template-rows: auto 1fr;
}
@media (min-width: 640px) {
  .asistente__panel { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 16px; max-height: 88vh; }
}
.asistente__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--fondo); }
.asistente__titulo { font-weight: 700; font-size: 16px; }
.asistente__titulo small { display: block; font-family: var(--mono); font-size: 12px; color: var(--marca); font-weight: 500; letter-spacing: .08em; margin-top: 2px; }
.asistente__cerrar { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto-2); display: grid; place-items: center; }
.asistente__cerrar svg { width: 18px; height: 18px; stroke: currentColor; }
.asistente__progreso { height: 3px; background: var(--linea); }
.asistente__progreso i { display: block; height: 100%; background: var(--acento); width: 0; transition: width var(--dur); }
.asistente__cuerpo { padding: 22px 18px 24px; display: grid; gap: 16px; }
.asistente__contexto { font-family: var(--sans); font-size: 14px; color: var(--acento-texto); background: var(--acento-suave); padding: 8px 12px; border-radius: 8px; }
.asistente__pregunta { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.asistente__ayuda { color: var(--texto-2); font-size: 14px; }
.opciones { display: grid; gap: 8px; }
.opcion {
  text-align: left; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo);
  font-weight: 600; font-size: 16px; color: var(--texto); display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: border-color var(--dur), background var(--dur);
}
.opcion:hover { border-color: var(--acento); background: var(--acento-suave); }
.opcion svg { width: 18px; height: 18px; stroke: var(--marca); flex-shrink: 0; }
.campo { width: 100%; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; font-size: 16px; color: var(--texto); background: var(--fondo); }
.campo:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px rgba(25, 193, 216, .22); }
.asistente__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.asistente__atras { background: none; border: 0; color: var(--texto-2); font-size: 14px; font-weight: 600; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; }
.asistente__atras svg { width: 16px; height: 16px; stroke: currentColor; }
.resumen { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.resumen__fila { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 10px 14px; font-size: 14px; }
.resumen__fila + .resumen__fila { border-top: 1px solid var(--linea); }
.resumen__etq { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.resumen__val { font-weight: 600; }
.resumen__editar { background: none; border: 0; color: var(--acento-texto); font-size: 14px; font-weight: 700; padding: 4px 6px; }
.veredicto { border-radius: 10px; padding: 14px 16px; display: grid; gap: 6px; }
.veredicto--si { background: var(--ok-suave); }
.veredicto--parcial { background: var(--acento-suave); }
.veredicto--no { background: var(--relleno); border: 1px solid var(--linea); }
.veredicto__titulo { font-weight: 700; font-size: 16px; }
.veredicto--si .veredicto__titulo { color: var(--ok); }
.veredicto--parcial .veredicto__titulo { color: var(--acento-texto); }
.veredicto__texto { font-size: 14px; color: var(--texto-2); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 4px 16px rgba(37, 211, 102, .3); }
.btn--wa:hover { background: var(--wa-hover); }
.asistente__pie { font-family: var(--mono); font-size: 12px; color: var(--marca); letter-spacing: .08em; }

/* ── Movimiento ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
/* mic-extra.css · patrones nuevos de la revisión del 02/09 (tarde).
   Se carga después de mic.css; sustituye los bloques que cambian. */

/* ── Marca con el isotipo real ────────────────────────────────────────── */
.marca__logo { width: 38px; height: 38px; flex-shrink: 0; }
.marca__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Hero con vídeo ───────────────────────────────────────────────────── */
.hero__video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radio);
  overflow: hidden; background: var(--navy); border: 1px solid var(--linea);
}
.hero__video video, .hero__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__video figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
  background: linear-gradient(to top, rgba(26, 36, 48, .92), rgba(26, 36, 48, 0));
  color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}
.hero__figura { display: none; }
@media (min-width: 900px) { .hero__figura { display: block; } }
/* Marcador mientras no exista el vídeo de Flow */
.video-pendiente {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; text-align: center;
  color: rgba(255, 255, 255, .82); padding: 24px;
  background: repeating-linear-gradient(135deg, #1A2430 0 14px, #1F2B39 14px 28px);
}
.video-pendiente span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.video-pendiente b { font-size: 16px; font-weight: 700; color: #fff; display: block; max-width: 26ch; }

/* ── Recorrido horizontal (antipatrón vs sistema) ─────────────────────── */
.recorrido { display: grid; gap: 14px; }
.carril {
  display: grid; gap: 12px; padding: 18px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--fondo);
}
.carril--problema { border-left: 4px solid var(--problema); }
.carril--mic { border-left: 4px solid var(--acento); background: var(--acento-suave); }
.carril__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.carril__nodos { display: grid; gap: 10px; }
@media (min-width: 820px) {
  .carril__nodos { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
  .carril__flecha { display: grid; place-items: center; color: var(--marca); }
  .carril__flecha svg { width: 22px; height: 22px; stroke: currentColor; }
}
.carril__flecha { display: none; }
.nodo {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 14px;
  display: grid; gap: 4px; align-content: start;
}
.nodo__etq { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.nodo__titulo { font-weight: 700; font-size: 16px; line-height: 1.25; }
.nodo__desc { font-size: 14px; color: var(--texto-2); }
.nodo--clave { border: 2px solid var(--acento); box-shadow: 0 0 0 4px rgba(25, 193, 216, .16); position: relative; }
.nodo--clave .nodo__etq { color: var(--acento-texto); }
.nodo__marca {
  position: absolute; top: -11px; left: 12px; background: var(--acento-texto); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.carril__resultado { font-size: 14px; font-weight: 600; }
.carril--problema .carril__resultado { color: var(--problema-texto); }
.carril--mic .carril__resultado { color: var(--acento-texto); }

/* ── Flujo de cinco tramos, con tres marcados ─────────────────────────── */
.tramo--mic { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 3px rgba(25, 193, 216, .14); }
.tramo--mic .tramo__num, .tramo--mic .tramo__nombre { color: var(--acento-texto); }
.flujo__marco {
  margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 16px; color: var(--acento-texto);
}
.flujo__marco b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--acento); }

/* ── Escalera (sprint y credenciales) ─────────────────────────────────── */
.escalera { display: grid; gap: 10px; counter-reset: peldano; }
.peldano {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 18px 18px 18px 16px; border-bottom: 3px solid var(--acento);
}
.peldano__num {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--acento-texto);
  background: var(--acento-suave); border-radius: 8px; width: 44px; height: 44px;
  display: grid; place-items: center;
}
.peldano__titulo { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.peldano__desc { font-size: 16px; color: var(--texto-2); margin-top: 5px; }
.peldano__meta { font-family: var(--sans); font-size: 14px; color: var(--marca); margin-top: 9px; }
@media (min-width: 900px) {
  .escalera { gap: 0; }
  .peldano { margin-left: calc(var(--paso, 0) * 58px); }
  .peldano + .peldano { margin-top: 12px; }
}

/* ── Encaje comercial (sin tarjetas) ──────────────────────────────────── */
.encaje-bloque { display: grid; gap: 26px; }
@media (min-width: 900px) { .encaje-bloque { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } }
.encaje-titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.encaje-titulo--no { color: var(--problema-texto); }
.encaje-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.encaje-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 14px 0; font-size: 16px; }
.encaje-lista li + li { border-top: 1px solid var(--linea); }
.encaje-lista svg { width: 24px; height: 24px; stroke-width: 2.4; margin-top: 1px; }
.encaje-lista--ok svg { stroke: var(--acento-texto); }
.encaje-lista--no { font-size: 16px; color: var(--texto-2); }
.encaje-lista--no svg { stroke: var(--problema); width: 20px; height: 20px; }
.encaje-lista--no li { grid-template-columns: 22px 1fr; padding: 11px 0; }
.encaje-cierre { margin-top: 18px; font-size: 16px; font-weight: 600; }

/* ── Criterio ─────────────────────────────────────────────────────────── */
.criterio { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .criterio { grid-template-columns: 320px 1fr; gap: 52px; } }
.retrato {
  width: 100%; max-width: 320px; margin-inline: auto; aspect-ratio: 4 / 5;
  border-radius: var(--radio); background: var(--relleno); border: 1px solid var(--linea); overflow: hidden;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.retrato__pie {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--marca);
  text-align: center; margin-top: 10px;
}
.criterio__texto { display: grid; gap: 16px; }

/* ── Rejilla comparativa (sección 02) ─────────────────────────────────── */
.rejilla { display: grid; gap: 10px; }
.rejilla__cab { display: none; }
.rejilla__fila {
  display: grid; gap: 10px; padding: 16px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--fondo);
}
.rejilla__fila--problema { border-left: 4px solid var(--problema); }
.rejilla__fila--mic { border-left: 4px solid var(--acento); background: var(--acento-suave); }
.rejilla__etq {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-2); align-self: center;
}
.rejilla__fila--problema .rejilla__etq { color: var(--problema-texto); }
.rejilla__fila--mic .rejilla__etq { color: var(--acento-texto); }
.rejilla__cierre {
  grid-column: 1 / -1; font-size: 14px; font-weight: 600; padding-top: 4px;
  border-top: 1px dashed var(--linea);
}
.rejilla__fila--problema .rejilla__cierre { color: var(--problema-texto); }
.rejilla__fila--mic .rejilla__cierre { color: var(--acento-texto); }
@media (min-width: 900px) {
  .rejilla { gap: 12px; }
  .rejilla__cab {
    display: grid; grid-template-columns: 120px repeat(3, 1fr); gap: 12px; padding: 0 16px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca);
  }
  .rejilla__cab span + span { text-align: left; }
  .rejilla__fila { grid-template-columns: 120px repeat(3, 1fr); align-items: stretch; gap: 12px; padding: 18px 16px; }
  .rejilla__cierre { grid-column: 2 / -1; border-top: 0; padding-top: 0; }
}

/* ── Encaje en V ──────────────────────────────────────────────────────── */
.uve { display: grid; gap: 12px; }
.uve__punto { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.uve__icono {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-texto); flex-shrink: 0;
}
.uve__icono svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; }
.uve__texto { font-size: 16px; font-weight: 600; line-height: 1.35; padding-top: 10px; }
.uve__vertice { display: grid; gap: 12px; justify-items: center; text-align: center; margin-top: 8px; }
.uve__flecha { color: var(--acento-texto); }
.uve__flecha svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; }
.uve__cierre { font-size: 18px; font-weight: 700; max-width: 46ch; }
.uve__descarte { font-size: 14px; color: var(--marca); max-width: 62ch; text-align: center; margin: 18px auto 0; }
@media (min-width: 900px) {
  .uve { grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: start; }
  .uve__punto {
    grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px;
    margin-top: calc(var(--v, 0) * 46px);
  }
  .uve__icono { width: 54px; height: 54px; }
  .uve__icono svg { width: 27px; height: 27px; }
  .uve__texto { padding-top: 0; font-size: 16px; }
  .uve__vertice { grid-column: 1 / -1; margin-top: 24px; }
}

/* ── Diagrama circular: lo que sí hacemos ─────────────────────────────── */
.circulo { display: grid; gap: 12px; }
.circulo__centro {
  display: grid; place-items: center; text-align: center; gap: 4px;
  background: var(--navy); color: #fff; border-radius: 50%; padding: 26px;
  width: 190px; height: 190px; margin-inline: auto;
}
.circulo__centro b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.circulo__centro span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--acento); }
.circulo__item {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px; display: grid; gap: 5px; border-top: 3px solid var(--acento);
}
.circulo__item b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.circulo__item span { font-size: 14px; color: var(--texto-2); }
@media (min-width: 900px) {
  .circulo {
    position: relative; width: 100%; max-width: 780px; margin-inline: auto;
    aspect-ratio: 1 / 0.82; display: block;
  }
  .circulo::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--linea);
  }
  .circulo__centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: 210px; height: 210px; }
  .circulo__item { position: absolute; width: 268px; }
  .circulo__item--1 { left: 0; top: 4%; }
  .circulo__item--2 { right: 0; top: 4%; }
  .circulo__item--3 { left: 0; bottom: 4%; }
  .circulo__item--4 { right: 0; bottom: 4%; }
}

/* ── Cubos: lo que no prometemos ──────────────────────────────────────── */
.cubos { display: grid; gap: 12px; margin-top: 30px; }
@media (min-width: 700px) { .cubos { grid-template-columns: repeat(3, 1fr); } }
.cubo {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--relleno);
  padding: 18px; display: grid; gap: 6px; align-content: start;
}
.cubo__etq {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--problema-texto); display: flex; align-items: center; gap: 7px;
}
.cubo__etq svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; }
.cubo b { font-size: 16px; font-weight: 700; }
.cubo span { font-size: 14px; color: var(--texto-2); }
.cubos__nota { margin-top: 14px; font-size: 14px; color: var(--texto-2); max-width: 72ch; }

/* ── Tira compacta del sprint ─────────────────────────────────────────── */
.tira { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: t; }
@media (min-width: 760px) { .tira { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.tira__paso {
  display: grid; gap: 4px; padding: 16px; border-radius: var(--radio);
  background: var(--fondo); border: 1px solid var(--linea); border-top: 3px solid var(--acento);
}
.tira__num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--acento-texto); }
.tira__nombre { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.tira__meta { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--marca); }
.tira__pie { margin-top: 16px; font-size: 16px; color: var(--texto-2); }

/* ── Insumos del criterio en rejilla 2x2 ──────────────────────────────── */
.insumos { display: grid; gap: 12px; }
@media (min-width: 640px) { .insumos { grid-template-columns: 1fr 1fr; } }
.insumo {
  display: grid; gap: 4px; padding: 16px; border-radius: var(--radio);
  background: var(--fondo); border: 1px solid var(--linea);
}
.insumo__num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--acento-texto); }
.insumo b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.insumo span:last-child { font-size: 14px; color: var(--texto-2); }
/* Dirección B · Mineral cálido. Papel arena, tinta grafito, teal del logo y terracota de apoyo. */
:root {
  --fondo: #FBF9F5;
  --relleno: #F4F0E9;
  --texto: #23282B;
  --texto-2: #5A5F62;
  --linea: #E4DED3;
  --acento: #17B3C8;
  --acento-texto: #0A7385;
  --acento-hover: #085D6C;
  --acento-suave: #DFF2F4;
  --problema: #C9765A;
  --problema-texto: #A15239;
  --problema-suave: #F6E8E1;
  --navy: #23282B;
  --marca: #726D64;   /* 4.89:1 sobre el papel. El #8A857C anterior daba 3.49 y no llegaba al mínimo */
  --sombra: 0 1px 2px rgba(35, 40, 43, .05), 0 10px 28px rgba(35, 40, 43, .07);
}
body { background: var(--fondo); }
.seccion--relleno { background: linear-gradient(180deg, #FBF9F5 0%, #F4F0E9 30%, #F0EBE1 100%); }
.hero { background: radial-gradient(110% 85% at 80% 6%, #EFF7F7 0%, rgba(251,249,245,0) 62%); }
.sintoma, .nodo, .caso, .peldano, .insumo, .tira__paso, .circulo__item, .cubo, .faq details { background: #FFFDFA; border-color: var(--linea); box-shadow: var(--sombra); }
.rejilla__fila { background: #FFFDFA; }
.rejilla__fila--mic { background: linear-gradient(180deg, #EAF6F7 0%, #DFF2F4 100%); }
.btn--primario { background: linear-gradient(135deg, #0C8092 0%, #0A7385 100%); box-shadow: 0 6px 18px rgba(10,115,133,.26); }
.btn--primario:hover { background: linear-gradient(135deg, #0A7385 0%, #085D6C 100%); }
.btn--secundario { background: #FFFDFA; }
.cierre { background: linear-gradient(135deg, #23282B 0%, #2E3A3D 100%); }
.cabecera { background: rgba(251,249,245,.9); }
.retrato, .hero__video { border-color: var(--linea); }

/* ══ Sprint del 03/09/2026 ═════════════════════════════════════════════════
   Iconos, botón flotante, movimiento y ajustes de composición.
   Va al final a propósito: normaliza reglas anteriores por orden de cascada. */

/* ── 2 · Sistema de iconos ──────────────────────────────────────────────
   Antes convivían 17 iconos sin grosor declarado, 4 a 2.2 y 2 a 2. Un solo
   grosor y un solo remate para todos; el color lo hereda del contenedor. */
svg[viewBox="0 0 24 24"] {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
svg[data-relleno] { fill: currentColor; stroke: none; }

/* ── 3 · Botón flotante: solo el círculo de WhatsApp y una burbuja ─────── */
.flotante-zona {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
}
.flotante {
  position: static; flex-shrink: 0;
  width: 58px; height: 58px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  background: var(--wa); color: #fff; border: 0;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: transform var(--dur) ease, background var(--dur) ease, box-shadow var(--dur) ease;
}
.flotante:hover { background: var(--wa-hover); transform: scale(1.06); box-shadow: 0 10px 26px rgba(37, 211, 102, .46); }
.flotante:active { transform: scale(.97); }
.flotante svg { width: 32px; height: 32px; }
.flotante span { display: none; }

.flotante__burbuja {
  position: relative; max-width: 208px;
  background: #FFFDFA; color: var(--texto);
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 11px 28px 11px 14px;
  font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left;
  box-shadow: var(--sombra); cursor: pointer;
}
.flotante__burbuja::after {
  content: ""; position: absolute; right: -7px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; background: #FFFDFA;
  border-right: 1px solid var(--linea); border-top: 1px solid var(--linea);
  transform: rotate(45deg);
}
.flotante__cerrar {
  position: absolute; top: 3px; right: 4px;
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  color: var(--marca); border-radius: 50%; line-height: 1;
  display: grid; place-items: center;
}
.flotante__cerrar svg { width: 13px; height: 13px; }
.flotante__cerrar:hover { background: var(--relleno); color: var(--texto); }
@media (max-width: 400px) { .flotante__burbuja { max-width: 168px; font-size: 13px; } }

/* ── 6 · Dónde estoy, en móvil ─────────────────────────────────────────── */
.cabecera__seccion {
  display: none; font-size: 13px; font-weight: 700; color: var(--acento-texto);
  padding: 5px 10px; border-radius: 999px; background: var(--acento-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
@media (max-width: 899px) { .cabecera__seccion { display: inline-block; } }
.menu-movil a[aria-current="page"] {
  color: var(--acento-texto); font-weight: 700;
  background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento-texto);
}

/* ── 8 · Justificado, solo donde hay ancho que lo sostenga ─────────────── */
.contenedor--lectura p:not(.nota):not(.sub), .faq p {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto;
}

/* ── 1 · Movimiento ────────────────────────────────────────────────────
   Solo opacidad y transform, que el navegador compone en la GPU. Todo se
   apaga con prefers-reduced-motion y nada se oculta si el JS no corre:
   la clase .revelar la pone el propio JS. */
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
  }
  .revelar.visible { opacity: 1; transform: none; will-change: auto; }
}

.btn { transition: background var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primario:hover { box-shadow: 0 10px 24px rgba(10, 115, 133, .32); }
  .sintoma, .nodo, .caso, .peldano, .insumo, .cubo, .circulo__item, .tira__paso, .eje {
    transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
  }
  .sintoma:hover, .nodo:hover, .caso:hover, .peldano:hover, .insumo:hover, .cubo:hover, .circulo__item:hover, .tira__paso:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(35, 40, 43, .05), 0 16px 34px rgba(35, 40, 43, .11);
  }
  .eje:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
  .opcion { transition: transform var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease; }
  .opcion:hover { transform: translateX(3px); border-color: var(--acento-texto); }
  .faq summary { transition: color var(--dur) ease; }
  .faq summary:hover { color: var(--acento-texto); }
}
.btn:active { transform: translateY(0) scale(.985); }

/* ── 7 · La órbita del círculo ─────────────────────────────────────────
   El anillo punteado gira y un punto teal lo recorre. Las tarjetas llegan
   escalonadas desde el centro hacia fuera y se quedan quietas: el texto
   nunca se lee en movimiento. */
.circulo__orbe { display: none; }
@media (min-width: 900px) {
  .circulo__orbe {
    display: block; position: absolute; left: 50%; top: 50%;
    width: 62%; aspect-ratio: 1; pointer-events: none;
    transform: translate(-50%, -50%);
  }
  .circulo__orbe::before {
    content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; border-radius: 50%; background: var(--acento-texto);
    box-shadow: 0 0 0 5px rgba(10, 115, 133, .14);
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .circulo::before { animation: mic-orbita 52s linear infinite; }
  .circulo__orbe { animation: mic-orbita 26s linear infinite; }
}
@keyframes mic-orbita {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Las páginas fuera del menú no tienen enlace activo que marcar, así que la
   etiqueta de sección se muestra también en escritorio. */
@media (min-width: 900px) { .cabecera__seccion--suelta { display: inline-block; } }

/* El punto de la órbita viaja por detrás de las tarjetas, nunca por encima. */
@media (min-width: 900px) {
  .circulo__orbe { z-index: 0; }
  .circulo::before { z-index: 0; }
  .circulo__item, .circulo__centro { z-index: 2; }
}

/* ── Páginas legales: ritmo vertical propio ─────────────────────────────
   El resto del sitio separa con gap de rejilla; aquí el contenido es prosa
   corrida, así que las separaciones van en los propios elementos. */
.texto-legal h2 { margin-top: 34px; margin-bottom: 10px; }
.texto-legal > h2:first-child, .texto-legal .h1 { margin-top: 0; }
.texto-legal p + p { margin-top: 12px; }
.texto-legal .sub { margin-top: 14px; }
.texto-legal .nota { margin-top: 16px; }
@media (min-width: 900px) { .texto-legal h2 { margin-top: 40px; } }

/* ══ Ajustes del 03/09/2026 (2) ════════════════════════════════════════ */

/* ── 1 · El asistente como ventana de chat ─────────────────────────────
   En móvil sigue siendo una hoja que sube desde abajo, que es el patrón
   correcto ahí. En escritorio se ancla junto al botón de WhatsApp, sin velo
   oscuro, como una ventana de chat. El velo sigue existiendo para cerrar al
   pulsar fuera, pero transparente. */
@media (min-width: 640px) {
  .asistente__velo { background: transparent; }
  .asistente__panel {
    left: auto; right: 16px;
    top: auto; bottom: 88px;
    transform: none;
    width: min(400px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 120px));
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(35, 40, 43, .12), 0 30px 70px rgba(35, 40, 43, .22);
    border: 1px solid var(--linea);
  }
}
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .asistente[data-abierto="true"] .asistente__panel { animation: mic-chat-entra .28s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes mic-chat-entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* La cabecera del panel, con el verde de WhatsApp: es una conversación. */
.asistente__cab { background: var(--fondo); }
.asistente__acciones-cab { display: flex; align-items: center; gap: 4px; }

/* ── 2 · Reiniciar las respuestas ──────────────────────────────────────── */
.asistente__reiniciar {
  display: none; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--marca);
  transition: color var(--dur) ease, background var(--dur) ease;
}
.asistente__reiniciar[data-visible="true"] { display: inline-flex; }
.asistente__reiniciar:hover { color: var(--acento-texto); background: var(--acento-suave); }
.asistente__reiniciar svg { width: 15px; height: 15px; }

/* ── 3 · Las tarjetas se encienden en verde agua ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .sintoma:hover, .nodo:hover, .caso:hover, .peldano:hover, .insumo:hover,
  .cubo:hover, .circulo__item:hover, .tira__paso:hover {
    border-color: var(--acento-texto);
    box-shadow: 0 0 0 3px var(--acento-suave), 0 16px 34px rgba(10, 115, 133, .20);
  }
  .sintoma:hover .sintoma__titulo, .nodo:hover .nodo__titulo,
  .peldano:hover .peldano__titulo, .circulo__item:hover b, .insumo:hover b, .cubo:hover b {
    color: var(--acento-texto);
  }
  .cubo:hover { border-color: var(--problema); box-shadow: 0 0 0 3px var(--problema-suave), 0 16px 34px rgba(201, 118, 90, .16); }
  .cubo:hover b { color: var(--problema-texto); }
}

/* ── 5 · Los cinco puntos del encaje entran uno a uno ──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .revelar .uve__icono, .uve__punto.revelar .uve__icono {
    transform: scale(.6); opacity: 0;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .revelar.visible .uve__icono { transform: none; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .uve__punto .uve__icono { transition: transform var(--dur) ease, background var(--dur) ease, color var(--dur) ease; }
  .uve__punto:hover .uve__icono { transform: scale(1.1); background: var(--acento-texto); color: #fff; }
}

/* ── 7 · Los cinco principios: entrada y encendido al pasar el ratón ───── */
.lista li, .encaje-lista li { border-radius: 10px; transition: background var(--dur) ease, color var(--dur) ease; }
.encaje-lista li { padding-inline: 10px; margin-inline: -10px; }
.lista li svg, .encaje-lista li svg { color: var(--acento-texto); transition: color var(--dur) ease, transform var(--dur) ease; }
@media (hover: hover) and (pointer: fine) {
  .lista li:hover, .encaje-lista--ok li:hover { background: var(--acento-suave); }
  .lista li:hover strong, .encaje-lista--ok li:hover strong { color: var(--acento-texto); }
  .lista li:hover svg, .encaje-lista--ok li:hover svg { color: var(--acento-texto); stroke: var(--acento-texto); transform: scale(1.15); }
}

/* ── 6 · El núcleo deja de ser un disco plano ──────────────────────────
   Anillo segmentado en cuatro arcos, uno por tarjeta, que se encienden en
   verde agua al llegar. Y conectores que llenan de significado el hueco que
   antes solo separaba. */
.circulo__centro { position: relative; }
.circulo__centro::before,
.circulo__centro::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.circulo__centro::before { display: none; }
.circulo__centro::after  { inset: -20px; border: 1px solid rgba(10, 115, 133, .18); }

@media (min-width: 900px) {
  /* Más compacto: de 780x640 a 700x500, y las tarjetas más cerca del núcleo. */
  .circulo { max-width: 700px; aspect-ratio: 1 / 0.72; }
  .circulo::before { width: 54%; }
  .circulo__orbe { width: 54%; }
  .circulo__centro { width: 206px; height: 206px; padding: 20px; }
  .circulo__item { width: 248px; }
  .circulo__item--1 { left: 0; top: 7%; }
  .circulo__item--2 { right: 0; top: 7%; }
  .circulo__item--3 { left: 0; bottom: 7%; }
  .circulo__item--4 { right: 0; bottom: 7%; }

  /* Conectores del núcleo a cada tarjeta. */
  .circulo__hilos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
  .circulo__hilos line { stroke: var(--linea); stroke-width: 1.5; }
}
.circulo__hilos { display: none; }
@media (min-width: 900px) { .circulo__hilos { display: block; } }

/* El anillo segmentado: cuatro arcos, uno por tarjeta, girando despacio en
   sentido contrario al anillo exterior. Da profundidad al núcleo sin añadir
   nada que haya que leer. */
.circulo__arcos {
  position: absolute; inset: -11px; width: auto; height: auto; overflow: visible;
  pointer-events: none;
}
.circulo__arcos circle {
  fill: none; stroke: var(--acento-texto); stroke-width: 2.4;
  stroke-dasharray: 58 14.25; stroke-linecap: round; opacity: .55;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .circulo__arcos { animation: mic-arcos 38s linear infinite; }
}
@keyframes mic-arcos { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* «SPRINT DE 4 SEMANAS» en una sola línea dentro del núcleo. */
@media (min-width: 900px) { .circulo__centro span { font-size: 11px; letter-spacing: .06em; } }

/* Con el chat abierto la burbuja sobra: dice lo que ya estás haciendo. */
.asistente[data-abierto="true"] ~ .flotante-zona .flotante__burbuja,
body:has(.asistente[data-abierto="true"]) .flotante__burbuja { display: none; }

/* ── Regla de color del sistema ────────────────────────────────────────
   Sobre papel claro manda el teal --acento-texto #0A7385, que es el de la
   cabecera y da 5.25:1. El cian --acento #17B3C8 solo da 2.40:1 sobre papel,
   así que se reserva para fondo oscuro: dentro del núcleo del círculo y en
   el botón invertido del cierre, donde llega a 5.9:1. */

/* Las preguntas son encabezados reales dentro del summary: dan jerarquía a un
   rastreador que no interpreta <details>, sin cambiar cómo se ven ni cómo se
   pliegan. El h3 hereda del summary para que nada se mueva. */
.faq summary h3 { font: inherit; margin: 0; letter-spacing: inherit; line-height: inherit; text-wrap: pretty; }