/* ============================================================
   PATCH 004 · Reorganización + ajustes hero (preview)
   - Servicios: quita badges/métricas, añade leyenda + bullets
   - Hero: oculta kicker "Marketing · IA · Publicidad"
   - Hero: highlight amarillo "negocio." ajustado al texto
   - Botones: más aire interno
   ============================================================ */

/* ---------- HERO · ocultar kicker en todas las páginas ---------- */
.hero-kicker {
  display: none !important;
}

/* ---------- SECCIONES · ocultar etiquetas tipo "Servicios · 01 / 02 / 03" ---------- */
/* Aplica a todas las páginas que carguen este patch */
.section-tag {
  display: none !important;
}

/* ---------- CTA FINAL · ocultar etiqueta "[ OBRA_DISPONIBLE ]" ---------- */
.cta-tag {
  display: none !important;
}

/* ---------- FOUNDER CARD · ocultar "[ ON CALL ]" y "EST. 2026 · ESPAÑA · GLOBAL" ---------- */
.founder-status,
.founder-meta {
  display: none !important;
}

/* ---------- HERO · ocultar barra de stats (3 servicios / +40% / 30h / ★5.0) ---------- */
.hero-bar {
  display: none !important;
}

/* ---------- MARQUEE CLIENTES · fondo original + logos en blanco + loop continuo ---------- */
.clients-marquee {
  /* Aparece más abajo al hacer scroll */
  margin-top: clamp(40px, 6vw, 96px);
  padding: clamp(28px, 4vw, 44px) 0;
  /* Mantenemos el fondo oscuro original del sitio */
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}

/* Track: gap uniforme y misma separación en la costura del loop */
.clients-marquee .clients-marquee-track {
  gap: clamp(56px, 6vw, 88px);
  /* Padding-right igual al gap para que cuando el set duplicado entre,
     la separación con el primero del nuevo ciclo sea idéntica */
  padding-right: clamp(56px, 6vw, 88px);
  animation-duration: 36s;
}

/* Logos forzados a versión POSITIVA (blanco puro) sobre el fondo oscuro.
   brightness(0) los aplasta a negro y invert(1) los pasa a blanco;
   funciona con logos en cualquier color sin necesidad de archivos nuevos. */
.clients-marquee img {
  height: clamp(34px, 4.2vw, 48px);
  width: auto;
  object-fit: contain;
  opacity: 0.85 !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 200ms ease, transform 200ms ease;
}
.clients-marquee img:hover {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
  transform: scale(1.04);
}

/* ---------- GRID DE LOGOS (sección Casos) · misma versión blanca ---------- */
.clients-grid .client-cell img {
  opacity: 0.85 !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 200ms ease, transform 200ms ease;
}
.clients-grid .client-cell img:hover {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
  transform: scale(1.04);
}

/* ---------- HERO · centrar verticalmente el bloque derecho ---------- */
/* El h1 izquierdo es alto; centrando el .hero-side queda más equilibrado */
.hero .hero-top {
  align-items: center;
}
.hero .hero-side {
  align-self: center;
  padding-bottom: 0;
}

/* ---------- Color amarillo de texto (sin highlight de bloque) ---------- */
/* Equivalente a .mark-o pero en amarillo: solo tiñe el texto, sin fondo */
.mark-y-text,
.hero h1 .mark-y-text,
.section-title .mark-y-text {
  color: var(--yellow);
  background: transparent !important;
  padding: 0 !important;
  display: inline !important;
  line-height: inherit !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

/* ---------- HERO · highlight amarillo "negocio." ---------- */
/* El rectángulo cubre hasta la cola del descender de la "g", */
/* manteniendo margen claro respecto a la línea superior.     */
.hero h1 {
  line-height: 1.28;           /* antes 0.94 — aire suficiente arriba y abajo */
}
.hero h1 .mark-y {
  display: inline-block;
  background: var(--yellow);
  color: #0A0A0A;
  /* arriba ajustado al cap-height, abajo amplio para cubrir el descender de la "g" */
  padding: 0.02em 0.14em 0.24em;
  line-height: 0.88;
  border-radius: 4px;
  vertical-align: baseline;
  margin-top: 0.12em;          /* empuja el bloque hacia abajo, mejora margen con "frena" */
  /* anula la regla original de inline + box-decoration-break */
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

/* ---------- BOTONES · respiración interna ---------- */
.btn-primary,
.btn-ghost {
  padding: 18px 32px;          /* antes 16px 28px */
  min-height: 56px;            /* antes 52px */
  gap: 12px;                   /* antes 10px — texto y flecha más sueltos */
  line-height: 1.15;
}
.btn-primary { letter-spacing: -0.005em; }

/* CTA de la cabecera (nav) · más aire interno */
.nav-cta {
  padding: 14px 26px !important;   /* antes 13px 24px — texto respira lateral y vertical */
  min-height: 48px !important;     /* antes 44px */
  gap: 10px !important;            /* texto y flecha con más separación */
  line-height: 1.2 !important;
}
@media (max-width: 1180px) {
  .nav-cta { padding: 13px 22px !important; min-height: 46px !important; }
}

/* ============================================================
   MÉTODO · sección naranja (Construir / Automatizar / Crecer)
   Texto del encabezado en blanco, cards de fase en blanco con letra negra
   ============================================================ */

/* Título y lead encima de las cards · beige oscuro que destaca sobre naranja */
.process-wrap .section-title {
  color: #E8D5B0 !important;         /* beige medio, no blanco */
}
.process-wrap .section-lead {
  color: rgba(232, 213, 176, 0.85) !important;
}

/* Contenedor de las 3 fases */
.process-wrap .process {
  border-color: rgba(232, 213, 176, 0.30);
  background: #D9C7A3;               /* beige más oscuro y apagado */
}

/* Cada caja de fase */
.process-wrap .process-step {
  background: #D9C7A3;               /* beige más oscuro: legible sin "iluminar" */
  color: #1E1410;                    /* negro cálido (--bg) sobre el beige */
  border-right-color: rgba(30, 20, 16, 0.12);
}
.process-wrap .process-step:hover {
  background: #CDB98F;               /* un punto más oscuro en hover */
}

/* Tipografía dentro de cada caja · negro cálido (--bg) en distintos niveles */
.process-wrap .process-num {
  color: rgba(30, 20, 16, 0.7);
}
.process-wrap .process-name {
  color: #1E1410;
}
.process-wrap .process-desc {
  color: rgba(30, 20, 16, 0.72);
}
.process-wrap .process-tag {
  color: rgba(30, 20, 16, 0.55);
}

/* Bordes en móvil (cuando las cajas se apilan) */
@media (max-width: 760px) {
  .process-wrap .process-step {
    border-right: 0;
    border-bottom: 1px solid rgba(30, 20, 16, 0.10);
  }
  .process-wrap .process-step:last-child { border-bottom: 0; }
}

/* ============================================================
   SOBRE NOSOTROS · panel del manifiesto + founder-card
   Fondo cálido que destaca de la página y respeta paleta Gonfixit
   ============================================================ */
.manifesto {
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 92, 53, 0.08), transparent 60%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--bg-deeper) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px);
  align-items: center !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

