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

:root{
  --cream:#FAF5EE;
  --cream-dark:#EFE4D2;
  --gold:#C9A462;
  --gold-dark:#A67C3A;
  --gold-light:#F5E9C8;
  --charcoal:#1C1817;
  --charcoal-soft:#3D3530;
  --text-mid:#6B5C48;
  --text-light:#9B8B78;
  --muted:#9B8B78;
  --white:#FFFFFF;
  --wa:#2E9E6A;
  --wa-dark:#128C7E;
  --border:rgba(201,164,98,.22);
  --shadow-sm:0 2px 8px rgba(28,24,23,.08);
  --shadow:0 4px 20px rgba(28,24,23,.12);
  --shadow-lg:0 8px 40px rgba(28,24,23,.18);
  --r:12px;
  --r-lg:20px;
  --ease:all .3s cubic-bezier(.4,0,.2,1);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(80px + env(safe-area-inset-top));
  overflow-x:hidden;
  -webkit-text-size-adjust:100%; /* evita que iOS cambie el tamaño de texto al rotar */
  text-size-adjust:100%;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--charcoal);line-height:1.6;overflow-x:hidden}

/* ── TOUCH GLOBAL ── */
a,button,[onclick],[role="button"]{
  -webkit-tap-highlight-color:transparent; /* quita el flash gris al tocar en Android */
  touch-action:manipulation;              /* elimina el delay de 300ms en el tap */
}
h1,h2,h3{font-family:'Playfair Display',serif;line-height:1.2}
.script{font-family:'Dancing Script',cursive}
img{max-width:100%;display:block}
a{color:inherit}

