:root{
  --pink:#ff3f7f;
  --pink-light:#fff0f5;
  --orange:#ff8a3d;
  --yellow:#ffc928;
  --cyan:#18c7d8;
  --purple:#8067e8;
  --green:#20bd78;

  --ink:#171b2d;
  --text:#454b5d;
  --muted:#858b9b;

  --white:#ffffff;
  --bg:#fafbfe;
  --line:#eceef4;

  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;

  --shadow-sm:0 8px 25px rgba(28,32,52,.06);
  --shadow:0 18px 50px rgba(28,32,52,.09);
  --shadow-lg:0 30px 90px rgba(28,32,52,.16);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--ink);

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(255,63,127,.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 95% 12%,
      rgba(24,199,216,.08),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f0daf5 55%,
      #fdcef7 100%
    );

  min-height:100vh;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

img,
video{
  max-width:100%;
}

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


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

.site-header{
  position:sticky;
  top:14px;
  z-index:50;

  width:min(1280px,calc(100% - 28px));
  margin:14px auto 0;

  min-height:72px;
  padding:10px 12px 10px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

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

  border:1px solid rgba(255,255,255,.95);

  border-radius:22px;

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

  box-shadow:
    0 12px 35px rgba(24,28,45,.08);
}

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

.brand-logo{
  width:48px;
  height:48px;
  padding:6px;

  background:#fff;
  border-radius:15px;

  box-shadow:
    0 7px 20px rgba(255,63,127,.14);
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-title img{
  display:block;
  width:150px;
  height:auto;
  object-fit:contain;
}

.brand-subtitle{
  margin-top:4px;

  font-size:9px;
  font-weight:800;

  color:#8d92a1;

  text-transform:uppercase;
  letter-spacing:1px;
}

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

.menu-btn{
  position:relative;

  width:46px;
  height:46px;

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

  border:1px solid #e7e9ef;
  border-radius:15px;

  background:#fff;
  color:#34394a;

  box-shadow:
    0 7px 20px rgba(28,32,52,.06);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

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

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #ff3f7f,
      #ff704f
    );

  border-color:transparent;

  box-shadow:
    0 10px 25px rgba(255,63,127,.22);
}

.menu-btn svg{
  width:22px;
  height:22px;
}

.cart-btn{
  position:relative;

  display:flex;
  align-items:center;
  gap:9px;

  border:0;

  padding:12px 17px;

  color:#fff;

  font-size:13px;
  font-weight:800;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #ff3f7f,
      #ff704f 48%,
      #18bfc8
    );

  box-shadow:
    0 10px 25px rgba(255,63,127,.22),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:.25s ease;

  overflow:hidden;
}

.cart-btn::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.3),
      transparent 70%
    );

  transform:translateX(-120%);

  transition:.6s ease;
}

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

  box-shadow:
    0 15px 30px rgba(255,63,127,.28);
}

.cart-btn:hover::before{
  transform:translateX(120%);
}

.cart-icon{
  width:19px;
  height:19px;
  flex:none;
}

.cart-count{
  min-width:24px;
  height:24px;
  padding:0 6px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:#fff;
  color:#171b2d;

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

  box-shadow:
    0 3px 8px rgba(0,0,0,.12);
}


/* =========================================================
   MENÚ
========================================================= */

.menu-overlay{
  position:fixed;
  inset:0;
  z-index:200;

  background:rgba(16,20,35,.38);

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

  opacity:0;
  visibility:hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.menu-overlay.show{
  opacity:1;
  visibility:visible;
}

.side-menu{
  position:fixed;

  top:0;
  right:0;

  z-index:210;

  width:min(370px,88vw);
  height:100vh;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fff8fb 100%
    );

  box-shadow:
    -20px 0 60px rgba(20,25,45,.18);

  transform:translateX(100%);

  transition:
    transform .35s cubic-bezier(.22,.61,.36,1);

  overflow-y:auto;
}

.side-menu.show{
  transform:translateX(0);
}

.side-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:24px 22px 18px;

  border-bottom:1px solid #f0f1f5;
}

