/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   HOME MAIN CONTAINERS V2

   Replica estructural de la propuesta aprobada.

   IMPORTANTE:
   - no modifica fondos generales de las secciones
   - no modifica header
   - no modifica hero
   - no modifica productos
   - no modifica blog
   - no modifica footer
   ========================================================== */

:root {
  --km-v2-pink: #ef0f74;
  --km-v2-yellow: #ffbd0a;
  --km-v2-blue: #078ee9;
  --km-v2-green: #20d68c;
  --km-v2-cream: #efd4b8;
  --km-v2-white: #fffaf4;
  --km-v2-line: rgba(255, 255, 255, 0.12);
  --km-v2-panel: rgba(10, 13, 16, 0.78);
  --km-v2-max: 1260px;
}


/* ==========================================================
   CONTENEDOR GENERAL DE LAS CINCO SECCIONES
   NO CAMBIA SU BACKGROUND
   ========================================================== */

body[data-page="inicio"]
:is(
  .story-section-v2,
  .impact-section-v2,
  .reasons-section-v2,
  .cup-section-v2,
  .stores-section-v2
)
> .container {
  width: min(
    var(--km-v2-max),
    calc(100% - 56px)
  );

  max-width: none;

  margin-right: auto;
  margin-left: auto;
}


/* ==========================================================
   1. NUESTRA HISTORIA
   ========================================================== */

.story-grid-v2 {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(430px, 0.96fr);

  gap: 62px;

  min-height: 565px;

  align-items: center;

  padding:
    54px
    52px
    126px;

  border:
    1px solid
    rgba(255, 189, 10, 0.22);

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.004)
    );

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.20);
}


.story-copy-v2 {
  position: relative;

  z-index: 5;

  min-width: 0;

  max-width: 620px;
}


.story-copy-v2 .eyebrow {
  margin-bottom: 18px;

  color:
    var(--km-v2-yellow) !important;
}


.story-copy-v2 h2 {
  max-width: 620px;

  margin:
    0
    0
    25px;

  color:
    var(--km-v2-white);

  font-size:
    clamp(
      3.5rem,
      4.9vw,
      5.65rem
    );

  line-height: 0.94;

  letter-spacing: -0.045em;
}


.story-copy-v2 > p {
  max-width: 590px;

  margin:
    0
    0
    17px;

  color:
    rgba(255, 255, 255, 0.74);

  font-size: 0.99rem;

  line-height: 1.72;
}


.story-media-v2 {
  position: relative;

  z-index: 3;

  min-width: 0;

  padding:
    8px
    0;
}


.story-media-v2 img {
  position: relative;

  z-index: 5;

  display: block;

  width: 100%;
  height: 445px;

  object-fit: cover;

  border:
    1px solid
    rgba(255, 189, 10, 0.66);

  border-radius: 18px;

  box-shadow:
    0 28px 58px
    rgba(0, 0, 0, 0.34);
}


.story-frame-v2 {
  position: absolute;

  z-index: 1;

  border-radius: 18px;

  pointer-events: none;
}


.story-frame-v2--yellow {
  top: -17px;
  right: -22px;

  width: 92%;
  height: 94%;

  border:
    2px solid
    rgba(255, 189, 10, 0.86);
}


.story-frame-v2--pink {
  bottom: -20px;
  left: -29px;

  width: 94%;
  height: 76%;

  border:
    2px solid
    rgba(239, 15, 116, 0.74);
}


.story-stamp-v2 {
  position: absolute;

  z-index: 8;

  top: -35px;
  right: -31px;

  display: flex;

  width: 132px;
  height: 132px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border:
    2px solid
    var(--km-v2-yellow);

  border-radius: 50%;

  background:
    #0a0d10;

  box-shadow:
    0 18px 46px
    rgba(0, 0, 0, 0.45);

  text-align: center;
}


