/* css/style-services.css */
/* Veladebarco — Página de servicios — estilos específicos (usa tokens de style-v4.css) */

/* ---------- Hero editorial ---------- */
.services-hero {
  background: var(--color-bg);
  padding: calc(var(--navbar-h-mobile) + 64px) 0 64px;
  text-align: center;
}
@media (min-width: 768px) {
  .services-hero { padding: calc(var(--navbar-h-desktop) + 120px) 0 120px; }
}

.services-hero__inner {
  max-width: 720px;
}

.services-hero__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.services-hero__subtext {
  font-size: 18px;
  color: #4a4a4a;
  max-width: 46ch;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .services-hero__subtext { font-size: 20px; }
}

/* ---------- Mejor juntos (paquete personalizado) ---------- */
.better-together__dark {
  background: var(--color-text);
  padding: var(--space-xl) 0;
  text-align: center;
}

.better-together__dark-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.better-together__title {
  color: var(--color-white);
  font-size: clamp(2.5rem, 7vw, 4rem);
}

.better-together__subtext {
  color: #E5E5E5;
  font-size: 18px;
  max-width: 46ch;
}

.better-together__cta { margin-top: var(--space-sm); }

.better-together__light {
  background: var(--color-white);
  padding: var(--space-xl) 0;
  text-align: center;
}

.better-together__light-inner {
  max-width: 680px;
  margin: 0 auto;
}

.better-together__headline {
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- Service block (contenido / chatbot / website) ---------- */
.service-block {
  padding: 64px 0;
  background: var(--color-bg);
}
@media (min-width: 768px) {
  .service-block { padding: var(--space-xl) 0; }
}

.service-block--red { background: var(--color-red); }
.service-block--green { background: var(--color-green); }
.service-block--navy { background: var(--color-navy); }

.service-block__label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-sm);
}
.service-block__label--red,
.service-block__label--green,
.service-block__label--navy {
  color: var(--color-white);
}

.service-block__title {
  color: var(--color-text);
  font-size: clamp(2rem, 5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  margin-bottom: var(--space-xl);
  max-width: 20ch;
}
.service-block--red .service-block__title,
.service-block--green .service-block__title,
.service-block--navy .service-block__title {
  color: var(--color-white);
}

.service-block__differentiator {
  font-style: italic;
  font-size: 17px;
  color: #4a4a4a;
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}
.service-block--red .service-block__differentiator,
.service-block--green .service-block__differentiator,
.service-block--navy .service-block__differentiator {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Plan (escalón) cards ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
}

.plan-card--featured { border-width: 2px; }
.plan-card--featured-red {
  border-color: var(--color-red);
}

.plan-card__name {
  font-size: 28px;
  color: var(--color-text);
}

.plan-card__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-red);
  margin: 0;
}
.plan-card__price-unit {
  font-weight: 500;
  font-size: 15px;
}

.plan-card__price-note {
  font-size: 13px;
  color: #6b6b6b;
  margin: -8px 0 0;
}

.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  font-size: 15px;
  color: var(--color-text);
}
.plan-card__list li { padding-left: 24px; position: relative; }
.plan-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-red);
}

.plan-card__cta { width: 100%; text-align: center; }

/* ---------- Carrusel móvil (mismo sistema que .servicios-grid de index-v5.html) ---------- */
@media (max-width: 767.98px) {
  .plan-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: calc(100% + var(--space-md) * 2);
  }
  .plan-grid::-webkit-scrollbar { display: none; }

  .plan-grid .plan-card {
    flex: 0 0 72%;
    scroll-snap-align: center;
    margin-left: var(--space-md);
  }
  .plan-grid .plan-card:last-child { margin-right: var(--space-md); }
}