/* COAMUN r8 · W3: Dudas, Registro y pie. Solo lo nuevo de r8; la base sigue en estilos.css. */

/* --- W3-1 · Dudas = «Puntos de información» ---
   Al abrir, la placa (la fila de la pregunta) se levanta como la de un delegado que pide la palabra: gira hacia atrás
   sobre su orilla de abajo (rotateX con la propiedad `rotate`, que no pisa el translateX del hover ni del foco) y vuelve
   derecha con un rebote corto. Sigue siendo <details>: Tab y Enter, y el lector de pantalla, como siempre.
   r8c (J54): sin el sello de r8b sobre la respuesta. La respuesta se abre sobre el papel con la raya lacre que se dibuja (r7g); el gesto
   propio va sobre las piezas que ya estaban: el punto lacre late, gira y se vuelve raya, y la pregunta abierta sube de
   peso (600 → 700, Manrope variable: sin cambio de caja). Al cerrar, la raya vuelve a punto y el peso baja. */
.dudas-item {
  perspective: 620px;
  perspective-origin: 30% 50%;
}
.dudas-pregunta {
  transform-origin: 50% 100%;
  border-radius: 6px;
  transition: transform 240ms var(--curva), font-weight 320ms ease-out;
}
.dudas-item[open] .dudas-pregunta {
  font-weight: 700;
  animation: placa-se-levanta 560ms cubic-bezier(.3, .7, .3, 1) both;
}
.dudas-item--cerrando[open] .dudas-pregunta,
.dudas-item--espera[open] .dudas-pregunta {
  font-weight: 600;
  animation: none;
}
/* r8b: sin cartón. La fila gira sobre el mismo papel (antes un fondo claro con sombra: una tarjeta blanca genérica). */
@keyframes placa-se-levanta {
  0% { rotate: x 0deg; }
  30% { rotate: x 30deg; }
  64% { rotate: x -5deg; }
  84% { rotate: x 1.5deg; }
  100% { rotate: x 0deg; }
}

/* El punto se vuelve raya: late como en r7g (1.3 → 1) y luego gira media vuelta mientras se estira (10 × 10 → 18 × 3). */
.dudas-item[open] .dudas-pregunta::after {
  animation: punto-a-raya 640ms cubic-bezier(.23, 1, .32, 1) both;
}
.dudas-item--cerrando[open] .dudas-pregunta::after {
  animation: raya-a-punto 280ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes punto-a-raya {
  0% { transform: rotate(0deg) scale(1.3); }
  30% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(180deg) scale(1.8, .3); }
}
@keyframes raya-a-punto {
  from { transform: rotate(180deg) scale(1.8, .3); }
  to { transform: rotate(360deg) scale(1); }
}

/* Movimiento reducido: la lista queda quieta del todo. Sin giro; la pregunta abierta ya trae su raya y su peso puestos,
   y tampoco se corre con el hover o el foco: el anillo lacre marca el foco solo. */
@media (prefers-reduced-motion: reduce) {
  .dudas-item[open] .dudas-pregunta,
  .dudas-item[open] .dudas-pregunta::after,
  .dudas-item--cerrando[open] .dudas-pregunta::after {
    animation: none;
  }
  .dudas-item[open] .dudas-pregunta::after {
    transform: scale(1.8, .3);
  }
  .dudas-pregunta,
  .dudas-pregunta::after,
  .dudas-pregunta::before {
    transition: none;
  }
  .dudas-pregunta:hover,
  .dudas-pregunta:focus-visible {
    transform: none;
  }
  .dudas-pregunta:hover::after,
  .dudas-pregunta:hover::before,
  .dudas-pregunta:focus-visible::after,
  .dudas-pregunta:focus-visible::before {
    translate: none;
  }
}

/* --- W3-1b · Dudas a 390: el hueco del fondo ---
   Con la sección arriba, la lista terminaba a 700 px y quedaba papel vacío hasta 844 (más el aire de abajo de la sección).
   En táctil las filas respiran un poco más (también más área de toque) y la sección recoge su aire de abajo. */
