:root{
  --wine:#8c1738;
  --red:#c7193b;
  --text:#24242a;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x: hidden;
}

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

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
  border:0;
  background:none;
}

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

.container{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding-inline:clamp(12px, 3vw, 48px);
}

/* LÍNEA SEPARADORA SUTIL */
.section-divider {
  border: 0;
  height: 1px;
  background-color: #ddd;
  margin: 28px 0 0 0;
}


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

.top-header{
  border-bottom:1px solid #ddd;
  background:#fff;
}

.header-main{
  min-height:68px;
  display:flex;
  align-items:center;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo-img{
  height:42px;
  width:auto;
  object-fit:contain;
  display:block;
}

.search{
  flex:1;
  height:38px;
  background:#f0f0f1;
  border:1px solid #ddd;
  border-radius:22px;
  display:flex;
  align-items:center;
  padding:0 15px;
  gap:10px;
  color:#999;
}

.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:13px;
}

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

.action{
  font-size:11px;
  text-align:center;
  color:#333;
  position:relative;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-icon-img{
    width: 24px;
    height: 24px;
  }

.account{
  display:flex;
  align-items:center;
  gap:8px; 
  font-size:11px;
}


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

.sub-header{
  border-top:1px solid #eee;
  border-bottom:1px solid #ddd;
  background:#fff;
}

.sub-row{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.categories-button{
  height:38px;
  padding:0 16px;
  border:1px solid #d6d6da;
  border-radius:5px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  color: var(--wine);
  transition:border-color .2s, color .2s;
}

.categories-button:hover{
  border-color: var(--wine);
  color: var(--wine);
}

.categories-button .hamb{
  font-size:18px;
  line-height:1;
}

.support-button {
  height: 42px;
  width: 52px;
  padding: 4px;
  border: 1px solid #d6d6da;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}

.support-button:hover {
  border-color: var(--wine);
}

.support-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
}


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

.hero{
  background:#111;
  position:relative;
  overflow:hidden;
  border-bottom:3px solid var(--wine);
  max-height: 380px;
}

.hero-slide{
  display:none;
  position:relative;
  height: 100%;
}

.hero-slide.active{
  display:block;
}

.hero img{
  width:100%;
  height:380px;
  object-fit:cover;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--wine);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
}

.hero-arrow.left { left: 20px; }
.hero-arrow.right { right: 20px; }

.hero:hover .hero-arrow {
  opacity: 1;
  visibility: visible;
}

.hero-arrow:hover {
  background: var(--wine);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s ease, transform 0.2s ease;
}

.dot.active {
  background: var(--wine);
  transform: scale(1.2);
}


/* =========================
   SECTIONS
========================= */

.section{
  padding:22px 0;
}

.section-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:16px;
}


/* =========================
   CATEGORIES
========================= */

.categories-section {
  padding-bottom: 0;
}

.categories-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:22px 20px;
}

.category{
  text-align:center;
  font-size:12px;
  font-weight:600;
}

.category-circle{
  width:128px;
  height:128px;
  margin:0 auto 10px;
  border-radius:50%;
  background:#eee;
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:.2s;
}

.category-circle img{
  width:78%;
  height:78%;
  object-fit:contain;
  mix-blend-mode: multiply;
}

.category:hover .category-circle{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}


/* =========================
   PRODUCTS (CARRUSEL)
========================= */

.product-wrap{
  position:relative;
  padding: 6px 0;
}

