/* JM Rutas v3 · nosotros.html · piezas únicas (solo tokens de base.css)
   Gramáticas: apertura con espacio honesto · bitácora año/hecho · foto alta +
   frase de cartel · símbolo que se traza (noche) · tabla de valores · tres
   círculos · compuertas · condición → acción (noche) · lista de cartel · cierre
   centrado. */

/* ---------- Comunes v3 (viven en portada.css; aquí solo lo usado) ---------- */
.antetitulo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.nos-pagina .tramo { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.nos-pagina h2.t-2 { max-width: 18ch; }
.nos-pagina .punto { color: var(--cobre); }
.nos-pagina [data-tramo="noche"] .punto { color: var(--cobre-claro); }
.nos-cab { display: grid; gap: var(--e-s); margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 60rem; }
@media (min-width: 1024px) { .nos-cab--partida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; max-width: none; } .nos-cab--partida .antetitulo { grid-column: 1 / -1; } }

/* ---------- Apertura ---------- */
.nos-hero { position: relative; overflow: clip; background: var(--bg); padding-top: calc(var(--cab-alto) + clamp(1.5rem, 5vw, 4.5rem)); }
.nos-hero__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: end; }
@media (min-width: 1024px) { .nos-hero__rejilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--e-2xl); } }
.nos-hero__texto { display: grid; gap: var(--e-m); }
.nos-hero__titulo { font-size: clamp(2.5rem, 6.6vw + .3rem, 7rem); font-weight: 830; font-stretch: 108%; line-height: .9; letter-spacing: -.035em; }
.nos-hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.nos-hero__titulo .linea > span { display: inline-block; }
.nos-hero__titulo .linea:first-child { color: var(--arcilla-tinta); }
.js .nos-hero__titulo .linea > span { transform: translateY(105%); }
.js .nos-hero__titulo.is-listo .linea > span { transform: none; transition: transform 700ms var(--ease-salida); transition-delay: calc(var(--n, 0) * 110ms + 80ms); }
.nos-hero__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--tinta-2); max-width: 44ch; }
.fundadores { display: grid; gap: var(--e-s); width: 100%; max-width: 17rem; }
@media (min-width: 1024px) { .fundadores { justify-self: end; max-width: 26rem; } }
.fundadores__hueco { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; background: var(--adobe) var(--topo-svg) center / 360px; border-radius: var(--r-xs); outline: 1.5px dashed color-mix(in srgb, var(--noche) 45%, transparent); outline-offset: -10px; }
.fundadores__marca { position: absolute; left: 1.25rem; top: 1.25rem; width: 2.2rem; height: 1.25rem; background: var(--noche); -webkit-mask: var(--banda-svg) left center / 1.25rem 1.25rem repeat-x; mask: var(--banda-svg) left center / 1.25rem 1.25rem repeat-x; opacity: .8; }
.fundadores__aviso { font-family: var(--f-display); font-size: clamp(1.4rem, 1.6vw + .8rem, 2rem); font-weight: 800; font-stretch: 92%; line-height: 1.05; color: var(--noche); }
.fundadores__aviso span { font-weight: 500; font-stretch: 100%; color: var(--arcilla-tinta); }
.fundadores figcaption { font-size: var(--t-nota); color: var(--tinta-3); max-width: 36ch; }
.nos-ficha { display: grid; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1.5px solid var(--tinta); }
@media (min-width: 900px) { .nos-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--medianil); } }
.nos-ficha div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--e-s); align-items: baseline; padding-block: var(--e-s); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) { .nos-ficha div { border-bottom: 0; } }
.nos-ficha dt { font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: .9; color: var(--arcilla-tinta); }
.nos-ficha dd { color: var(--tinta-2); font-size: var(--t-chico); }
.nos-ficha .estado { margin-top: .35rem; }
.nos-furgon { margin-top: var(--e-l); }
.nos-furgon .furgon__img { width: min(100% - 2 * var(--margen), 50rem); }
.nos-furgon .furgon__carretera { background: var(--noche); }
.nos-furgon__pie { padding-block: var(--e-s) var(--e-l); }