@media (max-width: 767px) {
  .dudas-pregunta { padding-top: 2rem; padding-bottom: 2rem; }
  #dudas { padding-bottom: 48px; }
}

/* --- r9 W3-1 · Dudas = libro de actas que se rubrica ---
   Sin piezas nuevas (J54): las 6 rayas grises de las preguntas y sus puntos lacre ya estaban. Ahora, ligadas al scroll
   (app.js, iniciarDudas → --trazo por fila), cada raya se traza de izquierda a derecha cuando su fila sube del 92 % al 70 %
   de la pantalla, como el renglón de un acta, y al llegar a la orilla el punto lacre se estampa (la rúbrica). La 1.ª
   pregunta se contesta con el mismo scroll (--rubrica): el filete lacre se traza, el punto se vuelve raya, la pregunta
   sube de peso y la respuesta aparece. Sin reloj: si el scroll se detiene, todo se queda donde va. El borde de la fila
   sigue ahí (transparente), así que el alto no cambia (CLS 0). Sin JS o con movimiento reducido, todo puesto. */
.dudas-lista--actas .dudas-item {
  border-bottom-color: transparent;
  background: linear-gradient(var(--linea), var(--linea)) left bottom / calc(var(--trazo, 1) * 100%) 1px no-repeat;
}
.dudas-lista--actas .dudas-item:not([open]) .dudas-pregunta::after {
  animation: none;
  opacity: var(--punto, 1);
  transform: scale(calc(1.3 - .3 * var(--punto, 1)));
  box-shadow: 0 0 0 calc(9px * var(--punto, 1)) rgba(200, 16, 46, calc(.45 * (1 - var(--punto, 1))));
}
.dudas-lista--actas .dudas-item--espera[open] .dudas-pregunta {
  font-weight: calc(600 + 100 * var(--rubrica, 0));
  transition: transform 240ms var(--curva);   /* el peso lo lleva el scroll, sin el retraso de 320 ms */
}
.dudas-lista--actas .dudas-item--espera[open] .dudas-pregunta::before {
  transition: none;
  transform: scaleX(var(--rubrica, 0));
}
.dudas-lista--actas .dudas-item--espera[open] .dudas-pregunta::after {
  animation: none;
  opacity: clamp(0, calc(var(--rubrica, 0) * 5), 1);   /* el punto se estampa al empezar y se vuelve raya con el filete */
  transform: rotate(calc(180deg * var(--rubrica, 0))) scale(calc(1 + .8 * var(--rubrica, 0)), calc(1 - .7 * var(--rubrica, 0)));
}
.dudas-lista--actas .dudas-item--espera .dudas-respuesta {
  opacity: clamp(0, calc(var(--rubrica, 0) * 2.5 - 1.5), 1);
}
/* Contestada por el scroll: queda como una pregunta abierta, sin volver a correr las animaciones de abrir. */
.dudas-item--rubricada[open] .dudas-pregunta {
  font-weight: 700;
  animation: none;
}
.dudas-item--rubricada[open] .dudas-pregunta::after {
  animation: none;
  transform: rotate(180deg) scale(1.8, .3);
}
.dudas-item--rubricada .dudas-respuesta {
  animation: none;
}

/* --- r9 W3-2 · Registro a 390: sin hueco entre Dudas y el sello ---
   El sello ya no espera escondido a caber entero (dejaba ~40 % de papel vacío al bajar de Dudas): se asienta sobre el
   papel ligado al scroll (app.js, iniciarRegistro). Para que entre la última pregunta y el sello no quede más de un 10 %
   de pantalla, Dudas suelta su aire de abajo y Registro arranca 76 px bajo su orilla (más que los 72 px de la barra, que
   aquí además se esconde al bajar: J55). */
@media (max-width: 767px) {
  #dudas { padding-bottom: 0; }
  .registro { padding-top: 76px; }
}