/* ============================================================================
   SPICA STUDIO · r14 · CHROME COMPARTIDO (1-sep-2026)
   Header con mega menu (Solutions en 3 grupos y 7 iconos, Resources como
   boton con About y Blog), la capa movil por grupos que monta js/nav-mobile.js,
   y el footer nuevo con cuatro columnas y las dos pildoras CTA.

   Contrato (SPEC-UXUI-R14 2.9, 3.3, CROSS-UXUI H2, PLAN-CONSOLIDADO-R14 3.3):
   - Carga en las 13 paginas JUSTO despues de sections.css y lleva sus propias
     media queries: ninguna pagina depende de responsive.css para el cromo.
   - Todo sale de css/tokens.css. Los tres -vivid SOLO en las pildoras.
   - Nada de lo aprobado se recolorea: la pastilla Liquid Glass, la marca, el
     CTA negro y el nav que nunca se encoge siguen en sections.css tal cual.
   - El markup es el de snippets/header.html y snippets/footer.html, byte a
     byte. aria-current, la marca del Home y las puertas fuera del Home las
     resuelve js/nav-mega.js en runtime.
   Especificidad: sections.css viste `.site-nav a` (tamano, peso, hover, color
   en --dark) y responsive.css le pone min-height 44 en tactil. Los items del
   panel tambien son `a` dentro de `.site-nav`, asi que aqui se escriben con
   `.site-nav .mega__item` (y `.site-header .site-nav ...` donde hay que ganar
   a la variante oscura) para que el panel de papel no herede el nav.
   ========================================================================== */

/* ============================================================================
   1 · NAV: items, enlaces y chevrones
   ========================================================================== */
/* la fila del header es la caja de posicion del panel (ya es relative en
   sections.css); nav e items quedan estaticos para que el panel Solutions no
   se ancle al item. Los dos se estiran al alto de la fila: asi el panel
   Resources, que SI se ancla a su item, arranca a la misma altura.
   Selector de UNA clase a proposito: base.css apaga el nav por debajo de 768
   con `.site-header .site-nav { display: none }` (dos clases) y esta hoja
   carga despues; con dos clases aqui, el `display: flex` lo pisaba y el nav
   en linea se quedaba encendido encima del boton del menu (medido a 375). */
.site-nav {
  position: static;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 1.6rem;
}
.site-nav__item {
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 0.15rem;
}
.site-nav__item--resources { position: relative; }

/* el enlace y el boton de Resources comparten la pinta del nav aprobado */
.site-nav .site-nav__link {
  font-size: 0.92rem;
  font-weight: 480;
  position: relative;
  transition:
    color var(--dur-state) var(--ease),
    text-shadow var(--dur-state) var(--ease);
}
.site-nav .site-nav__link--btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 480;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-nav .site-nav__link:hover,
.site-nav .site-nav__link:focus-visible,
.site-nav__item.is-open > .site-nav__link {
  color: var(--violet);
  text-shadow: 0 0 14px color-mix(in srgb, var(--violet) 30%, transparent);
}
.site-header--dark .site-nav .site-nav__link { color: var(--paper); }
.site-header--dark .site-nav .site-nav__link:hover,
.site-header--dark .site-nav .site-nav__link:focus-visible,
.site-header--dark .site-nav__item.is-open > .site-nav__link {
  color: var(--violet-bright);
  text-shadow: 0 0 16px color-mix(in srgb, var(--violet-bright) 45%, transparent);
}
@media (hover: none) {
  .site-nav .site-nav__link:hover { color: inherit; text-shadow: none; }
  .site-header--dark .site-nav .site-nav__link:hover { color: var(--paper); }
}