/* ---------- Historia: bitácora ---------- */
.bitacora { list-style: none; padding: 0; border-top: 1.5px solid var(--tinta); }
.bitacora li { display: grid; gap: var(--e-xs) var(--medianil); padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) { .bitacora li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } }
.bitacora__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 800; font-stretch: 72%; line-height: 1; font-variant-numeric: tabular-nums; }
.bitacora h3 { font-size: var(--t-3); font-weight: 740; font-stretch: 96%; }
.bitacora li p:not(.bitacora__fecha) { margin-top: .35rem; color: var(--tinta-2); max-width: 58ch; }
.bitacora__hoy .bitacora__fecha { color: var(--cobre-tinta); }
.balanza { display: grid; gap: var(--e-xl) var(--medianil); margin-top: var(--e-2xl); }
@media (min-width: 900px) { .balanza { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); column-gap: var(--e-xl); align-items: start; } }
.balanza__t { margin-bottom: var(--e-xs); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.balanza li { color: var(--tinta-2); }
.balanza__cita { font-family: var(--f-display); font-size: clamp(1.5rem, 1.6vw + 1rem, 2.4rem); font-weight: 700; font-stretch: 96%; line-height: 1.1; letter-spacing: -.015em; }

/* ---------- Propósito ---------- */
.nos-proposito__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .nos-proposito__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--e-2xl); } }
.nos-proposito__foto { --ar: 4 / 5; max-width: 30rem; }
.nos-proposito__texto { display: grid; gap: var(--e-m); }
.nos-frase { font-size: clamp(2.6rem, 6vw + .2rem, 6.75rem); font-weight: 830; font-stretch: 108%; line-height: .9; letter-spacing: -.04em; max-width: 13ch; }
.mvv { margin-top: var(--e-s); border-top: 1.5px solid var(--tinta); }
.mvv div { display: grid; gap: .25rem var(--e-m); padding-block: var(--e-s); border-bottom: 1px solid var(--borde); }
@media (min-width: 640px) { .mvv div { grid-template-columns: 9rem minmax(0, 1fr); } }
.mvv dt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: var(--f-display); font-weight: 740; font-stretch: 90%; }
.mvv dd { color: var(--tinta-2); }
.mvv b { color: var(--tinta); }

