/* =====================================================================
   RANGO CREATIVE STUDIO — Home (index.php)
   Secciones: hero · nosotros · servicios · stats · portafolio · equipo
   · clientes · CTA final. Depende de tokens/base/components.
   Brutalista refinado: bordes gruesos, cero radios, sin blur, ruido bajo.
   ===================================================================== */

/* Compensa la cabecera sticky (5rem) al saltar a un ancla */
section[id] { scroll-margin-top: 6rem; }

/* ---- Encabezado de sección reutilizable ---- */
.sec-head { margin-bottom: var(--space-6); }
.sec-head__title { margin-top: var(--space-3); }
.sec-head__lead {
  color: var(--ink-muted); font-weight: 700; text-transform: uppercase;
  max-width: 46ch; margin-top: var(--space-4); font-size: var(--fs-200);
  letter-spacing: 0.02em;
}
/* .rule-thick vive en base.css: la usan también las subpáginas */

/* =====================================================================
   1 · HERO — titular de tesis, con el tachado que ejecuta la frase
   Fondo --bg (#0C0D0D): se funde con el header, sin costura. Elegido el
   2026-07-09 comparándolo contra #282828 en captura. Declarado explícito
   y no heredado del body, para que el hero no dependa de un accidente.
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 5rem - var(--bw));  /* header: 5rem + borde 4px */
  display: flex; flex-direction: column;
  background: var(--bg);
}
/* Rejilla roja muy sutil, atenuada con una máscara radial */
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image:
    linear-gradient(var(--red) 1px, transparent 1px),
    linear-gradient(90deg, var(--red) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 70%);
}
.hero__inner { flex: 1; display: flex; align-items: center;
  padding-block: var(--space-8) var(--space-6); position: relative; z-index: 1; }

.hero__headline { margin-block: var(--space-4); }
/* padding-top da aire a las tildes (ñ); overflow:hidden es la máscara del reveal */
.hero__line { display: block; overflow: hidden; padding-top: 0.2em; margin-top: -0.2em; }
.hero__line > span {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.9rem, 9vw, 7rem); line-height: 0.9;
  letter-spacing: var(--tracking-display); color: var(--ink);
}
/* Firma: el tachado rojo barre "reinventa". <s> por semántica, línea propia
   para poder animarla con GSAP. */
.hero__strike { position: relative; display: inline-block; text-decoration: none; }
.hero__strike-line {
  position: absolute; left: -0.02em; right: -0.02em; top: 52%;
  height: 0.09em; background: var(--red); transform-origin: left; transform: scaleX(1);
}
.hero__rule { max-width: 620px; }
.hero__lead {
  margin-top: var(--space-5); max-width: 62ch; color: var(--ink);
  font-size: var(--fs-400); line-height: 1.45; font-weight: 400;
}
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }

/* Marquee (banda roja inferior) */
.marquee {
  position: relative; z-index: 1; overflow: hidden; display: flex; flex: none;
  background: var(--red); border-top: var(--bw) solid var(--red-dark);
  padding-block: var(--space-3);
}
.marquee__track { display: inline-flex; flex-shrink: 0; white-space: nowrap; will-change: transform;
  animation: marquee 32s linear infinite; }
.marquee__track span { padding-inline: var(--space-4);
  color: var(--ink); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-200); letter-spacing: 0.2em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   2 · NOSOTROS — el credo como sustituciones (filas editoriales, sin cards)
   El fondo lo pone `.section--warm`.
   ===================================================================== */
.credo-sec { padding-block: var(--space-8); border-bottom: var(--bw) solid var(--line); }
.credo-sec__grid { display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7); align-items: start; }
.credo-sec__title { font-size: var(--fs-600); line-height: var(--lh-display); }
.credo-sec__intro { margin-top: var(--space-5); max-width: 42ch; color: var(--ink-muted);
  font-size: var(--fs-300); line-height: 1.6; }
.credo-sec__ctas { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }

.creed { list-style: none; border-top: var(--bw) solid var(--red); }
.creed__item { border-bottom: var(--bw-thin) solid var(--line); padding-block: var(--space-5); }
.creed__head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--space-4); }
.creed__n { font-family: var(--font-display); color: var(--ink-faint); font-size: var(--fs-400); line-height: 1; }
.creed__k { color: var(--red); font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-100); }

.creed__swap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3);
  font-family: var(--font-display); text-transform: uppercase; line-height: 0.95;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem); letter-spacing: var(--tracking-display); }
