/* Sistema de diseño del sitio: tokens, claro/oscuro, responsive y micro-animaciones discretas. */

:root {
  --fondo: #f6f7fb;
  --superficie: #ffffff;
  --superficie-2: #f0f2f8;
  --borde: #e2e5ee;
  --texto: #171a23;
  --texto-suave: #5b6275;
  --acento: #4f46e5;
  --acento-texto: #ffffff;
  --acento-suave: #eceafe;
  --ok: #0f8a5f;
  --ok-suave: #e3f6ee;
  --alerta: #b45309;
  --alerta-suave: #fdf1e1;
  --peligro: #c2273d;
  --peligro-suave: #fde8eb;
  --info: #2563eb;
  --info-suave: #e6eefe;
  --sombra: 0 1px 2px rgba(20, 24, 40, .06), 0 4px 16px rgba(20, 24, 40, .06);
  --radio: 14px;
  --radio-chico: 9px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --ancho: 1120px;
  --rapido: 160ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0e1017; --superficie: #161925; --superficie-2: #1d2131; --borde: #2a2f42;
    --texto: #eceef5; --texto-suave: #9aa1b5; --acento: #8b84ff; --acento-texto: #0e1017;
    --acento-suave: #25234a; --ok: #3ccf91; --ok-suave: #12322a; --alerta: #f0a54a; --alerta-suave: #3a2a14;
    --peligro: #ff6b80; --peligro-suave: #3d1820; --info: #6ea2ff; --info-suave: #172645;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0e1017; --superficie: #161925; --superficie-2: #1d2131; --borde: #2a2f42;
  --texto: #eceef5; --texto-suave: #9aa1b5; --acento: #8b84ff; --acento-texto: #0e1017;
  --acento-suave: #25234a; --ok: #3ccf91; --ok-suave: #12322a; --alerta: #f0a54a; --alerta-suave: #3a2a14;
  --peligro: #ff6b80; --peligro-suave: #3d1820; --info: #6ea2ff; --info-suave: #172645;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.55 var(--fuente);
  min-height: 100vh; display: flex; flex-direction: column;
  transition: background var(--rapido), color var(--rapido);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); font-size: .88em; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--superficie-2); padding: 12px;
      border-radius: var(--radio-chico); margin: 0; max-height: 360px; overflow: auto; }
.suave { color: var(--texto-suave); }
.chico { font-size: .86rem; }

