/* ==========================================================================
   MIND MIAMI — SYSTEM v1 · PÁGINAS INTERIORES (system-pages.css)
   Se carga SIEMPRE DESPUÉS de /css/system.css (tokens, reset, nav, footer,
   chips, tableros y marquees viven allí — aquí solo lo que el home no define).
   Shell obligatorio (ver docs/SYSTEM-STYLE.md):

     <link rel="stylesheet" href="/css/system.css">
     <link rel="stylesheet" href="/css/system-pages.css">
     <link rel="stylesheet" href="/css/motion.css">
     <script defer src="/js/i18n.js"></script>
     <script defer src="/js/system.js"></script>
     <script defer src="/js/motion.js"></script>

   ========================================================================
   NAV INTERIOR (.inner-nav) — COPIAR LITERAL este snippet.
   Sobre hero navy (por defecto):

   <nav class="nav-shell inner-nav" aria-label="Main navigation" data-en-attr="aria-label:Main navigation" data-es-attr="aria-label:Navegación principal">
     <a href="/" class="nav-brand" aria-label="Mind Miami home" data-en-attr="aria-label:Mind Miami home" data-es-attr="aria-label:Inicio de Mind Miami">
       <img class="brand-logo" src="/assets/brand/logo-inverse.png" alt="MIND MIAMI" width="435" height="93">
     </a>
     <div class="nav-links">
       <a href="/" data-es="Inicio">Home</a>
       <a href="/services" data-es="Servicios">Services</a>
       <a href="/industries" data-es="Industrias">Industries</a>
       <a href="/systems" data-es="Sistemas">Systems</a>
       <a href="/work" data-es="Trabajos">Work</a>
     </div>
     <div class="nav-right">
       <div class="lang-toggle" role="group" aria-label="Language / Idioma">
         <button type="button" data-lang="en" aria-pressed="true">EN</button>
         <button type="button" data-lang="es" aria-pressed="false">ES</button>
       </div>
       <a class="nav-cta" href="/start">
         <span data-es="Iniciar un proyecto">Start a project</span>
         <i aria-hidden="true">↗</i>
       </a>
     </div>
   </nav>

   · Marca la página actual con aria-current="page" en su enlace.
   · Sobre hero papel (.page-hero--paper): añadir la clase .inner-nav--paper
     al <nav> y cambiar el logo a /assets/brand/logo-primary.png.
   ========================================================================== */

/* Fuentes extra autoalojadas — SOLO para wordmarks de clientes (.cs-mark).
   PROHIBIDAS en titulares/copy de Mind Miami (el sistema es Sora + Inter). */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-900-normal.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

/* --------------------------------------------------------------------------
   AA en interiores: system.css pinta AMBOS spans del .section-kicker en cian
   13px; sobre papel eso es ~1.65:1 (SYSTEM-STYLE §Accesibilidad lo prohíbe).
   Aquí la ETIQUETA vuelve al estilo base del kicker (Inter 600 12px, color
   heredado: tinta-suave sobre papel / muted sobre navy) y el NÚMERO conserva
   el acento cian de la marca. Solo afecta a páginas que cargan este archivo.
   -------------------------------------------------------------------------- */
.section-kicker span + span {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3em;
  color: inherit;
}