.creed__no { position: relative; display: inline-block; text-decoration: none; color: var(--ink-faint); }
.creed__strike { position: absolute; left: -0.03em; right: -0.03em; top: 52%;
  height: 0.08em; background: var(--red); transform-origin: left; transform: scaleX(1); }
.creed__arrow { color: var(--red); }
/* Reposo = visible; GSAP anima desde clip-path oculto. El padding-top mete
   la tilde de CONVICCIÓN dentro de la caja: inset(0) recorta al borde. */
.creed__yes { display: inline-block; color: var(--ink); clip-path: inset(0 0 0 0);
  padding-top: 0.2em; margin-top: -0.2em; }
.creed__text { margin-top: var(--space-4); max-width: 62ch; color: var(--ink-muted);
  font-size: var(--fs-300); line-height: 1.6; }

/* =====================================================================
   3 · SERVICIOS (resumen del hub)
   El fondo vivía en home.css y se fue con el CSS a servicios.css al
   mudar la página: la banda se restaura aquí.
   ===================================================================== */
.services { padding-block: var(--space-8); background: var(--bg-elev); }

/* ---- Índice del hub: fila-enlace, sin tarjetas ----
   Sin border-top: el .rule-thick del sec-head ya cierra por arriba. */
.hub-list { list-style: none; }
.hub-list li { border-bottom: var(--bw-thin) solid var(--line); }
.hub-list a {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline;
  gap: var(--space-4); padding-block: var(--space-5); color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.hub-list a:hover { color: var(--red); }
.hub-list__n { font-family: var(--font-display); color: var(--ink-faint); font-size: var(--fs-400); line-height: 1; }
.hub-list__t { font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-500); line-height: 1; letter-spacing: var(--tracking-display); }
.hub-list__c { color: var(--ink-faint); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-100); }
.hub-list__a { font-family: var(--font-display); font-size: var(--fs-400);
  transition: transform var(--dur-fast) var(--ease-out-expo); }
.hub-list a:hover .hub-list__a { transform: translateX(6px); }
.hub-more { margin-top: var(--space-6); }
@media (max-width: 680px) {
  /* team__grid a 1 col se define MÁS ABAJO, después de la declaración base
     (si va aquí —antes de la base— la base de 3 col la pisa por orden de cascada). */
  .hub-list a { grid-template-columns: auto 1fr auto; gap: var(--space-3); }
  .hub-list__c { grid-column: 2; }
}

/* =====================================================================
   4 · PRUEBA — una sola cifra, atribuida
   ===================================================================== */
/* .stats vive en components.css: lo usan la home y /portafolio */

/* Principios, no datos: prosa con filete rojo. Cero cifras grandes. */
.tenets { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); margin-top: var(--space-8); }
.tenets__item { border-left: var(--bw) solid var(--red); padding-left: var(--space-4);
  color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.55;
  clip-path: inset(0 0 0 0);   /* reposo visible: GSAP anima desde inset(0 100% 0 0) */ }

/* =====================================================================
   6 · EQUIPO
   ===================================================================== */
.team { padding-block: var(--space-8); border-bottom: var(--bw) solid var(--line); }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.member { background: var(--bg-elev); border: var(--bw) solid var(--line); display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease-out-expo); }
.member:hover { border-color: var(--red); }
.member__photo { aspect-ratio: 3 / 4; overflow: hidden; }
.member__photo img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo); }
.member:hover .member__photo img { transform: scale(1.05); }
.member__body { padding: var(--space-5); border-top: var(--bw) solid var(--red); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.member__name { font-size: var(--fs-400); line-height: 1; }
.member__role { color: var(--red); font-weight: 900; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-100); }
.member__bar { height: 3px; width: 3rem; background: var(--line); margin-block: var(--space-2);
  transition: width var(--dur) var(--ease-out-expo), background-color var(--dur) var(--ease-out-expo); }
.member:hover .member__bar { width: 100%; background: var(--red); }
.member__bio { color: var(--ink-muted); font-weight: 700; text-transform: uppercase; font-size: var(--fs-100); line-height: 1.6; }
.member__social { display: flex; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); border-top: var(--bw-thin) solid var(--line); }
.member__social a { color: var(--ink-muted); transition: color var(--dur-fast); }
.member__social a:hover { color: var(--red); }
.member__social svg { width: 20px; height: 20px; }

/* =====================================================================
   7 · CLIENTES (marquee de nombres)
   ===================================================================== */
