@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

/* ==========================================================
   VARIABLES
   ========================================================== */

:root{
  --bg:#f4f1ec;
  --paper:#ffffff;
  --ink:#121212;
  --muted:#6c6862;
  --line:#ded8cf;
  --line-soft:#ece7df;
  --accent:#80644d;
  --accent-soft:#efe6dc;
  --green:#25d366;
  --success:#21633a;
  --success-bg:#e8f4ec;
  --danger:#9b3737;
  --danger-bg:#f8eaea;
  --container:1280px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-sm:0 7px 24px rgba(26,23,20,.055);
  --shadow-md:0 18px 50px rgba(26,23,20,.095);
  --sans:"Plus Jakarta Sans",Arial,sans-serif;
}


/* ==========================================================
   BASE
   ========================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-weight:600;
  letter-spacing:-.005em;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

.container{
  width:min(calc(100% - 40px),var(--container));
  margin:auto;
}

.muted{
  color:var(--muted);
}

.eyebrow{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:10px;
  font-weight:800;
  color:var(--accent);
}

.display{
  font-size:clamp(46px,5.8vw,82px);
  line-height:.97;
  letter-spacing:-.055em;
  font-weight:800;
  margin-bottom:24px;
}

.section-title{
  font-size:clamp(32px,3.7vw,54px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:800;
  margin-bottom:16px;
}


/* ==========================================================
   BOTONES
   ========================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-dark{
  background:var(--ink);
  color:#fff;
}

.btn-dark:hover{
  background:#313131;
  box-shadow:0 10px 24px rgba(17,17,17,.16);
}

.btn-outline{
  border-color:var(--line);
  background:#fff;
}

.btn-outline:hover{
  border-color:var(--ink);
}

.btn-whatsapp{
  background:var(--green);
  color:#fff;
}

.btn-block{
  width:100%;
}

.disabled{
  pointer-events:none;
  opacity:.5;
}


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

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(249,247,243,.965);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(23,23,23,.06);
  transition:box-shadow .3s ease,background .3s ease;
}

.site-header.scrolled{
  box-shadow:0 8px 28px rgba(26,23,20,.07);
  background:rgba(250,248,245,.985);
}

.header-inner{
  height:72px;
  display:grid;
  grid-template-columns:minmax(235px,300px) 1fr minmax(130px,300px);
  align-items:center;
  gap:22px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.brand-logo{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(17,17,17,.07);
  box-shadow:0 3px 12px rgba(0,0,0,.055);
}

.brand-name{
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.025em;
}

.main-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
}

.main-nav a{
  position:relative;
  font-size:13px;
  font-weight:800;
  color:#4f4a45;
  padding:27px 3px 24px;
  transition:color .25s ease,transform .25s ease;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:17px;
  width:0;
  height:2px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width .28s ease;
  border-radius:2px;
}

.main-nav a:hover{
  color:#111;
  transform:translateY(-1px);
}

.main-nav a:hover::after{
  width:100%;
}

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

.cart-link{
  position:relative;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  border:1px solid transparent;
  transition:background .25s ease,transform .25s ease;
}

.cart-link:hover{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.cart-link svg{
  width:21px;
  height:21px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}

.cart-count{
  position:absolute;
  right:-2px;
  top:-1px;
  background:#e53935;
  color:#fff;
  border-radius:999px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:800;
  box-shadow:0 3px 9px rgba(229,57,53,.28);
}

.cart-count.is-empty{
  display:none;
}

.header-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#fff;
  transition:.25s ease;
}

.header-back:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  transform:translateY(-1px);
}

.menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:0;
  background:none;
}

.menu-btn span{
  display:block;
  width:22px;
  height:1.5px;
  background:var(--ink);
  margin:5px auto;
}

.mobile-menu{
  display:none;
}


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

.hero{
  padding:34px 0 78px;
}

.hero-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:22px;
  align-items:stretch;
}

.hero-copy{
  position:relative;
  border-radius:var(--radius-lg);
  padding:clamp(40px,5vw,76px);
  background:linear-gradient(145deg,#ece5db 0%,#e4dbcf 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-copy::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-130px;
  bottom:-150px;
  border:1px solid rgba(128,100,77,.16);
}

.hero-copy>*{
  position:relative;
  z-index:1;
}

.hero-copy p:not(.eyebrow){
  max-width:520px;
  font-size:16px;
  line-height:1.75;
  color:#4e4943;
}

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

.hero-media{
  min-height:650px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1);
}

.hero-media:hover img{
  transform:scale(1.02);
}


/* ==========================================================
   FRANJA INFORMATIVA
   ========================================================== */

.shop-strip{
  padding:25px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.shop-strip-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.shop-strip-grid>div{
  position:relative;
  padding-left:18px;
}

.shop-strip-grid>div::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:4px;
  height:34px;
  border-radius:99px;
  background:var(--accent-soft);
}

.shop-strip strong{
  display:block;
  font-size:13px;
  font-weight:800;
}

.shop-strip span{
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}


/* ==========================================================
   SECCIONES GENERALES
   ========================================================== */

.section{
  padding:104px 0;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px;
}

.section-head>div{
  max-width:760px;
}

.section-head p{
  color:var(--muted);
  max-width:560px;
  font-size:14px;
  line-height:1.75;
}


/* ==========================================================
   PRODUCT CARDS
   ========================================================== */

.products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.product-card{
  min-width:0;
  background:#fff;
  border:1px solid #e3ddd5;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 5px 22px rgba(20,20,20,.045);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(20,20,20,.095);
  border-color:#d7d0c6;
}

.product-media{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f2f0ec;
}

.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.product-card:hover .product-media img{
  transform:scale(1.035);
}

.product-status{
  position:absolute;
  left:16px;
  top:16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 5px 16px rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
}

.product-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  display:block;
}

.product-status.available{
  background:rgba(236,247,239,.96);
  color:#235a36;
  border:1px solid #d7eadc;
}

.product-status.available i{
  background:#2f8a4c;
}

.product-status.unavailable{
  background:rgba(255,247,247,.95);
  color:#8b3535;
  border:1px solid #efdada;
}

.product-status.unavailable i{
  background:#b94a4a;
}

.product-card-body{
  padding:20px 22px 22px;
}

.product-card-topline{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#7b736a;
  margin-bottom:8px;
  font-weight:800;
}

