/* ==========================================================================
   HIDRO KANK — home.css
   ========================================================================== */

/* ------------------------------ Carrusel de banners -------------------------- */
.carrusel-promo { position: relative; background: var(--crema-alt); }
.carrusel-promo__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrusel-promo__pista::-webkit-scrollbar { display: none; }
.carrusel-promo__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: min(60vh, 460px);
  display: flex;
  align-items: center;
  background: radial-gradient(1100px 480px at 85% -10%, rgba(111,190,68,0.14), transparent 60%), var(--crema);
}
.carrusel-promo__slide--acento { background: linear-gradient(135deg, var(--acento-dark), var(--acento)); color: var(--blanco); }
.carrusel-promo__slide--azul { background: linear-gradient(135deg, var(--azul-gota-dark), var(--azul-gota)); color: var(--blanco); }
.carrusel-promo__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
  width: 100%;
}
.carrusel-promo__grid--centro { grid-template-columns: 1fr; text-align: center; max-width: 44rem; margin-inline: auto; }
.carrusel-promo__texto, .carrusel-promo__imagen { min-width: 0; }
@media (max-width: 860px) {
  .carrusel-promo__grid { grid-template-columns: 1fr; text-align: center; }
  .carrusel-promo__imagen { order: -1; }
}
.carrusel-promo__titulo { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); }
.carrusel-promo__titulo em { font-style: normal; color: var(--verde-profundo); }
.carrusel-promo__slide--acento .carrusel-promo__titulo em,
.carrusel-promo__slide--azul .carrusel-promo__titulo em { color: inherit; }
.carrusel-promo__texto p { margin-top: var(--sp-xs); font-size: var(--fs-base); }
.carrusel-promo__slide--acento .carrusel-promo__texto p,
.carrusel-promo__slide--azul .carrusel-promo__texto p { color: rgba(255,255,255,0.9); }
.carrusel-promo__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-sm); justify-content: inherit; }
.carrusel-promo__pastilla {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  padding: 4px 14px;
  border-radius: var(--radio-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: var(--sp-2xs);
}
.carrusel-promo__imagen img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
}
.carrusel-promo__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--carbon);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-md);
  z-index: 3;
}
.carrusel-promo__flecha--prev { left: var(--sp-sm); }
.carrusel-promo__flecha--next { right: var(--sp-sm); }
.carrusel-promo__flecha svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .carrusel-promo__flecha { display: none; } }
.carrusel-promo__puntos {
  position: absolute;
  bottom: var(--sp-sm);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.carrusel-promo__puntos button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(35,35,31,0.25);
  padding: 0;
}
.carrusel-promo__puntos button.activo { background: var(--verde-profundo); width: 22px; border-radius: var(--radio-pill); }
@media (max-width: 860px) {
  .carrusel-promo__puntos { position: static; transform: none; justify-content: center; padding-block: var(--sp-sm); }
}

/* --------------------------- Carruseles de productos ------------------------- */
.etiqueta-carrusel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--carbon-suave);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-sm);
}
.etiqueta-carrusel svg { width: 18px; height: 18px; }
.etiqueta-carrusel strong { color: var(--carbon); }

.fila-productos {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: var(--sp-md);
  align-items: stretch;
}
.fila-productos__banner {
  position: relative;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--tinte-verde);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-sm);
  min-height: 200px;
}
.fila-productos__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--sp-md) var(--sp-md) 3.2rem; mix-blend-mode: multiply; }
.fila-productos__banner span { position: relative; z-index: 1; font-weight: 700; font-family: var(--font-display); }
.fila-productos__banner small { position: relative; z-index: 1; display: block; font-size: var(--fs-xs); color: var(--carbon-suave); font-weight: 600; }
@media (max-width: 900px) {
  .fila-productos { grid-template-columns: 1fr; }
  .fila-productos__banner { display: none; }
}

.carrusel-productos { position: relative; }
.carrusel-productos__pista {
  display: flex;
  gap: var(--sp-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.carrusel-productos__pista::-webkit-scrollbar { display: none; }
.carrusel-productos__pista .tarjeta-producto { flex: 0 0 200px; scroll-snap-align: start; }
.carrusel-productos__flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  color: var(--carbon);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-sm);
  z-index: 2;
}
.carrusel-productos__flecha--prev { left: -14px; }
.carrusel-productos__flecha--next { right: -14px; }
.carrusel-productos__flecha svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .carrusel-productos__flecha { display: none; } }
.carrusel-productos--claro .carrusel-productos__flecha { background: rgba(255,255,255,0.9); }

/* ------------------------------ Franja CTA intermedia ------------------------- */
/* ------------------------------- Franja "lo más buscado" --------------------- */
.franja-buscado {
  padding-block: var(--sp-xl);
  background: linear-gradient(135deg, var(--verde-profundo) 0%, var(--verde-profundo-dark) 60%, var(--acento-dark) 140%);
}
.franja-buscado__cinta {
  display: inline-block;
  background: var(--blanco);
  color: var(--acento-dark);
  font-weight: 800;
  font-family: var(--font-display);
  padding: 8px 20px;
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-md);
  margin-bottom: var(--sp-md);
}

