/* =========================================================
   HOME 2026 — complementa main.css (no lo reemplaza)
   Solo se carga en /index.html
   ========================================================= */

:root {
  --clr-olive: #80924d;        /* = --clr-main-mid, legible sobre blanco */
  --clr-green: #3f836b;        /* = --clr-txt-sustainable-dark */
  --home-max: 1240px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Compensa el header fijo al saltar a #areas, #equipo, #contacto */
.home2026 [id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); }

.clr_olive { color: var(--clr-olive); }
.clr_green { color: var(--clr-green); }

/* ---------- HERO: patrón grande / chico / grande / chico ---------- */
.home2026 .slide_1 p:nth-child(1),
.home2026 .slide_1 p:nth-child(3) {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}
.home2026 .slide_1 p:nth-child(2),
.home2026 .slide_1 p:nth-child(4) {
  font-size: 24px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--clr-txt-body);
}
.home2026 .slide_1 p:nth-child(1) { color: var(--clr-txt-digital-light); }
.home2026 .slide_1 p:nth-child(3) { color: var(--clr-olive); }

/* Marca en la portada: logo + "Complex Markets Specialists" arriba de la frase.
   Aparece junto con el fade-in de .slides; después main.js anima la frase. */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
}
.hero-brand__logo {
  width: min(400px, 80%);
}
.hero-brand__tagline {
  margin-top: .75rem;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--clr-txt-digital-light);
}
/* #closing-text queda vacío: main.js lo necesita para cerrar la animación y liberar el scroll */
.home2026 #closing-text { margin: 0; min-height: 1px; }

/* ---------- QUIÉNES SOMOS / QUÉ HACEMOS ---------- */
.home2026 .slide_2 {
  height: auto;
  padding: 4.5rem 0;
}
.home2026 .slide_2 .slide__columns { align-items: flex-start; }
.home2026 .slide_2 .clr_olive a:hover { color: var(--clr-hover-sustainable-light); }

/* ---------- Bloques nuevos (áreas, equipo) ---------- */
.home-block {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 4.5rem var(--margin-large);
  line-height: 1.5;
}
.home-block__title {
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3.5rem;
}
.home-block p { text-align: justify; text-justify: inter-word; }
.dyn { font-weight: 400; font-style: italic; }

/* Áreas de trabajo */
.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4.5rem 4rem;
}
.area__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.areas__blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background-color: var(--clr-bg-digital-var1);
}
.home-block .areas__blog p { text-align: center; font-size: 22px; font-weight: 400; }
.areas__blog a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--clr-txt-digital-dark);
}
.areas__blog a:hover { color: var(--clr-hover-digital-dark); }

/* Equipo */
.lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem 4rem;
  align-items: start;
  margin-bottom: 4.5rem;
}
.team-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 4rem 6rem;
}
.member__photo {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 1rem;
}
.lead .member__photo { max-width: 360px; }
.member__name { font-size: 24px; font-weight: 700; }
.lead .member__name { font-size: 28px; }
.member__role {
  font-size: 19px;
  font-style: italic;
  margin-bottom: .75rem;
}
.lead .member__role { margin-bottom: 0; }
.lead__bio p {
  line-height: 1.8;
  letter-spacing: .02em;
  margin-bottom: 1.25rem;
}
.member__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  padding-top: .5rem;
  font-size: 24px;
}
.member__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  opacity: .7;
  transition: opacity .2s ease-in;
}
.member__social a:hover,
.member__social a:focus-visible { opacity: 1; }

/* Contacto */
.home2026 .slide_5 .contact-info > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: 18px;
}
.home2026 .slide_5 .contact-info i {
  font-size: 1.75rem;
  width: 2.25rem;
  text-align: center;
}

/* Foco visible para teclado */
.home2026 a:focus-visible {
  outline: 2px solid var(--clr-txt-digital-light);
  outline-offset: 3px;
}

/* ---------- Responsive (mismos cortes que main.css) ---------- */
@media screen and (max-width: 900px) {
  .home-block { padding: 3.5rem var(--margin-medium); }
  .areas__grid, .team-home__grid { gap: 3.5rem 3rem; }
}
@media screen and (max-width: 600px) {
  .home-block { padding: 3rem 1rem; }
  .home-block p { text-align: left; }   /* como .col--text p en main.css: sin justificado en celular */
  .home-block__title { font-size: 28px; margin-bottom: 2.5rem; }
  .area__title { font-size: 24px; }
  .home2026 .slide_1 p:nth-child(1),
  .home2026 .slide_1 p:nth-child(3) { font-size: 40px; }
  .home2026 .slide_2 { padding: 2rem 0; }
  .hero-brand { margin-bottom: 2rem; }
  .hero-brand__tagline { font-size: 12px; letter-spacing: .24em; }
}

/* Evita 1px de scroll horizontal en móvil mientras los títulos entran desde el costado */
.home2026 .slides { overflow-x: clip; }

/* ---------- Versión en inglés: "hard data, clear stories"
   El adjetivo va antes del sustantivo → chico / GRANDE / chico / GRANDE ---------- */
.home2026.hero-en .slide_1 p:nth-child(1),
.home2026.hero-en .slide_1 p:nth-child(3) {
  font-size: 24px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--clr-txt-body);
}
.home2026.hero-en .slide_1 p:nth-child(2),
.home2026.hero-en .slide_1 p:nth-child(4) {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}
.home2026.hero-en .slide_1 p:nth-child(2) { color: var(--clr-txt-digital-light); }
.home2026.hero-en .slide_1 p:nth-child(4) { color: var(--clr-olive); }
@media screen and (max-width: 600px) {
  .home2026.hero-en .slide_1 p:nth-child(2),
  .home2026.hero-en .slide_1 p:nth-child(4) { font-size: 40px; }
}