/* =============== GOOGLE FONTS =============== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

/* =============== THEME =============== */
:root{
  --header-height: 3.5rem;

  --first-color: hsl(33, 100%, 60%);      /* #FFB84B */
  --first-color-alt: hsl(33, 90%, 50%);   /* #FF9B2F */
  --black-color: hsl(25, 35%, 25%);       /* #5E3A1E */
  --title-color: hsl(26, 50%, 25%);       /* ~#854944 */
  --text-color: hsl(28, 30%, 35%);        /* #6B4B3A */
  --text-color-light: hsl(28, 20%, 55%);
  --gradient-color: linear-gradient(90deg, var(--first-color), var(--first-color-alt));

  --body-color: linear-gradient(90deg, hsl(39, 100%, 93%) 0%, hsl(38, 100%, 88%) 100%);
  --container-color: linear-gradient(136deg, hsl(39, 100%, 90%) 0%, hsl(38, 100%, 85%) 100%);

  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  --mb-0-25: .25rem; --mb-0-5: .5rem; --mb-0-75: .75rem;
  --mb-1: 1rem; --mb-1-5: 1.5rem; --mb-2: 2rem; --mb-2-5: 2.5rem;

  /* Z */
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 992px){
  :root{
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/* =============== BASE =============== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
}
h1,h2,h3,h4{color:var(--title-color); font-weight:var(--font-semi-bold);}
ul{list-style:none;}
a{text-decoration:none;}
img{max-width:100%; height:auto;}
button,input{border:none; outline:none;}
button{cursor:pointer; font-family:var(--body-font); font-size:var(--normal-font-size);}

/* =============== UTIL / LAYOUT =============== */
.section{padding:4.5rem 0 2rem;}
.section__title{font-size:var(--h2-font-size); margin-bottom:var(--mb-2); text-align:center;}
.container{max-width:968px; margin-left:var(--mb-1-5); margin-right:var(--mb-1-5);}
.grid{display:grid;}
.main{overflow:hidden;}

/* =============== HEADER / NAV =============== */
.header{
  position:fixed; top:0; left:0; width:100%;
  background:transparent;
  z-index:var(--z-fixed);
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, color .3s ease;
}
.nav{ height:var(--header-height); display:flex; justify-content:space-between; align-items:center;}
.nav__logo{display:flex; align-items:center; column-gap:.5rem; font-weight:var(--font-medium);}
.nav__logo-img{width:3rem; height:auto;}
@media (min-width:768px){ .nav__logo-img{width:4rem;} }
@media (min-width:1150px){ .nav__logo-img{width:4.5rem;} }

.nav__link,.nav__logo,.nav__toggle,.nav__close{color:var(--title-color);}
.nav__toggle{font-size:1.25rem; cursor:pointer;}

@media (max-width:767px){
  .nav__menu{
    position:fixed; width:100%;
    top:-150%; left:0;
    padding:3.5rem 0;
    transition:.4s; z-index:var(--z-fixed);
    border-radius:0 0 1.5rem 1.5rem;
    background:var(--container-color);
  }
}
.nav__close{font-size:1.8rem; position:absolute; top:.5rem; right:.7rem; cursor:pointer;}
.nav__list{display:flex; flex-direction:column; align-items:center; row-gap:1.5rem;}
.nav__link{text-transform:uppercase; font-weight:var(--font-black); transition:.4s;}
.nav__link:hover{color:var(--text-color);}

.header:not(.scroll-header) .nav__logo,
.header:not(.scroll-header) .nav__link,
.header:not(.scroll-header) .nav__toggle,
.header:not(.scroll-header) .nav__close{ color:hsl(40,100%,98%); }
.header:not(.scroll-header) .button--ghost{ color:hsl(40,100%,98%); border-color:hsl(40,100%,98%); }

.scroll-header{
  background-color: rgba(255,234,187,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(133,73,68,.08);
}
.scroll-header .nav__logo,
.scroll-header .nav__link,
.scroll-header .nav__toggle,
.scroll-header .nav__close{color:var(--title-color);}
.scroll-header .button--ghost{color:var(--title-color); border-color:var(--title-color);}

.show-menu{top:0;}

.active-link{position:relative;}
.active-link::before{
  content:''; position:absolute; bottom:-.75rem; left:45%;
  width:5px; height:5px; background-color:var(--title-color); border-radius:50%;
}

/* =============== HERO (layered) =============== */
.hero{overflow:hidden;}
.hero__section{position:relative;}
.hero__container{padding-top:10.5rem; height:100vh;}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; filter:saturate(1.3);
}
.hero__data{position:relative; text-align:center; z-index:var(--z-tooltip);}
.hero__images img{
  position:absolute; max-width:initial; width:800px; right:-9.2rem; bottom:0; filter:saturate(1.3);
}

@media (max-width:320px){
  .hero .container{margin-inline:1rem;}
}
@media (min-width:576px){
  .hero__data{max-width:380px; margin-inline:auto;}
  .hero__images img{width:initial; right:0;}
}
@media (min-width:1150px){
  .hero__container{height:960px;}
  .hero__data{max-width:610px; text-align:initial; margin:0;}
}
@media (min-width:2048px) and (min-height:1100px){
  .hero__container{height:100vh; display:grid;}
  .hero__data{align-self:center;}
}
@media (max-width:1150px) and (min-height:900px){
  .hero__container{display:grid;}
  .hero__data{align-self:center;}
}

/* =============== TOP CATS (Swiper) =============== */
.topcats__content{row-gap:1rem;}
.topcats__group{display:grid; position:relative; padding-top:2rem;}

.topcats__img{
  display:block;
  width:auto;
  height:auto;
  max-height:250px;
  max-width:100%;
  object-fit:contain;
  justify-self:center;
}

.topcats__indicator{
  width:8px; height:8px; background-color:var(--title-color); border-radius:50%;
  position:absolute; top:7rem; right:2rem;
}
.topcats__indicator::after{
  content:''; position:absolute; width:1px; height:48px; background-color:var(--title-color);
  top:-3rem; right:45%;
}
.topcats__details-img{position:absolute; right:.5rem;}
.topcats__details-title, .topcats__details-subtitle{display:block; font-size:var(--small-font-size); text-align:right;}
.topcats__subtitle{font-size:var(--h3-font-size); text-transform:uppercase; margin-bottom:var(--mb-1);}
.topcats__title{font-size:var(--biggest-font-size); font-weight:var(--font-black); line-height:109%; margin-bottom:var(--mb-1);}
.topcats__description{margin-bottom:var(--mb-1);}
.topcats__buttons{display:flex; justify-content:space-between;}

/* Swiper bullets */
.swiper-pagination{position:initial; margin-top:var(--mb-1);}
.swiper-pagination-bullet{width:5px; height:5px; background-color:var(--title-color); opacity:1;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 .5rem;}
.swiper-pagination-bullet-active{width:1.5rem; height:5px; border-radius:.5rem;}

/* =============== BUTTONS =============== */
.button{
  display:inline-block; background-color:var(--first-color); color:var(--title-color);
  padding:1rem 1.75rem; border-radius:.5rem; font-weight:var(--font-medium); transition:.3s;
}
.button:hover{background-color:var(--first-color-alt);}
.button__icon{ font-size:1.25rem; }
.button--ghost{border:2px solid; background:transparent; border-radius:3rem; padding:.75rem 1.5rem;}
.button--ghost:hover{background:none;}
.button--link{color:var(--title-color);}
.button--flex{display:inline-flex; align-items:center; column-gap:.5rem;}

/* =============== FEATURES =============== */
.features__container{grid-template-columns:repeat(2,1fr); gap:1rem 2rem;}
.feature{text-align:center;}
.feature__img{width:120px; margin-bottom:var(--mb-0-75); transition:.3s;}
.feature__title{margin-bottom:var(--mb-0-25);}
.feature:hover .feature__img{transform:translateY(-.5rem);}

/* =============== ABOUT =============== */
.about__container{row-gap:2rem;}
.about__data{text-align:center;}
.about__description{margin-bottom:var(--mb-2);}
.about__img{width:200px; justify-self:center; animation:floating 2s ease-in-out infinite;}

/* =============== DOWNLOAD =============== */
.download__container{
  background:var(--container-color); border-radius:1rem; padding:2.5rem 0 1.5rem; row-gap:.75rem;
}
.download__data{text-align:center;}
.download__title{font-size:var(--h2-font-size); margin-bottom:var(--mb-2);}
.download__img{width:200px; justify-self:center;}

/* =============== FOOTER =============== */
.footer{position:relative; overflow:hidden;}
.footer__container{row-gap:2rem; position:relative; z-index:1;}
.footer__logo{
  display:flex; align-items:center; column-gap:.5rem; margin-bottom:var(--mb-1);
  font-weight:var(--font-medium); color:var(--title-color);
}
.footer__logo-img{width:20px;}
.footer__social{display:flex; column-gap:.75rem;}
.footer__social-link{display:inline-flex; background:var(--container-color); padding:.25rem; border-radius:.25rem; color:var(--title-color); font-size:1rem;}
.footer__social-link:hover{background:var(--body-color);}
.footer__title{font-size:var(--h3-font-size); margin-bottom:var(--mb-1);}
.footer__links{display:grid; row-gap:.35rem;}
.footer__link{font-size:var(--small-font-size); color:var(--text-color); transition:.3s;}
.footer__link:hover{color:var(--title-color);}
.footer__copy{display:block; text-align:center; font-size:var(--smaller-font-size); margin-top:4.5rem;}

@media (max-width:767px){
  .footer__img-one, .footer__img-two{display:none;}
  .footer__container{grid-template-columns:1fr; justify-items:center; text-align:center;}
}
@media (min-width:768px){
  .footer__container{
    grid-template-columns:repeat(4, minmax(0,1fr));
    justify-items:start; align-items:start; column-gap:2rem;
  }
  .footer__content{text-align:left;}
  .footer__img-one, .footer__img-two{
    position:absolute; bottom:0; transition:transform .3s ease; z-index:2; pointer-events:auto;
  }
  .footer__img-two{ left:0; right:auto; width:clamp(140px, 18vw, 180px); transform:none; }
  .footer__img-one{ right:-2rem; left:auto; width:clamp(100px, 12vw, 140px); transform:none; }
  .footer__img-one:hover, .footer__img-two:hover{transform:translateY(-.5rem);}
}

/* =============== SCROLL UP =============== */
.scrollup{
  position:fixed; right:1rem; bottom:-20%;
  display:inline-flex; padding:.3rem; border-radius:.25rem;
  background:var(--container-color); opacity:.8; transition:.4s; z-index:var(--z-tooltip);
}
.scrollup__icon{font-size:1.25rem; color:var(--title-color);}
.scrollup:hover{background:var(--container-color); opacity:1;}
.show-scroll{bottom:3rem;}

/* =============== SCROLLBAR =============== */
::-webkit-scrollbar{width:.6rem; background:#413e3e;}
::-webkit-scrollbar-thumb{background:#272525; border-radius:.5rem;}

/* =============== RESPONSIVE EXTRAS =============== */
@media (max-width:320px){
  .container{margin-left:var(--mb-1); margin-right:var(--mb-1);}
  .topcats__img{max-height:200px;}
  .topcats__buttons{flex-direction:column; width:max-content; row-gap:1rem;}
  .features__container{grid-template-columns:.8fr; justify-content:center;}
}
@media (min-width:576px){
  .about__container{grid-template-columns:.8fr; justify-content:center;}
}
@media (min-width:767px){
  body{margin:0;}
  .section{padding:7rem 0 2rem;}
  .nav{height:calc(var(--header-height) + 1.5rem);}
  .nav__close,.nav__toggle{display:none;}
  .nav__list{flex-direction:row; column-gap:3rem;}
  .nav__link{text-transform:initial; font-weight:initial;}

  .topcats__content{
    padding:8rem 0 2rem;
    grid-template-columns:repeat(2,1fr);
    gap:4rem;
  }
  .topcats__img{max-height:300px;} /* mantener proporción */
  .features__container{grid-template-columns:repeat(3,200px); justify-content:center;}
  .about__container{grid-template-columns:repeat(2,1fr); align-items:center;}
  .about__title,.about__data{text-align:initial;}
  .about__img{width:250px;}

  .download__container{
    grid-template-columns:repeat(2, max-content);
    justify-content:center; align-items:center;
    column-gap:3rem; padding:3rem 0; border-radius:3rem;
  }
  .download__img{width:350px; order:-1;}
  .download__data{padding-right:6rem;}
}
@media (min-width:992px){
  .container{margin-left:auto; margin-right:auto;}
  .section__title{font-size:var(--h1-font-size); margin-bottom:3rem;}

  .topcats__content{padding-top:9rem; gap:3rem;}
  .topcats__group{padding-top:0;}
  .topcats__img{max-height:400px; transform:translateY(-3rem);} /* sin distorsión */
  .topcats__indicator{bottom:15%; left:45%; top:initial; right:initial;}
  .topcats__indicator::after{top:0; height:75px;}
  .topcats__details-img{bottom:0; right:58%;}
  .topcats__title{margin-bottom:var(--mb-1-5);}
  .topcats__description{margin-bottom:var(--mb-2-5); padding-right:2rem;}

  .features__container{column-gap:8rem;}
  .feature__img{width:200px;}
  .about__container{column-gap:7rem;}
  .about__img{width:350px;}
  .about__description{padding-right:2rem;}
  .footer__copy{margin-top:6rem;}
}
@media (min-width:1200px){
  .topcats__img{max-height:420px;}
}

@keyframes floating{
  0%{transform:translate(0,0);}
  50%{transform:translate(0,15px);}
  100%{transform:translate(0,0);}
}

.lang-switcher { display: flex; align-items: center; }
.nav__lang-select{
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: .5rem;
  padding: .35rem .6rem;
  font: inherit;
  color: inherit;
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.nav__lang-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: .6rem;
  padding: .4rem 2rem .4rem .6rem;
  font: inherit;
  color: inherit;
  line-height: 1;
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 1rem;
}

.nav__lang-select:focus,
.nav__lang-select:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,184,75,.25);
}

.nav__lang-select option{
  background: #fff6e6;
  color: var(--title-color);
}

.header:not(.scroll-header) .nav__lang-select{
  color: hsl(40,100%,98%);
  border-color: hsl(40,100%,98%);
  background-color: transparent;
}

.scroll-header .nav__lang-select{
  color: var(--title-color);
  border-color: var(--title-color);
  background-color: rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
}

.nav__menu.show-menu .nav__link,
.nav__menu.show-menu .button--ghost,
.nav__menu.show-menu .nav__close,
.nav__menu.show-menu .nav__lang-select{
  color: var(--title-color) !important;
  border-color: var(--title-color) !important;
}

@media (max-width: 767px){
  .nav__menu{ visibility: hidden; opacity: 0; pointer-events: none; }
  .nav__menu.show-menu{ visibility: visible; opacity: 1; pointer-events: auto; }
}

.nav__lang-select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; color: inherit;
  border: 1.5px solid currentColor; border-radius: .5rem;
  padding: .35rem 2rem .35rem .6rem; font: inherit; line-height: 1.2; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 1.1em) 50%,
    calc(100% - .7em)  50%,
    100% 0;
  background-size: .5em .5em, .5em .5em, 2.5em 100%;
  background-repeat: no-repeat;
}
.nav__lang-select:focus { outline: none; }
.nav__lang-select:focus-visible{ box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 25%, transparent); }