.product-card h3{
  font-size:20px;
  letter-spacing:-.03em;
  margin:0 0 16px;
  font-weight:800;
}

.product-card h3 a{
  transition:opacity .2s;
}

.product-card h3 a:hover{
  opacity:.65;
}

.product-commerce{
  padding-top:15px;
  border-top:1px solid #ece7e1;
}

.product-price{
  display:block;
  font-size:23px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.025em;
  color:#111;
}

.product-financing{
  display:block;
  margin-top:7px;
  color:#6c5847;
  font-size:12px;
  font-weight:700;
}

.product-link{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #f0ece7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:800;
  color:#171717;
  letter-spacing:.01em;
}

.product-link span{
  font-size:18px;
  transition:transform .22s ease;
}

.product-card:hover .product-link span{
  transform:translateX(4px);
}


/* ==========================================================
   SECCIÓN NOSOTROS
   ========================================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.split-media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:1.2/1;
}

.split-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.split-copy{
  padding:20px;
}

.split-copy p{
  color:var(--muted);
  max-width:560px;
  font-size:15px;
  line-height:1.8;
}

.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:28px 0;
}

.feature-list span{
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:#37332f;
}


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

.dark-section{
  background:#151515;
  color:#fff;
}

.dark-section .muted{
  color:#b8b8b8;
}

.dark-section .eyebrow{
  color:#cdb59f;
}

.cta-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:8px 0;
}

.cta-panel h2{
  max-width:760px;
}


/* ==========================================================
   CATÁLOGO
   ========================================================== */

.page-hero{
  padding:74px 0 38px;
}

.page-hero-grid{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}

.page-hero h1{
  font-size:clamp(42px,5vw,68px);
  letter-spacing:-.045em;
  line-height:.98;
  margin-bottom:14px;
  font-weight:800;
}

.catalog-tools{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:30px;
  padding:12px 0 4px;
}

.filter-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--line);
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.chip:hover{
  border-color:#aaa39a;
}

.chip.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.search-box{
  min-width:280px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:11px 16px;
  outline:none;
  transition:.2s ease;
}

.search-box:focus{
  border-color:#9b8877;
  box-shadow:0 0 0 4px rgba(128,100,77,.08);
}

.catalog-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:16px;
}

.empty-state,
.empty-cart{
  grid-column:1/-1;
  text-align:center;
  padding:80px 20px;
  background:#fff;
  border-radius:20px;
}

.empty-cart .btn{
  margin-top:18px;
}


/* ==========================================================
   FICHA DE PRODUCTO
   ========================================================== */

.product-page{
  padding:24px 0 54px;
}

.product-breadcrumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color:#8b847c;
  font-size:11px;
  margin:0 0 16px;
}

.product-breadcrumbs a:hover{
  color:#111;
}

.product-layout{
  display:grid;
  grid-template-columns:1fr .88fr;
  gap:44px;
  align-items:start;
}

.product-gallery{
  position:sticky;
  top:90px;
}

.product-gallery-main{
  width:100%;
  height:520px;
  max-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:26px;
  background:#ede9e3;
  box-shadow:var(--shadow-sm);
}

.product-gallery-main img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  display:block;
  transition:opacity .22s ease,transform .55s ease;
}

.product-gallery-main:hover img{
  transform:scale(1.012);
}

.product-gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  padding-bottom:4px;
}

.gallery-thumb{
  width:82px;
  height:66px;
  flex:0 0 auto;
  padding:0;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  opacity:.74;
  transition:.2s ease;
}

.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-thumb:hover,
.gallery-thumb.active{
  opacity:1;
  border-color:#111;
  box-shadow:0 4px 14px rgba(0,0,0,.07);
}

.product-detail{
  padding:0;
}

.product-detail-card{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:22px;
  padding:24px 26px;
  box-shadow:var(--shadow-sm);
}

.product-detail .category{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--muted);
}

.product-detail h1{
  font-size:clamp(36px,3.7vw,52px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:7px 0 13px;
}

.availability{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:#dff1e5;
  color:#225f38;
  font-size:11px;
  font-weight:800;
  border:1px solid #cbe5d3;
  box-shadow:0 5px 16px rgba(49,93,64,.08);
}

.availability::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2e9f57;
  box-shadow:0 0 0 4px rgba(46,159,87,.12);
}

.availability.out{
  background:#f7e7e7;
  color:#8e3030;
  border-color:#edcccc;
}

.availability.out::before{
  background:#cc3f3f;
  box-shadow:0 0 0 4px rgba(204,63,63,.12);
}

.detail-price{
  font-size:28px;
  font-weight:800;
  margin:17px 0 3px;
}

.detail-financing{
  display:inline-flex;
  margin-top:3px;
  padding:6px 9px;
  background:#f6f0e9;
  border-radius:9px;
  color:#674f3d;
  font-size:11px;
  font-weight:800;
}

.product-description{
  color:var(--muted);
  margin:17px 0;
  font-size:13px;
  line-height:1.65;
}

.detail-block{
  padding:13px 0;
  border-top:1px solid var(--line);
}

.detail-block strong{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.detail-block p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.product-options{
  padding:12px 0;
  border-top:1px solid var(--line);
}

.product-options strong{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.option-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.option-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 9px;
  font-size:10px;
  font-weight:700;
  color:#4c4742;
}

.product-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:17px;
}

.product-actions .btn{
  min-height:44px;
  padding:0 15px;
  font-size:12px;
}

.product-note{
  margin:9px 0 0;
  font-size:9px;
  line-height:1.45;
  color:#8b847c;
  text-align:center;
}

.related-section{
  padding-top:62px;
  background:#fff;
  border-top:1px solid var(--line-soft);
}


/* ==========================================================
   CARRITO
   ========================================================== */

.cart-page{
  padding:54px 0 110px;
}

.cart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:58px;
  align-items:start;
}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:0;
}

.cart-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#82786e;
  font-weight:800;
  margin-bottom:12px;
}

.cart-item{
  display:grid;
  grid-template-columns:146px minmax(0,1fr) auto auto;
  gap:22px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}

.cart-item img{
  width:146px;
  height:110px;
  object-fit:cover;
  border-radius:14px;
}

.cart-item-main span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}

.cart-item-main h3{
  margin:5px 0 7px;
  font-size:19px;
}

.cart-item-main p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.cart-item>strong{
  font-size:15px;
}

