/* Soporte (web/soporte/ y web/support/): sobre site.css (cabecera, pie, fuentes y colores de la landing).
   El formulario como el de dietas-v2: temas en tarjetas, datos, mensaje y los estados de enviar. */

.soporte { max-width: 880px; margin: 0 auto; padding: 128px var(--margen) 96px; }
.soporte h1 { margin: 0 0 14px; font: 400 clamp(40px, 5.4vw, 64px)/1.02 var(--pixel); letter-spacing: -.02em; }
.soporte-sub { margin: 0 0 40px; font-size: 18px; color: var(--muted); max-width: 620px; }
.soporte h2 { margin: 72px 0 18px; font: 400 clamp(30px, 3.6vw, 42px)/1.05 var(--pixel); letter-spacing: -.02em; }
.soporte a:not(.btn) { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.formulario {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ventana); padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--sombra-l);
}
.formulario fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.etiqueta { display: block; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tema { position: relative; display: block; cursor: pointer; }
.tema input { position: absolute; opacity: 0; pointer-events: none; }
.tema span {
  display: block; height: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.tema b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.tema small { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tema:hover span { border-color: #00000033; }
.tema input:checked + span { border-color: var(--acc-ink); background: #6ccbff1f; box-shadow: 0 0 0 1px var(--acc-ink) inset; }
.tema input:focus-visible + span { outline: 2px solid var(--acc-ink); outline-offset: 2px; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.campo input, .campo textarea {
  width: 100%; font: 400 15.5px/1.5 var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line2);
  border-radius: 12px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 160px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acc-ink); box-shadow: 0 0 0 3px var(--acc-soft); }
.campo-entero { grid-column: 1 / -1; }

.enviar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.enviar .btn { height: 46px; padding: 0 26px; font-size: 15px; }
.enviar .btn[disabled] { opacity: .55; cursor: progress; }
.aviso-datos { font-size: 13px; color: var(--muted); margin: 0; flex: 1; min-width: 220px; }
.estado { margin: 16px 0 0; font-size: 14.5px; }
.estado.mal { color: #b42318; }

.hecho { text-align: center; padding: 28px 8px; }
.hecho canvas { width: 96px; height: 96px; margin: 0 auto 14px; }
.hecho h3 { margin: 0 0 8px; font: 400 30px var(--pixel); }
.hecho p { margin: 0 auto; max-width: 460px; color: var(--muted); }

.preguntas details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; margin: 0 0 10px; }
.preguntas summary { cursor: pointer; padding: 16px 30px 16px 0; font-weight: 600; list-style: none; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0; top: 13px; font: 400 22px var(--mono); color: var(--muted); }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { margin: 0 0 16px; color: #3d3d3d; }

.idioma { font: 500 13px var(--mono); color: #555; border: 1px solid var(--line2); border-radius: 999px; padding: 4px 10px; }
.idioma:hover { color: var(--ink); border-color: #00000040; }
.nav-links a[aria-current="page"] { color: var(--ink); }

@media (max-width: 980px) {
  .nav .idioma { margin-left: auto; }
  .nav .btn { margin-left: 0; }
}
@media (max-width: 620px) {
  .nav { gap: 12px; }
  .marca { white-space: nowrap; }
  .nav .btn { padding: 0 14px; }
  .campos { grid-template-columns: 1fr; }
  .soporte { padding-top: 104px; }
}