/* ==========================================================================
   Inicio: portada, bandas de color del manual y servicios por grupo
   Proporción del manual: petróleo dominante, celeste, lima y amarillo de acento
   ========================================================================== */

/* Cotizador: banda en petróleo claro; la tarjeta queda montada sobre el borde */

.cotiza-banda {
  position: relative;
  margin-top: calc(-1 * var(--radio-seccion));
  padding-top: var(--radio-seccion);
  background: linear-gradient(var(--petroleo-claro) 0, var(--petroleo-claro) 62%, transparent 62%);
}

.cotiza-banda .cw-uf { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde-marca); }

/* Servicios por grupo ------------------------------------------------------------ */

.servicios__intro { max-width: 44em; margin-bottom: clamp(24px, 3vw, 44px); }

.servicios__grupos {
  display: grid;
  gap: clamp(14px, 1.5vw, 24px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) { .servicios__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .servicios__grupos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cada grupo usa su escala: tinte -claro de fondo, -suave en los íconos,
   y el color base solo como filete superior. Así ningún grupo compite. */
.grupo--petroleo { --g: var(--petroleo); --g-tinte: var(--petroleo-claro); --g-suave: var(--petroleo-suave); --g-icono: var(--petroleo-profundo); }
.grupo--celeste { --g: var(--celeste); --g-tinte: var(--celeste-claro); --g-suave: var(--celeste-suave); --g-icono: var(--celeste-oscuro); }
.grupo--amarillo { --g: var(--amarillo); --g-tinte: var(--amarillo-claro); --g-suave: var(--amarillo-suave); --g-icono: var(--grafito); }
.grupo--lima { --g: var(--lima); --g-tinte: var(--lima-claro); --g-suave: var(--lima-suave); --g-icono: var(--lima-oscuro); }

.grupo {
  padding: clamp(18px, 1.8vw, 28px);
  border-top: 4px solid var(--g);
  border-radius: var(--radio-m);
  background: var(--g-tinte);
}

.grupo__titulo { font-size: var(--t-h3); }
.grupo__bajada { margin-top: 4px; color: var(--texto-secundario); }

.grupo__lista { display: grid; gap: 8px; margin-top: 16px; }

.servicio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid transparent;
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--texto);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}

.servicio:hover { transform: translateY(-2px); border-color: var(--g-suave); box-shadow: var(--sombra-suave); }

.servicio__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--g-tinte);
  color: var(--g-icono);
  transition: transform 0.3s var(--ease), background-color 0.25s;
}

.servicio:hover .servicio__icono { transform: rotate(-6deg); background: var(--g-suave); }

.servicio__nombre {
  min-width: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Convenios: banda en lima claro, el lima queda como acento ----------------------- */

.convenios {
  padding-top: var(--seccion);
  margin-bottom: var(--seccion);
  background: var(--lima-claro);
}

.convenios__cabecera p { color: var(--texto-secundario); }