/* =========================================================
   GUÍAS, CASOS E INDUSTRIAS · COBYBSA
   Páginas generadas por scripts/generar.js. Requiere style.css.
   ========================================================= */

.gx { background: #020617; color: #e2e8f0; }
.gx h1, .gx h2, .gx h3 { color: #fff; }
.gx .section-kicker { margin: 0 0 0.8rem; }

.gx-ancho { width: min(46rem, calc(100% - 2rem)); margin: 0 auto; }
.gx-ancho--amplio { width: min(1120px, calc(100% - 2rem)); }

/* ---------- Portada ---------- */
.gx-portada { position: relative; padding: 4.5rem 0 3.5rem; overflow: hidden; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.gx-portada--foto { min-height: min(78vh, 680px); display: flex; align-items: flex-end; }
.gx-portada-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.gx-portada--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.2), #020617 92%); }
.gx-portada > .gx-ancho { position: relative; z-index: 1; }
.gx-portada h1 { margin: 0 0 1.1rem; max-width: 22ch; font: 700 clamp(2.2rem, 1.3rem + 3.2vw, 4rem)/1.02 var(--font-titulo); text-transform: uppercase; }
.gx-portada--articulo h1 { max-width: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); text-transform: none; }
.gx-lead { margin: 0 0 1.8rem; max-width: 40rem; color: #cbd5e1; font-size: 1.15rem; line-height: 1.6; }
.gx-migas { margin-bottom: 1.6rem; font-size: 0.85rem; color: #94a3b8; }
.gx-migas a { color: #94a3b8; text-decoration: none; }
.gx-migas a:hover { color: var(--accent); }
.gx-autor { margin: 0; color: #94a3b8; font-size: 0.95rem; }
.gx-autor b { color: #e2e8f0; }
.gx-botones { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- Cifras ---------- */
.gx-cifras { border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.gx-cifras .gx-ancho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gx-cifras div div { padding: 1.6rem 1.2rem; border-left: 1px solid rgba(148, 163, 184, 0.14); }
.gx-cifras div div:first-child { border-left: 0; padding-left: 0; }
.gx-cifras b { display: block; font: 700 1.8rem/1 var(--font-titulo); color: #fff; }
.gx-cifras span { display: block; margin-top: 0.45rem; font: 600 0.74rem/1.3 var(--font-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: #94a3b8; }

/* ---------- Texto ---------- */
.gx-texto { padding: 3.5rem 0 2rem; }
.gx-texto h2 { margin: 2.4rem 0 0.9rem; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font-titulo); }
.gx-texto h2:first-child { margin-top: 0; }
.gx-texto h3 { margin: 1.8rem 0 0.6rem; font: 700 1.25rem/1.2 var(--font-titulo); }
.gx-texto p, .gx-texto li { font-size: 1.08rem; line-height: 1.75; color: #cbd5e1; }
.gx-texto ul, .gx-texto ol { padding-left: 1.2rem; }
.gx-texto li { margin: 0.35rem 0; }
.gx-texto li::marker { color: var(--accent); }
.gx-texto a { color: var(--accent); }
.gx-texto strong { color: #fff; }
.gx-texto img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; }
.gx-texto blockquote { margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--accent); }
.gx-texto blockquote p { color: #fff; font-size: 1.2rem; }
.gx-foto { margin: 0 auto; width: min(1120px, calc(100% - 2rem)); }
.gx-foto img { display: block; width: 100%; height: auto; }

/* ---------- Proyectos relacionados ---------- */
.gx-proyectos { padding: 3rem 0; }
.gx-proyectos h2, .gx-faq h2, .gx-cierre h2 { margin: 0 0 1.6rem; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.1 var(--font-titulo); text-transform: uppercase; }
.gx-proyectos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.gx-proyecto { display: block; background: #0b1424; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.gx-proyecto:hover { border-color: var(--accent); }
.gx-proyecto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gx-proyecto h3 { margin: 1rem 1.1rem 0.4rem; font: 700 1.15rem/1.2 var(--font-titulo); }
.gx-proyecto p { margin: 0 1.1rem 1.2rem; font-size: 0.95rem; line-height: 1.55; color: #94a3b8; }

/* ---------- Preguntas frecuentes ---------- */
.gx-faq { padding: 3rem 0; }
.gx-faq details { border-top: 1px solid rgba(148, 163, 184, 0.18); }
.gx-faq details:last-child { border-bottom: 1px solid rgba(148, 163, 184, 0.18); }
.gx-faq summary { position: relative; padding: 1.15rem 2.2rem 1.15rem 0; cursor: pointer; list-style: none; font: 600 1.15rem/1.35 var(--font-titulo); color: #fff; }
.gx-faq summary::-webkit-details-marker { display: none; }
.gx-faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.95rem; font-size: 1.5rem; color: var(--accent); }
.gx-faq details[open] summary::after { content: "–"; }
.gx-faq details div { padding: 0 0 1.1rem; }
.gx-faq details p { margin: 0 0 0.6rem; color: #cbd5e1; line-height: 1.7; }

/* ---------- Lista de guías ---------- */
.gx-lista { padding: 3rem 0; }
.gx-lista .gx-ancho { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.gx-tarjeta { display: block; padding-bottom: 1.3rem; background: #0b1424; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.gx-tarjeta:hover { border-color: var(--accent); }
.gx-tarjeta img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gx-tarjeta-tipo { display: block; margin: 1.1rem 1.2rem 0.5rem; font: 600 0.74rem/1 var(--font-titulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.gx-tarjeta h2 { margin: 0 1.2rem 0.5rem; font: 700 1.3rem/1.2 var(--font-titulo); }
.gx-tarjeta p { margin: 0 1.2rem; color: #94a3b8; line-height: 1.55; }

/* ---------- Cierre ---------- */
.gx-cierre { padding: 4rem 0 5rem; text-align: center; border-top: 1px solid rgba(148, 163, 184, 0.14); }
.gx-cierre p { margin: -0.6rem auto 1.8rem; max-width: 34rem; color: #cbd5e1; }
.gx-cierre .gx-botones { justify-content: center; }

@media (max-width: 760px) {
  .gx-portada { padding: 3rem 0 2.5rem; }
  .gx-cifras .gx-ancho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-cifras div div { padding: 1.2rem 0.9rem; }
  .gx-cifras div div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .gx-cifras div div:nth-child(n+3) { border-top: 1px solid rgba(148, 163, 184, 0.14); }
}