/* ===== Horizontal scroll “mapeado” al scroll vertical ===== */
.hscroll {
  position: relative;
  /* La altura se setea por JS según el ancho real del track */
  height: 100vh; /* valor de seguridad inicial (evita saltos al pintar) */
}
.hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hscroll__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.panel {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============ GCARD — tarjeta “glass” con borde degradado (FIX) ============ */

/* Capa glass interior */
.gcard__inner {
  position: relative;
  border-radius: calc(var(--gcard-radius) - var(--gcard-border));
  backdrop-filter: blur(10px) saturate(120%);
  padding: clamp(16px, 3vw, 28px);
  min-height: clamp(360px, 70vh, 720px);

  display: grid;
  grid-template-columns: 1fr; /* móvil: vertical */
  gap: clamp(14px, 2.2vw, 24px);
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (min-width: 960px) {
  .panel {
    padding: 3em;
  }
  .gcard__inner {
    grid-template-columns: 1.1fr 0.9fr; /* desktop: texto | imagen */
    grid-template-rows: 1fr;
    padding-inline: 4em;
  }
}

/* Texto */
.gcard__text {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 0.7rem;
}
.gcard__title {
  text-align: center;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(2rem, 2.5vw, 5rem);
  line-height: 1.2;
}
.gcard__desc {
  margin: 0;
  padding: 0.5em 2em;
  color: var(--text);
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  max-width: 60ch;
}

/* =========================================================
    Animaciones de imagen para tarjetas 
========================================================= */
/* ---------- Tilt 3D elegante (hover) ---------- */
.fx-tilt3d {
  perspective: 900px;
  transform-style: preserve-3d;
  border-radius: 1em;
  justify-self: center;
}
.fx-tilt3d img {
  border-radius: 1em;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.18);
  max-height: 600px;
}
.fx-tilt3d:hover img {
  transform: rotateX(6deg) rotateY(-6deg) scale(1.03) translateY(-2px);
  filter: saturate(1.06) contrast(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), 0 36px 80px rgba(0, 0, 0, 0.22);
}

/* Lista con checks */
.list-check {
  list-style: none;
  padding: 0;
  margin-top: 1em;
  margin-inline: auto;
  display: grid;
  gap: 0.4rem;
  font-size: 1.5em;
}
.list-check li::before {
  content: "✓";
  color: var(--success);
  margin-right: 0.5rem;
}

/* Servicios */

.services {
  grid-template-columns: 1fr;
}

.service {
  display: grid;
  gap: 1em;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border-radius: 1em;
  background-color: var(--bg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
}

.service__detail img {
  width: 100%;
  max-width: fit-content;
  height: auto;
  max-height: 400px;
  margin: 0 auto;
  border-radius: 10px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.18);
  backface-visibility: hidden;
  margin-bottom: 1em;
}

.service__detail img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.24))
    drop-shadow(0 36px 80px rgba(0, 0, 0, 0.22));
}

.service__detail h4 {
  font-size: 1.3em;
  text-align: center;
  font-weight: bold;
}

.service__detail p {
  text-align: center;
  color: var(--text);
}

.service__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0.2em 0.5em;
  background: linear-gradient(45deg, var(--accent) 30%, var(--primary) 90%);
  background-size: 180% 180%;
  border-radius: 0.5em;
  animation: gradientShift 4s ease-in-out infinite;
}

.services > :nth-child(odd) .service__title {
  background: linear-gradient(45deg, var(--primary) 30%, var(--accent) 90%);
  background-size: 180% 180%;

  animation: gradientShift 4s ease-in-out infinite;
}

