/* ===========================================================
   TDM SOLUTIONS LLC — Premium institutional website
   =========================================================== */

:root {
  --bg: #0a0a0c;
  --bg-alt: #111114;
  --surface: #17171b;
  --surface-2: #1e1e23;
  --border: rgba(212, 175, 55, 0.18);
  --border-strong: rgba(212, 175, 55, 0.4);

  --gold: #d4af37;
  --gold-light: #f2d879;
  --gold-dark: #9c7a2e;
  --gold-soft: rgba(212, 175, 55, 0.1);

  --text: #f3f1ea;
  --text-muted: #a9a7a1;
  --text-faint: #75736e;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --max-width: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow-gold: 0 8px 30px rgba(212, 175, 55, 0.12);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.5);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}

.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: 18px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 620px;
}

.section-head.center p { margin: 0 auto; }

.gold-text { color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: #100c02;
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(212, 175, 55, 0.28); }

.btn-outline {
  background: transparent;
  border-color: rgba(243, 241, 234, 0.25);
  color: var(--text);
}

.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.site-header.scrolled {
  border-bottom-color: var(--border);
  background: rgba(10, 10, 12, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  max-width: 1380px;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 10px; }

@media (max-width: 480px) {
  .brand { min-width: 0; }
  .brand-name { min-width: 0; }
  .brand-name strong { font-size: 0.92rem; white-space: normal; }
  .brand-name span { white-space: normal; }
}

.brand img { height: 40px; width: auto; }

.site-header .brand img { height: 30px; }

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name strong {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.brand-name span {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 16px;
  min-width: 0;
}

.main-nav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}

.main-nav a:hover { color: var(--text); }

.header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  filter: grayscale(0.6);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.lang-btn:hover { opacity: 0.9; filter: grayscale(0); transform: translateY(-1px); }

.lang-btn.is-active {
  opacity: 1;
  filter: grayscale(0);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

.lang-switcher-mobile { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px var(--gutter) 90px;
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 75% 20%, rgba(212, 175, 55, 0.14), transparent 60%);
  z-index: -2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 1;
}

.hero-bg canvas { width: 100%; height: 100%; display: block; }

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0a0a0c 0%, #0a0a0c 44%, rgba(10,10,12,0.88) 54%, rgba(10,10,12,0.3) 70%, rgba(10,10,12,0.35) 100%);
}

/* Accessible text mirror of the on-globe metric label — not shown visually,
   the live figures are rendered as a 3D label riding the globe itself. */
.globe-metric {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.hero-content { max-width: 720px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-light);
  background: var(--gold-soft);
  margin-bottom: 28px;
}

.hero-kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  margin-bottom: 24px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 40px;
}

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

/* ---------- Problema / Solucion ---------- */

.split-section {
  padding: 110px 0;
  border-top: 1px solid var(--border);
}

.split-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

/* problema section only: named areas so the dolor-reveal photo slot sits
   under the heading on desktop, and drops below the list on mobile —
   scoped separately so the solución grid (list/text swapped) is unaffected */
.split-grid-problema {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "heading list"
    "reveal  list";
  gap: 40px 64px;
}

.problema-heading { grid-area: heading; }

.problema-list, .solucion-list {
  display: grid;
  gap: 14px;
}

.problema-list { grid-area: list; }
.dolor-reveal { grid-area: reveal; }

.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.check-item:hover { border-color: var(--border-strong); transform: translateX(4px); }

.check-item .mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  margin-top: 2px;
}

.problema-list .mark { background: rgba(212, 90, 62, 0.14); color: #e08267; }
.solucion-list .mark { background: rgba(212, 175, 55, 0.16); color: var(--gold); }

.check-item p { color: var(--text-muted); font-size: 0.96rem; }

.problema-list .check-item:hover {
  background: rgba(214, 58, 48, 0.16);
  border-color: rgba(214, 58, 48, 0.55);
}

.solucion-list .check-item:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 65%, var(--gold-dark));
  border-color: var(--gold);
}

