/* ============================================================
   Crece+ — Componentes
   Orden: chrome (nav, loader, flotantes) → contenido → footer
   ============================================================ */

/* ---------- Loader ----------------------------------------- */
/* Pantalla de entrada muy breve. Se retira en cuanto la
   tipografía y el hero están listos; nunca bloquea el scroll
   más de ~900ms. */
.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 520ms var(--ease-out), visibility 520ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: var(--tr-h1);
}
.loader__bar {
  margin-top: var(--s-5);
  width: min(180px, 40vw); height: 1px;
  background: var(--line-strong);
  overflow: hidden;
}
.loader__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--sheen);
  transform: translateX(-100%);
  animation: loaderSweep 900ms var(--ease-soft) infinite;
}
@keyframes loaderSweep { to { transform: translateX(100%); } }

/* ---------- Nav: capa translúcida flotante ------------------ */
/* El contenido pasa por debajo. No es una barra opaca que
   se come una franja fija de la pantalla. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Sólo materializa el cristal cuando ya hay contenido debajo
   con el que solaparse. Arriba del todo el hero respira solo. */
.nav.is-stuck {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 var(--glass-edge) inset;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  height: 4.75rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 1.3125rem; font-weight: 600;
  letter-spacing: -0.03em;
}
/* El «+» de la marca: mismo tratamiento de canto que el botón de
   metal líquido —cápsula de 1px con reflejo metálico— y el glifo en
   el mismo marino que el texto, no en dorado.

   El anillo se hace con un degradado recortado a la franja del
   borde (mask content-box + exclude): así el interior queda
   transparente y funciona igual sobre el fondo de la página que
   sobre el cristal de la barra, que es translúcido.

   El movimiento es un barrido del degradado, no una rotación: se
   anima background-position, que va en todos los navegadores, en
   lugar de un ángulo cónico, que necesita @property. Los extremos
   del degradado son del mismo negro para que el bucle no dé un
   salto visible. */
.brand__plus {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.14em;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1;
  /* El signo, ligeramente subido: centrado óptico dentro del anillo. */
  text-indent: 0.01em;
}
.brand__plus::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 1px en la barra (21px de fuente) y proporcional cuando la marca
     crece —el mark del loader ronda los 56px—, para que el anillo no
     se quede como un pelo en tamaño grande. */
  padding: max(1px, 0.05em);
  background: linear-gradient(115deg,
      #202020 0%, #9AA0A6 16%, #FFFFFF 28%, #6E7276 40%,
      #202020 54%, #C9CED4 68%, #FFFFFF 79%, #55585C 90%, #202020 100%);
  background-size: 320% 320%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: brandRingSweep 3.6s linear infinite;
  pointer-events: none;
}
@keyframes brandRingSweep {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}
/* Al pasar por la marca, el reflejo se acelera — igual que el shader
   del botón sube de velocidad en hover. */
.brand:hover .brand__plus::before { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  /* El anillo se queda, el barrido se detiene. */
  .brand__plus::before { animation: none; background-position: 30% 50%; }
}

.nav__links { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  position: relative;
  font-size: var(--t-small);
  color: var(--text-2);
  padding-block: var(--s-2);
  transition: color var(--d-fast) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

/* .btn declara display:inline-flex más abajo en esta hoja, así que
   ocultar la CTA necesita un selector más específico que .btn.
   En móvil la CTA vive dentro de la sheet: dos botones dorados en
   la barra sería competir consigo mismo. */
.nav .nav__cta { display: none; }
@media (min-width: 1040px) { .nav .nav__cta { display: inline-flex; } }
@media (max-width: 1039px) { .nav__links { display: none; } }

/* Botón hamburguesa: dos líneas que se cruzan */
.burger {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;   /* área táctil ≥44px */
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform var(--d-base) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Sheet de navegación móvil ---------------------- */
/* Entra y sale por el mismo camino (arriba), anclada al botón
   que la abrió vía transform-origin. Arrastrable hacia arriba
   para cerrar: la posición la controla spring.js. */
.sheet-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-sheet);
  background: rgba(23,32,51,.34);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--ease-out), visibility var(--d-base);
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-sheet) + 1);
  padding: 6rem var(--gutter) var(--s-7);
  background: var(--glass-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  touch-action: none;             /* el drag lo manejamos nosotros */
}
.sheet.is-open { visibility: visible; }
.sheet__link {
  display: block;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--tr-h2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: color var(--d-fast) var(--ease-out), padding-left var(--d-base) var(--ease-out);
}
.sheet__link:active { color: var(--accent); }
.sheet__handle {
  width: 44px; height: 4px; border-radius: var(--radius-pill);
  background: var(--line-strong);
  margin: var(--s-6) auto 0;
}