/* ==========================================================================
   1 · PAGE HERO — hero interior compacto (navy por defecto, --paper variante)
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: clamp(520px, 66svh, 760px);
  display: flex; flex-direction: column;
  background: var(--navy);
  color: var(--text-on-navy);
  isolation: isolate;
  overflow: clip;
}
.page-hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(246, 244, 241, .045) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(246, 244, 241, .045) 1px, transparent 1px) 0 0 / 25% 100%;
}
.page-hero-glow {
  position: absolute; z-index: -1; right: -14%; top: -24%;
  width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(6, 214, 221, .12), transparent 62%);
}
.page-hero-body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(30px, 5vh, 60px) var(--pad-x) clamp(44px, 6vh, 76px);
}
.page-hero-body .section-kicker { margin-bottom: clamp(18px, 3vh, 28px); }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 5.8vw, 92px);
  line-height: .99;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}
.page-hero h1 > span { display: block; }
.page-hero h1 .cyan-dot { display: inline; }
.page-hero-intro {
  margin-top: clamp(20px, 3vh, 34px);
  max-width: 560px;
  color: var(--muted-on-navy);
  font-size: clamp(15px, 1.2vw, 17px);
}
.page-hero-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px;
  margin-top: clamp(26px, 4vh, 44px);
}
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-on-navy);
  box-shadow: inset 0 -1px var(--cyan);
  transition: color .2s ease;
}
.text-link:hover { color: var(--cyan); }

/* Variante papel */
.page-hero--paper { background: var(--paper); color: var(--ink); }
.page-hero--paper .page-hero-grid {
  background:
    linear-gradient(rgba(10, 26, 47, .07) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(10, 26, 47, .07) 1px, transparent 1px) 0 0 / 25% 100%;
}
.page-hero--paper .page-hero-glow { background: radial-gradient(circle, rgba(6, 214, 221, .10), transparent 62%); }
.page-hero--paper h1 { color: var(--ink); }
.page-hero--paper .outline-line {
  color: transparent;
  -webkit-text-stroke: 2px rgba(10, 26, 47, .82);
  text-stroke: 2px rgba(10, 26, 47, .82);
}
.page-hero--paper .outline-line .cyan-dot { color: var(--cyan); -webkit-text-stroke: 0; }
.page-hero--paper .page-hero-intro { color: var(--ink-soft); }
.page-hero--paper .text-link { color: var(--ink); }
.page-hero--paper .text-link:hover { color: var(--ink-soft); }

/* ==========================================================================
   2 · INNER NAV — .nav-shell del home adaptado a interiores
   (snippet exacto en el comentario de cabecera de este archivo)
   ========================================================================== */
.inner-nav .nav-links a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px var(--cyan);
}

/* Skin papel: .inner-nav--paper (usar con .page-hero--paper + logo-primary) */
.inner-nav--paper .nav-links a { color: var(--ink-soft); }
.inner-nav--paper .nav-links a:hover { color: var(--ink); }
.inner-nav--paper .nav-links a[aria-current="page"] { color: var(--ink); }
.inner-nav--paper .lang-toggle { border-color: var(--line-ink); }
.inner-nav--paper .lang-toggle button { color: var(--ink-soft); }
.inner-nav--paper .lang-toggle button.is-on { background: var(--cyan); color: var(--navy); }
/* CTA sólido navy sobre papel: el ↗ cian queda sobre navy (AA seguro) */
.inner-nav--paper .nav-cta { background: var(--navy); border-color: var(--navy); color: #fff; }
.inner-nav--paper .nav-cta:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

/* ==========================================================================
   3 · CLIENT STRIP — 7 wordmarks tipográficos (banda navy autocontenida)
   Marcas del contrato: DIRTY RABBIT GROUP · LA TIENDITA · BACK DOOR MONKEY ·
   MAD CLUB · PROYECTO TULUM · PINK PONY · UFACTORY.
   Los .cs-mark están pensados para superficies NAVY (banda o paneles); los
   detalles cian nunca tocan papel.
   ========================================================================== */
.client-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px clamp(28px, 4vw, 54px);
  background: var(--navy);
  border-block: 1px solid var(--line-paper);
  padding: clamp(26px, 3.5vw, 44px) var(--pad-x);
}

.cs-mark {
  display: inline-flex; align-items: baseline;
  font-size: 17px; line-height: 1;
  color: rgba(246, 244, 241, .92);
  white-space: nowrap;
}
.cs-mark i { font-style: normal; color: var(--cyan); }
.cs-mark b { font-weight: inherit; }

