/* alphateklab · estilos del sitio (v2, 3-oct-2026). Solo tokens de atk.css más los de abajo.
   Las demos del laboratorio cargan atk.css y no este archivo. */

:root {
  --tarjeta: #ffffff;
  --tarjeta-borde: #e3e7ee;
  /* tres radios con rol: control (botones, campos, íconos), tarjeta (tarjetas y paneles) y chico (insignias, casillas) */
  --r-chico: 6px;
  --r-control: 8px;
  --r-tarjeta: 12px;
  --radio-tarjeta: var(--r-tarjeta);
  --radio-grande: var(--r-tarjeta);
  --sombra: 0 1px 2px rgb(16 18 22 / 0.05), 0 12px 32px -14px rgb(16 18 22 / 0.22);
  --sombra-flota: 0 2px 4px rgb(16 18 22 / 0.08), 0 24px 48px -16px rgb(16 18 22 / 0.35);
  --oscuro: #141a2e;
  --oscuro-2: #1c2340;
  --oscuro-3: #2a3252;
  --sobre-oscuro: #f6f7f9;
  --sobre-oscuro-2: #c5cbd8;
  --acento-sobre-oscuro: #5fd3c4; /* el acento sobre las superficies oscuras (héroe, bandas) */
  /* Superficies claras que siguen claras en el tema oscuro (la caja de búsqueda y los avisos del héroe) */
  --caja-clara: #ffffff;
  --caja-clara-2: #eef0f4;
  --sobre-caja: #141922;
  --sobre-caja-2: #535d6c;
  --cabecera-alto: 68px;
  --borde-control: #7c8596;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tarjeta: #151922;
    --tarjeta-borde: #262c38;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -14px rgb(0 0 0 / 0.6);
    --oscuro: #0b0e14;
    --oscuro-2: #121620;
    --oscuro-3: #1f2533;
    --borde-control: #6b7385;
  }
}
:root[data-theme="dark"] {
  --tarjeta: #151922;
  --tarjeta-borde: #262c38;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -14px rgb(0 0 0 / 0.6);
  --oscuro: #0b0e14;
  --oscuro-2: #121620;
  --oscuro-3: #1f2533;
  --borde-control: #6b7385;
}

main {
  display: block;
}
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.2em;
  --ico-acento: var(--senal);
  --ico-opacidad: 0.25;
}
.ico--grande {
  width: 56px;
  height: 56px;
}
.boton .ico {
  width: 1.2em;
  height: 1.2em;
}
.boton--claro {
  --b-fondo: transparent;
  --b-texto: var(--sobre-oscuro);
  border-color: rgb(246 247 249 / 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .boton--claro:hover {
    --b-fondo: var(--sobre-oscuro);
    --b-texto: var(--oscuro);
    border-color: var(--sobre-oscuro);
  }
}

/* ── cabecera ── */
.cabecera {
  /* fondo sólido: el vidrio esmerilado (transparencia + desenfoque) es una de las señales de plantilla de la guía */
  background: var(--papel);
}
.cabecera__fila {
  min-height: var(--cabecera-alto);
  gap: var(--e-5);
}
.menu {
  flex: 1;
}
.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--e-1);
}
.menu__boton,
.menu__enlace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--t-s);
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-estado) var(--ease-salida),
    color var(--dur-estado) var(--ease-salida);
}
.menu__boton[aria-expanded="true"] {
  background: var(--papel-2);
  color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
  .menu__boton:hover,
  .menu__enlace:hover {
    background: var(--papel-2);
    color: var(--tinta);
  }
}
.ico--caret {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-estado) var(--ease-salida);
}
.menu__boton[aria-expanded="true"] .ico--caret {
  transform: rotate(180deg);
}
.mega {
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  translate: -50% 0;
  width: min(1120px, calc(100vw - 32px));
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flota);
  padding: var(--e-5);
  z-index: 60;
}
.mega:not([hidden]) {
  animation: aparecer var(--dur-estado) var(--ease-salida);
}
@keyframes aparecer {
  from {
    opacity: 0;
    translate: -50% -6px;
  }
}
.mega__cabeza {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  font-size: var(--t-s);
  color: var(--tinta-3);
  padding: 0 var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--tarjeta-borde);
  margin-bottom: var(--e-3);
}
.mega__cabeza a {
  font-weight: 600;
}
.mega__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-1);
}
.mega__item {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3);
  border-radius: var(--radio-tarjeta);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--dur-estado) var(--ease-salida);
}
.mega__item:focus-visible {
  background: var(--papel-2);
}
@media (hover: hover) and (pointer: fine) {
  .mega__item:hover {
    background: var(--papel-2);
  }
}
.ico--mega {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: var(--r-control);
  background: var(--apoyo);
  color: var(--acento);
}
.mega__item strong {
  display: block;
  font-size: var(--t-s);
  font-weight: 700;
}
.mega__item small {
  display: block;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  line-height: 1.4;
}
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.buscar-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 42px;
  padding: 0 var(--e-2) 0 var(--e-3);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-control);
  background: var(--tarjeta);
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--t-s);
  cursor: pointer;
  transition: border-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .buscar-boton:hover {
    border-color: var(--linea-fuerte);
    color: var(--tinta);
  }
}
.buscar-boton kbd {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-chico);
  padding: 0 6px;
  color: var(--tinta-3);
}
.cabecera__cta {
  min-height: 42px;
  border-radius: var(--r-control);
}
.cabecera__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--senal);
  font-size: 0.75rem;
  font-weight: 800;
}
.cabecera__cuenta[hidden] {
  display: none;
}
.hamburguesa {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-control);
  background: var(--tarjeta);
  color: var(--tinta);
  cursor: pointer;
  place-items: center;
}
.hamburguesa .ico {
  width: 22px;
  height: 22px;
}
.menu-movil {
  border-top: 1px solid var(--linea);
  background: var(--papel);
  max-height: calc(100dvh - var(--cabecera-alto));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movil__cuerpo {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-4) var(--e-6);
}
.buscar-campo-falso {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 52px;
  padding: 0 var(--e-4);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
  color: var(--tinta-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-movil__grupo summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}
.menu-movil__grupo ul,
.menu-movil__enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.menu-movil__grupo a,
.menu-movil__enlaces a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 46px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.menu-movil__enlaces a {
  font-weight: 600;
}
@media (max-width: 1060px) {
  .menu,
  .buscar-boton__texto,
  .buscar-boton kbd {
    display: none;
  }
  .buscar-boton {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .hamburguesa {
    display: grid;
  }
  .cabecera__acciones {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  .cabecera__cta {
    padding-inline: 0.8em;
  }
}
body.menu-abierto {
  overflow: hidden;
}

/* ── buscador flotante ── */
.buscador {
  width: min(720px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  margin: 8vh auto auto;
  padding: 0;
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra-flota);
  overflow: hidden;
}
.buscador[open] {
  display: flex;
  flex-direction: column;
  animation: aparecer-dialogo var(--dur-estado) var(--ease-salida);
}
@keyframes aparecer-dialogo {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
.buscador::backdrop {
  background: rgb(10 12 14 / 0.6);
}
.buscador__barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--tarjeta-borde);
}
.buscador__barra > .ico {
  width: 22px;
  height: 22px;
  color: var(--tinta-3);
}
.buscador__barra input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-l);
}
.buscador__barra input:focus {
  outline: none;
}
.buscador__cerrar {
  font: inherit;
  font-size: var(--t-xs);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-control);
  background: var(--papel-2);
  color: var(--tinta-2);
  padding: 4px 8px;
  cursor: pointer;
  min-height: 44px;
}
.buscador__cuerpo {
  overflow-y: auto;
  padding: var(--e-2);
}
.buscador__ayuda {
  padding: var(--e-3) var(--e-3) var(--e-2);
  font-size: var(--t-s);
  color: var(--tinta-3);
}
.chips {
  list-style: none;
  margin: 0;
  padding: 0 var(--e-3) var(--e-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--e-3);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-control);
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-s);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-estado) var(--ease-salida),
    border-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    background: var(--papel-2);
    border-color: var(--linea-fuerte);
  }
}
.buscador__resultados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.resultado__fila {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3);
  border-radius: var(--r-tarjeta);
  color: var(--tinta);
  text-decoration: none;
}
.resultado .ico {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: var(--r-control);
  background: var(--papel-2);
}
.resultado[aria-selected="true"] .resultado__fila {
  background: var(--senal-suave);
}
.resultado__texto strong {
  display: block;
  font-size: var(--t-s);
}
.resultado__texto small {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--t-xs);
  color: var(--tinta-3);
}
.resultado__tipo {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  white-space: nowrap;
}
/* Con teclado y ratón, la fila elegida lleva la tecla que la abre, en una columna fija: la fila no cambia de ancho al
   moverse la selección. En el diálogo, un pie con las teclas (revisión del 3-oct, como DocSearch). En pantallas
   táctiles no hay ni una cosa ni la otra. */
.resultado__enter,
.buscador__pie {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .resultado__fila {
    grid-template-columns: auto minmax(0, 1fr) auto 1.75rem;
  }
  .resultado--preguntar .resultado__fila {
    grid-template-columns: auto minmax(0, 1fr) 1.75rem;
  }
  .resultado__enter {
    display: block;
    visibility: hidden;
    justify-self: end;
  }
  .resultado[aria-selected="true"] .resultado__enter {
    visibility: visible;
  }
  .buscador__pie {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px var(--e-4);
    border-top: 1px solid var(--linea);
    font-size: var(--t-xs);
    color: var(--tinta-3);
  }
  .resultado__enter,
  .buscador__pie kbd {
    min-width: 22px;
    padding: 1px 5px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-chico);
    background: var(--papel);
    color: var(--tinta-2);
    font-family: var(--f-texto);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
  }
}
@media (max-width: 520px) {
  .resultado__tipo,
  .resultado__enter {
    display: none;
  }
  .resultado__fila,
  .resultado--preguntar .resultado__fila {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.sin-resultados {
  padding: var(--e-4);
  display: grid;
  gap: var(--e-2);
}
.sin-resultados__titulo {
  font-weight: 700;
  font-size: var(--t-m);
}
.sin-resultados__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.sin-resultados__acciones .boton {
  border-radius: var(--r-control);
}

/* ── secciones ── */
.seccion {
  padding-block: var(--e-seccion) 0;
}
.seccion--oscura {
  margin-top: var(--e-seccion);
  padding-block: var(--e-8);
  background: var(--oscuro);
  color: var(--sobre-oscuro);
}
.seccion--oscura .seccion__titulo {
  color: var(--sobre-oscuro);
}
.seccion--oscura .seccion__bajada {
  color: var(--sobre-oscuro-2);
}
.seccion--oscura + .seccion {
  padding-top: var(--e-8);
}
.seccion--junta {
  padding-top: var(--e-6);
}
.seccion__cabeza {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
  max-width: 50rem;
}
.seccion__titulo {
  font-size: var(--t-3xl);
}
.seccion__titulo--chico {
  font-size: var(--t-sub);
}
.seccion__bajada {
  color: var(--tinta-2);
  font-size: var(--t-l);
  max-width: 60ch;
}
.seccion__pie {
  margin-top: var(--e-6);
}
.seccion__pie .boton {
  border-radius: var(--r-control);
}

/* ── portada ── */
.heroe {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  padding-block: var(--e-7) var(--e-8);
  border-bottom: 1px solid var(--linea);
}
.heroe__fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
  align-items: center;
}
@media (min-width: 1040px) {
  .heroe__fila {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--e-8);
  }
}
.heroe__titulo {
  font-size: var(--t-4xl);
  max-width: 18ch;
}
.heroe__bajada {
  margin-top: var(--e-4);
  font-size: var(--t-l);
  color: var(--tinta-2);
  max-width: 44ch;
}
.heroe__buscar {
  position: relative;
  z-index: 5;
  margin-top: var(--e-6);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 6px 6px 6px var(--e-4);
  background: var(--tarjeta);
  border: 1.5px solid var(--tinta);
  border-radius: var(--r-control);
  max-width: 38rem;
}
.heroe__buscar > .ico {
  width: 22px;
  height: 22px;
  color: var(--tinta-3);
}
.heroe__buscar input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-m);
}
.heroe__buscar input::placeholder {
  color: var(--tinta-3);
}
.heroe__buscar input:focus {
  outline: none;
}
.heroe__buscar:focus-within {
  box-shadow: 0 0 0 3px var(--foco);
}
.heroe__buscar .boton {
  border-radius: var(--r-control);
  min-height: 50px;
  padding-inline: 1.4em;
}
@media (max-width: 480px) {
  .heroe__buscar {
    padding-left: var(--e-3);
  }
  .heroe__buscar .boton {
    padding-inline: 1em;
  }
  .heroe__buscar input {
    font-size: var(--t-s);
  }
}
.heroe__resultados {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--tarjeta);
  color: var(--tinta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flota);
  padding: var(--e-2);
  max-height: 60vh;
  overflow-y: auto;
}
.heroe__prueba {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--tinta-2);
  max-width: 38rem;
}
.chip-texto {
  font: inherit;
  color: var(--acento);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .chip-texto:hover {
    text-decoration-color: var(--acento);
  }
}
.heroe__diagnostico {
  margin-top: var(--e-3);
}
.heroe__diagnostico .boton {
  gap: var(--e-2);
}
.heroe__visual {
  position: relative;
  align-self: start;
}
.heroe__imagen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-grande);
}
@media (max-width: 1039px) {
  .heroe__imagen img {
    aspect-ratio: 16 / 9;
  }
}
.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.mosaico__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radio-grande);
}

