/* ==========================================================================
   PixelToCode — Empresas. Los tres planes en cards, la lista de "te conviene si…" con tildes
   que se marcan al bajar, y el resto con las piezas de sitio.css.
   ========================================================================== */

/* ---------- Los tres planes ---------- */

.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 28px;
  border: 1px solid #2c2c2c;
  background: #131313;
}
.plan:hover { border-color: #3d6f78; }
.plan-num {
  font: 800 clamp(56px, 6vw, 96px)/1 var(--titulo);
  color: transparent;
  -webkit-text-stroke: 1.5px #4a4a4a;
  transition: -webkit-text-stroke-color .3s;
}
.plan:hover .plan-num { -webkit-text-stroke-color: var(--cian); }
.plan .titulo { font-size: clamp(32px, 3.4vw, 56px); }
.plan .texto { max-width: none; }
.plan ul { list-style: none; display: grid; gap: 14px; margin-bottom: 8px; }
.plan li { display: flex; gap: 14px; font-size: 18px; line-height: 1.4; color: var(--texto); }
.plan li::before { content: ""; flex: none; width: 14px; height: 2px; margin-top: .7em; background: var(--cian); }
.plan .boton-wa { margin-top: auto; justify-content: center; }

/* ---------- Te conviene si…: cada tilde se marca cuando la frase entra en pantalla ---------- */

.checks { list-style: none; max-width: 1100px; border-top: 1px solid var(--linea); }
.checks li {
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 56px) 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(24px, 4vh, 40px) 0;
  border-bottom: 1px solid var(--linea);
  font: 700 clamp(22px, 2.6vw, 38px)/1.25 var(--cuerpo);
}
.check { width: 100%; height: auto; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke: #3a3a3a; transition: stroke .5s .3s; }
.check path { stroke: var(--cian); stroke-width: 2.6; stroke-dasharray: 24; transition: stroke-dashoffset .6s cubic-bezier(.65, 0, .35, 1) .15s; }
.checks li span { transition: opacity .6s; }
/* Sin JS las tildes ya están marcadas */
.js .check path { stroke-dashoffset: 24; }
.js .checks li span { opacity: .35; }
.checks li.entra .check circle { stroke: var(--cian); }
.js .checks li.entra .check path { stroke-dashoffset: 0; }
.js .checks li.entra span { opacity: 1; }

@media (max-width: 1000px) {
  .planes { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .check path { stroke-dashoffset: 0; }
  .js .checks li span { opacity: 1; }
}