/* La founder-card destaca dentro del panel con un fondo más profundo */
.manifesto .founder-card {
  background: var(--bg-deeper);
  border-color: rgba(255, 92, 53, 0.18);
}

/* En móvil mantenemos el panel pero con menos padding */
@media (max-width: 900px) {
  .manifesto {
    padding: clamp(28px, 5vw, 40px);
  }
}

/* ---------- MÉTODO sobre-nosotros · .method-grid / .method-step ---------- */
/* Sobre-nosotros usa otra estructura para sus 4 fases; aplicamos el mismo
   tratamiento beige + texto negro cálido que las cards del index */
.process-wrap .method-step {
  background: #D9C7A3 !important;
  border-color: rgba(30, 20, 16, 0.10) !important;
  color: #1E1410;
}
.process-wrap .method-step:hover {
  background: #CDB98F !important;
  border-color: rgba(30, 20, 16, 0.20) !important;
}
.process-wrap .method-step h3 {
  color: #1E1410;
}
.process-wrap .method-step p {
  color: rgba(30, 20, 16, 0.72);
}
.process-wrap .method-step-num {
  color: rgba(30, 20, 16, 0.7);
}
/* ---------- BADGES 01/02/03/04 del método (sobre-nosotros) ---------- */
/* Anular el estilo de badge del SEGUNDO span (el texto "Diagnóstico" etc.) que
   estaba heredando el background del badge numérico por el selector global. */
.process-wrap .method-step-num > span + span {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit !important;
  padding: 0 !important;
  display: inline !important;
}

/* Padding interno y margen del badge numérico */
.process-wrap .method-step-num > span:first-child {
  padding: 0 8px !important;
  min-width: 28px;
  width: auto !important;       /* permite que el número respire si crece */
  margin-right: 4px;
}

/* Color por cada fase usando la paleta de marca */
.process-wrap .method-step:nth-child(1) .method-step-num > span:first-child {
  background: var(--orange);
  color: #FFFFFF;
}
.process-wrap .method-step:nth-child(2) .method-step-num > span:first-child {
  background: var(--yellow);
  color: #1E1410;
}
.process-wrap .method-step:nth-child(3) .method-step-num > span:first-child {
  background: #FF8F65;          /* naranja medio derivado de --orange */
  color: #1E1410;
}
.process-wrap .method-step:nth-child(4) .method-step-num > span:first-child {
  background: var(--ink);       /* beige Gonfixit */
  color: #1E1410;
}

/* ============================================================
   SERVICIOS · cards reorganizados
   ============================================================ */

/* Leyenda corta debajo del título del servicio */
.module .module-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #C8A27A);
  margin: -0.4rem 0 1.1rem 0;
  opacity: 0.92;
}

/* Lista de items que incluye cada servicio */
.module .module-list {
  list-style: none;
  margin: 0.4rem 0 1.4rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.module .module-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

/* Flecha → coherente con el resto de la web (botones, module-arrow) */
.module .module-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: auto;
  height: auto;
  background: transparent !important;   /* anula la regla original de styles.css */
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: 500;
  color: var(--orange);
  line-height: 1.45;
}

/* Cada card tiñe sus flechas con su color de acento */
.module--ia .module-list li::before  { color: var(--yellow) !important; }
.module--ads .module-list li::before { color: var(--orange) !important; }
.module--m .module-list li::before   { color: var(--ink) !important; }

/* El pie del módulo ya no lleva métrica, solo la flecha alineada a la derecha */
.module .module-foot {
  justify-content: flex-end;
  margin-top: auto;
}

/* Que el módulo crezca según contenido sin partir el grid */
.modules .module {
  display: flex;
  flex-direction: column;
}

/* Responsive: que los cards no queden demasiado densos en móvil */
@media (max-width: 720px) {
  .module .module-list li {
    font-size: 0.88rem;
  }
}