/* chevron de Solutions: boton aparte, 28 visibles dentro de 44 tactiles */
.site-nav__more {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: inherit;
  transition: color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.site-nav__more::before { content: ""; position: absolute; inset: -8px; }
.site-nav__more svg { width: 10px; height: 10px; transition: transform var(--dur-state) var(--ease); }
.site-nav__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__more:hover,
.site-nav__more:focus-visible,
.site-nav__item.is-open > .site-nav__more { color: var(--violet); }
.site-header--dark .site-nav__more { color: var(--paper); }
.site-header--dark .site-nav__more:hover,
.site-header--dark .site-nav__more:focus-visible,
.site-header--dark .site-nav__item.is-open > .site-nav__more { color: var(--violet-bright); }
/* chevron de Resources: vive dentro del mismo boton (CROSS-UXUI H2) */
.site-nav__chev { width: 10px; height: 10px; flex: none; transition: transform var(--dur-state) var(--ease); }
.site-nav__link--btn[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }

/* ============================================================================
   2 · EL PANEL (Solutions con el ancho del shell, Resources compacto)
   ========================================================================== */
.mega {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(var(--shell), 100vw - var(--gutter) * 2);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.8rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem;
  opacity: 0;
  pointer-events: auto;
  z-index: 2;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
/* puente invisible entre la fila y el panel: el cursor no lo cierra al bajar */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }
.mega[hidden] { display: none; }
.mega.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
/* Resources cuelga de su item: el item se estira al contenido de la fila y la
   fila lleva 0.45rem de padding, asi que 0.55 + 0.45 deja los dos paneles a
   la misma altura */
.mega--resources {
  top: calc(100% + 1rem);
  left: 50%;
  width: 22rem;
  grid-template-columns: 1fr;
}

.mega__group { --mega-accent: var(--violet); display: grid; align-content: start; }
.mega__group--systems { --mega-accent: var(--teal); }
.mega__group--strategy { --mega-accent: var(--amber-text); }
.mega__group-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mega-accent);
  padding: 0 0.65rem;
}
.mega__group-label::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin: 0.55rem 0 0.4rem;
}

/* item: gana a `.site-nav a` de sections.css (tamano, peso, hover) y a la
   variante --dark (color papel), que no deben entrar en un panel de papel */
.site-nav .mega__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 430;
  min-height: 0;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.site-header .site-nav .mega__item,
.site-header--dark .site-nav .mega__item { color: var(--ink); text-shadow: none; }
.site-header .site-nav .mega__item:hover,
.site-header .site-nav .mega__item:focus-visible {
  background: var(--paper);
  color: var(--ink);
  text-shadow: none;
}
.site-nav .mega__item:focus-visible { outline-offset: -2px; }
.mega__item:hover .mega__name,
.mega__item:focus-visible .mega__name { color: var(--mega-accent); }
.mega__item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mega-accent); }
.mega__ico { width: 28px; height: 28px; color: var(--mega-accent); }
.mega__ico svg { width: 24px; height: 24px; margin: 2px; overflow: visible; }
.mega__text { display: grid; min-width: 0; }
.mega__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  transition: color var(--dur-micro) var(--ease);
}
.mega__name .chip { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
.mega__line {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 26ch;
  margin-top: 0.15rem;
}
.site-nav .mega__all {
  margin-top: auto;
  padding: 0.6rem 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 0;
  border-radius: var(--radius-sm);
}
.site-header .site-nav .mega__all,
.site-header--dark .site-nav .mega__all { color: var(--ink); text-shadow: none; }
.site-header .site-nav .mega__all:hover,
.site-header .site-nav .mega__all:focus-visible { color: var(--mega-accent); text-shadow: none; }
.mega__all svg { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease); }
.mega__all:hover svg { transform: translateX(3px); }

/* ---- los 7 + 2 iconos: un pase por hover, nunca un loop (SPEC-UXUI 2.5) ---- */
.ico-draw { stroke-dasharray: 48; stroke-dashoffset: 0; }
.mega__item:hover .ico-draw,
.mega__item:focus-visible .ico-draw { animation: ico-draw 0.55s var(--ease-out); }
@keyframes ico-draw { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
.ico-dot { transition: transform 0.45s var(--ease-out); transform-origin: center; }
.mega__item:hover .ico-dot--travel,
.mega__item:focus-visible .ico-dot--travel { transform: translate(-7px, 7px); }
.mega__item:hover .ico-dot--1, .mega__item:focus-visible .ico-dot--1 { animation: ico-bob 0.5s var(--ease-out) 0s; }
.mega__item:hover .ico-dot--2, .mega__item:focus-visible .ico-dot--2 { animation: ico-bob 0.5s var(--ease-out) 0.08s; }
.mega__item:hover .ico-dot--3, .mega__item:focus-visible .ico-dot--3 { animation: ico-bob 0.5s var(--ease-out) 0.16s; }
@keyframes ico-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.ico-play { transform-origin: center; transition: transform 0.4s var(--ease-spring); }
.mega__item:hover .ico-play, .mega__item:focus-visible .ico-play { transform: scale(1.15); }
.ico-bkt { transition: transform 0.4s var(--ease-out); }
.mega__item:hover .ico-bkt--l, .mega__item:focus-visible .ico-bkt--l { transform: translateX(-1px); }
.mega__item:hover .ico-bkt--r, .mega__item:focus-visible .ico-bkt--r { transform: translateX(1px); }
.ico-flower { transform-origin: center; transition: transform 0.5s var(--ease-out); }
.mega__item:hover .ico-flower, .mega__item:focus-visible .ico-flower { transform: rotate(18deg); }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega *, .site-nav__more svg, .site-nav__chev { animation: none !important; transition: none !important; }
}