.solucion-list .check-item:hover p { color: #100c02; font-weight: 700; }
.solucion-list .check-item:hover .mark { background: rgba(16,12,2,0.16); color: #100c02; }

.check-item .siren {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  font-size: 1.3rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.check-item:hover .siren { opacity: 1; transform: scale(1); }

/* ---------- Dolor photo reveal (Polaroid-slot effect) ---------- */

.dolor-reveal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* thin horizontal print-slot: dark opening, hairline gold edges, soft glow —
   purely decorative, always present regardless of hover state. Noticeably
   wider than the photo frame below it (negative margin) so it clearly reads
   as an opening the photo emerges FROM, rather than just a top border that
   makes the whole thing look like a screen. */
.dolor-slot {
  position: relative;
  height: 16px;
  margin: 0 -28px;
  border-radius: 4px;
  background: linear-gradient(180deg, #060402, #0e0b07);
  border-top: 1px solid rgba(212, 175, 55, 0.5);
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow:
    inset 0 5px 9px rgba(0, 0, 0, 0.85),
    0 3px 18px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(212, 175, 55, 0.18);
  z-index: 2;
}

.dolor-slot-light {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(247, 221, 143, 0.85), transparent);
  filter: blur(1.2px);
  opacity: 0.75;
}

.dolor-photo-frame {
  position: relative;
  margin-top: -2px;
  aspect-ratio: 16 / 10;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5);
}

.dolor-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 13px 13px;
  opacity: 0;
  filter: grayscale(1);
  clip-path: inset(0 0 100% 0);
  transform: translateY(-3%);
  /* slow, deliberate "print emerging from the slot" — the reveal and the
     color transition are sequential, not simultaneous: it slides out first,
     fully in black & white, then gains color once completely out */
  transition:
    clip-path 2.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1s ease,
    filter 1.1s ease 2.1s;
  pointer-events: none;
}

.dolor-photo.is-active {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
  filter: grayscale(0);
}

/* distinct "falls out of frame" exit when switching to a different dolor —
   quicker than the slow print-in and a different kind of motion (dropping
   away, not retracting into the slot), so the slot itself feels like it has
   real depth. It starts moving the instant the next photo begins printing
   in (see main.js), so the two gestures overlap into one continuous beat
   instead of leaving the frame looking like a blank gray screen in between. */
.dolor-photo.is-leaving {
  transition:
    transform 0.7s cubic-bezier(0.5, 0, 0.85, 0.15),
    opacity 0.65s ease 0.1s,
    filter 0.4s ease;
  opacity: 0;
  transform: translateY(28%) rotate(-2.5deg);
  filter: grayscale(1);
}

@media (max-width: 860px) {
  .dolor-photo-frame { aspect-ratio: 16 / 11; }
}

.solucion-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.pillar {
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-alt);
}

/* ---------- Units / Services ---------- */

.units-section { padding: 110px 0; background: var(--bg-alt); border-top: 1px solid var(--border); }

.units-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.unit-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

.unit-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: var(--shadow-deep);
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
}

.unit-photo {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background: var(--bg-alt);
}

.unit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.unit-card:hover .unit-photo img { transform: scale(1.14); }

.unit-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.88), rgba(0,0,0,0.35) 70%, transparent);
  display: flex;
  flex-direction: column;
}

.unit-photo-caption strong { font-size: 1.05rem; color: #ffffff; }
.unit-photo-caption span { font-size: 0.82rem; color: var(--gold-light); }

.unit-content {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
}

.unit-card .unit-tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 6px;
  width: fit-content;
  flex-shrink: 0;
  margin-bottom: 18px;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.unit-card:hover .unit-tag { background: rgba(16,12,2,0.14); border-color: rgba(16,12,2,0.25); color: #100c02; }

.unit-card .unit-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--gold-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin-bottom: 20px;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.unit-card:hover .unit-icon { background: rgba(16,12,2,0.14); border-color: rgba(16,12,2,0.25); color: #100c02; }

.unit-card h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
  transition: color 0.4s var(--ease);
}

.unit-card:hover h3 { color: #100c02; }

.unit-card p.desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 22px;
  flex-grow: 1;
  transition: color 0.4s var(--ease);
}

.unit-card:hover p.desc { color: rgba(16,12,2,0.78); font-weight: 700; }

.unit-process {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.unit-process span {
  font-size: 0.72rem;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 100px;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.unit-card:hover .unit-process span { border-color: rgba(16,12,2,0.3); color: #100c02; font-weight: 700; }

.unit-note {
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: 18px;
  transition: color 0.4s var(--ease);
}

.unit-card:hover .unit-note { color: #100c02; font-weight: 700; }

.unit-card .unit-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.unit-card .unit-link .arrow { color: var(--gold); transition: transform 0.3s var(--ease), color 0.4s var(--ease); }
.unit-card:hover .unit-link .arrow { transform: translateX(4px); color: #100c02; }
.unit-card:hover .unit-link { color: #100c02; border-top-color: rgba(16,12,2,0.2); }

/* ---------- Metodologia ---------- */

.method-section { padding: 110px 0; }

.method-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.method-step {
  padding: 28px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  position: relative;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.method-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--gold-dark);
  border-right: 2px solid var(--gold-dark);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.6;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease);
  z-index: 2;
}

.method-step:hover {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.14), var(--surface) 65%);
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.method-step:hover::after { border-color: var(--gold); opacity: 1; }

.method-step .num {
  font-size: 2.2rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  margin-bottom: 14px;
  display: block;
  transition: color 0.35s var(--ease), -webkit-text-stroke 0.35s var(--ease);
}

.method-step:hover .num { color: var(--gold-light); -webkit-text-stroke: 1px var(--gold-light); }

.method-step h4 { font-size: 1rem; margin-bottom: 10px; transition: color 0.35s var(--ease); }
.method-step:hover h4 { color: var(--gold-light); }
.method-step p { font-size: 0.85rem; color: var(--text-muted); transition: color 0.35s var(--ease); }
.method-step:hover p { color: var(--gold); }

/* ---------- IA Section ---------- */

.ia-section {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 10%, rgba(212, 175, 55, 0.12), transparent 55%),
    var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ia-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
  align-items: center;
}

.ia-top .section-head { margin-bottom: 28px; }

.ia-feature-list { display: grid; gap: 12px; margin-bottom: 32px; }

.ia-feature-list li {
  display: flex;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--text-muted);
}

.ia-feature-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0;
}

.ia-panel {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-gold);
}

.ia-panel h4 {
  font-size: 1.05rem;
  margin-bottom: 16px;
  color: var(--gold-light);
}

.ia-panel .piloto-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #100c02;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.ia-panel ul { display: grid; gap: 10px; margin-bottom: 22px; }
.ia-panel ul li { font-size: 0.88rem; color: var(--text-muted); padding-left: 16px; position: relative; }
.ia-panel ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold-dark); }

