/* ==========================================================================
   KRAVITTAL — pages/home.css
   Secciones exclusivas del Home. Todas las medidas proceden del frame
   «Home 20260915» (1920×9738) y se expresan en proporción al lienzo.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
/*  Figma: imagen a sangre de 1920×712 con el bloque de texto en la mitad
    derecha (x=970, ancho 787).                                             */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(712px, 37.08vw);
  background: var(--kv-bg-01) center / cover no-repeat;
  padding-block: var(--kv-space-lg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kv-space-sm);
}

.hero__content { grid-column: 2; }

.hero__title {
  max-width: 787px;
  /* El diseño resuelve este titular en UNA línea dentro de una caja de
     749 px. Montserrat es ~10 % más ancha que Campton y a 58 px se parte
     en dos. Se baja a 52 px, que es el ajuste mínimo que conserva la
     composición de una sola línea. Ver README → «Decisiones técnicas». */
  font-size: clamp(2rem, 2.7083vw, 3.25rem);
}

.hero__text {
  max-width: 787px;
  padding-top: 3.25rem;              /* 347 − 263 − 32 ≈ 52 px              */
}

.hero__text p + p { padding-top: 1.25rem; }

.hero__claim {
  max-width: 749px;
  padding-top: var(--kv-space-sm);
  color: var(--kv-champagne-oscuro);
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
}


/* --- 2. Nuestra esencia -------------------------------------------------- */

.esencia__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(2rem, 9.9vw, 190px);
  align-items: start;
}

.esencia__intro { max-width: 863px; }

.esencia__subtitle { padding-top: var(--kv-space-md); }   /* 1017 − 919 − 46 */

.esencia__pillars { padding-top: var(--kv-space-md); }

.esencia__pillar + .esencia__pillar { padding-top: var(--kv-space-sm); }

.esencia__pillar h3 { padding-bottom: 0.625rem; }

.esencia__aside {
  position: relative;
  aspect-ratio: 540 / 600;
  overflow: hidden;
  margin-top: clamp(-29px, -1.51vw, 0px);
}

.esencia__aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);              /* espejada, como en el sitio en línea */
  transition: transform 1.4s var(--kv-ease-out);
}

.esencia__aside:hover img { transform: scaleX(-1) scale(1.04); }

/* 2.2 Bloque inferior: textura, cita superpuesta y texto -------------------*/

.esencia__bottom {
  display: grid;
  grid-template-columns: minmax(0, 844fr) minmax(0, 626fr);
  gap: clamp(2rem, 6.5vw, 124px);
  align-items: start;
  padding-top: var(--kv-space-xl);
}

.esencia__figure {
  position: relative;
  padding-bottom: 5.3125rem;         /* aire bajo la cita superpuesta       */
}

.esencia__figure .esencia__texture-wrap {
  width: 74.2%;                      /* 626 / 844                           */
  aspect-ratio: 626 / 403;
  overflow: hidden;
}

.esencia__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.esencia__figure:hover img { transform: scale(1.04); }

.esencia__quote {
  position: absolute;
  left: 28.3%;                       /* (401 − 162) / 844                   */
  top: 20.1%;                        /* (1667 − 1586) / 403                 */
  width: 65.05%;                     /* 549 / 844                           */
  min-height: 229px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.1875rem 1.5625rem 1.1875rem 4.0625rem;
  background: var(--kv-azul-petroleo);
  color: var(--kv-gris-hielo);
  text-align: right;
}

.esencia__body { padding-top: clamp(0px, 7.08vw, 136px); }   /* 1722 − 1586 */

.esencia__body p + p { padding-top: 1.25rem; }


/* --- 3. Equipo directivo ------------------------------------------------- */

.equipo__title { text-align: center; }

.equipo__lead {
  max-width: 863px;
  padding-top: var(--kv-space-lg);
}

.equipo__lead p { padding-top: var(--kv-space-2xs); max-width: 808px; }

.equipo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 92px;
  padding: var(--kv-space-lg) clamp(0px, 5.07vw, 81px) 0;
}

/* Escalonado vertical exacto del diseño */
.equipo__grid > :nth-child(1) { margin-top: 36px; }
.equipo__grid > :nth-child(2) { margin-top: 81px; }
.equipo__grid > :nth-child(3) { margin-top: 0; }
.equipo__grid > :nth-child(4) { margin-top: 0; }
.equipo__grid > :nth-child(5) { margin-top: 88px; }
.equipo__grid > :nth-child(6) { margin-top: 30px; }


/* --- 4. Áreas de negocio ------------------------------------------------- */