.clients { padding-block: var(--space-7); background: var(--bg); border-bottom: var(--bw) solid var(--line); }
.clients__h { color: var(--red); font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-100); margin-bottom: var(--space-4); }
.clients__wall { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-5); row-gap: var(--space-2); }
.clients__wall li { font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(1.5rem, 4vw, 3.2rem); line-height: 1.05; opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo); }
.clients__wall li:hover { opacity: 1; color: var(--red); }
.clients__wall li + li::before { content: "/"; color: var(--red); opacity: 0.6; margin-right: var(--space-5); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
.work__more { margin-top: var(--space-5); }

@media (max-width: 1024px) {
  .credo-sec__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tenets { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* Equipo (preview de la home): 3 col en escritorio → 2 col en tablet → 1 col en
   móvil. El rango de 2 col va ACOTADO (min 681px): antes vivía en el bloque
   `max-width:1024` de arriba y, por orden de cascada, ganaba a la regla de
   1 col de `max-width:680` (misma especificidad, regla posterior). Acotado ya
   no puede filtrarse a móvil sin importar el orden en el archivo. */
@media (min-width: 681px) and (max-width: 1024px) {
  .team__grid { grid-template-columns: 1fr 1fr; }
}
/* Móvil: 1 sola columna, como el resto de secciones del sitio. Va AQUÍ, después
   de la declaración base de .team__grid, para ganar por orden de cascada. */
@media (max-width: 680px) {
  .team__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  /* La etiqueta Misión/Visión/Valores baja bajo el número */
  .creed__head { grid-template-columns: auto 1fr; }
  .creed__k { grid-column: 2; }
}

/* Respeta reduced-motion: detiene el marquee */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* =====================================================================
   CTA DE CIERRE DE LA HOME (réplica de components/CTA.jsx)
   Es EXCLUSIVO de la home. La clase `.cta` genérica de components.css la
   siguen usando /servicios, /portafolio, /nosotros y /equipo: no la toques
   para ajustar esta sección.
   Del original: marco rojo de 8px sobre --bg-elev, cuadrado en perspectiva
   arriba a la derecha, y una franja de rejilla roja de 50px pegada abajo.
   Ambos adornos van en pseudoelementos: son decorativos, no entran al DOM
   y GSAP no los toca.
   ===================================================================== */
.cta-final {
  position: relative; overflow: hidden;
  background: var(--bg-elev);
  border: var(--bw-thick) solid var(--red);
  padding-block: var(--space-7);
}
@media (min-width: 768px) { .cta-final { padding-block: var(--space-8); } }

/* Franja de rejilla roja, solo en la parte baja (CTA.jsx:27-36) */
.cta-final::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16rem;
  pointer-events: none; opacity: 0.2;
  background-image:
    linear-gradient(var(--red) 3px, transparent 3px),
    linear-gradient(90deg, var(--red) 3px, transparent 3px);
  background-size: 50px 50px;
}
/* Cuadrado en perspectiva (CTA.jsx:20-26) */
.cta-final::after {
  content: ""; position: absolute; top: var(--space-6); right: 5rem;
  width: 12rem; height: 12rem; pointer-events: none; opacity: 0.4;
  border: var(--bw) solid var(--line);
  background: linear-gradient(135deg, var(--line) 0%, var(--line-faint) 100%);
  transform: perspective(800px) rotateX(30deg) rotateY(45deg);
}
@media (max-width: 767px) { .cta-final::after { display: none; } }

.cta-final__inner { position: relative; z-index: 1; max-width: 64rem; text-align: center; }
.cta-final__rule-sm { width: 8rem; height: var(--bw); background: var(--red);
  border: 0; margin: 0 auto var(--space-5); }
.cta-final__rule-lg { width: 100%; height: 6px; background: var(--red);
  border: 0; margin: 0 auto var(--space-5); }

.cta-final__title {
  font-family: var(--font-display); text-transform: uppercase; color: var(--ink);
  font-size: clamp(2.4rem, 8vw, 6.5rem); line-height: 1;
  letter-spacing: var(--tracking-display);
  padding-top: 0.15em; margin-top: -0.15em;   /* aire para la tilde de ¿? y la Ó */
  margin-bottom: var(--space-5);
}
.cta-final__lead {
  color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-400); line-height: 1.4;
  max-width: 48rem; margin: 0 auto var(--space-6);
}
/* El botón se agranda aquí sin crear una variante global de .btn */
.cta-final .btn { font-size: var(--fs-400); padding: var(--space-4) var(--space-6); }