.products{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding: 8px 4px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.products::-webkit-scrollbar {
  display: none;
}

.product{
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 260px;
  min-height:118px;
  border:1px solid #d8d8dc;
  border-radius:9px;
  padding:12px;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  background:#eee;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  scroll-snap-align: start;
}

.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.product-img{
  width:96px;
  height:100px;
  border-radius:6px;
  background:transparent;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.product-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode: multiply;
}

.product h3{
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  margin:2px 0 6px;
}

.stars{
  font-size:10px;
  color:#f0a400;
  margin-bottom:6px;
}

.stars span{
  color:#777;
}

.price{
  font-size:13px;
  font-weight:800;
  color:var(--wine);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* BOTONES FLECHA */
.product-wrap .hero-arrow {
  opacity: 0.9;
  visibility: visible;
}

.product-wrap .hero-arrow.left { left: -18px; }
.product-wrap .hero-arrow.right { right: -18px; }

.product-wrap:hover .hero-arrow {
  opacity: 1;
}


/* =========================
   BRANDS
========================= */

.brands-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brands-head a{
  font-size: 15px;
  font-weight: 600;
  color: var(--wine);
  transition: opacity 0.2s ease;
}

.brands-head a:hover {
  opacity: 0.8;
}

.brands{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}

.brand{
  height:88px;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
  border-color: var(--wine);
}

.brand img{
  max-height:60px;
  max-width:90%;
  object-fit:contain;
  mix-blend-mode: multiply;
}


/* =========================
   TRUST
========================= */

.trust{
  background:#fafafa;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.trust-logos{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:20px;
}

.trust-logo {
  flex: 0 0 100px;
  height: 100px;
  border-radius: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5px;
  font-size: 10px;
  font-weight: 700;
  transition: transform 0.2s;
}

.trust-logo:hover {
  transform: scale(1.1);
}

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

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:center;
  gap:40px;
}

.info h4{
  font-size:15px;
  color:var(--red);
  margin-bottom:10px;
}

.info p{
  font-size:15px;
  margin-bottom:9px;
  color:#333;
}

.payments{
  margin-top:20px;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.pay-img {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-img img {
  height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply; 
}


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

.footer {
  position: relative;
  margin-top: 0;
  padding: 92px 0 22px;
  background: #d1d1d1;
  overflow: hidden;
  border-top: 0;
}

.footer-wave {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 105px;
  display: block;
  pointer-events: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 0 60px;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.footer-logo-img {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.footer-content > a {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.copy {
  font-size: 14px;
  font-weight: bold;
  color: #111;
  text-align: center;
}


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

@media(max-width:1200px){
  .header-main{ gap:18px; }
  .header-actions{ gap:16px; }

  .hero, .hero img {
    height: 320px;
    max-height: 320px;
  }

  .categories-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
 
  .category-circle{
    width:110px;
    height:110px;
  }

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

@media(max-width:992px){
  .product {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: 0;
  }
}

@media(max-width:900px){
  .header-main{ gap:12px; }
  .logo-img{ height:36px; }
  .search{ min-width:0; }
  .header-actions{ gap:10px; }

  .hero, .hero img {
    height: 260px;
    max-height: 260px;
  }

  .categories-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap: 18px 10px;
  }

  .category-circle{
    width:100px;
    height:100px;
  }

  .brands{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .info-grid{ gap:24px; }
}

@media(max-width:768px){
  .product-wrap .hero-arrow.left { left: 4px; }
  .product-wrap .hero-arrow.right { right: 4px; }
}

@media(max-width:700px){
  .container{ padding-inline:12px; }
  .header-main{ flex-wrap:wrap; padding:10px 0; }
  .logo{ flex:1 1 auto; }
  .header-actions{ flex:0 0 auto; }

  .search{
    order:3;
    flex:1 0 100%;
    width:100%;
  }

  .sub-row{ gap:10px; }

  .categories-button{
    padding:0 12px;
    font-size:12px;
  }

  .hero, .hero img {
    height: 200px;
    max-height: 200px;
  }

  .hero-arrow{
    width:32px;
    height:32px;
    font-size:18px;
  }

  .hero-arrow.left{ left:8px; }
  .hero-arrow.right{ right:8px; }

  .categories-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 12px;
  }

  .category-circle{
    width:92px;
    height:92px;
  }

  .category{ font-size:11px; }

  .product {
    flex: 0 0 100%;
    min-width: 0;
  }

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

  .trust-logos{
    flex-wrap:wrap;
    justify-content:center;
  }

  .info-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .payments{ justify-content:center; }
  .footer{ padding:82px 0 18px; }
  .footer-wave{ height:90px; }

  .footer-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-links{
    gap:15px;
    flex-wrap:wrap;
    font-size: 14px; /* <--- Ajustado para móviles */
  }

  .copy{ 
    text-align:left; 
    font-size: 14px; /* <--- Ajustado para móviles */
  }
}

@media(max-width:480px){
  .container{ padding-inline:10px; }
  .logo-img{ height:30px; }

  .account-icon{
    width:24px;
    height:24px;
    font-size:13px;
  }

  .account{ font-size:9px; }
  .action .ico{ font-size:17px; }

  .hero, .hero img {
    height: 160px;
    max-height: 160px;
  }

  .categories-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 8px;
  }

  .category-circle{
    width:86px;
    height:86px;
  }

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

  .product{
    grid-template-columns:82px 1fr;
    padding:10px;
  }

  .product-img{
    width:82px;
    height:88px;
  }

  .section{ padding:18px 0; }
  .section-title{ font-size:15px; }

  .footer-links{
    flex-direction:column;
    gap:10px;
  }
}