.areas__title { text-align: center; padding-bottom: var(--kv-space-sm); }

.areas__band {
  position: relative;
  background: var(--kv-azul-petroleo);
  color: var(--kv-arena-suave);
  min-height: min(642px, 33.44vw);
  display: flex;
  align-items: center;
}

.areas__media {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
}

.areas__media { overflow: hidden; }

.areas__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.areas__band:hover .areas__media img { transform: scale(1.03); }

.areas__inner {
  position: relative;
  z-index: 1;
  width: min(var(--kv-container), 100% - (var(--kv-gutter) * 2));
  margin-inline: auto;
  padding-block: var(--kv-space-lg);
}

.areas__list { max-width: 50%; }

.areas__item { display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 21px; }

.areas__item + .areas__item { padding-top: var(--kv-space-md); }

.areas__icon {
  width: 37px;
  height: auto;
  margin-top: 0.15em;
  transition: transform .6s var(--kv-ease-out);
}

.areas__item:hover .areas__icon { transform: translateY(-3px); }

.areas__item h2 { color: var(--kv-arena-suave); }

.areas__item p { padding-top: 1.1875rem; max-width: 627px; }


/* --- 5. A quién representamos -------------------------------------------- */

.representamos__title { text-align: center; padding-bottom: var(--kv-space-sm); }

.representamos__box {
  background: var(--kv-bg-03);
  padding: 57px clamp(1.5rem, 3.5vw, 67px);
}

.representamos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.9vw, 75px);
}

.representamos__icon {
  position: relative;
  width: 65px;
  height: 65px;
}

.representamos__icon img { width: 100%; height: 100%; }

.representamos__icon img + img {
  position: absolute;
  left: 23.1%;                       /* (247 − 232) / 65                    */
  top: 21.5%;                        /* (5309 − 5295) / 65                  */
  width: 55.4%;                      /* 36 / 65                             */
  height: 55.4%;
}

.representamos__item h3 {
  padding-top: 2.125rem;             /* 5394 − 5295 − 65                    */
  transition: color .4s var(--kv-ease);
}

.representamos__item:hover h3 { color: var(--kv-champagne-arena); }

.representamos__icon { transition: transform .55s var(--kv-ease-out); }
.representamos__item:hover .representamos__icon { transform: scale(1.06); }

.representamos__item p { padding-top: 1.25rem; }

.representamos__note { padding-top: 1.25rem; }


/* --- 6. Qué hacemos ------------------------------------------------------ */

.hacemos__title  { text-align: center; }
.hacemos__lead   { text-align: center; padding-top: var(--kv-space-sm); }

.tabs { padding-top: var(--kv-space-md); }

.tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 27px;
}

.tabs__tab {
  position: relative;
  overflow: hidden;
  min-height: 66px;
  padding: var(--kv-space-xs);
  background: var(--kv-bg-03);
  color: var(--kv-azul-petroleo);
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: background-color var(--kv-dur) var(--kv-ease),
              color            var(--kv-dur) var(--kv-ease);
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--kv-champagne-arena);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s var(--kv-ease-out);
}

.tabs__tab:hover::after,
.tabs__tab:focus-visible::after { transform: scaleX(1); }

.tabs__tab[aria-selected="true"] {
  background: var(--kv-azul-petroleo);
  color: var(--kv-arena-suave);
}

.tabs__tab[aria-selected="true"]::after { transform: scaleX(0); }

.tabs__panel { padding-top: var(--kv-space-md); }

/* 6.2 Espiral áurea ------------------------------------------------------- */

.espiral {
  position: relative;
  width: min(1254px, 100%);
  margin-inline: auto;
  aspect-ratio: 1254 / 777;
}

.espiral__art { position: absolute; inset: 0.12% 0.15% 0.12% 0.07%; }
.espiral__art img { width: 100%; height: 100%; object-fit: fill; }

/* Remate inferior derecho: vector aparte en Figma (43:213) */
.espiral__detalle { position: absolute; inset: 61.69% 0.07% 0.2% 61.77%; }
.espiral__detalle img { width: 100%; height: 100%; object-fit: fill; }

.espiral__label {
  position: absolute;
  display: flex;
  flex-direction: column;            /* el <small> va debajo, no al lado    */
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--kv-bg-03);
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-light);
  font-style: italic;
  font-size: var(--kv-fs-lg);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.espiral__label small {
  display: block;
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-regular);
  font-style: normal;
  font-size: var(--kv-fs-2xs);
  line-height: 1.3;
  padding-top: 0.25rem;
}

