/* css/style-v5.css */
/* Veladebarco — Home v5 — versión simplificada (solo texto + animación real del chatbot) */
/* Se carga DESPUÉS de style-v4.css: hereda navbar, footer, tokens, tarjetas de servicio, franjas. */

/* ---------- Hero v5 (bloque rojo a pantalla completa, sin columna) ---------- */
.hero-v5__red {
  background: var(--color-red);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
}

.hero-v5__slogan {
  color: var(--color-white);
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.hero-v5__subtitle {
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: 18px;
  max-width: 36ch;
  margin: 0;
}

/* ---------- Service sections sin device-frame: texto centrado, sin bloque vacío ---------- */
.service-section__inner--text-only {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  gap: 0;
}

.service-section__inner--text-only .service-section__bullets {
  align-items: flex-start;
  text-align: left;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Título de #contenido: evitar que "CONTENIDO QUE CAPTA LA ATENCIÓN." se
   parta a mitad de frase en desktop. El contenedor de texto centrado (640px) es
   demasiado angosto para esa línea a la escala normal del título; se le da más
   ancho y una escala algo más contenida solo a este título, de forma que quepa
   completa en una sola línea antes de saltar a "CLIENTES QUE LLEGAN A VOS." ---------- */
#contenido .service-section__title {
  font-size: clamp(1.9rem, 4.1vw, 3.1rem);
}
@media (min-width: 1024px) {
  #contenido.service-section .service-section__inner--text-only {
    max-width: 920px;
  }
}

/* ---------- Íconos de las tarjetas de servicio: heredan el color de su tarjeta
   para que el trazo sea visible sobre el contenedor blanco ---------- */
.servicio-card--red .servicio-card__icon { color: var(--color-red); }
.servicio-card--green .servicio-card__icon { color: var(--color-green); }
.servicio-card--navy .servicio-card__icon { color: var(--color-navy); }

/* ---------- Animación del chatbot integrada en la sección #chatbot (sin caja blanca) ---------- */
.chatbot-demo {
  width: min(80vw, 300px);
  height: 480px;
  background: transparent;
}
@media (min-width: 1024px) {
  .chatbot-demo { height: 560px; }
}

.chatbot-demo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
}

/* ---------- Carrusel móvil de tarjetas: peek de la siguiente tarjeta ----------
   85% de ancho por sí solo casi no deja peek: el margin-left de 24px entre
   tarjetas consume casi todo el 15% restante (~7px visibles, imperceptible).
   72% deja un peek real de ~15-18% del ancho de pantalla, que es el objetivo
   de esta corrección (medido en dispositivo real, sin el scrollbar de escritorio). */
@media (max-width: 767.98px) {
  .servicios-grid .servicio-card {
    flex: 0 0 72%;
  }
}