/* ---------- Botones --------------------------------------- */
/* El feedback vive en :active (pointer-down), no al soltar. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-height: 2.875rem;
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--t-small); font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--d-press) var(--ease-out),
    background var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(0.972); }

.btn--primary {
  background: var(--primary-deep); color: var(--white);
  box-shadow: 0 10px 26px -14px rgba(29, 78, 216, .55);
}
.btn--primary:hover { background: #1A45C0; box-shadow: 0 16px 34px -14px rgba(29, 78, 216, .65); }

/* Único acento cálido del sitio: el CTA que convierte. */
/* El dorado suave (#B88935) sobre blanco no da contraste con
   texto oscuro: el rótulo va en blanco. */
.btn--gold {
  background: linear-gradient(135deg, #C4953F, var(--gold-500));
  color: var(--navy-900);
  font-weight: 600;
  box-shadow: 0 10px 28px -14px rgba(184, 137, 53, .6);
}
.btn--gold:hover { filter: brightness(1.04); box-shadow: 0 16px 36px -14px rgba(184, 137, 53, .75); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--white); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--tint); }

.btn--lg { min-height: 3.375rem; padding-inline: 2rem; font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; }

/* Flecha que apunta en la dirección del gesto */
.btn__arrow { transition: transform var(--d-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Hero ------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: flex-end;
  /* Antes 8rem: la órbita ocupa ahora parte de ese aire superior. */
  padding-top: 6.5rem;
  padding-bottom: clamp(3rem, 7vw, var(--s-9));
  overflow: hidden;
  isolation: isolate;
}
/* Capa de media: aquí va el video o la foto editorial.
   El fallback es un degradado direccional que insinúa el
   skyline de Monterrey con la Sierra Madre al fondo. */
.hero__media {
  position: absolute; inset: -6% 0 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(184, 137, 53, .10), transparent 58%),
    radial-gradient(90% 70% at 12% 96%, rgba(37, 99, 235, .12), transparent 62%),
    linear-gradient(180deg, var(--white) 0%, var(--blue-050) 54%, var(--bg) 100%);
  will-change: transform;   /* parallax suave desde JS */
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;             /* el texto manda; la imagen ambienta */
}
/* Scrim inferior: garantiza contraste del texto sobre cualquier
   fotografía que se coloque después. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(248,250,252,.58) 0%, rgba(248,250,252,.30) 34%, rgba(248,250,252,.90) 100%);
}
.hero__copy { grid-column: 1 / span 8; }
.hero__meta { grid-column: 10 / span 3; align-self: end; text-align: right; }
@media (max-width: 1039px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__meta { grid-column: 1 / -1; text-align: left; margin-top: var(--s-6); }
}
/* El ancho lo fija cada línea del título, no el contenedor. */
.hero__title { margin-bottom: var(--s-5); }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7);
}
.hero__scroll {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-8);
  font-size: var(--t-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--text-3);
}
.hero__scroll i {
  width: 1px; height: 2.5rem; background: var(--line-strong);
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--primary);
  animation: scrollHint 2.4s var(--ease-soft) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Métricas del hero */
.stat { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.stat + .stat { margin-top: var(--s-5); }
.stat__num {
  display: block;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 600; letter-spacing: var(--tr-h2); line-height: 1;
  font-variant-numeric: tabular-nums;  /* no baila al contar */
}
.stat__label { font-size: var(--t-micro); color: var(--text-3); letter-spacing: .04em; }

/* ---------- Pilares (¿Por qué Crece+?) --------------------- */
.pillars { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--white);
  padding: var(--s-6) var(--s-5) var(--s-7);
  transition: background var(--d-base) var(--ease-out);
}
.pillar:hover { background: var(--surface-hover); }
.pillar__icon { color: var(--primary); margin-bottom: var(--s-5); }
.pillar h3 { margin-bottom: var(--s-2); }
.pillar p { font-size: var(--t-small); color: var(--text-2); margin: 0; }