/* Posiciones tomadas literalmente de los «inset» del frame Golden_Ratio */
.espiral__label--marcas       { inset:  8.24% 58.77% 79.15% 27.51%; }
.espiral__label--monetizacion { inset:  5.83% 14.76% 85.56% 71.59%; }
.espiral__label--produccion   { inset: 35.72%  1.88% 55.66% 85.24%; }
.espiral__label--narrativa    { inset: 80.69%  5.42% 10.69% 81.71%; }
.espiral__label--visibilidad  { inset: 28.83% 77.75% 57.79%  6.54%; }
.espiral__label--crecimiento  { inset: 68.85% 92.60% 19.56% -7.02%; }

.espiral__center {
  position: absolute;
  inset: 44.27% 24.8% 47.1% 32.78%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kv-space-xs);
  background: var(--kv-bg-03);
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
  text-align: center;
}

/* Alternativa en móvil: la composición no cabe, se lista */
.espiral__list { display: none; }


/* 6.3 Panel «Nuestro método» --------------------------------------------- */

.metodo {
  background: var(--kv-azul-petroleo);
  color: var(--kv-arena-suave);
  padding: clamp(2rem, 4.896vw, 94px) clamp(1.25rem, 7.5vw, 144px) clamp(2.5rem, 5.521vw, 106px);
}

.metodo__title { margin-bottom: 0.5em; }

.metodo__intro {
  max-width: 808px;
  margin-bottom: clamp(2rem, 3.646vw, 70px);
}


/* --- 7. El Efecto Kravittal ---------------------------------------------- */

.efecto__title { text-align: center; }
.efecto__lead  { text-align: center; padding-top: var(--kv-space-sm); }

.efecto__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 9.7vw, 186px);
  padding-top: var(--kv-space-lg);
}

.efecto__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;                          /* 7674 − 7605 − 53                   */
  text-align: center;
}

.efecto__icon {
  position: relative;
  display: block;
  width: 53px;
  height: 53px;
  transition: transform .55s var(--kv-ease-out);
}

.efecto__item:hover .efecto__icon { transform: scale(1.06); }

.efecto__item span:not(.efecto__icon) { transition: color .4s var(--kv-ease); }
.efecto__item:hover span:not(.efecto__icon) { color: var(--kv-champagne-arena); }

.efecto__icon img { width: 100%; height: 100%; }

/* Dos de los cinco iconos llevan un glifo interior superpuesto */
.efecto__glifo {
  position: absolute;
  left: 18.87%;
  width: 62.26% !important;
  height: 55.84% !important;
}

.efecto__glifo--crecimiento { top: 28.30%; }
.efecto__glifo--marca       { top: 20.75%; }


/* --- 9. Responsive ------------------------------------------------------- */

@media (max-width: 1199px) {

  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__content { grid-column: 1; }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(245,239,235,.25), rgba(245,239,235,.8));
  }

  .esencia__top,
  .esencia__bottom { grid-template-columns: minmax(0, 1fr); }

  .esencia__aside img { aspect-ratio: 16 / 10; }

  .esencia__figure { padding-bottom: 0; }
  .esencia__figure img { width: 100%; }
  .esencia__quote {
    position: static;
    width: 100%;
    margin-top: -3rem;
    padding: var(--kv-space-sm);
    text-align: left;
    justify-content: flex-start;
  }

  .areas__band { min-height: 0; }
  .areas__media { inset: 0; opacity: .18; }
  .areas__list { max-width: none; }

  .representamos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .espiral { display: none; }

  .espiral__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kv-space-xs);
  }

  .espiral__list li {
    padding: var(--kv-space-xs);
    background: var(--kv-bg-03);
    font-family: var(--kv-font-alt);
    font-style: italic;
    font-size: var(--kv-fs-md);
    text-transform: uppercase;
  }

  .espiral__list small {
    display: block;
    font-style: normal;
    font-size: var(--kv-fs-xs);
    padding-top: 0.375rem;
  }

  .equipo__grid { column-gap: 18px; row-gap: 56px; }
  .equipo__grid > * { margin-top: 0 !important; }   /* el escalonado se pierde */
}

@media (max-width: 767px) {

  .equipo__grid,
  .representamos__grid,
  .espiral__list { grid-template-columns: minmax(0, 1fr); }

  .tabs__list { grid-template-columns: minmax(0, 1fr); gap: var(--kv-space-3xs); }

  .efecto__grid { gap: var(--kv-space-sm); }
  .efecto__item { flex-direction: row; gap: var(--kv-space-xs); text-align: left; width: 100%; }

  .areas__item { grid-template-columns: minmax(0, 1fr); gap: var(--kv-space-2xs); }
}