/* ============================================================
   FYR LEGAL — página temporal (evento)
   Hoja de estilos autocontenida: no depende del sistema de
   paginación de pantalla completa del portal principal, porque
   esta versión es un scroll normal de una sola página.
   ============================================================ */
:root{
  --charcoal:#232323;
  --charcoal-deep:#161616;
  --gris:#f9f6f4;
  --gris-dim:#cdc6c0;
  --magenta:#e30068;
  --magenta-deep:#61002c;
  --magenta-soft:#edbdd3;
  --white:#ffffff;
  --font-display:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --ease-portal:cubic-bezier(.65,0,.15,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
body{
  margin:0; background:var(--charcoal); color:var(--gris);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--magenta); color:#fff; }

/* ---------------- HEADER (fijo) ---------------- */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 6vw; background:rgba(35,35,35,.7); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-logo{ height:44px; width:auto; display:block; border-radius:8px; padding:6px; }
.header-right{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; border:1px solid rgba(255,255,255,.25); border-radius:100px; overflow:hidden; }
.lang-switch button{
  background:none; border:none; color:var(--gris-dim); font-size:.78rem; font-weight:600;
  padding:7px 14px; transition:background 180ms ease, color 180ms ease;
}
.lang-switch button.active{ background:var(--magenta); color:#fff; }
.header-linkedin{
  display:flex; align-items:center; gap:8px; color:var(--white); text-decoration:none;
  font-size:.8rem; font-weight:600; border:1px solid rgba(255,255,255,.35);
  border-radius:100px; padding:8px 16px 8px 12px; transition:background 180ms ease, border-color 180ms ease;
}
.header-linkedin:hover{ background:var(--magenta); border-color:var(--magenta); }
.header-linkedin svg{ width:18px; height:18px; flex-shrink:0; }
@media (max-width:560px){ .header-linkedin span{ display:none; } .header-linkedin{ padding:9px; } }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:120px 6vw 80px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:-2%; z-index:0; overflow:hidden; }
.hero-bg-fallback{
  position:absolute; inset:-12%; z-index:0;
  background:radial-gradient(circle at 55% 40%, rgba(227,0,104,.32), transparent 52%),
             radial-gradient(circle at 80% 78%, rgba(97,0,44,.5), transparent 58%), var(--charcoal-deep);
  animation:bg-drift 22s ease-in-out infinite alternate;
}
@keyframes bg-drift{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.1) translate(-2.5%,-2%); } }
.hero-video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero-video.bg-fallback-only{ display:none; }
.hero-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(22,22,22,.35) 0%, rgba(22,22,22,.6) 55%, var(--charcoal) 97%); }
.hero-inner{ position:relative; z-index:3; max-width:760px; }

.hero-title{
  font-family:var(--font-display); font-weight:600; color:var(--white);
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.04; margin:0 0 24px;
  opacity:0; transform:translateY(24px); transition:opacity 800ms var(--ease-portal), transform 800ms var(--ease-portal);
}
.hero-sub{
  font-size:1.12rem; line-height:1.6; color:var(--gris-dim); max-width:56ch; margin:0 0 34px;
  opacity:0; transform:translateY(20px); transition:opacity 800ms var(--ease-portal) 150ms, transform 800ms var(--ease-portal) 150ms;
}
.hero.is-in .hero-title, .hero.is-in .hero-sub{ opacity:1; transform:translateY(0); }

.hero-note{
  display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:16px 18px; margin-bottom:26px; max-width:56ch;
}
.hero-note .dot{ width:8px; height:8px; border-radius:50%; background:var(--magenta); margin-top:6px; flex-shrink:0; box-shadow:0 0 8px var(--magenta); }
.hero-note p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--gris-dim); }
.hero-note strong{ display:block; color:var(--white); font-weight:600; margin-bottom:2px; }

.hero-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--magenta); color:#fff;
  border:none; padding:17px 32px; font-size:.95rem; font-weight:600; border-radius:2px;
  text-decoration:none; transition:background 200ms ease, transform 200ms ease;
}
.hero-cta:hover{ background:var(--magenta-deep); transform:translateY(-1px); }

