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

html{
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
}

body{
  font-family:'Inter',sans-serif;
  background:#ECEEF3;

  display:flex !important;
  justify-content:center !important;
  flex-direction: column !important;



  color:#111827;
}



/* APP */

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;

  background:#F6F7FB;

  border-radius:40px;

  overflow:hidden;

  position:relative;
  margin: 7px auto;
  box-shadow:
  0 20px 60px rgba(0,0,0,.08);
}

/* HEADER */

.header{
  padding:10px;

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

.location small{
  color:#9CA3AF;
  font-size:12px;
}
.icon-btn{
  width:44px;
  height:44px;

  border:none;

  border-radius:50%;

  background:white;

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

  font-size:18px;

  cursor:pointer;

  position:relative;

  box-shadow:
  0 10px 30px rgba(0,0,0,.05);

  transition:.2s ease;
}

.icon-btn:active{
  transform:scale(.96);
}
/* USER MENU */

.user-menu-wrapper{

  position:relative;

}

.user-dropdown{

  position:absolute;

  top:60px;
  right:0;

  width:240px;

  background:white;

  border-radius:24px;

  padding:14px;

  opacity:0;
  visibility:hidden;

  transform:
  translateY(10px);

  transition:.2s ease;

  box-shadow:
  0 20px 40px rgba(0,0,0,.08);

  z-index:9999;

}

.user-dropdown.active{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0);

}

.user-dropdown ul{

  list-style:none;

}

.user-dropdown li{

  margin-bottom:8px;

}

.user-dropdown li:last-child{

  margin-bottom:0;

}

.user-dropdown a{

  display:flex;
  align-items:center;

  gap:10px;

  padding:14px;

  border-radius:16px;

  text-decoration:none;

  color:#111827;

  font-size:15px;
  font-weight:600;

  transition:.2s ease;

}

.user-dropdown a:hover{

  background:#F3F4F6;

}