/* tira de lo que instalamos */
.tira {
  background: var(--senal);
  color: var(--sobre-senal);
}
.tira__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-5);
  padding-block: var(--e-4);
}
.tira__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 800;
}
.tira ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-size: var(--t-s);
  font-weight: 600;
}
.tira li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tira .ico {
  --ico-acento: var(--tinta);
  --ico-opacidad: 0.2;
}

/* negocios */
.negocios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.negocio {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  color: var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition:
    box-shadow var(--dur-estado) var(--ease-salida),
    border-color var(--dur-estado) var(--ease-salida);
}
.negocio:focus-visible {
  box-shadow: var(--sombra);
  border-color: var(--linea-fuerte);
}
@media (hover: hover) and (pointer: fine) {
  .negocio:hover {
    box-shadow: var(--sombra);
    border-color: var(--linea-fuerte);
  }
}
.negocio__foto {
  aspect-ratio: 16 / 9;
  background: var(--papel-2);
  overflow: hidden;
}
.negocio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .negocio:hover .negocio__foto img {
    transform: scale(1.03);
  }
}
.negocio__sinfoto {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--tinta-3);
}
.negocio__texto {
  padding: var(--e-4) var(--e-5) var(--e-5);
  display: grid;
  gap: var(--e-2);
  align-content: start;
}
.negocio__nombre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-l);
}
.negocio__texto p {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.negocio__lista {
  margin: 0;
  padding-left: 1.1em;
  color: var(--tinta-2);
  font-size: var(--t-s);
}
.negocio__mas {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: var(--senal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* demos */
.demos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.demo__enlace {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: var(--radio-grande);
  background: var(--oscuro-2);
  border: 1px solid var(--oscuro-3);
  color: var(--sobre-oscuro);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .demo__enlace:hover {
    border-color: var(--senal);
  }
}
.demos--claras .demo__enlace {
  background: var(--tarjeta);
  border-color: var(--tarjeta-borde);
  color: var(--tinta);
}
.demo__captura {
  aspect-ratio: 16 / 10;
  background: var(--oscuro-3);
  overflow: hidden;
}
.demo__captura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.demo__sincaptura {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--sobre-oscuro-2);
}
.demo__texto {
  padding: var(--e-4) var(--e-5) var(--e-5);
  display: grid;
  gap: var(--e-2);
  align-content: start;
}
.demo__nombre {
  font-size: var(--t-l);
}
.demo__texto p {
  font-size: var(--t-s);
  opacity: 0.88;
}
.demo__probar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--senal);
}
.demos--claras .demo__probar {
  color: var(--tinta);
}
@media (min-width: 900px) {
  .demo--grande {
    grid-column: span 2;
  }
  .demo--grande .demo__enlace {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto;
  }
  .demo--grande .demo__captura {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .demo--grande .demo__texto {
    align-content: center;
  }
}

.demo--pendiente .demo__enlace {
  opacity: 0.72;
  border-style: dashed;
}
@media (hover: hover) and (pointer: fine) {
  .demo--pendiente .demo__enlace:hover {
    border-color: var(--oscuro-3);
  }
}
@media (hover: hover) and (pointer: fine) {
  .demos--claras .demo--pendiente .demo__enlace:hover {
    border-color: var(--tarjeta-borde);
  }
}
.demo__estado {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--sobre-oscuro);
}
.demo--pendiente .demo__enlace {
  opacity: 1;
}
.demo--pendiente .demo__captura {
  opacity: 0.6;
}
.demos--claras .demo__estado {
  color: var(--tinta-2);
}

/* capacidades */
.capacidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.capacidad {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  height: 100%;
  padding: var(--e-5);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  color: var(--tinta);
  text-decoration: none;
  transition:
    box-shadow var(--dur-estado) var(--ease-salida),
    border-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .capacidad:hover {
    box-shadow: var(--sombra);
    border-color: var(--linea-fuerte);
  }
}
.capacidad__icono .ico {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: var(--r-tarjeta);
  background: var(--oscuro);
  color: var(--sobre-oscuro);
}
.capacidad__nombre {
  font-size: var(--t-l);
  margin-top: var(--e-2);
}
.capacidad p {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.capacidad__cuenta {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--acento);
}

/* índice de tipos de solución */
.indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  column-gap: var(--e-7);
  border-top: 2px solid var(--tinta);
}
@media (min-width: 900px) {
  .indice {
    grid-template-columns: 1fr 1fr;
  }
}
.indice li {
  border-bottom: 1px solid var(--linea);
}
.indice__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4) var(--e-2);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .indice__fila:hover {
    background: var(--papel-2);
  }
}
.indice__icono .ico {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--r-control);
  background: var(--apoyo);
  color: var(--acento);
}
.indice__nombre {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
}
.indice__desc {
  display: block;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.indice__cuenta {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--tinta-3);
  min-width: 2ch;
  text-align: right;
}

/* dividida (foto + texto) */
.dividida {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 960px) {
  .dividida {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-8);
  }
  .dividida--sinfoto {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
  }
}
.dividida__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radio-grande);
}
.dividida__texto {
  display: grid;
  gap: var(--e-4);
}
.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}
.lista-check li {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
}
.lista-check .ico {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--senal);
  color: var(--sobre-senal);
}

/* escalones */
.escalones {
  display: grid;
  gap: var(--e-6) var(--e-7);
}
@media (min-width: 900px) {
  .escalones {
    grid-template-columns: 1fr 1fr;
  }
}
.escalera {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
.escalera__nombre {
  font-size: var(--t-l);
}
.escalera__niveles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  align-items: start;
}
@media (max-width: 560px) {
  .escalera__niveles {
    grid-template-columns: 1fr;
  }
}
.nivel {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3);
  border-radius: var(--radio-tarjeta);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-top: 3px solid var(--senal);
}
@media (min-width: 561px) {
  .nivel:nth-child(1) {
    margin-top: 32px;
  }
  .nivel:nth-child(2) {
    margin-top: 16px;
  }
}
.nivel__nombre {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--tinta-2);
}
.nivel__servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--t-s);
}
.nivel__servicios a {
  color: var(--tinta);
  text-decoration-color: var(--linea-fuerte);
}
.nivel__codigo {
  font-weight: 800;
  font-size: var(--t-xs);
  color: var(--tinta-3);
}
.nivel__cotizar {
  justify-self: start;
  font-size: var(--t-xs);
}
.enlace-boton {
  font: inherit;
  color: var(--enlace);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  text-align: left;
}

/* pasos: secuencia real */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-5) var(--e-6);
  counter-reset: paso;
}
@media (min-width: 900px) {
  .pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.paso {
  counter-increment: paso;
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) 0 var(--e-2);
  border-top: 2px solid var(--tinta);
  align-content: start;
}
.paso__titulo {
  font-size: var(--t-l);
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.paso__titulo::before {
  content: counter(paso);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-control);
  font-size: var(--t-s);
  font-weight: 800;
  background: var(--senal);
  color: var(--sobre-senal);
}
.paso p {
  color: var(--tinta-2);
  font-size: var(--t-s);
}

/* preguntas */
.preguntas {
  display: grid;
  max-width: 56rem;
  border-top: 1px solid var(--linea);
}
.pregunta {
  border-bottom: 1px solid var(--linea);
}
.pregunta summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  align-items: center;
  min-height: 60px;
  padding-block: var(--e-3);
  font-weight: 600;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}
.pregunta summary::after {
  content: "+";
  font-size: 1.5em;
  line-height: 1;
  color: var(--tinta-2);
  transition: transform var(--dur-estado) var(--ease-salida);
}
.pregunta[open] summary::after {
  transform: rotate(45deg);
}
.pregunta p {
  padding-bottom: var(--e-4);
  color: var(--tinta-2);
  max-width: var(--medida);
}

/* banda «¿no encontraste?» */
.banda-pregunta {
  margin-top: var(--e-seccion);
  background: var(--oscuro);
  color: var(--sobre-oscuro);
  padding-block: var(--e-8);
}
.banda-pregunta__fila {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 960px) {
  .banda-pregunta__fila {
    grid-template-columns: 1fr 1fr;
  }
}
.banda-pregunta__titulo {
  font-size: var(--t-3xl);
  color: var(--sobre-oscuro);
}
.banda-pregunta__texto p {
  margin-top: var(--e-3);
  color: var(--sobre-oscuro-2);
  font-size: var(--t-l);
}
.banda-pregunta__form {
  display: grid;
  gap: var(--e-3);
}
.banda-pregunta__form textarea {
  font: inherit;
  font-size: var(--t-m);
  padding: var(--e-4);
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--oscuro-3);
  background: var(--oscuro-2);
  color: var(--sobre-oscuro);
  resize: vertical;
  min-height: 110px;
}
.banda-pregunta__form textarea::placeholder {
  color: var(--sobre-oscuro-2);
}
.banda-pregunta__form textarea:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: 1px;
}
.banda-pregunta__form .boton {
  justify-self: start;
  border-radius: var(--r-control);
}

/* pie */
.pie {
  margin-top: var(--e-seccion);
  padding-block: var(--e-8) var(--e-6);
  background: var(--oscuro-2);
  color: var(--sobre-oscuro-2);
  border-top: 1px solid var(--oscuro-3);
}
.banda-pregunta + .pie,
main:has(> .banda-pregunta:last-child) + .pie {
  margin-top: 0;
}
.pie a:not(.boton) {
  color: var(--sobre-oscuro);
}
.pie__cabeza {
  display: grid;
  gap: var(--e-3);
  max-width: 36rem;
  justify-items: start;
}
.pie__cabeza .boton {
  border-radius: var(--r-control);
}
.marca--pie {
  color: var(--sobre-oscuro);
  font-size: 1.4rem;
}
.pie__columnas {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: 1px solid var(--oscuro-3);
}
.pie__columnas h2 {
  font-size: var(--t-s);
  color: var(--sobre-oscuro);
  margin-bottom: var(--e-3);
}
.pie__columnas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-s);
}
.pie__columnas a {
  color: var(--sobre-oscuro-2);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .pie__columnas a:hover {
    color: var(--sobre-oscuro);
    text-decoration: underline;
  }
}
.pie__nota {
  margin-top: var(--e-6);
  font-size: var(--t-xs);
  color: var(--sobre-oscuro-2);
}