.link-button{
  border:0;
  background:none;
  padding:0;
  margin-top:8px;
  text-decoration:underline;
  font-size:11px;
  cursor:pointer;
  color:var(--muted);
}

.qty-control{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}

.qty-control button{
  border:0;
  background:#fff;
  width:34px;
  height:34px;
  cursor:pointer;
}

.qty-control span{
  min-width:24px;
  text-align:center;
  font-size:12px;
}

.cart-summary{
  position:sticky;
  top:98px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow-sm);
}

.cart-summary h2{
  font-size:25px;
  margin-bottom:8px;
}

.cart-summary-sub{
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:14px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
}

.summary-row.total{
  font-size:17px;
  font-weight:800;
  border-bottom:0;
  padding-top:20px;
}

.cart-summary p{
  font-size:11px;
  color:var(--muted);
  margin:14px 0 20px;
}

.checkout-secure{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:#f7f4ef;
  color:#716a63;
  font-size:10px;
  line-height:1.55;
}

.checkout-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#2e9f57;
  margin-top:4px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer{
  background:#111;
  color:#aaa;
  padding:62px 0 24px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px;
}

.footer .brand{
  color:#fff;
  margin-bottom:12px;
}

.footer .brand-logo{
  border-color:#2b2b2b;
}

.footer h4{
  color:#fff;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.footer a{
  display:block;
  margin:9px 0;
  font-size:13px;
  transition:color .2s ease;
}

.footer a:hover{
  color:#fff;
}

.footer-bottom{
  border-top:1px solid #2a2a2a;
  margin-top:40px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
}


/* ==========================================================
   WHATSAPP FLOTANTE
   ========================================================== */

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:grid;
  place-items:center;
  z-index:60;
  box-shadow:0 12px 28px rgba(37,211,102,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}

.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 34px rgba(37,211,102,.36);
}

.whatsapp-float svg{
  width:27px;
  height:27px;
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}