.service h3 {
  text-align: center;
  font-size: 2rem;
  margin: 0;
  font-weight: 400;
  color: white;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 640px) {
  .service {
    grid-template-columns: 1fr;
  }

  .service h3 {
    font-size: 1.5rem;
  }
}
.text-gradient-anim {
  background: linear-gradient(90deg, var(--primary) 30%, var(--accent) 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  animation: textGrad 6s ease-in-out infinite;
}
@keyframes textGrad {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: left;
  max-width: 650px;
}

.badge {
  padding: 0.1em 1em;
  border-radius: 1em;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  color: white;
  background: var(--primary);
  box-shadow: 0 0px 15px var(--primary);
  font-size: 0.8em;
}

.hero__main .badge {
  margin: 0;
}

.badge.secondary {
  background: var(--accent);

  box-shadow: 0 0px 15px var(--accent);
}

@media (min-width: 960px) {
  .badge {
    font-size: 1em;
    margin-block: 1em;
  }
}
.media__video {
  height: 100%;
  width: auto;
  max-height: 600px;
  margin-inline: auto;
  padding: 0;
}
.media__video video {
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.8);
  border-radius: 1em;
  box-shadow: 0 0 1em #00ff00; /* Sobmra para video del color de la animación*/
  object-fit: cover;
}

.collage {
  /* contenedor con ancho y alto fijo (ajústalos a tu gusto) */
  width: 720px;
  height: 420px;
  display: grid;
  /* malla más fina para posicionar con precisión */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0; /* sin separación para que el solape sea limpio */
  position: relative;
  /* overflow: hidden; */
  justify-self: center;
}
.collage li {
  list-style: none;
  transition: transform 0.25s ease;
}

ul {
  padding: 0;
}
/* estilo base de las fotos */
.collage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* que llenen su celda sin deformarse */
  border-radius: 12px;
  box-shadow: 0 10px 24px var(--accent), 0 0 20px var(--primary);
  user-select: none;
  pointer-events: none;
}

.collage span {
  position: absolute;
  top: -3em;
  left: 50%;
  transform: translate(-70%, -50%);
}

@media (max-width: 640px) {
  .collage span {
    width: fit-content;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 480px) {
  .collage span {
    width: 80%;
    top: -2em;
  }
}

/* izquierda ocupa bloque a la izquierda */
.foto--left {
  grid-column: 1 / 6; /* columnas 1-4 */
  grid-row: 4 / 8; /* filas 3-7 */
  transform: rotate(-4deg);
  z-index: 1;
}

/* derecha ocupa bloque a la derecha */
.foto--right {
  grid-column: 8 / 13; /* columnas 9-12 */
  grid-row: 3 / 7; /* filas 2-6 */
  transform: rotate(4deg);
  z-index: 1;
}

/* principal centrada y encima */
.foto--center {
  grid-column: 3 / 9; /* centrada (columnas 4-9) */
  grid-row: 1 / 6; /* un poco más alta */
  z-index: 2; /* SOBRE las otras */
  /* transform: rotate(1.5deg); */
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  position: relative;

  --pos: 50%;
}

/* toques de interacción opcionales */
.foto--center:hover {
  transform: scale(1.05);
}

.foto--left:hover,
.foto--right:hover {
  transform: translateY(-4px) rotate(var(--r, 0));
  z-index: 3;
}

/* versión responsive: en pantallas pequeñas, la principal sigue arriba, 
   y las secundarias se colocan abajo a los lados sin perder jerarquía */
@media (max-width: 640px) {
  .collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    width: 100%; /* proporcional al ancho del viewport */
    height: auto;
    row-gap: 2em;
    column-gap: 0.5em;
  }
  .collage img {
    position: static;
    height: auto;
  }

  .foto--center {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .foto--left {
    grid-column: 1;
    grid-row: 2;
    transform: rotate(0);
    height: auto;
  }
  .foto--right {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    transform: rotate(0);
  }
}

/* === HSCROLL: móvil sin sticky ni desplazamiento horizontal === */
@media (max-width: 959px) {
  .hscroll {
    height: auto !important; /* deja de forzar 100vh dinámicos */
  }
  .hscroll__sticky {
    position: static !important; /* quita sticky en móviles */
    height: auto !important;
    overflow: visible !important;
  }
  .hscroll__track {
    display: block !important; /* apila contenido en columna */
    transform: none !important; /* sin translateX */
  }
  .panel {
    min-width: 100% !important; /* ancho natural */
    height: auto !important; /* alto según contenido */
    padding: 16px 0; /* respira un poco */
  }
}

.hero__main h1 {
  filter: drop-shadow(0 0 22px var(--primary));
}
.fizz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fizz img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  animation: floating 2s infinite linear;
  filter: invert(100%) drop-shadow(0 0 3em var(--accent));
}

