/*
 * Guías públicas (/guias y /guias/<tema>, plantilla guia.html). Colores y pie: secciones.css
 * (.cs-zona). Una columna para leer sobre el cielo; lo único que destaca son las peticiones,
 * dibujadas como mensajes que le escribirías a la IA.
 */
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap;
  src: url("/estudio/static/fuentes/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600 700; font-display: swap;
  src: url("/estudio/static/fuentes/bricolage-grotesque-latin.woff2") format("woff2"); }

html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--cielo-bajo, #eef3fb); }
@media (prefers-color-scheme: dark) { body { background: #16213d; } }

.guia { flex: 1; background: linear-gradient(180deg, var(--cielo-alto) 0, var(--cielo-bajo) 420px); }
.g-cabecera { max-width: 1040px; margin: 0 auto; padding: 20px; }
.g-marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinta); text-decoration: none; }
.g-marca svg { width: 38px; fill: var(--azul); }
.g-marca span { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; }

.g-texto { max-width: 700px; margin: 0 auto; padding: 8px 20px 72px; font-size: 17px; line-height: 1.6; }
@media (min-width: 720px) { .g-texto { padding-top: 28px; } }
.g-texto p { margin: 0 0 14px; }
.g-texto a:not(.cs-boton) { color: var(--azul-hondo); font-weight: 600; }
.g-texto a:not(.cs-boton) { text-underline-offset: 3px; }
.g-texto .cs-boton { color: #fff; }
@media (prefers-color-scheme: dark) { .g-texto .cs-boton { color: #0c1428; } }

.g-migas { margin: 0 0 10px; font-size: 15px; }
.g-migas a { display: inline-flex; align-items: center; min-height: 44px; }
.g-texto h1 {
  font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif; font-weight: 700;
  font-size: clamp(32px, 8.4vw, 50px); line-height: 1.04; letter-spacing: -.03em;
  margin: 0 0 16px; text-wrap: balance;
}
.g-entradilla { font-size: 19px; line-height: 1.5; color: var(--gris); max-width: 60ch; }
.g-texto h2 {
  font-size: clamp(24px, 5.6vw, 30px); line-height: 1.15; letter-spacing: -.02em;
  margin: 52px 0 14px; scroll-margin-top: 16px;
}

/* Botón principal */
.g-accion { margin: 22px 0 8px; }
.g-accion .g-boton { display: inline-block; width: auto; min-width: 240px; padding: 15px 30px; }
@media (max-width: 480px) { .g-accion .g-boton { display: block; width: 100%; } }
.g-nota { font-size: 15px; color: var(--gris); margin: 10px 0 0 !important; max-width: 60ch; }

/* Pasos: una secuencia de verdad, por eso numerados */
.g-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.g-pasos li {
  counter-increment: paso; position: relative; padding: 0 0 0 52px; margin: 0 0 18px; min-height: 36px;
}
.g-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 17px/1 "Bricolage Grotesque", sans-serif; color: var(--azul-hondo); background: var(--azul-suave);
}
.g-pasos li::after {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: -16px; width: 2px; background: var(--borde);
}
.g-pasos li:last-child::after { display: none; }

/* Peticiones para copiar: como mensajes escritos a la IA */
.g-peticiones { display: grid; gap: 22px; margin-top: 18px; }
.g-peticion { margin: 0; }
.g-peticion figcaption { font-size: 15px; font-weight: 600; color: var(--gris); margin: 0 0 6px 4px; }
.g-peticion blockquote {
  margin: 0; padding: 16px 18px; background: var(--tarjeta); color: var(--tinta);
  border: 1.5px solid var(--borde); border-radius: 22px 22px 22px 6px;
  box-shadow: 0 14px 28px -24px rgba(26, 43, 76, .55);
}
.g-peticion blockquote p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.g-usar { display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px; font-size: 16px; }

/* Listas con cifra (modelos, modos del Estudio, packs) */
.g-tabla { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1.5px solid var(--borde); }
.g-tabla li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline;
  padding: 12px 2px; border-bottom: 1.5px solid var(--borde);
}
.g-tabla li > strong { grid-column: 1; }
.g-tabla li > span:not(.g-cifra) { grid-column: 1; color: var(--gris); font-size: 15px; }
.g-tabla .g-cifra { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) { .g-tabla .g-cifra { white-space: normal; max-width: 9.5em; } }

.g-avisos { margin: 0; padding-left: 22px; }
.g-avisos li { margin: 0 0 10px; }

/* Preguntas frecuentes */
.g-pregunta { border-bottom: 1.5px solid var(--borde); }
.g-pregunta:first-of-type { border-top: 1.5px solid var(--borde); }
.g-pregunta summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 14px 40px 14px 2px; min-height: 44px; font-weight: 600;
}
.g-pregunta summary::-webkit-details-marker { display: none; }
.g-pregunta summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg);
  transition: transform .15s;
}
.g-pregunta[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.g-pregunta p { margin: 0 2px 16px; color: var(--tinta); }

/* Cierre con la mascota */
.g-final {
  margin: 56px 0 0; padding: 26px 22px 24px; border-radius: 26px;
  background: var(--azul-suave); text-align: left;
}
.g-mascota { width: 72px; display: block; margin: 0 0 6px; }
.g-final-titulo {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 6px !important;
}
.g-final .g-accion { margin-bottom: 0; }

/* Otras guías e índice */
.g-lista { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--borde); }
.g-lista li { border-bottom: 1.5px solid var(--borde); padding: 12px 2px; }
.g-lista a { display: inline-block; font-size: 18px; padding: 4px 0; }
.g-lista span { display: block; color: var(--gris); font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .g-pregunta summary::after { transition: none; } }