/* ═══════════════════════════════════════════════════════════
   ISIKOM — Design System v3 (Marketing OS edition)
   Colors: Midnight #0A0F1E · Deep Blue #0E3A73 · Teal #00C9A7
   Fonts:  Geist (display) · Plus Jakarta Sans (body) · Geist Mono
   Style:  Modern sans-only, no italics, emphasis via color + weight
   ═══════════════════════════════════════════════════════════ */

:root {
  --midnight: #0A0F1E;
  --deepblue: #0E3A73;
  --teal: #00C9A7;
  --teal-soft: #00E5BF;
  --teal-dark: #00A88A;
  --warm: #F7F6F2;
  --carbon: #1C1C2E;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "ss02", "cv11"; }

/* Display headings — Geist with tight tracking, zero italics */
.font-display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-style: normal !important;
}
.font-display strong, .font-display b { font-weight: 700; }

/* Explicitly prevent any italic emphasis anywhere in display text */
em, i.emphasis { font-style: normal; }

img, video { max-width: 100%; height: auto; }

/* ──────────────── NAVIGATION ──────────────── */
#main-nav {
  background: transparent;
  backdrop-filter: blur(0);
}
#main-nav.scrolled {
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Nuevo logo SVG ya es blanco nativo → no aplicar filtros */
#main-nav .nav-logo { transition: transform .3s; }
#main-nav .nav-logo:hover { transform: scale(1.05); }
#main-nav .nav-tagline { color: rgba(255,255,255,.5); }
#main-nav .nav-links a { color: rgba(255,255,255,.85); }
#main-nav .nav-links a:hover { color: var(--teal); }
#main-nav .nav-burger { color: #fff; }

/* ──────────────── BUTTONS ──────────────── */
.btn-teal {
  background: var(--teal);
  color: var(--midnight);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.btn-teal:hover {
  background: var(--teal-soft);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 201, 167, 0.35);
}
.btn-teal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.btn-teal:hover::after { transform: translateX(100%); }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  transition: all .3s ease;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* ──────────────── HERO ──────────────── */
.hero-section { min-height: 85vh; }

.mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(0, 201, 167, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(14, 58, 115, 0.5), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 229, 191, 0.1), transparent 70%);
  animation: mesh-float 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mesh-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -3%) scale(1.08); }
  100% { transform: translate(-3%, 2%) scale(1.02); }
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  pointer-events: none;
}

.gradient-text-teal {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-soft) 50%, #7FFFD4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ──────────────── EYEBROWS / LABELS ──────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Space Grotesk', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--teal-dark);
}
.eyebrow-teal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Space Grotesk', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow-teal::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--teal);
}

/* ──────────────── MARQUEE ──────────────── */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  /* Contenedor de tamaño fijo → normaliza logos con viewBoxes que traen
     mucho padding interno (ej. prosales) y los que son casi cuadrados (ej. oph).
     Todos ocupan el mismo espacio visible. */
  width: 200px;
  height: 100px;
}
.marquee-item img {
  /* Base común: rellenar contenedor respetando aspect ratio */
  width: 100%;
  height: 100%;
  max-height: 88px;
  object-fit: contain;
  opacity: .85;
  transition: opacity .3s, transform .3s;
}
/* SVG "sucios" (PNG embebido con fondo blanco): necesitan normalización
   a blanco monocromo vía filtros + screen blend. */
.marquee-item img[src$=".svg"] {
  filter: grayscale(1) invert(1) brightness(1.4) contrast(1.3);
  mix-blend-mode: screen;
}
/* PNG limpios (ya son blanco-sobre-transparente): no filtros, solo opacidad. */
.marquee-item img[src$=".png"] {
  filter: none;
  mix-blend-mode: normal;
}
.marquee, .marquee-track, .marquee-item {
  /* Aislar el contexto de mezcla para que el blend solo afecte dentro de la
     sección (evita que el screen "sangre" hacia elementos vecinos).
     También fuerza un fondo oscuro de referencia para el screen blend. */
  isolation: isolate;
  background: transparent;
}
@media (min-width: 768px) {
  .marquee-item { width: 240px; height: 120px; padding: 0 2.5rem; }
  .marquee-item img { max-height: 108px; }
}
.marquee-item:hover img {
  opacity: 1;
  transform: scale(1.08);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ──────────────── IA SECTION ──────────────── */
.ia-cell {
  background: var(--midnight);
  padding: 3rem 2.5rem;
  transition: background .3s;
  position: relative;
}
.ia-cell:hover { background: rgba(14, 58, 115, 0.3); }
.ia-icon {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  background: rgba(0, 201, 167, 0.1);
  border: 1px solid rgba(0, 201, 167, 0.3);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* ──────────────── SERVICE CARDS ──────────────── */
.service-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  transition: all .4s ease;
  border: 1px solid rgba(28, 28, 46, 0.06);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--teal);
  transition: width .4s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10, 15, 30, 0.15);
  border-color: rgba(0, 201, 167, 0.3);
}
.service-card:hover::before { width: 100%; }

