@import url('https://rsms.me/inter/inter.css');

:root {
  font-family: 'Inter', sans-serif;
}

/* Fallback for browsers with variable font support */
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}


/* Global styles 
-----------------------------------------------*/
:root {
    --brand-primary: #00DDFF;
    
    --cool-gray-900: #080911;
    --cool-gray-800: #121926;
    --cool-gray-700: #253341;
    --cool-gray-600: #364152;
    --cool-gray-500: #4a5464;
    --cool-gray-400: #94A3B8;
    --cool-gray-300: #D1D4DB;
    --cool-gray-200: #ECEFF4;
    --cool-gray-100: #F2F2F3;
    --cool-gray-50: #fbfbfb;

    --true-gray-900: #000;
    --true-gray-800: #141414;
    --true-gray-700: #404040;
    --true-gray-600: #525252;
    --true-gray-500: #737373;
    --true-gray-400: #9e9e9e;
    --true-gray-300: #D4D4D4;
    --true-gray-200: #E5E5E5;
    --true-gray-100: #f0f0f0;
    --true-gray-0: #fff;
    --true-gray-half-white: #ffffff80;

    --warm-gray-900: #171412;
    --warm-gray-800: #292524;
    --warm-gray-700: #363431;
    --warm-gray-600: #57534D;
    --warm-gray-500: #78716C;
    --warm-gray-400: #A8A29E;
    --warm-gray-300: #D6D3D1;
    --warm-gray-200: #E7E5E4;
    --warm-gray-100: #F5F5F4;
    --warm-gray-50: #FAFAF9;
    

    --teal-900: #033543;
    --teal-800: #005D73;
    --teal-700: #077B9B;
    --teal-600: #05A5C9;
    --teal-500: #00DDFF;
    --teal-400: #4CD0F8;
    --teal-300: #85E0FA;
    --teal-200: #AFECF8;
    --teal-100: #E3FBFF;
    --teal-50: #F5FDFF;
    
    --purple-900: #360861;
    --purple-800: #531E90;
    --purple-700: #6B29DF;
    --purple-600: #8415EF;
    --purple-500: #A04DFD;
    --purple-400: #B081FB;
    --purple-300: #DBBEFF;
    --purple-200: #EFD8FF;
    --purple-100: #F4EBFF;
    --purple-100: #F8F4FD;
    
    --red-900: #460809;
    --red-800: #55160C;
    --red-700: #9F0712;
    --red-600: #E7000B;
    --red-500: #F04438;
    --red-400: #FF6467;
    --red-300: #FBA5A4;
    --red-200: #FFC9C9;
    --red-100: #FFC9C9;
    --red-50: #FFFBFB;
  
    --text-nav-ul-li-a: var(--warm-gray-700);
    --text-nav-cta: var(--cool-gray-900);

    --text-s-01-page-title-h1: var(--warm-gray-900);
    --text-s-01-page-title-p: var(--cool-gray-500);

    --text-s-02-product-goal-h3: var(--cool-gray-700);
    --text-s-02-product-goal-caption: var(--teal-700);
    --text-s-02-product-goal-details-p: var(--cool-gray-500);
    --text-s-02-product-goal-reasons: var(--warm-gray-600);

    --text-audience: var(--cool-gray-300);

    --text-s-04-caption: var(--warm-gray-500);
    --text-s-04-h2: var(--cool-gray-700);
    --text-s-04-p: var(--cool-gray-500);
    --text-s-04-product-goal-details-p: var(--cool-gray-500);
    --text-s-04-product-goal-reasons: var(--warm-gray-600);

    --text-s-06-img-wrapper-p: var(--warm-gray-400);

    --text-footer-p-or-ul: var(--true-gray-400);


    --states-danger: var(--red-500);
    --states-total-white: var(--true-gray-0);
    --states-total-black: var(--true-gray-900);
    
    --surface-body-bg: var(--true-gray-0);
    --surface-nav: var(--true-gray-half-white);
    --surface-cta: var(--teal-500);
    --surface-ul: var(--states-total-white);
    --surface-icon-bg: var(--cool-gray-100);
    --surface-default-bg: var(--cool-gray-100);
    --surface-s1-bg: var(--cool-gray-700);
    --surface-s4-bg: var(--true-gray-0);
    --surface-dark-bg: var(--cool-gray-700);
    --surface-teal-bg: var(--teal-100);
    --surface-purple-bg: var(--purple-200);
    --surface-danger: var(--red-50);

    --border-danger: var(--red-300);
    --border-divs-wrapper: var(--true-gray-500);
    --border-ul-li: var(--true-gray-300);
    --border-nav-logo-img: var(--cool-gray-300);
    --border-nav-icon: var(--cool-gray-400);
    --border-audience: var(--purple-500);
    --border-old-ropas-wrapper: var(--cool-gray-100);














    --primary-text-color: var(--true-gray-100);
    --secondary-text-color: var(--true-gray-400);
    --accent-text: var(--cool-gray-500);
    --white-color: var(--true-gray-0);

    --cta-color: var(--teal-500);


    --case-study-bg: var(--cool-gray-300);

    --secondary-text-size: 14px;
    --text-color: var(--true-gray-700);
    --border-radius: 4px;
    --media-items-color: var(--true-gray-400);
    --media-items-font-size: 1.4rem;
    --video-wrapper-width: 380px;
    --video-wrapper-height: 320px;
    --footer-color: var(--cool-gray-50);
    --text-highlight-color: var(--teal-500);
}