.story-stamp-v2 small {
  color:
    var(--km-v2-yellow);

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.story-stamp-v2 strong {
  margin:
    4px
    0
    3px;

  color:
    var(--km-v2-yellow);

  font-family:
    var(--serif);

  font-size: 2.2rem;

  line-height: 1;
}


.story-stamp-v2 span {
  color:
    var(--km-v2-yellow);

  font-size: 0.57rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


/* Franja inferior */

.story-facts-v2 {
  position: absolute;

  z-index: 9;

  right: 49px;
  bottom: 27px;
  left: 49px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  min-height: 88px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 189, 10, 0.70);

  border-radius: 15px;

  background:
    rgba(8, 11, 14, 0.97);

  box-shadow:
    0 20px 46px
    rgba(0, 0, 0, 0.32);
}


.story-fact-v2 {
  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  padding:
    15px
    22px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.story-fact-v2:last-child {
  border-right: 0;
}


.story-fact-icon-v2 {
  display: grid;

  width: 36px;
  height: 36px;

  place-items: center;

  color:
    var(--km-v2-yellow);
}


.story-fact-icon-v2 svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.story-fact-v2
> div
> span {
  display: block;

  margin-bottom: 5px;

  color:
    var(--km-v2-yellow);

  font-size: 0.59rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.story-fact-v2 strong {
  display: block;

  color:
    #fff;

  font-family:
    var(--serif);

  font-size: 1rem;

  line-height: 1.16;
}


/* ==========================================================
   2. CAFÉ CON PROPÓSITO
   ========================================================== */

.impact-layout-v2 {
  display: grid;

  grid-template-columns:
    minmax(355px, 0.9fr)
    minmax(0, 1.6fr);

  gap: 64px;

  align-items: center;
}


.impact-heading-v2 {
  min-width: 0;

  max-width: 490px;
}


.impact-heading-v2 .eyebrow {
  color:
    var(--km-v2-yellow) !important;
}


.impact-heading-v2 h2 {
  max-width: 490px;

  margin:
    14px
    0
    23px;

  color:
    var(--km-v2-white);

  font-size:
    clamp(
      3.4rem,
      4.45vw,
      5rem
    );

  line-height: 0.95;

  letter-spacing: -0.043em;
}


.impact-heading-v2 > p:last-child {
  max-width: 435px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.73);

  font-size: 0.98rem;

  line-height: 1.67;
}


.impact-grid-v2 {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.impact-card-v2 {
  --km-card-accent:
    var(--km-v2-pink);

  position: relative;

  display: flex;

  min-width: 0;
  min-height: 350px;

  flex-direction: column;

  padding:
    28px
    24px
    70px;

  overflow: hidden;

  border:
    1px solid
    var(--km-card-accent);

  border-radius: 18px;

  background:
    var(--km-v2-panel);

  box-shadow:
    0 22px 46px
    rgba(0, 0, 0, 0.20);
}


.impact-card-v2::before {
  position: absolute;

  top: -60px;
  right: -60px;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background:
    var(--km-card-accent);

  content: "";

  opacity: 0.08;

  filter:
    blur(28px);

  pointer-events: none;
}


.impact-card-v2--pink {
  --km-card-accent:
    var(--km-v2-pink);
}


.impact-card-v2--blue {
  --km-card-accent:
    var(--km-v2-blue);
}


.impact-card-v2--yellow {
  --km-card-accent:
    var(--km-v2-yellow);
}


.impact-number-v2 {
  position: absolute;

  top: 17px;
  left: 17px;

  display: grid;

  width: 29px;
  height: 29px;

  place-items: center;

  border:
    1px solid
    var(--km-card-accent);

  border-radius: 50%;

  color:
    var(--km-card-accent);

  font-size: 0.61rem;

  font-weight: 800;
}


.impact-icon-v2 {
  display: grid;

  width: 56px;
  height: 56px;

  place-items: center;

  margin:
    30px
    0
    30px;

  color:
    var(--km-card-accent);
}


.impact-icon-v2 svg {
  width: 50px;
  height: 50px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.impact-card-v2 h3 {
  margin:
    0
    0
    13px;

  color:
    #fff;

  font-size:
    clamp(
      1.62rem,
      1.8vw,
      2.08rem
    );

  line-height: 1.02;
}


.impact-card-v2 p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.87rem;

  line-height: 1.53;
}


.impact-arrow-v2 {
  position: absolute;

  bottom: 19px;
  left: 23px;

  display: grid;

  width: 35px;
  height: 35px;

  place-items: center;

  border:
    1px solid
    var(--km-card-accent);

  border-radius: 50%;

  color:
    #fff;

  font-size: 1rem;
}


/* ==========================================================
   3. POR QUÉ KAMANA
   ========================================================== */

.reasons-layout-v2 {
  display: block;
}


.reasons-heading-v2 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(290px, 0.8fr);

  gap: 72px;

  align-items: end;

  margin-bottom: 38px;
}


.reasons-heading-v2 .eyebrow {
  color:
    var(--km-v2-yellow) !important;
}


.reasons-heading-v2 h2 {
  max-width: 740px;

  margin:
    14px
    0
    0;

  color:
    var(--km-v2-white);

  font-size:
    clamp(
      3.45rem,
      4.65vw,
      5.3rem
    );

  line-height: 0.94;

  letter-spacing: -0.045em;
}


.reasons-intro-v2 {
  max-width: 390px;

  margin:
    0
    0
    8px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.97rem;

  line-height: 1.62;
}


.reasons-grid-v2 {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.reason-card-v2 {
  --km-card-accent:
    var(--km-v2-pink);

  position: relative;

  display: flex;

  min-width: 0;
  min-height: 318px;

  flex-direction: column;

  padding:
    27px
    24px
    65px;

  overflow: hidden;

  border:
    1px solid
    var(--km-card-accent);

  border-radius: 17px;

  background:
    var(--km-v2-panel);

  box-shadow:
    0 20px 44px
    rgba(0, 0, 0, 0.18);
}


.reason-card-v2::before {
  position: absolute;

  top: -54px;
  right: -54px;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background:
    var(--km-card-accent);

  content: "";

  opacity: 0.07;

  filter:
    blur(25px);

  pointer-events: none;
}


.reason-card-v2--pink {
  --km-card-accent:
    var(--km-v2-pink);
}


.reason-card-v2--yellow {
  --km-card-accent:
    var(--km-v2-yellow);
}


.reason-card-v2--blue {
  --km-card-accent:
    var(--km-v2-blue);
}


.reason-card-v2--green {
  --km-card-accent:
    var(--km-v2-green);
}


.reason-icon-v2 {
  display: grid;

  width: 54px;
  height: 54px;

  place-items: center;

  margin-bottom: 27px;

  color:
    var(--km-card-accent);
}


.reason-icon-v2 svg {
  width: 47px;
  height: 47px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.reason-card-v2 h3 {
  margin:
    0
    0
    13px;

  color:
    #fff;

  font-size:
    clamp(
      1.42rem,
      1.55vw,
      1.78rem
    );

  line-height: 1.04;
}


.reason-card-v2 p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.85rem;

  line-height: 1.52;
}


.reason-arrow-v2 {
  position: absolute;

  bottom: 18px;
  left: 23px;

  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border:
    1px solid
    var(--km-card-accent);

  border-radius: 50%;

  color:
    #fff;

  font-size: 0.95rem;
}


/* ==========================================================
   4. PERFIL DE TAZA
   ========================================================== */

.cup-grid-v2 {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(315px, 0.82fr)
    minmax(430px, 1.18fr)
    minmax(220px, 0.58fr);

  gap: 30px;

  align-items: center;

  overflow: visible;
}


.cup-copy-v2 {
  min-width: 0;
}


.cup-copy-v2 .eyebrow {
  color:
    var(--km-v2-blue) !important;
}


.cup-copy-v2 h2 {
  max-width: 455px;

  margin:
    14px
    0
    22px;

  color:
    var(--km-v2-white);

  font-size:
    clamp(
      3.4rem,
      4.65vw,
      5.15rem
    );

  line-height: 0.93;

  letter-spacing: -0.045em;
}


.cup-copy-v2 > p {
  max-width: 415px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.73);

  font-size: 0.98rem;

  line-height: 1.65;
}


.flavor-list-v2 {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin:
    26px
    0
    0;

  padding: 0;

  list-style: none;
}


.flavor-list-v2 li {
  padding:
    8px
    16px;

  border:
    1px solid
    var(--km-v2-yellow);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.015);

  color: #fff;

  font-size: 0.73rem;

  line-height: 1;
}


.flavor-list-v2 li:nth-child(3) {
  border-color:
    var(--km-v2-pink);
}


.flavor-list-v2 li:nth-child(4) {
  border-color:
    var(--km-v2-blue);
}


.cup-media-v2 {
  position: relative;

  min-width: 0;

  overflow: visible;
}


.cup-media-v2 img {
  position: relative;

  z-index: 5;

  display: block;

  width: 100%;
  height: 410px;

  object-fit: cover;

  border:
    1px solid
    rgba(255, 189, 10, 0.72);

  border-radius: 18px;

  box-shadow:
    0 27px 60px
    rgba(0, 0, 0, 0.31);
}


.cup-frame-v2 {
  position: absolute;

  z-index: 1;

  border-radius: 18px;

  pointer-events: none;
}


.cup-frame-v2--yellow {
  top: -20px;
  left: -20px;

  width: 94%;
  height: 94%;

  border:
    2px solid
    rgba(255, 189, 10, 0.78);
}


.cup-frame-v2--pink {
  right: -27px;
  bottom: -24px;

  width: 92%;
  height: 91%;

  border:
    2px solid
    rgba(239, 15, 116, 0.73);
}


.cup-note-v2 {
  position: relative;

  z-index: 8;

  min-width: 0;

  margin-left: -63px;

  padding:
    34px
    28px;

  border:
    1px solid
    rgba(255, 189, 10, 0.72);

  border-radius: 16px;

  background:
    rgba(8, 11, 14, 0.97);

  box-shadow:
    0 23px 50px
    rgba(0, 0, 0, 0.34);
}


.cup-note-title-v2 {
  margin: 0;

  color:
    var(--km-v2-yellow);

  font-family:
    "Brush Script MT",
    "Segoe Script",
    cursive;

  font-size: 2.05rem;

  line-height: 1.18;
}


.cup-note-line-v2 {
  display: block;

  width: 46px;
  height: 2px;

  margin:
    23px
    0;

  background:
    var(--km-v2-yellow);
}


.cup-note-v2
> p:last-child {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.77);

  font-size: 0.89rem;

  line-height: 1.62;
}


