/* ==========================================================================
   ORBITASWEB · Sección de paquetes
   --------------------------------------------------------------------------
   Tres paquetes de servicio con el mismo lenguaje visual del sitio:
   tarjetas blancas, borde #D7E0ED, radio 14px, azul #2563EB y tipografía
   Manrope para los títulos. El paquete VIP se destaca con un borde azul y una
   insignia, sin romper la armonía del resto.
   ========================================================================== */

.ow-paquetes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}

/* --------------------------------------------------------------- 1. Tarjeta */
.ow-paquete {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #D7E0ED;
  border-radius: 14px;
  padding: 1.7rem 1.5rem 1.5rem;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

.ow-paquete:hover {
  transform: translateY(-4px);
  border-color: #93C5FD;
  box-shadow: 0 18px 35px rgba(17, 24, 39, .07);
}

/* El paquete recomendado se distingue con borde azul y una sombra suave */
.ow-paquete--destacado {
  border: 2px solid #2563EB;
  box-shadow: 0 16px 38px rgba(37, 99, 235, .13);
}

.ow-paquete--destacado:hover {
  border-color: #1D4ED8;
  box-shadow: 0 22px 44px rgba(37, 99, 235, .18);
}

/* ------------------------------------------------------------- 2. Insignia */
.ow-paquete-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  background: #2563EB;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- 3. Título */
.ow-paquete-head {
  text-align: center;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #E8EEF6;
}

.ow-paquete-nombre {
  display: block;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: .55rem;
}

.ow-paquete h3 {
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #0F172A;
  margin: 0 0 .5rem;
}

.ow-paquete--destacado h3 { color: #1D4ED8; }

.ow-paquete-resumen {
  font-size: .855rem;
  line-height: 1.55;
  color: #52637A;
  margin: 0;
}

/* --------------------------------------------------------------- 4. Precio */
.ow-paquete-precio {
  text-align: center;
  padding: 1.15rem 0 1.25rem;
}

.ow-paquete-precio small {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: .3rem;
}

.ow-paquete-precio b {
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #0F172A;
  line-height: 1;
}

.ow-paquete--destacado .ow-paquete-precio b { color: #2563EB; }

.ow-paquete-precio span {
  display: block;
  font-size: .74rem;
  color: #94A3B8;
  margin-top: .4rem;
}

/* ------------------------------------------------------------ 5. Incluye */
.ow-paquete-incluye {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #94A3B8;
  margin: 0 0 .7rem;
}

.ow-paquete ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}

.ow-paquete li {
  position: relative;
  padding: .42rem 0 .42rem 1.65rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
}

.ow-paquete li:last-child { border-bottom: 0; }

/* Marca de verificación dibujada con CSS: no depende de iconos externos */
.ow-paquete li::before {
  content: "";
  position: absolute;
  left: .18rem;
  top: .78rem;
  width: 9px;
  height: 5px;
  border-left: 2px solid #2563EB;
  border-bottom: 2px solid #2563EB;
  transform: rotate(-45deg);
}

.ow-paquete--destacado li::before {
  border-color: #1D4ED8;
}

.ow-paquete li strong {
  color: #0F172A;
  font-weight: 700;
}

/* ---------------------------------------------------------------- 6. Botón */
.ow-paquete .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

/* ------------------------------------------------------------------ 7. Nota */
.ow-paquetes-nota {
  margin: 1.6rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: #64748B;
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

.ow-paquetes-nota strong { color: #334155; }

/* ------------------------------------------------------- 8. Adaptación móvil */
@media (max-width: 980px) {
  .ow-paquetes-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 460px;
    margin-inline: auto;
  }
  .ow-paquete { padding: 1.6rem 1.35rem 1.4rem; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .ow-paquetes-grid { gap: 1rem; }
  .ow-paquete { padding: 1.5rem 1.15rem 1.35rem; }
  .ow-paquete li { font-size: .83rem; }
}