/* ── página de un tipo de negocio ── */
.heroe-sector {
  position: relative;
  background: var(--oscuro);
  color: var(--sobre-oscuro);
  min-height: 460px;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.heroe-sector__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heroe-sector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 12 14 / 0.3) 0%, rgb(10 12 14 / 0.9) 72%);
}
.heroe-sector--sinfoto::after {
  background: radial-gradient(60% 80% at 85% 0%, rgb(99 102 241 / 0.2), transparent 70%);
}
.heroe-sector__texto {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-8) var(--e-7);
}
.heroe-sector .migas,
.heroe-sector .migas a {
  color: var(--sobre-oscuro-2);
}
.heroe-sector__titulo {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: var(--sobre-oscuro);
  max-width: 18ch;
}
.heroe-sector__bajada {
  font-size: var(--t-l);
  color: var(--sobre-oscuro);
  max-width: 52ch;
}
.heroe-sector__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.heroe-sector__acciones .boton {
  border-radius: var(--r-control);
}
.problemas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.problema {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-5);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
}
.problema__que {
  font-weight: 700;
  font-size: var(--t-m);
}
.problema__que::before {
  content: "«";
}
.problema__que::after {
  content: "»";
}
.problema__respuesta {
  color: var(--tinta-2);
  font-size: var(--t-s);
}
.problema__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--e-1);
}
.chip--enlace {
  min-height: 34px;
  font-size: var(--t-xs);
  font-weight: 600;
  background: var(--apoyo);
  color: var(--acento);
  border-color: transparent;
}

/* ── tarjetas de servicio ── */
.rejilla-servicios {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tarjeta-servicio {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-4) var(--e-3);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  scroll-margin-top: calc(var(--cabecera-alto) + 16px);
  transition:
    box-shadow var(--dur-estado) var(--ease-salida),
    border-color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-servicio:hover {
    border-color: var(--linea-fuerte);
  }
}
.tarjeta-servicio:target {
  border-color: var(--senal);
  box-shadow: 0 0 0 3px var(--senal-suave);
}
.tarjeta-servicio__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tarjeta-servicio__icono .ico {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: var(--r-control);
  background: var(--apoyo);
  color: var(--acento);
  --ico-acento: var(--senal);
}
.tarjeta-servicio__codigo {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--tinta-3);
}
.tarjeta-servicio__nombre {
  font-size: var(--t-m);
  font-weight: 700;
  line-height: 1.25;
}
.tarjeta-servicio__nombre a {
  color: var(--tinta);
  text-decoration: none;
}
.tarjeta-servicio__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tarjeta-servicio__nombre a:focus-visible {
  outline: none;
}
.tarjeta-servicio:has(.tarjeta-servicio__nombre a:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.tarjeta-servicio__para {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.tarjeta-servicio__insignias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-chico);
  background: var(--papel-2);
  color: var(--tinta-2);
}
.insignia .ico {
  width: 14px;
  height: 14px;
}
.insignia--demo {
  background: var(--senal);
  color: var(--sobre-senal);
}
.tarjeta-servicio__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid var(--tarjeta-borde);
}
.tarjeta-servicio__precio {
  font-weight: 700;
  font-size: var(--t-s);
}
.boton-chico {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  min-height: 36px;
  min-width: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--r-control);
  border: 1px solid var(--borde-control);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition:
    background-color var(--dur-estado) var(--ease-salida),
    color var(--dur-estado) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  /* sobre la tarjeta, el papel-2 casi no se distinguía: un 8 % de tinta se ve en los dos modos */
  .boton-chico:hover {
    background: color-mix(in srgb, var(--tinta) 8%, var(--papel));
  }
}
.boton-chico[aria-pressed="true"],
.boton[data-cotizar][aria-pressed="true"] {
  --b-fondo: var(--senal);
  --b-texto: var(--sobre-senal);
  background: var(--senal);
  color: var(--sobre-senal);
  border-color: var(--senal-fuerte);
}

/* ── páginas simples, catálogo y ficha ── */
.pagina-simple,
.pagina-catalogo {
  padding-top: var(--e-6);
}
.pagina-simple > * + *,
.catalogo__cabeza > * + * {
  margin-top: var(--e-4);
}
.pagina-simple__titulo {
  font-size: var(--t-3xl);
  margin-top: var(--e-3);
}
.pagina-simple .negocios,
.pagina-simple .demos {
  margin-top: var(--e-6);
}
.filtros {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-5);
  padding: var(--e-5);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
}
.filtros__buscar {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-4);
  border: 1px solid var(--borde-control);
  border-radius: var(--r-control);
  background: var(--papel);
}
.filtros__buscar .ico {
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
}
.filtros__buscar input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-m);
  color: var(--tinta);
}
.filtros__buscar input:focus {
  outline: none;
}
.filtros__buscar:focus-within {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.filtros__grupo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.filtros__grupo legend {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--tinta-2);
  margin-bottom: var(--e-2);
  padding: 0;
}
.filtros__opciones {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
@media (min-width: 900px) {
  .filtros__opciones {
    flex-wrap: wrap;
    overflow: visible;
  }
}
.opcion {
  position: relative;
  flex: none;
}
.opcion input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e-3);
  border: 1px solid var(--borde-control);
  border-radius: var(--r-control);
  font-size: var(--t-s);
  white-space: nowrap;
  background: var(--papel);
  transition:
    background-color var(--dur-estado) var(--ease-salida),
    color var(--dur-estado) var(--ease-salida);
}
.opcion input:checked + span {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.opcion input:focus-visible + span {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.filtros__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
}
.filtros__cuenta {
  margin-left: auto;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.campo {
  display: grid;
  gap: var(--e-1);
  font-size: var(--t-s);
}
.campo > span {
  font-weight: 600;
  color: var(--tinta-2);
}
.campo--en-linea {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: var(--t-m);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: var(--r-control);
  padding: 0.55em 0.8em;
  min-height: 46px;
  width: 100%;
}
.campo--en-linea select {
  width: auto;
}
.campo textarea {
  resize: vertical;
}
.campo :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--foco);
}
.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  font-size: var(--t-s);
  cursor: pointer;
}
.casilla input {
  width: 20px;
  height: 20px;
  accent-color: var(--tinta);
}
.catalogo {
  display: grid;
  gap: var(--e-7);
  margin-top: var(--e-6);
}
.grupo {
  display: grid;
  gap: var(--e-4);
}
.grupo__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xl);
}
.catalogo--buscando {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.catalogo--buscando .grupo__titulo {
  display: none;
}
.catalogo--buscando .grupo,
.catalogo--buscando .rejilla-servicios {
  display: contents;
}
.catalogo--buscando .grupo[hidden] {
  display: none;
}
.catalogo--buscando .tarjeta-servicio {
  flex: 1 1 280px;
  max-width: 100%;
}
@media (min-width: 900px) {
  .catalogo--buscando .tarjeta-servicio {
    max-width: calc((100% - 2 * var(--e-3)) / 3);
  }
}
.catalogo__vacio {
  padding: var(--e-6);
  border-radius: var(--radio-grande);
  background: var(--senal-suave);
  display: grid;
  gap: var(--e-3);
  width: 100%;
}
.catalogo__vacio h2 {
  font-size: var(--t-xl);
}
.catalogo__vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}
.catalogo__vacio-acciones .boton {
  border-radius: var(--r-control);
}

.ficha-heroe {
  padding-block: var(--e-6) var(--e-7);
  background: linear-gradient(180deg, var(--papel-2), var(--papel));
}
.ficha-heroe__fila {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 1000px) {
  .ficha-heroe__fila {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .ficha-heroe__fila--sola {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ficha-heroe__texto {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
}
.ficha-heroe__tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--tinta-2);
  margin-top: var(--e-3);
}
.ficha-heroe__titulo {
  font-size: var(--t-3xl);
  max-width: 20ch;
}
.ficha-heroe__para {
  font-size: var(--t-l);
  color: var(--tinta-2);
  max-width: 52ch;
}
.ficha-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.ficha-heroe__acciones .boton {
  border-radius: var(--r-control);
}
.ficha-heroe__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radio-grande);
}
.ficha-cuerpo {
  display: grid;
  gap: 0 var(--e-6);
  border-top: 2px solid var(--tinta);
}
@media (min-width: 900px) {
  .ficha-cuerpo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ficha-cuerpo__col {
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--linea);
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
.ficha-cuerpo__col h2 {
  font-size: var(--t-m);
}
.ficha-cuerpo__cifra {
  font-size: var(--t-2xl);
  font-weight: 700;
}
.ficha-cuerpo__aparte {
  font-size: var(--t-xs);
  color: var(--tinta-2);
}

/* marco de dispositivo para capturas reales de las demos */
.dispositivo--portatil {
  border-radius: 16px 16px 6px 6px;
  background: #22262b;
  padding: 10px 10px 0;
  box-shadow: var(--sombra-flota);
  margin-bottom: 14px;
}
.dispositivo--portatil::after {
  content: "";
  display: block;
  height: 14px;
  margin: 0 -24px -14px;
  background: linear-gradient(#3a3f46, #22262b);
  border-radius: 0 0 14px 14px;
}
.dispositivo__pantalla {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: #0b0c0e;
  display: grid;
  place-items: center;
}
.dispositivo__pantalla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* cotizar */
.cotizador {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-6);
}
@media (min-width: 1000px) {
  .cotizador {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
  .cotizador__mensaje {
    position: sticky;
    top: calc(var(--cabecera-alto) + 16px);
  }
}
.cotizador__col {
  display: grid;
  gap: var(--e-4);
  align-content: start;
}
.cotizador__datos {
  display: grid;
  gap: var(--e-3);
}
@media (min-width: 640px) {
  .cotizador__datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cotizador__subtitulo {
  font-size: var(--t-m);
}
.cotizador__elegidos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cotizador__elegidos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-tarjeta);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  font-size: var(--t-s);
}
.cotizador__elegidos .quitar {
  font: inherit;
  font-size: var(--t-xs);
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  color: var(--tinta-2);
  min-height: 36px;
  min-width: 44px;
  padding: 0 0.8em;
  cursor: pointer;
}
.cotizador__vacio {
  color: var(--tinta-3);
  font-size: var(--t-s);
}
.mensaje {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--f-texto);
  font-size: var(--t-s);
  line-height: 1.55;
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-grande);
  padding: var(--e-5);
  min-height: 12rem;
}
.cotizador__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.cotizador__acciones .boton {
  border-radius: var(--r-control);
}
/* un botón con dos textos en la misma celda («Copiar» / «Copiado»): mide lo que el más ancho y no salta al cambiar;
   lo oculto con visibility tampoco entra en el nombre accesible */
