/* ==========================================================================
   LA VIRAL — LANDING CAMPAIGN
   Refactor by DM Solutions
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces/Fraunces-Variable.ttf') format('truetype');
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
}

@font-face{
  font-family:'Eina03';
  src:url('../fonts/eina/Eina03-Light.ttf') format('truetype');
  font-style:normal;
  font-weight:300;
  font-display:swap;
}

@font-face{
  font-family:'Eina03';
  src:url('../fonts/eina/Eina03-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:'Eina03';
  src:url('../fonts/eina/Eina03-SemiBold.ttf') format('truetype');
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
}

/* ==========================================================================
   ROOT
   ========================================================================== */

:root{

  --lv-color-beige:#FFEDC3;
  --lv-color-cafe:#301B17;
  --lv-color-original:#BC0A3F;
  --lv-color-limonosa:#00B07A;
  --lv-color-white:#FFFFFF;

  --lv-font-primary:'Eina03','Segoe UI',sans-serif;
  --lv-font-display:'Fraunces',serif;

  --lv-container:1180px;
  --lv-radius:14px;
  --lv-transition:.35s ease;

  --lv-shadow-lg:0 24px 80px rgba(0,0,0,.42);
  --lv-shadow-card:0 16px 44px rgba(48,27,23,.18);

}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body.lv-page{
  overflow-x:hidden;
  background:var(--lv-color-cafe);
  color:var(--lv-color-beige);
  font-family:var(--lv-font-primary);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,
picture,
video{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.lv-container{
  width:min(100% - 40px,var(--lv-container));
  margin-inline:auto;
}

.lv-section{
  position:relative;
}

.lv-reveal{
  opacity:0;
  transform:translateY(40px);
  will-change:opacity,transform;

  transition:
    opacity .8s cubic-bezier(.4,0,.2,1),
    transform .8s cubic-bezier(.4,0,.2,1);
}

.lv-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.lv-delay-1{transition-delay:.15s;}
.lv-delay-2{transition-delay:.3s;}
.lv-delay-3{transition-delay:.45s;}

/* ==========================================================================
   ANNOUNCE BAR
   ========================================================================== */

.lv-announce{
  position:sticky;
  top:0;
  z-index:1000;

  padding:10px 20px;

  background:var(--lv-color-original);
  color:var(--lv-color-white);

  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:600;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.lv-hero{
  position:relative;

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

  min-height:100svh;
  overflow:hidden;
}

.lv-hero__video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  opacity:.4;

  will-change:transform;
}

.lv-hero__overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.4) 0%,
      rgba(0,0,0,.75) 100%
    );
}

.lv-hero__content{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;

  width:min(100% - 48px,800px);

  text-align:center;
}

.lv-hero__logo{
  width:auto;
  height:100px;
}

.lv-hero__credit{
  margin-top:-8px;

  color:var(--lv-color-beige);
  opacity:.82;

  letter-spacing:1px;
  font-size:14px;
}

.lv-hero__title{
  font-family:var(--lv-font-display);
  font-size:clamp(2.8rem,7vw,5.6rem);
  font-weight:900;
  line-height:.98;

  text-shadow:0 4px 60px rgba(0,0,0,.5);
}

.lv-hero__subtitle{
  max-width:700px;

  font-family:var(--lv-font-display);
  font-size:clamp(22px,3.5vw,32px);
  font-weight:700;
  line-height:1.5;
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.lv-marquee{
  overflow:hidden;

  padding:14px 0;

  white-space:nowrap;

  background:var(--lv-color-original);
}

.lv-marquee__track{
  display:flex;
  gap:48px;

  animation:lv-scroll 20s linear infinite;
}

.lv-marquee__text{
  flex-shrink:0;

  color:var(--lv-color-white);

  font-family:var(--lv-font-display);
  font-size:14px;
  font-weight:700;

  letter-spacing:3px;
  text-transform:uppercase;
}

@keyframes lv-scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */

.lv-proof{
  position:relative;

  overflow:hidden;

  padding:120px 20px;

  text-align:center;

  background:var(--lv-color-cafe);
}

.lv-proof::before{
  content:'';

  position:absolute;
  top:-300px;
  left:50%;

  width:800px;
  height:800px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(188,10,63,.08) 0%,
      transparent 70%
    );

  transform:translateX(-50%);
}