/* ---------- Timeline de estrategia ------------------------- */
.timeline { position: relative; }
.timeline__track {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
/* Línea de progreso: crece con el scroll (timeline.js) */
.timeline__progress {
  position: absolute; left: 0; top: 0; width: 1px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  height: var(--progress, 0%);
  transition: height 120ms linear;
}
.step {
  position: relative;
  padding: 0 0 var(--s-8) clamp(2.5rem, 5vw, 5rem);
}
.step:last-child { padding-bottom: 0; }
.step__dot {
  position: absolute; left: 0; top: .45rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  transform: translateX(-4px);
  transition: background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.step.is-in .step__dot {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--tint-strong);
}
.step__index {
  font-size: var(--t-micro); color: var(--text-3);
  letter-spacing: var(--tr-micro); text-transform: uppercase;
}
.step__row { display: flex; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-2); }
.step__icon { flex: none; color: var(--text-2); margin-top: 2px; }
.step h3 { margin-bottom: var(--s-1); }
.step p { color: var(--text-2); margin: 0; font-size: var(--t-small); }

/* ---------- Servicios ------------------------------------- */
.services { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  min-height: 15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition:
    transform var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    background var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out);
}
/* Luz que sigue al cursor: --mx/--my las escribe cards.js */
.service::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
              var(--tint-strong), transparent 70%);
  opacity: 0; transition: opacity var(--d-base) var(--ease-out);
  pointer-events: none;
}
.service:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.service:hover::before { opacity: 1; }
.service:active { transform: translateY(-1px) scale(.995); }
.service__num { font-size: var(--t-micro); color: var(--text-3); letter-spacing: var(--tr-micro); }
.service__icon { color: var(--primary); }
.service h3 { margin-top: auto; }
.service p { font-size: var(--t-small); color: var(--text-2); margin: 0; }
.service__more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-micro); color: var(--accent-text);
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Monterrey ------------------------------------- */
.mty { align-items: center; }
.mty__copy { grid-column: 1 / span 5; }
.mty__map  { grid-column: 7 / span 6; }
@media (max-width: 860px) {
  .mty__copy, .mty__map { grid-column: 1 / -1; }
  .mty__map { margin-top: var(--s-6); }
}
.map-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.map-frame svg { width: 100%; height: 100%; }
/* El embed llega con su color propio. Antes se invertía para
   integrarlo en el tema oscuro; con el tema claro basta con
   desaturarlo y aclararlo un punto para que no compita. */
.map-frame iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(.85) contrast(.95) brightness(1.04);
}
.map-frame__tag {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-micro); letter-spacing: .04em;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
}
.info-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.info-list li {
  display: flex; gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
}
.info-list dt, .info-list b { color: var(--text-3); min-width: 7.5rem; font-weight: 400; }

/* ---------- Testimonios: carrusel arrastrable -------------- */
/* La pista se mueve con transform desde JS (1:1 con el dedo,
   con proyección de momentum al soltar). CSS no la anima:
   una transición aquí impediría agarrarla en pleno vuelo. */
.carousel { position: relative; }
.carousel__viewport {
  overflow: hidden;
  /* Máscara de borde en lugar de un corte duro */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); /* el color da igual: sólo cuenta el alfa */
  cursor: grab;
  touch-action: pan-y;   /* el eje X es nuestro; el vertical del navegador */
}
.carousel__viewport.is-dragging { cursor: grabbing; }
.carousel__track {
  display: flex;
  gap: var(--s-4);
  padding-inline: 2px;
  will-change: transform;
  user-select: none;
}
.carousel__track > * { flex: 0 0 min(26rem, 82vw); }

.quote {
  display: flex; flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: 3px; color: var(--gold-500); }
.quote__text {
  font-size: var(--t-lead);
  line-height: 1.5; letter-spacing: -0.012em;
  color: var(--text);
  margin: 0; max-width: none;
}
.quote__who { display: flex; align-items: center; gap: var(--s-4); margin-top: auto; }
.quote__avatar {
  flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-050), var(--surface-2));
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: var(--t-small); font-weight: 600; letter-spacing: .02em;
  overflow: hidden;
}
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { font-weight: 600; font-size: var(--t-small); }
.quote__role { font-size: var(--t-micro); color: var(--text-3); }