/* ==========================================================
   5. VISÍTANOS
   ========================================================== */

.stores-layout-v2 {
  display: grid;

  grid-template-columns:
    minmax(315px, 0.72fr)
    minmax(0, 1.28fr);

  gap: 66px;

  align-items: center;
}


.stores-copy-v2 {
  min-width: 0;

  max-width: 450px;
}


.stores-copy-v2 .eyebrow {
  color:
    var(--km-v2-yellow) !important;
}


.stores-copy-v2 h2 {
  max-width: 440px;

  margin:
    14px
    0
    19px;

  color:
    var(--km-v2-white);

  font-size:
    clamp(
      3.4rem,
      4.55vw,
      5.05rem
    );

  line-height: 0.94;

  letter-spacing: -0.045em;
}


.stores-copy-v2 > p {
  max-width: 400px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.73);

  font-size: 0.98rem;

  line-height: 1.63;
}


.stores-main-cta-v2 {
  display: inline-flex;

  min-height: 50px;

  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-top: 27px;

  padding:
    12px
    23px;

  border-radius: 999px;

  background:
    var(--km-v2-yellow);

  color:
    #111;

  box-shadow:
    0 13px 30px
    rgba(255, 189, 10, 0.18);

  font-size: 0.82rem;

  font-weight: 800;

  text-decoration: none;
}