[data-reveal].revealed{
  opacity:1;
  transform:none;
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media(max-width:1100px){

  .header-inner{
    grid-template-columns:240px 1fr 140px;
  }

  .main-nav{
    gap:24px;
  }

  .hero-media{
    min-height:590px;
  }
}


@media(max-width:900px){

  .header-inner{
    height:68px;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
  }

  .main-nav{
    display:none;
  }

  .header-actions{
    display:flex;
    justify-content:flex-end;
  }

  .header-actions .btn{
    display:none;
  }

  .menu-btn{
    display:block;
    grid-column:auto;
  }

  .mobile-menu{
    position:fixed;
    inset:68px 0 auto 0;
    top:68px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:4px;
    transform:translateY(-140%);
    transition:.3s;
    z-index:45;
  }

  .mobile-menu.open{
    transform:translateY(0);
  }

  .mobile-menu a{
    padding:14px;
  }

  .brand{
    min-width:0;
  }

  .brand-name{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hero-grid,
  .split,
  .product-layout,
  .cart-layout{
    grid-template-columns:1fr;
  }

  .hero-grid{
    gap:16px;
  }

  .hero-media{
    min-height:480px;
    order:-1;
  }

  .products-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .shop-strip-grid{
    grid-template-columns:1fr;
  }

  .shop-strip-grid>div{
    padding:8px 0 8px 18px;
  }

  .product-layout{
    gap:34px;
  }

  .product-gallery{
    position:static;
  }

  .product-gallery-main{
    height:auto;
    max-height:none;
    aspect-ratio:4/3;
  }

  .product-gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .product-detail{
    padding:0;
  }

  .product-detail-card{
    padding:24px;
  }

  .cart-layout{
    gap:30px;
  }

  .cart-summary{
    position:static;
  }

  .cta-panel{
    display:block;
  }

  .cta-panel .btn{
    margin-top:20px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .page-hero-grid{
    display:block;
  }

  .catalog-tools{
    align-items:stretch;
    flex-direction:column;
  }

  .search-box{
    min-width:0;
    width:100%;
  }
}


/* ==========================================================
   RESPONSIVE — CELULAR
   ========================================================== */

@media(max-width:620px){

  body{
    font-weight:600;
  }

  .container{
    width:min(calc(100% - 28px),var(--container));
  }

  .site-header{
    backdrop-filter:blur(14px);
  }

  .header-inner{
    height:64px;
    grid-template-columns:minmax(0,1fr) 42px 42px;
    gap:6px;
  }

  .mobile-menu{
    top:64px;
    max-height:calc(100vh - 64px);
    overflow:auto;
    padding:12px 14px 18px;
  }

  .mobile-menu a{
    min-height:48px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line-soft);
    font-weight:800;
  }

  .cart-link,
  .menu-btn{
    width:42px;
    height:42px;
  }

  .brand-logo{
    width:40px;
    height:40px;
  }

  .brand-name{
    font-size:13px;
  }

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

  .hero-grid{
    gap:12px;
  }

  .hero-copy{
    padding:30px 22px;
  }

  .hero-media{
    min-height:310px;
  }

  .display{
    font-size:clamp(38px,12vw,48px);
  }

  .hero-copy p:not(.eyebrow){
    font-size:14px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-actions .btn{
    width:100%;
  }

  .shop-strip-grid{
    gap:4px;
  }

  .shop-strip-grid>div{
    padding:10px 0 10px 16px;
  }

  .section{
    padding:68px 0;
  }

  .section-head{
    display:block;
  }

  .section-title{
    font-size:clamp(30px,9vw,36px);
  }

  .products-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .product-card-body{
    padding:18px;
  }

  .product-card h3{
    font-size:19px;
  }

  .product-price{
    font-size:22px;
  }

  .split-copy{
    padding:0;
  }

  .feature-list{
    grid-template-columns:1fr;
  }

  .page-hero{
    padding-top:44px;
  }

  .page-hero h1{
    font-size:clamp(36px,11vw,48px);
  }

  .filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:none;
  }

  .filter-chips::-webkit-scrollbar{
    display:none;
  }

  .chip{
    flex:0 0 auto;
    min-height:42px;
  }

  .product-page{
    padding-top:24px;
  }

  .product-breadcrumbs{
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:4px;
    scrollbar-width:none;
  }

  .product-breadcrumbs::-webkit-scrollbar{
    display:none;
  }

  .product-layout{
    gap:22px;
  }

  .product-gallery-main{
    height:auto;
    aspect-ratio:4/3;
    border-radius:18px;
  }

  .product-gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .product-gallery-thumbs{
    gap:8px;
  }

  .gallery-thumb{
    width:72px;
    height:58px;
  }

  .product-detail{
    padding:0;
  }

  .product-detail-card{
    padding:20px 17px;
    border-radius:20px;
  }

  .product-detail h1{
    font-size:clamp(34px,11vw,42px);
  }

  .detail-price{
    font-size:28px;
  }

  .product-actions{
    grid-template-columns:1fr;
  }

  .product-actions .btn{
    width:100%;
  }

  .cart-page{
    padding:36px 0 86px;
  }

  .cart-item{
    grid-template-columns:88px minmax(0,1fr);
    gap:13px;
    padding:18px 0;
  }

  .cart-item img{
    width:88px;
    height:70px;
  }

  .cart-item-main h3{
    font-size:17px;
  }

  .qty-control,
  .cart-item>strong{
    grid-column:2;
  }

  .cart-summary{
    padding:20px 17px;
  }

  .cta-panel h2{
    font-size:32px;
    line-height:1.05;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer{
    padding-top:48px;
  }

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin:4px 0;
  }

  .whatsapp-float{
    right:14px;
    bottom:14px;
    width:52px;
    height:52px;
  }
}


/* ==========================================================
   CELULARES PEQUEÑOS
   ========================================================== */

@media(max-width:420px){

  .brand-name{
    display:none;
  }

  .header-inner{
    grid-template-columns:minmax(0,1fr) 42px 42px;
  }

  .brand-logo{
    width:42px;
    height:42px;
  }

  .hero-media{
    min-height:270px;
  }

  .hero-copy{
    padding:26px 19px;
  }

  .product-card-body{
    padding:17px;
  }
}


/* ==========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================== */

@media(hover:none){

  .product-card:hover,
  .btn:hover,
  .cart-link:hover,
  .main-nav a:hover{
    transform:none;
  }

  .product-card:hover .product-media img,
  .hero-media:hover img,
  .product-gallery-main:hover img{
    transform:none;
  }
}


/* ==========================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  [data-reveal]{
    opacity:1!important;
    transform:none!important;
  }
}

/* ==========================================================
   MOBILE POLISH v2.9
   Revisión general de la tienda para celular
   ========================================================== */

@media(max-width:620px){

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .container{
    width:calc(100% - 28px);
    max-width:100%;
  }

  /* Header */
  .site-header{
    width:100%;
  }

  .header-inner{
    min-width:0;
  }

  .brand,
  .header-actions{
    min-width:0;
  }

  /* Evita que el contenido quede visualmente pegado al header */
  .page-hero{
    padding:30px 0 22px;
  }

  .page-hero-grid{
    width:100%;
  }

  .page-hero h1{
    margin:0 0 12px;
    font-size:clamp(34px,10.5vw,44px);
    line-height:1;
    overflow-wrap:anywhere;
  }

  .page-hero p{
    margin-bottom:0;
    max-width:100%;
    font-size:14px;
    line-height:1.65;
  }

  /* Catálogo: bloque compacto y ordenado */
  .catalog-tools{
    width:100%;
    margin:0 0 24px;
    padding:20px 0 0;
    gap:14px;
    border-top:1px solid var(--line);
  }

  .filter-chips{
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    width:100%;
    gap:8px;
    padding:0;
  }

  .chip{
    flex:0 0 auto;
    min-height:38px;
    padding:9px 12px;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
  }

  .search-box{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:44px;
    padding:11px 14px;
    font-size:13px;
  }

  .catalog-meta{
    margin:0 0 14px;
    font-size:11px;
  }

  /* Un producto por fila: mejor lectura e imagen en celulares */
  .products-grid{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }

  .product-card{
    width:100%;
    max-width:100%;
    border-radius:18px;
  }

  .product-media{
    aspect-ratio:4/3;
  }

  .product-status{
    left:12px;
    top:12px;
  }

  .product-card-body{
    padding:17px;
  }

  .product-card h3{
    font-size:18px;
    line-height:1.2;
    margin-bottom:14px;
  }

  .product-price{
    font-size:21px;
  }

  .product-financing{
    font-size:11px;
  }

  .product-link{
    margin-top:15px;
    padding-top:14px;
  }

  /* Home */
  .hero{
    padding-top:12px;
  }

  .hero-copy,
  .hero-media{
    border-radius:20px;
  }

  .hero-copy{
    padding:28px 20px;
  }

  .hero-media{
    width:100%;
    min-height:0;
    aspect-ratio:4/3;
  }

  .hero-media img{
    width:100%;
    height:100%;
  }

  .shop-strip{
    padding:18px 0;
  }

  .section{
    padding:58px 0;
  }

  .section-head{
    margin-bottom:28px;
  }

  /* Nosotros */
  .split{
    gap:28px;
  }

  .split-media{
    width:100%;
    border-radius:20px;
  }

  /* Ficha de producto */
  .product-page{
    padding:18px 0 46px;
  }

  .product-breadcrumbs{
    margin-bottom:12px;
  }

  .product-layout{
    min-width:0;
  }

  .product-gallery,
  .product-detail{
    min-width:0;
  }

  .product-gallery-main{
    width:100%;
    max-width:100%;
  }

  .product-gallery-thumbs{
    max-width:100%;
  }

  .product-detail h1{
    overflow-wrap:anywhere;
  }

  .detail-price{
    overflow-wrap:anywhere;
  }

  /* Carrito */
  .cart-layout,
  .cart-items,
  .cart-summary{
    min-width:0;
    width:100%;
  }

  .cart-item{
    width:100%;
  }

  .cart-item-main{
    min-width:0;
  }

  .cart-item-main h3,
  .cart-item-main p{
    overflow-wrap:anywhere;
  }

  .cart-summary{
    border-radius:20px;
  }

  /* CTA */
  .cta-panel{
    width:100%;
  }

  .cta-panel .btn{
    width:100%;
  }

  /* Footer */
  .footer{
    padding:44px 0 22px;
  }

  .footer-grid{
    gap:28px;
  }

  .footer-bottom{
    margin-top:30px;
    padding-top:18px;
  }

  /* WhatsApp: evita que tape demasiado contenido */
  .whatsapp-float{
    right:14px;
    bottom:14px;
    width:50px;
    height:50px;
  }

  .whatsapp-float svg{
    width:24px;
    height:24px;
  }
}

@media(max-width:420px){

  .page-hero{
    padding-top:26px;
  }

  .page-hero h1{
    font-size:36px;
  }

  .chip{
    min-height:36px;
    padding:8px 10px;
    font-size:10px;
  }

  .product-card-body{
    padding:16px;
  }

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

  .cart-item{
    grid-template-columns:78px minmax(0,1fr);
    gap:12px;
  }

  .cart-item img{
    width:78px;
    height:64px;
  }
}

/* ==========================================================
   MOBILE CATALOG HEADER v3.0
   Ajuste fino de alineación y espaciado
   ========================================================== */

@media(max-width:620px){

  .page-hero .container{
    padding-left:6px;
    padding-right:6px;
  }

  .page-hero{
    padding-top:28px;
    padding-bottom:16px;
  }

  .page-hero h1{
    margin-bottom:10px;
  }

  .page-hero p{
    line-height:1.6;
  }

  .catalog-tools{
    padding-top:16px;
  }
}

@media(max-width:420px){

  .page-hero .container{
    padding-left:5px;
    padding-right:5px;
  }

  .page-hero{
    padding-top:26px;
    padding-bottom:14px;
  }
}

/* ==========================================================
   HOME MOBILE POLISH v3.1
   Ajuste específico de Home en celulares
   ========================================================== */

@media(max-width:620px){

  /* HERO: más compacto y con mejor jerarquía */
  .hero{
    padding:12px 0 44px;
  }

  .hero-grid{
    gap:10px;
  }

  .hero-media{
    aspect-ratio:1.18/1;
    min-height:0;
    border-radius:20px;
  }

  .hero-copy{
    padding:26px 20px 24px;
    border-radius:20px;
  }

  .hero-copy .eyebrow{
    margin-bottom:9px;
  }

  .hero-copy .display{
    margin-bottom:16px;
    font-size:clamp(36px,11vw,44px);
    line-height:.98;
  }

  .hero-copy p:not(.eyebrow){
    margin-bottom:0;
    font-size:13px;
    line-height:1.65;
  }

  .hero-actions{
    margin-top:18px;
    gap:8px;
  }

  .hero-actions .btn{
    min-height:46px;
  }

  /* BENEFICIOS: menos altura sin perder legibilidad */
  .shop-strip{
    padding:14px 0;
  }

  .shop-strip-grid{
    gap:0;
  }

  .shop-strip-grid>div{
    padding:9px 0 9px 14px;
  }

  .shop-strip-grid>div::before{
    width:3px;
    height:30px;
  }

  .shop-strip strong{
    font-size:12px;
  }

  .shop-strip span{
    font-size:11px;
    line-height:1.5;
  }

  /* SECCIONES HOME */
  .section{
    padding:54px 0;
  }

  .section-head{
    margin-bottom:24px;
  }

  .section-head>div{
    max-width:100%;
  }

  .section-head p{
    margin-bottom:0;
    font-size:13px;
    line-height:1.65;
  }

  .section-title{
    margin-bottom:12px;
    font-size:clamp(29px,9vw,35px);
    line-height:1.04;
  }

  .eyebrow{
    margin-bottom:9px;
  }

  /* Botón "Ver catálogo completo" de la Home */
  #featuredProducts + div{
    margin-top:24px !important;
  }

  #featuredProducts + div .btn{
    width:100%;
  }

  /* PERSONALIZACIÓN / NOSOTROS */
  .split{
    gap:24px;
  }

  .split-media{
    aspect-ratio:1.18/1;
  }

  .split-copy p{
    font-size:13px;
    line-height:1.7;
  }

  .feature-list{
    margin:22px 0;
    gap:0;
  }

  .feature-list span{
    padding:11px 0;
    font-size:12px;
  }

  .split-copy>.btn{
    width:100%;
  }

  /* CONTACTO */
  .dark-section.section{
    padding:50px 0;
  }

  .cta-panel{
    gap:0;
  }

  .cta-panel h2{
    margin-bottom:14px;
    font-size:clamp(30px,9vw,36px);
  }

  .cta-panel .muted{
    margin-bottom:0;
    font-size:13px;
    line-height:1.65;
  }

  .cta-panel .btn{
    margin-top:22px;
    min-height:48px;
  }
}