.side-menu-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.side-menu-brand img{
  width:42px;
  height:42px;

  padding:5px;

  object-fit:contain;

  background:#fff;

  border-radius:13px;

  box-shadow:
    0 6px 18px rgba(255,63,127,.12);
}

.side-menu-title{
  font-family:'Baloo 2',cursive;

  font-size:27px;
  line-height:1;

  color:var(--ink);
}

.side-menu-subtitle{
  margin-top:4px;

  color:#9297a5;

  font-size:9px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.8px;
}

.menu-close {
  position: relative;

  width: 42px;
  height: 42px;

  margin-right: 18px;

  padding: 0;
  flex-shrink: 0;

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

  font-size: 0;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  background: #fff;
  color: #555b68;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;

  width: 18px;
  height: 2px;

  border-radius: 2px;
  background: currentColor;
}

.menu-close::before {
  transform: rotate(45deg);
}

.menu-close::after {
  transform: rotate(-45deg);
}

.menu-close:hover {
  color: var(--pink);
  background: #fff5f8;
  border-color: #ffc9da;


  box-shadow: 0 4px 12px rgba(236, 72, 153, .12);
}

.menu-home {
  position: relative;

  width: 42px;
  height: 42px;

  margin-right: 10px;

  padding: 0;
  flex-shrink: 0;

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

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  background: #fff;
  color: #555b68;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

/* Techo de la casa */
.menu-home::before {
  content: "";
  position: absolute;

  width: 14px;
  height: 14px;

  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;

  transform: rotate(45deg);

  top: 10px;
}

/* Cuerpo de la casa */
.menu-home::after {
  content: "";
  position: absolute;

  width: 17px;
  height: 14px;

  border: 2px solid currentColor;
  border-top: none;
  border-radius: 2px;

  top: 17px;
}

/* Hover */
.menu-home:hover {
  color: var(--pink);
  background: #fff5f8;
  border-color: #ffc9da;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(236, 72, 153, .12);
}

.menu-home:active {
  transform: translateY(0) scale(.94);
}

.menu-actions {
  display: flex;
  align-items: center;
}

.side-menu-content{
  padding:24px 20px 30px;
}

.side-menu-label{
  margin:0 4px 12px;

  color:#a0a5b2;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:1.3px;
}

.menu-category{
  position:relative;

  display:flex;
  align-items:center;

  gap:14px;

  width:100%;

  margin-bottom:10px;

  padding:15px 16px;

  border:1px solid #eceef3;

  border-radius:18px;

  background:#fff;
  color:#34394a;

  box-shadow:
    0 6px 18px rgba(28,32,52,.045);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.menu-category:hover{
  transform:translateX(-3px);

  border-color:#ffd0de;

  box-shadow:
    0 12px 28px rgba(255,63,127,.10);
}

.menu-category-icon{
  width:44px;
  height:44px;

  flex:none;

  display:grid;
  place-items:center;

  border-radius:14px;

  font-size:21px;

  background:
    linear-gradient(
      135deg,
      #fff0f5,
      #fff8ed
    );
}

.menu-category-info{
  flex:1;
  min-width:0;
}

.menu-category-name{
  display:block;

  font-size:13px;
  font-weight:900;

  color:#252a3b;
}

.menu-category-description{
  display:block;

  margin-top:3px;

  color:#9499a7;

  font-size:10px;
  line-height:1.4;
}

.menu-category-arrow{
  color:#b1b5c0;
  font-size:18px;

  transition:
    transform .2s ease,
    color .2s ease;
}

.menu-category:hover .menu-category-arrow{
  transform:translateX(3px);

  color:var(--pink);
}

.menu-footer{
  padding:24px 22px 30px;

  color:#a0a5b1;

  font-size:9px;
  line-height:1.7;

  text-align:center;

  border-top:1px solid #f0f1f5;

  margin-top:auto;
}


/* =========================================================
   MAIN
========================================================= */

main{
  width:min(1280px,100%);
  margin:auto;

  padding:0 22px 80px;
}

.hero{
  display:grid;

  grid-template-columns:1fr .95fr;

  gap:60px;

  align-items:center;

  padding:72px 12px 55px;
}

.hero-copy{
  max-width:650px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 13px;

  background:#fff;

  border:1px solid #f1dce5;

  border-radius:999px;

  color:#d83d70;

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

  box-shadow:var(--shadow-sm);
}

.hero h1 img{
  display:block;

  width:100%;
  max-width:600px;

  height:auto;

  margin:0 auto;
}

.hero-description{
  max-width:620px;

  color:var(--text);

  font-size:17px;
  line-height:1.8;
}

.hero-features{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:25px;
}

.feature{
  display:inline-flex;
  align-items:center;

  gap:7px;

  padding:9px 13px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:999px;

  color:#626879;

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

  box-shadow:
    0 5px 18px rgba(28,32,52,.035);
}

.promo-card{
  position:relative;

  min-height:380px;

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

  padding:25px;

  overflow:hidden;

  border-radius:34px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255,201,40,.7),
      transparent 20%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(255,63,127,.45),
      transparent 22%
    ),
    radial-gradient(
      circle at 85% 90%,
      rgba(24,199,216,.35),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #fff3f7,
      #f0fbff 55%,
      #f8f2ff
    );

  border:1px solid rgba(255,255,255,.9);

  box-shadow:var(--shadow);
}

