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

/* ---------------------------------- Hero ---------------------------------- */
.hero {
  min-height: min(calc(100vh - var(--header-h)), 880px);
  min-height: min(calc(100svh - var(--header-h)), 880px);
  display: flex;
  align-items: center;
  padding-block: clamp(1rem, 1.5vh, 2rem);
  overflow: hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(111,190,68,0.14), transparent 60%),
    var(--crema);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
  width: 100%;
}
.hero__texto, .hero__visual { min-width: 0; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}
.hero__titulo {
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.4rem);
  overflow: hidden;
}
.hero__titulo .linea {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms cubic-bezier(.16,.8,.24,1);
}
.hero.listo .hero__titulo .linea { transform: translateY(0); }
.hero__titulo .linea:nth-child(2) { transition-delay: 90ms; }
.hero__titulo em { font-style: normal; color: var(--verde-profundo); }

.hero__copy { margin-top: var(--sp-xs); font-size: var(--fs-base); color: var(--carbon-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-sm); }

.hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-top: var(--sp-sm); }

.hero__visual { position: relative; }
.hero__marco {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  overflow: hidden;
  aspect-ratio: 4 / 3.5;
  max-height: min(52vh, 440px);
  box-shadow: var(--sombra-lg);
  isolation: isolate;
}
.hero__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02) translateY(var(--parallax, 0));
}
.hero__marco::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(31,92,59,0) 55%, rgba(20,61,39,0.55) 100%);
}
.hero__insignia {
  position: absolute;
  bottom: clamp(-14px, -2vw, 10px);
  left: clamp(-10px, -2vw, 20px);
  background: var(--blanco);
  border-radius: var(--radio-md);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--sombra-md);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  z-index: 2;
  max-width: 260px;
  animation: flotar-sutil 5s ease-in-out infinite;
}
.hero__insignia svg { width: 34px; height: 34px; color: var(--verde-profundo); flex-shrink: 0; }
.hero__insignia strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
.hero__insignia span { font-size: var(--fs-xs); color: var(--carbon-suave); }

.hero__anillo {
  position: absolute;
  top: -8%; right: -10%;
  width: 46%; aspect-ratio: 1;
  border: 2px dashed rgba(111,190,68,0.4);
  border-radius: 50%;
  z-index: -1;
  animation: girar-lento 40s linear infinite;
}

.hero__particula {
  position: absolute;
  z-index: -1;
  color: var(--verde-hoja);
  opacity: 0.55;
  pointer-events: none;
}
.hero__particula--1 { top: 6%; left: 6%; width: 30px; animation: flotar 6.5s ease-in-out infinite; }
.hero__particula--2 { bottom: 10%; left: 16%; width: 22px; color: var(--azul-gota); opacity: 0.5; animation: flotar-inverso 8s ease-in-out infinite 0.6s; }
.hero__particula--3 { top: 38%; right: 2%; width: 18px; color: var(--acento); opacity: 0.45; animation: flotar 7.5s ease-in-out infinite 1.2s; }
@media (max-width: 720px) { .hero__particula { display: none; } }

@media (max-width: 640px) {
  .hero { padding-block: var(--sp-2xs); align-items: flex-start; }
  .hero__grid { gap: var(--sp-sm); }
  .hero__marco { width: min(60%, 220px); max-height: 22vh; aspect-ratio: 1 / 0.95; }
  .hero__insignia { padding: var(--sp-2xs) var(--sp-xs); max-width: 200px; }
  .hero__insignia svg { width: 26px; height: 26px; }
  .hero__insignia strong { font-size: 0.82rem; }
  .hero__insignia span { font-size: 0.7rem; }
  .hero__titulo { font-size: clamp(1.5rem, 1.15rem + 3vw, 2rem); }
  .hero__copy { font-size: var(--fs-sm); margin-top: var(--sp-3xs); }
  .hero__acciones { margin-top: var(--sp-2xs); gap: var(--sp-2xs); }
  .hero__acciones .btn { padding: 0.75rem 1.3rem; min-height: 42px; }
  .hero__chips { margin-top: var(--sp-2xs); }
}

/* -------------------------------- Marquee categorías ------------------------ */
.marquee-categorias {
  background: var(--verde-profundo);
  color: var(--blanco);
  padding-block: var(--sp-sm);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.marquee-categorias__pista {
  display: flex;
  width: max-content;
  gap: 0;
  animation: desplazar-marquee 55s linear infinite;
}
.marquee-categorias:hover .marquee-categorias__pista,
.marquee-categorias:focus-within .marquee-categorias__pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-categorias__pista { animation: none; overflow-x: auto; }
}
.marquee-categorias__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding-inline: var(--sp-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.marquee-categorias__item::after {
  content: "•";
  margin-left: var(--sp-md);
  color: var(--verde-hoja);
  animation: pulso-punto 1.8s ease-in-out infinite;
}
@keyframes pulso-punto {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@keyframes desplazar-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------- Pasos ---------------------------------- */
.seccion-pasos { background: var(--crema-alt); }

/* -------------------------------- Categorías bento -------------------------- */
.bento-categorias {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: var(--sp-sm);
}
@media (max-width: 720px) {
  .bento-categorias { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}
.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; 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--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; }
}

/* --------------------------------- 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); }

/* --------------------------------- Confianza ---------------------------------- */
.confianza-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
@media (max-width: 860px) { .confianza-grid { grid-template-columns: 1fr; } }
.confianza-info { display: grid; gap: var(--sp-sm); }
.confianza-info__item { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.confianza-info__item svg { width: 28px; height: 28px; color: var(--verde-profundo); flex-shrink: 0; }
.confianza-info__item strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.confianza-info__item span, .confianza-info__item a { color: var(--carbon-suave); font-size: var(--fs-sm); }
.confianza-pagos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
@media (max-width: 480px) { .confianza-pagos { grid-template-columns: 1fr; } }

/* ----------------------------------- 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); }