.scroll-header .nav__lang-select{
  background-color: rgba(255, 234, 187, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 767px){
  .nav__menu,
  .nav__menu .nav__link,
  .nav__menu .nav__close,
  .nav__menu .button--ghost,
  .nav__menu .nav__lang-select{
    color: var(--title-color);
  }
  .nav__menu .button--ghost,
  .nav__menu .nav__lang-select{
    border-color: var(--title-color);
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.scroll-header .nav__lang-select{
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.scroll-header .nav__lang-select:hover,
.scroll-header .nav__lang-select:focus { background-color: transparent !important; }

.hero__data{
  position: absolute;
  right: .5rem;
  top: .5rem;
  text-align: right;
  z-index: var(--z-tooltip);
}
.hero__data .hero__title,
.hero__data .home__title{
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  line-height: 1.15;
  margin: 0 0 .15rem 0;
}
.hero__data .hero__description,
.hero__data .home__description{
  font-size: var(--smaller-font-size);
  margin: 0;
  color: var(--text-color-light);
}

@media (max-width: 420px){
  .hero__data{ right: .75rem; left: auto; }
}
@media (max-width: 767px) {
  .header:not(.scroll-header):not(.menu-open) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}
.header:not(.scroll-header) .nav__toggle { color: #854944 !important;  }

/* =============== Privacy Page – Match&Meow =============== */
.doc-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 3rem;
  background: var(--container-color);
  border-bottom: 1px solid rgba(133,73,68,.08);
}
.doc-hero__title { font-size: var(--h1-font-size); line-height: 1.1; text-align: center; margin: 0; }
.doc-hero__meta { text-align: center; margin-top: .5rem; color: var(--text-color-light); font-size: var(--small-font-size); }

.doc { padding-top: 2rem; padding-bottom: 4rem; }
.doc .container { max-width: 900px; }
.doc-card {
  background: var(--container-color);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.doc h1, .doc h2, .doc h3, .doc h4 { margin: 1.25rem 0 .75rem; }
.doc h2 { border-top: 1px dashed rgba(133,73,68,.18); padding-top: 1rem; }
.doc p { margin: .75rem 0; }
.doc ul { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.doc a { color: var(--title-color); text-decoration: underline; }
.doc .vendor-list a { text-decoration: underline; word-break: break-word; }

/* Footer tweaks on document pages */
.bottom_store_link { width: 140px; height: auto; }
#footer_app_store_links { display: flex; gap: .75rem; flex-wrap: wrap; }
#footer_legal_links { display: flex; gap: 1rem; }
.normal_link { color: var(--text-color); text-decoration: none; }
.normal_link:hover { color: var(--title-color); text-decoration: underline; }

@media (max-width: 767px){
  .doc-card { padding: 1.25rem; border-radius: .75rem; }
  .bottom_store_link { width: 120px; }
}

@media (max-width: 800px){
  .hero__logo-lakitu{ display: none !important; }
}