.promo-card::before,
.promo-card::after{
  content:"";

  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.promo-card::before{
  width:180px;
  height:180px;

  right:-70px;
  bottom:-80px;

  border:25px solid rgba(255,255,255,.55);
}

.promo-card::after{
  width:80px;
  height:80px;

  left:30px;
  bottom:25px;

  background:rgba(255,255,255,.35);
}

.promo-slider{
  position:relative;

  width:100%;
  max-width:520px;

  display:grid;
  place-items:center;
}

.promo-slider img{
  grid-area:1/1;

  width:100%;
  height:auto;

  object-fit:contain;

  border-radius:22px;

  filter:
    drop-shadow(
      0 20px 25px rgba(30,35,55,.14)
    );

  transition:opacity .8s ease;
}

.promo-normal{
  opacity:1;
}

.promo-4x3,
.promo-mega{
  opacity:0;
}

.catalog-header{
  margin-top:5px;
  margin-bottom:22px;
}

.catalog-top{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:17px;
}

.catalog-title{
  font-family:'Baloo 2',cursive;

  font-size:40px;

  line-height:1;

  letter-spacing:-1px;
}

.catalog-subtitle{
  margin-top:6px;

  color:var(--muted);

  font-size:13px;
}

.catalog-count{
  padding:8px 12px;

  border-radius:999px;

  background:#fff;

  border:1px solid var(--line);

  color:#727889;

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

  white-space:nowrap;
}

.search-box{
  position:relative;
  width:100%;
}

.search-box input{
  width:100%;

  padding:18px 20px 18px 51px;

  border:1px solid #e7e9ef;

  border-radius:17px;

  outline:none;

  background:#fff;

  color:var(--ink);

  font-size:14px;

  box-shadow:
    0 8px 25px rgba(28,32,52,.05);

  transition:.25s ease;
}

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

.search-box input:focus{
  border-color:#ff9ab8;

  box-shadow:
    0 12px 35px rgba(255,63,127,.1),
    0 0 0 4px rgba(255,63,127,.05);
}

.search-icon{
  position:absolute;

  left:18px;
  top:50%;

  transform:translateY(-50%);

  color:#858b99;
}

.catalog-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:22px;
}

.card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;

  overflow:hidden;

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

  border:1px solid #ebedf2;

  border-radius:22px;

  box-shadow:
    0 9px 30px rgba(28,32,52,.055);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.card:hover{
  transform:translateY(-7px);

  border-color:#ffd3df;

  box-shadow:
    0 20px 50px rgba(28,32,52,.11);
}

.card-media{
  position:relative;

  height:260px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #fff3f7,
      #eefcff
    );

  cursor:pointer;
}

.card-media::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02),
      transparent 40%,
      rgba(0,0,0,.05)
    );

  pointer-events:none;
}