.service-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.service-chip{
  font-size:.76rem; padding:8px 15px; border-radius:100px; border:1px solid rgba(255,255,255,.22);
  color:var(--gris-dim); background:rgba(255,255,255,.03);
}

/* ---------------- SECTION SHARED ---------------- */
.section{ padding:100px 6vw; }
.section.light{ background:var(--gris); color:var(--charcoal); }
.section.dark{ background:var(--charcoal); color:var(--gris); }
.section-inner{ max-width:1180px; margin:0 auto; }
.eyebrow{ font-family:var(--font-body); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color:var(--magenta); margin:0 0 14px; }
.section h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.8rem,3.6vw,2.6rem); margin:0 0 12px; }
.section-desc{ font-size:1.02rem; color:#54595e; max-width:64ch; margin:0 0 48px; line-height:1.6; }
.section.dark .section-desc{ color:var(--gris-dim); }

/* ---------------- CREDENCIALES ---------------- */
.cred-group{ margin-bottom:48px; }
.cred-group:last-child{ margin-bottom:0; }
.cred-group h3{ font-family:var(--font-display); font-weight:500; font-size:1.1rem; margin:0 0 22px; color:var(--charcoal); }
.cred-row{ display:flex; flex-wrap:wrap; align-items:center; gap:36px; }
.cred-row img{ height:52px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(15%); opacity:.92; transition:opacity 200ms ease, filter 200ms ease; }
.cred-row img:hover{ opacity:1; filter:grayscale(0%); }
.cred-row.corp img{ height:92px; filter:none; opacity:1; border-radius:4px; }
.cred-row.badges img{ height:66px; }

/* ---------------- SEDES ---------------- */
.offices-row{ display:flex; flex-wrap:wrap; gap:56px; }
.office-item{ display:flex; flex-direction:column; gap:6px; }
.office-item .city{ font-family:var(--font-display); font-weight:500; font-size:1.4rem; color:var(--white); }
.office-item .region{ font-size:.85rem; color:var(--gris-dim); }

/* ---------------- FOOTER LEGAL ---------------- */
#site-footer{ background:var(--charcoal-deep); padding:64px 6vw 32px; color:var(--gris-dim); font-size:.85rem; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand{ max-width:40ch; line-height:1.6; }
.footer-social{
  display:flex; align-items:center; gap:10px; color:var(--white); text-decoration:none;
  font-weight:600; font-size:.88rem; background:var(--magenta); padding:11px 20px; border-radius:100px;
  transition:background 180ms ease, transform 180ms ease;
}
.footer-social:hover{ background:var(--magenta-deep); transform:translateY(-1px); }
.footer-social svg{ width:19px; height:19px; }

.legal-links{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:30px; }
.legal-links a{
  font-size:.8rem; color:var(--gris-dim); text-decoration:none; border-bottom:1px solid transparent;
  transition:color 180ms ease, border-color 180ms ease;
}
.legal-links a:hover{ color:var(--white); border-bottom-color:var(--white); }

.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.76rem; color:#8a8f94; }

/* ---------------- COOKIE BANNER ---------------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(22,22,22,.97); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12);
  padding:20px 6vw; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  transform:translateY(100%); transition:transform 400ms var(--ease-portal);
}
#cookie-banner.show{ transform:translateY(0); }
#cookie-banner p{ margin:0; font-size:.82rem; line-height:1.5; color:var(--gris-dim); max-width:70ch; }
#cookie-banner a{ color:var(--white); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-btn{ padding:10px 20px; font-size:.82rem; font-weight:600; border-radius:2px; border:none; }
.cookie-accept{ background:var(--magenta); color:#fff; }
.cookie-accept:hover{ background:var(--magenta-deep); }
.cookie-reject{ background:none; border:1px solid rgba(255,255,255,.3); color:var(--gris-dim); }
.cookie-reject:hover{ border-color:var(--white); color:var(--white); }

@media (max-width:760px){
  #site-header{ padding:14px 5vw; }
  .header-logo{ height:38px; }
  .cred-row{ gap:24px; }
  .cred-row img{ height:40px; }
  #cookie-banner{ flex-direction:column; align-items:flex-start; }
}