@media(max-width:420px){

  .hero-media{
    aspect-ratio:1.12/1;
  }

  .hero-copy{
    padding:24px 18px 22px;
  }

  .hero-copy .display{
    font-size:36px;
  }

  .section{
    padding:50px 0;
  }

  .split-media{
    aspect-ratio:1.12/1;
  }
}

/* ==========================================================
   CONFIRMACIÓN AGREGAR AL CARRITO v3.2
   ========================================================== */

.cart-added-toast{
  position:fixed;
  right:24px;
  bottom:92px;
  z-index:120;
  width:min(390px,calc(100vw - 32px));
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto 28px;
  align-items:center;
  gap:11px;
  padding:14px;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(20,20,20,.18);
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
}

.cart-added-toast.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.cart-added-toast-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--success-bg);
  color:var(--success);
  font-size:18px;
  font-weight:800;
}

.cart-added-toast-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.cart-added-toast-copy strong{
  font-size:12px;
  line-height:1.25;
}

.cart-added-toast-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:10px;
}

.cart-added-toast-link{
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

.cart-added-toast-close{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:#8b847c;
  font-size:21px;
  line-height:1;
  cursor:pointer;
}

@media(max-width:620px){
  .cart-added-toast{
    left:14px;
    right:14px;
    bottom:78px;
    width:auto;
    grid-template-columns:36px minmax(0,1fr) auto 26px;
    gap:9px;
    padding:12px;
    border-radius:16px;
  }

  .cart-added-toast-icon{
    width:36px;
    height:36px;
  }

  .cart-added-toast-copy strong{
    font-size:11px;
  }

  .cart-added-toast-copy span{
    font-size:9px;
  }

  .cart-added-toast-link{
    font-size:10px;
  }
}

@media(max-width:390px){
  .cart-added-toast{
    grid-template-columns:34px minmax(0,1fr) 24px;
  }

  .cart-added-toast-icon{
    width:34px;
    height:34px;
  }

  .cart-added-toast-link{
    grid-column:2;
    justify-self:start;
    margin-top:2px;
  }

  .cart-added-toast-close{
    grid-column:3;
    grid-row:1 / span 2;
  }
}

/* ==========================================================
   PRODUCT GALLERY DESKTOP v3.3
   La galería acompaña el flujo normal de la página
   ========================================================== */

.product-gallery{
  position:static;
  top:auto;
}

/* ==========================================================
   FOOTER DEFINITIVO v3.4
   La Margarita Confort
   ========================================================== */

.footer{
  position:relative;
  overflow:hidden;
  background:#111;
  color:#aaa39c;
  padding:68px 0 24px;
}

.footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(205,181,159,.42),transparent);
}