.card-media img,
.card-media video{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .5s ease;
}

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

.media-badge{
  position:absolute;

  z-index:2;

  top:12px;
  left:12px;

  display:flex;
  align-items:center;

  gap:5px;

  padding:7px 10px;

  border-radius:999px;

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

  backdrop-filter:blur(12px);

  color:#555b6a;

  font-size:9px;
  font-weight:900;

  box-shadow:
    0 5px 15px rgba(0,0,0,.07);
}

.card-info{
  display:flex;
  flex-direction:column;

  flex:1;

  padding:17px;
}

.card-name{
  min-height:43px;

  color:var(--ink);

  font-size:14px;

  line-height:1.5;

  font-weight:800;
}

.card-bottom{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:15px;
  margin-bottom:12px;
}

.card-price{
  color:var(--green);

  font-size:17px;

  font-weight:900;
}

.card-price.consult{
  color:#858b98;

  font-size:11px;
}

.add-quick-btn{
  position:relative;

  width:42px;
  height:42px;

  flex:none;

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

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #ff3f7f 0%,
      #ff704f 52%,
      #ff8a3d 100%
    );

  color:#fff;

  box-shadow:
    0 8px 18px rgba(255,63,127,.24),
    inset 0 1px 0 rgba(255,255,255,.3);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.add-quick-btn::before{
  content:"";

  position:absolute;

  inset:1px;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      transparent 45%
    );

  pointer-events:none;
}

.add-quick-btn svg{
  position:relative;
  z-index:1;

  width:20px;
  height:20px;

  stroke:#fff;

  transition:
    transform .2s ease;
}

.add-quick-btn:hover{
  transform:
    translateY(-3px)
    scale(1.05);

  box-shadow:
    0 12px 25px rgba(255,63,127,.32),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.add-quick-btn:hover svg{
  transform:scale(1.12);
}

.add-quick-btn:active{
  transform:scale(.92);
}

.add-quick-btn.added{
  background:
    linear-gradient(
      135deg,
      #20bd78,
      #0eaa87
    );

  box-shadow:
    0 8px 20px rgba(20,180,120,.25);

  animation:
    cartAdded .4s ease;
}

.add-quick-btn.added svg{
  transform:scale(1.1);
}

@keyframes cartAdded{

  0%{
    transform:scale(1);
  }

  40%{
    transform:
      scale(1.18)
      rotate(-4deg);
  }

  70%{
    transform:
      scale(.95)
      rotate(3deg);
  }

  100%{
    transform:scale(1);
  }

}

.view-btn{
  width:100%;

  padding:12px 14px;

  border:0;

  border-radius:13px;

  background:#f8f9fc;

  color:#34394a;

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

  transition:.2s ease;
}

.view-btn:hover{
  background:var(--pink);

  color:#fff;
}

.empty{
  grid-column:1/-1;

  padding:70px 25px;

  text-align:center;

  background:#fff;

  border:1px dashed #dddfe7;

  border-radius:24px;

  color:var(--muted);
}

.empty strong{
  display:block;

  margin-bottom:8px;

  color:var(--ink);

  font-size:18px;
}


/* =========================================================
   MODALES
========================================================= */

.modal{
  position:fixed;

  inset:0;

  z-index:100;

  display:none;

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

  padding:18px;

  background:rgba(16,20,35,.64);

  backdrop-filter:blur(10px);
}

.modal.show{
  display:flex;
}

.modal-box{
  position:relative;

  width:min(940px,100%);

  max-height:92vh;

  overflow:auto;

  background:#fff;

  border-radius:30px;

  box-shadow:var(--shadow-lg);

  animation:modalIn .25s ease;
}

@keyframes modalIn{

  from{
    opacity:0;

    transform:
      translateY(15px)
      scale(.98);
  }

  to{
    opacity:1;

    transform:none;
  }

}

.close-btn{
  position:absolute;

  z-index:10;

  top:15px;
  right:15px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:0;

  border-radius:50%;

  background:#fff;

  color:#555b68;

  font-size:24px;

  box-shadow:
    0 7px 20px rgba(0,0,0,.12);

  transition:.2s;
}

.close-btn:hover{
  transform:
    rotate(5deg)
    scale(1.05);

  color:var(--pink);
}

.product-view{
  display:grid;

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

.viewer{
  min-height:550px;

  display:flex;

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

  padding:28px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,63,127,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f8f9fc,
      #f2fbfd
    );
}

.viewer img,
.viewer video{
  width:100%;

  max-height:600px;

  object-fit:contain;

  border-radius:20px;

  box-shadow:
    0 15px 35px rgba(25,30,45,.08);
}

.product-details{
  padding:55px 38px 35px;
}

.product-kicker{
  color:#d53e72;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;

  letter-spacing:1.2px;
}

.product-details h2{
  margin:10px 0 14px;

  font-family:'Baloo 2',cursive;

  font-size:43px;

  line-height:.95;

  letter-spacing:-1px;
}

.product-description{
  color:var(--muted);

  font-size:13px;
  line-height:1.8;
}

.big-price{
  margin:25px 0 20px;

  color:var(--green);

  font-size:30px;

  font-weight:900;
}

.product-actions{
  display:flex;

  gap:10px;
}

.primary-btn{
  flex:1;

  padding:15px;

  border:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      #ff704f
    );

  color:#fff;

  font-size:13px;
  font-weight:900;

  box-shadow:
    0 12px 25px rgba(255,63,127,.22);

  transition:.2s;
}

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

