/* /assets/css/carta.css */

:root{
  --carta-bg:#f7f3ec;
  --carta-panel:#fffdf8;
  --carta-soft:#f5ead0;
  --carta-soft-2:#f2e6d5;
  --carta-text:#5a3528;
  --carta-text-2:#6f4a3c;
  --carta-accent:#ef5335;
  --carta-accent-dark:#df4329;
  --carta-green:#76a80d;
  --carta-green-dark:#669207;
  --carta-shadow:0 10px 24px rgba(90,53,40,.10);
  --carta-shadow-soft:0 6px 18px rgba(90,53,40,.08);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body.carta-screen{
  background:var(--carta-bg);
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--carta-text);
}

.carta-app-shell{
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--carta-bg);
  padding:10px 10px 104px;
}

/* ===== TOPBAR ===== */

.carta-topbar{
  display:grid;
  grid-template-columns:48px 1fr 64px;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.carta-icon-btn{
  width:48px;
  height:42px;
  border:0;
  background:transparent;
  color:var(--carta-text);
  font-size:2rem;
  line-height:1;
  padding:0;
}

.carta-topbar-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.carta-topbar-logo{
  width:210px;
  height:210px;
  object-fit:contain;
  display:block;
}

.carta-cart-btn{
  position:relative;
  width:62px;
  height:44px;
  border-radius:14px;
  background:var(--carta-green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  box-shadow:var(--carta-shadow-soft);
}

.carta-cart-icon{
  font-size:1.25rem;
  line-height:1;
}

.carta-cart-count{
  position:absolute;
  top:-8px;
  right:-6px;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#f04f3a;
  color:#fff;
  font-size:.85rem;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}

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

.carta-hero-exact{
  text-align:center;
  padding:0 6px 4px;
  margin-top:-34px;
}

.carta-hero-logo-wrap{
  display:none;
}

.carta-hero-logo{
  display:none;
}

.carta-main-title{
  margin:0;
  font-size:2rem;
  line-height:0.98;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--carta-text);
}

.carta-main-subtitle{
  margin:6px 0 0;
  font-size:.98rem;
  line-height:1.3;
  font-weight:500;
  color:var(--carta-text-2);
}

/* ===== SEARCH ===== */

.carta-search-box{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 15px;
  border-radius:999px;
  background:var(--carta-panel);
  border:1px solid #efe6d9;
  box-shadow:var(--carta-shadow-soft);
}

.carta-search-icon{
  flex:0 0 auto;
  color:#b39a8e;
  font-size:1.5rem;
  line-height:1;
}

.carta-search-input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:var(--carta-text);
  font-size:.94rem;
  font-weight:500;
}

.carta-search-input::placeholder{
  color:#baa598;
}

/* ===== TABS ===== */

.carta-tabs-wrap{
  margin-top:0;
  margin-bottom:12px;
}

.carta-tabs-track{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  background:var(--carta-soft);
  border-radius:18px;
  padding:3px;
}

.carta-tabs-track::-webkit-scrollbar{
  display:none;
}

.carta-cat-chip{
  flex:0 0 auto;
  min-width:92px;
  height:42px;
  padding:0 13px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--carta-text);
  font-size:.94rem;
  font-weight:700;
  white-space:nowrap;
  position:relative;
}

.carta-cat-chip + .carta-cat-chip::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:rgba(90,53,40,.12);
}

.carta-cat-chip.is-active{
  background:linear-gradient(180deg,var(--carta-accent) 0%, var(--carta-accent-dark) 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(239,83,53,.28);
}

.carta-cat-chip.is-active::before{
  display:none;
}

/* ===== BLOCK TITLES ===== */

.carta-block-title{
  margin:0 0 7px;
  font-size:1.15rem;
  line-height:1;
  font-weight:800;
  color:var(--carta-text);
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ===== FEATURED ===== */

.carta-featured-wrap{
  margin-bottom:8px;
}

.carta-featured-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}

.carta-featured-row::-webkit-scrollbar{
  display:none;
}

.carta-featured-card{
  flex:0 0 176px;
  background:var(--carta-panel);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--carta-shadow);
  border:1px solid #efe6d9;
}

.carta-featured-image{
  width:100%;
  height:118px;
  object-fit:cover;
  display:block;
  background:#e9ddcf;
}

