:root {
  --black: #050505;
  --black-2: #0a0a0a;
  --black-3: #111111;
  --gold: #d6b04f;
  --gold-soft: #ead58e;
  --white: #f5f1e8;
  --muted: #aaa49a;
  --line: rgba(214, 176, 79, 0.20);
  --display: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 0 5vw;
  background: rgba(5, 5, 5, 0.90);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(214, 176, 79, 0.18);
}
.brand img { width: 188px; height: 72px; object-fit: contain; object-position: left center; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  color: #d0cbc1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.main-nav a { position: relative; }
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.main-nav a:hover { color: var(--gold-soft); }
.main-nav a:hover::after { width: 100%; }
.nav-cta { padding: 0.8rem 1.15rem; border: 1px solid var(--gold); color: var(--gold-soft); }
.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.menu-button span { display: block; width: 22px; height: 2px; background: var(--gold); border-radius: 99px; transition: .3s ease; }
.menu-button.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-button.active span:nth-child(2) { opacity: 0; }
.menu-button.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* HERO */
.hero {
  position: relative;
  min-height: calc(100vh - 92px);
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--line);
}
.hero-image {
  position: absolute;
  inset: 0;
  background-image: url("assets/fondo-elsa.jpg");
  background-size: cover;
  background-position: center center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.86) 25%, rgba(0,0,0,.34) 54%, rgba(0,0,0,.08) 78%),
    linear-gradient(0deg, rgba(0,0,0,.40), transparent 45%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 92px);
  max-width: 760px;
  padding: 7vw 0 7vw 8vw;
}
.kicker {
  margin: 0 0 1.2rem;
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.kicker.light { color: var(--gold-soft); }
.hero h1,
.editorial-section h2,
.service-feature h2,
.speaker h2,
.contact h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.94;
}
.hero h1 { font-size: clamp(68px, 7.6vw, 128px); letter-spacing: -0.055em; }
.hero h1 span { color: var(--gold); font-style: italic; }
.hero-phrase {
  max-width: 640px;
  margin: 2rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(24px, 2.15vw, 36px);
  line-height: 1.2;
}
.hero-description { max-width: 610px; margin: 0 0 2rem; color: #bbb5aa; font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: .5rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.35rem;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: .3s ease;
}
.gold-button { background: var(--gold); color: #090909; }
.gold-button:hover { background: var(--gold-soft); }
.outline-button { width: max-content; margin-top: 1.4rem; border-color: var(--gold); color: var(--gold-soft); }
.outline-button:hover { background: var(--gold); color: #080808; }
.text-link { padding-bottom: .3rem; border-bottom: 1px solid currentColor; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.vertical-note {
  position: absolute;
  top: 50%;
  right: 17px;
  z-index: 3;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
}

/* EDITORIAL */
.editorial-section { position: relative; padding: 9vw; background: var(--black); }
.section-number { position: absolute; top: 4vw; right: 5vw; color: var(--gold); font-family: var(--display); font-size: 18px; }
.intro { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10vw; }
.intro h2, .section-heading h2, .ideal h2 { font-size: clamp(42px, 5vw, 76px); letter-spacing: -0.04em; }
.intro-copy { max-width: 680px; padding-top: 3rem; color: #bcb6ab; }
.large-copy { margin-top: 0; color: var(--white); font-family: var(--display); font-size: clamp(24px,2.3vw,34px); line-height: 1.35; }
.signature { margin-top: 2rem; color: var(--gold); font-family: var(--display); font-size: 30px; font-style: italic; }

/* QUOTE */
.quote-parallax {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76vh;
  padding: 8vw;
  background-image: url("assets/elsa-aguirre-cita.jpg");
  background-size: cover;
  background-position: center 46%;
  background-attachment: fixed;
}
.quote-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.48)); }
.quote-content { position: relative; max-width: 980px; text-align: center; color: var(--white); }
.quote-content blockquote { margin: 0; font-family: var(--display); font-size: clamp(44px,6.2vw,92px); font-weight: 500; line-height: 1.06; }

/* SOLUCIONES */
.section-heading { max-width: 900px; margin-bottom: 5rem; }
.section-heading.narrow { max-width: 760px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar-grid article { padding: 3rem 3vw; border-right: 1px solid var(--line); }
.pillar-grid article:last-child { border-right: 0; }
.pillar-grid span { color: var(--gold); font-family: var(--display); font-style: italic; }
.pillar-grid h3, .horli-grid h3, .ideal-columns h3 {
  margin: .8rem 0;
  color: var(--white);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
}
.pillar-grid p, .horli-grid p, .ideal-columns p { color: var(--muted); }

/* METRICS */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; padding: 3.2rem 8vw; background: var(--gold); color: #080808; }
.metrics div { display: flex; flex-direction: column; padding-right: 2rem; border-right: 1px solid rgba(0,0,0,.25); }
.metrics div:last-child { border-right: 0; }
.metrics strong { font-family: var(--display); font-size: 50px; font-weight: 500; }
.metrics span { max-width: 190px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

/* DIFERENCIALES */
.horli-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.horli-grid article { margin-right: 3vw; padding: 2.8rem 3vw 2.8rem 0; border-bottom: 1px solid var(--line); }
.horli-grid p { font-size: 14px; }

/* SERVICIO */
.service-feature { display: grid; grid-template-columns: 45% 55%; min-height: 760px; background: var(--black-2); color: var(--white); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-copy { display: flex; flex-direction: column; justify-content: center; padding: 9vw; }
.service-feature h2 { font-size: clamp(62px,7vw,112px); font-style: italic; }
.service-copy p { max-width: 520px; color: #bcb6ab; }
.service-image {
  background-image: linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)), url("assets/elsa-aguirre-servicio.jpg");
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* EQUIPOS */
.ideal { display: grid; grid-template-columns: .9fr 1.4fr; gap: 9vw; }
.ideal-columns { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ideal-columns > div { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }

/* CTA IMAGE */
.speaker {
  display: flex;
  align-items: flex-end;
  min-height: 88vh;
  padding: 6vw;
  background-image: linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.70)), url("assets/elsa-aguirre-marca.jpg");
  background-size: cover;
  background-position: center 20%;
  background-attachment: fixed;
}
.speaker-card { max-width: 680px; padding: 4.5rem; background: rgba(5,5,5,.94); border: 1px solid var(--line); }
.speaker h2 { margin-bottom: 2rem; font-size: clamp(43px,5vw,72px); }
.speaker ul { columns: 2; margin-bottom: 2rem; padding-left: 1.1rem; color: #bcb6ab; }

/* CLIENTES */
.client-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.client { min-height: 128px; padding: 28px; display: flex; align-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #c9c3b8; font-size: 13px; letter-spacing: .035em; }
.client:hover { color: var(--gold-soft); background: var(--black-2); }

/* CONTACTO */
.contact { display: grid; grid-template-columns: 50% 50%; min-height: 720px; background: var(--black-3); color: var(--white); overflow: hidden; border-top: 1px solid var(--line); }
.contact-photo {
  background-image: linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.38)), url("assets/elsa-aguirre-contacto.jpg");
  background-size: cover;
  background-position: center 35%;
  filter: saturate(.72) brightness(.70);
  will-change: transform;
}
.contact-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vw; }
.contact h2 { font-size: clamp(58px,7vw,92px); font-style: italic; }
.contact-copy > p { max-width: 620px; color: #bcb6ab; }
.contact-data { display: grid; gap: .55rem; margin: 1.8rem 0 2rem; color: #bcb6ab; }
.contact-data a { color: var(--gold-soft); }
.contact-actions { display: flex; align-items: center; gap: 2rem; }
.light-link { color: var(--white); }

/* FOOTER */
footer { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1fr; align-items: center; gap: 2rem; padding: 2rem 5vw; background: #020202; color: #8f897f; border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.footer-logo img { width: 150px; height: 58px; object-fit: contain; object-position: left center; }

/* ANIMACIONES */
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { height: 76px; }
  .brand img { width: 150px; height: 58px; }
  .menu-button { display: flex; }
  .main-nav { position: absolute; top: 76px; right: 0; left: 0; display: none; flex-direction: column; align-items: flex-start; padding: 2rem 5vw; background: rgba(5,5,5,.98); border-bottom: 1px solid var(--line); }
  .main-nav.open { display: flex; }
  .hero { min-height: 82vh; }
  .hero-image { background-position: 66% center; }
  .hero-copy { min-height: 82vh; padding: 12vw 7vw; max-width: 650px; }
  .hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.60) 65%,rgba(0,0,0,.20)); }
  .vertical-note { display: none; }
  .intro, .ideal { grid-template-columns: 1fr; }
  .pillar-grid, .horli-grid { grid-template-columns: 1fr; }
  .pillar-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .metrics { grid-template-columns: 1fr 1fr; }
  .horli-grid article { margin-right: 0; }
  .service-feature, .contact { grid-template-columns: 1fr; }
  .service-image, .contact-photo { grid-row: 1; min-height: 68vh; }
  .ideal-columns > div { grid-template-columns: 1fr; }
  .speaker-card { padding: 2.5rem; }
  .client-grid { grid-template-columns: 1fr 1fr; }
  footer { grid-template-columns: 1fr 1fr; }
  .quote-parallax, .speaker { background-attachment: scroll; }
}

@media (max-width: 560px) {
  .editorial-section { padding: 20vw 7vw; }
  .hero { min-height: 92vh; }
  .hero-image { background-position: 69% center; }
  .hero-shade { background: linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.52) 42%,rgba(0,0,0,.96) 78%); }
  .hero-copy { min-height: 92vh; justify-content: flex-end; padding: 16vw 7vw 12vw; }
  .hero h1 { font-size: 58px; }
  .hero-phrase { font-size: 24px; }
  .hero-description { font-size: 14px; }
  .hero-actions, .contact-actions { flex-direction: column; align-items: flex-start; }
  .metrics { grid-template-columns: 1fr; }
  .metrics div { padding-bottom: 1.5rem; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.25); }
  .quote-content blockquote { font-size: 43px; }
  .service-copy, .contact-copy { padding: 16vw 7vw; }
  .speaker { padding: 7vw; }
  .speaker ul { columns: 1; }
  .client-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .section-number { top: 8vw; }
}