.secondary-btn{
  padding:15px 18px;

  border:1px solid #e5e7ed;

  border-radius:14px;

  background:#fff;

  color:#555b68;

  font-size:12px;
  font-weight:800;
}

.product-note{
  margin-top:17px;

  padding:13px 14px;

  border-radius:14px;

  background:#f7f9fc;

  color:#7d8492;

  font-size:10px;
  line-height:1.6;
}


/* =========================================================
   CART
========================================================= */

.cart-modal-box{
  width:min(700px,100%);
}

.cart-header{
  padding:43px 30px 10px;
}

.cart-kicker{
  color:#d53e72;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;

  letter-spacing:1px;
}

.cart-header h2{
  margin-top:7px;

  font-family:'Baloo 2',cursive;

  font-size:40px;

  line-height:1;
}

.cart-list{
  padding:10px 30px;
}

.cart-item{
  display:flex;

  align-items:center;
  gap:14px;

  padding:16px 0;

  border-bottom:1px solid #eef0f4;
}

.cart-item-image{
  width:72px;
  height:72px;

  flex:none;

  overflow:hidden;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #fff3f7,
      #eefcff
    );

  border:1px solid #eceef3;
}

.cart-item-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.cart-item-info{
  flex:1;
  min-width:0;
}

.cart-item-category{
  display:inline-flex;

  padding:4px 8px;

  margin-bottom:5px;

  border-radius:999px;

  background:#fff0f5;

  color:#d53e72;

  font-size:8px;
  font-weight:900;

  text-transform:uppercase;
}

.cart-item-name{
  color:var(--ink);

  font-size:13px;
  font-weight:800;

  line-height:1.4;
}

.cart-item-meta{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:5px;

  color:#9297a5;

  font-size:10px;
}

.cart-item-price{
  color:var(--green);

  font-size:12px;
  font-weight:900;
}

.cart-item-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.cart-quantity{
  min-width:30px;
  height:30px;

  display:grid;
  place-items:center;

  padding:0 8px;

  border-radius:10px;

  background:#f7f8fb;

  color:#555b68;

  font-size:11px;
  font-weight:900;
}

.remove-btn{
  border:0;

  padding:7px 10px;

  border-radius:9px;

  background:#fff0f4;

  color:#d93c70;

  font-size:10px;
  font-weight:900;
}

.cart-bottom{
  padding:18px 30px 30px;
}

.total-box{
  display:flex;

  align-items:center;
  justify-content:space-between;

  padding:16px;

  margin-bottom:12px;

  border-radius:15px;

  background:#fff9e9;

  font-size:14px;
  font-weight:900;
}

