/* ==========================================================================
   Cresyva Formulación — página del programa (formulacion/index.html)
   Usa el sistema de diseño común (/estilo-comun.css): colores, tipografía, botones, cabecera, pie,
   preguntas, formulario e iconos. Aquí va lo propio de esta página: la portada en azul con la pantalla
   del programa, el recorrido por capítulos con sus capturas, los módulos, las especies y el cierre.
   ========================================================================== */

:root {
  --solape: clamp(110px, 17vw, 250px);   /* lo que la captura de la portada entra en la franja gris */
  --azul-tenue: #9fb3cc;                 /* texto secundario sobre azul oscuro: 6,9:1 */
  --linea-oscura: rgba(255, 255, 255, .14);
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: calc(var(--solape) + clamp(40px, 5vw, 64px));
  overflow: hidden;
  color: #fff;
  background: var(--azul-oscuro);
}
/* Cuadrícula muy tenue, como la de una hoja de cálculo, que se pierde hacia abajo. */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(#000, transparent 80%);
  mask-image: linear-gradient(#000, transparent 80%);
  pointer-events: none;
}
.portada .container { position: relative; }
.portada-texto { max-width: 900px; margin-inline: auto; text-align: center; }
.portada .eyebrow { justify-content: center; color: var(--azul-tenue); }
.portada h1 { color: #fff; }
.portada .lead { margin-inline: auto; max-width: 66ch; color: #d5deea; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.portada-datos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px 0 0; padding: 0; font-size: .92rem; color: var(--azul-tenue); }
.portada-datos li { display: inline-flex; align-items: center; gap: 8px; }
.portada-datos svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--naranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* La pantalla del programa, que baja hasta la franja gris de debajo. */
/* flow-root: que el margen negativo de la captura no se pase a la franja y la tape el azul. */
.escaparate { position: relative; display: flow-root; padding-bottom: clamp(48px, 6vw, 72px); background: var(--fondo-gris); border-bottom: 1px solid var(--borde); }
.escaparate-captura { position: relative; margin: calc(-1 * var(--solape)) auto 0; max-width: 1160px; }
.ventana { margin: 0; overflow: hidden; background: #fff; border: 1px solid rgba(21, 42, 69, .35); border-radius: 14px; box-shadow: 0 2px 4px rgba(15, 32, 54, .08), 0 40px 90px -36px rgba(15, 32, 54, .55); }
.ventana img { width: 100%; }

/* Las tres marcas numeradas sobre la captura y su explicación debajo. */
.marca {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  color: #1b1006;
  background: var(--naranja);
  box-shadow: 0 0 0 5px rgba(255, 107, 53, .28), 0 4px 10px rgba(15, 32, 54, .3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.leyenda { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; max-width: 1160px; margin: 40px auto 0; padding: 0; counter-reset: marca; }
.leyenda li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: .95rem; color: var(--texto-2); counter-increment: marca; }
.leyenda li::before { content: counter(marca); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .9rem; font-weight: 700; color: #1b1006; background: var(--naranja); }
.leyenda strong { display: block; color: var(--texto); font-weight: 600; }

/* Garantías, en una fila bajo la explicación. */
.garantias-lista { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1160px; margin: clamp(36px, 5vw, 52px) auto 0; padding: 0; }
.garantias-lista li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: .93rem; font-weight: 500; line-height: 1.4; color: var(--texto); background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }

/* ---------- Capturas que se amplían ---------- */

.ampliar { position: relative; display: block; cursor: zoom-in; }
.ampliar::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(21, 42, 69, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat;
  opacity: 0;
  transition: opacity .15s var(--suave);
  pointer-events: none;
}
.ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; }
@media (hover: none) { .ampliar::after { opacity: .85; } }

.visor { position: fixed; inset: 0; z-index: 300; display: flex; background: rgba(15, 23, 36, .88); animation: visor-entra .15s var(--suave); }
.visor[hidden] { display: none; }
.visor-marco { flex: 1; display: flex; align-items: safe center; justify-content: safe center; overflow: auto; padding: 64px clamp(10px, 3vw, 40px) clamp(16px, 3vw, 40px); cursor: zoom-out; }
.visor-marco img { width: auto; max-width: 100%; border-radius: 8px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); cursor: default; }
.visor-cerrar { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #fff; color: var(--azul-oscuro); cursor: pointer; }
.visor-cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.visor-abierto, .visor-abierto body { overflow: hidden; }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

/* Una captura con su pie. */
.figura { display: flex; flex-direction: column; margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: var(--sombra); }
.figura img { width: 100%; }
.figura figcaption { padding: 12px 16px 14px; font-size: .86rem; line-height: 1.5; color: var(--texto-2); border-top: 1px solid var(--borde); }
.figura figcaption strong { color: var(--texto); font-weight: 600; }
/* Las que son un trozo de pantalla sin fondo propio (una barra, un diálogo): con aire alrededor. */
.figura--aire .ampliar { padding: clamp(10px, 2vw, 20px); background: #eef2f7; }
.figura--aire img { border-radius: 8px; box-shadow: 0 1px 2px rgba(23, 34, 53, .08), 0 10px 28px -14px rgba(23, 34, 53, .35); }

/* ---------- Qué hace: el recorrido en seis pasos ---------- */

.recorrido { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; counter-reset: paso; }
.recorrido li { counter-increment: paso; }
.recorrido a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 24px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .2s var(--suave), box-shadow .2s var(--suave), transform .2s var(--suave);
}
.recorrido a:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); transform: translateY(-2px); }
.recorrido a::before { content: "0" counter(paso); position: absolute; top: 22px; right: 24px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--azul-tenue); }
.recorrido .card-icon { margin-bottom: 18px; }
.recorrido h3 { font-size: 1.1rem; }
.recorrido p { margin-top: 8px; font-size: .95rem; color: var(--texto-2); }
.recorrido .ir { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: .9rem; font-weight: 600; color: var(--azul); }
.recorrido .ir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--suave); }
.recorrido a:hover .ir svg { transform: translateX(3px); }

