/* ===========================
   ASÍ SE VE — asi-se-ve.css
   =========================== */

/* HERO */
.asv-hero {
  padding: 140px 0 140px;
  position: relative;
  overflow: hidden;
}
.asv-hero__sub {
  font-size: 1.05rem;
  color: var(--gris-texto);
  max-width: 600px;
  line-height: 1.75;
}
.asv-hero__pulse {
  position: absolute;
  bottom: 0;
  right: 100px;
  width: 48%;
  max-width: 800px;
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .asv-hero__pulse {
    display: none;
  }
}

/* SECCIÓN GENÉRICA */
.asv-seccion {
  padding: 48px 0 96px;
}

/* Fondos alternados de sección */
.asv-bg--blanco {
  background: var(--blanco);
}
.asv-bg--gris {
  background: var(--gris-fondo);
}

/* PAR SIDE-BY-SIDE */
.asv-par {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
}

.asv-item__titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--azul);
  margin-bottom: 16px;
}

.asv-item__titulo--centrado {
  text-align: center;
}

.asv-item .proyecto__mockup {
  border-radius: 12px;
}

.asv-item__desc {
  font-size: 0.9rem;
  color: var(--gris-texto);
  line-height: 1.6;
  margin-bottom: 24px;
}

.asv-item__desc--centrado {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

/* Contenedores fijos del mockup — ahora con contenido nativo, no iframe */
.proyecto__mockup-screen--fijo {
  height: 380px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
}

.asv-carrusel-wrap {
  padding: 20px;
}

.asv-galeria-wrap {
  padding: 16px;
  align-items: stretch;
}

/* =============================================
   CARRUSEL — copiado de Garritas (.hero-carousel)
   Prefijo asv- para no chocar con styles.css
   ============================================= */
.asv-hero-carousel {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(100,60,180,.13);
  background: #FAD4B8;
  padding: 10px;
  box-sizing: border-box;
}

.asv-carousel-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.asv-carousel-slide {
  display: none;
  width: 100%;
}
.asv-carousel-slide.active {
  display: block;
  animation: asvFadeIn 0.5s ease;
}
@keyframes asvFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
.asv-carousel-slide img {
  width: 95%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  pointer-events: none;
}

.asv-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 4px;
}
.asv-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(100, 60, 180, 0.2);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
.asv-carousel-dot.active {
  background: #C96830;
  transform: scale(1.3);
}
.asv-carousel-dot:hover {
  background: #F0935A;
}

/* =============================================
   GALERÍA DE VIDEOS — copiado de Garritas (.videos-grid)
   ============================================= */
.asv-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.asv-video-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(100,60,180,.13);
  background: #FAD4B8;
  padding: 6px;
  box-sizing: border-box;
}

.asv-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  aspect-ratio: 9/16;
}

#chatbots .asv-par {
  grid-template-columns: 1fr 1fr;
}

.asv-item__nota {
  font-size: 0.85rem;
  color: var(--menta-oscuro);
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
}

/* =============================================
   CHATBOTS — iframe interactivo (a diferencia del
   carrusel/galería, aquí SÍ permitimos scroll y
   clics reales del usuario, sin pointer-events:none)
   ============================================= */
.proyecto__mockup-screen--fijo.asv-chatbot-wrap {
  height: 600px;
}

.asv-iframe-chatbot {
  width: 100%;
  height: 100%;
  border: none;
  /* sin pointer-events:none — el usuario puede scrollear
     y usar el chatbot real dentro del iframe */
}

/* Placeholder visual para el chatbot de IA de HealthCanvas,
   pendiente de conectar a la API de Claude */
.asv-chatbot-placeholder {
  background: linear-gradient(135deg, var(--gris-fondo), var(--gris-suave));
}
.asv-chatbot-placeholder__inner {
  text-align: center;
  padding: 32px;
  max-width: 280px;
}
.asv-chatbot-placeholder__icono {
  font-size: 2.5rem;
  margin-bottom: 16px;
}
.asv-chatbot-placeholder__titulo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--azul);
  margin-bottom: 10px;
}
.asv-chatbot-placeholder__texto {
  font-size: 0.85rem;
  color: var(--gris-texto);
  line-height: 1.6;
}

/* =============================================
   DIVIDERS — separadores de sección con frase,
   alto impacto: fondo azul oscuro + texto contraste
   ============================================= */
.asv-divider {
  padding: 24px 24px;
  text-align: center;
  background: var(--azul);
}

.asv-divider p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  color: var(--blanco);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.4;
}

.asv-divider__resaltado {
  color: var(--menta);
  font-style: italic;
}

@media (max-width: 768px) {
  .asv-divider {
    padding: 28px 24px;
  }
}

/* =============================================
   LOGOS — franja deslizante (marquee) continua
   ============================================= */
.asv-seccion--logos {
  padding: 80px 0;
}

.asv-logos-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* difumina los bordes para que el loop no se vea cortado */
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.asv-logos-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: asvMarquee 30s linear infinite;
}

.asv-logos-marquee:hover .asv-logos-track {
  animation-play-state: paused;
}

@keyframes asvMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.asv-logo-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  height: 260px;
  width: 260px;
}