.lv-proof__label,
.lv-proof__number,
.lv-proof__text{
  position:relative;
  z-index:2;
}

.lv-proof__label{
  margin-bottom:20px;

  font-family:var(--lv-font-display);
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:900;

  letter-spacing:4px;
  text-transform:uppercase;
}

.lv-proof__number{
  background:
    linear-gradient(
      180deg,
      var(--lv-color-beige) 40%,
      rgba(255,237,195,.3) 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;

  font-family:var(--lv-font-display);
  font-size:clamp(3.5rem,12vw,9rem);
  font-weight:900;
  line-height:.9;
}

.lv-proof__text{
  margin-top:12px;

  opacity:.7;

  font-family:var(--lv-font-display);
  font-size:clamp(1.2rem,3vw,2.2rem);
  font-style:italic;
}

/* ==========================================================================
   VIDEO
   ========================================================================== */

.lv-video{
  display:flex;
  justify-content:center;

  padding:96px 20px;

  background:#160c0a;
}

.lv-video__media{
  aspect-ratio:9 / 16;

  width:min(100%,420px);
  max-height:78vh;

  object-fit:cover;

  background:#000;
  box-shadow:var(--lv-shadow-lg);
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */

.lv-products{
  display:flex;

  min-height:100svh;

  background:var(--lv-color-beige);
}

.lv-products__item{
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:80px 40px;

  text-align:center;

  transition:background-color var(--lv-transition);
}

.lv-products__item:hover{
  background:rgba(48,27,23,.04);
}

.lv-products__image{
  width:90%;
  max-width:380px;

  filter:drop-shadow(0 20px 50px rgba(48,27,23,.35));

  will-change:transform;

  transition:transform .5s cubic-bezier(.4,0,.2,1);
}

.lv-products__item:hover .lv-products__image{
  transform:
    scale(1.05)
    translateY(-10px);
}

.lv-products__title{
  margin:28px 0 12px;

  font-family:var(--lv-font-display);
  font-size:clamp(2.2rem,4.5vw,3.5rem);
  font-weight:700;
}

.lv-products__title--original{
  color:var(--lv-color-original);
}

.lv-products__title--limonosa{
  color:var(--lv-color-limonosa);
}

.lv-products__description{
  max-width:340px;
  margin-bottom:28px;

  color:var(--lv-color-cafe);

  font-size:18px;
  font-weight:600;
  line-height:1.6;
}

.lv-products__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.lv-products__divider{
  width:1px;
  margin:100px 0;

  background:rgba(48,27,23,.1);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.lv-button{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  padding:18px 40px;

  border:2px solid var(--lv-color-cafe);

  background:transparent;
  color:var(--lv-color-cafe);

  text-transform:uppercase;
  letter-spacing:2px;
  font-size:14px;
  font-weight:600;

  transition:
    color var(--lv-transition),
    border-color var(--lv-transition);
}

.lv-button::before{
  content:'';

  position:absolute;
  inset:0;
  z-index:-1;

  background:var(--lv-color-cafe);

  transform:translateY(100%);
  transition:transform var(--lv-transition);
}

.lv-button:hover{
  color:var(--lv-color-beige);
}

.lv-button:hover::before{
  transform:translateY(0);
}

.lv-button:focus-visible,
.lv-footer__link:focus-visible{
  outline:2px solid var(--lv-color-beige);
  outline-offset:4px;
}

/* ==========================================================================
   WHATSAPP SLIDER
   ========================================================================== */

.lv-wa{
  overflow:hidden;

  padding:92px 20px 108px;

  background:var(--lv-color-cafe);
  border-top:1px solid rgba(255,237,195,.08);
}

.lv-wa__header{
  margin-bottom:42px;
  text-align:center;
}

.lv-wa__title{
  font-family:var(--lv-font-display);
  font-size:clamp(2.4rem,5.5vw,4.7rem);
  font-weight:900;
  line-height:.98;
}

.lv-wa-slider{
  --wa-brand:#008069;
  --wa-chat:#EFEAE2;
  --wa-card-w:330px;

  position:relative;

  overflow:hidden;

  max-width:1120px;
  margin:0 auto;
  padding:0 58px 6px;
}

.lv-wa-stage{
  position:relative;
  height:540px;
  overflow:hidden;
}

.lv-wa-card-wrap{
  position:absolute;
  top:0;
  left:50%;

  width:330px;

  margin-left:-165px;

  transition:
    transform .55s cubic-bezier(.22,.8,.32,1),
    opacity .45s ease;
}

.lv-wa-card{
  width:100%;

  overflow:hidden;

  border-radius:14px;

  background:#fff;

  box-shadow:var(--lv-shadow-card);
}

.lv-wa-header{
  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 12px;

  background:var(--wa-brand);
}

.lv-wa-avatar{
  width:40px;
  height:40px;

  overflow:hidden;

  border-radius:50%;
}

.lv-wa-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.lv-wa-name{
  color:#fff;

  font-size:15px;
  font-weight:700;
}

.lv-wa-status{
  color:#fff;
  opacity:.84;

  font-size:12px;
}

.lv-wa-body{
  display:flex;
  flex-direction:column;
  gap:4px;

  min-height:352px;
  padding:14px 10px;

  background:var(--wa-chat);
}

.lv-wa-date{
  align-self:center;

  padding:5px 12px;

  border-radius:8px;

  background:#E1F2FA;
  color:#54656F;

  font-size:11px;
  font-weight:700;
}

.lv-wa-row{
  display:flex;
}

.lv-wa-row--me{
  justify-content:flex-end;
}

.lv-wa-bubble{
  position:relative;

  max-width:82%;
  padding:8px 10px 18px 11px;

  border-radius:8px;

  background:#fff;
  color:#111B21;

  font-size:14px;
  line-height:1.34;
}

.lv-wa-row--me .lv-wa-bubble{
  background:#D9FDD3;
}

.lv-wa-time{
  position:absolute;
  right:8px;
  bottom:4px;

  color:rgba(17,27,33,.45);

  font-size:10px;
}

.lv-wa-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 14px;

  background:#F0F2F5;
  color:#54656F;

  font-size:12px;
}

.lv-wa-nav{
  position:absolute;
  top:50%;
  z-index:20;

  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  border:none;
  border-radius:50%;

  background:#fff;

  cursor:pointer;

  transform:translateY(-50%);

  box-shadow:0 10px 28px rgba(48,27,23,.16);

  transition:all .2s ease;
}

.lv-wa-nav:hover{
  background:var(--lv-color-original);
  color:#fff;

  transform:
    translateY(-50%)
    scale(1.05);
}

.lv-wa-nav--prev{
  left:4px;
}

.lv-wa-nav--next{
  right:4px;
}

.lv-wa-dots{
  display:flex;
  justify-content:center;
  gap:8px;

  margin-top:28px;
}

.lv-wa-dot{
  width:8px;
  height:8px;

  border:none;
  border-radius:50%;

  background:rgba(255,237,195,.25);

  cursor:pointer;

  transition:all .25s ease;
}

.lv-wa-dot.is-active{
  width:28px;

  border-radius:4px;

  background:var(--lv-color-original);
}

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */

.lv-experience{
  padding:100px 48px;

  background:var(--lv-color-white);
}

.lv-experience__header{
  margin-bottom:64px;
  text-align:center;
}

.lv-experience__title{
  color:var(--lv-color-original);

  font-family:var(--lv-font-display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:900;
}

.lv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:4px;

  max-width:900px;
  margin-inline:auto;
}

.lv-grid__card{
  position:relative;

  overflow:hidden;

  aspect-ratio:1;
}

.lv-grid__card img{
  width:100%;
  height:100%;

  object-fit:cover;

  will-change:transform;

  transition:transform .6s cubic-bezier(.4,0,.2,1);
}

.lv-grid__card:hover img{
  transform:scale(1.1);
}

.lv-grid__overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:flex-end;

  padding:20px;

  opacity:0;

  background:
    linear-gradient(
      transparent 50%,
      rgba(48,27,23,.75)
    );

  transition:opacity var(--lv-transition);
}

.lv-grid__card:hover .lv-grid__overlay{
  opacity:1;
}

.lv-grid__title{
  color:var(--lv-color-white);

  font-family:var(--lv-font-display);
  font-size:16px;
  font-weight:700;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.lv-cta{
  padding:120px 48px;

  text-align:center;

  background:var(--lv-color-beige);
}

.lv-cta__logo{
  width:auto;
  height:120px;

  margin-inline:auto;
  margin-bottom:40px;
}

.lv-cta__credit{
  margin:-28px 0 36px;

  color:var(--lv-color-cafe);
  opacity:.72;

  letter-spacing:1.2px;
  font-size:14px;
}

.lv-cta__title{
  margin-bottom:16px;

  color:var(--lv-color-cafe);

  font-family:var(--lv-font-display);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900;
}

.lv-cta__description{
  max-width:600px;
  margin:0 auto 40px;

  color:var(--lv-color-cafe);

  font-family:var(--lv-font-display);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.6;
}

.lv-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.lv-footer{
  padding:48px 48px 24px;

  background:var(--lv-color-cafe);
  border-top:1px solid rgba(255,237,195,.08);
}

.lv-footer__top{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:80px;

  margin-bottom:40px;
}

.lv-footer__title{
  margin-bottom:16px;

  font-family:var(--lv-font-display);
  font-size:18px;
  font-weight:500;
}

.lv-footer__link{
  display:block;

  margin-bottom:8px;

  color:var(--lv-color-beige);
  opacity:.5;

  transition:opacity var(--lv-transition);
}

.lv-footer__link:hover{
  opacity:1;
}

.lv-footer__social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.lv-footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  opacity:.72;

  transition:
    opacity var(--lv-transition),
    transform var(--lv-transition);
}

.lv-footer__social-link:hover{
  opacity:1;
  transform:translateY(-2px);
}

.lv-footer__social-link img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.lv-footer__bottom{
  padding-top:20px;

  border-top:1px solid rgba(255,237,195,.08);

  text-align:center;
  font-size:13px;

  opacity:.3;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:900px){

  .lv-products{
    flex-direction:column;
  }

  .lv-products__divider{
    width:80%;
    height:1px;

    margin:0 auto;
  }

  .lv-products__item{
    padding:60px 24px;
  }

  .lv-products__image{
    max-width:280px;
  }

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

  .lv-experience{
    padding:60px 20px;
  }

  .lv-cta{
    padding:80px 20px;
  }

  .lv-footer__top{
    gap:40px;
  }

}

@media (max-width:500px){

  .lv-announce{
    padding:8px 10px;
    font-size:10px;
  }

  .lv-hero__title{
    font-size:clamp(2.25rem,10vw,3.75rem);
  }

  .lv-products__actions,
  .lv-cta__actions{
    flex-direction:column;
    align-items:center;
  }

  .lv-button{
    width:100%;
    text-align:center;
  }

  .lv-grid{
    grid-template-columns:1fr;
  }

  .lv-wa-slider{
    --wa-card-w:min(300px,calc(100vw - 64px));

    padding:0 28px;
  }

  .lv-wa-stage{
    height:575px;
  }

  .lv-wa-nav{
    width:42px;
    height:42px;
  }

}