.boton--dos-estados {
  display: inline-grid;
}
.boton--dos-estados > .boton__estado {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.boton--dos-estados > .boton__estado + .boton__estado,
.boton--dos-estados.hecho > .boton__estado:first-child {
  visibility: hidden;
}
.boton--dos-estados.hecho > .boton__estado + .boton__estado {
  visibility: visible;
}
.cotizador__aviso {
  font-size: var(--t-s);
  color: var(--tinta-2);
  min-height: 1.5em;
}

/* texto largo */
.texto-largo {
  padding-block: var(--e-6) var(--e-7);
  max-width: calc(var(--medida) + 2 * max(16px, 4vw));
  display: grid;
  gap: var(--e-4);
}
.texto-largo h1 {
  font-size: var(--t-3xl);
}
.texto-largo h2 {
  font-size: var(--t-l);
  margin-top: var(--e-4);
}
.texto-largo__fecha {
  color: var(--tinta-2);
}
.creditos {
  display: grid;
  gap: var(--e-2);
  padding-left: 1.1em;
  font-size: var(--t-s);
}
.nota {
  margin-top: var(--e-5);
  font-size: var(--t-s);
  color: var(--tinta-3);
}

@media (prefers-reduced-motion: reduce) {
  .mega:not([hidden]),
  .buscador[open] {
    animation: none;
  }
}

/* ── «¿Qué necesita mi negocio?» ── */
.diagnostico {
  padding-top: var(--e-6);
  max-width: 1080px;
}
.diagnostico__cabeza > * + * {
  margin-top: var(--e-3);
}
.pasos-diag {
  list-style: none;
  margin: var(--e-6) 0 var(--e-5);
  padding: 0;
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  counter-reset: none;
}
.pasos-diag li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-s);
  color: var(--tinta-3);
  padding-right: var(--e-4);
}
.pasos-diag li span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  font-weight: 700;
  font-size: var(--t-xs);
}
.pasos-diag li[aria-current] {
  color: var(--tinta);
  font-weight: 600;
}
.pasos-diag li[aria-current] span {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.pasos-diag li.hecho span {
  background: var(--apoyo);
  color: var(--acento);
  border-color: transparent;
}
.diag__paso {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: var(--e-5);
}
.diag__pregunta {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: -0.02em;
  padding: 0;
  margin-bottom: var(--e-4);
}
.diag__pregunta small {
  display: block;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-m);
  letter-spacing: 0;
  color: var(--tinta-2);
  margin-top: var(--e-1);
}
.diag__pregunta:focus {
  outline: none;
}
.diag__negocios {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.diag-negocio {
  position: relative;
  display: grid;
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  background: var(--tarjeta);
  cursor: pointer;
  transition: border-color var(--dur-estado) var(--ease-salida), box-shadow var(--dur-estado) var(--ease-salida);
}
.diag-negocio input,
.diag-problema input,
.diag-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.diag-negocio img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.diag-negocio__nombre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .diag-negocio:hover {
    border-color: var(--linea-fuerte);
  }
}
.diag-negocio:has(input:checked) {
  border-color: var(--tinta);
  box-shadow: 0 0 0 2px var(--tinta);
}
.diag-negocio:has(input:focus-visible),
.diag-problema:has(input:focus-visible) .diag-problema__caja,
.diag-chip:has(input:focus-visible) span {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.diag__problemas {
  display: grid;
  gap: var(--e-2);
}
.diag-problema__caja {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-tarjeta);
  background: var(--tarjeta);
  cursor: pointer;
  transition: border-color var(--dur-estado) var(--ease-salida), background-color var(--dur-estado) var(--ease-salida);
}
.diag-problema__caja::before {
  content: "";
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--borde-control);
  border-radius: var(--r-chico);
}
.diag-problema input:checked + .diag-problema__caja {
  border-color: var(--tinta);
  background: var(--senal-suave);
}
.diag-problema input:checked + .diag-problema__caja::before {
  background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23f2b544' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color: var(--tinta);
}
.diag-problema__que {
  font-weight: 600;
}
.diag-problema__como {
  font-size: var(--t-s);
  color: var(--tinta-2);
  margin-top: 2px;
}
.diag__tengo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.diag-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1px solid var(--borde-control);
  border-radius: var(--r-control);
  background: var(--tarjeta);
  cursor: pointer;
  font-size: var(--t-s);
}
.diag-chip input:checked + span {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.diag__acciones {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}
.diag__acciones .boton,
.diag-resultado__botones .boton {
  border-radius: var(--r-control);
}
.diag__aviso {
  font-size: var(--t-s);
  color: var(--peligro);
}
.diag-resultado {
  display: grid;
  gap: var(--e-5);
  scroll-margin-top: calc(var(--cabecera-alto) + 16px);
}
.diag-resultado:focus {
  outline: none;
}
.diag-resultado__negocio {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  color: var(--acento);
}
.diag-resultado__titulo {
  font-size: var(--t-2xl);
  margin-top: var(--e-2);
}
.diag-resultado__cabeza .seccion__bajada {
  margin-top: var(--e-2);
}
.diag-resultado__sub {
  font-size: var(--t-l);
}
.recs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.recs--principales {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.rec {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-4);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--r-tarjeta);
  background: var(--tarjeta);
}
.rec--principal {
  border-color: var(--tinta);
  border-top: 4px solid var(--senal);
}
.rec__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rec__icono .ico {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: var(--r-control);
  background: var(--apoyo);
  color: var(--acento);
}
.rec__codigo {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  font-weight: 700;
}
.rec__nombre {
  font-size: var(--t-m);
}
.rec__nombre a {
  color: var(--tinta);
}
.rec__para,
.rec__porque {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.rec__porque strong {
  color: var(--tinta);
}
.rec__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-s);
  font-weight: 700;
  padding-top: var(--e-2);
  border-top: 1px solid var(--tarjeta-borde);
}
.rec__demo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--acento);
}
.diag-resultado__accion {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-tarjeta);
  background: var(--oscuro);
  color: var(--sobre-oscuro);
}
.diag-resultado__accion p {
  color: var(--sobre-oscuro-2);
}
.diag-resultado__accion-titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-xl);
  color: var(--sobre-oscuro) !important;
}
.diag-resultado__accion .boton--linea {
  --b-texto: var(--sobre-oscuro);
  border-color: rgb(246 247 249 / 0.4);
}
@media (min-width: 900px) {
  .diag-resultado__accion {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.diag-resultado__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ── detalle de la ficha ── */
.ficha-detalle {
  display: grid;
  gap: var(--e-7);
}
@media (min-width: 960px) {
  .ficha-detalle {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}
.linea-tiempo {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
}
.linea-tiempo li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 var(--e-5) 52px;
}
.linea-tiempo li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-control);
  background: var(--senal);
  color: var(--sobre-senal);
  font-weight: 800;
  font-size: var(--t-s);
}
.linea-tiempo li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 4px;
  width: 2px;
  background: var(--linea);
}
.linea-tiempo h3 {
  font-size: var(--t-m);
  padding-top: 4px;
}
.linea-tiempo p {
  color: var(--tinta-2);
  font-size: var(--t-s);
  margin-top: 2px;
  max-width: 52ch;
}
.ficha-detalle__lado {
  display: grid;
  gap: var(--e-4);
}
.ficha-detalle__bloque {
  padding: var(--e-5);
  border-radius: var(--radio-grande);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  display: grid;
  gap: var(--e-3);
}
.ficha-detalle__bloque h2 {
  font-size: var(--t-m);
}
.lista-no {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.lista-no li {
  display: flex;
  gap: var(--e-2);
}
.lista-no li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 2px;
  margin-top: 0.7em;
  background: var(--linea-fuerte);
}
.ficha-detalle__ejemplo {
  padding: var(--e-4) var(--e-5);
  background: var(--apoyo);
  color: var(--tinta);
  border-radius: var(--r-tarjeta);
  font-size: var(--t-s);
}
.ficha-detalle__bloque .lista-check {
  font-size: var(--t-s);
}

.grupo__cabeza {
  display: grid;
  gap: var(--e-4);
  align-items: center;
}
@media (min-width: 700px) {
  .grupo__cabeza {
    grid-template-columns: 220px 1fr;
  }
}
.grupo__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
}
.grupo__desc {
  color: var(--tinta-2);
  margin-top: var(--e-1);
}
.catalogo--buscando .grupo__cabeza {
  display: none;
}

.resultado--preguntar .ico {
  background: var(--apoyo);
  color: var(--acento);
}
.resultado--preguntar strong {
  color: var(--acento);
}

/* nada se desborda a 320 px (WCAG 1.4.10) */
.filtros__buscar input,
.problema,
.problema p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.problemas {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.rejilla-servicios {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.negocios {
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.demos {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.recs,
.recs--principales {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.diag__negocios {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
@media (max-width: 400px) {
  .filtros {
    padding: var(--e-4);
  }
}

/* ── auditoría 3-oct ── */
/* entradas por situación */
.situaciones {
  padding-block: var(--e-6) var(--e-7);
}
.situaciones__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-m);
  font-weight: 700;
  margin-bottom: var(--e-3);
}
.situaciones__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 1px solid var(--linea);
}
.situacion {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  height: 100%;
  padding: var(--e-4) var(--e-3) var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
}
.situacion .ico {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--acento);
  margin-top: 2px;
}
.situacion strong {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-estado) var(--ease-salida);
}
.situacion small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.situacion:focus-visible strong {
  text-decoration-color: var(--senal);
}
@media (hover: hover) and (pointer: fine) {
  .situacion:hover strong {
    text-decoration-color: var(--senal);
  }
}
@media (min-width: 900px) {
  .situacion {
    padding-left: var(--e-3);
    border-left: 1px solid var(--linea);
  }
  .situaciones__lista li:first-child .situacion {
    border-left: 0;
    padding-left: 0;
  }
}

/* demos que todavía no están */
.demos__proximas {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin-top: var(--e-5);
  font-size: var(--t-s);
  color: var(--sobre-oscuro);
}
.demos__proximas .ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.demos--claras + .demos__proximas,
.pagina-simple .demos__proximas {
  color: var(--tinta-2);
}

/* precio a la vista en la ficha */
.ficha-heroe__precio {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.ficha-heroe__precio .num {
  font-weight: 700;
  color: var(--tinta);
}

/* el buscador: sin la × nativa; «Esc» con teclado, «Cerrar» en pantallas táctiles */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.solo-tactil {
  display: none;
}
@media (pointer: coarse) {
  .solo-teclado {
    display: none;
  }
  .solo-tactil {
    display: inline;
  }
}

/* negocios en el teléfono: filas compactas con foto chica */
@media (max-width: 639px) {
  .negocios {
    gap: 0;
    border-top: 1px solid var(--linea);
  }
  .negocio {
    grid-template-rows: none;
    grid-template-columns: 88px 1fr;
    gap: var(--e-3);
    align-items: start;
    padding-block: var(--e-4);
    border: 0;
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .negocio__foto {
    aspect-ratio: 1;
    border-radius: var(--r-control);
  }
  .negocio__texto {
    padding: 0;
    gap: var(--e-1);
  }
  .negocio__nombre {
    font-size: var(--t-m);
  }
  .negocio__nombre .ico {
    display: none;
  }
  .negocio__lista {
    padding-left: 0;
    list-style: none;
  }
  .negocio__lista li + li {
    display: none;
  }
}

/* catálogo en el teléfono: sin fotos de grupo y tarjetas más bajas */
@media (max-width: 599px) {
  .grupo__foto {
    display: none;
  }
  .tarjeta-servicio {
    gap: var(--e-1);
    padding: var(--e-3) var(--e-4);
  }
  .tarjeta-servicio__para {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-s);
  }
  .tarjeta-servicio__insignias {
    display: none;
  }
  .rejilla-servicios {
    gap: var(--e-2);
  }
  .catalogo--buscando .tarjeta-servicio__para {
    -webkit-line-clamp: 3;
  }
}
/* con una búsqueda, los filtros se pliegan detrás de «Filtrar» */
.filtros__mas {
  display: none;
}
@media (max-width: 899px) {
  .filtros--buscando:not(.filtros--abiertos) .filtros__grupo,
  .filtros--buscando:not(.filtros--abiertos) .filtros__fila > :not(.filtros__cuenta, .filtros__mas) {
    display: none;
  }
  .filtros--buscando .filtros__mas {
    display: inline-flex;
  }
}

/* en oscuro, las bandas grafito se separan del fondo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .seccion--oscura {
    background: var(--oscuro);
    border-block: 1px solid var(--linea);
  }
}
:root[data-theme='dark'] .seccion--oscura {
  background: var(--oscuro);
  border-block: 1px solid var(--linea);
}

/* etapas sugeridas (páginas de negocio) */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}
.etapa {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 900px) {
  .etapa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: var(--e-6);
    align-items: start;
  }
}
.etapa__nombre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
}
.etapa__num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  background: var(--senal);
  color: var(--sobre-senal);
  font-size: var(--t-s);
}
.etapa__desc {
  margin-top: var(--e-1);
  color: var(--tinta-2);
  font-size: var(--t-s);
  max-width: 36ch;
}
.etapa__servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}
.etapa__servicios a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--acento) 45%, transparent);
  text-underline-offset: 4px;
}
.etapa__agregar {
  justify-self: start;
}
.filtros {
  grid-template-columns: minmax(0, 1fr);
}
.pagina-catalogo,
.catalogo {
  min-width: 0;
}

/* las preguntas de la ficha con el mismo aire que las demás secciones */
.ficha-detalle + .seccion--junta {
  padding-top: var(--e-seccion);
}

.seccion--junta > .seccion__titulo {
  margin-bottom: var(--e-4);
}
.tarjeta-servicio__insignias {
  align-self: start;
}

/* fuentes citadas al pie de la ficha */
.fuentes {
  margin-top: var(--e-6);
  max-width: 56rem;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.fuentes h3 {
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: var(--e-2);
}
.fuentes ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--e-1);
}

.sin-corte {
  white-space: nowrap;
}