.carousel__controls {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
}
.icon-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--tint); border-color: var(--primary); color: var(--primary-deep); }
.icon-btn:active { transform: scale(.92); }
.icon-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.carousel__dots { display: flex; gap: var(--s-2); margin-left: auto; }
/* La marca visible mide 22×2 px, pero el botón que se toca mide
   44 px de alto. Lo fino es la línea, no el objetivo. */
.carousel__dot {
  width: 22px; height: 2.75rem;
  border: 0; padding: 0;
  background: none; cursor: pointer;
  display: grid; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.carousel__dot::before {
  content: "";
  display: block; height: 2px; width: 100%;
  background: var(--line-strong);
  transition: background var(--d-base) var(--ease-out);
}
.carousel__dot.is-active::before { background: var(--primary); }
.carousel__dot:hover::before { background: var(--text-2); }

/* ---------- Portfolio ------------------------------------- */
/* minmax(0,1fr) — sin esto, las piezas altas ensanchan su columna
   y la asimetría deja de ser una decisión para ser un accidente. */
.work { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Ritmo asimétrico: dos piezas ocupan doble alto */
@media (min-width: 1100px) {
  .work__item:nth-child(1),
  .work__item:nth-child(6) { grid-row: span 2; }
  /* Las piezas altas ocupan dos filas: la altura la marca el grid,
     no una proporción fija que competiría con él. */
  .work__item:nth-child(1) .work__frame,
  .work__item:nth-child(6) .work__frame { aspect-ratio: auto; height: 100%; }
}
.work__item { position: relative; }
.work__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.work__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--d-slow) var(--ease-out), filter var(--d-slow) var(--ease-out);
}
.work__item:hover .work__frame img { transform: scale(1.05); }
.work__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s-1);
  padding: var(--s-5);
  background: linear-gradient(0deg, var(--overlay), rgba(23,32,51,.05) 62%);
  color: var(--on-overlay);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
}
.work__item:hover .work__overlay,
.work__item:focus-within .work__overlay { opacity: 1; }
.work__cat { font-size: var(--t-micro); color: var(--gold-400); letter-spacing: var(--tr-micro); text-transform: uppercase; }
.work__title { color: var(--on-overlay); }
.work__title { font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--tr-h3); }
.work__link { position: absolute; inset: 0; }  /* toda la tarjeta es clicable */
.work__result { font-size: var(--t-small); color: rgba(255,255,255,.82); }

/* ---------- Formulario ------------------------------------ */
.contact { align-items: start; }
.contact__aside { grid-column: 1 / span 4; position: sticky; top: 7rem; }
.contact__form  { grid-column: 6 / span 7; }
@media (max-width: 960px) {
  .contact__aside, .contact__form { grid-column: 1 / -1; position: static; }
  .contact__form { margin-top: var(--s-7); }
}
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-2); }
.field label {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro); text-transform: uppercase;
  color: var(--text-3);
}
.field input, .field textarea {
  width: 100%;
  padding: 0.9375rem var(--s-4);
  background: var(--white);
  border: 1px solid var(--line-field);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field textarea:hover { border-color: var(--text-2); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--tint-strong);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }

/* Validación en línea: el error aparece bajo el campo al salir
   de él, y desaparece en cuanto se corrige. Nunca sólo al enviar. */
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--danger); }
.field__error {
  font-size: var(--t-micro); color: var(--danger);
  min-height: 1rem;
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.field[data-invalid="true"] .field__error { opacity: 1; transform: none; }
.field__count { font-size: var(--t-micro); color: var(--text-3); text-align: right; }

.form__foot { display: flex; flex-direction: column; gap: var(--s-4); }
.form__note {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-micro); color: var(--text-3);
}
/* Estado del envío: status / éxito / error, siempre anunciado */
.form__status {
  font-size: var(--t-small);
  padding: var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status[data-kind="ok"]  { border-color: rgba(21,127,82,.45);  color: var(--success); background: #F1FAF5; }
.form__status[data-kind="err"] { border-color: rgba(194,69,60,.45);  color: var(--danger);  background: #FDF3F2; }

/* Spinner del botón durante el envío */
.btn.is-busy .btn__label { opacity: .5; }
.btn__spin {
  display: none;
  width: 15px; height: 15px;
  border: 1.5px solid rgba(23,32,51,.22);
  border-top-color: var(--navy-900);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.is-busy .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Honeypot anti-spam: invisible para personas, tentador para bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Footer ---------------------------------------- */
.footer { background: var(--white); border-top: 1px solid var(--line); }
.footer__top { padding-block: clamp(3rem, 6vw, var(--s-9)); }
.footer__brand { grid-column: 1 / span 4; }
.footer__nav   { grid-column: 6 / span 3; }
.footer__contact { grid-column: 10 / span 3; }
@media (max-width: 860px) {
  .footer__brand, .footer__nav, .footer__contact { grid-column: 1 / -1; }
  .footer__nav, .footer__contact { margin-top: var(--s-6); }
}
.footer h4 {
  font-size: var(--t-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s-4); font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer a { font-size: var(--t-small); color: var(--text-2); transition: color var(--d-fast) var(--ease-out); }
/* La regla de arriba (.footer a = clase + tipo) le ganaba por
   especificidad a .brand y dejaba el logotipo del footer a 14px, la
   mitad que en la barra. El logotipo no es un enlace de lista. */
.footer .brand { font-size: 1.3125rem; color: var(--text); }
.footer a:hover { color: var(--text); }
.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a {
  /* 44px: el mínimo táctil, no 40 — un icono redondo pequeño es
     justo lo que se falla con el pulgar. */
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-2);
  transition: transform var(--d-press) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.socials a:hover { color: var(--primary-deep); border-color: var(--primary); background: var(--tint); }
.socials a:active { transform: scale(.92); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: center;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro); color: var(--text-3);
}

/* ---------- WhatsApp flotante ----------------------------- */
.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 3.5rem; padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--glass-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--t-small); font-weight: 500;
  transform: translate3d(0, 120%, 0);
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.whatsapp.is-in { transform: none; }
.whatsapp:active { transform: scale(.96); }
.whatsapp__icon { color: #128C5A; flex: none; } /* verde WhatsApp oscurecido para contrastar sobre el cristal claro */
.whatsapp__label { display: none; }
@media (min-width: 640px) { .whatsapp__label { display: inline; } }
@media (max-width: 639px) { .whatsapp { padding: 0; width: 3.5rem; justify-content: center; } }

/* ---------- Modal de detalle de servicio ------------------ */
/* Nace desde la tarjeta que lo abrió: transform-origin lo fija
   JS al centro del trigger, así la relación espacial es obvia. */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(23,32,51,.40);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--ease-out), visibility var(--d-base);
}
.modal-scrim.is-open { opacity: 1; visibility: visible; }
.modal {
  position: fixed; z-index: calc(var(--z-sheet) + 1);
  left: 50%; top: 50%;
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(84svh, 46rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: var(--glass-deep);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  /* El material llega: escala + blur juntos, no un fade plano. */
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  transition: transform var(--d-base) var(--ease-out),
              opacity var(--d-fast) var(--ease-out),
              visibility var(--d-base);
}
.modal.is-open { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--text-2);
  transition: transform var(--d-press) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.modal__close:hover { color: var(--text); }
.modal__close:active { transform: scale(.9); }
.modal__eyebrow { font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--accent-text); }
.modal h2 { margin: var(--s-2) 0 var(--s-4); }
.modal__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 720px) { .modal__grid { grid-template-columns: 1fr 1fr; } }
.modal__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.modal__list li {
  display: flex; gap: var(--s-3);
  font-size: var(--t-small); color: var(--text-2);
}
.modal__list li::before { content: "—"; color: var(--accent-text); flex: none; }
.modal__steps { counter-reset: st; }
.modal__steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); color: var(--text-3); }

body.is-locked { overflow: hidden; }

/* ---------- CTA de cierre --------------------------------- */
.cta-band {
  text-align: center;
  padding-block: clamp(4rem, 9vw, var(--s-10));
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(37,99,235,.10), transparent 70%),
    var(--bg-deep);
  border-block: 1px solid var(--line);
}
.cta-band .h1 { max-width: 24ch; margin-inline: auto; }
.cta-band .lead { margin: var(--s-5) auto 0; }