/* ---- iPad (768 a 1080): dos columnas, Strategy abajo, sin lineas ---------- */
@media (min-width: 768px) and (max-width: 1080px) {
  .mega { grid-template-columns: 1fr 1fr; padding: 1.2rem 1.2rem 1.1rem; }
  .mega--resources { grid-template-columns: 1fr; }
  /* Strategy baja a una fila entera: la cabecera cruza las dos columnas y
     debajo van su item y "All seven solutions" lado a lado (SPEC-UXUI 2.3) */
  .mega__group--strategy { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .mega__group--strategy .mega__group-label { grid-column: 1 / -1; }
  .mega__group--strategy .mega__all { margin-top: 0; }
  .mega__line { display: none; }
  .mega__ico { width: 24px; height: 24px; }
  .mega__ico svg { margin: 0; }
  .site-nav .mega__item { grid-template-columns: 24px 1fr; }
}

/* ---- sin JavaScript (SPEC-UXUI 9.3 + CROSS-UXUI H2) ------------------------
   Los chevrones no existen y Resources se abre en linea como dos enlaces:
   el nav lee Solutions · About · Blog · How you start · Contact. El [hidden]
   de base.css lleva !important, por eso aqui tambien. */
html:not(.js) .site-nav__more,
html:not(.js) .site-nav__link--btn { display: none; }
html:not(.js) .site-nav__item--resources .mega {
  display: flex !important;
  position: static;
  transform: none;
  opacity: 1;
  width: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
html:not(.js) .site-nav__item--resources .mega::before { content: none; }
html:not(.js) .site-nav__item--resources .mega__group { display: flex; gap: 1.4rem; }
html:not(.js) .site-nav__item--resources .mega__group-label,
html:not(.js) .site-nav__item--resources .mega__ico,
html:not(.js) .site-nav__item--resources .mega__line { display: none; }
html:not(.js) .site-nav .mega__item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.92rem;
}
html:not(.js) .site-nav .mega__item .mega__name { font-size: 0.92rem; font-weight: 480; line-height: inherit; }
html:not(.js) .site-header--dark .site-nav .mega__item { color: var(--paper); }

/* ============================================================================
   3 · CAPA MOVIL POR GRUPOS (<768, la monta js/nav-mobile.js)
   Filas de grupo de 56px como los enlaces; items de segundo nivel de 48px con
   sangria y Geist 500. La apertura es grid-template-rows 0fr a 1fr; cerrado,
   el interior queda visibility:hidden para que el ciclo de foco lo salte.
   ========================================================================== */
.nav-mobile__group { border-bottom: 1px solid var(--line); }
.nav-mobile__group-btn {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-align: left;
}
.nav-mobile__group-btn:active { color: var(--violet); }
.nav-mobile__group-btn svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur-state) var(--ease); }
.nav-mobile__group-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mobile__group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.nav-mobile__group-panel.is-open { grid-template-rows: 1fr; }
.nav-mobile__group-panel > div {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.nav-mobile__group-panel.is-open > div { visibility: visible; transition-delay: 0s; }
.nav-mobile__group-panel a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding-left: 1rem;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--ink);
}
.nav-mobile__group-panel a:active { color: var(--violet); }
.nav-mobile__group-panel a .chip { font-size: 0.6rem; padding: 0.18rem 0.45rem; }
.nav-mobile__group-panel > div > :last-child { margin-bottom: 0.5rem; }
.nav-mobile__group-label {
  padding: 0.6rem 0 0.2rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================================
   4 · FOOTER: columnas, pildoras, foco sobre tinta (SPEC-UXUI 3)
   Partners, footer__show y la linea legal siguen vestidos por sections.css.
   ========================================================================== */
/* r14 pasada de ritmo (REVISION-VISUAL 2.1): con las cinco columnas iguales, la
   de Solutions medía 189px a 1440 y "2.1 CRM Roof Intelligent" mas su chip
   "US only" pedian 223: el chip caia solo a una segunda linea y abria 26px de
   hueco que las otras seis lineas no tenian. La columna de Solutions, que es la
   unica con siete items y la unica con chip, se lleva 2,9 de los 12 y la marca
   cede 0,9 (su parrafo ya iba topado a 30ch). Desde ~1210px la linea entra
   entera; por debajo varios nombres largos ya se parten igual, y a 1081 el
   footer pasa a dos columnas con filas de 44px, donde no hay hueco. */
.footer .footer__grid--cols {
  grid-template-columns: minmax(0, 3.1fr) minmax(0, 2.9fr) repeat(3, minmax(0, 2fr));
  gap: 2.5rem;
}
.footer__col { display: grid; gap: 0.6rem; align-content: start; }
.footer__col-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 460;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* r14 QA final P1-1: 0.38 daba 3.37:1 sobre --ink (9.9px, umbral 4.5).
     A 0.55, rgb(143,142,140), 5.77:1 medido. Mismo valor que los otros dos
     rotulos chicos del footer (sections.css). */
  color: rgba(246, 245, 241, 0.55);
  margin-bottom: 0.3rem;
}
.footer__col a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  /* r14 P1-4: la columna mide 135px a 1081 y 165px a 1280 (grilla 4fr + 4 x 2fr),
     y "1.2 Design & Development" a 0.95rem no cabe en una linea: el nombre se
     parte en dos lineas y solo el chip queda entero (baja solo a la siguiente) */
  white-space: normal;
  overflow-wrap: anywhere;
  color: rgba(246, 245, 241, 0.72);
  font-size: 0.95rem;
  width: fit-content;
  transition: color var(--dur-micro) var(--ease);
}
.footer__col a:hover { color: var(--violet-bright); }
.footer__col a[aria-current="page"] { color: var(--paper); }
.footer__col .footer__col-all {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.85);
}
/* el chip US only sobre tinta: borde y texto violeta claro, sin fondo */
.footer__col .chip--us {
  border-color: var(--violet-bright);
  color: var(--violet-bright);
  background: transparent;
  font-size: 0.58rem;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

/* las dos puertas: pildoras de ancho completo, lado a lado desde 1081 */
.footer__doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: clamp(2rem, 4vw, 3rem) auto clamp(1.6rem, 3vw, 2.2rem);
}
@media (min-width: 1081px) {
  .footer__doors { grid-template-columns: 1fr 1fr; }
}
.footer__door {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 5.5rem;
  padding: 0 clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
}
.footer__door--plan { background: var(--violet-vivid); }
.footer__door--demo { background: var(--teal-vivid); }
.footer__door span { grid-column: 1; }
.footer__door .btn__arrow {
  grid-column: 2;
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--paper);
  transition: transform var(--dur-state) var(--ease);
}
.footer__door .btn__arrow svg { width: 100%; height: 100%; }
.footer__door:hover { transform: translateY(-2px); }
.footer__door--plan:hover { background: var(--violet); }
.footer__door--demo:hover { background: var(--teal); }
.footer__door:hover .btn__arrow { transform: translate(3px, -3px); }
.footer__door:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }
@media (hover: none) {
  .footer__door:hover { transform: none; }
  .footer__door--plan:hover { background: var(--violet-vivid); }
  .footer__door--demo:hover { background: var(--teal-vivid); }
  .footer__door:hover .btn__arrow { transform: none; }
  .footer__door:active { transform: scale(0.985); }
  .footer__col a:hover { color: rgba(246, 245, 241, 0.72); }
}
/* el outline violeta del sistema no se ve sobre tinta */
.footer :focus-visible { outline-color: var(--violet-bright); }
.footer .footer__door:focus-visible { outline-color: var(--paper); }

/* ---- responsive del footer (SPEC-UXUI 3.4) ------------------------------- */
@media (max-width: 1080px) {
  .footer .footer__grid--cols { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { gap: 0; }
  .footer__col a { display: flex; min-height: 44px; }
  .footer__col .footer__col-all { margin-top: 0.2rem; }
  /* r14 P2-2: piso de 12px de la mono en tactil (regla r6 de tokens.css); los
     rotulos nuevos y el chip no heredaban el escalon de responsive.css */
  .footer__col-label { font-size: 0.75rem; }
  .footer__col .chip--us { font-size: 0.75rem; }
  .nav-mobile__group-panel a .chip { font-size: 0.75rem; }
}
@media (max-width: 767px) {
  .footer__door { min-height: 4.5rem; font-size: 0.74rem; }
}
@media (max-width: 430px) {
  .footer .footer__grid--cols { grid-template-columns: 1fr; gap: 1.6rem; }
}