/* ── Más información: tres entradas que abren un panel ────────────────────
   Son contenidos de consulta puntual, no de lectura lineal, así que se
   abren sobre la página en lugar de empujarla hacia abajo: quien venía
   leyendo no pierde su lugar. Son <a href="#id">, no botones, para que
   cada documento tenga URL propia, se pueda enlazar desde fuera y
   funcione con clic derecho. Con <dialog> el foco queda atrapado dentro
   del panel y Esc lo cierra sin escribir una línea de JavaScript.        */
.info-grid{display:grid;gap:14px;margin-top:34px}
@media (min-width:760px){.info-grid{grid-template-columns:repeat(3,1fr)}}
.infocard{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  border:1px solid rgba(15,110,92,.18);border-radius:16px;
  background:linear-gradient(168deg,var(--paper-2),var(--paper) 76%);
  padding:clamp(20px,2.2vw,26px);color:var(--ink);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.infocard:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(10,74,63,.7)}
.infocard h3{font-size:18px}
.infocard p{color:var(--ink-dim);font-size:14.8px;line-height:1.58;flex:1}
.infocard .go{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
}
.infocard .go::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}

/* ── Panel de lectura ──────────────────────────────────────────────────── */
.sheet{
  border:0;padding:0;color:var(--ink);background:var(--paper);
  width:min(760px,calc(100% - 2rem));max-height:min(86vh,900px);
  border-radius:20px;box-shadow:0 40px 90px -34px rgba(4,35,31,.55);
}
.sheet[open]{display:flex;flex-direction:column}
.sheet:target{display:flex;flex-direction:column}   /* respaldo sin JavaScript */
.sheet::backdrop{background:rgba(4,35,31,.62)}
.sheet-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(20px,3.6vw,38px);border-bottom:1px solid var(--hair);
}
.sheet-head h2{font-size:clamp(19px,2.2vw,25px)}
.sheet-close{
  flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(15,110,92,.22);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;transition:background .18s ease,border-color .18s ease;
}
.sheet-close:hover{background:rgba(15,110,92,.08);border-color:var(--teal)}
.sheet-close svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none}
.sheet-body{overflow:auto;padding:clamp(22px,3vw,32px) clamp(20px,3.6vw,38px) clamp(30px,4vw,44px);overscroll-behavior:contain}
.sheet-body > * + *{margin-top:16px}
.sheet-body h3{font-size:clamp(16px,1.5vw,18px);margin-top:30px}
.sheet-body h3:first-child{margin-top:0}
/* El justificado y la partición de palabras vienen de la regla general en
   01-base.css. Aquí sólo queda lo propio del panel: el bloque cierra a
   ambos lados a todo el ancho, para que sus bordes coincidan con los de
   los títulos, con algo más de interlínea por la línea más larga.       */
.sheet-body p,.sheet-body li{color:var(--ink-dim);max-width:none;font-size:15.5px;line-height:1.72}
/* Listas del panel. La sangría del <ul> alinea el texto de los renglones
   con el de los párrafos de alrededor; sin ella la lista se leía como un
   bloque desplazado.                                                    */
.sheet-body ul{margin:0;padding-left:22px;display:grid;gap:8px}

/* Listas cuyos renglones ya traen su propia letra o número escrito —"a)",
   "1."—. Ahí la viñeta del navegador sobra: saldrían dos marcas, "• a)".
   Se apaga la viñeta y la enumeración escrita pasa a hacer ese papel.
   El texto se sangra con text-indent negativo, de modo que la letra
   sobresale y las líneas siguientes caen alineadas bajo el texto y no
   bajo la letra. Sin esto, el renglón que envuelve arranca pegado al
   margen y la columna se ve dentada.                                    */
.sheet-body ul.enum{padding-left:22px;gap:10px}   /* mismo margen que la lista con viñeta */
.sheet-body ul.enum > li{
  list-style:none;
  padding-left:1.9em;text-indent:-1.9em;
}
/* Gráfico de marca dentro de un panel. El archivo es de 1254×1254, así
   que a 620px se muestra reducido —nunca estirado— y sale nítido. Con
   esquinas suaves y una sombra corta, porque sin marco un bloque casi
   negro cae sobre el papel blanco como un recorte pegado encima. El aire
   de arriba lo separa del <h3> que lo titula: los 16px que hereda de un
   párrafo se le quedan cortos a una pieza de este tamaño.              */
.sheet-body figure{margin:0}
.sheet-body .grafico{margin-top:26px}

/* Lupa. En reposo los textos de cada valor caen sobre los 14px: se leen,
   pero justos. Al acercar 2× llegan a 28px y el puntero recorre la lámina
   moviendo el transform-origin. El factor es 2 y no más porque 620×2 son
   1240px, justo por debajo de los 1254 del archivo: así la ampliación no
   pasa del tamaño real y no aparece borrosa en ningún punto. El marco
   recorta con overflow, de modo que la imagen crece hacia dentro y no
   empuja el texto del panel.                                            */
.zoomable{
  display:block;margin-inline:auto;padding:0;border:0;background:none;
  width:min(620px,100%);aspect-ratio:1;overflow:hidden;
  border-radius:16px;cursor:zoom-in;touch-action:manipulation;
  box-shadow:0 16px 38px -26px rgba(4,35,31,.75);
}
.zoomable img{
  width:100%;height:100%;display:block;
  transform-origin:50% 50%;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.zoomable.is-zoom{cursor:zoom-out;touch-action:none}   /* arrastrar recorre, no desplaza */
.zoomable.is-zoom img{transform:scale(2)}
@media (prefers-reduced-motion:reduce){.zoomable img{transition:none}}
.grafico figcaption{
  margin-top:10px;text-align:center;
  font:400 12px/1.5 var(--f-mono);letter-spacing:.05em;color:var(--ink-dim);
}
.sheet-body li::marker{color:var(--teal)}
.sheet-body strong{color:var(--ink);font-weight:600}
.sheet-body .campo{
  font-family:var(--f-mono);font-size:.92em;color:var(--teal);
  background:rgba(15,110,92,.08);border-radius:4px;padding:1px 5px;
}
/* Aviso de borrador. Bórralo cuando el texto esté validado legalmente. */
.legal-note{
  border-left:3px solid var(--teal);background:var(--paper-2);
  border-radius:0 10px 10px 0;padding:14px 18px;
}
.legal-note p{font-size:14.5px;max-width:none;margin:0}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheetin .26s cubic-bezier(.2,.7,.3,1)}
  @keyframes sheetin{from{opacity:0;transform:translateY(14px) scale(.986)}}
}

/* Los mismos tres, en el pie: es donde la gente los busca por costumbre */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--ink-dim);text-decoration:none;font:400 13px/1.6 var(--f-mono)}
.foot-links a:hover{color:var(--teal)}

/* Entrada suave desde un estado visible: la página se lee sin desplazar */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  @keyframes rise{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
}