/* ---------- Símbolo: Trazo Compartido ---------- */
.simbolo__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .simbolo__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--e-2xl); } }
.simbolo__texto { display: grid; gap: var(--e-m); justify-items: start; }
.trazo { display: grid; gap: var(--e-s); justify-items: center; }
.trazo__svg { width: min(100%, 28rem); height: auto; overflow: visible; }
.trazo__reticula path { fill: none; stroke: var(--noche-500); stroke-width: .3; opacity: .6; }
.trazo__j, .trazo__m { fill: var(--cobre-claro); fill-opacity: 0; }
.trazo__lleno { fill: var(--cal-0); }
.trazo__fuste { fill: var(--cobre); transform-box: fill-box; transform-origin: top; }
.trazo__linea { fill: none; stroke: var(--cobre-claro); stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.trazo__etq text { font-family: var(--f-display); font-weight: 700; fill: var(--noche-300); }
.trazo__etq-j, .trazo__etq-m { font-size: 13px; font-stretch: 80%; }
.trazo__etq-f { font-size: 6.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--cobre-claro) !important; }
.trazo__pasos { width: 100%; border-top: 1px solid var(--borde); }
.trazo__pasos div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e-s); align-items: baseline; padding-block: var(--e-s); border-bottom: 1px solid var(--borde); }
.trazo__pasos dt { font-family: var(--f-display); font-size: var(--t-3); font-weight: 760; font-stretch: 92%; color: var(--cobre-claro); }
.trazo__pasos dd { color: var(--noche-100); }
@media (prefers-reduced-motion: no-preference) {
  .js .simbolo:not(.is-trazando) :is(.trazo__lleno, .trazo__fuste, .trazo__etq text) { opacity: 0; }
  .js .simbolo:not(.is-trazando) .trazo__pasos div { opacity: .4; }
  .is-trazando .trazo__linea { animation: tz-dibuja 1.8s var(--ease-vaiven) both; }
  .is-trazando .trazo__j { animation: tz-tinta 1.6s var(--ease-suave) 1.6s both; }
  .is-trazando .trazo__m { animation: tz-tinta 1.6s var(--ease-suave) 2.8s both; }
  .is-trazando .trazo__lleno { animation: tz-aparece .9s var(--ease-salida) 4.2s both; }
  .is-trazando .trazo__fuste { animation: tz-fuste 1s var(--ease-salida) 4.6s both; }
  .is-trazando .trazo__etq-j { animation: tz-aparece .6s var(--ease-salida) 1.7s both; }
  .is-trazando .trazo__etq-m { animation: tz-aparece .6s var(--ease-salida) 2.9s both; }
  .is-trazando .trazo__etq-f { animation: tz-aparece .6s var(--ease-salida) 4.9s both; }
  .simbolo.is-trazando .trazo__pasos div { animation: tz-paso .6s var(--ease-salida) both; }
  .simbolo.is-trazando .trazo__pasos div:nth-child(1) { animation-delay: 1.6s; }
  .simbolo.is-trazando .trazo__pasos div:nth-child(2) { animation-delay: 2.8s; }
  .simbolo.is-trazando .trazo__pasos div:nth-child(3) { animation-delay: 4.6s; }
}
@keyframes tz-dibuja { 0% { stroke-dashoffset: 1; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tz-tinta { 0% { fill-opacity: 0; } 35% { fill-opacity: .55; } 100% { fill-opacity: 0; } }
@keyframes tz-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes tz-fuste { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes tz-paso { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-trazo-repetir] { display: none; } }

/* ---------- Valores: tabla tipográfica ---------- */
.valores { border-top: 1.5px solid var(--tinta); }
.valores__fila { display: grid; gap: .35rem var(--medianil); padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
.valores__fila h3 { font-size: var(--t-3); font-weight: 760; font-stretch: 94%; letter-spacing: -.015em; }
.valores__fila p { color: var(--tinta-2); }
.valores__regla { font-family: var(--f-display); font-weight: 680; font-stretch: 94%; color: var(--arcilla-tinta) !important; }
.valores__cab { display: none; }
@media (min-width: 900px) {
  .valores__fila { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); align-items: baseline; }
  .valores__cab { display: grid; padding-block: var(--e-xs); font-family: var(--f-display); font-size: .74rem; font-weight: 700; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
}

/* ---------- Gobierno ---------- */
.gob { display: grid; gap: var(--e-xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .gob { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-2xl); } }
.gob__diagrama svg { width: min(100%, 26rem); height: auto; margin-inline: auto; }
.gob__c { fill-opacity: .1; stroke-width: 1.5; transition: fill-opacity var(--dur-corta) var(--ease-suave), opacity var(--dur-corta); }
.gob__c--fam { fill: var(--cobre); stroke: var(--cobre-tinta); }
.gob__c--pro { fill: var(--noche-500); stroke: var(--noche-500); }
.gob__c--emp { fill: var(--noche); stroke: var(--noche); }
.gob__t { font-family: var(--f-display); font-size: 17px; font-weight: 740; fill: var(--noche); }
.gob__n { font-family: var(--f-display); font-size: 12.5px; font-weight: 700; fill: var(--noche); }
.gob__n--s { font-size: 10px; font-weight: 600; fill: var(--piedra-600); letter-spacing: .08em; text-transform: uppercase; }
.gob__centro { fill: var(--cobre); }
.gob__cols { display: grid; gap: var(--e-l) var(--medianil); }
@media (min-width: 640px) { .gob__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gob__col { padding-top: var(--e-s); border-top: 1.5px solid var(--tinta); }
.gob__col h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--e-s); font-size: var(--t-4); }
.gob__col h3 i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--noche); }
.gob__col[data-circulo="fam"] h3 i { background: var(--cobre); }
.gob__col[data-circulo="pro"] h3 i { background: var(--noche-500); }
.gob__col ul { display: grid; gap: var(--e-s); font-size: var(--t-chico); color: var(--tinta-2); }
.gob__col li b { display: block; color: var(--tinta); }
.gob__col .estado { margin-top: .35rem; }
.gob:has([data-circulo="fam"]:hover) .gob__c--fam, .gob:has([data-circulo="pro"]:hover) .gob__c--pro, .gob:has([data-circulo="emp"]:hover) .gob__c--emp { fill-opacity: .32; }
.gob__reglas { display: grid; gap: var(--e-xl) var(--medianil); margin-top: var(--e-2xl); padding-top: var(--e-l); border-top: 1px solid var(--borde); }
@media (min-width: 900px) { .gob__reglas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-xl); } }
.gob__reglas-t { font-size: var(--t-3); font-weight: 740; font-stretch: 94%; margin-bottom: var(--e-s); }
.gob__reglas p { color: var(--tinta-2); }
.gob__reglas a { color: var(--tinta); font-weight: 650; }
.escalera { display: grid; gap: .4rem; counter-reset: es; }
.escalera li { counter-increment: es; display: flex; gap: .7rem; align-items: center; min-height: 2.5rem; font-family: var(--f-display); font-weight: 650; font-stretch: 94%; border-bottom: 1px solid var(--borde); }
.escalera li::before { content: counter(es); display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 2px; background: var(--noche); color: var(--cal-0); font-size: .8rem; }
.escalera li:nth-child(2) { margin-left: .9rem; } .escalera li:nth-child(3) { margin-left: 1.8rem; } .escalera li:nth-child(4) { margin-left: 2.7rem; }