/* DIRTY RABBIT GROUP — Montserrat 900 compacto + / cian + GROUP espaciado */
.cs-mark--rabbit { font-family: "Montserrat", var(--body); font-weight: 900; letter-spacing: .015em; text-transform: uppercase; }
.cs-mark--rabbit i { margin: 0 .34em; font-weight: 700; }
.cs-mark--rabbit b { font-weight: 500; font-size: .6em; letter-spacing: .32em; }

/* la tiendita — Sora 600 minúsculas + punto cian */
.cs-mark--tiendita { font-family: var(--display); font-weight: 600; font-size: 1.08em; letter-spacing: .045em; text-transform: lowercase; }
.cs-mark--tiendita i { font-weight: 800; margin-left: .06em; }

/* BACK DOOR MONKEY — Bebas Neue + corchetes cian */
.cs-mark--monkey { font-family: "Bebas Neue", var(--display); font-weight: 400; font-size: 1.28em; letter-spacing: .13em; text-transform: uppercase; }
.cs-mark--monkey i { margin: 0 .16em; font-weight: 400; }

/* MAD CLUB — Montserrat 900 inclinado + barra cian inferior */
.cs-mark--mad {
  font-family: "Montserrat", var(--body); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase;
  transform: skewX(-8deg);
  border-bottom: 3px solid var(--cyan);
  padding-bottom: 3px;
}

/* PROYECTO TULUM — Inter 300 tracking ancho + dos puntos cian */
.cs-mark--tulum { font-family: var(--body); font-weight: 300; font-size: .9em; letter-spacing: .4em; text-transform: uppercase; }
.cs-mark--tulum i { font-weight: 600; margin-right: .12em; }

/* PINK PONY — Sora 800; PONY en trazo cian hueco */
.cs-mark--pony { font-family: var(--display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.cs-mark--pony b {
  margin-left: .3em;
  color: transparent;
  -webkit-text-stroke: 1.1px var(--cyan);
  text-stroke: 1.1px var(--cyan);
}

/* UFACTORY — Inter 800 compacto + plus cian elevado */
.cs-mark--ufactory { font-family: var(--body); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cs-mark--ufactory i { align-self: flex-start; font-size: .72em; font-weight: 700; margin-left: .14em; transform: translateY(-.18em); }

/* Variante marquee (duplicar el set de 7 marcas dentro del track, como en el
   .client-marquee del home, para el loop -50%) */
.client-strip--marquee { display: block; overflow: clip; padding: clamp(22px, 3vw, 34px) 0; }
.client-strip-track {
  display: inline-flex; align-items: center;
  gap: clamp(34px, 4.5vw, 64px);
  padding-left: clamp(34px, 4.5vw, 64px);
  white-space: nowrap; will-change: transform;
  animation: marquee 38s linear infinite; /* @keyframes marquee vive en system.css */
}
.client-strip--marquee:hover .client-strip-track { animation-play-state: paused; }

/* ==========================================================================
   4 · STEP FLOW — proceso vertical 01→05 con línea que se dibuja al scroll
   El riel cian usa la API de motion.js: data-scrub="clip:100,0" (estado
   natural = dibujado, así queda completo sin JS o con reduced-motion).
   ========================================================================== */
.step-flow { position: relative; }
.step-flow-rail {
  position: absolute; left: 30px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--line-ink);
}
.step-flow-rail i { position: absolute; inset: 0; display: block; background: var(--cyan); }
.step-flow-list { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 60px); }
.step-flow-item {
  position: relative;
  display: grid; grid-template-columns: 82px 1fr;
  gap: clamp(14px, 2vw, 30px);
  align-items: start;
}
.step-flow-num {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.15;
  color: transparent;
  -webkit-text-stroke: 1.1px var(--ink);
  text-stroke: 1.1px var(--ink);
  background: var(--paper);           /* tapa el riel a su paso */
  padding: 8px 0 14px;
}
.step-flow-phase { font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.step-flow-body h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.015em;
  margin: 6px 0 10px;
}
.step-flow-text { color: var(--ink-soft); font-size: 15px; max-width: 520px; }

/* Variante sobre navy (asume fondo var(--navy)) */
.step-flow--dark .step-flow-rail { background: var(--line-paper); }
.step-flow--dark .step-flow-num {
  background: var(--navy);
  -webkit-text-stroke-color: rgba(246, 244, 241, .55);
}
.step-flow--dark .step-flow-phase { color: var(--muted-on-navy); }
.step-flow--dark .step-flow-body h3 { color: #fff; }
.step-flow--dark .step-flow-text { color: var(--muted-on-navy); }

/* ==========================================================================
   5 · FAQ SYSTEM — re-skin del patrón de main.js (NO renombrar clases:
   .faq-item > h3 > button[aria-expanded][aria-controls] + .faq-answer[id][hidden])
   ========================================================================== */
.faq-system { max-width: 860px; }
.faq-system .faq-item { border-top: 1px solid var(--line-ink); }
.faq-system .faq-item:last-child { border-bottom: 1px solid var(--line-ink); }
.faq-system .faq-item h3 { margin: 0; font-size: inherit; }
.faq-system .faq-item button {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 22px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 21px 4px; min-height: 44px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
  transition: background .2s ease;
}
.faq-system .faq-item button:hover { background: var(--paper-2); }
.faq-system .faq-item button::after {
  content: "+";
  flex: none;
  font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--ink-soft);
  transition: transform .3s ease;
}
.faq-system .faq-item button[aria-expanded="true"]::after { content: "–"; }
.faq-system .faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.22, .61, .36, 1);
}
.faq-system .faq-answer[hidden] { display: none; }
.faq-system .faq-answer p {
  padding: 2px 4px 26px;
  max-width: 700px;
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.75;
}
/* Sin JS los paneles quedan abiertos y legibles */
@media (scripting: none) {
  .faq-system .faq-answer, .faq-system .faq-answer[hidden] { display: block; max-height: none; }
}