.whatsapp-btn{
  width:100%;

  padding:16px;

  border:0;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #20c97b,
      #0eaa87
    );

  color:#fff;

  font-size:13px;
  font-weight:900;

  box-shadow:
    0 12px 25px rgba(20,180,120,.2);

  transition:.2s;
}

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


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

footer{
  width:min(1280px,100%);

  margin:auto;

  padding:30px 22px 55px;

  text-align:center;

  color:#9297a5;

  font-size:10px;
}

footer strong{
  color:#555b6a;
}


/* =========================================================
   FLOTANTES
========================================================= */

.floating-actions{
  position:fixed;

  z-index:80;

  right:24px;
  bottom:24px;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:12px;
}

.floating-btn{
  position:relative;

  display:flex;

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

  border:0;

  text-decoration:none;

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.floating-whatsapp,
.floating-telegram{
  width:58px;
  height:58px;

  display:flex;

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

  padding:0;

  border-radius:50%;

  background:#fff;

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

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.floating-whatsapp img,
.floating-telegram img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;
}

.floating-whatsapp:hover,
.floating-telegram:hover{
  transform:
    translateY(-4px)
    scale(1.06);

  box-shadow:
    0 15px 35px rgba(0,0,0,.22);
}

.floating-top{
  width:48px;
  height:48px;

  border-radius:16px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #8067e8,
      #ff3f7f
    );

  box-shadow:
    0 10px 25px rgba(128,103,232,.25),
    inset 0 1px 0 rgba(255,255,255,.25);

  opacity:0;

  visibility:hidden;

  transform:
    translateY(15px)
    scale(.9);

  pointer-events:none;
}

.floating-top.show{
  opacity:1;

  visibility:visible;

  transform:
    translateY(0)
    scale(1);

  pointer-events:auto;
}

.floating-top svg{
  width:20px;
  height:20px;
}

.floating-top:hover{
  transform:
    translateY(-3px)
    scale(1.05);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

  .catalog-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .hero{
    grid-template-columns:1fr;
    gap:35px;
  }

  .hero-copy{
    max-width:750px;
  }

  .promo-card{
    min-height:330px;
  }

}

@media(max-width:760px){

  main{
    padding:0 14px 60px;
  }

  .site-header{
    width:calc(100% - 16px);

    top:8px;

    margin-top:8px;

    padding-left:13px;
  }

  .brand-subtitle{
    display:none;
  }

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

  .brand-title img{
    width:90px;
  }

  .header-actions{
    gap:7px;
  }

  .menu-btn{
    width:42px;
    height:42px;

    border-radius:13px;
  }

  .cart-btn{
    padding:10px 12px;
  }

  .cart-btn span:nth-child(2){
    display:none;
  }

  .hero{
    padding:48px 4px 38px;
  }

  .hero-description{
    font-size:14px;
    line-height:1.7;
  }

  .promo-card{
    min-height:240px;
    border-radius:25px;
  }

  .catalog-top{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .catalog-title{
    font-size:34px;
  }

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

    gap:13px;
  }

  .card{
    border-radius:18px;
  }

  .card-media{
    height:190px;
  }

  .card-info{
    padding:13px;
  }

  .card-name{
    min-height:40px;
    font-size:12px;
  }

  .card-price{
    font-size:14px;
  }

  .add-quick-btn{
    width:38px;
    height:38px;

    border-radius:12px;
  }

  .add-quick-btn svg{
    width:18px;
    height:18px;
  }

  .view-btn{
    padding:11px 8px;
    font-size:10px;
  }

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

  .viewer{
    min-height:300px;
    padding:20px;
  }

  .product-details{
    padding:30px 22px;
  }

  .product-details h2{
    font-size:35px;
  }

  .cart-header{
    padding:40px 22px 10px;
  }

  .cart-list{
    padding:10px 22px;
  }

  .cart-bottom{
    padding:18px 22px 25px;
  }

  .cart-item{
    align-items:flex-start;
  }

  .cart-item-image{
    width:60px;
    height:60px;
  }

  .cart-item-right{
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }

  .floating-actions{
    right:14px;
    bottom:14px;
  }

}