.carta-featured-body{
  padding:8px 10px 8px;
}

.carta-featured-name{
  margin:0;
  min-height:34px;
  font-size:.95rem;
  line-height:1.08;
  font-weight:700;
  color:var(--carta-text);
}

.carta-featured-rating{
  margin-top:6px;
  color:#f5b233;
  font-size:.94rem;
  letter-spacing:.08em;
  line-height:1;
}

.carta-featured-footer{
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.carta-featured-price{
  font-size:.94rem;
  font-weight:800;
  color:var(--carta-text);
}

.carta-featured-btn{
  min-width:68px;
  height:34px;
  border-radius:999px;
  background:var(--carta-green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:800;
  padding:0 13px;
}

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

.carta-products-wrap{
  padding-bottom:6px;
}

.carta-category-block{
  margin-bottom:8px;
  --cat-bg:var(--carta-panel);
  --cat-border:#efe6d9;
  --cat-accent:var(--carta-soft-2);
}

.carta-category-title{
  margin:0 0 7px;
  font-size:1.15rem;
  line-height:1;
  font-weight:800;
  color:var(--carta-text);
  text-transform:uppercase;
  letter-spacing:.01em;
}

.carta-list{
  display:grid;
  gap:8px;
}

.carta-item{
  background:var(--carta-panel);
  border:1px solid #efe6d9;
  border-radius:22px;
  box-shadow:var(--carta-shadow-soft);
  overflow:hidden;
}

.carta-item-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
}

.carta-item-head h3{
  margin:0;
  font-size:.94rem;
  line-height:1.12;
  font-weight:700;
  color:var(--carta-text);
  text-transform:none;
  letter-spacing:0;
}

.carta-price{
  margin:0;
  font-size:.94rem;
  line-height:1;
  font-weight:800;
  color:var(--carta-text);
  white-space:nowrap;
}

.carta-item-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.carta-add-mini-btn{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:var(--carta-green);
  color:#fff;
  font-size:1.45rem;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(118,168,13,.24);
}

.carta-item-desc{
  margin:0;
  font-size:.90rem;
  line-height:1.26;
  font-weight:500;
  color:var(--carta-text-2);
}

.carta-toggle{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:var(--carta-soft-2);
  color:var(--carta-text);
  font-size:1.45rem;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.carta-item-body{
  max-height:0;
  overflow:hidden;
  padding:0 14px;
  transition:max-height .28s ease,padding .28s ease;
}

.carta-item.is-open .carta-item-body{
  max-height:180px;
  padding:0 10px 10px;
}

.carta-item-body p{
  margin:0;
  font-size:.88rem;
  line-height:1.24;
  font-weight:500;
  color:var(--carta-text-2);
}

.carta-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:nowrap;
}

.carta-qty-btn{
  border:0;
  border-radius:999px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 16px rgba(90,53,40,.10);
}

.carta-remove-btn{
  width:40px;
  min-width:40px;
  height:40px;
  background:var(--carta-soft-2);
  color:var(--carta-text);
  font-size:1.35rem;
  line-height:1;
}

.carta-remove-btn--top{
  width:34px;
  min-width:34px;
  height:34px;
  font-size:1.2rem;
}

.carta-add-btn{
  margin-left:auto;
  flex:0 0 auto;
  min-height:36px;
  padding:0 12px;
  background:rgba(118,168,13,.08);
  border:2px solid var(--carta-green);
  color:var(--carta-green-dark);
  text-align:center;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:none;
}

.carta-whatsapp-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.carta-item-rating{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  height:30px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(245,178,51,.10);
  color:#f5b233;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
}

.carta-rating-label{
  font-size:.64rem;
  font-weight:600;
  color:#b09a8e;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-right:6px;
}

.carta-stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
}

.carta-star{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  line-height:1;
  font-size:.95rem;
  color:#ddc9a1;
  cursor:pointer;
  transition:transform .15s ease, color .15s ease;
}

.carta-star:hover{
  transform:scale(1.08);
}

.carta-star.is-active{
  color:#f5b233;
}

.carta-qty-badge{
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  background:var(--carta-accent);
  color:#fff;
  font-size:.84rem;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 12px rgba(239,83,53,.22);
}

.carta-qty-badge--inline{
  min-width:24px;
  height:24px;
  padding:0 6px;
  font-size:.74rem;
  box-shadow:none;
}

