@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/shape.css');
@import url('tokens/base.css');

/* ==========================================================================
   Vesta — landing
   Identidad v6: papel, tinta carbón, filetes de 1px y el amarillo sólo para
   señalar (una vez por bloque como máximo). Cinco bloques, mucho aire.
   ========================================================================== */

.wrap{max-width:calc(var(--content-max) + 2 * var(--side));margin:0 auto;padding-inline:var(--side)}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--ink-1);color:var(--vs-paper);padding:10px 16px;border-radius:var(--radius-sm)}
.skip-link:focus{top:var(--space-4)}

/* Etiqueta micro: caja alta, tracking abierto */
.micro{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;line-height:1.5;color:var(--ink-3)}
.eyebrow{margin-bottom:var(--space-4)}

/* Marcador: la única forma en que el amarillo toca texto */
.hl{background:var(--vs-signal);color:var(--ink-1);padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ==========================================================================
   Marca — wordmark tipográfico con corchete de enfoque.
   Reconstrucción del manual hasta tener el archivo vectorial.
   ========================================================================== */
.wordmark{display:inline-flex;flex-direction:column;gap:3px;color:var(--ink-1);text-decoration:none}
.wordmark__word{position:relative;align-self:flex-start;font-size:30px;font-weight:700;letter-spacing:var(--tracking-wordmark);line-height:.9;padding-right:.3em}
.wordmark__word::after{content:'';position:absolute;top:-.04em;right:0;width:.2em;height:.2em;border-top:.07em solid var(--vs-signal);border-right:.07em solid var(--vs-signal)}
.wordmark__tag{font-size:11px;line-height:1.2;color:var(--ink-2);white-space:nowrap}
.wordmark--inverse{color:var(--on-dark-1)}

/* ==========================================================================
   Header — sólo marca y CTA; con cinco bloques el scroll es la navegación
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:20;background:var(--vs-paper);border-bottom:1px solid var(--border-default)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:var(--space-4)}

/* ==========================================================================
   Acciones
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font);font-size:16px;font-weight:500;line-height:1.2;padding:15px 22px;border:1px solid var(--vs-carbon);border-radius:var(--radius-btn);background:var(--vs-carbon);color:var(--vs-paper);text-decoration:none;white-space:nowrap;transition:transform var(--dur-fast) var(--ease)}
.btn .arrow{display:inline-block;transition:transform var(--dur-base) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn:active{transform:scale(.99)}
.btn--sm{font-size:var(--text-small);padding:11px 16px}
.btn--inverse{background:var(--vs-paper);border-color:var(--vs-paper);color:var(--vs-carbon)}
.btn--inverse:focus-visible{outline-color:var(--vs-paper)}

/* ==========================================================================
   Secciones
   ========================================================================== */
.section{padding-block:var(--space-section)}
.section--deep{background:var(--vs-paper-deep);border-block:1px solid var(--border-default)}
.section h2{font-size:var(--text-h2);line-height:1.06}

.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:end;margin-bottom:var(--space-9)}
.section-head > :first-child{grid-column:1 / span 7}
.section-head__aside{grid-column:8 / span 5;color:var(--ink-2);max-width:46ch}
.section-head--single > :first-child{grid-column:1 / span 8}

/* Remate conceptual de bloque */
.statement{font-size:var(--text-sub);font-weight:600;letter-spacing:-.01em;line-height:var(--leading-sub)}

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.hero{padding-block:var(--space-10) var(--space-section)}
.hero__inner{max-width:60ch}
.hero h1{font-size:var(--text-display);max-width:14ch}
.hero__lead{font-size:var(--text-lead);color:var(--ink-2);max-width:48ch;margin:var(--space-6) 0 var(--space-8)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* ==========================================================================
   2 · Contexto — el recorrido, sin explicar cada etapa
   ========================================================================== */
.context__title{max-width:24ch}
.track{padding-block:var(--space-10) var(--space-9)}
.track ol{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0}
.track ol::before{content:'';position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:7px;height:1px;background:var(--border-strong)}
.track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;font-size:var(--text-small);color:var(--ink-2)}
.node{width:15px;height:15px;border-radius:50%;background:var(--vs-paper-deep);border:1.5px solid var(--border-dash)}
.is-end .node{background:var(--vs-carbon);border-color:var(--vs-carbon)}
.is-end .track__label{color:var(--ink-1);font-weight:600}

/* ==========================================================================
   3 · Cómo trabajamos — tres momentos, sin tarjetas
   ========================================================================== */
.moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);list-style:none;margin:0;padding:0}
.moments li{border-top:1px solid var(--ink-1);padding-top:var(--space-5)}
.moments h3{font-size:var(--text-sub);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:var(--space-3)}
.moments p{color:var(--ink-2);max-width:38ch}

/* ==========================================================================
   4 · Socios — dos columnas de texto, sin nombres ni CVs
   ========================================================================== */
.partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8)}
.partner{border-top:1px solid var(--ink-1);padding-top:var(--space-5)}
.partner h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);font-size:var(--text-sub);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:var(--space-4)}
.partner__years{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--ink-3)}
.partner p{color:var(--ink-2);max-width:44ch}

/* ==========================================================================
   5 · Cierre — Carbón a sangre completa, único bloque oscuro
   ========================================================================== */
.site-footer{background:var(--vs-carbon);color:var(--on-dark-1);padding-block:var(--space-10) var(--space-6)}
.site-footer :focus-visible{outline-color:var(--vs-paper)}
.footer__lead{max-width:34ch}
.footer__statement{font-size:var(--text-h2);font-weight:700;letter-spacing:var(--tracking-display);line-height:1.06}
.underline{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--vs-signal);text-decoration-thickness:3px;text-underline-offset:10px}
.footer__sub{margin:var(--space-6) 0 var(--space-7);font-size:var(--text-lead);color:var(--on-dark-2);max-width:40ch}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--border-inverse);font-size:14px;color:var(--on-dark-legal)}
.footer__bottom .wordmark__word{font-size:22px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .section-head{grid-template-columns:1fr;align-items:start;gap:var(--space-4)}
  .section-head > :first-child,.section-head__aside{grid-column:1 / -1}
  .moments{grid-template-columns:1fr;gap:var(--space-5)}
  .partners{grid-template-columns:1fr;gap:var(--space-5)}
}

/* El recorrido pasa a vertical: seis nodos no entran a lo ancho */
@media (max-width:760px){
  .section{padding-block:var(--space-9)}
  .hero{padding-block:var(--space-8) var(--space-9)}
  .track{padding-block:var(--space-8) var(--space-7)}
  .track ol{grid-template-columns:1fr}
  .track ol::before{left:7px;right:auto;top:16px;bottom:16px;width:1px;height:auto}
  .track li{flex-direction:row;text-align:left;gap:var(--space-4);padding-block:var(--space-3)}
  .site-footer{padding-block:var(--space-9) var(--space-6)}
  .footer__bottom{margin-top:var(--space-9)}
}

@media (max-width:480px){
  .site-header .wordmark__tag{display:none}
  .btn--sm{padding:10px 14px}
}