/* ── HEADER ── */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,245,238,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:var(--ease)}
.header.scrolled{box-shadow:var(--shadow)}
.nav{max-width:1200px;margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:62px;width:auto;border-radius:8px}
.nav-links{display:flex;list-style:none;gap:4px;align-items:center}
.nav-links a{text-decoration:none;color:var(--charcoal-soft);font-size:.875rem;font-weight:500;padding:8px 12px;border-radius:8px;transition:var(--ease)}
.nav-links a:hover{color:var(--gold-dark);background:var(--gold-light)}
.nav-cta{background:var(--wa)!important;color:#fff!important;padding:9px 18px!important;border-radius:50px!important;font-weight:600!important;display:flex!important;align-items:center!important;gap:6px!important}
.nav-cta:hover{background:var(--wa-dark)!important;transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,211,102,.35)!important}
.nav-actions{display:flex;align-items:center;gap:6px}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none}
.nav-toggle span{width:24px;height:2px;background:var(--charcoal);border-radius:2px;transition:var(--ease)}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:110px 40px 80px;background:linear-gradient(135deg,var(--cream) 0%,var(--cream-dark) 55%,var(--gold-light) 100%)}
.hero-bg{position:absolute;inset:0;background-image:radial-gradient(circle at 15% 85%,rgba(201,164,98,.18) 0%,transparent 50%),radial-gradient(circle at 85% 15%,rgba(201,164,98,.12) 0%,transparent 50%);pointer-events:none}
.hero-inner{max-width:1160px;width:100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-text{}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);padding:8px 18px;border-radius:50px;font-size:.78rem;font-weight:500;color:var(--text-mid);margin-bottom:28px;box-shadow:var(--shadow-sm)}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.hero h1{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:700;margin-bottom:20px;line-height:1.12}
.hero h1 em{font-style:italic;color:var(--gold-dark)}
.hero p{font-size:1.05rem;color:var(--text-mid);margin-bottom:36px;max-width:460px;line-height:1.7}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Hero visual — floating product cards */
.hero-visual{position:relative;height:480px}
.hc{position:absolute;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(28,24,23,.13);overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease}
.hc:hover{box-shadow:0 16px 48px rgba(28,24,23,.2);z-index:10!important}
.hc img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hc-info{padding:10px 13px 12px}
.hc-name{font-family:'Playfair Display',serif;font-size:.82rem;font-weight:600;color:var(--charcoal);line-height:1.3;margin-bottom:3px}
.hc-price{font-size:.8rem;font-weight:700;color:var(--gold-dark)}
/* positions & rotations */
.hc:nth-child(1){width:200px;top:0;left:0;transform:rotate(-5deg);z-index:3}
.hc:nth-child(1):hover{transform:rotate(0deg) translateY(-6px)}
.hc:nth-child(2){width:195px;bottom:10px;right:0;transform:rotate(6deg);z-index:2}
.hc:nth-child(2):hover{transform:rotate(0deg) translateY(-6px)}
.hc:nth-child(3){width:215px;top:80px;left:90px;transform:rotate(-2deg);z-index:4}
.hc:nth-child(3):hover{transform:rotate(0deg) translateY(-6px)}
/* sparkle decorations */
.hero-visual::before,.hero-visual::after{content:'✦';position:absolute;font-size:1.4rem;color:var(--gold);opacity:.35;pointer-events:none}
.hero-visual::before{top:0;right:60px;animation:float-star 4s ease-in-out infinite}
.hero-visual::after{bottom:60px;right:0;font-size:.9rem;animation:float-star 4s ease-in-out infinite .8s}
@keyframes float-star{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(15deg)}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:50px;font-size:.93rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:var(--ease);white-space:nowrap;font-family:'Inter',sans-serif}
.btn-dark{background:var(--charcoal);color:var(--cream)}
.btn-dark:hover{background:var(--charcoal-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.35)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,164,98,.4)}
.btn-white{background:#fff;color:#2D6A4F;font-weight:700}
.btn-white:hover{background:var(--cream);transform:translateY(-2px)}

/* ── SECTION BASICS ── */
section{padding:80px 20px}
.container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:52px}
.section-tag{display:inline-block;background:var(--gold-light);color:var(--gold-dark);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.section-tag-dark{background:rgba(255,255,255,.15);color:#fff;margin-bottom:20px}
.section-header h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px}
.section-header p{font-size:1.02rem;color:var(--text-mid);max-width:500px;margin:0 auto}

/* ── PILLARS ── */
.pillars{background:#fff}
.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.pillar-card{text-align:center;padding:38px 28px;border-radius:var(--r-lg);border:1px solid var(--border);transition:var(--ease)}
.pillar-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.pillar-icon{width:68px;height:68px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.pillar-icon svg{width:28px;height:28px;stroke:var(--gold-dark)}
.pillar-card h3{font-size:1.15rem;margin-bottom:10px}
.pillar-card p{font-size:.88rem;color:var(--text-mid);line-height:1.75}

/* ── PRODUCTS ── */
.products-section{background:var(--cream)}
/* SEARCH BAR */
.products-search{max-width:460px;margin:0 auto 28px;position:relative}
.products-search input{width:100%;padding:13px 40px 13px 48px;border:1.5px solid var(--border);border-radius:50px;font-size:.95rem;outline:none;transition:.2s;background:#fff;box-shadow:0 2px 10px rgba(28,24,23,.07);font-family:'Inter',sans-serif}
.products-search input:focus{border-color:var(--gold);box-shadow:0 2px 16px rgba(201,164,98,.22)}
.products-search input::placeholder{color:#B8A98A}
.products-search input::-webkit-search-cancel-button{display:none}
.products-search::before{content:'';position:absolute;left:17px;top:50%;width:15px;height:15px;transform:translateY(-50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8A98A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;pointer-events:none}
.products-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#B5A696;cursor:pointer;font-size:.85rem;line-height:1;padding:8px;border-radius:50%;transition:.15s}
.products-search-clear:hover{color:var(--charcoal);background:rgba(0,0,0,.05)}

.products-filters-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:44px;position:sticky;top:70px;z-index:40;background:var(--cream);padding:10px 0}
body.admin-bar-shown .products-filters-row{top:124px}
.products-filters-wrap{flex:1;min-width:0}
.products-filters{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.sort-select{padding:8px 36px 8px 14px;border:1.5px solid var(--border);border-radius:50px;font-size:.82rem;outline:none;background:#fff;cursor:pointer;color:var(--text-mid);font-family:'Inter',sans-serif;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B5C48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;flex-shrink:0}
.sort-select:focus{border-color:var(--gold)}
@media(max-width:640px){
  .products-filters-row{flex-wrap:nowrap;gap:8px;align-items:center;top:68px}
  body.admin-bar-shown .products-filters-row{top:122px}
  .products-filters{margin-bottom:0}
  .sort-select{width:auto;flex-shrink:0;padding:8px 30px 8px 10px}
  /* Header catálogo compacto — productos suben */
  .products-section .section-header{margin-bottom:20px}
  .products-section .section-header h2{font-size:1.55rem;margin-bottom:6px}
  .products-section .section-header p{font-size:.84rem}
  .products-search{margin-bottom:16px}
  .products-filters-row{margin-bottom:24px}
  /* Indicador › para chips de filtro con overflow */
  .products-filters-wrap{position:relative;flex:1;min-width:0}
  .products-filters-wrap::after{
    content:'›';
    position:absolute;top:0;bottom:0;right:0;width:28px;
    display:flex;align-items:center;justify-content:flex-end;
    padding-right:2px;
    background:linear-gradient(to right,transparent,var(--cream) 65%);
    color:var(--muted);font-size:1.2rem;font-weight:800;
    pointer-events:none;
    opacity:1;transition:opacity .15s;
  }
  .products-filters-wrap.at-end::after{opacity:0}
  .products-filters{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;
  }
  .products-filters::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0}
}
.filter-btn{padding:8px 20px;border-radius:50px;border:1.5px solid var(--border);background:#fff;color:var(--text-mid);font-size:.83rem;font-weight:500;cursor:pointer;transition:var(--ease);font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px}
.filter-btn:hover,.filter-btn.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.filter-count{background:rgba(28,24,23,.12);border-radius:50px;font-size:.68rem;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}
.filter-btn.active .filter-count{background:rgba(255,255,255,.3)}

/* SKELETON LOADER */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel-card{pointer-events:none}
.skel-img{width:100%;aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,#EFE8E0 25%,#E5DDD6 50%,#EFE8E0 75%);background-size:400px 100%;animation:shimmer 1.4s infinite}
.skel-line{border-radius:4px;background:linear-gradient(90deg,#EFE8E0 25%,#E5DDD6 50%,#EFE8E0 75%);background-size:400px 100%;animation:shimmer 1.4s infinite}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:26px}
.empty-msg{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-mid)}
.empty-msg .em-icon{font-size:3rem;margin-bottom:12px}

/* ── PRODUCT CARD ── */
.product-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);transition:var(--ease);display:flex;flex-direction:column;cursor:pointer}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.product-img-wrap{position:relative;padding-top:100%;overflow:hidden;background:#fff}
.product-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.product-card:hover .product-img-wrap img{transform:scale(1.06)}
.product-badge{position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:50px;color:#fff}
.badge-best{background:var(--gold)}
.badge-new{background:var(--charcoal)}
.badge-promo{background:#E85D5D}
.badge-natura{background:#40916C}
.badge-discount{background:linear-gradient(135deg,#C0392B,#E85D5D);left:auto;right:10px;font-size:.82rem;font-weight:900;letter-spacing:.01em;box-shadow:0 2px 8px rgba(232,93,93,.35)}
.badge-apartado{background:linear-gradient(135deg,#92400E,#B45309);box-shadow:0 2px 8px rgba(146,64,14,.35);letter-spacing:.03em}
.product-body{padding:14px;flex:1;display:flex;flex-direction:column}
.product-cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:7px}
.product-body h3{font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-desc{font-size:.8rem;color:var(--text-mid);line-height:1.65;flex:1;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto}
.product-price{font-size:1.25rem;font-weight:700;font-family:'Playfair Display',serif}
.product-price small{font-size:.65rem;font-weight:400;color:var(--text-mid);font-family:'Inter',sans-serif}
.btn-buy{display:inline-flex;align-items:center;gap:5px;background:var(--wa);color:#fff;padding:9px 16px;border-radius:50px;font-size:.8rem;font-weight:600;border:none;cursor:pointer;transition:var(--ease);font-family:'Inter',sans-serif;text-decoration:none}
.btn-buy:hover{background:var(--wa-dark);transform:scale(1.04)}
.btn-buy svg{width:15px;height:15px;flex-shrink:0}
.btn-buy-oos{background:var(--text-light)!important;cursor:not-allowed;opacity:.7}
.btn-buy-oos:hover{background:var(--text-light)!important;transform:none!important}
.btn-cart-add{background:var(--gold)}
.btn-cart-add:hover{background:var(--gold-dark)}
.btn-cart-add.added{background:#2D6A4F!important}
.card-oos{opacity:.75}
.card-oos .product-img-wrap img{filter:grayscale(30%)}
.price-before{font-size:.8em;color:var(--text-light);font-weight:400;text-decoration:line-through;font-family:'Inter',sans-serif;margin-right:4px}
.card-last-piece{font-size:.68rem;font-weight:600;color:#92400E;margin:0 0 6px;line-height:1.2}

/* ── NATURA ── */
.natura-section{background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 50%,#40916C 100%);color:#fff}
.natura-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.natura-h2{color:#fff;font-size:2.2rem;line-height:1.2;margin:0 0 18px}
.natura-text p{opacity:.84;line-height:1.85;margin-bottom:14px;font-size:.96rem}
.natura-text p strong{opacity:1;color:#fff}
.natura-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* Carrusel */
.natura-carousel{position:relative}
.nc-wrap{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.nc-wrap::-webkit-scrollbar{display:none}
.nc-card{flex:0 0 calc(50% - 7px);scroll-snap-align:start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .3s,background .3s;backdrop-filter:blur(4px)}
.nc-card:hover{background:rgba(255,255,255,.2);transform:translateY(-5px)}
.nc-img-wrap{position:relative;padding-top:118%;overflow:hidden}
.nc-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.nc-card:hover .nc-img-wrap img{transform:scale(1.06)}
.nc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,67,50,.7) 0%,transparent 50%);display:flex;align-items:flex-end;padding:14px;opacity:0;transition:opacity .3s}
.nc-card:hover .nc-overlay{opacity:1}
.nc-overlay span{background:rgba(255,255,255,.95);color:#1B4332;font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:50px;letter-spacing:.04em}
.nc-info{padding:12px 14px 15px}
.nc-cat{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:5px}
.nc-name{font-size:.84rem;font-weight:600;line-height:1.3;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-price{font-size:1.02rem;font-weight:700;font-family:'Playfair Display',serif}
/* Navegación */
.nc-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.nc-dots{display:flex;gap:7px;align-items:center}
.nc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);border:none;cursor:pointer;padding:8px;background-clip:content-box;transition:.25s;flex-shrink:0}
.nc-dot.active{background:#fff;width:20px;border-radius:4px}
.nc-arrow{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.3rem;transition:.2s;padding:0;line-height:1;flex-shrink:0}
.nc-arrow:hover{background:rgba(255,255,255,.3)}

/* ── ABOUT ── */
.about-section{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img-wrap{position:relative}
.about-img-main{width:100%;border-radius:var(--r-lg);aspect-ratio:1/1;object-fit:cover;object-position:center center;box-shadow:var(--shadow-lg)}
.about-badge{position:absolute;bottom:-18px;right:-18px;background:var(--gold);color:#fff;padding:16px 18px;border-radius:var(--r);text-align:center;box-shadow:var(--shadow)}
.about-badge .big{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:700;display:block;line-height:1}
.about-badge .lbl{font-size:.7rem;opacity:.9}
.about-recognition{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;
  background:var(--gold-light);color:var(--gold-dark);
  font-size:.75rem;font-weight:600;
  padding:7px 14px;border-radius:50px;
  border:1px solid rgba(201,164,98,.3);
  white-space:nowrap;
}
.about-content h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:22px}
.about-content h2 em{color:var(--gold-dark);font-style:italic}
.about-content p{color:var(--text-mid);line-height:1.88;margin-bottom:18px;font-size:.97rem}
.about-content p strong{color:var(--charcoal);font-weight:600}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.af{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-mid)}
.af-icon{width:36px;height:36px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.af-icon svg{width:17px;height:17px;stroke:var(--gold-dark)}

/* ── DELIVERY ── */
.delivery-section{background:var(--charcoal);color:#fff}
.delivery-section .section-tag{background:rgba(201,164,98,.2);color:var(--gold)}
.delivery-section .section-header h2{color:#fff}
.delivery-section .section-header p{color:rgba(255,255,255,.6)}
.delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.d-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:30px;transition:var(--ease)}
.d-card:hover{background:rgba(255,255,255,.1);border-color:var(--gold);transform:translateY(-4px)}
.d-icon{width:52px;height:52px;background:rgba(201,164,98,.14);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0}
.d-icon svg{width:24px;height:24px;stroke:var(--gold)}
.d-card h3{font-size:1.15rem;margin-bottom:8px;color:var(--gold);font-family:'Playfair Display',serif}
.d-card p{font-size:.87rem;color:rgba(255,255,255,.6);line-height:1.75}
.d-link{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-size:.83rem;font-weight:600;text-decoration:none;transition:var(--ease)}
.d-link:hover{color:#fff}
.d-card-links{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.d-address{font-style:normal;display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:14px;background:rgba(255,255,255,.07);border-radius:8px;border-left:3px solid var(--gold)}
.d-addr-main{font-size:1rem;font-weight:700;color:#fff;font-family:'Playfair Display',serif}
.d-addr-ref{font-size:.8rem;color:rgba(255,255,255,.55);font-style:italic}
.d-addr-col,.d-addr-city{font-size:.82rem;color:rgba(255,255,255,.65)}

/* ── BARRA ADMIN (solo con sesión activa) ── */
#admin-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:9999;
  height:54px;background:#1C1817;
  align-items:center;justify-content:center;gap:1px;
}
/* Heredar estilos de shared.css — solo ajustes específicos del admin bar */
#admin-bar .tbn-label{display:block;font-size:.69rem;letter-spacing:.01em}
#admin-bar .tbn-icon{padding:6px 6px;min-width:48px;gap:3px;color:rgba(255,255,255,.75)}
#admin-bar .tbn-icon svg{width:17px;height:17px}
#admin-bar .tbn-sep{
  width:1px;height:18px;background:rgba(255,255,255,.2);
  align-self:center;flex-shrink:0;margin:0 3px;
}
@media(min-width:641px){
  #admin-bar{height:54px}
  #admin-bar .tbn-label{display:block}
  #admin-bar .tbn-icon{padding:5px 9px}
}
body.admin-bar-shown #admin-bar{display:flex}
body.admin-bar-shown .header{top:54px}
body.admin-bar-shown{scroll-padding-top:calc(134px + env(safe-area-inset-top))}

/* ── BOTÓN FLOTANTE WHATSAPP ── */
#wa-float{
  position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));right:18px;z-index:200;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  opacity:0;transform:scale(.8);
  transition:opacity .3s,transform .3s,box-shadow .2s;
  pointer-events:none;
}
#wa-float.visible{opacity:1;transform:scale(1);pointer-events:auto}
#wa-float:hover{box-shadow:0 6px 28px rgba(37,211,102,.6);transform:scale(1.08)}
/* Solo mobile/tablet chico (≤768px, donde el nav colapsa a hamburguesa y el
   botón "WhatsApp" del menú queda escondido) -- en desktop ese botón ya está
   siempre visible en el header, así que el flotante sería un segundo acceso
   redundante a lo mismo. */
@media(min-width:769px){
  #wa-float{display:none!important}
}

/* ── SOCIAL ── */
.social-section{background:#fff;padding:60px 20px}
.social-inner{max-width:680px;margin:0 auto;text-align:center}
.social-title{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:8px}
.social-sub{color:var(--text-mid);margin-bottom:32px}
.social-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.soc-link{display:flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--r);text-decoration:none;font-weight:600;font-size:.92rem;transition:var(--ease);color:#fff}
.soc-link.fb{background:#1877F2}
.soc-link.fb:hover{background:#0F5CC5;transform:translateY(-3px);box-shadow:0 8px 24px rgba(24,119,242,.35)}
.soc-link.wa{background:var(--wa)}
.soc-link.wa:hover{background:var(--wa-dark);transform:translateY(-3px);box-shadow:0 8px 24px rgba(37,211,102,.35)}

/* ── FOOTER ── */
footer{background:#0F0D0C;color:rgba(255,255,255,.58);padding:60px 20px 28px}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand img{height:44px;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.8;border-radius:4px}
.footer-brand p{font-size:.85rem;line-height:1.75;max-width:250px}
.footer-col h4{color:#fff;font-family:'Playfair Display',serif;font-size:.97rem;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.85rem;transition:var(--ease)}
.footer-col ul a:hover{color:var(--gold)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem}
.footer-bottom a{color:var(--gold);text-decoration:none}
/* Ícono deliberadamente chico (no es un CTA para clientas) -- pero el área
   de toque real crece a ~40px con un ::after invisible, mismo hit-slop que
   .hi-del en Caja, para que siga siendo fácil de tocar en mobile. */
.admin-link{opacity:.18;font-size:1rem;color:inherit!important;transition:opacity .25s;display:flex;align-items:center;position:relative}
.admin-link::after{content:'';position:absolute;inset:-10px}
.admin-link:hover{opacity:.55}

/* Botón compartir en modal */
.btn-share{background:transparent;border:1.5px solid var(--border);color:var(--text-mid);gap:5px}
.btn-share:hover{border-color:var(--gold);color:var(--gold-dark)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease;overscroll-behavior:contain}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:var(--r-lg);max-width:460px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;transform:scale(.92);transition:transform .3s ease;box-shadow:var(--shadow-lg);overscroll-behavior:contain}
.modal-overlay.open .modal{transform:scale(1)}

/* Zona 1 — Imagen */
.modal-img-wrap{position:relative;flex-shrink:0}
.modal-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;display:block;cursor:zoom-in}
/* Gallery (multiple images) */
.modal-img-wrap.has-gallery{padding-top:0}
.modal-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fff;aspect-ratio:4/3}
.modal-gallery::-webkit-scrollbar{display:none}
.modal-gallery-img{flex:0 0 100%;width:100%;object-fit:contain;background:#fff;scroll-snap-align:start;cursor:zoom-in}
.modal-gallery-dots{display:flex;justify-content:center;gap:6px;padding:6px 0 2px;background:#fff;flex-shrink:0}
.mgd{box-sizing:content-box;width:7px;height:7px;border-radius:50%;background:var(--text-light);cursor:pointer;transition:.2s;flex-shrink:0;padding:8px;background-clip:content-box}
/* background-color, no background: el atajo reiniciaba background-clip y el punto activo se pintaba con todo su relleno (mancha de 23px) */
.mgd-active{background-color:var(--gold-dark);transform:scale(1.25)}
/* Mientras la foto descarga: brillo de carga (mismo de las tarjetas) en vez de un hueco blanco */
.modal-gallery-img:not(.is-loaded){background:linear-gradient(90deg,#EFE8E0 25%,#E5DDD6 50%,#EFE8E0 75%);background-size:400px 100%;animation:shimmer 1.4s infinite}
/* Flechas de la galería: solo con mouse (en pantallas táctiles se desliza) */
.mg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:rgba(255,255,255,.92);color:var(--charcoal);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:background .15s}
.mg-arrow:hover{background:#fff}
.mg-arrow[hidden]{display:none}
.mg-prev{left:12px}.mg-next{right:12px}
@media (hover:none){.mg-arrow{display:none}}
.modal-close{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--charcoal);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;transition:var(--ease);z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.modal-close:hover{background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.24)}

/* Zoom de imagen a pantalla completa */
#modal-zoom{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background .2s;cursor:zoom-out}
#modal-zoom.open{background:rgba(0,0,0,.92)}
#modal-zoom img{max-width:95%;max-height:90dvh;object-fit:contain;border-radius:8px;transform:scale(.88);opacity:0;transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .2s;cursor:default}
#modal-zoom.open img{transform:scale(1);opacity:1}
#modal-zoom button{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:.15s}
#modal-zoom button:hover{background:rgba(255,255,255,.28)}

/* Lightbox (cart image tap) */
.img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10100;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s;padding:20px 16px;overscroll-behavior:none;touch-action:none}
.img-lightbox.open{opacity:1;pointer-events:auto}
.img-lightbox-img{max-width:100%;max-height:65dvh;border-radius:12px;object-fit:contain;display:block}
.img-lightbox-info{width:100%;max-width:360px;margin-top:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;backdrop-filter:blur(8px)}
.img-lb-name{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:6px;line-height:1.3}
.img-lb-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;margin-top:4px}
.img-lb-label{color:rgba(255,255,255,.5)}
.img-lb-val{color:rgba(255,255,255,.9);font-weight:600}

/* Zona 2 — Info (scrollable) */
.modal-body{padding:20px 22px 14px;overflow-y:auto;flex:1;min-height:0}
.modal-cat{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
.modal-title{font-family:'Playfair Display',serif;font-size:1.3rem;line-height:1.25;margin-bottom:10px}
.modal-desc{color:var(--text-mid);font-size:.875rem;line-height:1.7;margin-bottom:0}
.modal-urgency{margin-top:10px;font-size:.8rem;font-weight:600;color:#92400E}
.modal-kit-includes{margin-top:12px;background:#F7F2EB;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.modal-kit-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dark);margin-bottom:2px}
.modal-kit-item{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--text-dark)}
.modal-kit-item img{width:36px;height:36px;object-fit:contain;border-radius:6px;background:#fff;flex-shrink:0}
.modal-kit-qty{margin-left:auto;font-size:.75rem;color:#9B8B78;font-weight:600;flex-shrink:0}

/* Zona 3 — CTA (siempre visible) */
.modal-cta{flex-shrink:0;padding:14px 22px 20px;border-top:1px solid var(--border);background:#fff}
.modal-cta-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px;gap:8px}
.modal-cta-price{display:flex;flex-direction:column;gap:2px}
.modal-price-old{font-size:.8rem;font-weight:400;text-decoration:line-through;color:var(--text-light);font-family:'Inter',sans-serif}
.modal-cta-amount{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:700;line-height:1}
.modal-cta-amount small{font-size:.45em;font-weight:400;color:var(--text-mid);font-family:'Inter',sans-serif}
.modal-discount{display:inline-block;background:#E85D5D;color:#fff;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:50px;font-family:'Inter',sans-serif;letter-spacing:.03em;margin-top:3px;align-self:flex-start}
.modal-share-btn{width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-btn-oos{width:100%;justify-content:center;background:var(--cream);color:var(--text-mid);border:1.5px solid var(--gold);cursor:pointer;transition:var(--ease)}
.modal-btn-oos:hover{background:#C9A462;color:#fff}
.modal-qty-row{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 12px}
.modal-qty-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);background:transparent;color:var(--gold-dark);font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--ease);font-family:inherit}
.modal-qty-btn:hover{background:var(--gold);color:#fff}
.modal-qty-num{font-size:1.1rem;font-weight:800;color:var(--charcoal);min-width:28px;text-align:center}
.btn-modal-addcart{width:100%;justify-content:center;background:var(--gold);color:#fff}
.btn-modal-addcart:hover{background:var(--gold-dark)}
.btn-modal-addcart.added{background:#2D6A4F}
.modal-wa-direct{background:transparent;border:none;color:var(--wa);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background .2s,color .2s;flex-shrink:0}
.modal-wa-direct:hover{background:rgba(37,211,102,.12);color:var(--wa-dark)}
.modal-wa-direct svg{width:20px;height:20px;flex-shrink:0}
.modal-wa-mobile{display:none}
@media(max-width:600px){
  .modal-wa-mobile{display:flex;width:100%;justify-content:center;align-items:center;gap:7px;padding:10px 0 2px;background:transparent;border:none;color:var(--wa);font-size:.85rem;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
  /* .modal-wa-mobile ya cubre "pedir por WhatsApp" con etiqueta completa en
     esta fila -- el ícono suelto de la fila del precio quedaba duplicado
     (misma acción, dos botones a la vez) sin ninguna regla que lo ocultara. */
  .modal-wa-direct{display:none}
}

/* ── CARRITO ── */
@keyframes cart-pop{0%{transform:scale(1)}45%{transform:scale(1.2)}75%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes btn-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.btn-at-max{background:#E85D5D!important;color:#fff!important;border-color:#E85D5D!important;animation:btn-shake .4s ease}
.nav-cart-btn{position:relative;display:flex;align-items:center;gap:6px;background:var(--gold);color:#fff;border:none;border-radius:50px;padding:8px 16px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;transition:var(--ease);text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav-cart-btn:hover{background:var(--gold-dark)}
.nav-cart-btn.cart-pulse{animation:cart-pop .4s cubic-bezier(.36,.07,.19,.97) both}
.nav-cart-badge{background:#E85D5D;color:#fff;border-radius:50%;width:18px;height:18px;font-size:.6rem;font-weight:800;display:none;align-items:center;justify-content:center;margin-left:2px}
.nav-cart-badge.visible{display:inline-flex}
#cart-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}
#cart-overlay.open{opacity:1;pointer-events:all}
.cart-sheet{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;max-height:82vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
#cart-overlay.open .cart-sheet{transform:translateY(0)}
.cart-sheet-handle{width:36px;height:4px;background:#E0D8CF;border-radius:2px;margin:10px auto 0;flex-shrink:0}
.cart-sheet-head{padding:14px 20px;border-bottom:1px solid #F0E8E0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cart-sheet-title{font-size:1rem;font-weight:700;color:var(--charcoal)}
.cart-sheet-close{width:36px;height:36px;border-radius:50%;border:none;background:#F0E8E0;color:#6B5C48;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.cart-sheet-close:hover{background:#E85D5D;color:#fff}
.cart-sheet-body{flex:1;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column;gap:10px}
.cart-empty{text-align:center;padding:40px 20px;color:#9B8B78;font-size:.9rem}
/* Aviso cuando _syncCartOnOpen() encuentra que algo del pedido cambió
   (precio, stock, o ya no disponible) contra el catálogo real -- nunca se
   ajusta en silencio. */
.cart-sync-notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:#FEF3E2;border:1px solid #F0D9B5;color:#92400E;font-size:.8rem;line-height:1.5}
.cart-sync-notice svg{flex-shrink:0;margin-top:2px}
.cart-sync-notice p{margin:0}
.cart-sync-notice p+p{margin-top:3px}
.cart-sync-notice button{background:none;border:none;color:#92400E;opacity:.6;cursor:pointer;font-size:.8rem;flex-shrink:0;padding:2px 4px;margin-left:auto}
.cart-sync-notice button:hover{opacity:1}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#FAF7F3}
.cart-item-img{width:54px;height:54px;border-radius:9px;object-fit:cover;flex-shrink:0;border:1px solid #EAE0D4}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:.83rem;font-weight:600;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-price{font-size:.78rem;color:#8A7564;margin-top:2px}
.cart-item-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cqty-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid #EAE0D4;background:#fff;color:var(--charcoal);font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.cqty-btn:hover{border-color:var(--gold);color:var(--gold-dark)}
.cqty-num{font-size:.88rem;font-weight:700;color:var(--charcoal);min-width:20px;text-align:center}
.cart-sheet-foot{padding:14px 20px;border-top:1px solid #F0E8E0;flex-shrink:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cart-total-lbl{font-size:.85rem;color:#8A7564}
.cart-total-amt{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--charcoal)}
.btn-cart-wa{width:100%;padding:14px;border-radius:12px;border:none;background:#25D366;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:var(--ease)}
.btn-cart-wa:hover{background:#1da851}
.btn-cart-clear{width:100%;padding:8px;border-radius:10px;border:none;background:transparent;color:#9B8B78;font-size:.78rem;cursor:pointer;font-family:inherit;margin-top:6px;transition:var(--ease)}
.btn-cart-clear:hover{color:#E85D5D}
@media(min-width:601px){.cart-sheet{max-width:480px;left:50%;transform:translateX(-50%) translateY(100%);border-radius:20px 20px 0 0}#cart-overlay.open .cart-sheet{transform:translateX(-50%) translateY(0)}}

/* Bottom sheet en móvil */
@media(max-width:600px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-width:100%;border-radius:20px 20px 0 0;max-height:92vh;transform:translateY(40px)}
  .modal-overlay.open .modal{transform:translateY(0)}
  .modal::before{content:'';display:block;width:36px;height:4px;background:rgba(28,24,23,.15);border-radius:2px;margin:10px auto 0;flex-shrink:0}
  .modal-img,.modal-gallery{aspect-ratio:auto;max-height:42vh}
  .modal-gallery-img{aspect-ratio:auto;max-height:42vh;object-fit:contain}
  .modal-body{padding:12px 18px 8px}
  .modal-title{font-size:1.15rem;margin-bottom:6px}
  .modal-cta{padding:10px 18px calc(14px + env(safe-area-inset-bottom))}
  .modal-cta-amount{font-size:1.5rem}
  .modal-qty-row{padding:6px 0 8px}
}

/* .modal-right envuelve body+cta -- display:contents por default (cero
   cambio visual en mobile/tablet, donde .modal sigue en columna única).
   En escritorio se activa como columna derecha real, mismo patrón ya usado
   en el Quick View de Inventario (imagen a la izquierda a todo lo alto,
   info+CTA a la derecha con el CTA siempre visible sin scroll). */
.modal-right{display:contents}
@media(min-width:901px){
  .modal{flex-direction:row;max-width:900px;height:min(78vh,620px);max-height:min(78vh,620px)}
  .modal-img-wrap{flex:0 0 400px;display:flex;flex-direction:column;height:100%}
  .modal-img,.modal-gallery{flex:1;min-height:0;aspect-ratio:auto;max-height:none}
  .modal-gallery-img{aspect-ratio:auto;max-height:none;height:100%}
  .modal-right{display:flex;flex-direction:column;flex:1;min-width:0}
}


/* ── ANIMATIONS ── */
.reveal{opacity:0;transition:opacity .5s ease}
.reveal.visible{opacity:1}

/* ── HERO MOBILE STRIP ── */
.hms-label{display:none;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.hero-mobile-strip{
  display:none;
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.hero-mobile-strip::-webkit-scrollbar{display:none}
.hms-inner{display:flex;gap:14px;padding:4px 2px 12px;width:max-content}
.hms-card{
  flex-shrink:0;width:150px;background:#fff;
  border-radius:16px;overflow:hidden;
  box-shadow:0 6px 22px rgba(28,24,23,.11);
  cursor:pointer;transition:transform .2s ease,box-shadow .2s;
  border:1px solid var(--border);
  scroll-snap-align:start;
}
.hms-card:active{transform:scale(.96);box-shadow:0 2px 10px rgba(28,24,23,.08)}
.hms-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block}
.hms-info{padding:10px 11px 12px}
.hms-name{
  font-size:.74rem;font-weight:600;color:var(--charcoal);
  font-family:'Playfair Display',serif;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;margin-bottom:5px;min-height:2em;
}
.hms-price{font-size:.78rem;font-weight:700;color:var(--gold-dark)}

/* ── VER MÁS CATÁLOGO ── */
.load-more-wrap{grid-column:1/-1;display:flex;justify-content:center;padding:12px 0 4px}
.btn-load-more{
  background:transparent;border:2px solid var(--gold);color:var(--gold-dark);
  font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;
  padding:12px 32px;border-radius:50px;cursor:pointer;
  transition:background .2s,color .2s,transform .15s;letter-spacing:.02em;
}
.btn-load-more:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-load-more:active{transform:translateY(0)}

/* ── REVISTA BANNER ── */
.revista-banner{
  display:block;position:relative;margin-top:48px;
  border-radius:16px;overflow:hidden;
  min-height:240px;
  background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 40%,#40916C 100%);
  text-decoration:none;color:#fff;
  transition:transform .35s,box-shadow .35s;
}
.revista-banner:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.rb-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:none}
.rb-cover.visible{display:block}
.rb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(27,67,50,.94) 0%,rgba(27,67,50,.65) 45%,rgba(27,67,50,.2) 100%)}
.rb-content{position:relative;z-index:1;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px}
.rb-tag{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
.rb-title{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;line-height:1.12;margin:0 0 10px}
.rb-sub{font-size:.86rem;opacity:.72;line-height:1.55;margin:0 0 20px;max-width:340px}
.rb-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);
  padding:12px 24px;border-radius:50px;
  font-size:.86rem;font-weight:600;width:fit-content;
  transition:background .3s,border-color .3s,transform .3s;
}
.revista-banner:hover .rb-cta{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);transform:translateX(4px)}
.rb-actions{display:flex;align-items:center;gap:12px}
.rb-share{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;width:42px;height:42px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s;flex-shrink:0}
.rb-share:hover{background:rgba(255,255,255,.25)}
.rb-shimmer{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 44%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 56%,transparent 60%);
  animation:rb-shimmer 5s ease-in-out infinite;
}
@keyframes rb-shimmer{0%,30%{transform:translateX(-150%)}70%,100%{transform:translateX(150%)}}

/* ── TOUCH ACTIVE STATES (solo dispositivos sin hover real) ── */
@media(hover:none){
  .product-card:active{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold)}
  .filter-btn:active{background:var(--gold);color:#fff;border-color:var(--gold)}
  .pillar-card:active{transform:translateY(-2px);box-shadow:var(--shadow)}
  .nc-card:active{transform:translateY(-3px)}
  .hms-card:active{transform:scale(.96);box-shadow:0 2px 10px rgba(28,24,23,.08)}
}

/* ── RESPONSIVE ── */

/* Tablet — colapsa hero a 1 columna */
@media(max-width:1000px){
  .hero{padding:100px 24px 56px}
  .hero-inner{grid-template-columns:1fr;gap:0;min-width:0;overflow:hidden}
  .hero-text{text-align:center;min-width:0;overflow:hidden}
  .hero-text .hero-btns{justify-content:center}
  .hero-text p{margin-left:auto;margin-right:auto;max-width:480px}
  .hero-visual{display:none}
  .hms-label{display:block}
  .hero-mobile-strip{display:block}
}

/* Tablet — 3 columnas para productos (769–1000px) */
@media(max-width:1000px) and (min-width:769px){
  .products-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .product-desc{-webkit-line-clamp:2}
}

/* Revista banner — desktop: text left, image right */
@media(min-width:901px){
  .rb-cover{object-position:center center}
  .rb-overlay{background:linear-gradient(to right,rgba(27,67,50,.94) 0%,rgba(27,67,50,.6) 40%,rgba(27,67,50,.15) 65%,transparent 85%)}
  .rb-content{justify-content:center;max-width:45%;min-height:280px;padding:44px}
  .rb-title{font-size:2.2rem}
  .revista-banner{min-height:280px}
}

@media(max-width:900px){
  .natura-grid,.about-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .natura-text{text-align:center}
  .natura-text p{text-align:left}
  .natura-btns{justify-content:center}
  /* Grid 2×2 estático en lugar de carrusel */
  .nc-wrap{display:grid;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;gap:12px}
  .nc-card{flex:none}
  .nc-nav{display:none!important}
  /* Foto de Ofelia — evitar que sea gigante en tablet */
  .about-img-main{max-height:460px;object-fit:cover}
}

/* Mobile — hamburger nav (≤640px) */
@media(max-width:640px){
  section{padding:44px 20px}

  /* NAV */
  .nav{height:68px}
  .nav-logo img{height:52px;padding:3px 6px}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:4px;
    position:absolute;top:64px;left:0;right:0;
    background:rgba(250,245,238,.97);backdrop-filter:blur(14px);
    padding:12px 16px 20px;
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 40px rgba(28,24,23,.12);
    animation:nav-drop .22s ease;
  }
  @keyframes nav-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .nav-links.open li a{
    display:block;padding:13px 16px;border-radius:10px;
    font-size:.95rem;font-weight:500;
  }
  .nav-links.open li a:hover{background:var(--gold-light)}
  .nav-toggle{display:flex}
  /* hamburger → X */
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle.open span:nth-child(2){opacity:0;transform:translateX(-6px)}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

  /* Cart compacto en mobile — ícono solo, mismo peso que hamburger */
  .nav-cart-btn{width:40px;height:40px;padding:0;border-radius:50%;font-size:1rem;justify-content:center;gap:0}
  .nav-cart-btn .nav-cart-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;font-size:.6rem}

  /* PRODUCTS — 2 columnas en 481–640px */
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-desc{-webkit-line-clamp:2}

  /* FILTERS — scroll horizontal en teléfono */
  .products-filters{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;
  }
  .products-filters::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0}

  /* ABOUT */
  .about-img-main{aspect-ratio:1/1;max-height:340px}
  .about-badge{display:none}
  .about-content{text-align:center}
  .about-content p{text-align:left}
  .about-features{justify-items:start;margin-top:20px}
  .af{justify-content:flex-start}

  /* SOCIAL — columna */
  .social-links{flex-direction:column;align-items:center}
  .soc-link{width:min(260px,100%);justify-content:center}

  /* PILLARS — 1 columna */
  .pillars-grid{grid-template-columns:1fr;gap:14px}
  .pillar-card:last-child{grid-column:auto;max-width:100%;margin:0}
}

/* Tablet portrait (641–1000px) */
@media(min-width:641px) and (max-width:1000px){
  section{padding:64px 32px}
  .pillars-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  /* 3er pillar solo en row 2 — centrarlo */
  .pillars-grid .pillar-card:last-child{grid-column:1/-1;max-width:calc(50% - 10px);margin:0 auto}
  .products-section .section-header{margin-bottom:32px}
  .products-grid{gap:18px}
  /* Delivery 3 col en tablet — evita card huérfana en row 2 */
  .delivery-grid{grid-template-columns:repeat(3,1fr)}
  .about-content{text-align:center}
  .about-content p{text-align:left}
  .about-features{justify-items:start;margin-top:20px}
  .af{justify-content:flex-start}
  .social-links{flex-direction:column;align-items:center}
  .soc-link{width:min(300px,100%);justify-content:center}
}

/* Tablet pequeño (641–768px) — hamburger nav + layout compacto */
@media(min-width:641px) and (max-width:768px){
  .hero{min-height:100svh;min-height:-webkit-fill-available}
  /* NAV — hamburger también en tablet pequeño */
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-cart-btn{width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .nav-links.open{
    display:flex;flex-direction:column;gap:4px;
    position:absolute;top:70px;left:0;right:0;
    background:rgba(250,245,238,.97);backdrop-filter:blur(14px);
    padding:12px 16px 20px;
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 40px rgba(28,24,23,.12);
    animation:nav-drop .22s ease;
  }
  .nav-links.open li a{display:block;padding:13px 16px;border-radius:10px;font-size:.95rem;font-weight:500}
  .nav-links.open li a:hover{background:var(--gold-light)}
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle.open span:nth-child(2){opacity:0;transform:translateX(-6px)}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  /* PRODUCTS — 2 columnas (3 serían ~181px c/u = muy angosto) */
  .products-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .product-desc{-webkit-line-clamp:2}
  /* DELIVERY — 1 columna evita orphan card */
  .delivery-grid{grid-template-columns:1fr}
}

/* Móvil pequeño */
@media(max-width:480px){
  .hero{padding:64px 20px 28px;min-height:100svh;min-height:-webkit-fill-available}
  .section-header{margin-bottom:32px}
  .products-section{padding-bottom:40px}
  .section-header h2{font-size:1.65rem}

  /* Hero buttons */
  .hero-btns{flex-direction:column;align-items:center}
  .hero-btns .btn{width:100%;max-width:300px;justify-content:center;padding:15px 24px;font-size:.97rem}

  /* Products grid */
  .products-grid{grid-template-columns:1fr 1fr;gap:12px}
  .product-body{padding:12px 10px 14px}
  .product-cat{font-size:.63rem}
  .product-body h3{
    font-size:.84rem;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .product-desc{
    font-size:.76rem;line-height:1.55;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .product-footer{flex-direction:column;align-items:stretch;gap:8px}
  .product-price{font-size:1.1rem}
  .btn-buy{width:100%;justify-content:center;padding:11px 14px}

  /* Natura mobile */
  .natura-grid>:first-child{order:0}
  .natura-h2{font-size:1.7rem}

  /* Revista banner mobile */
  .revista-banner{min-height:220px;margin-top:32px}
  .rb-content{padding:24px;min-height:220px}
  .rb-title{font-size:1.5rem}
  .rb-overlay{background:linear-gradient(to top,rgba(27,67,50,.96) 0%,rgba(27,67,50,.7) 50%,rgba(27,67,50,.25) 100%)}

  /* Delivery */
  .delivery-grid{grid-template-columns:1fr}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-brand p{max-width:100%}

  .pillar-card{padding:20px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:0 14px;text-align:left}
  .pillar-card .pillar-icon{grid-row:1/3;align-self:center;margin:0;width:52px;height:52px}
  .pillar-card h3{font-size:.98rem;margin-bottom:4px;align-self:end}
  .pillar-card p{margin:0;font-size:.84rem}
}

/* iPhones medianos — evita que el h1 rompa en 3 líneas */
@media(max-width:430px) and (min-width:361px){
  .hero h1{font-size:1.82rem;margin-bottom:12px}
  .hero p{margin-bottom:20px}
  .hero-tag{margin-bottom:16px}
}

/* Teléfonos muy chicos */
@media(max-width:360px){
  .products-grid{grid-template-columns:1fr 1fr;gap:8px}
  .product-body{padding:10px 8px 12px}
  .hero h1{font-size:1.75rem;margin-bottom:12px}
  .hero p{font-size:.92rem;margin-bottom:22px}
  .hero-tag{margin-bottom:18px;padding:7px 14px}
  .hero-btns{gap:10px}
  .hms-card{width:130px}
  /* Filtros en pantalla muy angosta */
  .products-filters{gap:6px}
  .filter-btn{padding:8px 12px;font-size:.73rem}
}

/* ── FIXES PARA TELÉFONO FÍSICO ── */
@media(max-width:768px){
  /* Evita el zoom automático de iOS Safari cuando se toca un input
     (ocurre cuando font-size < 16px — el fix más impactante en iPhone) */
  input,select,textarea{
    font-size:16px!important;
    -webkit-appearance:none; /* quita el estilo nativo de iOS en inputs */
  }
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5C48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:36px;
    -webkit-appearance:none;
  }

  /* Targets táctiles mínimos 44×44px (guía Apple HIG) */
  .btn,.btn-buy,.filter-btn,.nav-cta{min-height:44px}
  .filter-btn{padding:10px 18px}
  .d-link{padding:10px 0}
  .footer-col ul a{display:inline-flex;padding:10px 0;min-height:44px;align-items:center}

  /* Safe area para iPhone X+ con notch o home indicator */
  .header{padding-top:env(safe-area-inset-top)}
  footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

  /* max-width sin overflow — evita crear contextos de scroll por sección */
  .container,.products-section,.hero,.natura-section,.about-section,.delivery-section{
    max-width:100vw;
  }
}

/* ── DESKTOP (1001px+) — 4 columnas fijas en productos ── */
@media(min-width:1001px){
  .products-grid{grid-template-columns:repeat(4,1fr);gap:26px}
  .hero{padding:120px 48px 100px}
  .delivery-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── PANTALLA GRANDE / iMac (1440px+) ── */
@media(min-width:1440px){
  .container{max-width:1400px}
  .nav{max-width:1400px}
  .hero-inner{max-width:1360px}
  .footer-grid{max-width:1400px}
  .footer-bottom{max-width:1400px}
  .hero{padding:140px 60px 120px}
  /* 4 columnas amplias — cada card ~330px en contenedor 1400px */
  .products-grid{grid-template-columns:repeat(4,1fr);gap:30px}
  .pillars-grid{grid-template-columns:repeat(3,1fr);gap:32px}
}

/* ── Offline banner (Tienda) ── */
#offline-banner{position:fixed;left:0;right:0;z-index:9999;padding:10px 16px;font-size:.875rem;font-weight:600;text-align:center;pointer-events:none;display:none}
#offline-banner.ob-offline{display:block;background:#E85D5D;color:#fff}
#offline-banner.ob-online{display:block;background:#2D6A4F;color:#fff}

/* Números alineados (lining) en todo el sitio (Tienda): con Playfair, los
   números de "estilo antiguo" por defecto hacían que $0 se leyera "$o" y
   $108 "$1o8". Se hereda a todo; tabular-nums de cada elemento se suma. */
body{font-feature-settings:"lnum" 1}

/* Catálogo en celular: "Ordenar" como botón redondo de ícono (antes
   "Nuestra selección" ocupaba media fila y solo se veían 2 categorías). Sigue
   siendo el <select> nativo: al tocarlo abre el selector del teléfono. */
@media(max-width:640px){
  .products-filters-row .sort-select{
    width:44px;height:44px;padding:0;flex:0 0 44px;border-radius:50%;
    color:transparent;text-indent:-999px;overflow:hidden;
    background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5C48' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 4 4 4-4'/%3E%3Cpath d='M7 20V4'/%3E%3Cpath d='m21 8-4-4-4 4'/%3E%3Cpath d='M17 4v16'/%3E%3C/svg%3E");
  }
  .products-filters-row .sort-select option{color:var(--text-mid,#6B5C48)}
  .products-filters-row .sort-select.is-active{border-color:var(--gold);background-color:#FFF8EE}
}

/* "Mi pedido" en escritorio: panel lateral derecho (estándar de tiendas en
   línea) en vez de hoja pegada abajo como en celular. */
@media(min-width:900px){
  .cart-sheet{top:0;bottom:0;left:auto;right:0;width:420px;max-width:92vw;max-height:none;border-radius:20px 0 0 20px;transform:translateX(100%)}
  #cart-overlay.open .cart-sheet{transform:translateX(0)}
  .cart-sheet-handle{display:none}
}