/* AJUSTES 21 AGO — header integrado, imágenes de soluciones y logos */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: 112px;
  padding: 0 5vw;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

.hero {
  min-height: 100vh;
  border-bottom: 0;
}
.hero-copy { min-height: 100vh; padding-top: 9vw; }

/* El negro del hero y del header se funden sin una barra visible. */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.90) 27%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.10) 80%),
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 22%, transparent 78%, rgba(0,0,0,.25) 100%);
}

.pillar-grid article { padding: 2.3rem 2vw 3rem; }
.pillar-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 1.25rem 0 1.8rem;
  overflow: hidden;
  background: #3e3e3e;
}
.pillar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-grid {
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.client {
  min-height: 190px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .8rem;
}
.client img {
  width: 100%;
  aspect-ratio: 1.95 / 1;
  object-fit: cover;
  background: #363636;
}
.client span {
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  color: #8f8a82;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .site-header { height: 88px; }
  .main-nav {
    top: 88px;
    background: rgba(5,5,5,.98);
    border-bottom: 1px solid var(--line);
  }
  .hero, .hero-copy { min-height: 92vh; }
  .client-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 560px) {
  .site-header { height: 80px; padding: 0 6vw; }
  .brand img { width: 135px; height: 54px; }
  .hero, .hero-copy { min-height: 100svh; }
  .client-grid { grid-template-columns: 1fr; }
  .client { min-height: 170px; }
}
.client span { display: none; }
.client { min-height: 168px; }


/* FORMULARIO WHATSAPP */
.contact-form {
  display: grid;
  gap: 1rem;
  max-width: 560px;
  margin: 2rem 0 1.5rem;
}
.contact-form label {
  display: grid;
  gap: .45rem;
}
.contact-form span {
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.contact-form input {
  width: 100%;
  padding: 1rem 1rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--white);
  font: inherit;
  outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.contact-form input::placeholder { color: #7f7a73; }
.contact-form input:focus {
  border-color: rgba(234,213,142,.75);
  background: rgba(255,255,255,.05);
}
.contact-form .button {
  width: 100%;
  margin-top: .4rem;
  cursor: pointer;
}
.contact-data.compact {
  margin: .25rem 0 0;
}

/* AJUSTE MOBILE 25 AGO — hero sin degradado, rostro libre y copy abajo */
@media (max-width: 560px) {
  .hero {
    min-height: 118svh;
  }

  .hero-image {
    inset: 0;
    background-size: cover;
    background-position: 66% center;
  }

  .hero-shade {
    display: none;
  }

  .hero-copy {
    min-height: 118svh;
    justify-content: flex-end;
    max-width: 100%;
    padding: 0 7vw 7svh;
  }

  .hero-copy .kicker {
    margin-bottom: .8rem;
  }

  .hero h1 {
    font-size: 54px;
    line-height: .93;
  }

  .hero-phrase {
    margin: 1.35rem 0 .8rem;
  }

  .hero-description {
    margin-bottom: 1.4rem;
  }

  .hero-actions {
    margin-top: 0;
    gap: 1rem;
  }
}

/* AJUSTES 25 AGO — HERO MÓVIL + ORDEN DE CONTACTO */
@media (max-width: 900px) {
  /* En móvil/tablet: primero formulario, después fotografía */
  .contact-copy {
    grid-row: 1;
  }

  .contact-photo {
    grid-row: 2;
    min-height: 62vh;
  }
}

@media (max-width: 560px) {
  /* Hero: la fotografía sigue a pantalla completa, sin degradado.
     El texto permanece encima, concentrado en la parte baja para liberar el rostro. */
  .hero {
    min-height: 118svh;
    background: #000;
  }

  .hero-image {
    inset: 0;
    background-size: cover;
    background-position: 60% center;
  }

  .hero-shade {
    display: none;
    background: none;
  }

  .hero-copy {
    min-height: 118svh;
    max-width: 100%;
    justify-content: flex-end;
    padding: 56svh 7vw 8vw;
  }

  .hero h1 {
    font-size: clamp(48px, 14vw, 58px);
  }

  .hero-phrase {
    margin-top: 1.25rem;
  }

  .hero-description {
    margin-bottom: 1.4rem;
  }

  .hero-actions {
    margin-top: .25rem;
    gap: 1.2rem;
  }

  .contact-copy {
    padding: 16vw 7vw 12vw;
  }

  .contact-photo {
    min-height: 58vh;
  }
}