/* ---------- Página de servicios (detalle) ----------------- */
.page-head { padding-top: 9rem; padding-bottom: clamp(2.5rem, 5vw, var(--s-8)); }
.svc-detail { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, var(--s-9)); }
.svc-detail__head { grid-column: 1 / span 4; position: sticky; top: 7rem; align-self: start; }
.svc-detail__body { grid-column: 6 / span 7; }
@media (max-width: 960px) {
  .svc-detail__head, .svc-detail__body { grid-column: 1 / -1; position: static; }
  .svc-detail__body { margin-top: var(--s-5); }
}
.svc-detail__cols { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 700px) { .svc-detail__cols { grid-template-columns: 1fr 1fr; } }
.chip {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-micro); color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  margin: 0 var(--s-2) var(--s-2) 0;
}

/* Hero: la marca y el descriptor como dos alturas del mismo H1 */
.hero__brand { display: block; }
.hero__claim {
  display: block;
  margin-top: var(--s-3);
  max-width: 34ch;
  color: var(--text);
  font-weight: 500;   /* peso, no tamaño, para separar del display */
}

/* ============================================================
   Botón de metal líquido
   ------------------------------------------------------------
   Capas y valores tomados del componente React original sin
   cambiarlos: cara #202020→#000, rótulo #666666 con su sombra,
   radio de 100px, y los tres juegos de box-shadow (reposo,
   hover, pulsado).

   Las capas se inyectan dentro del <a>/<button> que ya existía
   (ver assets/js/liquid-metal-button.js), así que el orden en Z
   se resuelve con z-index sobre translateZ, no con un botón
   transparente flotando encima.

   Sólo se aplica cuando el JS ha podido montar el shader: sin
   WebGL, la clase .is-liquid no llega a añadirse y el botón se
   queda con el dorado de arriba.
   ============================================================ */

.btn--gold.is-liquid {
  /* El dorado se retira: a partir de aquí manda el shader. */
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  isolation: isolate;
  /* El press lo hacen las capas internas, no un escalado global. */
  transform: none !important;
}
.btn--gold.is-liquid:hover { filter: none; box-shadow: none; }

/* --- Capa 0: el bloque de sombras y el lienzo del shader ---- */
.btn--gold.is-liquid .lm__shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  transform: translateZ(0);
  transform-style: preserve-3d;
  z-index: 10;
  overflow: hidden;
  transition:
    transform .8s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
  /* Reposo */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.3),
    0 36px 14px 0 rgba(0,0,0,.02),
    0 20px 12px 0 rgba(0,0,0,.08),
    0 9px 9px 0 rgba(0,0,0,.12),
    0 2px 5px 0 rgba(0,0,0,.15);
}
.btn--gold.is-liquid:hover .lm__shadow {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 12px 6px 0 rgba(0,0,0,.05),
    0 8px 5px 0 rgba(0,0,0,.1),
    0 4px 4px 0 rgba(0,0,0,.15),
    0 1px 2px 0 rgba(0,0,0,.2);
}
.btn--gold.is-liquid.is-pressed .lm__shadow {
  transform: translateZ(0) translateY(1px) scale(.98);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 1px 2px 0 rgba(0,0,0,.3);
}

/* El <canvas> lo crea ShaderMount dentro de este span. */
.btn--gold.is-liquid .lm__shader {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.btn--gold.is-liquid .lm__shader canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: var(--radius-pill);
}