/* -------------------------------- Categorías bento -------------------------- */
.bento-categorias {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: var(--sp-sm);
}
@media (max-width: 720px) {
  .bento-categorias { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
.tarjeta-categoria {
  position: relative;
  border-radius: var(--radio-md);
  overflow: hidden;
  color: var(--carbon);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-sm) var(--sp-sm) var(--sp-xs);
  background: var(--tinte-verde);
  isolation: isolate;
}
.tarjeta-categoria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}
.tarjeta-categoria:hover::before { transform: translateX(120%); }
.tarjeta-categoria__img-wrap {
  position: absolute;
  inset: 0 0 34% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) var(--sp-lg) 0;
}
.tarjeta-categoria img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--transicion-lenta);
}
.tarjeta-categoria::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(0deg, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0) 100%);
  z-index: 0;
  pointer-events: none;
}
.tarjeta-categoria:hover img { transform: scale(1.07) translateY(-2px); }
.tarjeta-categoria > span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; }
.tarjeta-categoria small { position: relative; z-index: 1; display: block; font-size: var(--fs-xs); color: var(--carbon-suave); font-weight: 600; }
.tarjeta-categoria__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  background: var(--verde-profundo);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radio-pill);
  margin-top: 6px;
}
.tarjeta-categoria--g1, .tarjeta-categoria--g4 { background: var(--tinte-arena); }
.tarjeta-categoria--g1 .tarjeta-categoria__img-wrap, .tarjeta-categoria--g4 .tarjeta-categoria__img-wrap { inset: 0 0 30% 0; }

.tarjeta-categoria--g1 { grid-column: span 3; grid-row: span 2; }
.tarjeta-categoria--g2 { grid-column: span 3; grid-row: span 1; }
.tarjeta-categoria--g3 { grid-column: span 2; grid-row: span 1; }
.tarjeta-categoria--g4 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) {
  .tarjeta-categoria--g1, .tarjeta-categoria--g2, .tarjeta-categoria--g3, .tarjeta-categoria--g4 { grid-column: span 1; grid-row: span 1; }
}

/* ---------------------------------- Banner ancho ------------------------------ */
.banner-ancho {
  position: relative;
  display: block;
  border-radius: var(--radio-lg);
  overflow: hidden;
  min-height: 220px;
  isolation: isolate;
}
.banner-ancho img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.banner-ancho::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,61,39,0.75) 0%, rgba(20,61,39,0.15) 60%);
}
.banner-ancho__texto { position: relative; z-index: 1; padding: var(--sp-lg); color: var(--blanco); display: flex; flex-direction: column; gap: var(--sp-xs); align-items: flex-start; min-height: 220px; justify-content: center; }
.banner-ancho__pill {
  display: inline-block;
  background: var(--blanco);
  color: var(--verde-profundo);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 8px 18px;
  border-radius: var(--radio-pill);
  width: fit-content;
}

/* ------------------------- Servicios de entrega y cobertura ------------------- */
.entrega-cobertura__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
@media (max-width: 720px) { .entrega-cobertura__grid { grid-template-columns: 1fr; } }
.entrega-cobertura__tarjeta {
  display: block;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding: var(--sp-lg);
  text-align: center;
  background: var(--blanco);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
a.entrega-cobertura__tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); border-color: transparent; }
.entrega-cobertura__tarjeta svg { width: 44px; height: 44px; margin-inline: auto; color: var(--carbon); margin-bottom: var(--sp-sm); }
.entrega-cobertura__tarjeta h3 { font-size: var(--fs-md); }
.entrega-cobertura__tarjeta p { color: var(--carbon-suave); font-size: var(--fs-sm); margin-top: 4px; }
.entrega-cobertura__tarjeta strong { display: block; margin-top: var(--sp-sm); color: var(--verde-profundo); }
.entrega-cobertura__tarjeta--whatsapp { border-color: rgba(31,138,76,0.35); }
.entrega-cobertura__tarjeta--whatsapp svg { color: #1F8A4C; }
.entrega-cobertura__tarjeta--whatsapp strong { color: #1F8A4C; }

/* --------------------------------- Historia ---------------------------------- */
.historia {
  background: var(--verde-profundo);
  color: rgba(255,255,255,0.92);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) { .historia { grid-template-columns: 1fr; } }
.historia__figura { position: relative; min-height: 320px; }
.historia__figura img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.historia__cuerpo { padding: var(--sp-xl); }
.historia__cuerpo h1, .historia__cuerpo h2 { color: var(--blanco); }
.historia__cuerpo p { color: rgba(255,255,255,0.82); margin-top: var(--sp-sm); }
.historia__firma { margin-top: var(--sp-lg); display: flex; align-items: center; gap: var(--sp-sm); }
.historia__firma svg { width: 40px; height: 40px; color: var(--verde-hoja); }

/* ----------------------------------- CTA final --------------------------------- */
.cta-final {
  position: relative;
  background: var(--acento-dark);
  color: var(--blanco);
  border-radius: var(--radio-lg);
  padding: var(--sp-2xl) var(--sp-lg);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-final::before {
  content: "";
  position: absolute; inset: -20px;
  z-index: -1;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 8c14 18 30 24 30 46 0 20-14 34-30 34S30 74 30 54c0-22 16-28 30-46Z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: derivar-patron 16s linear infinite;
}
@keyframes derivar-patron {
  from { background-position: 0 0; }
  to { background-position: 120px 120px; }
}
.cta-final h2 { color: var(--blanco); max-width: 34rem; margin-inline: auto; }
.cta-final p { color: rgba(255,255,255,0.9); max-width: 34rem; margin: var(--sp-sm) auto var(--sp-lg); }
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }
.cta-final__acciones .btn--acento { animation: pulso-glow 2.6s ease-in-out infinite; }
.cta-final .btn--acento { --btn-bg: var(--blanco); --btn-fg: var(--acento-dark); }
.cta-final .btn--acento:hover { --btn-bg: var(--carbon); --btn-fg: var(--blanco); }