.location h3{
  margin-top:6px;
  font-size:16px;
  font-weight:700;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.icon-btn{
  width:44px;
  height:44px;

  border:none;

  border-radius:50%;

  background:white;

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

  font-size:18px;

  box-shadow:
  0 10px 30px rgba(0,0,0,.05);

  cursor:pointer;
}

/* GRID */

.services-grid{
  padding:4px;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:16px;
}

/* CARD */

.service-card{
  background:white;

  border-radius:30px;

  overflow:hidden;

  text-decoration:none;

  color:#111827;

  box-shadow:
  0 10px 30px rgba(0,0,0,.04);

  transition:.2s ease;
}

.service-card:active{
  transform:scale(.98);
}

.card-image{
  height:100px;

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

  overflow:hidden;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* CARD COLORS */

.food-bg{
  background:#FFF4EB;
}

.labor-bg{
  background:#EEF5FF;
}

.assist-bg{
  background:#F4EEFF;
}

.find-bg{
  background:#ECFFF5;
}

/* CONTENT */

.card-content{
  padding:18px;
}

.card-content h3{
  font-size:18px;
  font-weight:800;

  line-height:1.1;
}

.card-content p{
  margin-top:8px;

  color:#6B7280;

  font-size:14px;

  line-height:1.4;
}

/* PROMO */

.promo-section{
  padding:0 24px;
  margin-top:10px;
}

.promo-banner{
  height:170px;

  border-radius:32px;

  overflow:hidden;

  position:relative;

  background:
  linear-gradient(
    135deg,
    #FF4D4F,
    #FF8A34
  );

  padding:24px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  color:white;
}

.promo-banner h2{
  font-size:28px;
  font-weight:800;
}

.promo-banner p{
  margin-top:8px;

  opacity:.9;

  line-height:1.4;
}

/* BOTTOM NAV */

.bottom-nav{
  position:sticky;
  bottom:0;

  padding:20px 24px;

  background:
  linear-gradient(
    to top,
    #F6F7FB,
    transparent
  );
}

.nav-container{
  height:74px;

  background:
  rgba(255,255,255,.9);

  backdrop-filter:blur(18px);

  border-radius:28px;

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

  box-shadow:
  0 20px 40px rgba(0,0,0,.08);
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:4px;

  text-decoration:none;

  color:#9CA3AF;

  font-size:12px;
}

.nav-item span{
  font-size:22px;
}

.nav-item.active{
  color:#FF4D4F;
  font-weight:700;
}

/* ========================= */
/* DELICOMI MODALS */
/* ========================= */

.deli-modal{

  position:fixed;

  inset:0;

  z-index:99999;

  opacity:0;
  visibility:hidden;

  transition:.3s ease;

}

/* ACTIVE */

.deli-modal.active{

  opacity:1;
  visibility:visible;

}

/* BACKDROP */

.deli-modal::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  rgba(0,0,0,.45);

  backdrop-filter:
  blur(6px);

}

/* CONTENT */

.deli-modal-content{

  position:absolute;

  left:0;
  bottom:-100%;

  width:100%;

  background:white;

  border-radius:
  32px 32px 0 0;

  overflow:hidden;

  transition:.35s ease;

}

/* SHOW */

.deli-modal.active
.deli-modal-content{

  bottom:0;

}

/* HANDLE */

.deli-modal-content::before{

  content:'';

  width:48px;
  height:5px;

  background:#D1D5DB;

  border-radius:999px;

  position:absolute;

  top:12px;
  left:50%;

  transform:
  translateX(-50%);

}

/* CLOSE */

.deli-close{

  position:absolute;

  top:18px;
  right:18px;

  width:40px;
  height:40px;

  border-radius:50%;

  background:white;

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

  font-size:22px;

  box-shadow:
  0 10px 20px rgba(0,0,0,.08);

  cursor:pointer;

  z-index:10;

}

/* IMAGE */

.deli-modal-content img{

  width:70%;

  display:block;

}

/* BODY */

.deli-modal-body{

  padding:24px;

}

/* TITLE */

.deli-modal-body h2{

  font-size:28px;

  font-weight:800;

  color:#111827;

}

/* TEXT */

.deli-modal-body p{

  margin-top:10px;

  color:#6B7280;

  line-height:1.5;

}

/* BUTTON */

.deli-modal-body .sindiseño {

  margin-top:24px;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

}
.deli-modal-body .condiseño,
.deli-modal-body button{

  width:100%;

  height:56px;

  border:none;

  border-radius:20px;

  background:#FF4D4F;

  color:white;

  text-decoration:none;

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

  margin-top:24px;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

}

/* DISABLED */

.deli-modal-body button:disabled{

  opacity:.4;

}

/* TERMS */

.deli-terminos{

  margin-top:20px;

}

.deli-terminos label{

  font-size:14px;

  color:#6B7280;

  line-height:1.5;

}

.deli-terminos a{

  color:#FF4D4F;

  text-decoration:none;

}
/* MODAL HIDDEN */

.deli-modal{

  display:none;

  position:fixed;

  inset:0;

  z-index:99999;

  background:
  rgba(0,0,0,.45);

  backdrop-filter:
  blur(6px);

}

/* SHOW */

.deli-modal.active{

  display:block;

}
.deli-modal-content{

  position:absolute;

  right:0;
  bottom:0;

  width:100%;

  background:white;

  border-radius:
  32px 32px 0 0;

  overflow:hidden;

}

.app-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:72px;
  background:white;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:
  1px solid #eee;

}
.app-header-left, .app-header-right{
    display: flex;
    gap:15px;
}

.hero{
padding:20px;
background:
linear-gradient(
180deg,
#FFF5F5 0%,
#F5F7FB 100%
);
border-radius:
0 0 32px 32px;
}

.hero h1{
font-size:34px;
line-height:1.15;
font-weight:800;
color:#111827;
margin-bottom:24px;
text-align:center;
}

.promo-slider{
position:relative;
}

.carousel-item img{
border-radius:28px;
overflow:hidden;
display:block;
width:100%;
}

.carousel-indicators{
position:relative;
margin-top:18px;
margin-bottom:0;
}

.carousel-indicators button{
width:8px !important;
height:8px !important;
border-radius:50% !important;
background:#D1D5DB !important;
border:none !important;
margin:0 4px !important;
opacity:1 !important;
}