/* coincidencias resaltadas en los resultados del buscador */
.resultado mark {
  background: none;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--senal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.resultado small mark {
  font-weight: 700;
  color: var(--tinta-2);
}

.heroe__imagen img {
  object-position: 62% 50%;
}
@media (min-width: 1040px) {
  .heroe__imagen img {
    aspect-ratio: 1 / 1;
  }
}

/* guías */
.guias-lista {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--linea);
  max-width: 56rem;
}
.guia-fila {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
}
.guia-fila .ico {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--acento);
  margin-top: 2px;
}
.guia-fila strong {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-m);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-estado) var(--ease-salida);
}
.guia-fila small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: var(--t-s);
}
.guia-fila:focus-visible strong {
  text-decoration-color: var(--senal);
}
@media (hover: hover) and (pointer: fine) {
  .guia-fila:hover strong {
    text-decoration-color: var(--senal);
  }
}
.guia__bajada {
  font-size: var(--t-l);
  color: var(--tinta-2);
  margin-top: var(--e-3);
}
.fuentes--guia {
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
}
.fuentes--guia h2 {
  font-size: var(--t-m);
}

/* el diálogo del buscador bloquea el desplazamiento de la página de atrás; el hueco de la barra no salta */
html {
  scroll-padding-top: calc(var(--cabecera-alto) + 16px);
}
/* el hueco de la barra se reserva solo mientras el diálogo bloquea el desplazamiento (si no, la página salta);
   reservarlo siempre dejaba una franja clara a la derecha de las bandas oscuras con barras clásicas */
html.sin-desplazar {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.filtros__mas {
  align-items: center;
  gap: 6px;
}
.filtros__mas .ico {
  width: 18px;
  height: 18px;
}

/* escala: las bajadas a 20 px con aire, la pregunta del diagnóstico compacta, los h3 de bloque al nivel intermedio */
.seccion__bajada,
.heroe__bajada {
  line-height: 1.45;
}
.diag__pregunta {
  line-height: 1.12;
}
.paso__titulo,
.etapa__nombre,
.ficha-cuerpo__col h2,
.ficha-detalle__bloque h2 {
  font-size: var(--t-sub);
}

/* ── portada con el producto: superficie petróleo, titular en crema y las demos en sus dispositivos ── */
.heroe--producto {
  --h-texto: var(--sobre-oscuro);
  --h-texto-2: var(--sobre-oscuro-2);
  background: var(--petroleo-hondo);
  color: var(--h-texto);
  border-bottom: 0;
  padding-block: var(--e-8) var(--e-seccion);
  /* sin overflow: clip: recortaba el desplegable del buscador (3 de 9 resultados, sin la fila «Pregúntanos») */
}
.heroe--producto .heroe__titulo {
  color: var(--h-texto);
}
.heroe--producto .heroe__bajada,
.heroe--producto .heroe__prueba {
  color: var(--h-texto-2);
}
.heroe--producto .heroe__buscar {
  border-color: transparent;
}
.heroe--producto .heroe__buscar:focus-within {
  box-shadow: 0 0 0 3px var(--senal);
}
.heroe--producto .chip-texto {
  color: var(--h-texto);
  text-decoration-color: color-mix(in srgb, var(--senal) 70%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .heroe--producto .chip-texto:hover {
    text-decoration-color: var(--senal);
  }
}
.heroe--producto .heroe__diagnostico .boton--linea {
  --b-texto: var(--h-texto);
  border-color: color-mix(in srgb, var(--h-texto) 45%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .heroe--producto .heroe__diagnostico .boton--linea:hover {
    --b-fondo: color-mix(in srgb, var(--h-texto) 12%, transparent);
    --b-texto: var(--h-texto);
    border-color: var(--h-texto);
  }
}
.heroe--producto :focus-visible {
  outline-color: var(--senal);
}
/* «Buscar» va dentro de la caja crema: el anillo ámbar sobre el botón ámbar no se veía (1,75:1). Anillo doble, crema y
   grafito, dentro de la caja; el contorno transparente queda para el modo de alto contraste. */
.heroe--producto .heroe__buscar .boton:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--caja-clara), 0 0 0 4px var(--sobre-caja);
}
.heroe__producto {
  margin: 0;
  display: grid;
  gap: var(--e-4);
}
.heroe__dispositivos {
  position: relative;
  padding-left: 14%;
  padding-bottom: 6%;
}
.heroe__dispositivos .dispositivo--portatil {
  margin-bottom: 0;
}
.dispositivo--telefono {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 27%;
  padding: 7px;
  border-radius: 26px;
  background: #15181b;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
}
.dispositivo--telefono .dispositivo__pantalla {
  aspect-ratio: 9 / 19.5; /* la del video y las capturas (390 × 844); con 9/18,5 se cortaba la barra del pedido */
  border-radius: 19px;
  background: #eef0f4;
}
.heroe__producto figcaption {
  font-size: var(--t-xs);
  color: var(--h-texto-2);
  max-width: 52ch;
  padding-left: 14%;
}
.heroe__producto figcaption a {
  color: var(--h-texto);
  text-decoration-color: var(--senal);
}
@media (max-width: 1039px) {
  .heroe__dispositivos {
    max-width: 620px;
  }
  .heroe__producto figcaption {
    padding-left: 0;
  }
}

/* la caja del buscador de la portada es crema en los dos modos, con su texto oscuro */
.heroe--producto .heroe__buscar {
  background: var(--caja-clara);
}
.heroe--producto .heroe__buscar input {
  color: var(--sobre-caja);
}
.heroe--producto .heroe__buscar input::placeholder,
.heroe--producto .heroe__buscar > .ico {
  color: var(--sobre-caja-2);
}
/* en oscuro, las bandas oscuras van en petróleo para separarse del fondo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .seccion--oscura {
    background: var(--petroleo-hondo);
    border-block: 0;
  }
}
:root[data-theme='dark'] .seccion--oscura {
  background: var(--petroleo-hondo);
  border-block: 0;
}
/* ficha: cada columna con su propio filete (antes uno solo que pasaba de largo el contenido) */
.ficha-cuerpo {
  border-top: 0;
}
.ficha-cuerpo__col {
  border-top: 2px solid var(--tinta);
}
/* etapas: columnas fijas para que las tres filas alineen */
@media (min-width: 900px) {
  .etapa {
    grid-template-columns: 20rem minmax(0, 1fr) 15rem;
  }
  .etapa__agregar {
    justify-self: end;
  }
}

/* menú del teléfono: X cuando está abierto y una flecha en cada grupo */
.hamburguesa .ico--cerrar,
.hamburguesa[aria-expanded='true'] .ico--abrir {
  display: none;
}
.hamburguesa[aria-expanded='true'] .ico--cerrar {
  display: inline;
}
.menu-movil__grupo summary {
  list-style: none;
  justify-content: space-between;
}
.menu-movil__grupo summary::-webkit-details-marker {
  display: none;
}
.menu-movil__grupo summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-estado) var(--ease-salida);
  margin-right: 6px;
}
.menu-movil__grupo[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
/* el buscador de la portada a 16 px: con menos, el iPhone amplía la página al tocarlo */
@media (max-width: 480px) {
  .heroe__buscar input {
    font-size: 16px;
  }
}
/* tamaños de toque en el teléfono */
@media (pointer: coarse) {
  .pie__columnas a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pie__columnas li + li {
    margin-top: 0;
  }
  /* cada enlace ya mide 44 px de alto: el espacio entre filas sobra */
  .pie__columnas ul {
    gap: 0;
  }
  .boton-chico {
    min-height: 44px;
  }
  .migas a {
    display: inline-block;
    padding-block: 12px;
  }
}
.cabecera__cta {
  min-height: 44px;
}
/* catálogo en el teléfono: la búsqueda y los negocios a la vista; tipo, demo e instalación detrás de «Filtrar» */
@media (max-width: 899px) {
  .filtros:not(.filtros--abiertos) .filtros__fila > :not(.filtros__cuenta, .filtros__mas) {
    display: none;
  }
  .filtros .filtros__mas {
    display: inline-flex;
  }
  .filtros {
    padding: var(--e-4);
    gap: var(--e-3);
  }
}

/* tipos de negocio como índice tipográfico: nombre, el problema que más se repite y cuántos servicios hay */
.negocios--indice {
  gap: 0 var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  border-top: 0;
}
.negocios--indice .negocio {
  display: grid;
  grid-template-rows: none;
  grid-template-columns: none;
  align-content: start;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-4) 0 var(--e-5);
  border: 0;
  border-top: 2px solid var(--tinta);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.negocios--indice .negocio__nombre {
  font-size: var(--t-l);
}
.negocio__problema {
  color: var(--tinta-2);
  font-size: var(--t-m);
  line-height: 1.45;
}
.negocios--indice .negocio:focus-visible .negocio__nombre {
  text-decoration: underline;
  text-decoration-color: var(--senal);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .negocios--indice .negocio:hover .negocio__nombre {
    text-decoration: underline;
    text-decoration-color: var(--senal);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}
@media (max-width: 639px) {
  .negocios--indice .negocio {
    padding-block: var(--e-4);
    border-top-width: 1px;
  }
}
/* situaciones sin ícono: texto con su raya de color al pasar */
.situacion {
  padding-left: 0;
}
@media (min-width: 900px) {
  .situacion {
    padding-left: var(--e-3);
  }
}

/* servicios como filas, no como cajas: nombre, una línea de para qué sirve, y abajo insignias, precio y «Agregar» */
.rejilla-servicios {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e-7);
}
@media (min-width: 900px) {
  .rejilla-servicios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tarjeta-servicio {
  grid-template-rows: auto auto auto;
  gap: var(--e-2);
  padding: var(--e-4) 0 var(--e-4);
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.tarjeta-servicio:target {
  border-color: var(--senal);
  box-shadow: none;
  background: var(--senal-suave);
}
.tarjeta-servicio__nombre {
  font-size: var(--t-m);
}
.tarjeta-servicio__para {
  color: var(--tinta-2);
  font-size: var(--t-s);
  max-width: 62ch;
}
.tarjeta-servicio__pie {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  border-top: 0;
  padding-top: 0;
}
.tarjeta-servicio__insignias:empty {
  display: none;
}
.tarjeta-servicio__pie .boton-chico {
  margin-left: auto;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-servicio:hover {
    border-color: var(--linea);
  }
  .tarjeta-servicio:hover .tarjeta-servicio__nombre a {
    text-decoration-color: var(--senal);
  }
}

.tarjeta-servicio__nombre a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-estado) var(--ease-salida);
}
.tarjeta-servicio__precio:empty {
  display: none;
}
/* el teléfono más grande: la carta tiene que leerse */
.heroe__dispositivos {
  padding-left: 20%;
  padding-bottom: 10%;
}
.dispositivo--telefono {
  width: 34%;
}
.heroe__producto figcaption {
  padding-left: 20%;
}
@media (min-width: 1040px) {
  .heroe--producto .heroe__fila {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.sin-resultados__cerca {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--tinta-2);
}

/* paso 1 del diagnóstico: filas de texto (sin fotos), con el problema típico de cada negocio */
.diag__negocios {
  gap: 0 var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.diag-negocio {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 26px);
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.diag-negocio::before {
  content: '';
  position: absolute;
  left: var(--e-2);
  top: calc(var(--e-3) + 4px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--borde-control);
  background: var(--tarjeta);
}
.diag-negocio:has(input:checked)::before {
  border-color: var(--acento);
  background: radial-gradient(circle, var(--acento) 0 5px, var(--tarjeta) 6px);
}
.diag-negocio:has(input:checked) {
  box-shadow: none;
  background: var(--senal-suave);
}
.diag-negocio__nombre {
  padding: 0;
  font-weight: 700;
}
.diag-negocio__problema {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.diag__acciones--paso1 {
  margin-top: var(--e-4);
}

.cotizador__antes {
  font-size: var(--t-s);
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}
.cotizador__antes .enlace-boton {
  min-height: 44px;
}
.cotizador__por {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--apoyo);
  border-radius: var(--r-control);
  max-width: 60rem;
}
.nota-lista {
  align-self: center;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.insignia--demo {
  background: var(--senal);
  color: var(--sobre-senal);
}

.diag-resultado__marcaste {
  margin-top: var(--e-2);
  color: var(--tinta-2);
  font-size: var(--t-s);
  max-width: 70ch;
}

.grupo__cabeza--texto {
  display: block;
  margin-bottom: var(--e-3);
}
.grupo__cabeza--texto .grupo__titulo {
  font-size: var(--t-sub);
}

/* migas alineadas aunque los enlaces tengan 44 px de toque */
.migas {
  align-items: center;
}
/* cifras sueltas: proporcionales («11» con tabulares en Manrope se leía «1 1») */
.indice__cuenta,
.negocio__mas,
.etapa__num {
  font-variant-numeric: proportional-nums;
}
.tarjeta-servicio__pie .nota-lista {
  flex-basis: 100%;
  text-align: right;
  font-size: var(--t-xs);
}

/* páginas de negocio: el mismo héroe petróleo de la portada, con la demo del negocio */
/* las páginas de negocio empiezan a la misma altura que las fichas: con el relleno del héroe de la portada (72 px)
   quedaba una banda vacía arriba y el titular a y=234 en vez de 158 */
.heroe--negocio {
  padding-top: var(--e-6);
}
.heroe--negocio .migas,
.heroe--negocio .migas a {
  color: var(--h-texto-2);
}
.heroe--negocio .migas [aria-current] {
  color: var(--h-texto);
}
.heroe__negocio {
  margin-top: var(--e-4);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--senal);
}
.heroe__titulo--negocio {
  margin-top: var(--e-2);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  max-width: 20ch;
}
.heroe--negocio .heroe-sector__acciones {
  margin-top: var(--e-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.heroe--negocio .boton--linea {
  --b-texto: var(--h-texto);
  border-color: color-mix(in srgb, var(--h-texto) 45%, transparent);
}
.heroe__dispositivos--solo {
  padding-left: 0;
  padding-bottom: 0;
}
.heroe__dispositivos--solo + figcaption {
  padding-left: 0;
}
.heroe--solo-texto .heroe__fila {
  grid-template-columns: minmax(0, 1fr);
}
.heroe--solo-texto .heroe__titulo--negocio {
  max-width: 24ch;
}

/* «Lo que te resolvemos» como filas con filete (antes, cajas con píldoras) */
.problemas {
  gap: 0 var(--e-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .problemas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.problema {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-5) 0;
  border: 0;
  border-top: 2px solid var(--tinta);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.problema__que {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.25;
}
.problema__respuesta {
  color: var(--tinta-2);
}
.problema__servicios {
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.problema__servicios span {
  font-weight: 700;
  color: var(--tinta);
}
.problema__servicios a {
  color: var(--enlace, var(--acento));
  font-weight: 600;
}
.problema__servicios {
  display: block;
}

/* el desplegable de la portada cabe en la pantalla y la salida para preguntar queda siempre a la vista, abajo */
.heroe__resultados {
  max-height: min(26rem, 60vh);
}
.resultado--preguntar {
  position: sticky;
  bottom: 0;
  background: var(--tarjeta);
  box-shadow: 0 -1px 0 var(--linea);
}
/* primero (pantalla táctil o frase dudosa): pegada arriba, que es lo que el teclado deja ver */
.resultado--preguntar:first-child {
  top: 0;
  bottom: auto;
  z-index: 1;
  box-shadow: 0 1px 0 var(--linea);
}
.resultado--dudosa {
  background: color-mix(in srgb, var(--apoyo) 55%, var(--tarjeta));
}
/* en un teléfono, el diálogo arriba y no más alto que lo que deja el teclado */
@media (pointer: coarse) {
  .buscador {
    margin-top: 8px;
    max-height: calc(var(--vv-alto, 100dvh) - 16px);
  }
}

/* ── portada: el titular a todo el ancho; abajo, la búsqueda y el producto (más grande) ── */
.heroe--portada .heroe__fila {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'titulo' 'bajada' 'producto' 'buscar' 'prueba' 'diag';
  gap: var(--e-4);
  align-items: start;
}
.heroe--portada .heroe__texto {
  display: contents;
}
.heroe--portada .heroe__titulo {
  grid-area: titulo;
  font-size: 2.125rem;
  max-width: none;
}
.heroe--portada .heroe__bajada {
  grid-area: bajada;
  margin-top: 0;
}
.heroe--portada .heroe__buscar {
  grid-area: buscar;
  margin-top: var(--e-2);
}
.heroe--portada .heroe__prueba {
  grid-area: prueba;
  margin-top: 0;
}
.heroe--portada .heroe__diagnostico {
  grid-area: diag;
  margin-top: 0;
}
.heroe--portada .heroe__producto {
  grid-area: producto;
}
/* en el teléfono, solo la carta QR, recortada arriba, para que el producto entre en la primera pantalla */
@media (max-width: 1039px) {
  .heroe--portada {
    padding-block: var(--e-6) var(--e-8);
  }
  .heroe--portada .heroe__dispositivos {
    padding: 0;
    max-width: none;
  }
  .heroe--portada .dispositivo--portatil {
    display: none;
  }
  .heroe--portada .dispositivo--telefono {
    position: relative;
    width: min(62%, 260px);
    margin-inline: auto;
    border-radius: 26px 26px 0 0;
    padding-bottom: 0;
  }
  .heroe--portada .dispositivo--telefono .dispositivo__pantalla {
    aspect-ratio: 9 / 8.5;
    border-radius: 19px 19px 0 0;
  }
  .heroe--portada .heroe__producto figcaption {
    padding-left: 0;
    text-align: center;
    margin-inline: auto;
  }
}
@media (min-width: 1040px) {
  .heroe--portada .heroe__fila {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    grid-template-areas:
      'titulo titulo'
      'bajada producto'
      'buscar producto'
      'prueba producto'
      'diag producto';
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--e-8);
    row-gap: var(--e-4);
  }
  .heroe--portada .heroe__titulo {
    font-size: clamp(2.75rem, 4.2vw, 3.6rem);
    max-width: 24ch;
    margin-bottom: var(--e-2);
  }
  .heroe--portada .heroe__producto {
    align-self: start;
  }
}
/* mientras se ve el héroe (con su «Buscar» ámbar), «Pregúntanos» de la cabecera va con contorno */
.cabecera--sobre-heroe .cabecera__cta {
  --b-fondo: transparent;
  --b-texto: var(--tinta);
  border-color: var(--tinta);
}
@media (min-width: 1040px) {
  /* el teléfono es más alto que el portátil: el bloque reserva ese alto arriba para no tapar el titular */
  .heroe--portada .heroe__dispositivos {
    padding-top: 12%;
  }
}
@media (min-width: 1040px) {
  .heroe--portada .heroe__titulo {
    max-width: none;
    font-size: clamp(2.75rem, 3.9vw, 3.5rem);
  }
}

@media (max-width: 639px) {
  .solo-escritorio {
    display: none;
  }
  /* la pregunta de cada paso del diagnóstico no pesa más que el titular de la página */
  .diag__pregunta {
    font-size: 1.5rem;
  }
}

/* «Lo instalamos en tu local»: el equipo con su nombre, dónde va y su servicio */
.equipo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--tinta);
}
.equipo-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}
.equipo-lista strong {
  font-weight: 600;
}
.equipo-lista span {
  grid-column: 1;
  font-size: var(--t-s);
  color: var(--tinta-2);
}
.equipo-lista a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--t-s);
  font-weight: 600;
  text-align: right;
}
@media (max-width: 520px) {
  .equipo-lista li {
    grid-template-columns: minmax(0, 1fr);
  }
  .equipo-lista a {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
}
.dividida--equipo .dividida__foto {
  align-self: start;
}

.dividida--equipo .dividida__texto {
  align-self: start;
}

/* negocios sin demo: sus problemas, con las palabras del cliente, en la otra mitad del héroe */
.heroe__problemas {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: center;
  display: grid;
  gap: 0;
}
.heroe__problemas li {
  padding: var(--e-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--h-texto) 25%, transparent);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.3;
  color: var(--h-texto);
}
.heroe__problemas li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--h-texto) 25%, transparent);
}

