/* mktn.es · FAQ (opción 10b). Pieza compartida: acordeón details/summary, titular a todo ancho,
   números grandes y flecha diagonal. Estados solo con CSS. */
.faq { --acc: #1F3A30; --hov: #E6E4DE; padding: 120px var(--gut) 120px; }
.faq-head { display: flex; flex-wrap: wrap; gap: 20px 64px; justify-content: space-between; align-items: flex-end; padding-bottom: 28px; }
.faq-head h2 { font-size: 92px; line-height: .88; font-weight: 600; letter-spacing: -.05em; }
.faq-head p { display: flex; flex-wrap: wrap; gap: 0 .35em; align-items: center; font-size: 18px; line-height: 1.45; color: var(--sc); }
.faq a { color: var(--tx); font-weight: 600; text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq a:hover { text-decoration-thickness: 3px; }
.faq a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
.faq-head a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.faq-list { display: flex; flex-direction: column; border-top: 2px solid var(--tx); border-bottom: 1px solid var(--ln); }
.faq details + details { border-top: 1px solid var(--ln); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 16px; align-items: center; padding: 10px 0; border-radius: 4px; transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) and (hover: hover) {
  .faq summary { position: relative; isolation: isolate; }
  .faq summary::before { content: ""; position: absolute; inset: 0 -20px; z-index: -1; background: var(--hov); border-radius: 6px; opacity: 0; transition: opacity .2s ease; }
  .faq summary:hover::before { opacity: 1; }
  .faq .q { transition: translate .25s ease; }
  .faq summary:hover .q { translate: 12px 0; }
  .faq .ar-i { translate: 0 0; }
  .faq summary:hover .ar-i { translate: 5px 5px; color: var(--acc); }
  .faq details[open] summary:hover .ar-i { translate: 0 -5px; }
}
.faq summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.faq .q { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: pretty; }
.faq .ar { display: grid; place-items: center; width: 56px; height: 44px; justify-self: end; }
.faq .ar-i { display: grid; transform: rotate(45deg); transition: transform .25s ease, translate .25s ease, color .2s ease; }
.faq details[open] .ar-i { color: var(--acc); }
.faq details[open] .ar-i { transform: rotate(-90deg); }
.faq .answer { display: flex; flex-direction: column; gap: 14px; padding: 0 72px 20px 0; font-size: 17px; line-height: 1.6; }
.faq .answer p { max-width: 46em; text-wrap: pretty; }
.faq .tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; max-width: 68em; margin: 0; padding: 0; list-style: none; }
.faq .tech li { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--ln); }
.faq .tech strong { font-weight: 600; }
.faq .tech span { color: var(--sc); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .faq summary, .faq summary::before, .faq .q, .faq .ar-i { transition: none; } .faq summary:hover .q, .faq summary:hover .ar-i { translate: none; } }

@media (max-width: 760px) {
  .faq { padding-top: 88px; padding-bottom: 88px; }
  .faq-head { padding-bottom: 28px; }
  .faq-head h2 { font-size: 52px; }
  .faq summary { grid-template-columns: minmax(0, 1fr) 36px; padding: 16px 0; }
    .faq .q { font-size: 19px; }
  .faq .ar { width: 36px; }
  .faq .answer { padding: 0 0 24px 0; font-size: 16px; }
  .faq .tech { grid-template-columns: minmax(0, 1fr); }
}