.service-icon {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  background: rgba(0, 201, 167, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all .3s;
}
.service-card:hover .service-icon {
  background: var(--teal);
  color: var(--midnight);
  transform: scale(1.1) rotate(-5deg);
}

/* ──────────────── STATS ──────────────── */
.stat-cell {
  background: #fff;
  padding: 3rem 2rem;
  transition: background .3s;
}
.stat-cell:hover { background: var(--warm); }

/* ──────────────── SOLUTIONS ──────────────── */
.solution-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s ease;
  border: 1px solid rgba(28, 28, 46, 0.06);
  position: relative;
}
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10, 15, 30, 0.15);
}
.solution-icon {
  width: 4rem; height: 4rem;
  border-radius: 1rem;
  background: rgba(0, 201, 167, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.solution-cta {
  display: inline-flex;
  align-items: center;
  color: var(--teal-dark);
  font-weight: 600;
  font-size: .9rem;
  transition: gap .3s;
}
.solution-cta:hover { color: var(--teal); }
.solution-cta:hover i { transform: translateX(4px); }
.solution-cta i { transition: transform .3s; }

.solution-featured {
  background: linear-gradient(135deg, var(--midnight) 0%, var(--deepblue) 100%);
  border: 1px solid rgba(0, 201, 167, 0.3);
  position: relative;
  overflow: hidden;
}
.solution-featured::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(0, 201, 167, 0.15), transparent 70%);
  pointer-events: none;
}
.featured-badge {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: var(--teal);
  color: var(--midnight);
  padding: .35rem .9rem;
  border-radius: 2rem;
  font-family: 'Space Grotesk', monospace;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.solution-icon-featured {
  width: 4rem; height: 4rem;
  border-radius: 1rem;
  background: var(--teal);
  color: var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.solution-cta-featured {
  display: inline-flex;
  align-items: center;
  color: var(--teal);
  font-weight: 600;
  font-size: .9rem;
  transition: gap .3s;
}
.solution-cta-featured:hover i { transform: translateX(4px); }
.solution-cta-featured i { transition: transform .3s; }

/* ──────────────── TESTIMONIALS ──────────────── */
.testimonial-card {
  background: var(--warm);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s ease;
  border: 1px solid transparent;
}
.testimonial-card:hover {
  background: #fff;
  border-color: rgba(0, 201, 167, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10, 15, 30, 0.12);
}

/* ──────────────── FAQ ──────────────── */
.faq-item {
  background: #fff;
  border: 1px solid rgba(28, 28, 46, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  transition: all .3s ease;
}
.faq-item.active {
  border-color: var(--teal);
  box-shadow: 0 8px 24px -12px rgba(0, 201, 167, 0.25);
}
.faq-question {
  width: 100%;
  padding: 1.5rem 1.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  transition: background .2s;
}
.faq-question:hover { background: rgba(0, 201, 167, 0.03); }
.faq-plus {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: rgba(0, 201, 167, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
  transition: all .3s;
}
.faq-item.active .faq-plus {
  background: var(--teal);
  color: var(--midnight);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ──────────────── CONTACT ──────────────── */
.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  transition: background .3s;
}
.contact-link:hover { background: rgba(255, 255, 255, 0.05); }
.contact-icon {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  background: rgba(0, 201, 167, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  border: 1px solid rgba(0, 201, 167, 0.2);
}

.contact-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.5rem;
}

/* Floating labels */
.float-field { position: relative; }
.float-input {
  width: 100%;
  padding: 1.25rem 1rem .5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: .75rem;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: all .3s;
}
.float-input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.15);
}
.float-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  pointer-events: none;
  transition: all .2s ease;
  font-weight: 400;
}
.float-input:focus ~ .float-label,
.float-input:not(:placeholder-shown) ~ .float-label {
  top: .35rem;
  font-size: .7rem;
  color: var(--teal);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.float-textarea { padding-top: 1.5rem; resize: vertical; min-height: 120px; }
.float-select {
  padding-top: 1.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300C9A7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.float-select option { background: var(--midnight); color: #fff; }

/* ──────────────── FOOTER ──────────────── */
.social-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: all .3s;
}
.social-icon:hover {
  background: var(--teal);
  color: var(--midnight);
  border-color: var(--teal);
  transform: translateY(-2px);
}

/* ──────────────── WHATSAPP FLOAT ──────────────── */
.whatsapp-float {
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(0, 201, 167, 0.4);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.whatsapp-float:hover { animation: none; }

/* ──────────────── COUNTERS / REVEAL ──────────────── */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────── SCROLLBAR ──────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--warm); }
::-webkit-scrollbar-thumb {
  background: var(--midnight);
  border-radius: 5px;
  border: 2px solid var(--warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-dark); }

/* ──────────────── FOCUS STATES ──────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ──────────────── LOADING SPINNER ──────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.fa-spinner { animation: spin 1s linear infinite; }

/* ──────────────── MARKETING OS · Problems ──────────────── */
.os-problem {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: all .3s ease;
  position: relative;
}
.os-problem:hover {
  background: rgba(0, 201, 167, 0.05);
  border-color: rgba(0, 201, 167, 0.25);
  transform: translateY(-2px);
}
.os-problem-num {
  font-family: 'Geist Mono', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--teal);
  margin-bottom: 1rem;
}

/* ──────────────── Regla de oro ──────────────── */
.os-golden-rule {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.08) 0%, rgba(14, 58, 115, 0.15) 100%);
  border: 1px solid rgba(0, 201, 167, 0.25);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  backdrop-filter: blur(8px);
}

