/* ============================================================
   Guías de Proclub · bloques del molde nuevo (3-nov-2026)
   Mendo: «más imágenes y que tengan sentido, ejemplos de lo que ya tenemos, enlaces que lleven a contratarnos y que
   las guías se retroalimenten». Los escribe _herramientas/generar_guias.py:
   :::captura (vista real de un proyecto en su marco) · :::pasos (esquema) · :::casos (tarjetas de proyecto) · «Sigue leyendo».
   ============================================================ */

/* Vista real de un proyecto, junto al párrafo que explica */
.captura-g { margin: 2.2em 0; }
.captura-g figcaption { font-size: 15.5px; line-height: 1.6; color: var(--tinta-suave); }
.texto .captura-g .captura-enlace { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--tinta-oro); text-decoration: none; }
.texto .captura-g .captura-enlace:hover { text-decoration: underline; }
.captura-marco { display: block; }
.captura-g img { display: block; width: 100%; height: auto; }
/* Ordenador: ventana sencilla, sin adornos */
.captura-g.ordenador .captura-marco { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(2,11,34,.18);
  box-shadow: 0 34px 64px -42px rgba(20,15,5,.75); }
.captura-g.ordenador .captura-marco::before { content: ""; display: block; height: 20px; background: linear-gradient(#F1EADC, #E7DECD); border-bottom: 1px solid rgba(2,11,34,.1); }
.captura-g.ordenador figcaption { margin-top: 14px; }
/* Móvil: teléfono a la izquierda y el pie al lado */
.captura-g.movil { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; align-items: center; }
.captura-g.movil .captura-marco { padding: 9px; border-radius: 36px; background: #0B1530;
  box-shadow: 0 34px 60px -36px rgba(20,15,5,.85), inset 0 0 0 1px rgba(255,255,255,.08); }
.captura-g.movil img { border-radius: 27px; }
.captura-g.movil figcaption { font-size: 16.5px; }
@media (max-width: 640px) {
  .captura-g.movil { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .captura-g.movil .captura-marco { width: min(236px, 70vw); }
  .captura-g.movil figcaption { justify-self: stretch; font-size: 15.5px; }
}

/* Esquema de pasos */
.pasos-g { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin: 1.6em 0 2em; }
.pasos-g li { position: relative; padding: 18px 16px 18px; border-radius: 16px; background: var(--hoja); border: 1px solid rgba(2,11,34,.12); }
.pasos-g li + li::before { content: ""; position: absolute; left: -14px; top: 34px; width: 14px; height: 2px; background: var(--gold-deep); }
.pasos-g .pasos-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%;
  font: 600 15px var(--sans); color: var(--marino); background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); }
.pasos-g b { display: block; margin-bottom: 4px; font: 400 21px/1.25 var(--serif); }
.pasos-g .d { display: block; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
@media (max-width: 720px) {
  .pasos-g { grid-template-columns: 1fr; }
  .pasos-g li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 14px; }
  .pasos-g .pasos-n { grid-row: span 2; margin-bottom: 0; }
  .pasos-g li + li::before { left: 32px; top: -14px; width: 2px; height: 14px; }
}

/* Tarjetas de los proyectos que se pueden abrir */
.casos-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 1.4em 0 2em; }
.texto a.caso-g { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: var(--hoja); border: 1px solid rgba(2,11,34,.12);
  color: var(--tinta); text-decoration: none; transition: border-color .3s, transform .3s, box-shadow .3s; }
.texto a.caso-g:hover { border-color: rgba(168,134,42,.7); transform: translateY(-2px); box-shadow: 0 26px 50px -40px rgba(20,15,5,.7); }
.caso-g img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.caso-g div { padding: 16px 18px 18px; }
.caso-g b { display: block; font: 400 25px/1.2 var(--serif); }
.caso-g p { margin: 6px 0 10px; font-size: 15px; line-height: 1.55; color: var(--tinta-suave); }
.caso-g span { font-size: 15px; font-weight: 600; color: var(--tinta-oro); }

/* Sigue leyendo */
.sigue-g { margin: 2.8em 0 1.8em; padding-top: 1.8em; border-top: 1px solid rgba(2,11,34,.14); }
.texto .sigue-g h2.sigue-tit, .sigue-g h2.sigue-tit { margin: 0 0 .7em; font: 400 clamp(28px, 2.6vw, 36px)/1.15 var(--serif); }
.sigue-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sigue-lista a { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 16px; background: var(--hoja); border: 1px solid rgba(2,11,34,.12);
  color: var(--tinta); text-decoration: none; transition: border-color .3s, transform .3s; }
.texto .sigue-lista a { color: var(--tinta); text-decoration: none; }
.sigue-lista a:hover { border-color: rgba(168,134,42,.7); transform: translateY(-2px); }
.sigue-lista img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.sigue-lista b { padding: 12px 14px 16px; font: 400 19px/1.3 var(--serif); }

/* Cifras grandes: la cifra y su unidad en la misma línea (3-nov-2026, «el € está en salto de línea y es horrible»).
   Un poco más pequeñas para que «800-2.000 €» quepa entera en cada recuadro. */
.cifra b { white-space: nowrap; font-size: clamp(26px, 2.3vw, 34px); }