.ia-usecases {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 48px;
}

.usecase {
  padding: 22px 16px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.usecase:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.usecase .uc-icon { display: flex; margin-bottom: 14px; color: var(--gold); }
.usecase .uc-icon svg { width: 24px; height: 24px; }
.usecase h5 { font-size: 0.86rem; margin-bottom: 6px; }
.usecase p { font-size: 0.76rem; color: var(--text-faint); }

.ia-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.model-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  background: var(--surface);
}

.model-card.enterprise { border-color: var(--border-strong); background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent); }

.model-card .tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.model-card h4 { font-size: 1.1rem; margin-bottom: 14px; }
.model-card ul { display: grid; gap: 8px; }
.model-card ul li { font-size: 0.86rem; color: var(--text-muted); padding-left: 16px; position: relative; }
.model-card ul li::before { content: '•'; position: absolute; left: 0; color: var(--gold); }

.ia-security {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 40px;
}

.ia-security .icon { color: var(--gold); flex-shrink: 0; }
.ia-security .icon svg { width: 30px; height: 30px; }
.ia-security h4 { font-size: 1rem; margin-bottom: 8px; }
.ia-security p { font-size: 0.88rem; color: var(--text-muted); }

.ia-cta { text-align: center; }

/* ---------- Trust / Brands ---------- */

.trust-section { padding: 100px 0; }

.brand-marquee {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: 260px 0;
}

.brand-marquee::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 520px;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 22%,
      rgba(255, 255, 255, 0.4) 34%,
      #ffffff 46%,
      #ffffff 54%,
      rgba(255, 255, 255, 0.4) 66%,
      rgba(255, 255, 255, 0.05) 78%,
      transparent 100%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.brand-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.brand-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
  gap: 22px;
  animation: brandMarquee 70s linear infinite;
}

.brand-marquee:has(.brand-cell:hover) .brand-track { animation-play-state: paused; }

@keyframes brandMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.brand-cell {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: transform 0.4s var(--ease);
}

.brand-cell img {
  max-width: 76%;
  max-height: 78px;
  width: auto;
  position: relative;
  transition: transform 0.4s var(--ease);
}

.brand-cell:hover {
  transform: translateY(-6px) scale(1.45);
  z-index: 3;
}

.trust-note {
  margin-top: 22px;
  font-size: 0.8rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Testimonials ---------- */

.testimonials-section { padding: 100px 0; background: var(--bg-alt); border-top: 1px solid var(--border); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transform: translateY(0) scale(1);
  transform-origin: center;
  filter: blur(0);
  opacity: 1;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), z-index 0s 0.35s, filter 0.35s var(--ease), opacity 0.35s var(--ease);
}

/* the whole card grows on hover — photo, name and role scale up together
   naturally as part of it; only the quote is counter-scaled back down so
   it stays readable at its normal size instead of ballooning with the card */