/* Variante sobre navy */
.faq-system--dark .faq-item,
.faq-system--dark .faq-item:last-child { border-color: var(--line-paper); }
.faq-system--dark .faq-item button { color: #fff; }
.faq-system--dark .faq-item button:hover { background: var(--navy-2); }
.faq-system--dark .faq-item button::after { color: var(--muted-on-navy); }
.faq-system--dark .faq-answer p { color: var(--muted-on-navy); }

/* ==========================================================================
   6 · PRICE CARD — tarjeta de paquete navy (+ .is-featured con marco cian)
   ========================================================================== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--navy);
  color: var(--text-on-navy);
  border: 1px solid var(--line-paper);
  padding: clamp(26px, 3vw, 40px);
}
.price-card.is-featured { border: 2px solid var(--cyan); }
.price-flag {
  position: absolute; top: 0; left: clamp(24px, 3vw, 38px);
  transform: translateY(-50%);
  background: var(--cyan); color: var(--navy);
  font-family: var(--display); font-weight: 700; font-size: 10px; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 12px;
}
.price-index { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--cyan); }
.price-name { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); color: #fff; margin-top: 8px; }
.price-for { color: var(--muted-on-navy); font-size: 14px; margin-top: 6px; }
.price-amount {
  display: flex; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--line-paper);
  padding-top: 18px;
}
.price-amount b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 3vw, 46px); line-height: 1; letter-spacing: -.02em;
  color: #fff;
}
.price-amount span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-navy); }
.price-includes { display: flex; flex-wrap: wrap; gap: 8px; }
.price-includes li {
  border: 1px solid var(--line-paper);
  padding: 7px 13px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-on-navy);
}
.is-featured .price-includes li { border-color: rgba(6, 214, 221, .45); }
.price-cta { margin-top: auto; align-self: flex-start; } /* usar junto a .nav-cta */

/* ==========================================================================
   7 · INDUSTRY BLOCK — kicker + claim + mini-caso (marca cliente) + chips
   Sobre papel; el mini-caso es un panel navy para que el .cs-mark viva
   en su superficie correcta.
   ========================================================================== */
.industry-block {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 4vw, 64px);
  border-top: 1px solid var(--line-ink);
  padding: clamp(38px, 5vw, 68px) 0;
}
.industry-block:last-child { border-bottom: 1px solid var(--line-ink); }
.industry-head .section-kicker { margin-bottom: 18px; }
.industry-claim {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: 14px;
}
.industry-claim em { font-style: italic; font-weight: 600; color: var(--ink-soft); }
.industry-copy { color: var(--ink-soft); max-width: 500px; }
.industry-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.industry-services li {
  border: 1px solid var(--line-ink);
  padding: 7px 13px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink);
}
.industry-case {
  align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--navy);
  color: var(--text-on-navy);
  padding: clamp(22px, 2.6vw, 36px);
}
.industry-case-label {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted-on-navy);
}
.industry-case .cs-mark { font-size: 19px; }
.industry-case-text { color: var(--muted-on-navy); font-size: 14px; line-height: 1.75; }

