/* ═══════════════════════════════════════════════════════════════════════
   NotarIA — componentes propios de tramites.html.

   Dos piezas: el panel de cada trámite (preguntas plegables más la
   tarjeta de acciones) y la rejilla de lo que se carga en la sesión.
   El acordeón y las pestañas ya vienen resueltos en notaria.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Panel de trámites ═════════════════════════════════════════════ */
.tr-nota{max-width:78ch;margin-bottom:var(--e5)}
#panelTr{margin-top:var(--e5)}
/* Reserva de altura: sin ella, cambiar de trámite salta la página. */
@media (min-width:1181px){#panelTr{min-height:340px}}
#panelTr .pane{align-items:start}
/* Filete superior: el acordeón se lee como lista cerrada, no como texto
   suelto al que le falta el principio. */
#panelTr details:first-child{border-top:1px solid var(--linea)}

/* ═══ Tarjeta de acciones ═══════════════════════════════════════════ */
.acc-t{font-size:var(--t-1);letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
.acc-lista{list-style:none;margin-top:var(--e4);display:flex;flex-direction:column;gap:11px}
.acc-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  font-size:var(--t-3);line-height:1.5;color:var(--tx-2)}
.acc-lista svg{margin-top:3px}
.acc-b{margin-top:var(--e5)}

/* ═══ Lo que se carga en la sesión ══════════════════════════════════
   Cuatro entradas numeradas. El número va en serif y a tamaño de
   titular: es lo que ordena la lectura, no una viñeta. */
.cargas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--medianil);
  margin-top:var(--e6)}
.carga-n{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-7);
  line-height:1;letter-spacing:-.02em;color:var(--tea-os)}
.cargas .tit{margin-top:10px;font-size:var(--t-5)}
.cargas p{margin-top:6px}

/* ═══ Puntos de corte ═══════════════════════════════════════════════ */
@media (max-width:1180px){
  .cargas{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Con la dupla en una columna, primero las preguntas y después lo que
     NotarIA hace con ellas: ese es el orden de la conversación. */
  #panelTr .pane{display:flex;flex-direction:column;align-items:stretch;gap:var(--e5)}
}
@media (max-width:820px){
  /* Carril táctil: una tarjeta completa por vista. Cuatro tarjetas
     apiladas alargaban la sección más que toda la portada. */
  .cargas{display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-block:2px 6px;scrollbar-width:none}
  .cargas::-webkit-scrollbar{display:none}
  .cargas>*{flex:0 0 88%;scroll-snap-align:start}
}
@media (max-width:430px){
  .cargas>*{flex:0 0 90%}
}