.stores-main-cta-v2 span {
  font-size: 1.12rem;
}


.stores-media-v2 {
  position: relative;

  min-width: 0;

  height: 382px;

  overflow: visible;

  border:
    1px solid
    rgba(255, 189, 10, 0.70);

  border-radius: 19px;

  box-shadow:
    0 27px 60px
    rgba(0, 0, 0, 0.30);
}


.stores-media-v2 img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 18px;
}


.store-location-badge-v2 {
  position: absolute;

  z-index: 8;

  top: 50%;
  right: -50px;

  display: flex;

  width: 118px;
  height: 118px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  transform:
    translateY(-50%);

  border:
    2px solid
    var(--km-v2-yellow);

  border-radius: 50%;

  background:
    #0b0e11;

  box-shadow:
    0 19px 48px
    rgba(0, 0, 0, 0.41);

  color:
    var(--km-v2-yellow);

  text-align: center;

  text-decoration: none;
}


.store-location-icon-v2 {
  display: grid;

  width: 35px;
  height: 35px;

  place-items: center;

  border-radius: 50%;

  background:
    var(--km-v2-yellow);

  color: #111;
}


.store-location-icon-v2 svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.store-location-badge-v2 strong {
  color:
    var(--km-v2-yellow);

  font-size: 0.69rem;

  line-height: 1.18;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

  .impact-card-v2,
  .reason-card-v2,
  .stores-main-cta-v2,
  .store-location-badge-v2 {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease;
  }


  .impact-card-v2:hover,
  .reason-card-v2:hover {
    transform:
      translateY(-5px);

    box-shadow:
      0 28px 58px
      rgba(0, 0, 0, 0.28);
  }


  .stores-main-cta-v2:hover {
    transform:
      translateY(-2px);
  }


  .store-location-badge-v2:hover {
    transform:
      translateY(-50%)
      scale(1.04);
  }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1120px) {

  body[data-page="inicio"]
  :is(
    .story-section-v2,
    .impact-section-v2,
    .reasons-section-v2,
    .cup-section-v2,
    .stores-section-v2
  )
  > .container {
    width:
      min(
        930px,
        calc(100% - 40px)
      );
  }


  .story-grid-v2 {
    grid-template-columns:
      1fr;

    gap: 38px;

    padding-bottom: 42px;
  }


  .story-facts-v2 {
    position: static;

    width: 100%;

    margin-top: 4px;
  }


  .story-media-v2 img {
    height: 500px;
  }


  .impact-layout-v2 {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .impact-heading-v2 {
    max-width: 720px;
  }


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


  .cup-grid-v2 {
    grid-template-columns:
      minmax(300px, 0.9fr)
      minmax(0, 1.1fr);

    gap: 36px;
  }


  .cup-note-v2 {
    grid-column:
      1 / -1;

    max-width: 480px;

    margin-left: auto;
  }


  .stores-layout-v2 {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .stores-copy-v2 {
    max-width: 720px;
  }


  .store-location-badge-v2 {
    right: 18px;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  body[data-page="inicio"]
  :is(
    .story-section-v2,
    .impact-section-v2,
    .reasons-section-v2,
    .cup-section-v2,
    .stores-section-v2
  )
  > .container {
    width:
      calc(100% - 28px);
  }


  .story-grid-v2 {
    padding:
      28px
      22px;

    border-radius: 19px;
  }


  .story-copy-v2 h2,
  .impact-heading-v2 h2,
  .reasons-heading-v2 h2,
  .cup-copy-v2 h2,
  .stores-copy-v2 h2 {
    font-size:
      clamp(
        2.65rem,
        13vw,
        4rem
      );
  }


  .story-media-v2 img {
    height: 360px;
  }


  .story-stamp-v2 {
    top: -22px;
    right: -9px;

    width: 102px;
    height: 102px;
  }


  .story-stamp-v2 strong {
    font-size: 1.7rem;
  }


  .story-facts-v2 {
    grid-template-columns: 1fr;
  }


  .story-fact-v2 {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.10);
  }


  .story-fact-v2:last-child {
    border-bottom: 0;
  }


  .impact-grid-v2 {
    grid-template-columns: 1fr;
  }


  .impact-card-v2 {
    min-height: 280px;
  }


  .reasons-heading-v2 {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .reasons-grid-v2 {
    grid-template-columns: 1fr;
  }


  .reason-card-v2 {
    min-height: 270px;
  }


  .cup-grid-v2 {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .cup-media-v2 img {
    height: 335px;
  }


  .cup-note-v2 {
    max-width: none;

    margin:
      -8px
      10px
      0;
  }


  .stores-media-v2 {
    height: 320px;
  }


  .store-location-badge-v2 {
    top: auto;
    right: 14px;
    bottom: 14px;

    width: 94px;
    height: 94px;

    transform: none;
  }


  .store-location-badge-v2:hover {
    transform:
      scale(1.04);
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .impact-card-v2,
  .reason-card-v2,
  .stores-main-cta-v2,
  .store-location-badge-v2 {
    transition: none;
  }
}