.mega--directo:not([hidden]) {
  animation: none;
}
.ficha-heroe__agregar {
  align-self: center;
  font-weight: 600;
}

/* videos del producto: llenan la pantalla del dispositivo como las imágenes */
.dispositivo__pantalla video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* pie del video: el botón de pausa redondo al lado del texto, que va en un solo bloque */
.heroe__pie-video {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.heroe__pausa {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--h-texto, currentColor) 35%, transparent);
  background: transparent;
  color: var(--h-texto, inherit);
  cursor: pointer;
  transition: background-color var(--dur-estado) var(--ease-salida), border-color var(--dur-estado) var(--ease-salida);
}
.heroe__pausa .ico {
  width: 16px;
  height: 16px;
}
.heroe__pausa .ico--reproducir,
.heroe__pausa[aria-pressed="true"] .ico--pausa {
  display: none;
}
.heroe__pausa[aria-pressed="true"] .ico--reproducir {
  display: block;
}
.heroe__pausa:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .heroe__pausa:hover {
    background: color-mix(in srgb, var(--h-texto, currentColor) 12%, transparent);
    border-color: color-mix(in srgb, var(--h-texto, currentColor) 60%, transparent);
  }
}
@media (pointer: coarse) {
  .heroe__pausa {
    width: 44px;
    height: 44px;
  }
}

/* ── portada más corta en el teléfono (era 15.7 pantallas), sin quitar contenido ── */
@media (max-width: 639px) {
  /* demos: filas con miniatura en vez de tarjetas apiladas */
  .demos {
    gap: var(--e-2);
  }
  .demo__enlace {
    grid-template-rows: none;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
  }
  .demo__captura {
    aspect-ratio: 4 / 3;
    height: 100%;
  }
  .demo__texto {
    padding: var(--e-3);
    gap: 4px;
  }
  .demo__nombre {
    font-size: var(--t-m);
  }
  .demo__texto p {
    display: none;
  }
  /* «Lo que hacemos»: nombre y cuenta; la descripción está en el catálogo */
  .indice__desc {
    display: none;
  }
  /* «Cómo trabajamos»: dos columnas */
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-4);
  }
  .paso__titulo {
    font-size: var(--t-m);
  }
  /* equipo: filas más bajas */
  .equipo-lista li {
    padding: var(--e-2) 0;
  }
  /* tipos de negocio: menos aire */
  .negocios--indice .negocio {
    padding-block: var(--e-3);
    gap: 4px;
  }
  /* pie: dos columnas */
  .pie__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5) var(--e-4);
    margin-top: var(--e-6);
  }
}
@media (max-width: 639px) {
  /* en el teléfono bastan cinco ejemplos de equipo; los ocho siguen en escritorio y cada uno en su ficha */
  .equipo-lista li:nth-child(n + 6) {
    display: none;
  }
  .situacion small {
    font-size: var(--t-xs);
  }
  .preguntas .pregunta summary {
    padding-block: var(--e-3);
  }
}

@media (max-width: 639px) {
  .negocio__problema {
    font-size: var(--t-s);
    line-height: 1.4;
  }
}

/* el cuadrado ámbar del logo como punto final de los titulares */
.modulo {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.07em;
  background: var(--senal);
  border-radius: 0.03em;
  vertical-align: baseline;
}

/* En la página de un negocio la lista completa es un índice (lo explicado ya está arriba y en cada ficha):
   en el teléfono, nombre y precio a la izquierda y «Agregar» a la derecha, sin la descripción recortada. */
@media (max-width: 639px) {
  .rejilla-servicios--indice {
    gap: 0;
  }
  .rejilla-servicios--indice .tarjeta-servicio {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: var(--e-4);
    row-gap: 2px;
    padding: var(--e-3) 0;
  }
  .rejilla-servicios--indice .tarjeta-servicio__para {
    display: none;
  }
  .rejilla-servicios--indice .tarjeta-servicio__pie {
    display: contents;
  }
  .rejilla-servicios--indice .tarjeta-servicio__nombre {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--t-m);
  }
  .rejilla-servicios--indice .tarjeta-servicio__precio {
    grid-column: 1;
    grid-row: 2;
    font-weight: 600;
    color: var(--tinta-2);
  }
  .rejilla-servicios--indice .tarjeta-servicio__precio:empty {
    display: none;
  }
  .rejilla-servicios--indice .tarjeta-servicio__pie .boton-chico {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }
  /* con precio, el botón se centra frente a nombre y precio juntos */
  .rejilla-servicios--indice .tarjeta-servicio:has(.tarjeta-servicio__precio:not(:empty)) .boton-chico {
    grid-row: 1 / span 2;
  }
}