/* .testimonial-card.reveal:hover (not just :hover) so this beats the
   .reveal.is-visible rule further down the sheet, which shares the same
   0,2,0 specificity and would otherwise win on source order and cancel
   the scale-up entirely */
.testimonial-card.reveal:hover {
  border-color: var(--border-strong);
  transform: translateY(-6px) scale(1.07);
  box-shadow: 0 22px 48px rgba(0,0,0,0.45);
  z-index: 5;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), z-index 0s;
}

/* while any card is being read, every other card blurs into the background
   so attention stays on the one testimonial until the pointer moves on */
.testimonials-grid:has(.testimonial-card:hover) .testimonial-card:not(:hover) {
  filter: blur(4px);
  opacity: 0.45;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}

.testimonial-card .quote {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  transform: scale(1);
  transform-origin: top left;
  transition: transform 0.35s var(--ease);
}

.testimonial-card:hover .quote { transform: scale(0.9346); } /* 1 / 1.07, cancels the card's scale */

.testimonial-card .author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.testimonial-card .author img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--border);
  position: relative;
  z-index: 3;
  transform-origin: right top;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* the face bubble grows in place — right where the small avatar already
   sits. Anchored to its top-right corner (transform-origin: right top),
   which sits just below the quote's bottom border — so it only ever grows
   left and DOWN, past the card's own bottom edge into empty space, never
   up into the quote text or right over the name/role. */
.testimonial-card:hover .author img {
  transform: translateX(-10px) scale(3.3);
  box-shadow: 0 22px 44px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
}

.testimonial-card .author strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 3px;
}
.testimonial-card .author span {
  font-size: 0.76rem;
  color: var(--gold);
}

.testimonial-card .author > div {
  min-width: 0;
}

/* ---------- Team ---------- */

.team-section { padding: 100px 0; background: var(--bg); border-top: 1px solid var(--border); }

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.leader-card {
  text-align: center;
}

.leader-photo {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.leader-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.leader-card:hover .leader-photo img { transform: scale(1.06); }

.leader-card strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.leader-card span { font-size: 0.82rem; color: var(--gold); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.team-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--border);
}

.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.team-photo:hover img { transform: scale(1.06); }

.team-photo.wide { grid-column: span 2; aspect-ratio: 16/9; }

.team-caption {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.team-caption p { color: var(--text-muted); max-width: 560px; font-size: 0.94rem; }

.director-credit { text-align: right; }
.director-credit strong { display: block; font-size: 0.95rem; }
.director-credit span { font-size: 0.78rem; color: var(--text-faint); }

/* ---------- Benefits ---------- */

.benefits-section { padding: 100px 0; }

.benefits-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.benefits-intro { position: relative; padding-top: 8px; }

.benefits-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 16px 0 18px; }
.benefits-intro p { color: var(--text-muted); font-size: 0.98rem; }

.benefits-hand-accent {
  position: absolute;
  top: -60px;
  left: -40px;
  width: 260px;
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
  transform: rotate(8deg);
}

.benefits-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.benefit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}

.benefit-row:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 65%, var(--gold-dark));
}