/* ---- encabezado ---- */
.encabezado { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--borde); }
.encabezado .contenedor { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marca { font-weight: 700; font-size: 1.08rem; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.marca:hover { text-decoration: none; }
.marca .punto { width: 12px; height: 12px; border-radius: 4px; background: var(--acento); display: inline-block;
  transition: transform var(--rapido); }
.marca:hover .punto { transform: rotate(45deg); }
.zona { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 999px; padding: 2px 8px; }
.menu { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.menu a, .menu button.enlace { color: var(--texto-suave); padding: 7px 11px; border-radius: var(--radio-chico);
  font-weight: 500; transition: background var(--rapido), color var(--rapido); }
.menu a:hover, .menu button.enlace:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.menu a.activo { color: var(--acento); background: var(--acento-suave); }
/* El menú de operación es largo: si no cabe en una línea, pasa a dos alineado a la derecha (nunca desborda). */
.zona-operacion .menu { gap: 2px; flex-wrap: wrap; justify-content: flex-end; padding: 6px 0; }
.zona-operacion .menu a, .zona-operacion .menu button.enlace { padding: 6px 7px; font-size: .88rem; white-space: nowrap; }
.menu form { margin: 0; }
.tema { background: none; border: 1px solid var(--borde); color: var(--texto-suave); border-radius: var(--radio-chico);
  width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center;
  transition: transform var(--rapido), background var(--rapido); }
.tema:hover { background: var(--superficie-2); transform: rotate(-12deg); }
.tema.abrir-menu { display: none; margin-left: auto; }

/* ---- contenido ---- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
main { flex: 1; padding: 28px 0 48px; animation: aparecer 260ms ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pie { border-top: 1px solid var(--borde); padding: 18px 0; color: var(--texto-suave); font-size: .85rem; }

.titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; }
.titulo h1 { margin: 0; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: 4px; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; margin-bottom: 18px; }
.tarjeta > h2:first-child { margin-top: 0; }
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px;
  transition: transform var(--rapido), box-shadow var(--rapido); color: var(--texto); display: block; }
a.cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra); text-decoration: none; }
.cifra .numero { font-size: 1.5rem; font-weight: 700; }
.cifra .etiqueta { color: var(--texto-suave); font-size: .85rem; }
.centrado { max-width: 420px; margin: 4vh auto 0; }

/* ---- botones ---- */
.boton, button.boton { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
  background: var(--acento); color: var(--acento-texto); padding: 9px 16px; border-radius: var(--radio-chico);
  font: 600 .92rem var(--fuente); cursor: pointer; text-decoration: none;
  transition: transform var(--rapido), filter var(--rapido), background var(--rapido); }
.boton:hover { filter: brightness(1.07); text-decoration: none; }
.boton:active { transform: scale(.97); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.peligro { background: var(--peligro); color: #fff; }
.boton.ancho { width: 100%; justify-content: center; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button.enlace { background: none; border: 0; font: inherit; cursor: pointer; }

/* ---- formularios ---- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.campo .ayuda { color: var(--texto-suave); font-size: .82rem; margin-top: 4px; }
.campo .error, .errores { color: var(--peligro); font-size: .86rem; margin-top: 4px; }
.errores ul, .campo .error ul { margin: 0; padding-left: 18px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number],
select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto); font: inherit;
  transition: border-color var(--rapido), box-shadow var(--rapido); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acento); vertical-align: middle; }
.campo.casilla label { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { margin: 0; flex: 1 1 160px; }
.filtros .campo label { font-size: .78rem; color: var(--texto-suave); }

/* ---- tablas: en el teléfono cada fila se vuelve una tarjeta ---- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla td code, .tabla td .error { overflow-wrap: anywhere; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tr:last-child td { border-bottom: 0; }
.vacio { text-align: center; color: var(--texto-suave); padding: 28px 10px; }
@media (max-width: 720px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border: 1px solid var(--borde); border-radius: var(--radio-chico); margin-bottom: 10px; padding: 6px 4px; }
  .tabla td { border: 0; padding: 5px 10px; }
  .tabla td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
}

/* ---- insignias y mensajes ---- */
.insignia { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; }
.insignia.ok { background: var(--ok-suave); color: var(--ok); }
.insignia.alerta { background: var(--alerta-suave); color: var(--alerta); }
.insignia.peligro { background: var(--peligro-suave); color: var(--peligro); }
.insignia.info { background: var(--info-suave); color: var(--info); }
.insignia.acento { background: var(--acento-suave); color: var(--acento); }
a.insignia { text-decoration: none; transition: transform 150ms ease; }
a.insignia:hover { transform: translateY(-1px); }
.insignia.apagada { opacity: .55; }
.insignias { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mensajes { list-style: none; padding: 0; margin: 0 0 18px; }
.mensaje { padding: 11px 14px; border-radius: var(--radio-chico); margin-bottom: 8px; background: var(--info-suave);
  color: var(--texto); border-left: 4px solid var(--info); animation: aparecer 260ms ease-out; }
.mensaje.success { background: var(--ok-suave); border-color: var(--ok); }
.mensaje.error { background: var(--peligro-suave); border-color: var(--peligro); }
.mensaje.warning { background: var(--alerta-suave); border-color: var(--alerta); }
.aviso-simulado { background: var(--alerta-suave); border: 1px dashed var(--alerta); color: var(--texto);
  border-radius: var(--radio-chico); padding: 10px 14px; margin-bottom: 16px; font-size: .9rem; }

details > summary { cursor: pointer; color: var(--texto-suave); font-size: .85rem; }
details[open] > summary { margin-bottom: 6px; }
dl.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--texto-suave); }
dl.datos dd { margin: 0; word-break: break-word; }
dl.datos dd .insignia { white-space: normal; }

.paginas { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ---- zona pública ---- */
.boton.grande { padding: 13px 22px; font-size: 1.02rem; border-radius: var(--radio); }
.menu .boton.chico-boton { color: var(--acento-texto); padding: 7px 13px; }
.menu .boton.chico-boton:hover { background: var(--acento); color: var(--acento-texto); }
.idiomas { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; margin: 0; }
.idioma { background: none; border: 0; padding: 7px 9px; font: 600 .78rem var(--fuente); color: var(--texto-suave);
  cursor: pointer; transition: background var(--rapido), color var(--rapido); }
.idioma:hover { background: var(--superficie-2); color: var(--texto); }
.idioma.activo { background: var(--acento-suave); color: var(--acento); }
.pie-publico { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.pie-enlaces { display: flex; gap: 14px; flex-wrap: wrap; }
.pie-enlaces a { color: var(--texto-suave); }

.portada { padding: 8px 0 18px; }
.portada h1 { font-size: clamp(1.55rem, 4.2vw, 2.5rem); max-width: 22ch; margin-bottom: 14px; letter-spacing: -.02em; }
.portada-chica h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); max-width: none; }
.portada-dos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 16px; }
.portada-item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.portada-item p { margin: 6px 0 0; }
.destacado { font-size: 1.08rem; color: var(--texto); }
.seccion { margin: 34px 0; }
.seccion > h2 { font-size: 1.35rem; }
.texto-largo { max-width: 70ch; }
.lista { margin: 0 0 1em; padding-left: 20px; }
.lista li { margin-bottom: 6px; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: paso; }
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 16px 14px 56px;
  position: relative; counter-increment: paso; transition: transform var(--rapido), box-shadow var(--rapido); }
.paso:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.paso::before { content: counter(paso); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 9px;
  background: var(--acento-suave); color: var(--acento); font-weight: 700; display: grid; place-items: center; }
.paso h3 { margin-bottom: 4px; }
.paso p { margin: 0; color: var(--texto-suave); }
.preguntas { max-width: 76ch; }
details.pregunta { border-bottom: 1px solid var(--borde); padding: 12px 0; }
details.pregunta > summary { font-weight: 600; color: var(--texto); font-size: 1rem; list-style-position: inside; }
details.pregunta[open] > summary { margin-bottom: 8px; }
.mapa-ejemplo { display: grid; gap: 12px; grid-template-columns: minmax(220px, 1fr) 2fr; align-items: start; }
.mapa-area { background: var(--acento-suave); border-radius: var(--radio); padding: 16px; }
.mapa-area h3 { margin: 8px 0 4px; }
.mapa-area p { margin: 0; }
.mapa-funciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mapa-funciones li { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento);
  border-radius: var(--radio-chico); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.cierre { text-align: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 28px 16px; }
.cierre p { max-width: 56ch; margin: 0 auto 16px; }
.pesos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.peso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.peso p { margin: 8px 0 0; }
.desde { list-style: none; padding: 0; margin: 0 0 12px; }
.desde li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.documento { max-width: 78ch; }
.documento h2 { margin-top: 1.6em; }

/* ---- diagnóstico ---- */
.estrecho { max-width: 680px; margin: 0 auto; }
.senales { list-style: none; padding: 0; margin: 0 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.senales li { background: var(--ok-suave); color: var(--ok); border-radius: 999px; padding: 3px 11px; font-size: .84rem; font-weight: 600; }
.progreso { height: 6px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progreso span { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width 400ms ease; }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.globo { max-width: 88%; padding: 10px 14px; border-radius: 16px; animation: aparecer 260ms ease-out; word-break: break-word; }
.globo.nuestro { background: var(--superficie); border: 1px solid var(--borde); align-self: flex-start; border-bottom-left-radius: 5px; }
.globo.suyo { background: var(--acento-suave); align-self: flex-end; border-bottom-right-radius: 5px; }
.globo.actual { border-color: var(--acento); font-weight: 600; box-shadow: var(--sombra); }
.globo.entendido { background: var(--info-suave); border-color: transparent; }
.chat.chico .globo { font-size: .88rem; padding: 7px 11px; }
.responder textarea { min-height: 120px; }
.campo ul, .campo div[id] > div { list-style: none; padding: 0; margin: 0; }
.campo input[type=radio] { width: 18px; height: 18px; accent-color: var(--acento); vertical-align: middle; margin-right: 8px; }
.campo label:has(input[type=radio]) { font-weight: 500; display: flex; align-items: center; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); margin-bottom: 8px; cursor: pointer; }
.campo label:has(input[type=radio]:checked) { border-color: var(--acento); background: var(--acento-suave); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.consejo { background: var(--alerta-suave); border-left: 4px solid var(--alerta); border-radius: var(--radio-chico);
  padding: 10px 14px; margin: 0 0 14px; }
.nota { border-top: 1px solid var(--borde); padding: 10px 0; }

/* ---- contratación: entrevista, cotización, propuesta, contrato y pago ---- */
.ancho-medio { max-width: 820px; }
.adjunto { font-size: .86rem; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borde); }
.voz { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.voz .grabando { background: var(--peligro); color: #fff; border-color: transparent; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { filter: brightness(1.2); } }
.subir-voz input[type=file] { max-width: 100%; }
input[type=file] { font: inherit; color: var(--texto-suave); max-width: 100%; }
.cierre-entrevista { text-align: center; }
.cierre-entrevista p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.area-funciones { margin-bottom: 14px; }
.area-funciones h3 { margin: 10px 0 8px; color: var(--texto-suave); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.fila-funcion { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.resumen-pesos { margin: 6px 0 10px; }
.explica-pesos { margin-bottom: 12px; }
.explica-pesos .pesos { margin-top: 8px; }
.precio-cotizacion { text-align: left; }
.precio-grande { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 750; letter-spacing: -.02em; margin: 2px 0 6px; }
.precio-medio { font-size: 1.15rem; }
.nota-propuesta { border-left: 4px solid var(--acento); padding: 6px 12px; background: var(--acento-suave); border-radius: var(--radio-chico); }
.consejo.listo { background: var(--ok-suave); border-color: var(--ok); }
.contrato { font-size: .96rem; }
.contrato p { margin-bottom: .9em; }
.forma-chica { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.forma-chica select, .forma-chica input[type=text] { width: auto; flex: 1 1 140px; padding: 6px 9px; }
.listo-enviar { border-color: var(--ok); }
.alerta-cobro { border-color: var(--peligro); }

@media (max-width: 720px) {
  .mapa-ejemplo { grid-template-columns: 1fr; }
  .seccion { margin: 26px 0; }
  .portada-item { padding: 10px 12px; }
}

/* ---- teléfono ---- */
@media (max-width: 820px) {
  .tema.abrir-menu { display: grid; }
  .menu { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 8px 16px 14px; box-shadow: var(--sombra); }
  .menu.abierto { display: flex; animation: aparecer 180ms ease-out; }
  .menu a, .menu button.enlace { padding: 11px 10px; text-align: left; width: 100%; }
  h1 { font-size: 1.4rem; }
  main { padding-top: 20px; }
  dl.datos { grid-template-columns: 1fr; gap: 2px; }
  dl.datos dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Alta del cliente: cada punto de la lista de arranque es una tarjeta; lo listo se aquieta. */
.punto-arranque { border-left: 4px solid var(--alerta); transition: border-color 200ms ease, opacity 200ms ease; }
.punto-arranque.listo { border-left-color: var(--ok); opacity: .85; }
.punto-arranque .lista { margin-top: 8px; }
details > summary { cursor: pointer; color: var(--acento); margin: 4px 0; }

/* Rutas y enlaces largos (bitácora, enlaces del buzón) cortan línea en el teléfono. */
code { overflow-wrap: anywhere; }

/* Avisos del portal: lo no leído se marca con un punto y el número en el menú. */
.contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-size: .72rem; font-weight: 700;
  animation: aparecer 260ms ease-out; }
.fila-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 6px; border-bottom: 1px solid var(--borde);
  color: var(--texto); border-radius: var(--radio-chico); transition: background var(--rapido); }
.fila-aviso:last-child { border-bottom: 0; }
.fila-aviso:hover { background: var(--superficie-2); text-decoration: none; }
.fila-aviso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.fila-aviso strong { font-weight: 500; }
.fila-aviso.no-leido strong { font-weight: 700; }
.punto-aviso { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: transparent; }
.fila-aviso.no-leido .punto-aviso { background: var(--acento); }
.cuerpo-aviso { overflow-wrap: anywhere; }
.cuerpo-aviso p:last-child { margin-bottom: 0; }

/* Evidencia: cada archivo con su origen y hasta cuándo se guarda. */
.archivo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.archivo:last-child { border-bottom: 0; }
.archivo-icono { flex: 0 0 38px; height: 38px; border-radius: var(--radio-chico); display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento); font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; }
.archivo-cuerpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.archivo-cuerpo .para-que { margin: 2px 0; }
.archivo-acciones { flex: 0 0 auto; }
@media (max-width: 560px) {
  .archivo { flex-wrap: wrap; }
  .archivo-acciones { flex-basis: 100%; padding-left: 50px; }
}

/* Portal: «Mi proyecto» responde tres preguntas; en el teléfono, su resumen cabe en la primera pantalla. */
.resumen-portal { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.resumen-item { display: flex; flex-direction: column; gap: 3px; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio); padding: 12px 14px;
  transition: transform var(--rapido), box-shadow var(--rapido); }
.resumen-item:hover { transform: translateY(-2px); box-shadow: var(--sombra); text-decoration: none; }
.resumen-item strong { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.resumen-etiqueta { color: var(--texto-suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.pendientes { list-style: none; padding: 0; margin: 0; }
.pendientes li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--borde); }
.pendientes li:first-child { border-top: 0; }
.pendientes li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.mapa-funciones { align-content: start; }
.mapa-funciones .estado-funcion { align-self: flex-start; margin-top: 4px; }
.mapa-funciones li.estado-lista { border-left-color: var(--ok); }
.mapa-funciones li.estado-en_construccion { border-left-color: var(--alerta); }
.mapa-funciones li.estado-por_construir { border-left-color: var(--borde); }
@media (max-width: 720px) {
  .resumen-portal { grid-template-columns: 1fr; gap: 8px; }
  .resumen-item { padding: 9px 12px; }
}

/* Avance: el monitor del proyecto y la marca de cada función */
.monitor { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.monitor-caja { display: flex; flex-direction: column; gap: 4px; background: var(--superficie-2); border-radius: var(--radio-chico);
  padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.monitor-caja.ahora { background: var(--acento-suave); }
.linea-tiempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 6px 0 6px 14px; overflow-wrap: anywhere; animation: aparecer 260ms ease-out; }
.linea-tiempo li::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--acento); }
.linea-tiempo .linea-termino::before, .linea-tiempo .linea-en_pruebas::before { background: var(--ok); border-color: var(--ok); }
.linea-tiempo time { color: var(--texto-suave); font-size: .82rem; margin-right: 6px; }
[data-refrescar] { transition: box-shadow 400ms ease; }
[data-refrescar].refrescado { box-shadow: 0 0 0 2px var(--acento-suave); }
.resumen-avance { margin: 0 0 6px; }
.funcion-avance { border-left: 4px solid var(--borde); padding-left: 10px; }
.funcion-avance.marca-confirmada { border-left-color: var(--ok); }
.funcion-avance.marca-por_confirmar { border-left-color: var(--alerta); }
.funcion-avance.marca-ajustando, .funcion-avance.marca-en_construccion { border-left-color: var(--info); }
/* Versiones y pedidos */
.version, .pedido { padding: 12px 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.version:last-child, .pedido:last-child { border-bottom: 0; }
.version-nueva { background: var(--acento-suave); border-radius: var(--radio-chico); padding: 12px; border-bottom: 0; margin: 4px 0; }
.version form, .pedido form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.alerta-fila .fila-funcion { align-items: center; }
.propuestas-funcion { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding-left: 12px;
  border-left: 2px solid var(--alerta-suave); }

/* ---- tablero de la fábrica: lo que necesita algo, marcado; lo que va bien, en una línea ---- */
.tabla.tablero td { font-size: .9rem; }
.tablero tr.atencion td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.tablero tr.va-bien td { padding-top: 6px; padding-bottom: 6px; color: var(--texto-suave); }
.tablero tr.va-bien td div { display: inline; }
.tablero tr.va-bien td > * + div::before { content: " · "; }
.motivos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.motivos a:hover { text-decoration: none; filter: brightness(.95); }
@media (max-width: 720px) {
  .tablero tr.atencion { border-left: 3px solid var(--alerta); }
  .tablero tr.atencion td:first-child { box-shadow: none; }
  .tablero tr.va-bien td div { display: block; }
  .tablero tr.va-bien td > * + div::before { content: none; }
}

/* ---- indicadores: el embudo, de la visita a la suscripción ---- */
.embudo { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.embudo li { display: grid; grid-template-columns: minmax(150px, 230px) 1fr minmax(110px, auto); gap: 12px; align-items: center;
  animation: aparecer 260ms ease-out both; }
.embudo .barra { height: 10px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.embudo .barra span { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width 400ms ease; }
.embudo .cuanto { text-align: right; font-variant-numeric: tabular-nums; }
.embudo .cuanto strong { font-size: 1.05rem; }
.tabla .numero-celda { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .embudo li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .embudo .barra { grid-column: 1 / -1; order: 3; }
}

/* ---- errores reportados: los cuatro estados de su corrección ---- */
.etapas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 4px; }
.etapas li { font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave);
  transition: background 200ms ease, color 200ms ease; }
.etapas li time { font-size: .74rem; opacity: .85; margin-left: 2px; }
.etapas li.hecha { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etapas li.actual { background: var(--info-suave); color: var(--info); border-color: transparent; font-weight: 600;
  animation: aparecer 260ms ease-out both; }
img.captura { display: block; max-width: 100%; max-height: 420px; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  margin-top: 10px; background: var(--superficie-2); }

/* ---- uso de la plataforma entregada: personas activas por semana y cada parte ---- */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin: 24px 0 4px; }
.barras .barra { position: relative; flex: 1; max-width: 46px; min-height: 4px; background: var(--acento-suave);
  border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: crecer 420ms ease-out both; }
.barras .barra.actual { background: var(--acento); }
.barras .barra span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: .72rem;
  color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.barras-etiquetas { display: flex; gap: 6px; font-size: .72rem; color: var(--texto-suave); margin-bottom: 8px; }
.barras-etiquetas span { flex: 1; max-width: 46px; text-align: center; white-space: nowrap; overflow: hidden; }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.partes-uso { list-style: none; padding: 0; margin: 0 0 10px; }
.partes-uso li { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.partes-uso li:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .barras .barra { animation: none; } }

/* ---- portada: la demostración (una persona cuenta su negocio y se vuelve mapa y programa) ---- */
:root { --voz: #7a4a1c; --voz-suave: #fbf3e8;
  --relato: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --voz: #e8c49a; --voz-suave: #2a2118; } }
:root[data-tema="oscuro"] { --voz: #e8c49a; --voz-suave: #2a2118; }

.portada-demo { padding-top: 14px; }
.portada-demo h1 { font-family: var(--relato); font-weight: 500; font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.08;
  max-width: 26ch; text-wrap: balance; letter-spacing: -.01em; }
.portada-demo h1 em { color: var(--acento); }
.portada-demo .sub { color: var(--texto-suave); max-width: 62ch; font-size: 1.02rem; margin-bottom: 14px; }
.actos { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 16px; }
.actos li { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
  transition: background .4s, color .4s, border-color .4s; }
.actos li.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.actos li.hecho { color: var(--ok); border-color: var(--ok); }

.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px 28px; align-items: start; }
.demo-voz { background: var(--voz-suave); border-radius: var(--radio); padding: 16px 18px 12px; }
.quien { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cara { width: 42px; height: 42px; border-radius: 50%; background: var(--voz); color: var(--voz-suave); display: grid;
  place-items: center; font-family: var(--relato); font-size: 1.25rem; flex: none; }
.quien b { display: block; font-size: .9rem; }
.quien span { font-size: .8rem; color: var(--texto-suave); }
.onda { display: flex; gap: 3px; align-items: center; height: 22px; margin-left: auto; flex: none; }
.onda i { width: 3px; height: 6px; border-radius: 2px; background: var(--voz); opacity: .35; }
.relato { list-style: none; margin: 0; padding: 0; font-family: var(--relato); font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  line-height: 1.42; color: var(--voz); }
.relato .linea { margin: 0 0 .4em; }
.nota-demo { margin: 8px 0 0; }
.escena { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden; }
.escena .cab { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--borde); font-size: .8rem; }
.escena .estado { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--texto-suave); }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.lienzo { padding: 6px; background-size: 30px 30px;
  background-image: linear-gradient(color-mix(in srgb, var(--borde) 55%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--borde) 55%, transparent) 1px, transparent 1px); }
.mapa-svg { display: block; width: 100%; height: auto; }
.mapa-svg.mapa-angosto { display: none; }
.mapa-svg .area rect { fill: var(--superficie-2); stroke: var(--borde); stroke-width: 1.2; }
.mapa-svg .area-titulo { font: 600 12.5px var(--fuente); fill: var(--texto); letter-spacing: .04em; }
.mapa-svg .area-sub { font: 500 11px var(--fuente); fill: var(--texto-suave); }
.mapa-svg .chip rect { fill: var(--acento-suave); stroke: var(--acento); stroke-width: 1; }
.mapa-svg .chip text { font: 500 12px var(--fuente); fill: var(--texto); }
.mapa-svg .chip.ojo rect { fill: var(--alerta-suave); stroke: var(--alerta); }
.mapa-svg .flecha { fill: none; stroke: var(--acento); stroke-width: 1.6; }
.mapa-svg .punta { fill: var(--acento); }
.mapa-svg .area, .mapa-svg .chip { transform-box: fill-box; transform-origin: center; }
.pie-escena { font-size: .78rem; color: var(--texto-suave); padding: 8px 14px; border-top: 1px solid var(--borde);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.programa { grid-column: 1 / -1; }
.programa > h3 { font-size: .95rem; color: var(--texto-suave); margin: 0 0 10px; }
.pantallas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pantalla, .maqueta-cuerpo { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; min-width: 0; }
.pantalla { border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); padding: 12px;
  box-shadow: var(--sombra); }
.pantalla h4, .maqueta-cuerpo h4 { margin: 0 0 2px; font-size: .88rem; }
.pantalla .fila, .maqueta .fila { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px;
  background: var(--fondo); border-radius: 6px; border: 1px solid var(--borde); }
.pantalla .fila span:first-child, .maqueta .fila span:first-child { min-width: 0; overflow-wrap: anywhere; }
.etq { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; align-self: center; }
.etq.ok { background: var(--ok-suave); color: var(--ok); }
.etq.alerta { background: var(--alerta-suave); color: var(--alerta); }
.etq.info { background: var(--acento-suave); color: var(--acento); }
.barra-h { display: grid; grid-template-columns: minmax(70px, 40%) 1fr auto; align-items: center; gap: 8px; }
.barra-h span:first-child { overflow-wrap: anywhere; }
.barra-h i { display: block; height: 8px; border-radius: 4px; background: var(--acento); width: var(--w); }
.barra-h span:last-child { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.pantalla-cifra { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pantalla-cifra small { font-size: .72rem; font-weight: 500; color: var(--texto-suave); }
.nota-pantalla { margin: 0; color: var(--texto-suave); }
.leyenda { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.leyenda div { padding: 10px 14px; border-left: 3px solid var(--borde); transition: border-color .4s; }
.leyenda div.activo { border-color: var(--acento); }
.leyenda b { display: block; font-size: .85rem; margin-bottom: 3px; }
.leyenda p { margin: 0; font-size: .86rem; color: var(--texto-suave); }

/* la animación solo revela lo que ya está en la página; con «reducir movimiento» no corre */
@media (prefers-reduced-motion: no-preference) {
  .demo [data-paso] { transition: opacity .55s ease, transform .55s ease; }
  .demo.animando [data-paso]:not(.visto) { opacity: 0; }
  .demo.animando .linea:not(.visto), .demo.animando .programa:not(.visto) { transform: translateY(8px); }
  .demo.animando .chip:not(.visto), .demo.animando .area:not(.visto) { transform: scale(.92); }
  .demo.animando .linea.visto.pasada { opacity: .5; }
  .demo.hablando .onda i { animation: onda .9s ease-in-out infinite; opacity: 1; }
  .onda i:nth-child(2) { animation-delay: .15s; } .onda i:nth-child(3) { animation-delay: .3s; }
  .onda i:nth-child(4) { animation-delay: .1s; } .onda i:nth-child(5) { animation-delay: .25s; }
}
@keyframes onda { 0%, 100% { height: 5px; } 50% { height: 20px; } }

/* ---- portada: hechos, tu espacio, ejemplos y calculadora ---- */
.hechos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hecho h3 { margin-bottom: 6px; }
.hecho p { margin: 0; color: var(--texto-suave); }
.garantia { margin: 16px 0 0; font-weight: 600; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.garantia a { font-weight: 500; }
.titulo-seccion { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.ilustraciones { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.maqueta { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.maqueta-barra { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--borde);
  background: var(--superficie-2); font-size: .74rem; }
.maqueta-barra span { width: 8px; height: 8px; border-radius: 50%; background: var(--borde); }
.maqueta-barra b { margin-left: 6px; font-weight: 600; color: var(--texto-suave); }
.maqueta-cuerpo { padding: 12px; flex: 1; }
.maqueta figcaption { padding: 8px 12px 12px; font-size: .82rem; color: var(--texto-suave); }
.lista-ejemplos { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tarjeta-ejemplo { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido); }
.tarjeta-ejemplo .insignia { align-self: flex-start; }
.tarjeta-ejemplo:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--acento); }
.tarjeta-ejemplo > span:last-child { color: var(--acento); margin-top: auto; }
.calculadora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.calculadora fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.calculadora legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.calc-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-opcion { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borde);
  border-radius: 999px; cursor: pointer; background: var(--superficie); font-size: .9rem; }
.calc-opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.calc-peso { display: grid; grid-template-columns: 1fr 76px; gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--borde); }
.calc-peso > span { display: flex; flex-direction: column; }
.calc-peso input { width: 100%; }
.calc-salida { background: var(--superficie-2); border-radius: var(--radio-chico); padding: 14px 16px; }
.calc-pesos { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.calc-pesos li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: start; }
.calc-cantidad { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2; }
.calc-nombres { display: block; margin-top: 2px; }
.calc-total { font-weight: 600; margin: 0 0 4px; }
.calc-salida.cargando { opacity: .6; transition: opacity var(--rapido); }
.precio-simple { margin-top: 18px; max-width: 76ch; }

@media (max-width: 820px) {
  .demo { grid-template-columns: 1fr; }
  .pantallas { grid-template-columns: 1fr; }
  .leyenda { grid-template-columns: 1fr; gap: 6px; }
  .calculadora { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mapa-svg.mapa-ancho { display: none; }
  .mapa-svg.mapa-angosto { display: block; max-width: 420px; margin: 0 auto; }
}
.solo-telefono { display: none; }
@media (max-width: 820px) {
  .solo-telefono { display: block; margin: 0 0 14px; }
  .portada-demo .actos { display: none; }
}

/* Tu programa en internet: el registro que el cliente copia en su proveedor de dominio. */
dl.registro { background: var(--superficie-2, var(--fondo)); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 10px 14px; margin: 8px 0 12px; }
dl.registro code { user-select: all; }
dl.registro code.largo { font-size: .78em; }

/* Tu entrega: la lista de pasos con su estado. */
.pasos-entrega { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pasos-entrega li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px 14px; transition: transform .15s ease; }
.pasos-entrega li:hover { transform: translateY(-1px); }
.pasos-entrega li.listo { border-color: var(--ok); }
.guia-tarea { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 12px; }
.guia-tarea:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .pasos-entrega li, .pasos-entrega li:hover { transition: none; transform: none; } }

/* La mascota: acompaña sin hablar, discreta, nunca más alta que el texto que acompaña ni de 160 px. El alto va fijo
   y el ancho sale de la proporción escrita en la etiqueta, para que la página no salte mientras carga. */
.katito { display: block; flex: none; width: auto; user-select: none; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .katito { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .3)); } }
:root[data-tema="oscuro"] .katito { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .3)); }
.boton[hidden] { display: none; }
.demo-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.katito-demo, .katito-ejemplo { height: 160px; margin: 8px 0 -4px auto; }
.katito-ejemplo { transform: scaleX(-1); }   /* que señale hacia el mapa, que queda a su derecha */
.pasos:has(.katito-paso) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.katito-paso { float: right; height: 84px; margin: -4px -4px 4px 10px; }
.preguntas-cabeza { max-width: 76ch; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--borde); }
.preguntas-cabeza h2 { font-size: 1.35rem; }
.katito-preguntas { height: 120px; margin-bottom: -1px; }
.con-katito { display: flex; align-items: center; gap: 16px; }
.con-katito > p { margin: 0; }
.vacio.con-katito, .vacio .con-katito { justify-content: center; text-align: left; }
.katito-error, .katito-gracias { height: 120px; }
.katito-vacio { height: 72px; }
.centrado:has(.con-katito) { max-width: 580px; }
.estrecho .con-katito { align-items: center; }
@media (max-width: 720px) {
  .katito-demo, .katito-ejemplo, .katito-error, .katito-gracias { height: 72px; }
  .katito-paso { height: 72px; }
  .katito-preguntas { display: none; }
}