/* Salida de los paneles del menú: se desvanecen en 120 ms en vez de desaparecer de golpe. «display» con allow-discrete
   lo mantiene en pantalla mientras dura (la transición gana a [hidden]{display:none!important}). Si en su lugar se abre
   otro panel, el viejo se va sin salida (mega--sin-salida) para que no se crucen. */
.mega {
  transition:
    opacity 120ms var(--ease-salida),
    translate 120ms var(--ease-salida),
    display 120ms allow-discrete;
}
.mega[hidden] {
  opacity: 0;
  translate: -50% -4px;
  pointer-events: none;
}
.mega--sin-salida[hidden] {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    transition: none;
  }
}

/* catálogo: con una búsqueda, la descripción vuelve (explica por qué salió cada resultado), debajo de nombre y botón */
@media (max-width: 639px) {
  .catalogo--buscando .rejilla-servicios--indice .tarjeta-servicio__para {
    display: -webkit-box;
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
/* en el teléfono, el pie del video centrado como bloque y el texto alineado junto al botón */
@media (max-width: 1039px) {
  .heroe--portada .heroe__producto .heroe__pie-video {
    justify-content: center;
    text-align: left;
  }
}

/* ── héroe de la portada: avisos de ejemplo de los sistemas que hacemos ── */
.avisos-heroe {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
.avisos-heroe__marco {
  width: min(100%, 390px);
  justify-self: center;
  padding: 16px 12px 18px;
  border-radius: 30px;
  background: var(--oscuro);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 30px 60px -24px rgb(0 0 0 / 0.65);
}
.avisos-heroe__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin: 0 4px 10px;
}
.avisos-heroe__cabeza p {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--h-texto-2);
  letter-spacing: 0.02em;
}
.avisos-heroe__pausa {
  width: 32px;
  height: 32px;
}
@media (pointer: coarse) {
  /* el círculo se ve de 32 px pero el toque alcanza 44 */
  .avisos-heroe__pausa {
    width: 32px;
    height: 32px;
    position: relative;
  }
  .avisos-heroe__pausa::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}
@media (max-width: 360px) {
  .aviso-heroe__texto {
    font-size: 14px;
  }
}
.avisos-heroe__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.aviso-heroe {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--caja-clara);
  color: var(--sobre-caja);
  text-decoration: none;
  transition: background-color var(--dur-estado) var(--ease-salida);
}
.aviso-heroe:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .aviso-heroe:hover {
    background: var(--caja-clara-2);
  }
  .aviso-heroe:hover .aviso-heroe__texto {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--sobre-caja) 35%, transparent);
    text-underline-offset: 3px;
  }
}
/* en la computadora, la caja más grande y el texto a 17 px */
@media (min-width: 1040px) {
  .avisos-heroe__marco {
    width: min(100%, 460px);
  }
  .aviso-heroe__texto {
    font-size: var(--t-m);
  }
}
.aviso-heroe__icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0f766e;
  color: #ffffff;
}
.aviso-heroe__icono .ico {
  width: 20px;
  height: 20px;
}
.aviso-heroe__cabeza {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--sobre-caja-2);
}
.aviso-heroe__cabeza strong {
  color: var(--sobre-caja);
  font-weight: 750;
}
.aviso-heroe__texto {
  /* dos renglones en todos: si un aviso midiera más, la caja crecería al entrar y movería el buscador de abajo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
  margin-top: 2px;
  font-size: var(--t-s);
  line-height: 1.35;
}
.aviso-heroe__texto .num {
  font-weight: 750;
  white-space: nowrap;
}
.avisos-heroe .heroe__pie-video {
  justify-self: center;
  max-width: 46ch;
  font-size: var(--t-xs);
  color: var(--h-texto-2);
}
@media (max-width: 1039px) {
  /* en el teléfono, todo el ancho; en una tableta, sin estirarse: alineada con el texto */
  .heroe--portada.heroe--avisos .avisos-heroe__marco {
    width: min(100%, 560px);
    justify-self: start;
    border-radius: 22px;
  }
}
/* con los avisos, el buscador entra completo en la primera pantalla de un teléfono de 390 × 844 */
@media (max-width: 1039px) {
  .heroe--portada.heroe--avisos {
    padding-top: var(--e-5);
  }
  .heroe--portada.heroe--avisos .heroe__buscar {
    margin-top: 0;
  }
}

/* En el teléfono: titular, bajada, buscador y debajo los avisos. En un iPhone real Safari deja ver ~664 px de alto, no
   844: con los avisos antes, el buscador quedaba fuera de la primera pantalla. Los ejemplos «Prueba con» sobran ahí:
   al tocar el campo se abre el diálogo con sus propias sugerencias. */
@media (max-width: 1039px) {
  .heroe--portada.heroe--avisos .heroe__fila {
    grid-template-areas: 'titulo' 'bajada' 'buscar' 'producto' 'prueba' 'diag';
  }
}
@media (max-width: 639px) {
  .heroe--portada.heroe--avisos .heroe__prueba {
    display: none;
  }
}

/* Equilibrio del héroe (Jonathan, 3-oct: «algo no me cuadra»): las tarjetas con un renglón quedaban con un hueco abajo
   y la caja bajaba ~115 px más que la columna de texto. Ahora el contenido de cada aviso va centrado en su tarjeta, y
   en la computadora la caja va de la bajada al botón de las 3 preguntas, con tres avisos. */
.aviso-heroe {
  align-items: center;
  min-height: 5.1rem;
}
.aviso-heroe__texto {
  min-height: 0;
}
@media (min-width: 1040px) {
  .heroe--portada.heroe--avisos .heroe__fila {
    grid-template-rows: auto auto auto auto auto;
  }
  .heroe--portada.heroe--avisos .heroe__diagnostico {
    align-self: end;
  }
  .heroe--avisos .avisos-heroe {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  .heroe--avisos .avisos-heroe__marco {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: min(100%, 470px);
    padding: 12px 12px 14px;
  }
  .aviso-heroe {
    min-height: 5.5rem;
  }
}

/* ── héroe con la vitrina del producto (placa, teléfono y tableta con las pantallas de las demos) ── */
.heroe-vitrina {
  margin: 0;
  display: grid;
  gap: 2px;
}
.heroe-vitrina img {
  display: block;
  width: 100%;
  height: auto;
}
.heroe-vitrina figcaption {
  font-size: var(--t-xs);
  color: var(--h-texto-2);
  text-align: center;
}
/* en el teléfono: titular, bajada, buscador y debajo la foto (como con los avisos: el buscador entra en los ~664 px
   que deja ver Safari); en una tableta, sin estirarse */
@media (max-width: 1039px) {
  .heroe--portada.heroe--vitrina {
    padding-top: var(--e-5);
  }
  .heroe--portada.heroe--vitrina .heroe__buscar {
    margin-top: 0;
  }
  .heroe--portada.heroe--vitrina .heroe__fila {
    grid-template-areas: 'titulo' 'bajada' 'buscar' 'producto' 'prueba' 'diag';
  }
  .heroe--portada.heroe--vitrina .heroe-vitrina {
    width: min(100%, 520px);
    justify-self: center;
  }
}
@media (max-width: 639px) {
  .heroe--portada.heroe--vitrina .heroe__prueba {
    display: none;
  }
}
/* En la computadora, dos columnas parejas: el texto entero (con el titular) a la izquierda y la foto a la derecha,
   centrada en el alto del texto. Con el titular a todo el ancho, la foto quedaba más abajo que el texto, con un hueco
   bajo «¿No sabes qué pedir?» y la nota casi al pie de la pantalla (Jonathan, 3-oct: «me incomoda algo del hero»). */
@media (min-width: 1040px) {
  .heroe--portada.heroe--vitrina .heroe__fila {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    /* la foto es más alta que el texto: el sobrante va a las dos filas vacías de los extremos y el texto queda junto y
       centrado (con solo filas «auto», el alto de la foto se repartía entre ellas y abría huecos dentro del texto) */
    grid-template-areas:
      '. producto'
      'titulo producto'
      'bajada producto'
      'buscar producto'
      'diag producto'
      '. producto';
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--e-7);
    align-content: center;
  }
  .heroe--portada.heroe--vitrina .heroe__titulo {
    font-size: clamp(2.5rem, 3.2vw, 3rem);
    max-width: 22ch;
    text-wrap: balance;
  }
  /* La foto es la pieza del héroe: hasta 620 px (los objetos ocupaban el 8,5 % de la pantalla con 520), sin pasarse
     del alto de la primera pantalla. Su borde derecho, en el de «Pregúntanos» de la cabecera. */
  .heroe--portada.heroe--vitrina .heroe-vitrina {
    width: min(100%, 620px, calc(100vh - 160px));
    width: min(100%, 620px, calc(100svh - 160px));
    justify-self: end;
    align-self: center;
  }
  .heroe--portada.heroe--vitrina .heroe-vitrina figcaption {
    opacity: 0.8;
  }
}

/* buscador: los resultados de la tecla anterior, atenuados mientras se escribe (ver actualizar() en js/sitio.js) */
.buscador__resultados--viejos {
  opacity: 0.55;
  transition: opacity 120ms linear;
}
/* el desplegable de la portada no se muestra vacío (quedaba una franja blanca entre teclas) */
.heroe__resultados:not(:has([role="option"], .sin-resultados)) {
  display: none;
}

/* «Agregar a mi lista» de la ficha: los dos textos en la misma celda, así el botón no cambia de ancho ni se corre de
   debajo del puntero; la nota va en su renglón reservado. */
.ficha-heroe__agregar {
  display: inline-grid;
  align-items: center;
}
.ficha-heroe__agregar > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ficha-heroe__agregar .agregar__si,
.ficha-heroe__agregar[aria-pressed="true"] .agregar__no {
  visibility: hidden;
}
.ficha-heroe__agregar[aria-pressed="true"] .agregar__si {
  visibility: visible;
}
.ficha-heroe__agregar .ico {
  width: 18px;
  height: 18px;
}
.ficha-heroe__nota {
  min-height: 1.5em;
  margin-top: var(--e-2);
}
/* el contador de la lista flota sobre la esquina de «Pregúntanos»: dentro del botón lo ensanchaba y en el teléfono
   achicaba el logo de la cabecera (de 112 a 83 px) */
.cabecera__cta {
  position: relative;
}
.cabecera__cuenta {
  position: absolute;
  top: -7px;
  right: -7px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--fondo);
}

/* ── cabecera sobre el héroe oscuro: del mismo petróleo, se funde con él (como Stripe, Linear o Vercel); al bajar, clara ── */
.cabecera {
  transition:
    background-color var(--dur-estado) var(--ease-salida),
    border-color var(--dur-estado) var(--ease-salida);
}
/* Los dos logos en la misma celda y con fundido al ritmo del fondo de la cabecera: con el cambio instantáneo, durante
   los 220 ms del fondo el logo de texto oscuro quedaba sobre petróleo y desaparecía. */