.asv-logo-card img {
  height: 120%;
  width: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .asv-seccion--logos {
    padding: 56px 0;
  }
  .asv-logos-track {
    gap: 16px;
    animation-duration: 25s;
  }
  .asv-logo-card {
    height: 140px;
    width: 140px;
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asv-logos-track {
    animation: none;
  }
  .asv-logos-marquee {
    overflow-x: auto;
  }
}
.asv-seccion--qr {
  padding: 80px 0;
}

.asv-qr-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* difumina los bordes para que el loop no se vea cortado */
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.asv-qr-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: asvMarquee 30s linear infinite;
}
.asv-qr-marquee:hover .asv-qr-track {
  animation-play-state: paused;
}

.asv-qr-track--reversa {
  animation-name: asvMarqueeReversa;
}

@keyframes asvMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes asvMarqueeReversa {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.asv-qr-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  height: 260px;
  width: 260px;
}

.asv-qr-card img {
  height: 120%;
  width: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .asv-seccion--qr {
    padding: 56px 0;
  }
  .asv-qr-track {
    gap: 16px;
    animation-duration: 25s;
  }
  .asv-qr-card {
    height: 140px;
    width: 140px;
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asv-qr-track {
    animation: none;
  }
  .asv-qr-marquee {
    overflow-x: auto;
  }
}


@media (max-width: 768px) {
  .asv-hero {
    padding: 120px 24px 40px;
  }
  .asv-par,
  #chatbots .asv-par {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proyecto__mockup-screen--fijo {
    height: 320px;
  }
  .asv-item--galeria .proyecto__mockup-screen--fijo {
    height: 280px;
  }
  .asv-videos-grid {
    gap: 8px;
  }
  .proyecto__mockup-screen--fijo.asv-chatbot-wrap {
    height: 550px;
  }
}
.asv__cta {
  padding: 80px 0;
  background: var(--azul);
}
.asv__cta .section__title { color: var(--blanco); }
.asv__cta .sv-hero__sub { color: rgba(255,255,255,0.75); }
.asv__cta-inner { text-align: center; }
.asv__cta-inner .sv-hero__sub { margin-left: auto; margin-right: auto; }
.asv__cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .asv__grid { grid-template-columns: 1fr; }
  .asv__sueltos { padding: 24px; }
  .asv__sueltos-grid { grid-template-columns: 1fr; }
}
/* =============================================
   POSTS DE INSTAGRAM
   ============================================= */
.asv-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 48px;
}

.asv-post-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.asv-post-frame {
  width: 100%;
  aspect-ratio: 1 / 1.25;
  background: var(--blanco);
  border: 1px solid var(--gris-suave);
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.asv-post-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gris-fondo), var(--gris-suave));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-texto);
}

.asv-post-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--azul);
  margin: 0;
}

.asv-post-desc {
  font-size: 0.9rem;
  color: var(--gris-texto);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .asv-posts-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =============================================
   TARJETAS DE PRESENTACIÓN — FLIP 3D
   ============================================= */
.asv-tarjeta-par {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 80px;
}

.asv-tarjeta-par--inverso {
  grid-template-columns: 1.2fr 1fr;
}

.asv-tarjeta-par--inverso .asv-tarjeta-visual {
  order: 2;
}

.asv-tarjeta-par--inverso .asv-tarjeta-desc {
  order: 1;
}

.asv-tarjeta-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Contenedor 3D */
.asv-tarjeta-flip-container {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 85 / 54;
  perspective: 1000px;
  cursor: pointer;
}

.asv-tarjeta-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.asv-tarjeta-flip-container.flipped .asv-tarjeta-flip-inner {
  transform: rotateY(180deg);
}

.asv-tarjeta-flip-front,
.asv-tarjeta-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(27, 79, 114, 0.15);
}

.asv-tarjeta-flip-front {
  background: var(--blanco);
  border: 2px solid var(--gris-suave);
}

.asv-tarjeta-flip-back {
  background: linear-gradient(135deg, var(--azul-claro), var(--menta-claro));
  border: 2px solid var(--menta);
  transform: rotateY(180deg);
}

.asv-tarjeta-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gris-fondo), var(--gris-suave));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-texto);
}

.asv-tarjeta-hint {
  font-size: 0.8rem;
  color: var(--gris-texto);
  text-align: center;
  margin: 0;
  font-weight: 500;
}

.asv-tarjeta-desc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.asv-tarjeta-desc .asv-item__titulo {
  margin: 0;
}

.asv-tarjeta-desc .asv-item__desc {
  margin: 0;
}

@media (max-width: 768px) {
  .asv-tarjeta-par,
  .asv-tarjeta-par--inverso {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .asv-tarjeta-par--inverso .asv-tarjeta-visual {
    order: unset;
  }

  .asv-tarjeta-par--inverso .asv-tarjeta-desc {
    order: unset;
  }

  .asv-tarjeta-flip-container {
    max-width: 240px;
  }

  .asv-tarjeta-par {
    margin-bottom: 56px;
  }

  .asv-tarjeta-par--inverso .asv-tarjeta-visual {
    order: 1;
  }

  .asv-tarjeta-par--inverso .asv-tarjeta-desc {
    order: 2;
  }
}