/* ---------- Capítulos ---------- */

.capitulo-cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 26px; align-items: end; max-width: 940px; margin-bottom: clamp(36px, 4.5vw, 52px); }
.capitulo-num { grid-row: span 2; font-size: clamp(3.2rem, 7vw, 5.2rem); font-weight: 700; line-height: .82; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--borde-fuerte); }
.capitulo-cabecera .eyebrow { margin-bottom: 6px; }
.capitulo-cabecera h2 { grid-column: 2; }
.capitulo-cabecera .section-sub { grid-column: 1 / -1; margin-top: 18px; max-width: 72ch; }

/* Texto y captura, uno al lado del otro (o al revés). */
.fila { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.fila--invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.fila--invertida > .fila-texto { order: 2; }
.fila-texto h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -.025em; }
.fila-texto > p { margin-top: 12px; color: var(--texto-2); font-size: 1.01rem; }

/* Varias capturas en una cuadrícula de 12 columnas. */
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; margin-top: clamp(28px, 3.5vw, 44px); }
.m-4 { grid-column: span 4; }
.m-5 { grid-column: span 5; }
.m-6 { grid-column: span 6; }
.m-7 { grid-column: span 7; }
.m-8 { grid-column: span 8; }
.m-12 { grid-column: span 12; }
.m-alto { grid-row: span 2; }
.pila { display: grid; gap: clamp(16px, 2vw, 24px); }