.cabecera .marca {
  display: inline-grid;
}
.cabecera .marca > picture,
.cabecera .marca > .marca__sobre-oscuro {
  grid-area: 1 / 1;
  transition: opacity var(--dur-estado) var(--ease-salida);
}
.marca .marca__sobre-oscuro {
  opacity: 0;
}
.cabecera--sobre-heroe {
  --foco: var(--senal);
  background: var(--petroleo-hondo);
  border-bottom-color: transparent;
}
.cabecera--sobre-heroe .marca picture {
  opacity: 0;
}
.cabecera--sobre-heroe .marca .marca__sobre-oscuro {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cabecera,
  .cabecera .marca > * {
    transition: none;
  }
}
.cabecera--sobre-heroe .menu__boton,
.cabecera--sobre-heroe .menu__enlace {
  color: var(--sobre-oscuro);
}
.cabecera--sobre-heroe .buscar-boton,
.cabecera--sobre-heroe .hamburguesa {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.2);
  color: var(--sobre-oscuro);
}
.cabecera--sobre-heroe .buscar-boton {
  color: var(--sobre-oscuro-2);
}
.cabecera--sobre-heroe .buscar-boton kbd {
  border-color: rgb(255 255 255 / 0.25);
  color: var(--sobre-oscuro-2);
}
.cabecera--sobre-heroe .cabecera__cta {
  --b-fondo: transparent;
  --b-texto: var(--sobre-oscuro);
  border-color: rgb(246 247 249 / 0.75);
}
.cabecera--sobre-heroe .cabecera__cuenta {
  box-shadow: 0 0 0 2px var(--petroleo-hondo);
}
@media (hover: hover) and (pointer: fine) {
  .cabecera--sobre-heroe .menu__boton:hover,
  .cabecera--sobre-heroe .menu__enlace:hover,
  .cabecera--sobre-heroe .buscar-boton:hover {
    background: rgb(255 255 255 / 0.1);
  }
  .cabecera--sobre-heroe .cabecera__cta:hover {
    --b-fondo: rgb(255 255 255 / 0.12);
    border-color: var(--sobre-oscuro);
  }
}
/* el foco del teclado en ámbar en todas las franjas oscuras (el petróleo claro de --foco no llegaba a 3:1) */
.heroe--producto,
.seccion--oscura,
.banda-pregunta,
.pie {
  --foco: var(--senal);
}
/* el selector «Tipo» medía lo que su opción más larga («Sensores que avisan al WhatsApp») y sacaba la página de la
   pantalla a 320 y 360 px (revisión «encontrar»): en el teléfono ocupa su renglón sin pasarse */
.campo--en-linea,
.campo--en-linea select {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 520px) {
  .filtros__fila .campo--en-linea {
    flex: 1 1 100%;
  }
  .filtros__fila .campo--en-linea select {
    flex: 1;
    width: 100%;
  }
}
/* ── detalles de la revisión de interacción (3-oct) ── */
/* estados al pasar el puntero que faltaban o no se notaban */
@media (hover: hover) and (pointer: fine) {
  .pregunta summary:hover {
    color: var(--acento-texto, var(--tinta));
    text-decoration: underline;
    text-decoration-color: var(--senal);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .opcion:hover span {
    border-color: var(--tinta);
    background: var(--tarjeta);
  }
  .diag-problema:hover .diag-problema__caja {
    border-color: var(--tinta-2);
  }
  .diag-problema:hover .diag-problema__caja::before {
    border-color: var(--tinta);
  }
  .ficha-heroe__agregar:hover .agregar__no,
  .ficha-heroe__agregar:hover .agregar__si {
    text-decoration: underline;
    text-decoration-color: var(--senal);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
/* el menú grande entra en 150 ms y su fondo está entero desde el primer cuadro (antes 220 ms, y el titular se veía a
   través del panel mientras aparecía): solo el contenido sube la opacidad */
.mega:not([hidden]) {
  animation: none;
}
.mega:not([hidden]) > * {
  animation: aparecer-contenido 150ms var(--ease-salida);
}
@keyframes aparecer-contenido {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.mega--directo:not([hidden]) > * {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .mega:not([hidden]) > * {
    animation: none;
  }
}
/* migas en el teléfono: solo el nivel de arriba con una flecha («‹ Soluciones»); el actual ya es el título */
@media (max-width: 639px) {
  .migas > * {
    display: none;
  }
  /* con :not() para ganarle a «.migas a { display: inline-block }» de las pantallas táctiles (pointer: coarse), que
     volvía a mostrar «Inicio» y «Servicios» en un teléfono de verdad y no en el emulador sin táctil */
  .migas > a:not(:last-of-type) {
    display: none;
  }
  .migas > a:last-of-type {
    display: inline-flex;
  }
  .migas > a:last-of-type::before {
    content: "‹";
    margin-right: 6px;
    font-weight: 700;
  }
}

.buscador__cargando {
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-s);
  color: var(--tinta-3);
}

/* «Pregúntanos»: datos del negocio plegados, «Vaciar» y la nota debajo; en el teléfono, «Mandar» y «Copiar» en una barra
   fija abajo (antes quedaban a dos pantallas y media bajo cuatro campos opcionales) */
.cotizador__detalles summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.cotizador__detalles summary span {
  margin-left: 6px;
  font-weight: 400;
  color: var(--tinta-3);
}
.cotizador__detalles[open] summary {
  margin-bottom: var(--e-3);
}
.cotizador__pie {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--tinta-3);
}
@media (max-width: 639px) {
  .pagina-cotizar main {
    padding-bottom: 104px;
  }
  .pagina-cotizar .cotizador__acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: var(--e-2);
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--papel);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -10px 24px -20px rgb(0 0 0 / 0.45);
  }
  .pagina-cotizar .cotizador__acciones #cot-whatsapp {
    flex: 1;
    justify-content: center;
  }
  .pagina-cotizar.escribiendo .cotizador__acciones {
    display: none;
  }
}
/* El ámbar queda para la acción (botones, «Probar la demo», lo agregado a la lista) y el módulo del logo (revisión de
   dirección de arte: hacía siete oficios). Números, palomitas, franjas, antetítulos y subrayados van en el petróleo. */
.paso__titulo::before,
.etapa__num,
.insignia--demo,
.linea-tiempo li::before,
.lista-check .ico {
  background: var(--apoyo);
  color: var(--acento);
}
.rec--principal {
  border-top-color: var(--acento);
}
.negocio__mas {
  text-decoration-color: color-mix(in srgb, var(--acento) 45%, transparent);
}
/* el antetítulo de las páginas de negocio, sobre el petróleo oscuro: el verde claro de la marca (8,2:1). Solo en el
   teléfono: en pantalla ancha las migas ya terminan con el nombre del negocio y se leía dos veces seguidas. */
.heroe__negocio {
  color: var(--acento-sobre-oscuro);
}
@media (min-width: 640px) {
  .heroe__negocio {
    display: none;
  }
}
/* los enlaces «Con:» de los problemas, con 44 px de toque en el teléfono (medían de 19 a 32; con 11 px, 41) */
@media (pointer: coarse) {
  .problema__servicios a {
    padding-block: 13px;
  }
  /* los servicios de cada etapa son una lista, no una oración: una fila de 44 px por enlace (medían 20) */
  .etapa__servicios {
    gap: 0;
  }
  .etapa__servicios a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* «Pruébala» al pie de la demo: el toque crece a 44 px sin mover el renglón */
  .heroe__pie-video a,
  .heroe__producto figcaption a {
    display: inline-block;
    padding-block: 14px;
    margin-block: -14px;
  }
}
/* el menú del teléfono entra en 200 ms (bajaba de golpe) */
.menu-movil:not([hidden]) {
  animation: aparecer-contenido 200ms var(--ease-salida);
}
@media (prefers-reduced-motion: reduce) {
  .menu-movil:not([hidden]) {
    animation: none;
  }
}
/* ── «Lo instalamos en tu local»: la cocina ya instalada y la vitrina del equipo ── */
.instala__fila {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 900px) {
  .instala__fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--e-8);
  }
}
.instala__foto,
.ficha-equipo,
.heroe__escena {
  margin: 0;
  display: grid;
  gap: var(--e-2);
}
.instala__foto img,
.ficha-equipo img,
.heroe__escena img {
  width: 100%;
  height: auto;
  border-radius: var(--r-tarjeta);
  background: var(--apoyo);
}
.instala__foto figcaption,
.ficha-equipo figcaption,
.heroe__escena figcaption {
  font-size: var(--t-xs);
  color: var(--tinta-3);
}
.heroe__escena figcaption {
  color: var(--h-texto-2, var(--tinta-3));
}
/* una foto vertical (la puerta de la cabaña, el techo del minisúper) va en cuadrado en el héroe */
.heroe__escena--vertical img {
  aspect-ratio: 1;
  object-fit: cover;
  object-position: var(--encuadre, 50% 40%);
}
.equipos {
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-5) var(--e-4);
}
.equipo {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.equipo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-tarjeta);
  background: var(--acento);
  transition: transform var(--dur-estado) var(--ease-salida);
}
.equipo__nombre {
  margin-top: 4px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-m);
  line-height: 1.25;
}
.equipo__donde {
  font-size: var(--t-s);
  color: var(--tinta-3);
}
.equipo:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
  border-radius: var(--r-tarjeta);
}
@media (hover: hover) and (pointer: fine) {
  .equipo:hover img {
    transform: scale(1.02);
  }
  .equipo:hover .equipo__nombre {
    text-decoration: underline;
    text-decoration-color: var(--senal);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .equipo img {
    transition: none;
  }
}
/* en el teléfono, la vitrina se desliza de lado (no alarga la página): se ve una pieza y media */
@media (max-width: 899px) {
  .equipos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, 4vw));
    padding-inline: max(16px, 4vw);
    scroll-padding-inline: max(16px, 4vw);
    margin-top: var(--e-6);
  }
  .equipos::-webkit-scrollbar {
    display: none;
  }
  .equipos > li {
    scroll-snap-align: start;
  }
}
/* fichas: el equipo junto a «Equipo que se instala» */
.ficha-equipo {
  margin-top: var(--e-4);
  max-width: 420px;
}
.ficha-equipo--pieza {
  max-width: 240px;
}
.instala__texto {
  display: grid;
  gap: var(--e-3);
  align-content: center;
}
.instala__texto .lista-check {
  margin-top: var(--e-2);
}

/* ── sistema de títulos (3-oct). La medición encontró H2 de 17, 20, 26 y 40 px, y 700 y 800 al mismo tamaño en la
   misma ficha: la jerarquía dependía solo del tamaño y todo iba en negrita. Cuatro papeles, cada uno con un solo
   estilo, todos en Manrope 700 (la marca pide 600-700 para títulos):
   - H1 de página: 32 → 48 px. Los héroes de la portada y de los negocios llevan el suyo, más grande.
   - H2 de sección, en las páginas de recorrido (portada, negocios, catálogo, laboratorio y las bandas): 26 → 40 px.
   - Título de bloque: los H2 de las páginas de documento (fichas y guías), que van todos iguales, y los H3 de bloque
     de las páginas de recorrido: 20 → 25 px.
   - Título de tarjeta: 17 px (Manrope 700). ── */
:root {
  --t-h1: clamp(2rem, 1.25rem + 2.4vw, 3rem);
  --t-seccion: clamp(1.625rem, 1rem + 2vw, 2.5rem);
  --t-bloque: clamp(1.25rem, 1rem + 0.8vw, 1.5625rem);
}
.ficha-heroe__titulo,
.pagina-simple__titulo,
.texto-largo h1 {
  font-size: var(--t-h1);
}
.seccion__titulo,
.banda-pregunta__titulo {
  font-size: var(--t-seccion);
}
.seccion__titulo--chico,
.grupo__cabeza--texto .grupo__titulo,
.cotizador__subtitulo,
.ficha-cuerpo__col h2,
.ficha-detalle__bloque h2,
.texto-largo h2,
.fuentes--guia h2,
.grupo__titulo,
.paso__titulo,
.situaciones__titulo,
.diag-resultado__accion-titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-bloque);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* la cifra del precio en Manrope y por debajo del título de su bloque (iba en Inter 820 de 32 px, más grande que él) */
.ficha-cuerpo__cifra {
  font-family: var(--f-titulo);
  font-size: var(--t-l);
  letter-spacing: -0.01em;
}
/* las guías: el texto corrido a unos 66 caracteres por línea (llegaba a 80-84) */
.texto-largo > p,
.texto-largo > ul,
.texto-largo > ol,
.texto-largo li {
  max-width: 36rem;
}

/* Restaurantes, «Pruébalo ahora»: el video de la mesa con el teléfono a la derecha y abajo. A la izquierda tapaba
   «Por atender», justo donde entra el pedido de la mesa 7; abajo a la derecha solo queda plano vacío del salón. */
.dividida__foto [data-producto-video] .heroe__dispositivos {
  padding-left: 0;
  padding-right: 15%;
}
.dividida__foto [data-producto-video] .dispositivo--telefono {
  left: auto;
  right: 0;
  width: 26%;
}
.dividida__foto [data-producto-video] .heroe__pie-video {
  padding-left: 0;
}