/* ──────────────── Nueva Era · Trend cards ──────────────── */
.trend-card {
  background: #fff;
  border: 1px solid rgba(28, 28, 46, 0.06);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: all .4s ease;
  position: relative;
  overflow: hidden;
}
.trend-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 201, 167, 0.3);
  box-shadow: 0 20px 40px -20px rgba(10, 15, 30, 0.12);
}
.trend-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 201, 167, 0), rgba(0, 201, 167, 0));
  transition: background .4s ease;
  pointer-events: none;
}
.trend-card:hover::after {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.3), rgba(0, 201, 167, 0));
}
.trend-num {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: 'Geist Mono', monospace;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(28, 28, 46, 0.3);
}
.trend-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: .625rem;
  background: rgba(0, 201, 167, 0.1);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  transition: all .3s;
}
.trend-card:hover .trend-icon {
  background: var(--teal);
  color: var(--midnight);
}
.trend-card-featured {
  background: linear-gradient(135deg, var(--midnight) 0%, var(--deepblue) 100%);
  border: 1px solid rgba(0, 201, 167, 0.3);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.trend-card-featured::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0, 201, 167, 0.2), transparent 70%);
  pointer-events: none;
}
.trend-card-featured .trend-num { color: rgba(255, 255, 255, 0.4); }
.trend-icon-featured {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  background: var(--teal);
  color: var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

/* ──────────────── ISIKOM Flow diagram ──────────────── */
.flow-diagram {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
  backdrop-filter: blur(8px);
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: .875rem;
  transition: all .3s ease;
}
.flow-step:hover {
  background: rgba(0, 201, 167, 0.06);
  border-color: rgba(0, 201, 167, 0.25);
  transform: translateX(4px);
}
.flow-num {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(0, 201, 167, 0.12);
  color: var(--teal);
  border: 1px solid rgba(0, 201, 167, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
}
.flow-connector {
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(to bottom, rgba(0, 201, 167, 0.3), rgba(0, 201, 167, 0.1));
  margin: 0 auto 0 1.125rem;
}
.flow-step-final {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.1), rgba(14, 58, 115, 0.2));
  border-color: rgba(0, 201, 167, 0.4);
}
.flow-num-final {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width: 768px) {
  .hero-section { min-height: auto; }
  .mesh-gradient { animation-duration: 30s; }
  .ia-cell, .stat-cell { padding: 2rem 1.5rem; }
  .marquee-track { gap: 2.5rem; animation-duration: 30s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .mesh-gradient { animation: none; }
  .marquee-track { animation: none; }
}

/* Print */
@media print {
  nav, footer, .whatsapp-float { display: none; }
}