/* --- Capa 1: la cara, 2px por dentro ----------------------- */
.btn--gold.is-liquid .lm__face {
  position: absolute;
  inset: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
  transform: translateZ(10px);
  transform-style: preserve-3d;
  z-index: 20;
  pointer-events: none;
  transition:
    transform .8s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--gold.is-liquid.is-pressed .lm__face {
  transform: translateZ(10px) translateY(1px) scale(.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.4),
    inset 0 1px 2px rgba(0,0,0,.3);
}

/* --- Capa 2: el rótulo ------------------------------------- */
.btn--gold.is-liquid .lm__label {
  position: relative;
  z-index: 30;
  transform: translateZ(20px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Color y sombra del componente original, sin tocar. */
  color: #666666;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: all .8s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
}
/* La flecha y el spinner heredan el color del rótulo. */
.btn--gold.is-liquid .lm__label svg { color: inherit; }
.btn--gold.is-liquid .btn__spin {
  border-color: rgba(102,102,102,.35);
  border-top-color: #666666;
}

/* --- Ondas del click -------------------------------------- */
.btn--gold.is-liquid .lm__ripples {
  position: absolute;
  inset: 0;
  z-index: 35;
  border-radius: var(--radius-pill);
  overflow: hidden;
  pointer-events: none;
}
.btn--gold.is-liquid .lm__ripple {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  animation: lm-ripple .6s ease-out forwards;
  pointer-events: none;
}
@keyframes lm-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* El botón de bloque (sheet móvil) centra su rótulo. */
.btn--gold.is-liquid.btn--block .lm__label { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  /* El shader se monta a velocidad 0 desde JS: aquí sólo quitamos
     el rebote de las capas y la onda. El metal sigue viéndose. */
  .btn--gold.is-liquid .lm__shadow,
  .btn--gold.is-liquid .lm__face,
  .btn--gold.is-liquid .lm__label { transition-duration: 160ms; }
  .btn--gold.is-liquid.is-pressed .lm__shadow { transform: translateZ(0); }
  .btn--gold.is-liquid.is-pressed .lm__face { transform: translateZ(10px); }
  .btn--gold.is-liquid .lm__ripple { display: none; }
}

/* ============================================================
   Órbita de redes sociales (hero)
   ------------------------------------------------------------
   Port del componente `IntegrationsSection`.

   La clave de la geometría del original: el contenedor es 16:10
   y los anillos son CUADRADOS del ancho del contenedor. Es decir,
   los círculos son más altos que la caja y sobresalen por abajo,
   donde no se ven porque cada anillo sólo dibuja su arco superior.
   El logotipo se ancla al fondo del contenedor, que cae hacia el
   62 % de la altura del círculo — no en el centro ni en el borde.
   Sin eso, los iconos quedan en fila y el logo suelto debajo.

   Cambios respecto al original:

   · Cuatro redes en lugar de seis logos de herramientas: tres en
     el arco exterior (135°, 90°, 45°) y WhatsApp en el interior,
     que es la misma distribución que tenía, con dos huecos menos.
   · Cada tarjeta va dentro de su anillo, así los porcentajes se
     resuelven contra el círculo al que pertenece y el conjunto
     escala sin recolocar nada a mano.
   · Los aros sólo giran mientras hay cursor encima o foco dentro.
     En el original la animación corre siempre con opacidad 0:
     gasta frames de compositor para no verse.
   · Sin bloque de título, texto y botón: va dentro del hero, que
     ya tiene los tres. Duplicarlos competiría con el H1.
   ============================================================ */

.orbit {
  --orbit-w: clamp(15rem, 22vw, 20rem);
  --orbit-card: clamp(2.5rem, 3.2vw, 2.875rem);
  position: relative;
  width: var(--orbit-w);
  /* 16:10, como el aspect-16/10 del original. */
  height: calc(var(--orbit-w) * 0.625);
  flex: none;
}

/* Anillos: cuadrados del ancho del contenedor. Sobresalen por
   abajo a propósito. */
.orbit__ring,
.orbit__spin {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  border-top: 1px solid var(--line-strong);
}
/* El canto del aro que gira, también en carbón. */
.orbit__spin { border-top-color: rgba(44, 44, 44, .3); }
.orbit__ring--outer,
.orbit__spin--outer { left: 0; right: 0; top: 0; }
/* Ojo con el inset del anillo interior: `left/right` en % se
   resuelven contra el ANCHO del contenedor y `top` contra su ALTO,
   que aquí es 0.625× el ancho. Con `top: 21%` el círculo interior
   quedaba 6 % más arriba de lo debido —no concéntrico— y su
   tarjeta se solapaba con la de arriba del exterior. De ahí el
   calc sobre --orbit-w: las cuatro medidas en la misma unidad. */
.orbit__ring--inner,
.orbit__spin--inner {
  left: 21%;
  right: 21%;
  top: calc(var(--orbit-w) * 0.21);
}

.orbit__ring--outer,
.orbit__ring--inner {
  background: linear-gradient(180deg, rgba(23, 32, 51, .07), transparent 25%);
}

/* Aros que giran al pasar el cursor. El original los tintaba de lima
   y azul; aquí van en gris carbón translúcido, que se lee como una
   sombra que barre el círculo y no mete un color más en la paleta.
   Los dos comparten tono y se distinguen sólo por la opacidad. */
.orbit__spin {
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.orbit__spin--outer { background: linear-gradient(180deg, rgba(44, 44, 44, .16), transparent 25%); }
.orbit__spin--inner { background: linear-gradient(180deg, rgba(44, 44, 44, .22), transparent 25%); }
.orbit:hover .orbit__spin,
.orbit:focus-within .orbit__spin {
  opacity: 1;
  animation: orbitSpin 3.5s linear infinite;
}
.orbit:hover .orbit__spin--inner,
.orbit:focus-within .orbit__spin--inner { animation-direction: reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* --- Tarjetas de red -------------------------------------- */
.orbit__card {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--orbit-card);
  height: var(--orbit-card);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(23, 32, 51, .08), 0 6px 16px -8px rgba(23, 32, 51, .14);
  color: var(--text);
  transform: translate(-50%, -50%);
  transition:
    transform var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out);
}
.orbit__card svg { width: 44%; height: auto; }

/* En móvil la tarjeta baja a 36px para que la composición no se
   apelotone, y 36 se queda corto como objetivo táctil. Este
   pseudo-elemento estira el área de toque a 44px sin cambiar nada
   de lo que se ve. Los huecos entre tarjetas (21px en escritorio,
   14px en móvil) siguen siendo mayores que la ampliación, así que
   no se solapan entre sí. */
.orbit__card::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}

/* Al pasar el cursor cada red toma su color de marca; el resto del
   tiempo van en marino para no romper la paleta. */
.orbit__card:hover {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: currentColor;
  box-shadow: 0 2px 6px rgba(23, 32, 51, .1), 0 12px 24px -10px rgba(23, 32, 51, .22);
}
.orbit__card:active { transform: translate(-50%, -50%) scale(1.04); }
.orbit__card--ig:hover { color: #C13584; }
.orbit__card--fb:hover { color: #1877F2; }
.orbit__card--tt:hover { color: #010101; }
.orbit__card--wa:hover { color: #128C5A; }

/* Posiciones sobre la circunferencia del anillo que las contiene:
   135°, 90° y 45° en el exterior; 90° en el interior. */
.orbit__card--ig { left: 14.6%; top: 14.6%; }
.orbit__card--fb { left: 50%;   top: 0; }
.orbit__card--tt { left: 85.4%; top: 14.6%; }
.orbit__card--wa { left: 50%;   top: 0; }

/* --- Pieza central --------------------------------------- */
/* Anclada al fondo del contenedor 16:10, que es donde el original
   la pone: hacia el 62 % de la altura del círculo. */
.orbit__center {
  position: absolute;
  z-index: 4;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  padding: 4px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.orbit__mark {
  display: grid;
  place-items: center;
  width: calc(var(--orbit-card) * 1.34);
  height: calc(var(--orbit-card) * 1.34);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 20px -8px rgba(23, 32, 51, .25);
  font-size: calc(var(--orbit-card) * 0.62);
  line-height: 1;
  color: var(--text);
}
/* El «+» de la marca ya trae su anillo metálico animado. */
.orbit__mark .brand__plus { margin-left: 0; }

.orbit__label {
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--text-2);
}

/* --- Sitio dentro del hero -------------------------------- */
/* Ocupa el hueco de la parte alta del hero: el contenido va
   alineado abajo, así que arriba sobraba aire. */
.hero__orbit {
  grid-column: 1 / -1;
  justify-self: end;
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
@media (max-width: 1039px) {
  .hero__orbit { justify-self: center; }
}
@media (max-width: 520px) {
  /* En pantallas estrechas el hero ya va justo de alto: la órbita
     se reduce para no empujar el CTA fuera de la vista. */
  .orbit { --orbit-w: min(15rem, 74vw); --orbit-card: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Los aros se muestran, pero quietos: un giro continuo en el
     hero es exactamente el tipo de movimiento que molesta. */
  .orbit:hover .orbit__spin,
  .orbit:focus-within .orbit__spin { animation: none; }
  .orbit__card:hover { transform: translate(-50%, -50%); }
}