/* =============================================================
   One screen, no scroll. Two sides: Infraestructura (left) and
   Inteligencia (right). Hovering a side opens it to full width and
   fades the other one out.
   Palette: the official orange (#F28C38) is the only accent.
   Bases are warm near-blacks, so the orange reads as the brand.
   ============================================================= */
:root {
  --orange: #F28C38;
  --orange-deep: #D9631A;
  --orange-soft: #FFC28A;
  --cream: #FFF6EC;
  --ink-deep: #1A110C;
  --ink-deep-2: #2A1A12;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --open: 800ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 4px; }

/* =============================================================
   Header: logo and phone, over the videos
   ============================================================= */
.site-header {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; line-height: 1.1; text-shadow: 0 2px 14px rgb(10 4 16 / 0.6); }
.brand svg { width: 56px; height: 56px; flex: none; color: var(--orange); }
.brand small { display: block; font-family: var(--text); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; margin-top: 4px; }
.phone { font-family: var(--display); font-weight: 700; font-size: 30px; white-space: nowrap; text-decoration: none; text-shadow: 0 2px 14px rgb(10 4 16 / 0.6); min-height: 44px; display: inline-flex; align-items: center; }

/* Phones: smaller logo higher up, the phone moves to a floating button */
@media (max-width: 599px) {
  .phone { display: none; }
  .site-header { padding-top: 10px; }
  .brand { font-size: 16px; gap: 10px; }
  .brand svg { width: 40px; height: 40px; }
  .brand small { font-size: 9px; white-space: nowrap; }
}

.phone-float {
  display: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink-deep);
  box-shadow: 0 10px 26px rgb(10 4 16 / 0.35);
  text-decoration: none;
}
.phone-float svg { width: 24px; height: 24px; }
@media (max-width: 599px) { .phone-float { display: flex; } }

/* =============================================================
   Hero: the whole screen
   ============================================================= */
.hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink-deep);
}
.split {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: row;
}
.side {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition:
    flex-grow var(--open) var(--ease-out),
    opacity 600ms ease,
    visibility 0s linear 0s;
}
.side-it { background: var(--ink-deep); }
/* The Inteligencia side overlaps the Infraestructura side by 12 % and fades its own left edge,
   so the two videos cross-fade instead of meeting on a hard line */
.side-ia {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  margin-left: -12vw;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12vw);
  mask-image: linear-gradient(90deg, transparent 0, #000 12vw);
  transition:
    flex-grow var(--open) var(--ease-out),
    margin-left var(--open) var(--ease-out),
    opacity 600ms ease,
    visibility 0s linear 0s;
}

.side-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim: darkens the video and softens the seam between the two sides */
.side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(20 12 8 / 0.35) 0%, rgb(20 12 8 / 0.6) 55%, rgb(20 12 8 / 0.9) 100%);
}

.side-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  padding: clamp(24px, 5vw, 72px);
  display: grid;
  gap: 18px;
  transition: transform var(--open) var(--ease-out), padding var(--open) var(--ease-out);
}

/* Titles: the gradient lives in the text and the shadow sits on the box */
.side-title {
  font-family: var(--display);
  font-size: clamp(44px, 5.6vw, 110px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  hyphens: none;
  /* Extra room under the title so the gradient covers descenders such as the "g" */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  color: var(--orange);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgb(20 12 8 / 0.45)) drop-shadow(0 6px 28px rgb(20 12 8 / 0.6));
}
.side-it .side-title {
  background-image: linear-gradient(100deg, #FFD9A8 0%, var(--orange) 50%, var(--orange-deep) 100%);
}
.side-ia .side-title {
  background-image: linear-gradient(100deg, #FFE7CC 0%, #FFB36B 45%, var(--orange) 100%);
}

.side-sub {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  max-width: 36ch;
  color: var(--cream);
  /* Hidden until the side is open; the space stays reserved so nothing moves */
  opacity: 0;
  transition: opacity 500ms ease;
  text-shadow: 0 1px 2px rgb(20 12 8 / 0.6), 0 2px 18px rgb(20 12 8 / 0.7);
}

/* Subtitle and button sit below the title, out of the flow, so the title is centred on the screen.
   They take the same left and right padding as the title. */
.side-more {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  right: 0;
  padding-inline: inherit;
  display: grid;
  gap: 18px;
  justify-items: start;
}

/* Call to action on each side. Dark text on orange: white would not reach 4.5:1. */
.side-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink-deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgb(20 12 8 / 0.35);
  /* Hidden until the side is open. The space stays reserved and the link cannot be clicked while hidden. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background-color 200ms ease;
}
.side-cta:hover {
  transform: translateY(-2px);
  background: var(--orange-soft);
  box-shadow: 0 14px 30px rgb(242 140 56 / 0.4);
}

/* =============================================================
   Hover: the hovered side opens, the other one fades out.
   main.js sets data-active on .split to "it", "ia" or "none".
   ============================================================= */
.split[data-active="it"] .side-ia,
.split[data-active="ia"] .side-it {
  flex-grow: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    flex-grow var(--open) var(--ease-out),
    opacity 600ms ease,
    visibility 0s linear var(--open);
}
.split[data-active="it"] .side-it .side-content,
.split[data-active="ia"] .side-ia .side-content {
  transform: translateY(-4px);
}
.split[data-active="it"] .side-it .side-sub,
.split[data-active="ia"] .side-ia .side-sub,
.split[data-active="it"] .side-it .side-cta,
.split[data-active="ia"] .side-ia .side-cta {
  opacity: 1;
  pointer-events: auto;
}
/* An open side is never overlapped or faded at its edge */
.split[data-active="it"] .side-ia,
.split[data-active="ia"] .side-ia {
  margin-left: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Inteligencia's text starts after the fading overlap, so it stays fully opaque */
.side-ia .side-content { padding-left: calc(12vw + clamp(24px, 5vw, 72px)); }
.split[data-active="ia"] .side-ia .side-content { padding-left: clamp(24px, 5vw, 72px); }

/* Phones and narrow screens: the two sides stack, and open the same way */
@media (max-width: 859px) {
  .split { flex-direction: column; }
  /* Same overlap and cross-fade, on the horizontal seam */
  .side-ia {
    margin-left: 0;
    margin-top: -12vh;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12vh);
    mask-image: linear-gradient(180deg, transparent 0, #000 12vh);
    transition:
      flex-grow var(--open) var(--ease-out),
      margin-top var(--open) var(--ease-out),
      opacity 600ms ease,
      visibility 0s linear 0s;
  }
  .split[data-active="it"] .side-ia,
  .split[data-active="ia"] .side-ia {
    margin-top: 0;
  }
  .side-ia .side-content { padding: calc(12vh + 20px) 20px 20px; }
  .split[data-active="ia"] .side-ia .side-content { padding: 20px; }
  .side-content { padding: 20px; gap: 12px; }
  .side-title { font-size: clamp(40px, 12.5vw, 76px); }
  .side-sub { font-size: 16px; }
}

/* Mouse glow over the hero (fine pointers only; main.js sets --mx and --my) */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle 420px at var(--mx, 50%) var(--my, 50%), rgb(242 140 56 / 0.22), transparent 70%);
  mix-blend-mode: screen;
}

/* =============================================================
   Reduced motion: keep the hover behaviour, drop the video and the glow
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .side, .side-content, .side-cta { transition: none !important; }
  .side-video, .hero-glow { display: none; }
}