/* ==========================================================================
   sections/packs.css
   Los tres apartados de precios (packs completos, páginas web y marketing).
   - .pack → cards naranjas (packs completos y marketing)
   - .plan → cards de páginas web, cada una con su color
   En celular, cada grilla se convierte en un carrusel que se desliza de
   costado (así la página no se hace tan larga).
   ========================================================================== */

/* ---- Encabezado chico de cada apartado de precios ---- */
.precios .section-head { display: grid; justify-items: center; gap: 0.75rem; }
.precios .section-sub { margin-top: 0; }

/* ---- Grillas ---- */
.packs__grid { display: grid; gap: 1rem; align-items: stretch; }
/* Cada card va envuelta en un div (para la animación de entrada) */
.packs__grid > div { display: flex; }
.packs__grid > div > * { flex: 1; }

@media (min-width: 980px) {
  .packs__grid { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin-inline: auto; }
  .packs__grid--4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
}

/* ---- Celular y tablet: carrusel horizontal ---- */
@media (max-width: 979px) {
  .packs__grid {
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 340px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Que el carrusel llegue hasta los bordes de la pantalla */
    margin-inline: calc(var(--gutter) * -1);
    padding: 1.1rem var(--gutter) 0.75rem; /* arriba: lugar para el cartel "El más elegido" */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .packs__grid::-webkit-scrollbar { display: none; }
  .packs__grid > div { scroll-snap-align: start; }
}
/* Aviso "deslizá" (solo celular) */
.deslizar { display: none; margin-top: 0.5rem; text-align: center; font-family: var(--font-code); font-size: var(--fs-xs); color: var(--gris); }
@media (max-width: 979px) { .deslizar { display: block; } }

/* ==========================================================================
   CARD .pack (naranja)
   ========================================================================== */
.pack {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column;
  padding: 1.4rem 1.4rem 1.25rem;
  background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
/* Brillo que sigue al cursor (posición en --mx / --my, la setea pricing.js) */
.pack::before, .plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 154, 60, 0.12), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
}
.pack:hover::before, .plan:hover::before { opacity: 1; }
.pack__name { font-family: var(--font-titulo); font-weight: 900; font-size: var(--fs-md); letter-spacing: 0.06em; text-transform: uppercase; }
.pack__tagline { color: var(--gris); font-size: var(--fs-sm); }
.pack__price { margin: 0.9rem 0 0.1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
.pack__amount { font-family: var(--font-titulo); font-weight: 900; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); color: var(--naranja); letter-spacing: -0.03em; line-height: 1; }
.pack__period { color: var(--gris); font-weight: 600; font-size: var(--fs-sm); }
.pack__extra { color: var(--blanco); font-size: var(--fs-xs); opacity: 0.85; min-height: 1.5em; }
.pack__list { margin: 0.9rem 0; display: grid; gap: 0.45rem; align-content: start; flex: 1; }
.pack__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.4; }
.pack__list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--naranja); }
.pack__bonus {
  margin-bottom: 0.9rem; padding: 0.55rem 0.8rem; border-radius: var(--r-md);
  border: 1px dashed rgba(255, 107, 44, 0.5); background: rgba(255, 107, 44, 0.06);
  font-size: var(--fs-sm); font-weight: 600;
}
.pack__bonus b { color: var(--naranja); }
.pack .btn { padding-block: 0.8rem; font-size: var(--fs-sm); }

/* Card destacada: borde con degradé cónico que gira */
.pack--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--negro-2), var(--negro-2)) padding-box,
    conic-gradient(from var(--ang), var(--naranja), var(--naranja-2), rgba(255, 107, 44, 0.08), var(--naranja-2), var(--naranja)) border-box;
  animation: angRotate 4s linear infinite;
  box-shadow: 0 24px 60px -30px rgba(255, 107, 44, 0.5);
}
.pack__star { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-size: 0.65rem; }

.packs__notes { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; text-align: center; color: var(--gris); font-size: var(--fs-xs); }
.packs__notes strong { color: var(--blanco); }

/* ==========================================================================
   CARD .plan (páginas web) — cada color se define con la variable --c
   ========================================================================== */
.plan--azul    { --c: #2F6BFF; }
.plan--verde   { --c: #10B981; }
.plan--violeta { --c: #A23BFF; }
.plan--indigo  { --c: #5B5BF0; }

.plan {
  --mx: 50%; --my: 0%;
  /* --c-claro: el mismo color mezclado con blanco, para textos sobre fondo negro */
  --c-claro: color-mix(in srgb, var(--c) 55%, white);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.6rem 1.15rem 1.15rem;
  background: var(--negro-2);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
.plan:hover { border-color: var(--c); }
/* Cartel de arriba, centrado sobre el borde */
.plan__label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 0.3rem 0.85rem; border-radius: var(--r-full); white-space: nowrap;
  background: var(--c); color: #fff;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.plan__top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.plan__name {
  padding: 0.3rem 0.7rem; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c-claro);
  font-size: var(--fs-sm); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
}
.plan__type {
  padding: 0.25rem 0.55rem; border-radius: var(--r-sm); background: var(--linea);
  color: var(--gris); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
/* Precio tachado con una raya roja */
.plan__old {
  margin-top: 0.8rem; color: var(--gris-2);
  font-family: var(--font-titulo); font-weight: 900; font-size: var(--fs-md);
  text-decoration: line-through; text-decoration-color: #FF4D4D; text-decoration-thickness: 2px;
}
.plan__price {
  margin-top: 0.15rem; line-height: 1;
  font-family: var(--font-titulo); font-weight: 900; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); letter-spacing: -0.03em;
}
/* Si el plan no tiene precio tachado, dejamos el mismo aire arriba */
.plan__top + .plan__price { margin-top: 2.2rem; }
.plan__price small { font-size: var(--fs-sm); color: var(--gris); font-weight: 700; margin-left: 0.25rem; letter-spacing: 0; }
.plan__off {
  margin-top: 0.55rem; padding: 0.15rem 0.6rem; border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c-claro);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
}
.plan__subtitle { margin-top: 0.5rem; color: var(--c-claro); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
/* Lista de beneficios con tilde del color de la card */
.plan__list { width: 100%; margin-top: 0.8rem; display: grid; gap: 0.4rem; align-content: start; flex: 1; }
.plan__list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.35; }
.plan__list svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--c-claro); }
.plan__who {
  width: 100%; margin: 0.8rem 0 1rem; padding: 0.6rem 0.75rem; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c) 6%, transparent); border: 1px solid var(--linea);
  font-size: var(--fs-xs); line-height: 1.5; color: var(--gris);
}
.plan__who b { display: block; color: var(--blanco); margin-bottom: 0.2rem; }
.plan__btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: var(--r-full);
  background: var(--c); color: #fff;
  font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase;
  transition: filter 0.3s, transform 0.3s var(--ease-out);
}
.plan__btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.plan__btn svg { width: 16px; height: 16px; }