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

html, body{ overflow-x:hidden; } /* seguro anti-franja */
body{
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:#f7f9fc;
}

.container{ max-width:1280px; margin:0 auto; }

/* =========================
   Topbar / Header
   ========================= */

.actions{ display:flex; align-items:center; gap:14px; }
.pill-mini{
  background:rgba(255,255,255,.12);
  padding:4px 10px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.header{
  position:fixed;
  top:32px;
  left:0;
  width:100%;
  z-index:1000;
  background:#fff;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition: top .2s ease, box-shadow .2s ease, background .2s ease;
}
.header.scrolled{
  top:0;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
}
.brand-logo img{ height:30px; }

.menu{
  display:flex;
  align-items:center;
  gap:30px;
  margin-right:70px;
}
.menu a{
  color:#3b3b3b;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  position:relative;
  padding:4px 0;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:1.5px;
  background:#8f8f8f84;
  transition:width .3s ease;
}
.menu a:hover::after{ width:100%; }
.menu a:hover{ color:#6EC1E4; }

.menu .cta{
  background:#e11d2e;
  color:#fff !important;
  padding:10px 10px;
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.menu .cta::after{ display:none; }
.menu .cta:hover{
  opacity:.9;
  transform:translateY(-2px);
  box-shadow:0 5px 10px rgba(0,0,0,.12);
  background:#b91523;
}

.hamb{
  display:none;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

/* =========================
   Hero (card + search)
   ========================= */
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-card{
  background:#165da9e2;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:15px 30px;
  border-radius:0 0 70px 70px;
  max-width:900px;
  width:90%;
}
.hero-card h1{
  font-size:42px;
  font-weight:800;
  color:#fff;
  margin:15px 0 10px;
}
.hero-card p{
  font-size:20px;
  color:#fff;
  margin-bottom:10px;
}

.hero-search{
  margin-top:30px;
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:999px;
  padding:6px;
  width:min(800px, 92vw);
  box-shadow:0 10px 25px rgba(141,31,31,.15);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-search:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(25,128,212,.35);
}
.hero-search input{
  flex:1;
  border:none;
  outline:none;
  padding:14px 20px;
  font-size:15px;
  border-radius:999px;
}
.hero-search button{
  background:linear-gradient(135deg,#1980d4,#165ea9);
  border:none;
  color:#fff;
  padding:12px 25px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero-search button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(25,128,212,.4);
}

/* =========================
   Grid desktop
   ========================= */
.product-categories-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:40px;
  max-width:1300px;
  margin:80px auto;
  padding:0 20px;
  justify-content:center;
}

.category-item{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  text-decoration:none;
  box-shadow:0 15px 35px rgba(12,27,42,.08), 0 5px 15px rgba(12,27,42,.06);
  transition:transform .35s ease, box-shadow .35s ease;
}

.category-image{
  aspect-ratio:4 / 3;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.category-image img{
  max-width:95%;
  max-height:95%;
  object-fit:contain;
  transition:transform .6s cubic-bezier(.33, 1, .68, 1);
}

.category-details{ padding:20px; text-align:center; }
.category-details h3{
  font-size:20px;
  font-weight:700;
  color:#0c1b2a;
  letter-spacing:.3px;
  transition:color .3s ease;
}

.category-item:hover{
  transform:scale(1.03);
  box-shadow:0 20px 40px rgba(12,27,42,.20);
}
.category-item:hover .category-image img{ transform:scale(1.10); }
.category-item:hover .category-details h3{ color:#165ea9; }

.category-item::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#007bff,#ff0000);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.category-item:hover::after{ transform:scaleX(1); }

/* Appear animation (solo cuando JS agrega .appear) */
.category-item{
  opacity:0;
  transform:translateY(30px);
  visibility:hidden;
}
.category-item.appear{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
}

/* =========================
   Wrapper & Flechas
   ========================= */
.categories-wrapper{ position:relative; }
.cat-arrow{ display:none; } /* desktop ocultas por defecto */

/* Flechas premium (reutilizable) */
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ffffff 0%,#f0f6fb 100%);
  color:#0c1b2a;
  border:1px solid rgba(6,137,245,.25);
  box-shadow:0 12px 30px rgba(6,137,245,.15), 0 2px 6px rgba(0,0,0,.05);
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  z-index:100;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow.left{ left:12px; }
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow.right{ right:12px; }
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow:hover{
  background:linear-gradient(135deg,#0689f5 0%,#6EC1E4 100%);
  color:#fff;
  box-shadow:0 18px 45px rgba(6,137,245,.35), 0 6px 18px rgba(0,0,0,.10);
  transform:translateY(-50%) scale(1.06);
}
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow:active{
  transform:translateY(-50%) scale(.96);
}
.lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(6,137,245,.25), 0 18px 45px rgba(6,137,245,.35);
}

/* Por defecto ocultas */
.cat-arrow{ display:none; }

/* Solo móvil las muestro */
@media (max-width: 900px){
  .lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow{
    display: grid;
    /* tu estilo premium aquí */
  }
}

/* Seguridad extra por si algo pisa */
@media (min-width: 901px){
  .lifemedic-template.lifemedic-productos .categories-wrapper .cat-arrow{
    display:none !important;
  }
}

/* =========================
   Marcas (solo móvil)
   ========================= */
.brands-carousel{
  display:none;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 900px){

  .header{ top:0; }

  /* Menú móvil (FIX transform duplicado + conflicto left/right) */
  .menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(-10px);
    width:min(320px, 90vw);
    background:#fff;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:20px;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    opacity:0;
    visibility:hidden;
    transition:all .25s ease;
    margin-right:0;
  }
  .menu.active{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  .menu a{ width:100%; padding:12px 0; }
  .hamb{ display:block; }

  /* Hero */
  .hero-card{
    border-radius:0 0 35px 35px;
  }
  .hero-card h1{
    font-size:16px;
    margin-top:1px;
  }
  .hero-card p{ display:none; }

  .hero-search{
    width:min(320px, 92vw);
    margin-top:18px;
    box-shadow:0 10px 15px rgba(141,31,31,.15);
  }
  .hero-search input{ padding:12px 14px; font-size:14px; }
  .hero-search button{ padding:10px 14px; font-size:13px; }

  
  .product-categories-container::-webkit-scrollbar{ display:none; }


  .category-image{
    aspect-ratio:1 / 1;
  }
  .category-image img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .category-details{ padding:12px; text-align:left; }
  .category-details h3{
    font-size:18px;
    font-weight:700;
    line-height:1.2;
  }

  /* Flechas visibles en móvil */
  .cat-arrow{ display:block; }

  /* Brands carousel */
  .brands-carousel{
    display:block;
    max-width:1270px;
    margin:30px 10px;
    background:linear-gradient(90deg,#dfe6ff,#ffdede);
    padding:20px 0;
    overflow:hidden;
    border-radius:50px;
  }
  .carousel-inner{
    max-width:1200px;
    margin:0 auto;
    overflow:hidden;
    padding:0 24px;
  }
  .carousel-track{
    display:flex;
    align-items:center;
    gap:20px;
    width:max-content;
    animation:scrollBrands 45s linear infinite;
  }
  .carousel-track img{
    height:40px;
    width:auto;
    flex-shrink:0;
    opacity:.9;
    transition:transform .3s ease, opacity .3s ease;
  }
  .carousel-track img:hover{
    transform:scale(1.08);
    opacity:1;
  }
}

@media (min-width: 901px){
  .brands-carousel{ display:none; }
}

@keyframes scrollBrands{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

@media (max-width: 900px){
  .product-categories-container{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

    gap:16px;
    padding:10px 16px;
    margin:20px 0;

    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    scroll-padding-right:16px;

    /* opcional */
    perspective:1400px;
  }

  .category-item{
    flex:0 0 80%;
    min-width:80%;
    max-width:80%;
    scroll-snap-align:start; /* <- clave */
    opacity:1 !important;
    visibility:visible !important;
  }
}