.carousel-indicators .active{
background:#FF4D4F !important;
width:22px !important;
border-radius:999px !important;
}

.hero-actions{
display:flex;
gap:12px;
margin-top:20px;
}

.hero-btn{
height:52px;
padding:0 22px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:700;
font-size:15px;
transition:.2s ease;
}

.primary-btn{
background:#FF4D4F;
color:white;
box-shadow:0 10px 20px rgba(255,77,79,.25);
}

.secondary-btn{
background:#F3F4F6;
color:#111827;
border:none;
}

.global-search{
padding:24px 20px;
}

.search-box{
height:64px;
background:white;
border-radius:22px;
display:flex;
align-items:center;
padding:0 18px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.search-icon{
font-size:22px;
margin-right:12px;
}

.search-box input{
flex:1;
border:none;
outline:none;
font-size:17px;
background:none;
color:#111827;
}

.search-box input::placeholder{
color:#9CA3AF;
}

.hero{padding:14px 16px 0;}

.top-search-area{margin-bottom:18px;}

.home-greeting span{font-size:13px;color:#6B7280;font-weight:600;}

.home-greeting h2{font-size:28px;font-weight:800;line-height:1.1;color:#111827;margin-top:6px;margin-bottom:18px;}

.global-search-box{height:58px;background:white;border-radius:18px;display:flex;align-items:center;padding:0 16px;box-shadow:0 6px 18px rgba(0,0,0,.05);margin-bottom:18px;}

.global-search-box svg{color:#9CA3AF;margin-right:12px;flex-shrink:0;}

.global-search-box input{flex:1;border:none;outline:none;background:none;font-size:16px;color:#111827;font-weight:500;}

.global-search-box input::placeholder{color:#9CA3AF;}



.container-categorias-items::-webkit-scrollbar{display:none;}

.categoria-item{min-width:88px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;}

.categoria-circle{width:74px;height:74px;border-radius:50%;background:#FF7A00;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(255,122,0,.25);overflow:hidden;}

.categoria-circle span{font-size:34px;}

.categoria-item p{font-size:13px;font-weight:700;text-align:center;color:#111827;margin-top:10px;line-height:1.3;}

.promo-slider{padding:0 16px;margin-top:8px;}

.carousel-item img{border-radius:24px;display:block;width:100%;}

.carousel-indicators{position:relative;margin-top:14px;margin-bottom:0;}

.carousel-indicators button{width:8px !important;height:8px !important;border-radius:50% !important;background:#D1D5DB !important;border:none !important;margin:0 4px !important;opacity:1 !important;}

.carousel-indicators .active{background:#FF4D4F !important;width:22px !important;border-radius:999px !important;}
.container-categorias-items{display:flex;gap:14px;overflow-x:auto;padding:5px 0 20px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch; flex-wrap:nowrap;}.container-categorias-items{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:5px 16px 18px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;flex-wrap:nowrap;width:100%;box-sizing:border-box}.container-categorias-items::-webkit-scrollbar{display:none}.ml-category-card{min-width:78px;max-width:78px;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-shrink:0;padding:0;text-align:center}.ml-category-icon{width:68px;height:68px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08)}.ml-category-icon img{width:52px;height:52px;object-fit:contain}.ml-category-name{margin-top:7px;font-size:.72rem;font-weight:500;line-height:1.15;color:#111827;margin-bottom:0;word-break:break-word}.ml-category-card:active{transform:scale(.96)}
 .home-greeting{
  padding: 10px;
 }

 .ml-category-card{width:96px;min-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-shrink:0;scroll-snap-align:start;border:none;background:none}.ml-category-icon{width:82px;height:82px;background:#fff;border-radius:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.04);overflow:hidden;transition:.2s}.ml-category-icon img{width:100%;height:100%;object-fit:cover}.ml-category-name{font-size:13px;font-weight:600;line-height:1.2;color:#1c1c1e;text-align:center;margin-top:8px;padding:0 2px}.ml-category-card:active{transform:scale(.96)}
#premium-restaurants-container{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 18px 10px;box-sizing:border-box}.restaurant-grid-card{background:#fff;border-radius:22px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);overflow:hidden;padding:10px;transition:.2s}.restaurant-grid-card:active{transform:scale(.96)}.restaurant-grid-logo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.restaurant-grid-logo img{width:100%;height:100%;object-fit:contain}
.restaurant-grid-card{background:#fff;border-radius:28px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);transition:.2s}.restaurant-grid-card:active{transform:scale(.97)}.restaurant-grid-logo{width:82px;height:82px;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff}.restaurant-grid-logo img{width:72%;height:100%;object-fit:cover}.restaurant-grid-name{font-size:14px;font-weight:600;color:#1c1c1e;text-align:center;line-height:1.3;margin-top:12px}

.ios-sheet-dialog{margin:0;display:flex;align-items:flex-end;justify-content:center;min-height:100%;max-width:100%;width:100%;padding:0}.ios-sheet-content{width:100%;height:78vh;border:none;border-radius:34px 34px 0 0;background:#fff;padding:14px 20px 34px;overflow-y:auto;overflow-x:hidden;position:fixed;left:0;right:0;bottom:0;animation:sheetUp .28s ease;box-shadow:0 -10px 40px rgba(0,0,0,.18);margin:0}.ios-sheet-handle{width:52px;height:5px;background:#d1d1d6;border-radius:999px;margin:0 auto 18px}.ios-close-btn{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;background:#f2f2f7;border-radius:50%;font-size:16px;color:#3a3a3c;display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer}.ios-sheet-body{text-align:center;padding-top:8px}.ios-restaurant-logo{width:140px;height:140px;margin:0 auto 20px;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.08)}.ios-restaurant-logo img{width:100%;height:100%;object-fit:cover}.ios-restaurant-title{font-size:30px;font-weight:700;color:#1c1c1e;margin-bottom:10px}.ios-restaurant-hours{font-size:15px;font-weight:600;color:#1c1c1e;margin-bottom:14px;line-height:1.4}.ios-restaurant-description{font-size:16px;line-height:1.6;color:#6e6e73;margin-bottom:26px}.ios-restaurant-button{height:56px;border-radius:18px;background:#ff5a5f;color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%;box-shadow:0 8px 18px rgba(255,90,95,.25)}.ios-restaurant-button:active{transform:scale(.98)}.modal.fade .modal-dialog{transform:translateY(100%);transition:transform .28s ease}.modal.show .modal-dialog{transform:translateY(0)}.modal-backdrop.show{opacity:.35}@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-ios{
  --bs-modal-zindex: 1055;
  position: fixed;
  top:auto!important;
  bottom: 0 !important;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100% !important;
  height: 83% !important;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.ios-close-btn{
position:absolute;
top:18px;
right:18px;
background-color:#f2f2f7!important;
border-radius:50%;
padding:12px;
opacity:1;
z-index:20;
}

.container-categorias-items{
display:flex;
gap:12px;
overflow-x:auto;
overflow-y:hidden;
width:100%;
max-width:90vw;
box-sizing:border-box;
scroll-behavior:smooth;
flex-wrap:nowrap;
padding:0 16px 10px 16px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.hero {
    width: 100%;
    align-items: center;
    margin-top: 60px;
    flex-direction: column;
  }


.ios-promos-shell{padding:30px 0 44px;background:#f5f5f7;overflow:hidden;position:relative}.ios-promos-topbar{display:flex;align-items:flex-start;justify-content:space-between;padding:0 20px 22px;gap:14px}.ios-promos-copy{flex:1}.ios-promos-kicker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#ff5a5f;background:rgba(255,90,95,.1);padding:8px 14px;border-radius:999px;margin-bottom:14px}.ios-promos-title{font-size:36px;font-weight:900;letter-spacing:-1.4px;line-height:.95;color:#111;margin:0}.ios-promos-subtitle{margin-top:10px;font-size:15px;line-height:1.4;color:#6e6e73;font-weight:500}.ios-promos-action{height:46px;padding:0 18px;border:none;border-radius:999px;background:#fff;color:#111;font-size:14px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.06);flex-shrink:0}.ios-promos-slider{position:relative;width:100%;overflow:hidden}.ios-promos-track{display:flex;gap:18px;overflow-x:auto;padding:6px 20px 10px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:stretch}.ios-promos-track::-webkit-scrollbar{display:none}@media(max-width:480px){.ios-promos-shell{padding-top:24px}.ios-promos-title{font-size:31px}.ios-promos-subtitle{font-size:14px}.ios-promos-topbar{padding:0 18px 20px}.ios-promos-track{padding:6px 18px 8px}}

#carouselInner-os{
display:flex;
gap:18px;
overflow-x:auto;
padding:0 18px 28px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
box-sizing:border-box;
}

#carouselInner-os::-webkit-scrollbar{
display:none;
}

.ios-product-card{
min-width:calc(100vw - 52px);
max-width:calc(100vw - 52px);
background:#fff;
border-radius:34px;
overflow:hidden;
position:relative;
flex-shrink:0;
scroll-snap-align:center;
box-shadow:
0 10px 30px rgba(0,0,0,.08),
0 2px 8px rgba(0,0,0,.04);
border:1px solid rgba(0,0,0,.04);
box-sizing:border-box;
}

.ios-product-media{
position:relative;
width:100%;
height:240px;
overflow:hidden;
background:#f2f2f7;
}

.ios-product-image{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.ios-product-floating{
position:absolute;
top:14px;
left:14px;
z-index:5;
background:rgba(0,0,0,.58);
backdrop-filter:blur(14px);
padding:8px 14px;
border-radius:999px;
}

.ios-product-floating span{
font-size:12px;
font-weight:700;
color:#fff;
}

.ios-product-share{
position:absolute;
top:14px;
right:14px;
z-index:10;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 18px rgba(0,0,0,.12);
color:#111;
cursor:pointer;
}

.ios-product-body{
padding:22px;
display:flex;
flex-direction:column;
gap:14px;
box-sizing:border-box;
}

.ios-product-title{
font-size:28px;
font-weight:800;
line-height:1;
letter-spacing:-1px;
color:#111;
margin:0;
}

.ios-product-body p{
margin:0;
font-size:15px;
line-height:1.5;
color:#6e6e73;
}

.ios-product-price-wrap{
margin-top:4px;
}

.ios-product-price{
width:100%;
border:none!important;
background:none!important;
padding:0!important;
font-size:38px!important;
font-weight:900!important;
color:#111!important;
outline:none!important;
box-shadow:none!important;
}

.ios-product-quantity{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin-top:4px;
}

.ios-product-minus,
.ios-product-plus{
width:44px;
height:44px;
border:none;
border-radius:18px;
background:#f2f2f7;
font-size:26px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
color:#111;
}

.ios-product-minus:active,
.ios-product-plus:active{
transform:scale(.96);
}

.ios-product-input{
width:60px;
border:none!important;
background:none!important;
text-align:center;
font-size:24px;
font-weight:800;
color:#111;
outline:none!important;
box-shadow:none!important;
}

.ios-product-options{
margin-top:2px;
}

.ios-product-select{
width:100%;
height:56px;
border:none;
border-radius:18px;
background:#f2f2f7;
padding:0 18px;
font-size:15px;
font-weight:600;
color:#111;
outline:none;
}

.ios-product-button{
width:100%;
height:58px;
border:none;
border-radius:20px;
background:#ff5a5f;
color:#fff;
font-size:17px;
font-weight:800;
margin-top:6px;
box-shadow:0 10px 24px rgba(255,90,95,.22);
}

.ios-product-button:active{
transform:scale(.98);
}


.ios-share-sheet{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:flex-end;
justify-content:center;
}

.ios-share-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
backdrop-filter:blur(4px);
}

.ios-share-content{
position:relative;
width:100%;
background:#f2f2f7;
border-radius:30px 30px 0 0;
padding:14px 18px 34px;
animation:shareUp .25s ease;
z-index:3;
}

.ios-share-handle{
width:46px;
height:5px;
border-radius:999px;
background:#d1d1d6;
margin:0 auto 18px;
}

.ios-share-title{
text-align:center;
font-size:15px;
font-weight:700;
color:#6e6e73;
margin-bottom:22px;
}

.ios-share-whatsapp{
width:100%;
height:56px;
border-radius:18px;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:17px;
font-weight:800;
color:#fff;
margin-bottom:12px;
}

.ios-share-cancel{
width:100%;
height:54px;
border:none;
border-radius:18px;
background:#fff;
font-size:17px;
font-weight:700;
color:#007aff;
}

@keyframes shareUp{
from{
transform:translateY(100%);
}
to{
transform:translateY(0);
}
}
.ios-sheet{
position:fixed;
inset:0;

display:none;

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

z-index:999999;
}

.ios-sheet.active{
display:flex;
}

.ios-sheet-overlay{
position:absolute;
inset:0;

background:
rgba(0,0,0,.28);

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);

animation:
fadeSheet .25s ease;
}

.ios-sheet-content{
position:relative;

width:100%;
height:90vh;

background:
#f5f5f7;

border-radius:
34px 34px 0 0;

padding:
18px 18px 40px;

overflow-y:auto;
overflow-x:hidden;

box-sizing:border-box;

z-index:2;

animation:
sheetUp .32s cubic-bezier(.32,.72,0,1);

box-shadow:
0 -10px 40px rgba(0,0,0,.22);
}

.ios-sheet-handle{
width:52px;
height:5px;

background:#d1d1d6;

border-radius:999px;

margin:0 auto 18px;
}

.ios-sheet-close{
position:absolute;

top:16px;
right:16px;

width:34px;
height:34px;

border:none;

background:#ededf0;

border-radius:50%;

font-size:18px;

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

color:#3a3a3c;

z-index:10;
}

.ios-sheet-title{
font-size:22px;
font-weight:700;

text-align:center;

margin-bottom:24px;

color:#1c1c1e;
}

@keyframes sheetUp{
from{
transform:
translateY(100%);
}

to{
transform:
translateY(0);
}
}

@keyframes fadeSheet{
from{
opacity:0;
}
to{
opacity:1;
}
}

.bottom-nav #ver-carrito{
all:unset;

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


cursor:pointer;

font-size:12px;
font-weight:500;

color:#8e8e93;

position:relative;
}

.bottom-nav #ver-carrito span:first-child{
font-size:22px;
}

#carrito-contador{
position:absolute;

top:-2px;
right:26%;

width:18px;
height:18px;

background:#ff3b30;

border-radius:50%;

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

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

color:#fff;
}

/* =========================
PROMO SHEET IOS
========================= */

.promo-sheet{
position:fixed;
inset:0;

background:
rgba(0,0,0,.42);

backdrop-filter:
blur(12px);

-webkit-backdrop-filter:
blur(12px);

display:none;

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

z-index:999999;
}

.promo-sheet.active{
display:flex;
animation:fadePromo .2s ease;
}

/* =========================
CONTENT
========================= */

.promo-sheet-content{
position:relative;
width:100%;
height:93vh;
background:#f5f5f7;

border-radius:
34px 34px 0 0;

padding:
14px 16px 40px;

overflow-y:auto;

animation:
promoUp .28s ease;

box-shadow:
0 -10px 40px rgba(0,0,0,.18);
}

/* =========================
HANDLE
========================= */

.promo-sheet-handle{
width:52px;
height:5px;

background:#d1d1d6;

border-radius:999px;

margin:
0 auto 20px;
}

/* =========================
HEADER
========================= */

.promo-sheet-header{
display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:20px;
}

.promo-sheet-header h2{
font-size:32px;
font-weight:800;

color:#1c1c1e;

margin:0;
}

.promo-sheet-close{
width:40px;
height:40px;

border:none;

border-radius:50%;

background:#fff;

font-size:18px;

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

box-shadow:
0 4px 12px rgba(0,0,0,.08);
}

/* =========================
BANNERS
========================= */

.promo-banners-container{
display:flex;
flex-direction:column;
gap:18px;
}

.promo-banner-card{
display:block;

width:100%;
height:190px;

border-radius:28px;

overflow:hidden;

background:#fff;

box-shadow:
0 10px 24px rgba(0,0,0,.10);

transition:.2s ease;
}

.promo-banner-card:active{
transform:scale(.98);
}

.promo-banner-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* =========================
ANIMATIONS
========================= */

@keyframes promoUp{

from{
transform:translateY(100%);
}

to{
transform:translateY(0);
}

}

@keyframes fadePromo{

from{
opacity:0;
}

to{
opacity:1;
}

}

/* =====================================
IOS SITES SHEET
===================================== */

.sites-sheet{
position:fixed;
inset:0;

background:
rgba(0,0,0,.45);

backdrop-filter:
blur(14px);

-webkit-backdrop-filter:
blur(14px);

display:none;

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

z-index:999999;
}

.sites-sheet.active{
display:flex;
animation:fadeSites .2s ease;
}

/* =====================================
CONTENT
===================================== */

.sites-sheet-content{
position:relative;

width:100%;
height:93vh;

background:#f5f5f7;

border-radius:
34px 34px 0 0;

padding:
14px 16px 40px;

overflow-y:auto;

animation:
sitesUp .28s ease;

box-shadow:
0 -10px 40px rgba(0,0,0,.18);
}

/* =====================================
HANDLE
===================================== */

.sites-sheet-handle{
width:52px;
height:5px;

background:#d1d1d6;

border-radius:999px;

margin:
0 auto 18px;
}

/* =====================================
HEADER
===================================== */

.sites-sheet-header{
display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:20px;
}

.sites-sheet-header h2{
font-size:34px;
font-weight:800;

color:#1c1c1e;

margin:0;
}

.sites-sheet-close{
width:42px;
height:42px;

border:none;

border-radius:50%;

background:#fff;

font-size:18px;

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

box-shadow:
0 4px 12px rgba(0,0,0,.08);
}

/* =====================================
LIST
===================================== */

.sites-list{
display:flex;
flex-direction:column;
gap:22px;
}

/* =====================================
CARD
===================================== */

.site-row{
position:relative;

width:100%;
height:240px;

border-radius:30px;

overflow:hidden;

background:#000;

box-shadow:
0 14px 30px rgba(0,0,0,.16);
}

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

.site-slider{
width:100%;
height:100%;
overflow:hidden;
}

.site-slider-track{
display:flex;

width:300%;
height:100%;

animation:
autoSlide 12s infinite;
}

.site-slider-track img{
width:100%;
height:100%;

object-fit:cover;

flex-shrink:0;
}

/* =====================================
OVERLAY
===================================== */

.site-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.78),
rgba(0,0,0,.18),
transparent
);
}

/* =====================================
INFO
===================================== */

.site-info{
position:absolute;

left:22px;
bottom:24px;

z-index:3;

color:#fff;
}

.site-info h3{
font-size:34px;
font-weight:800;

margin-bottom:6px;
}

.site-tags{
font-size:16px;
line-height:1.5;

opacity:.92;

margin-bottom:8px;
}

.site-rating{
font-size:17px;
font-weight:600;
}

/* =====================================
LINK
===================================== */

.site-link{
position:absolute;
inset:0;
z-index:5;
}

/* =====================================
ANIMATIONS
===================================== */

@keyframes autoSlide{

0%{
transform:translateX(0%);
}

30%{
transform:translateX(0%);
}

35%{
transform:translateX(-100%);
}

65%{
transform:translateX(-100%);
}

70%{
transform:translateX(-200%);
}

100%{
transform:translateX(-200%);
}

}

@keyframes sitesUp{

from{
transform:translateY(100%);
}

to{
transform:translateY(0);
}

}

@keyframes fadeSites{

from{
opacity:0;
}

to{
opacity:1;
}

}

@media(max-width:480px){

.ios-product-card{
min-width:calc(100vw - 44px);
max-width:calc(100vw - 44px);
}

.ios-product-media{
height:210px;
}

.ios-product-title{
font-size:16px;
}

.ios-product-price{
font-size:20px!important;
}

}