/* =====================================================================
   RV25 Relojería · ACORDEÓN (preguntas que se abren y cierran)
   ---------------------------------------------------------------------
   Lista sobria al estilo de las relojerías de lujo: líneas finas entre
   preguntas, la pregunta en la letra de títulos y un círculo con + que
   se vuelve − al abrir. La respuesta se despliega suave (en navegadores
   que lo permiten; en los demás se abre al instante).

   Estructura:
     <div class="acordeon">
       <details name="grupo">          name igual = solo una abierta a la vez
         <summary>Pregunta</summary>
         <div class="acordeon-respuesta"><p>…</p></div>
       </details>
     </div>

   Variantes:
     .acordeon-oscuro    sobre azul noche (Políticas)
     .acordeon-numerado  01, 02, 03… delante de cada título
   Se usa en la sección Ayuda (css/secciones/ayuda.css).
   ===================================================================== */

/* Permite animar hasta la altura "automática" de la respuesta */
:root { interpolate-size: allow-keywords; }

.acordeon {
  --acordeon-linea: var(--arena-2);
  --acordeon-texto: var(--tinta-suave);
  --acordeon-icono: var(--tinta);
  border-top: 1px solid var(--acordeon-linea);
  counter-reset: acordeon;
}

.acordeon details { border-bottom: 1px solid var(--acordeon-linea); counter-increment: acordeon; }

.acordeon summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 18px;
  min-height: 64px; padding: 18px 0;
  font: 400 clamp(19px, 4.6vw, 22px)/1.3 var(--titulo); letter-spacing: -0.01em;
  transition: color .2s ease;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--acento-texto); }
.acordeon summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 2px; }

/* Círculo con + / − a la derecha */
.acordeon summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--acordeon-linea);
  background:
    linear-gradient(var(--acordeon-icono), var(--acordeon-icono)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--acordeon-icono), var(--acordeon-icono)) center / 1.5px 12px no-repeat;
  transition: transform .3s ease, background-size .3s ease, box-shadow .2s ease;
}
.acordeon summary:hover::after { box-shadow: inset 0 0 0 1px var(--acordeon-icono); }
.acordeon details[open] summary::after {
  transform: rotate(180deg);
  background-size: 12px 1.5px, 1.5px 0;   /* la línea vertical desaparece: queda − */
}

/* Respuesta */
.acordeon-respuesta { display: grid; gap: 14px; padding: 0 56px 28px 0; }
.acordeon-respuesta p { max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--acordeon-texto); }
/* La primera frase es la respuesta directa (la que leen Google y los asistentes) */
.acordeon:not(.acordeon-oscuro) .respuesta-corta { color: var(--tinta); font-weight: 500; }
/* Pasos o puntos a revisar */
.acordeon-respuesta ul,
.acordeon-respuesta ol {
  display: grid; gap: 8px;
  max-width: 62ch; margin: 0; padding-left: 1.25em;
  font-size: 16px; line-height: 1.6; color: var(--acordeon-texto);
}
.acordeon-respuesta li::marker { color: var(--acento-texto); }
.acordeon:not(.acordeon-oscuro) .acordeon-respuesta strong { color: var(--tinta); font-weight: 600; }
@media (max-width: 559px) {
  .acordeon-respuesta { padding-right: 8px; }
}

/* Despliegue suave (Chrome, Edge y los que entienden ::details-content) */
.acordeon details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.acordeon details[open]::details-content { block-size: auto; }

/* --- Numerado: 01, 02, 03… --- */
.acordeon-numerado summary::before {
  content: counter(acordeon, decimal-leading-zero);
  flex: none; width: 2.2em;
  font: 500 12px/1 var(--letra); letter-spacing: .1em;
  color: var(--acento);
}
.acordeon-numerado .acordeon-respuesta { padding-left: calc(2.2em * 12 / 16 + 18px); }

/* --- Sobre azul noche --- */
.acordeon-oscuro {
  --acordeon-linea: rgba(245, 239, 230, .16);
  --acordeon-texto: var(--tinta-sobre-noche);
  --acordeon-icono: var(--fondo);
}
.acordeon-oscuro summary { color: var(--fondo); }
.acordeon-oscuro summary:hover { color: var(--acento); }

@media (max-width: 559px) {
  .acordeon-respuesta { padding-right: 0; }
  .acordeon-numerado .acordeon-respuesta { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .acordeon details::details-content { transition: none; }
  .acordeon summary::after { transition: none; }
}