.footer-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,1.55fr) minmax(150px,.7fr) minmax(250px,1fr);
  gap:64px;
  align-items:start;
}

.footer-brand-block{
  max-width:430px;
}

.footer .footer-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  color:#fff;
}

.footer .footer-brand .brand-logo{
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.12);
  background:#fff;
  box-shadow:none;
}

.footer-brand-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer-brand-copy .brand-name{
  font-size:16px;
  color:#fff;
}

.footer-brand-tagline{
  color:#cdb59f;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.footer-description{
  max-width:390px;
  margin:0;
  color:#aaa39c;
  font-size:12px;
  line-height:1.75;
}

.footer h4{
  margin:5px 0 18px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.footer .footer-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:5px 0;
  color:#aaa39c;
  font-size:12px;
  transition:color .2s ease,transform .2s ease;
}

.footer .footer-links a:hover{
  color:#fff;
  transform:translateX(3px);
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  color:#aaa39c;
  font-size:12px;
  line-height:1.55;
}

.footer-contact-item svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  margin-top:1px;
  color:#cdb59f;
}

.footer a.footer-contact-item{
  margin:0;
  transition:color .2s ease;
}

.footer a.footer-contact-item:hover{
  color:#fff;
}

.footer-socials{
  display:flex;
  gap:9px;
  margin-top:8px;
}

.footer .footer-social{
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #302d2a;
  border-radius:50%;
  color:#fff;
  background:#171717;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.footer .footer-social:hover{
  transform:translateY(-2px);
  border-color:#62574e;
  background:#202020;
}

.footer-social svg{
  width:17px;
  height:17px;
}

.footer-bottom{
  position:relative;
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid #292725;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#77716b;
  font-size:10px;
}

.footer-bottom-note{
  color:#77716b;
}