html[data-theme="dark"] {
  .fizz img {
    filter: invert(0) drop-shadow(0 0 3em var(--accent));
  }
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1em);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .fizz .badge {
    text-overflow: clip;
    overflow: hi;
  }
  .services__title {
    margin-top: 0;
  }
}

.services__title {
  margin-top: 2em;
  padding: 3em 3em 0 3em;
  text-align: center;
}
.services__title p {
  margin: auto;
  margin-top: 2em;

  max-width: 800px;
}

.compare .img--reveal {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path 0.08s linear; /* suave al mover */
}

/* Slider ocupa todo para capturar arrastre/touch */
.compare .slider {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  margin: 0;
}

/* Barra invisible (usamos sólo el thumb) */
.compare .slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.compare .slider::-moz-range-track {
  height: 100%;
  background: transparent;
}

/* “Handle” visual independiente para mejor estilo */
.handle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent calc(var(--pos) - 1px),
    rgba(255, 255, 255, 0.9) calc(var(--pos) - 1px),
    rgba(255, 255, 255, 0.9) calc(var(--pos) + 1px),
    transparent calc(var(--pos) + 1px)
  );
}
.handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  font: 700 16px/1 system-ui;
  color: #111;
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.6rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Thumb grande y accesible (invisible por debajo del handle) */
.compare .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.compare .slider::-moz-range-thumb {
  width: 28px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: ew-resize;
}

.compare {
  width: 100%;
  max-width: 600px;
  height: auto;

  position: relative;
  justify-self: center;
  /* display: grid; */
  box-shadow: 0 10px 24px var(--accent), 0 0 20px var(--primary);
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 1em;
  border: none;

  --pos: 50%; /* posición inicial del divisor */
}

/* Imágenes apiladas */
.compare .img {
  display: block;
  width: 100%;
  position: absolute;
  inset: 0;

  height: auto;
  object-fit: cover;
  user-select: none;
  /* pointer-events: none; */
  object-position: center;
  /* margin: 1em; */
  background-repeat: no-repeat;
  border-radius: 1em;
  border: none;
  outline: none;
}

/* La de arriba se recorta con clip-path usando la variable */
.compare .img--reveal {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path 0.08s linear; /* suave al mover */
}

/* Slider ocupa todo para capturar arrastre/touch */
.compare .slider {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  margin: 0;
}

.compare input {
  border: none;
}
.compare input:hover {
  border: none;
}

/* Barra invisible (usamos sólo el thumb) */
.compare .slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.compare .slider::-moz-range-track {
  height: 100%;
  background: transparent;
}

/* “Handle” visual independiente para mejor estilo */
.handle {
  position: absolute;
  inset: 0;
  /* pointer-events: none; */
  background: linear-gradient(
    90deg,
    transparent calc(var(--pos) - 1px),
    rgba(255, 255, 255, 0.9) calc(var(--pos) - 1px),
    rgba(255, 255, 255, 0.9) calc(var(--pos) + 1px),
    transparent calc(var(--pos) + 1px)
  );
}
.handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: #111;
  padding: 0 0.6rem 0.4rem 0.6rem;
}

/* Thumb grande y accesible (invisible por debajo del handle) */
.compare .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* width: 28px; */
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.compare .slider::-moz-range-thumb {
  width: 28px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: ew-resize;
}