@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Montserrat:wght@400;500;600&display=swap');

  .somos-jarana {
    --sj-pink: #f9e1e4;
    --sj-pink-strong: #ffa1cd;
    --sj-cream: #f6f1eb;
    --sj-ink: #171216;
    --sj-white: #fff;
    --sj-gutter: clamp(20px, 5vw, 76px);
    --sj-content: 1440px;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--sj-ink);
    background: var(--sj-cream);
    font-family: "Montserrat", Arial, sans-serif;
    font-synthesis: none;
  }

  .somos-jarana *,
  .somos-jarana *::before,
  .somos-jarana *::after { box-sizing: border-box; }

  .somos-jarana button,
  .somos-jarana a { font: inherit; -webkit-tap-highlight-color: transparent; }

  .somos-jarana img,
  .somos-jarana video,
  .somos-jarana svg { display: block; max-width: 100%; }

  .somos-jarana .sj-hero {
    position: relative;
    display: grid;
    min-height: min(900px, 92svh);
    overflow: hidden;
    isolation: isolate;
    color: var(--sj-white);
    background: #241d21;
  }

  .somos-jarana .sj-hero__video,
  .somos-jarana .sj-hero__overlay { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
  .somos-jarana .sj-hero__video { object-fit: cover; filter: saturate(.72) contrast(1.04); }
  .somos-jarana .sj-hero__overlay { z-index: -1; background: linear-gradient(90deg, rgba(10,7,9,.72), rgba(10,7,9,.18) 66%), linear-gradient(0deg, rgba(10,7,9,.62), transparent 48%); }

  .somos-jarana .sj-hero__content {
    align-self: end;
    width: min(100%, var(--sj-content));
    margin: auto;
    padding: clamp(100px, 13vw, 180px) var(--sj-gutter) clamp(74px, 9vw, 130px);
  }

  .somos-jarana .sj-eyebrow,
  .somos-jarana .sj-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
  .somos-jarana .sj-hero h1 { max-width: 10ch; margin: 16px 0 0; color: inherit; font-family: "Montserrat", Arial, sans-serif; font-size: clamp(48px, 8vw, 112px); font-weight: 500; line-height: .83; letter-spacing: -.075em; }
  .somos-jarana .sj-hero__lead { max-width: 580px; margin: 28px 0 0; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; }
  .somos-jarana .sj-hero__scroll { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; color: inherit; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
  .somos-jarana .sj-hero__scroll::before { width: 42px; height: 1px; background: currentColor; content: ""; }

  .somos-jarana .sj-video-control {
    position: absolute;
    right: var(--sj-gutter);
    bottom: 38px;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(20,14,18,.2);
    cursor: pointer;
    place-items: center;
    backdrop-filter: blur(8px);
  }

  .somos-jarana .sj-video-control svg { width: 17px; fill: currentColor; }
  .somos-jarana .sj-video-control .sj-play,
  .somos-jarana .sj-video-control.is-paused .sj-pause { display: none; }
  .somos-jarana .sj-video-control.is-paused .sj-play { display: block; }

  .somos-jarana .sj-intro {
    display: grid;
    grid-template-columns: minmax(340px,.82fr) minmax(0,1.18fr);
    align-items: center;
    gap: clamp(58px,7vw,112px);
    width: min(100%, var(--sj-content));
    margin: auto;
    padding: clamp(88px,10vw,148px) var(--sj-gutter);
  }

  .somos-jarana .sj-intro__visual { min-width: 0; }
  .somos-jarana .sj-intro__image {
    width: min(100%, 510px);
    aspect-ratio: .82;
    overflow: hidden;
    border-radius: 999px 999px 22px 22px;
    background: #b5e0e4;
  }
  .somos-jarana .sj-intro__image img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }

  .somos-jarana .sj-intro__copy { width: 100%; max-width: 790px; }
  .somos-jarana .sj-intro__copy .sj-label { display: inline-flex; align-items: center; gap: 16px; }
  .somos-jarana .sj-intro__copy .sj-label::after { width: 48px; height: 1px; background: var(--sj-pink-strong); content: ""; }

  .somos-jarana .sj-intro h2,
  .somos-jarana .sj-purpose h2,
  .somos-jarana .sj-values h2,
  .somos-jarana .sj-story h2 {
    margin: 0;
    color: inherit;
    font-family: "Italiana", Georgia, serif;
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.045em;
  }

  .somos-jarana .sj-intro h2 { max-width: 780px; margin-top: clamp(24px,3vw,38px); font-size: clamp(46px,4.8vw,74px); line-height: 1; letter-spacing: -.04em; }
  .somos-jarana .sj-intro p { max-width: 62ch; margin: clamp(30px,3.2vw,46px) 0 0; padding-left: clamp(18px,2vw,28px); border-left: 1px solid rgba(255,161,205,.9); font-size: clamp(15px,1.15vw,17px); line-height: 1.8; }

  .somos-jarana .sj-image-band { position: relative; min-height: min(88svh,980px); overflow: hidden; background: #6f777a; }
  .somos-jarana .sj-image-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
  .somos-jarana .sj-image-band__caption {
    position: absolute;
    bottom: clamp(24px,5vw,76px);
    left: var(--sj-gutter);
    width: min(calc(100% - (var(--sj-gutter) + var(--sj-gutter))), 410px);
    padding: clamp(26px,3.3vw,48px);
    border: 1px solid rgba(255,255,255,.7);
    color: var(--sj-ink);
    background: rgba(249,225,228,.92);
    box-shadow: 0 18px 46px rgba(23,18,22,.12);
    backdrop-filter: blur(14px);
  }
  .somos-jarana .sj-image-band__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
  .somos-jarana .sj-image-band__eyebrow::after { width: 38px; height: 1px; background: var(--sj-pink-strong); content: ""; }
  .somos-jarana .sj-image-band__caption p { max-width: 8ch; margin: 24px 0 0; font-family: "Italiana", Georgia, serif; font-size: clamp(38px,3.6vw,58px); line-height: .96; letter-spacing: -.04em; }
  .somos-jarana .sj-image-band__caption small { display: block; margin-top: 24px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

  .somos-jarana .sj-purpose { display: grid; grid-template-columns: minmax(340px,.88fr) minmax(0,1.12fr); min-height: min(88svh,940px); background: var(--sj-pink); }
  .somos-jarana .sj-purpose__inner { display: flex; order: 2; width: 100%; flex-direction: column; justify-content: center; padding: clamp(88px,10vw,160px) var(--sj-gutter); }
  .somos-jarana .sj-purpose__inner .sj-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
  .somos-jarana .sj-purpose__inner .sj-eyebrow::after { width: 46px; height: 1px; background: var(--sj-pink-strong); content: ""; }
  .somos-jarana .sj-purpose h2 { max-width: 780px; margin: 28px 0 0; font-size: clamp(48px,5.35vw,84px); line-height: .93; letter-spacing: -.055em; }
  .somos-jarana .sj-purpose__inner > p:last-child { max-width: 560px; margin: 42px 0 0; padding-left: 22px; border-left: 1px solid rgba(23,18,22,.34); font-size: clamp(16px,1.25vw,18px); line-height: 1.78; }
  .somos-jarana .sj-purpose__image { position: relative; order: 1; min-height: 720px; overflow: hidden; background: #b8d9f6; }
  .somos-jarana .sj-purpose__image::before { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: clamp(32px,3vw,56px); background: var(--sj-pink); content: ""; pointer-events: none; }
  .somos-jarana .sj-purpose__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

  .somos-jarana .sj-values { width: min(100%,var(--sj-content)); margin: auto; padding: clamp(88px,11vw,160px) var(--sj-gutter); }
  .somos-jarana .sj-values__header { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: clamp(44px,6vw,84px); }
  .somos-jarana .sj-values__heading .sj-label { display: inline-flex; align-items: center; gap: 14px; }
  .somos-jarana .sj-values__heading .sj-label::after { width: 44px; height: 1px; background: var(--sj-pink-strong); content: ""; }
  .somos-jarana .sj-values h2 { max-width: 9ch; margin-top: 24px; font-size: clamp(48px,5.7vw,82px); line-height: .96; }
  .somos-jarana .sj-values__hearts { width: 184px; }
  .somos-jarana .sj-values__hearts img { width: 100%; height: auto; opacity: .78; transform: rotate(-3deg); }
  .somos-jarana .sj-values__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .somos-jarana .sj-value { display: flex; min-height: 290px; flex-direction: column; padding: clamp(28px,3.2vw,46px); border: 1px solid rgba(23,18,22,.16); background: rgba(255,255,255,.38); }
  #somos-jarana.somos-jarana .sj-values__grid > .sj-value { border-top: 0 !important; }
  #somos-jarana.somos-jarana .sj-values__grid > .sj-value:first-child { padding-left: clamp(28px,3.2vw,46px) !important; }
  .somos-jarana .sj-value:nth-child(2) { background: rgba(249,225,228,.48); }
  .somos-jarana .sj-value:nth-child(3) { background: rgba(255,255,255,.62); }
  .somos-jarana .sj-value__meta { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
  .somos-jarana .sj-value__number { display: block; color: #8a7e84; font-size: 11px; letter-spacing: .16em; }
  .somos-jarana .sj-value__heart { display: block; width: 50px; height: 42px; overflow: hidden; transform: rotate(var(--sj-heart-angle, -9deg)); }
  .somos-jarana .sj-value__heart img { display: block; width: 86px; max-width: none; margin-top: -1px; margin-left: -12px; opacity: .72; }
  .somos-jarana .sj-value:nth-child(2) .sj-value__heart { --sj-heart-angle: 8deg; }
  .somos-jarana .sj-value:nth-child(3) .sj-value__heart { --sj-heart-angle: -18deg; }
  .somos-jarana .sj-value h3 { margin: auto 0 0; font-size: clamp(25px,2.4vw,34px); font-weight: 500; letter-spacing: -.045em; }
  .somos-jarana .sj-value p { max-width: 31ch; margin: 16px 0 0; color: #5d5559; font-size: 14px; line-height: 1.75; }

  .somos-jarana .sj-story { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; color: #fff; background: #191418; }
  .somos-jarana .sj-story__image { min-height: 680px; overflow: hidden; }
  .somos-jarana .sj-story__image img { width: 100%; height: 100%; object-fit: cover; object-position: 83% center; }
  .somos-jarana .sj-story__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(64px,8vw,130px) var(--sj-gutter); }
  .somos-jarana .sj-story__copy .sj-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
  .somos-jarana .sj-story__copy .sj-eyebrow::after { width: 46px; height: 1px; background: var(--sj-pink-strong); content: ""; }
  .somos-jarana .sj-story h2 { max-width: none; margin-top: 26px; font-size: clamp(52px,5.2vw,86px); line-height: .92; letter-spacing: -.055em; }
  .somos-jarana .sj-story__copy > p:last-child { max-width: 500px; margin: 40px 0 0; padding-left: 22px; border-left: 1px solid rgba(255,161,205,.82); color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.8; }

  .somos-jarana .sj-closing { position: relative; display: grid; min-height: 70svh; padding: 110px var(--sj-gutter); overflow: hidden; background: #fff; place-items: center; text-align: center; }
  .somos-jarana .sj-closing::before,
  .somos-jarana .sj-closing::after { position: absolute; width: min(34vw,490px); aspect-ratio: 1; border-radius: 50%; background: var(--sj-pink); filter: blur(55px); content: ""; opacity: .78; }
  .somos-jarana .sj-closing::before { top: -20%; left: -10%; }
  .somos-jarana .sj-closing::after { right: -12%; bottom: -30%; }
  .somos-jarana .sj-closing__content { position: relative; z-index: 1; }
  .somos-jarana .sj-closing .sj-eyebrow { margin-bottom: 22px; }
  .somos-jarana .sj-closing h2 { max-width: 22ch; margin: 0 auto; color: inherit; font-size: clamp(32px,4.2vw,60px); font-weight: 500; line-height: 1.05; letter-spacing: -.05em; }
  .somos-jarana .sj-closing__text { max-width: 720px; margin: 38px auto 0; font-size: clamp(15px,1.25vw,18px); line-height: 1.75; }
  .somos-jarana .sj-closing__text p { margin: 0; }
  .somos-jarana .sj-closing__text p + p { margin-top: 18px; }
  .somos-jarana .sj-cta { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; margin-top: 38px; padding: 13px 27px; border: 1px solid var(--sj-ink); color: #fff; background: var(--sj-ink); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, background .2s ease; }
  .somos-jarana .sj-cta:hover,
  .somos-jarana .sj-cta:focus-visible { color: var(--sj-ink); background: transparent; }

  .somos-jarana [data-sj-reveal] { transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
  .somos-jarana.sj-js [data-sj-reveal] { opacity: 0; transform: translateY(34px); }
  .somos-jarana [data-sj-reveal].is-visible { opacity: 1; transform: none; }
  .somos-jarana :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

  @media (max-width: 860px) {
    .somos-jarana .sj-intro { grid-template-columns: 1fr; gap: 52px; }
    .somos-jarana .sj-intro__copy { order: 1; }
    .somos-jarana .sj-intro__visual { order: 2; }
    .somos-jarana .sj-intro__image { width: min(82vw, 560px); }
    .somos-jarana .sj-purpose { grid-template-columns: 1fr; }
    .somos-jarana .sj-purpose__inner { order: 1; }
    .somos-jarana .sj-purpose__image { order: 2; }
    .somos-jarana .sj-purpose__image { min-height: 76svh; }
    .somos-jarana .sj-values__header { align-items: flex-start; }
    .somos-jarana .sj-values__grid { grid-template-columns: 1fr; gap: 12px; }
    .somos-jarana .sj-value { min-height: 0; padding: 24px 22px 27px; border-radius: 2px; }
    #somos-jarana.somos-jarana .sj-values__grid > .sj-value:first-child { padding-left: 22px !important; }
    .somos-jarana .sj-value + .sj-value { border: 1px solid rgba(23,18,22,.16); }
    .somos-jarana .sj-value__meta { align-items: center; }
    .somos-jarana .sj-value__number { margin-left: 14px; }
    .somos-jarana .sj-value__heart { width: 60px; height: auto; overflow: visible; }
    .somos-jarana .sj-value__heart img { width: 60px; max-width: 100%; margin: 0; }
    .somos-jarana .sj-value h3 { margin: 27px 0 0 14px; font-size: 29px; line-height: 1; }
    .somos-jarana .sj-value p { max-width: 34ch; margin: 13px 0 0 14px; font-size: 14px; line-height: 1.65; }
    .somos-jarana .sj-story { grid-template-columns: 1fr; }
    .somos-jarana .sj-story__image { min-height: 72svh; }
    .somos-jarana .sj-story__copy { min-height: 620px; }
  }

  @media (max-width: 560px) {
    .somos-jarana .sj-hero { min-height: 82svh; }
    .somos-jarana .sj-hero h1 { font-size: clamp(46px,15vw,72px); }
    .somos-jarana .sj-hero__overlay { background: linear-gradient(0deg,rgba(10,7,9,.78),rgba(10,7,9,.15) 74%); }
    .somos-jarana .sj-video-control { right: 18px; bottom: 20px; }
    .somos-jarana .sj-intro { gap: 40px; }
    .somos-jarana .sj-intro h2 { max-width: 12ch; font-size: clamp(43px,13vw,62px); }
    .somos-jarana .sj-intro p { padding-left: 18px; line-height: 1.72; }
    .somos-jarana .sj-intro__image { width: 100%; aspect-ratio: .88; border-radius: 999px 999px 16px 16px; }
    .somos-jarana .sj-story__image img { object-position: 60% center; }
    .somos-jarana .sj-story h2 { font-size: clamp(50px,15vw,68px); }
    .somos-jarana .sj-story__copy > p:last-child { margin-top: 32px; padding-left: 18px; }
    .somos-jarana .sj-image-band { min-height: 78svh; }
    .somos-jarana .sj-image-band__caption { right: 16px; bottom: 16px; left: 16px; width: auto; max-width: none; padding: 26px 24px; }
    .somos-jarana .sj-image-band__caption p { margin-top: 20px; font-size: clamp(38px,11vw,50px); }
    .somos-jarana .sj-purpose h2 { font-size: clamp(48px,13vw,66px); }
    .somos-jarana .sj-purpose__inner > p:last-child { margin-top: 32px; padding-left: 18px; }
    .somos-jarana .sj-values__header { align-items: start; flex-direction: column; gap: 24px; }
    .somos-jarana .sj-values__hearts { width: 148px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .somos-jarana *,
    .somos-jarana *::before,
    .somos-jarana *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .somos-jarana [data-sj-reveal] { opacity: 1; transform: none; }
  }

  /* Compatibilidad con CSS heredado cargado desde el personalizador de Tiendanube. */
  @media (max-width: 767px) {
    #somos-jarana .sj-values__grid { gap: 8px !important; }
    #somos-jarana .sj-value,
    #somos-jarana .sj-value:first-child {
      min-height: 0 !important;
      padding: 18px 16px 20px !important;
      border-radius: 2px;
    }
    #somos-jarana.somos-jarana .sj-values__grid > .sj-value:first-child { padding-left: 16px !important; }
    #somos-jarana .sj-value__number { margin: 0 0 0 10px !important; }
    #somos-jarana .sj-value h3 { margin: 18px 0 0 10px !important; font-size: 27px; }
    #somos-jarana .sj-value p { margin: 9px 0 0 10px !important; font-size: 13px; line-height: 1.55; }
    #somos-jarana .sj-value__heart { width: 48px; }
    #somos-jarana .sj-value__heart img { width: 48px; }
  }