/* ==========================================================================
   8 · CTA BAND — banda final de conversión (reutiliza .contact-circle del
   home; puede contener el .site-footer al final, como en index.html)
   ========================================================================== */
.cta-band {
  background: var(--navy);
  color: var(--text-on-navy);
  padding: clamp(70px, 9vw, 130px) var(--pad-x);
}
.cta-band:has(.site-footer) { padding-bottom: 40px; }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(26px, 4vw, 60px);
  flex-wrap: wrap;
}
.cta-band-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.cta-band h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: .98; letter-spacing: -.02em; text-transform: uppercase;
  color: #fff;
}
.cta-band-mail { margin-top: 22px; font-size: 14px; color: var(--muted-on-navy); }
.cta-band-mail a { color: var(--text-on-navy); box-shadow: inset 0 -1px var(--cyan); padding-bottom: 2px; }
.cta-band-mail a:hover { color: var(--cyan); }

/* ==========================================================================
   RESPONSIVE (mismos cortes que system.css: 1080 / 860 / 560)
   ========================================================================== */
@media (max-width: 1080px) {
  .industry-block { grid-template-columns: 1fr; }
  .industry-case { width: 100%; }
}

@media (max-width: 860px) {
  .page-hero { min-height: clamp(440px, 58svh, 640px); }
  .step-flow-rail { left: 22px; }
  .step-flow-item { grid-template-columns: 58px 1fr; }
  .step-flow-num { font-size: 21px; padding: 6px 0 10px; }
  .cta-band h2 { font-size: clamp(40px, 11vw, 64px); }
}

@media (max-width: 560px) {
  .page-hero h1 { font-size: clamp(38px, 11.4vw, 52px); }
  /* system.css colapsa TODO .nav-cta a solo-icono en móvil (pensado para el
     nav). Los CTA dentro de la página conservan su etiqueta. */
  .page-hero-cta .nav-cta span,
  .price-cta span,
  .cta-band .nav-cta span { display: inline; }
  .page-hero-cta .nav-cta,
  .price-cta,
  .cta-band .nav-cta { padding: 13px 20px; }
  .page-hero--paper .outline-line { -webkit-text-stroke-width: 1.5px; }
  .client-strip { gap: 16px 26px; padding-inline: 22px; }
  .cs-mark { font-size: 15px; }
  .client-strip-track { gap: 26px; padding-left: 26px; }
  .industry-case .cs-mark { font-size: 16px; }
  .price-amount b { font-size: 34px; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO — todo estático y visible
   (el riel del .step-flow ya queda dibujado: su estado natural es clip 0;
   motion.js ni siquiera arranca con reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .client-strip-track { animation: none; }
  .faq-system .faq-answer { transition: none; }
  .faq-system .faq-item button::after { transition: none; }
  .text-link, .faq-system .faq-item button { transition: none; }
}