::selection {
  background-color: var(--text-highlight-color);
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.6rem;
    background-color: var(--surface-body-bg); 
    margin: 0;
}
body * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.dark-mode {
    --text-nav-ul-li-a: var(--warm-gray-400);
    --text-nav-cta: var(--cool-gray-900);

    --text-s-01-page-title-h1: var(--true-gray-0);
    --text-s-01-page-title-p: var(--warm-gray-400);

    --text-s-02-product-goal-h3: var(--warm-gray-300);
    --text-s-02-product-goal-caption: var(--teal-700);
    --text-s-02-product-goal-details-p: var(--warm-gray-200);
    --text-s-02-product-goal-reasons: var(--warm-gray-300);

    --text-audience: var(--cool-gray-300);

    --text-s-04-caption: var(--warm-gray-500);
    --text-s-04-h2: var(--cool-gray-300);
    --text-s-04-p: var(--warm-gray-500);
    --text-s-04-product-goal-details-p: var(--cool-gray-500);
    --text-s-04-product-goal-reasons: var(--warm-gray-600);

    --text-s-06-img-wrapper-p: var(--warm-gray-400);

    --text-footer-p-or-ul: var(--cool-gray-400);


    --states-danger: var(--red-800);
    --states-total-white: var(--true-gray-0);
    --states-total-black: var(--true-gray-900);
    
    --surface-body-bg: var(--warm-gray-900);
    --surface-nav: var(--warm-gray-800);
    --surface-cta: var(--teal-500);
    --surface-ul: var(--warm-gray-800);
    --surface-icon-bg: var(--warm-gray-700);
    --surface-default-bg: var(--cool-gray-100);
    --surface-s1-bg: var(--warm-gray-700);
    --surface-s4-bg: var(--warm-gray-700);
    --surface-dark-bg: var(--cool-gray-700);
    --surface-teal-bg: var(--teal-100);
    --surface-purple-bg: var(--purple-200);
    --surface-danger: var(--red-50);
    --surface-footer: var(--cool-gray-700);

    --border-danger: var(--red-700);
    --border-divs-wrapper: var(--true-gray-500);
    --border-ul-li: var(--warm-gray-600);
    --border-nav-logo-img: var(--cool-gray-300);
    --border-nav-icon: var(--cool-gray-400);
    --border-audience: var(--purple-500);
    --border-old-ropas-wrapper: var(--cool-gray-100);

}

.page-wrapper {
    display: none;
}

.info-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.mobile-info{

    display: flex;
    justify-content: center;
    align-items: center;
    /* width: ; */
    margin: 0 auto;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    background-color: var(--cta-color);
    padding: 2rem 1.0rem;
    /* display: flex; */
    width: 20rem;
    border-radius: 0.4rem;
    color: var(--cool-gray-900);

}