/* Una tarjeta de explicación entre las capturas. */
.explica { padding: clamp(22px, 2.6vw, 30px); background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.section-alt .explica { background: #fff; }
.explica h3 { font-size: 1.08rem; }
.explica > p { margin-top: 8px; font-size: .95rem; color: var(--texto-2); }
.pasos-cortos { list-style: none; display: grid; gap: 14px; margin: 18px 0 0; padding: 0; counter-reset: corto; }
.pasos-cortos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: .95rem; color: var(--texto); counter-increment: corto; }
.pasos-cortos li::before { content: counter(corto); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .82rem; font-weight: 700; color: var(--azul); background: var(--azul-suave); }
.pasos-cortos span { color: var(--texto-2); }

/* Lo que comprueba la etiqueta: cuatro tarjetas pequeñas. */
.comprueba { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; }
.comprueba li { padding: 20px; background: #fff; border: 1px solid var(--borde); border-top: 3px solid var(--azul); border-radius: 10px; }
.comprueba h3 { font-size: 1rem; }
.comprueba p { margin-top: 6px; font-size: .9rem; color: var(--texto-2); }
.comprueba--3 { grid-template-columns: repeat(3, 1fr); }
.norma { margin-top: 18px; font-size: .86rem; color: var(--texto-3); }

/* Roles: etiquetas pequeñas. */
.roles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.roles li { padding: 6px 12px; font-size: .86rem; font-weight: 600; color: var(--azul); background: var(--azul-suave); border-radius: 999px; }

/* ---------- Módulos ---------- */

.modulos { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 26px); margin: 0; padding: 0; }
.modulo { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.modulo .ampliar { background: var(--fondo-gris); border-bottom: 1px solid var(--borde); }
.modulo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.modulo-texto { padding: 22px 24px 24px; }
.modulo-texto h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.modulo-texto h3 .card-icon { width: 38px; height: 38px; }
.modulo-texto p { margin-top: 10px; font-size: .95rem; color: var(--texto-2); }
.modulo--texto { justify-content: center; background: var(--azul-suave); border-color: transparent; }
.modulo--texto .card-icon { background: #fff; }
.modulos-nota { margin-top: 22px; text-align: center; font-size: .95rem; color: var(--texto-2); }

/* ---------- Especies ---------- */

.especies { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; }
.especies li { padding: 22px 22px 20px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.especies h3 { font-size: 1.05rem; }
.especies p { margin-top: 6px; font-size: .9rem; color: var(--texto-2); }
.especies .especies-vuestras { background: var(--azul-suave); border-color: transparent; }
.salud { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; max-width: 900px; margin: clamp(28px, 3.5vw, 40px) auto 0; padding: 22px 24px; background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--naranja); border-radius: 10px; }
.salud p { color: var(--texto-2); font-size: .97rem; }
.salud strong { color: var(--texto); }

/* ---------- Datos y seguridad (franja azul) ---------- */

.seguridad { padding-block: clamp(64px, 8vw, 100px); color: #fff; background: var(--azul-oscuro); }
.seguridad-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.seguridad .eyebrow { color: var(--azul-tenue); }
.seguridad h2 { color: #fff; }
.seguridad .section-sub { color: #d5deea; }
.seguridad-lista { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; }
.seguridad-lista li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 18px; font-size: .95rem; line-height: 1.45; color: #d5deea; border: 1px solid var(--linea-oscura); border-radius: 10px; }
.seguridad-lista strong { display: block; margin-bottom: 2px; color: #fff; font-weight: 600; }
.seguridad-lista svg { width: 22px; height: 22px; fill: none; stroke: var(--naranja); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Para quién ---------- */

.publicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.publicos li { display: flex; flex-direction: column; gap: 16px; padding: 24px 22px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--azul-oscuro); }

/* ---------- Cómo es el cambio ---------- */

.pasos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pasos::before { content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 2px; background: var(--borde-fuerte); }
.pasos li { position: relative; text-align: center; }
.paso-num { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--azul); box-shadow: 0 0 0 8px var(--fondo-gris); }
.pasos h3 { margin-bottom: 6px; }
.pasos p { max-width: 30ch; margin-inline: auto; color: var(--texto-2); font-size: .96rem; }

/* ---------- Quiénes somos ---------- */

.quienes { max-width: 880px; text-align: center; }
.quienes .eyebrow { justify-content: center; }
.quienes-texto { font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 500; line-height: 1.45; letter-spacing: -.015em; color: var(--azul-oscuro); }

/* ---------- Preguntas ---------- */

.preguntas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.preguntas .section-sub a { color: var(--azul); font-weight: 500; }

/* ---------- Cierre ---------- */

.cierre { padding-block: clamp(64px, 8vw, 96px); background: var(--azul); color: #fff; }
/* Texto a la izquierda y formulario de demostración a la derecha (uno bajo otro en móvil). */
.cierre-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cierre h2 { color: #fff; }
.cierre-texto > p { margin-top: 12px; color: #dfe6f0; font-size: 1.08rem; }
.cierre-pasos { list-style: none; display: grid; gap: 10px; margin: 24px 0 0; padding: 0; }
.cierre-pasos li { display: flex; gap: 10px; align-items: flex-start; color: #dfe6f0; }
.cierre-pasos svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--naranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cierre-contacto { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 26px !important; }
.cierre-contacto a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.cierre-contacto a:hover { border-bottom-color: var(--naranja); }
.cierre .contact-form { color: var(--texto); }

/* Vuelta a la web principal, separada del menú de la página. */
.nav > a.nav-volver { padding-right: 24px; border-right: 1px solid var(--borde-fuerte); color: var(--azul); font-weight: 600; }
.nav > a { white-space: nowrap; }
/* En pantallas medianas no cabe todo el menú en una línea: Módulos y Especies se quedan en el menú del móvil. */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav > a[href="#modulos"], .nav > a[href="#especies"] { display: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .garantias-lista, .leyenda, .recorrido { grid-template-columns: repeat(2, 1fr); }
  .publicos, .especies { grid-template-columns: repeat(2, 1fr); }
  .comprueba { grid-template-columns: repeat(2, 1fr); }
  .comprueba--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .nav > a.nav-volver { padding-right: 2px; border-right: 0; }
  .fila, .fila--invertida { grid-template-columns: 1fr; }
  .fila--invertida > .fila-texto { order: 0; }
  .mosaico > * { grid-column: span 12; grid-row: auto; }
  .mosaico > .m-movil-6 { grid-column: span 6; }
  .seguridad-dentro, .preguntas, .cierre-dentro { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .pasos::before { display: none; }
  .cierre-texto { text-align: center; }
  /* La lista, centrada como bloque pero con el texto a la izquierda, junto a su marca */
  .cierre-pasos { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .cierre-contacto { justify-content: center; }
}

@media (max-width: 640px) {
  .acciones .btn { width: 100%; }
  .marca { width: 22px; height: 22px; font-size: .72rem; box-shadow: 0 0 0 3px rgba(255, 107, 53, .3); }
  .garantias-lista, .leyenda, .recorrido, .publicos, .especies, .comprueba, .comprueba--3, .modulos, .seguridad-lista { grid-template-columns: 1fr; }
  .mosaico > .m-movil-6 { grid-column: span 12; }
  .publicos li { flex-direction: row; align-items: center; }
  .capitulo-cabecera { grid-template-columns: 1fr; }
  .capitulo-num { grid-row: auto; font-size: 2.8rem; }
  .capitulo-cabecera h2 { grid-column: 1; }
  .pasos { grid-template-columns: 1fr; gap: 26px; }
  .pasos li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; text-align: left; }
  .paso-num { grid-row: span 2; margin: 0; }
  .pasos p { margin-inline: 0; }
  .salud { grid-template-columns: 1fr; }
  .visor-marco { align-items: flex-start; justify-content: flex-start; }
  .visor-marco img { max-width: none; width: 200%; }
  .visor-marco img.visor-retrato { width: 100%; max-width: 100%; }
}