@media(max-width:430px){

  .site-header{
    gap:8px;
  }

  .brand{
    gap:8px;
  }

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

  .brand-title img{
    width:82px;
  }

  .menu-btn{
    width:40px;
    height:40px;
  }

  .cart-btn{
    padding:9px 10px;
  }

  .cart-count{
    min-width:22px;
    height:22px;
  }

  .hero-features{
    gap:7px;
  }

  .feature{
    padding:8px 10px;
    font-size:10px;
  }

  .card-media{
    height:165px;
  }

  .media-badge{
    top:8px;
    left:8px;

    padding:6px 8px;
  }

}
/* =========================================================
   CATEGORÍAS — INDEX
========================================================= */

.home-categories{
  padding:35px 0 25px;
}

.home-categories .catalog-header{
  margin-bottom:26px;
}

.home-categories .catalog-top{
  margin-bottom:0;
}

.home-categories .eyebrow{
  margin-bottom:12px;
}


/* =========================================================
   TARJETAS DE CATEGORÍAS
========================================================= */

.category-cards{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:24px;
}

.category-card{
  position:relative;

  min-height:280px;

  display:flex;
  align-items:center;

  gap:25px;

  padding:30px;

  overflow:hidden;

  border-radius:28px;

  text-decoration:none;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 12px 35px rgba(28,32,52,.07);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.category-card::before{
  content:"";

  position:absolute;

  width:190px;
  height:190px;

  right:-70px;
  top:-70px;

  border-radius:50%;

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

  transition:
    transform .4s ease;
}

.category-card::after{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  right:45px;
  bottom:-45px;

  border-radius:50%;

  background:
    rgba(255,255,255,.28);
}

.category-card:hover{
  transform:translateY(-7px);

  box-shadow:
    0 22px 55px rgba(28,32,52,.13);
}

.category-card:hover::before{
  transform:scale(1.2);
}


/* =========================================================
   COLORES DE CATEGORÍAS
========================================================= */

.category-card-interactivos{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(128,103,232,.28),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f1efff 0%,
      #eefbff 100%
    );

  border-color:#e3ddff;
}

.category-card-colorear{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255,63,127,.24),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #fff0f6 0%,
      #fff8e9 100%
    );

  border-color:#ffe0ea;
}

.category-card-imprimibles{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(128,103,232,.28),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #cfc9f7 0%,
      #9be5fc 100%
    );

  border-color:#e3ddff;
}
/* =========================================================
   ICONO
========================================================= */

.category-card-icon{
  position:relative;
  z-index:2;

  width:82px;
  height:82px;

  flex:none;

  display:grid;
  place-items:center;

  border-radius:25px;

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

  font-size:40px;

  box-shadow:
    0 12px 25px rgba(28,32,52,.09);

  transition:
    transform .3s ease;
}

.category-card:hover .category-card-icon{
  transform:
    rotate(-5deg)
    scale(1.07);
}


/* =========================================================
   CONTENIDO
========================================================= */

.category-card-content{
  position:relative;
  z-index:2;

  flex:1;

  min-width:0;
}

.category-card-kicker{
  display:block;

  margin-bottom:6px;

  font-size:9px;
  font-weight:900;

  letter-spacing:1.3px;

  color:#858b9b;
}

.category-card h2{
  margin:0 0 9px;

  font-family:'Baloo 2',cursive;

  color:var(--ink);

  font-size:32px;

  line-height:1;

  letter-spacing:-.5px;
}

.category-card p{
  max-width:430px;

  margin:0;

  color:#686f7e;

  font-size:12px;

  line-height:1.65;
}