@media screen and (max-width:796px){

.info-wrapper, .mobile-info {
    display: none;
}
.page-wrapper {
    max-width: 796px;
    margin: 0 auto;
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}


nav.header {
    width: 100%;
    background-color: var(--surface-nav);
    backdrop-filter: blur(0.6rem);
    border-bottom: 1px solid transparent; /* Set a transparent border */
    border-image: linear-gradient(to right, hsla(33, 97%, 60%, 1), hsla(330, 99%, 62%, 1), hsla(267, 96%, 63%, 1)) 1;
    border-image-slice: 1; /* Slices the image into a single piece to cover the border area */
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;  
    justify-content: space-between;
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid red;
    font-size: 1.4rem;
    z-index: 999;
}
.btns {
    /* border: 1px solid red; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
 
}
.btns button {
    font-size: 1.2rem;
    font-weight: 700;
    background-color: var(--surface-cta);
    padding: 0.5rem 1.0rem;
    display: flex;
    width: 9rem;
    justify-content: center;
    border-radius: 0.4rem;
    color: var(--text-nav-cta);
}
.btns button {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btns button.is-changing {
  opacity: 0;
  transform: scale(0.98);
}

.left-icon, .right-icon {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    stroke: var(--border-nav-icon);
    background-color: none; /* This is hardcoded in Javascript ropa.js */
}
.left-icon {

}
.hide-icon {
    display: none;
}
.show-icon {
    display: block;
}
 .logo {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
    flex: 0 1 auto;
    margin-left: 1.6rem;
    /* padding: 0.8rem; */
    /* border: 1px solid red; */
}
.logo img {
    border-radius: 999px;
    width: 20px;
    height: 20px;
    border: 0.2rem solid var(--border-nav-logo-img);
    display: block;
}
.logo p {
    color: var(--text-nav-ul-li-a);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.1;
}
aside {
    display: none;
    width: 100%;
}    
.dropdown-menu-wrapper {
    position: fixed;
    width: 100%;
    top: 45px;
    display: none;
    z-index: 999;
}
ul.dropdown-menu {
    display: flex;
    background-color: var(--surface-ul);
    flex-direction: column;
    gap: 0;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    /* border: 1px solid blue; */
    width: 100%;
}
ul.dropdown-menu li {
    text-decoration: none;  
    font-size: 1.4rem;
    padding: 1.6rem;
    border-bottom: 1px solid var(--border-ul-li);
    width: 100%;
    z-index: 1000;
}
ul.dropdown-menu li a {
    text-decoration: none;
    color: var(--text-nav-ul-li-a);
}


/* page title starts here ------------------------------------- */

section#page-title {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
h1.page-title {
    color: var(--text-s-01-page-title-h1);
    font-size: 2rem;
    line-height: 1.9rem;
    font-weight: medium;
    text-align: center;
    letter-spacing: -0.4px;
    margin: 0;
    
    width: 274px;
    max-width: 80%;
    /* text-align: left; */
    font-family: Inter;
    /* font-size: 1.25rem; */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.025rem;
}
#page-title p {
    font-size: 1.1rem;
    width: 320px;
    line-height: 1.6rem;
    letter-spacing: -0.25px;
    text-align: left;
    margin-top: 0;

    width: 217px;
    max-width: 80%;
    color: var(--text-s-01-page-title-p);
    text-align: center;
    font-style: normal;
    font-weight: 400;
}
h3.page-title {
    text-align: left;
}

.s-01 {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    width: 100%;
    padding-top: 2rem;
}

.s-01 div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    border-radius: 8px;
    background: var(--surface-s1-bg);
    max-width: 94%;
    padding: 1.6rem 1.2rem;
}

.s-01 img {
    width: 98%;
}

.s-02 {
    display: flex;
    min-width: 359px;
    /* width: 100%; */
    height: 258px;
    flex-direction: column;
    align-items: flex-start;
    margin: 3.2rem 1.2rem;
    margin-bottom: 0;
    padding: 0 3.2rem 1.2rem 0;
    gap: 1.2rem;
    /* border: 1px solid red; */
}

.product-goal {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: auto;
    margin: 0;
}
.s-02 .product-goal h3 {
    color: var(--text-s-02-product-goal-h3);
    font-family: Inter;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    /* line-height: normal; */
    letter-spacing: -0.6px;
    margin: 0;
}
.s-02 .product-goal p {
    color: var(--text-s-02-product-goal-caption);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6rem;
    margin: 0;
}
.product-goal-details {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 0;
    /* border: 1px solid red; */
}

.product-goal-details > p {
    color: var(--text-s-02-product-goal-details-p);
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0;
    line-height: 2.3rem; 
    letter-spacing: -2%;
}

.goal-reasons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.goal-reasons > div {
    width: 20px;
    min-width: 20px;
}

