/* LORENZO Colorlab — "Laboratorio digital · Qué ofrecemos"
   Tira de iconos + panel de lectura a dos columnas (opción 2b).
   Depende de styles.css (tokens) y de service-icons.css (iconos animados). */

.qo-section {
  padding: clamp(96px, 11vw, 152px) var(--page-gutter);
  background: var(--bg);
}

/* Cabecera: título a la izquierda, texto de entrada a la derecha */
.qo-hd {
  display: block;
  text-align: center;
  margin-bottom: clamp(48px, 5.6vw, 84px);
}

/* Cuerpo de texto del panel */
.qo-p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 12.5px; line-height: 2; color: var(--fg-muted);
}
.qo-p + .qo-p { margin-top: 13px; }

/* Tira de iconos */
.qo-strip {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.qo-tile {
  background: var(--bg); color: var(--fg-faint);
  padding: clamp(20px, 2.2vw, 30px) 14px clamp(16px, 1.8vw, 22px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; cursor: pointer;
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.qo-tile:hover { color: var(--fg-muted); background: var(--bg-raised); }
.qo-tile.on { color: var(--fg); background: var(--bg-sunk); }
.qo-tile span {
  font-family: var(--font-body); font-weight: 300; font-size: 8.5px;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7;
  color: currentColor;
}
.qo-tile > span:not(.sic-box) {
  color: rgba(240, 237, 232, 0.42);
  transition: color .4s var(--ease-out);
}
.qo-tile:hover > span:not(.sic-box),
.qo-tile.on > span:not(.sic-box) { color: var(--fg); }

/* Panel de lectura */
.qo-read {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(28px, 4vw, 72px); padding-top: clamp(34px, 4vw, 56px);
  animation: qo-in .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes qo-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.qo-phase {
  font-family: var(--font-body); font-weight: 300; font-size: 9px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-subtle);
}
.qo-read h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.025em; line-height: 0.95; color: var(--fg);
  font-size: clamp(20px, 2.4vw, 34px); margin-top: 16px;
}
.qo-cols { columns: 2; column-gap: clamp(28px, 3.4vw, 56px); }
.qo-cols .qo-p { break-inside: avoid; }

@media (prefers-reduced-motion: reduce) {
  .qo-read { animation: none; }
}

@media (max-width: 1100px) {
    .qo-strip { grid-template-columns: repeat(3, 1fr); }
  .qo-read { grid-template-columns: 1fr; }
  .qo-cols { columns: 1; }
  .qo-tile { cursor: pointer; }
  /* Tablet y móvil: el panel de lectura queda centrado */
  .qo-read { text-align: center; justify-items: center; }
  .qo-read .qo-p { margin-left: auto; margin-right: auto; text-align: justify; text-justify: inter-word; hyphens: auto; }
}
@media (max-width: 640px) {
  .qo-strip { grid-template-columns: repeat(2, 1fr); }
  /* Última tile impar: ocupa las dos columnas y se centra */
  .qo-strip .qo-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Móvil (≤760px): acordeón — icono a la izquierda, nombre a la derecha ── */
.qo-acc { display: grid; gap: 1px; }
.qo-acc-item { background: var(--bg-raised); border: 1px solid var(--rule-strong); }
.qo-acc-item.on { border-color: var(--bone); background: var(--bg-sunk); }

.qo-acc-hd {
  width: 100%; min-height: 62px; background: none; border: 0;
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .35s var(--ease-out);
}
.qo-acc-ic { width: 30px; height: 30px; color: var(--bone); }
.qo-acc-name {
  flex: 1 1 auto; font-family: var(--font-body); font-weight: 400;
  font-size: 10px; letter-spacing: 0.18em; line-height: 1.6;
  text-transform: uppercase; color: var(--fg);
}

/* Signo +/− dibujado a 1px, cabos rectos */
.qo-acc-sign { position: relative; width: 13px; height: 13px; flex: none; }
.qo-acc-sign::before, .qo-acc-sign::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1px;
  background: var(--fg); transition: transform .4s var(--ease-out), opacity .3s;
}
.qo-acc-sign::after { transform: rotate(90deg); }
.qo-acc-item.on .qo-acc-sign::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

.qo-acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.qo-acc-item.on .qo-acc-body { grid-template-rows: 1fr; }
.qo-acc-inner {
  overflow: hidden; min-height: 0;
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.qo-acc-item.on .qo-acc-inner { opacity: 1; transition-delay: .12s; }
.qo-acc-inner > .qo-phase { padding: 0 16px 14px; }
.qo-acc-inner .qo-p {
  padding: 0 16px; text-align: left; hyphens: auto;
}
.qo-acc-inner .qo-p:last-child { padding-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
  .qo-acc-body, .qo-acc-inner, .qo-acc-sign::before, .qo-acc-sign::after { transition: none; }
}

/* Both layouts ship in the HTML (all service copy is crawlable). Show the one
   the React version rendered at each width: tabs above 760px, accordion at or
   below. Selection is handled by lc-pages.js. */
@media (min-width: 761px) { .qo-acc { display: none !important; } }
@media (max-width: 760px) { .qo-strip, .qo-read { display: none !important; } }
.qo-read[hidden] { display: none !important; }