.benefit-check {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.benefit-row:hover .benefit-check { background: rgba(16,12,2,0.16); color: #100c02; }

.benefit-check svg { width: 16px; height: 16px; }

.benefit-row p { font-size: 0.9rem; color: var(--text); transition: color 0.3s var(--ease); }

.benefit-row:hover p { color: #100c02; }

/* ---------- Contact form ---------- */

.contact-section {
  padding: 110px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}

.contact-info .info-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.contact-info .info-item .ic { color: var(--gold); flex-shrink: 0; }
.contact-info .info-item .ic svg { width: 22px; height: 22px; }
.contact-info .info-item strong { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.contact-info .info-item span { font-size: 0.85rem; color: var(--text-muted); }
.contact-info .info-item span a { color: var(--gold-light); transition: color 0.25s var(--ease); }
.contact-info .info-item span a:hover { color: var(--gold); }

.contact-whatsapp-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.contact-whatsapp-note svg { color: #25D366; flex-shrink: 0; }
.contact-whatsapp-note:hover {
  border-color: #25D366;
  color: var(--text);
  transform: translateY(-2px);
}

/* ---------- Stats band ---------- */

.stats-band { padding: 64px 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.stats-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-block strong {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.stat-block span { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- WhatsApp floating button ---------- */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 900;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.whatsapp-float svg { width: 30px; height: 30px; color: #fff; }

.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }

@media (max-width: 640px) {
  .whatsapp-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: span 2; }

.form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color 0.25s var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.form-foot p { font-size: 0.78rem; color: var(--text-faint); max-width: 300px; }
.form-foot-legal { margin-top: 4px; }
.form-foot-legal a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.form-foot-legal a:hover { color: var(--gold); }

.form-status {
  margin-top: 16px;
  font-size: 0.88rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: none;
}

.form-status.show { display: block; }
.form-status.ok { background: rgba(212, 175, 55, 0.12); color: var(--gold-light); border: 1px solid var(--border-strong); }
.form-status.error { background: rgba(220, 90, 70, 0.12); color: #e8a394; border: 1px solid rgba(220, 90, 70, 0.4); }

/* ---------- Final CTA ---------- */

.final-cta {
  padding: 130px var(--gutter);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 20%, rgba(212,175,55,0.16), transparent 60%);
  z-index: -1;
}

.cta-hand-accent {
  position: absolute;
  width: 280px;
  max-width: 28vw;
  left: 50%;
  bottom: 8%;
  transform: translateX(-140%) translateY(-28px) rotate(4deg);
  opacity: 0.32;
  pointer-events: none;
  z-index: -1;
}

.final-cta h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  max-width: 720px;
  margin: 0 auto 20px;
}

.final-cta p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 60px var(--gutter) 30px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { color: var(--text-faint); font-size: 0.85rem; max-width: 280px; }

.footer-col h5 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 0.88rem; color: var(--text-muted); transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width: 1100px) {
  .unit-card { grid-template-columns: 280px 1fr; }
  .unit-content { padding: 34px 32px; }
  .method-steps { grid-template-columns: repeat(3, 1fr); }
  .ia-usecases { grid-template-columns: repeat(3, 1fr); }
  .benefits-layout { gap: 40px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .leaders-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-photo.wide { grid-column: span 3; }
  .split-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-grid-problema {
    grid-template-areas:
      "heading"
      "list"
      "reveal";
    gap: 28px;
  }
  .ia-top { grid-template-columns: 1fr; }
  .ia-models { grid-template-columns: 1fr; }
}

@media (max-width: 1290px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta .btn-primary { display: none; }
  .lang-switcher-desktop { display: none; }
  .lang-switcher-mobile { display: flex; margin: 20px auto 0; }

  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 73px;
    left: 0; right: 0;
    height: calc(100vh - 73px);
    height: calc(100dvh - 73px);
    background: #0a0a0c;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    z-index: 999;
    padding: 24px var(--gutter) 32px;
    gap: 22px;
    overflow-y: auto;
  }

  .contact-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: span 1; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .benefits-layout { grid-template-columns: 1fr; gap: 32px; }
  .benefits-hand-accent { display: none; }
  .unit-card { grid-template-columns: 1fr; }
  .unit-photo { min-height: 280px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 120px; }
  .unit-content { padding: 28px 22px; }
  .unit-photo { min-height: 220px; }
  .method-steps { grid-template-columns: 1fr 1fr; }
  .ia-usecases { grid-template-columns: 1fr 1fr; }
  .brand-cell { width: 160px; height: 112px; }
  .brand-cell img { max-height: 60px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-photo.wide { grid-column: span 2; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .leaders-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stats-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .stats-band { padding: 48px 0; }
  .split-section, .units-section, .method-section, .ia-section, .trust-section, .testimonials-section, .team-section, .benefits-section, .contact-section { padding: 70px 0; }
  .final-cta { padding: 90px var(--gutter); }
  .cta-hand-accent { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { flex-direction: column; }
}

@media (max-width: 420px) {
  .method-steps, .ia-usecases, .team-grid { grid-template-columns: 1fr 1fr; }
  .benefits-list { grid-template-columns: 1fr; }
  .brand-cell { width: 130px; height: 92px; }
  .brand-cell img { max-height: 48px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (privacidad.html / terminos.html) ---------- */

.legal-page { padding: 160px 0 100px; }

.legal-container { max-width: 780px; }

.legal-page h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 10px 0 6px;
}

.legal-updated { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 28px; }

.legal-disclaimer {
  background: var(--gold-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.legal-page h2 {
  font-size: 1.15rem;
  margin: 40px 0 12px;
}

.legal-page p {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.98rem;
  margin-bottom: 14px;
}

.legal-page ul {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.98rem;
  margin: 0 0 14px 1.3em;
}

.legal-page ul li { margin-bottom: 4px; }

.legal-page a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.legal-back { margin-top: 48px; }
.legal-back a { text-decoration: none; font-weight: 600; }

.footer-legal-links {
  display: flex;
  gap: 20px;
  font-size: 0.85rem;
}
.footer-legal-links a { color: var(--text-faint); }
.footer-legal-links a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .legal-page { padding: 130px 0 70px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}