/* ===== CATEGORY COLORS ===== */

.carta-category-block--arepas{
  --cat-bg:#fffaf2;
  --cat-border:#efe2cf;
  --cat-accent:#f2e5d2;
}

.carta-category-block--patacones{
  --cat-bg:#fcf5ea;
  --cat-border:#ead8c0;
  --cat-accent:#ecd8bc;
}

.carta-category-block--desayunos{
  --cat-bg:#fff8ef;
  --cat-border:#efe0c8;
  --cat-accent:#f2e4c9;
}

.carta-category-block--entrantes{
  --cat-bg:#fdf7ed;
  --cat-border:#ebdcc8;
  --cat-accent:#eedfca;
}

.carta-category-block--bebidas{
  --cat-bg:#f7fbf4;
  --cat-border:#dfead8;
  --cat-accent:#e5f0de;
}

.carta-category-block--jugos-naturales-leche{
  --cat-bg:#fff7f1;
  --cat-border:#f0ddd1;
  --cat-accent:#f3e2d7;
}

.carta-category-block--jugos-naturales-agua{
  --cat-bg:#f7fbf7;
  --cat-border:#dce9dd;
  --cat-accent:#e3efe3;
}

.carta-category-block .carta-featured-card,
.carta-category-block .carta-item{
  background:var(--cat-bg);
  border-color:var(--cat-border);
}

.carta-category-block .carta-toggle{
  background:var(--cat-accent);
}

.carta-category-block .carta-remove-btn{
  background:var(--cat-accent);
}

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

.carta-bottom-cta-wrap{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:430px;
  display:none;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,243,236,0) 0%, rgba(247,243,236,.92) 22%, rgba(247,243,236,1) 100%);
}

.carta-bottom-cta{
  width:100%;
  min-height:56px;
  border-radius:999px;
  background:var(--carta-green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.94rem;
  font-weight:800;
  box-shadow:0 14px 28px rgba(118,168,13,.25);
}

/* ===== STATES ===== */

.carta-loading,
.carta-error,
.carta-empty{
  padding:18px;
  background:var(--carta-panel);
  border-radius:22px;
  border:1px solid #efe6d9;
  box-shadow:var(--carta-shadow-soft);
  color:var(--carta-text);
  font-weight:700;
}

/* ===== GOOGLE REVIEW POPUP ===== */

.carta-google-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(32,22,16,.34);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}

.carta-google-popup-overlay.is-open{
  display:flex;
}

.carta-google-popup{
  width:100%;
  max-width:340px;
  background:#fffdf8;
  border:1px solid #efe6d9;
  border-radius:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
  padding:20px 18px 18px;
  text-align:center;
}

.carta-google-popup-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--carta-text);
  margin-bottom:8px;
}

.carta-google-popup-text{
  font-size:.92rem;
  font-weight:500;
  line-height:1.4;
  color:var(--carta-text-2);
}

.carta-google-popup-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.carta-google-popup-btn{
  flex:1 1 0;
  min-height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:.84rem;
  font-weight:800;
  padding:0 12px;
}

.carta-google-popup-btn--ghost{
  border:1px solid #e4d8c8;
  background:#fff;
  color:var(--carta-text);
}

.carta-google-popup-btn--primary{
  border:1px solid var(--carta-green);
  background:var(--carta-green);
  color:#fff;
}

/* ===== DESKTOP SAFETY ===== */

@media (min-width:768px){
  .carta-app-shell{
    max-width:460px;
    padding-left:16px;
    padding-right:16px;
  }

  .carta-bottom-cta-wrap{
    max-width:460px;
    padding-left:16px;
    padding-right:16px;
  }
}
/* FIX SOLO TITULO SUPERIOR DUPLICADO DE RECOMENDADOS */
.carta-featured-wrap > .carta-block-title{
  display:none;
}


/* BOTON FLOTANTE VOLVER ARRIBA */
.carta-scroll-top{
  position:fixed;
  right:16px;
  bottom:92px;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:var(--carta-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  font-weight:900;
  box-shadow:0 12px 24px rgba(239,83,53,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:999;
}

.carta-scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.carta-scroll-top:active{
  transform:translateY(1px);
}

@media (min-width:768px){
  .carta-scroll-top{
    right:calc(50% - 230px + 16px);
  }
}