/* ---------- Detener (noche): condición → acción ---------- */
.nos-detener__rejilla { display: grid; gap: var(--e-xl) var(--medianil); }
.nos-detener__cab { display: grid; gap: var(--e-m); align-content: start; }
@media (min-width: 1024px) { .nos-detener__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--e-2xl); } .nos-detener__cab { position: sticky; top: calc(var(--cab-alto) + 2rem); } }
.nos-detener__t { font-size: clamp(2.4rem, 3.6vw + .6rem, 4.75rem); font-weight: 820; font-stretch: 104%; line-height: .92; letter-spacing: -.03em; }
.nos-detener .lead { color: var(--noche-100); }
.paradas { list-style: none; padding: 0; border-top: 1.5px solid var(--cal); }
.paradas li { display: grid; gap: .5rem var(--medianil); padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
@media (min-width: 640px) { .paradas li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.paradas__si { font-family: var(--f-display); font-size: clamp(1.15rem, .8vw + .9rem, 1.45rem); font-weight: 700; font-stretch: 94%; line-height: 1.2; color: var(--cal); }
.paradas__hacemos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; color: var(--noche-100); }
.paradas__hacemos::before { content: "→"; font-family: var(--f-display); font-weight: 700; color: var(--cobre-claro); }

/* ---------- Lo que no hacemos ---------- */
.noes { display: grid; border-top: 1.5px solid var(--tinta); }
@media (min-width: 900px) { .noes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-2xl); } }
.noes li { padding-block: var(--e-s); border-bottom: 1px solid var(--borde); color: var(--tinta-2); }
.noes b { display: block; font-family: var(--f-display); font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); font-weight: 740; font-stretch: 94%; line-height: 1.2; color: var(--tinta); }

/* ---------- Cierre centrado ---------- */
.nos-cierre { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 54rem); display: grid; align-items: center; background: var(--noche-950); color: var(--cal); text-align: center; }
.nos-cierre__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.nos-cierre__velo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(75% 65% at 50% 50%, rgb(10 22 40 / .8) 0%, rgb(10 22 40 / .55) 70%, rgb(10 22 40 / .4) 100%), linear-gradient(to top, rgb(10 22 40 / .6), rgb(10 22 40 / 0) 40%); }
.nos-cierre__cuerpo { display: grid; justify-items: center; gap: var(--e-l); padding-block: calc(var(--cab-alto) + var(--e-2xl)) var(--e-xl); }
.nos-cierre .antetitulo { justify-content: center; }
.nos-cierre__t { font-size: clamp(2.4rem, 5.2vw + .4rem, 5.75rem); font-weight: 830; font-stretch: 106%; line-height: .92; letter-spacing: -.035em; max-width: 16ch; }
.nos-cierre__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 44ch; }
.nos-puertas { display: grid; width: min(100%, 44rem); border-top: 1px solid rgb(247 244 238 / .3); text-align: left; }
@media (min-width: 640px) { .nos-puertas { grid-template-columns: 1fr 1fr; column-gap: var(--medianil); } }
.nos-puertas a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: end; padding: 1rem 0 1.1rem; border-bottom: 1px solid rgb(247 244 238 / .3); color: var(--cal); text-decoration: none; }
.nos-puertas small { grid-column: 1 / -1; font-family: var(--f-display); font-size: .74rem; font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-claro); }
.nos-puertas span { font-family: var(--f-display); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); font-weight: 750; font-stretch: 92%; }
.nos-puertas i { font-size: 1.4rem; transition: translate var(--dur-corta) var(--ease-suave); }
.nos-puertas a:hover i, .nos-puertas a:focus-visible i { translate: .35rem 0; }
.nos-puertas a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.nos-cierre__lugar { color: var(--noche-300); }

@media (prefers-reduced-motion: reduce) { .js .nos-hero__titulo .linea > span { transform: none; } }