.goal-reason {
    color: var(--text-s-02-product-goal-reasons);
    width: 90%;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.0rem; /* 125% */
    letter-spacing: -0.2px;
}
.s-03 {
    /* min-width: 359px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    max-width: 100%;
    /* box-sizing: border-box; */

    margin: 3rem 1.2rem;
    margin-bottom: 0;
    padding: 3.2rem;
    border-radius: 0.8rem;
    /* gap: 0.4rem; */
    /* border: 1px solid red; */
    background-image: url(media/ropa/cloudy-bg.jpg);
}
.customers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.2rem;
}
.icon-and-description{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* border: 1px solid red; */
}
.icon-wrapper {
    display: flex;
    /* width: 54px;*/
    width: 100%;
    height: 54px;
    padding: 1.6rem;
    justify-content: center;
    align-items: center;
    background-color: var(--states-total-white);
    border-radius: 0.8rem;
    border: 1px solid var(--border-audience);
}
.icon-text {
    color: var(--text-audience);
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    /* border: 1px solid red; */
    margin: 0;

}
.customers-details {
    color: var(--states-total-white);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1rem; 
}

.s-04 {
    display: flex;
    padding: 1.5rem 1rem;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    align-items: center;
    max-width: 100%;
    margin: 3rem 1.2rem;
    margin-bottom: 0;
    padding: 1.4rem 3.2rem;
    background-color: transparent;
    /* margin: 0 auto; */
    /* border: 1px solid red; */

}
.wrap-3, .wrap-2, .wrap-1 {
    display: flex;
    /* padding: 1.5rem 1rem; */
    flex-direction: column;
    justify-content: center;  
    align-items: center;
    width: 100%;
}
.wrap-1 {
    gap: 0.4rem;
}
.wrap-1 h2 {
    color: var(--text-s-04-h2);
    text-align: center;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.05rem;
}
.wrap-3 {
    gap: 1rem;
}
.wrap-3 > p {
border-radius: 4px;
border: 1px dashed var(--border-danger);
background: var(--surface-danger);
display: flex;
padding: 0.4rem 2.8rem;
justify-content: center;
align-items: center;

color: var(--states-danger);
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 2.2rem; 

}
.top div {
    display: flex;
    justify-content: center;  
    align-items: center;
}
.top svg {
    width: 28px;
    height: 28px;
}
.top p {
    width: fit-content;
    color: var(--text-s-04-caption);
}
.wrap-2 {
    gap: 0.6rem;
    text-align: center;
}
.wrap-2 > p {
    color: var(--text-s-04-p);
    text-align: center;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.2rem; /* 128.571% */
    letter-spacing: -0.2%;
    min-width: 80%;
}

.s-04 .top {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;  
    align-items: center;
    width: 100%;
    gap: 0.6rem;
    /* border: 1px solid red; */
}

.s-05 {
    min-width: 359px;
}
.s-05 div {
    color: var(--text-audience);
    font-family: Inter;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 150% */
    letter-spacing: -0.16px;
    background: var(--surface-s1-bg);

    display: flex;
    justify-content: center;  
    align-items: center;
    gap: 1.2rem;
    overflow: hidden;
    width: 100%;
}
.s-05 img {
    border-radius: 0.4rem;
    position: relative;
    bottom: -4px;
}
.s-06-sections {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;
    gap: 2.4rem;
}

.s-06 {
    display: flex;
    justify-content: center;  
    align-items: center;
    gap: 1rem;
    padding-bottom: 0;
}

.s-06 div {
    /* border-radius: 8px; */
    border: 1px solid var(--border-divs-wrapper);
    /* background: #D6C2ED; */
    padding-bottom: 0;

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

.s-06 > p{
    color: var(--text-s-06-img-wrapper-p);
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.24px;

    width: 251px;
}
.dark-bg {
    background-color: var(--surface-dark-bg) !important;
}
.teal-bg {
    background-color: var(--surface-teal-bg) !important;
}
.purple-bg {
    background-color: var(--surface-purple-bg) !important;
}


footer {
    background-color: var(--surface-footer);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    padding: 2rem;
    margin-top: 2rem;
}
footer nav {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
}
footer p, ul  {
    color: var(--text-footer-p-or-ul);
    font-size: var(--secondary-text-size);
    margin: 0;
    /* font-weight: 500; */
}

footer ul {
    list-style: none;
    text-decoration: none;
    display: none;
    gap: 1.8rem;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
}
footer ul li {
    margin: 0;
}


/* ---------- Lightbox ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.lightbox-overlay.open .lightbox-image {
  transform: scale(1);
}

/* Optional: show zoom cursor */
img {
  cursor: zoom-in;
}


}