@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1.2fr 1fr;
    gap:42px 54px;
  }

  .footer-contact-column{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .footer{
    padding:48px 0 22px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .footer-contact-column{
    grid-column:auto;
  }

  .footer .footer-brand{
    margin-bottom:15px;
  }

  .footer .footer-brand .brand-logo{
    width:54px;
    height:54px;
  }

  .footer-description{
    font-size:11px;
    line-height:1.7;
  }

  .footer h4{
    margin-bottom:12px;
  }

  .footer .footer-links a{
    min-height:34px;
    display:flex;
    align-items:center;
  }

  .footer-contact{
    gap:11px;
  }

  .footer-bottom{
    margin-top:34px;
    padding-top:18px;
    display:block;
    line-height:1.7;
  }

  .footer-bottom span{
    display:block;
    margin:0;
  }

  .footer-bottom-note{
    margin-top:4px !important;
  }
}

/* ==========================================================
   CARRITO — SEPARACIÓN HERO / CONTENIDO v3.5
   Línea visual exclusiva de la página del carrito
   ========================================================== */

.cart-page-hero{
  padding-bottom:0;
}

.cart-page-hero .container{
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}

.cart-page{
  padding-top:28px;
}

@media(max-width:620px){
  .cart-page-hero .container{
    padding-bottom:22px;
  }

  .cart-page{
    padding-top:20px;
  }
}

/* ==========================================================
   HOME CTA MOBILE — ajuste de respiración lateral
   ========================================================== */

@media(max-width:620px){
  .dark-section .container{
    width:calc(100% - 40px);
  }

  .cta-panel{
    padding:10px 0;
  }

  .cta-panel h2{
    max-width:100%;
    font-size:30px;
    line-height:1.08;
    overflow-wrap:normal;
  }

  .cta-panel .eyebrow{
    margin-bottom:10px;
  }

  .cta-panel .muted{
    max-width:100%;
    font-size:12px;
    line-height:1.6;
  }

  .cta-panel .btn{
    width:100%;
    margin-top:18px;
  }
}

@media(max-width:420px){
  .dark-section .container{
    width:calc(100% - 36px);
  }

  .cta-panel h2{
    font-size:28px;
  }
}

/* ==========================================================
   CARRITO MOBILE — cantidad compacta + resumen con más aire
   Solo afecta pantallas chicas
   ========================================================== */

@media(max-width:620px){

  /* Producto del carrito */
  .cart-item{
    grid-template-columns:76px minmax(0, 1fr);
    gap:14px 12px;
    align-items:start;
  }

  .cart-item > img{
    width:76px;
    height:76px;
  }

  .cart-item-main{
    min-width:0;
  }

  /* Evita que el selector de cantidad ocupe toda la fila */
  .cart-item .qty-control{
    grid-column:2;
    justify-self:start;
    width:auto;
    min-width:108px;
    max-width:130px;
    height:38px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .cart-item .qty-control button{
    flex:0 0 26px;
    width:26px;
    height:30px;
    padding:0;
  }

  .cart-item .qty-control span{
    flex:0 0 auto;
    min-width:18px;
    text-align:center;
  }

  /* Precio debajo del control, sin desbordarse */
  .cart-item > strong{
    grid-column:2;
    justify-self:start;
    width:auto;
    margin-top:-4px;
    white-space:nowrap;
  }

  /* Resumen */
  .cart-summary{
    padding:26px 20px 22px;
    border-radius:22px;
  }

  .cart-summary h2{
    margin-bottom:16px;
    line-height:1.15;
  }

  .cart-summary-sub{
    margin-bottom:22px;
    line-height:1.55;
  }

  .cart-summary .summary-row{
    padding:15px 0;
    gap:14px;
  }

  .cart-summary .summary-row.total{
    padding-top:18px;
    padding-bottom:16px;
  }

  .cart-summary .btn-block{
    margin-top:0;
    min-height:48px;
  }

  .checkout-secure{
    margin-top:14px;
    padding:13px 12px;
    line-height:1.45;
  }
}

@media(max-width:420px){

  .cart-summary{
    padding:24px 16px 20px;
  }

  .cart-item .qty-control{
    min-width:104px;
  }
}

/* ==========================================================
   CARRITO MOBILE — REDISEÑO FINAL
   Desktop permanece intacto.
   ========================================================== */

@media (max-width: 620px) {

  /* Contenedor general del carrito */
  .cart-page {
    padding-top: 0 !important;
    padding-bottom: 44px;
  }

  .cart-page > .container,
  .cart-page .cart-layout {
    width: calc(100% - 32px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .cart-layout {
    display: block;
  }

  /* Lista */
  .cart-items {
    width: 100%;
  }

  /* Cada producto pasa a ser una card mobile */
  .cart-item {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas:
      "image info"
      "controls controls";
    column-gap: 14px;
    row-gap: 18px;
    align-items: start;
    padding: 18px;
    margin: 0 0 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
  }

  .cart-item > img {
    grid-area: image;
    width: 82px;
    height: 82px;
    min-width: 0;
    border-radius: 12px;
    object-fit: cover;
  }

  .cart-item-main {
    grid-area: info;
    min-width: 0;
    padding: 2px 0 0;
  }

  .cart-item-main > span {
    display: block;
    margin-bottom: 6px;
  }

  .cart-item-main h3 {
    margin: 0 0 7px;
    line-height: 1.2;
  }

  .cart-item-main p {
    margin: 0 0 7px;
    line-height: 1.4;
  }

  .cart-item-main .link-button {
    margin-top: 1px;
  }

  /* Cantidad + precio en una misma fila */
  .cart-item .qty-control {
    grid-area: controls;
    grid-column: auto;
    justify-self: auto;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 38px;
    margin: 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .cart-item .qty-control button {
    flex: 0 0 26px;
    width: 26px;
    height: 28px;
    padding: 0;
  }

  .cart-item .qty-control span {
    min-width: 18px;
    text-align: center;
  }

  .cart-item > strong {
    grid-area: controls;
    grid-column: auto;
    justify-self: end;
    align-self: center;
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  /* Para permitir cantidad a la izquierda y precio a la derecha
     usamos la fila completa del artículo */
  .cart-item {
    position: relative;
  }

  .cart-item .qty-control {
    justify-self: start;
  }

  .cart-item > strong {
    justify-self: end;
  }

  /* Resumen: tarjeta con margen visual real */
  .cart-summary {
    position: static;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 26px 20px 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.05);
  }

  .cart-summary h2 {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.15;
  }

  .cart-summary-sub {
    margin: 0 0 22px;
    font-size: 12px;
    line-height: 1.55;
  }

  .cart-summary .summary-row {
    padding: 15px 0;
    gap: 16px;
    align-items: center;
  }

  .cart-summary .summary-row span,
  .cart-summary .summary-row strong {
    min-width: 0;
  }

  .cart-summary .summary-row > :last-child {
    text-align: right;
  }

  .cart-summary .summary-row.total {
    padding-top: 18px;
    padding-bottom: 17px;
  }

  .cart-summary .summary-row.total span,
  .cart-summary .summary-row.total strong {
    font-size: 17px;
  }

  .cart-summary .btn-block {
    width: 100%;
    min-height: 48px;
    margin: 0;
  }

  .checkout-secure {
    margin-top: 14px;
    padding: 13px 12px;
    border-radius: 12px;
    font-size: 10px;
    line-height: 1.5;
  }

  /* Carrito vacío también respeta los márgenes */
  .empty-cart {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 20px;
    border-radius: 18px;
  }

  /* El flotante no invade el resumen */
  body:has(.cart-page) .whatsapp-float {
    right: 18px;
    bottom: 18px;
  }
}

@media (max-width: 420px) {

  .cart-page > .container,
  .cart-page .cart-layout {
    width: calc(100% - 28px);
  }

  .cart-item {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 16px;
    column-gap: 12px;
  }

  .cart-item > img {
    width: 74px;
    height: 74px;
  }

  .cart-item .qty-control {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
  }

  .cart-item > strong {
    font-size: 14px;
  }

  .cart-summary {
    padding: 24px 16px 20px;
  }
}



/* ==========================================================
   CARRITO — SEGUIR COMPRANDO · botón secundario premium
   ========================================================== */

.cart-continue-shopping{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  min-height:38px;
  margin-top:17px;
  padding:0 14px 0 12px;
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid rgba(24, 20, 16, .14);
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(24, 20, 16, .045);
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.cart-continue-shopping svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s ease;
}

.cart-continue-shopping span{
  display:block;
  line-height:1;
}

.cart-continue-shopping:hover{
  background:#faf8f5;
  border-color:rgba(24, 20, 16, .24);
  box-shadow:0 4px 12px rgba(24, 20, 16, .07);
  transform:translateY(-1px);
}

.cart-continue-shopping:hover svg{
  transform:translateX(-2px);
}

.cart-continue-shopping:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

@media (max-width: 768px){
  .cart-continue-shopping{
    min-height:36px;
    margin-top:14px;
    padding:0 13px 0 11px;
    border-radius:9px;
    font-size:11px;
  }
}


/* ==========================================================
   PRODUCTO — VOLVER AL CATÁLOGO · responsive
   Desktop: botón del header / Mobile: botón dentro de ficha
   ========================================================== */

.product-mobile-back{
  display:none;
}

@media (max-width: 900px){
  .header-back{
    display:none;
  }

  .product-mobile-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:max-content;
    min-height:38px;
    margin:0 0 16px;
    padding:0 14px 0 12px;
    color:var(--ink);
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    border:1px solid rgba(24, 20, 16, .14);
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 7px rgba(24, 20, 16, .045);
    transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }

  .product-mobile-back svg{
    width:15px;
    height:15px;
    flex:0 0 15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .2s ease;
  }

  .product-mobile-back span{
    display:block;
    line-height:1;
  }

  .product-mobile-back:hover{
    background:#faf8f5;
    border-color:rgba(24, 20, 16, .24);
    box-shadow:0 4px 12px rgba(24, 20, 16, .07);
    transform:translateY(-1px);
  }

  .product-mobile-back:hover svg{
    transform:translateX(-2px);
  }

  .product-mobile-back:focus-visible{
    outline:2px solid currentColor;
    outline-offset:3px;
  }
}

@media (max-width: 620px){
  .product-mobile-back{
    min-height:36px;
    margin-bottom:14px;
    padding:0 13px 0 11px;
    border-radius:9px;
    font-size:11px;
  }
}

@media(max-width:620px){
  .product-breadcrumbs{
    display:none;
  }
}
/* ==========================================================
   IDENTIDAD VISUAL — LOGO DEFINITIVO
   ========================================================== */

/* Isotipo limpio en el header */
.site-header .brand-logo{
  object-fit:contain;
  padding:3px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Logo institucional completo en el footer */
.footer .footer-brand{
  align-items:center;
  gap:18px;
}

.footer .footer-brand .brand-logo{
  width:118px;
  height:111px;
  object-fit:contain;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* La marca y el claim ya están incorporados en el logo completo. */
.footer .footer-brand-copy{
  display:none;
}

@media(max-width:620px){
  .site-header .brand-logo{
    width:40px;
    height:40px;
    padding:2px;
  }

  .footer .footer-brand .brand-logo{
    width:106px;
    height:100px;
  }
}


/* ==========================================================
   IDENTIDAD VISUAL FINAL — HEADER HORIZONTAL
   ========================================================== */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.site-header .brand .brand-logo{
  width:190px;
  height:52px;
  max-width:none;
  object-fit:contain;
  object-position:left center;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
@media(max-width:620px){
  .site-header .brand .brand-logo{
    width:154px;
    height:44px;
    padding:0;
  }
}

/* ==========================================================
   AJUSTE FINAL — LOGO HEADER MÁS GRANDE
   ========================================================== */
.site-header .brand .brand-logo{
  width:230px;
  height:58px;
  max-width:none;
  object-fit:contain;
  object-position:left center;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

@media(max-width:900px){
  .site-header .brand .brand-logo{
    width:190px;
    height:50px;
  }
}

@media(max-width:620px){
  .site-header .brand .brand-logo{
    width:172px;
    height:48px;
  }
}


/* ==========================================================
   IDENTIDAD FINAL HEADER — SÍMBOLO + NOMBRE
   ========================================================== */
.site-header .header-inner{
  height:82px;
}
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.site-header .brand .brand-logo{
  width:62px;
  height:62px;
  flex:0 0 62px;
  object-fit:contain;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.site-header .brand .brand-name{
  display:block;
  overflow:visible;
  text-overflow:clip;
  color:#171513;
  font-size:18px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
}
@media(max-width:900px){
  .site-header .header-inner{height:72px;}
  .site-header .mobile-menu{top:72px;}
  .site-header .brand{gap:13px;}
  .site-header .brand .brand-logo{width:54px;height:54px;flex-basis:54px;}
  .site-header .brand .brand-name{font-size:16px;}
}
@media(max-width:620px){
  .site-header .header-inner{height:68px;}
  .site-header .mobile-menu{top:68px;max-height:calc(100vh - 68px);}
  .site-header .brand{gap:10px;}
  .site-header .brand .brand-logo{width:50px;height:50px;flex-basis:50px;}
  .site-header .brand .brand-name{font-size:14px;letter-spacing:-.03em;}
}
@media(max-width:390px){
  .site-header .brand{gap:8px;}
  .site-header .brand .brand-logo{width:46px;height:46px;flex-basis:46px;}
  .site-header .brand .brand-name{font-size:13px;}
}

/* ==========================================================
   HEADER — AJUSTE VISUAL DEFINITIVO
   Símbolo con más presencia + nombre más elegante
   ========================================================== */

.site-header .header-inner{
  height:84px;
}

.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:20px;
  min-width:0;
  overflow:visible;
}

.site-header .brand .brand-logo{
  width:68px;
  height:68px;
  flex:0 0 68px;
  object-fit:contain;
  object-position:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:scale(1.18);
  transform-origin:center;
}

.site-header .brand .brand-name{
  display:block;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  color:#171513;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.025em;
}

@media(max-width:900px){
  .site-header .header-inner{
    height:76px;
  }

  .site-header .mobile-menu{
    top:76px;
  }

  .site-header .brand{
    gap:15px;
  }

  .site-header .brand .brand-logo{
    width:58px;
    height:58px;
    flex-basis:58px;
    transform:scale(1.16);
  }

  .site-header .brand .brand-name{
    font-size:18px;
  }
}

@media(max-width:620px){
  .site-header .header-inner{
    height:70px;
  }

  .site-header .mobile-menu{
    top:70px;
    max-height:calc(100vh - 70px);
  }

  .site-header .brand{
    gap:12px;
  }

  .site-header .brand .brand-logo{
    width:52px;
    height:52px;
    flex-basis:52px;
    transform:scale(1.14);
  }

  .site-header .brand .brand-name{
    font-size:16px;
    letter-spacing:-.02em;
  }
}

@media(max-width:390px){
  .site-header .brand{
    gap:10px;
  }

  .site-header .brand .brand-logo{
    width:48px;
    height:48px;
    flex-basis:48px;
    transform:scale(1.12);
  }

  .site-header .brand .brand-name{
    font-size:15px;
  }
}

/* ==========================================================
   HEADER — LOGO HORIZONTAL OFICIAL
   Usa la composición completa de marca como una sola imagen.
   ========================================================== */
.site-header .header-inner{
  height:86px;
}

.site-header .brand{
  display:inline-flex;
  align-items:center;
  min-width:0;
  overflow:visible;
  gap:0;
}

.site-header .brand .brand-logo-horizontal{
  display:block;
  width:300px;
  height:70px;
  max-width:none;
  flex:none;
  object-fit:contain;
  object-position:left center;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

.site-header .brand .brand-name{
  display:none;
}

@media(max-width:900px){
  .site-header .header-inner{
    height:76px;
  }

  .site-header .mobile-menu{
    top:76px;
  }

  .site-header .brand .brand-logo-horizontal{
    width:250px;
    height:60px;
    transform:none;
  }
}

@media(max-width:620px){
  .site-header .header-inner{
    height:70px;
  }

  .site-header .mobile-menu{
    top:70px;
    max-height:calc(100vh - 70px);
  }

  .site-header .brand .brand-logo-horizontal{
    width:205px;
    height:54px;
    transform:none;
  }
}

@media(max-width:390px){
  .site-header .brand .brand-logo-horizontal{
    width:185px;
    height:50px;
    transform:none;
  }
}