/* Páginas de proyecto (nodos.html, viveros.html, fondas.html), una por caso desde 2026-10-27 (decisión 0010). Solo tokens de estilo.css */
.proyecto { --tinte: color-mix(in srgb, var(--azul-institucional) 8%, var(--blanco)); padding-block: clamp(48px, 7vw, 112px); padding-top: clamp(12px, 1.6vw, 24px); }
/* Colores propios de NodOS, los de su logo */
.proyecto--nodos { --nodos-azul-1: #143a6b; --nodos-azul-2: #2d65a8; --nodos-azul-3: #5b95cf; }

/* Portada del caso: identidad a la izquierda, el producto a la derecha */
.portada-caso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.portada-caso--invertida { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.portada-caso--invertida .portada-caso__texto { order: 2; }
.caso__identidad { display: grid; justify-items: center; text-align: center; padding-bottom: clamp(16px, 2vw, 24px); }
.caso__simbolo { display: block; width: min(42%, 136px); height: auto; }
.caso__nombre { display: inline-flex; align-items: baseline; font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 700; color: var(--tinta); letter-spacing: -.035em; line-height: .9; }
.caso__nombre img { height: .74em; width: auto; margin-left: .04em; }
.caso__nombre img.cero { margin-left: .02em; }
/* «Nod» en el azul oscuro de NodOS y del mismo grosor que el trazo fino de la OS (fundador, 2026-10-27) */
/* ViverOS: «Viver» en amarillo oscuro, de la estampa del búho y la OS en degradado de ese amarillo a uno oscuro (fundador, 2026-10-27) */
.caso__nombre--viveros { color: var(--viveros-amarillo); }
.caso__nombre--nodos { color: var(--nodos-azul-1); font-weight: 700; /* prueba (fundador, 2026-10-27): antes 300 */ letter-spacing: -.02em; font-size: clamp(2.25rem, 3.6vw, 3.25rem); margin-top: 12px; }
.caso__linea { margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 600; line-height: 1.3; color: var(--tinta); letter-spacing: -.01em; max-width: 24ch; }
.caso__descripcion { margin-top: 14px; color: var(--texto); max-width: 42ch; }
.caso__nota { margin-top: 14px; font-size: .875rem; color: var(--apagado); max-width: 42ch; }
.portada-caso__foto { display: block; width: 100%; height: auto; }

/* Video continuo, sin capítulos: solo pausa y avance */
.caso__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--blanco); }
.reproductor { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.reproductor button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 2px; background: transparent; color: var(--tinta); cursor: pointer; transition: background-color .15s ease-out; }
.reproductor button:hover { background: var(--tinte); }
.reproductor path[hidden] { display: none; }
.avance { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; }
.avance span { position: relative; display: block; width: 100%; height: 3px; background: var(--filete); }
.avance i { position: absolute; inset: 0; background: var(--nodos-azul-2, var(--azul-institucional)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.reproductor__tiempo { min-width: 5.5em; text-align: right; font-size: .9rem; color: var(--apagado); font-variant-numeric: tabular-nums; }

/* Trayecto: tres fases contadas como texto e ilustración, cada una con su propia composición.
   Más compacto que la portada del caso: cada fase cabe en media pantalla (fundador, 2026-10-27) */
.trayecto { margin-top: clamp(56px, 7vw, 96px); }
.trayecto__titulo { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; color: var(--tinta); letter-spacing: -.025em; line-height: 1.05; max-width: 22ch; }
.fase { display: grid; gap: clamp(24px, 3.5vw, 56px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.fase__texto .fase__frase { margin-top: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: var(--apagado); max-width: 28ch; }
.fase__frase b { font-weight: 700; color: var(--tinta); }
.fase__texto p { margin-top: 12px; max-width: 44ch; color: var(--texto); font-size: .975rem; }
.fase__texto .fase__con { font-size: .825rem; color: var(--apagado); }
.fase img { display: block; width: 100%; height: auto; }
.fase__figura { max-width: 560px; }

/* Datos: texto a la izquierda, ilustración y el tamaño de lo recuperado a escala a la derecha */
.fase--datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* La primera fase arranca pegada al título del trayecto (fundador, 2026-10-27) */
.trayecto__titulo + .fase { margin-top: clamp(20px, 2.4vw, 32px); }
.fase--datos { align-items: start; }

/* Modelo: el mapa de grupos manda, a sangre del lado izquierdo; el texto va a la derecha */
.fase--modelo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fase--modelo { align-items: start; }
.fase--modelo .fase__figura { justify-self: start; }
.jerarquia { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(16px, 2.5vw, 32px); align-items: end; margin-top: 24px; }
.jerarquia figure { margin: 0; }
.jerarquia svg { display: block; max-width: 100%; height: auto; }
.jerarquia figcaption { margin-top: 8px; font-size: .825rem; color: var(--apagado); }
.jerarquia figcaption b { display: block; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 700; color: var(--tinta); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Interfaz: dos pantallas del producto encimadas, el texto a la izquierda */
.fase--interfaz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.collage { position: relative; padding-bottom: 18%; max-width: 600px; justify-self: end; width: 100%; }
.collage__fondo { width: 86% !important; border: 1px solid var(--filete); }
.collage__frente { position: absolute; right: 0; bottom: 0; width: 34% !important; border: 1px solid var(--tinta); background: var(--blanco); }

/* Producto usado en cada fase (fundador, 2026-10-27): la tarjeta de productos, compactada, con su enlace a «Me interesa».
   Hereda el color por id (#estructura, #acervo, #plataforma) y los trazos de .producto; aquí solo se le quita el zigzag.
   antipatrón permitido (radio de más de 2 px): es la misma tarjeta de productos, que ya lo lleva por decisión del fundador */
.uso { margin-top: clamp(24px, 3vw, 36px); max-width: 520px; }
.uso .uso__etiqueta { margin: 0 0 10px; max-width: none; font-size: .825rem; color: var(--apagado); }
.producto--uso { width: 100%; margin-top: 0; padding: 16px; column-gap: 16px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.producto--uso h3 { font-size: 1.0625rem; }
.fase__texto .producto--uso .producto__linea { margin-top: 8px; max-width: none; color: var(--blanco); font-size: .875rem; }
.producto--uso .producto__interesa { margin-top: 14px; padding: 9px 14px; }

/* Antes y después: el después lleva el bloque de fondo pleno */
.contraste { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(48px, 6vw, 88px); }
.contraste > div { padding: clamp(20px, 2.4vw, 32px); }
.contraste h3 { font-size: .95rem; font-weight: 700; margin-bottom: 8px; color: var(--tinta); }
.contraste p { font-size: 1.025rem; max-width: 40ch; }
.contraste__antes { border: 1px solid var(--filete); border-right: 0; }
.contraste__despues { background: var(--azul-portada); color: var(--blanco); }
.contraste__despues h3 { color: var(--blanco); }
.resultado { display: flex; justify-content: flex-end; margin-top: clamp(40px, 5vw, 72px); }
.resultado__cifra { font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; color: var(--tinta); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* «NodOS» en el botón con el diseño del logo: «Nod» en peso 300 y la OS del monograma (blanca sobre el azul del botón) */
.boton__nodos { display: inline-flex; align-items: baseline; font-weight: 300; letter-spacing: -.01em; }
.boton__nodos img { height: .82em; width: auto; margin-left: 1px; transform: translateY(.06em); }
.resultado p { max-width: 38ch; font-size: .975rem; }


/* Entrada al bajar (fundador, 2026-10-27): las frases de cada fase se descubren con el corte diagonal de los títulos (.revela);
   figuras, texto, producto y cierre aparecen con un fundido que se enfoca (de borroso a nítido, con un leve acercamiento), sin desliz.
   caso.js pone .con-entra solo si hay movimiento permitido; sin JS o con movimiento reducido todo queda a la vista */
.con-entra .entra { transition: opacity 1s cubic-bezier(.22, .61, .36, 1), filter 1s cubic-bezier(.22, .61, .36, 1), scale 1.2s cubic-bezier(.22, .61, .36, 1); }
.con-entra .entra:not(.entro) { opacity: 0; filter: blur(10px); scale: 1.025; }

/* Volver a la lista de proyectos */
.volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(20px, 3vw, 36px); padding: 8px 12px 8px 0; font-size: .9375rem; color: var(--tinta); }
.volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: translate .2s ease-out; }
.volver:hover svg, .volver:focus-visible svg { translate: -4px 0; }
.volver span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Campos de una ficha, en filas con filete (más de tres filas) */
.campos { margin-top: 20px; max-width: 420px; }
.campos > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--filete); }
.campos > div:last-child { border-bottom: 1px solid var(--filete); }
.campos dt { font-size: .9375rem; font-weight: 700; color: var(--tinta); }
.campos dd { font-size: .9375rem; color: var(--texto); }

/* Cien puntos, uno por fonda; los llenos son los que tienen el dato */
.puntos { margin: 0; }
.puntos svg { display: block; width: min(100%, 260px); height: auto; }
.puntos figcaption { margin-top: 10px; font-size: .825rem; color: var(--apagado); }
.puntos figcaption b { display: block; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 700; color: var(--tinta); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.composicion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.valida { margin: 0; display: grid; gap: 14px; }
.valida p { margin: 0; font-size: .825rem; color: var(--apagado); }
.valida b { display: block; margin-top: 2px; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--tinta); font-variant-numeric: tabular-nums; }
.valida .valida__bien b { color: var(--azul-institucional); }

/* Imagen suelta de una fase (captura real del producto) */
.fase__captura { justify-self: end; width: 100%; max-width: 360px; border: 1px solid var(--filete); }

@media (max-width: 860px) {
  .portada-caso, .portada-caso--invertida, .fase--datos, .fase--modelo, .fase--interfaz { grid-template-columns: minmax(0, 1fr); }
  .portada-caso--invertida .portada-caso__texto { order: 0; }
  .fase--interfaz .collage { order: 2; }
  .jerarquia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .producto--uso { grid-template-columns: minmax(0, 1fr); }
  .producto--uso h3, .producto--uso .producto__esquema, .producto--uso .producto__linea, .producto--uso .producto__interesa { grid-area: auto; }
  .producto--uso .producto__esquema { margin: 12px 0; }
  .fase--modelo .fase__figura { order: 2; justify-self: start; }
  .collage { justify-self: start; }
  .composicion { grid-template-columns: minmax(0, 1fr); }
  .fase__captura { justify-self: start; }
  .campos > div { grid-template-columns: minmax(0, 1fr); }
  .contraste { grid-template-columns: 1fr; }
  .contraste__antes { border-right: 1px solid var(--filete); border-bottom: 0; }
  .resultado { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reproductor button, .volver svg { transition: none; }
}

/* Paradas del recorrido (fundador, 2026-10-27): fichas reales del sitio de ViverOS, cada una lleva a su poema */
.paradas { margin-top: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); list-style: none; padding: 0; }
.paradas a { display: block; border: 1px solid var(--filete); transition: border-color .15s ease-out; }
.paradas a:hover, .paradas a:focus-visible { border-color: var(--tinta); }
.paradas img { display: block; width: 100%; height: auto; }
.paradas__nota { margin-top: 14px; max-width: 60ch; font-size: .975rem; }
.caso__abrir { margin-top: 20px; }
@media (max-width: 760px) { .paradas { grid-template-columns: minmax(0, 1fr); } .paradas li { max-width: 420px; } }