.category-card-button{
  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:18px;

  padding:10px 14px;

  border-radius:999px;

  background:#fff;

  color:#34394a;

  font-size:10px;
  font-weight:900;

  box-shadow:
    0 6px 18px rgba(28,32,52,.06);

  transition:
    transform .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.category-card-button span{
  font-size:16px;

  line-height:1;

  transition:
    transform .2s ease;
}

.category-card:hover .category-card-button{
  color:var(--pink);

  box-shadow:
    0 8px 22px rgba(255,63,127,.10);
}

.category-card:hover .category-card-button span{
  transform:translateX(4px);
}


/* =========================================================
   PRESENTACIÓN / ABOUT
========================================================= */

.home-about{
  padding:75px 0 35px;
}

.home-about-inner{
  position:relative;

  overflow:hidden;

  padding:55px 50px;

  text-align:center;

  border-radius:32px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255,63,127,.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(24,199,216,.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(128,103,232,.10),
      transparent 35%
    ),
    #fff;

  border:1px solid #eeeef4;

  box-shadow:
    0 15px 45px rgba(28,32,52,.065);
}

.home-about-inner::before{
  content:"";

  position:absolute;

  width:160px;
  height:160px;

  left:-80px;
  bottom:-80px;

  border-radius:50%;

  border:28px solid rgba(255,63,127,.06);

  pointer-events:none;
}

.home-about-inner::after{
  content:"";

  position:absolute;

  width:110px;
  height:110px;

  right:-45px;
  top:-45px;

  border-radius:50%;

  background:
    rgba(24,199,216,.06);

  pointer-events:none;
}

.home-about-inner .eyebrow{
  position:relative;
  z-index:2;

  margin-bottom:14px;
}

.home-about h2{
  position:relative;
  z-index:2;

  margin-bottom:12px;

  font-family:'Baloo 2',cursive;

  font-size:42px;

  line-height:1;

  letter-spacing:-1px;

  color:var(--ink);
}

.home-about p{
  position:relative;
  z-index:2;

  max-width:720px;

  margin:0 auto;

  color:#686f7e;

  font-size:14px;

  line-height:1.8;
}


/* =========================================================
   CARACTERÍSTICAS
========================================================= */

.home-about-features{
  position:relative;
  z-index:2;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.home-about-features > div{
  display:flex;

  align-items:center;

  gap:9px;

  padding:11px 16px;

  border:1px solid #eceef4;

  border-radius:999px;

  background:#fff;

  color:#606675;

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

  box-shadow:
    0 6px 18px rgba(28,32,52,.045);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.home-about-features > div:hover{
  transform:translateY(-3px);

  box-shadow:
    0 10px 25px rgba(28,32,52,.08);
}

.home-about-features strong{
  display:grid;
  place-items:center;

  width:27px;
  height:27px;

  border-radius:9px;

  background:#fff4f7;

  font-size:15px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:760px){

  .home-categories{
    padding-top:25px;
  }

  .category-cards{
    grid-template-columns:1fr;

    gap:16px;
  }

  .category-card{
    min-height:230px;

    padding:23px;

    gap:18px;

    border-radius:23px;
  }

  .category-card-icon{
    width:65px;
    height:65px;

    border-radius:20px;

    font-size:31px;
  }

  .category-card h2{
    font-size:27px;
  }

  .category-card p{
    font-size:11px;
  }

  .category-card-button{
    margin-top:13px;

    padding:9px 12px;

    font-size:9px;
  }

  .home-about{
    padding:55px 0 20px;
  }

  .home-about-inner{
    padding:40px 22px;

    border-radius:25px;
  }

  .home-about h2{
    font-size:34px;
  }

  .home-about p{
    font-size:12px;

    line-height:1.75;
  }

  .home-about-features{
    flex-direction:column;

    align-items:stretch;
  }

  .home-about-features > div{
    justify-content:center;
  }

}


@media(max-width:430px){

  .category-card{
    min-height:215px;

    padding:20px;

    gap:14px;
  }

  .category-card-icon{
    width:58px;
    height:58px;

    border-radius:17px;

    font-size:27px;
  }

  .category-card h2{
    font-size:24px;
  }

  .category-card p{
    font-size:10px;
  }

  .category-card-button{
    margin-top:11px;
  }

  .home-about-inner{
    padding:35px 18px;
  }

  .home-about h2{
    font-size:30px;
  }

}