/* css/servicios.css */
.page-hero { background:linear-gradient(135deg,#12101e 0%,#2a1858 100%); padding:4.5rem 0 3.5rem; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 50%, rgba(127,84,179,.18) 0%, transparent 60%); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; margin-bottom:.75rem; }
.page-hero h1 em { font-style:normal; color:#c4a8e8; }
.page-hero p { color:rgba(255,255,255,.6); max-width:540px; font-size:1.05rem; }

.service-full { display:flex; gap:3rem; align-items:flex-start; padding:3rem 0; border-bottom:1px solid var(--border); }
.service-full:last-child { border-bottom:none; }
.service-full-icon { width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.service-full-content { flex:1; }
.service-full-content h2 { margin-bottom:.75rem; }
.service-full-content > p { margin-bottom:1.5rem; }

.service-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sf-item { display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.sf-item span { color:var(--woo); font-weight:700; flex-shrink:0; }

.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem; }
.plan-card { background:var(--light); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; position:relative; }
.plan-popular { border-color:var(--woo); background:#fff; box-shadow:var(--shadow-md); }
.plan-label { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--woo); color:#fff; font-size:.65rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; text-transform:uppercase; letter-spacing:.06em; }
.plan-name  { font-family:var(--font-head); font-weight:700; font-size:1rem; margin-bottom:.35rem; }
.plan-price { font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--woo); margin-bottom:.85rem; }
.plan-price small { font-size:.75rem; font-weight:400; color:var(--muted); }
.plan-card ul { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.plan-card ul li { font-size:.82rem; color:var(--muted); display:flex; gap:.5rem; }
.plan-card ul li::before { content:'✓'; color:var(--woo); font-weight:700; flex-shrink:0; }

@media(max-width:860px) {
  .service-full { flex-direction:column; gap:1.5rem; }
  .plans-grid { grid-template-columns:1fr; }
  .service-features-grid { grid-template-columns:1fr; }
}

/* ============================================================
   Agregar al FINAL de public_html/css/servicios.css
   ============================================================ */

.plans-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.plan-card-full {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: relative;
}
.plan-card-popular {
  border: 2px solid var(--woo);
  box-shadow: var(--shadow-md);
}
.plan-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--woo);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.plan-name-full {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.plan-price-full {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  color: var(--woo);
  margin-bottom: .5rem;
}
.plan-price-full small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.plan-ideal { font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.plan-features-full { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.plan-features-full li { font-size: .875rem; color: var(--text); display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.plan-features-full li::before { content: '✓'; color: var(--woo); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* FAQ soporte */
.faq-list-soporte { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item-s { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q-s {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; background: #fff; border: none;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  color: var(--dark); cursor: pointer; text-align: left;
  transition: background var(--transition); gap: 1rem;
}
.faq-q-s:hover { background: var(--light); }
.faq-q-s span { color: var(--woo); font-size: 1.3rem; font-weight: 400; flex-shrink: 0; }
.faq-a-s {
  max-height: 0; overflow: hidden;
  padding: 0 1.25rem; font-size: .9rem; color: var(--muted); line-height: 1.7;
  transition: all .3s ease;
}
.faq-item-s.open .faq-a-s { max-height: 200px; padding: .25rem 1.25rem 1.1rem; }

@media (max-width: 860px) {
  .plans-grid-full { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ── SERVICES GRID (compartido con home) ──────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--woo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.service-card:hover { border-color: var(--woo-mid); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.service-name { font-size: 1.1rem; margin-bottom: .5rem; }
.service-desc { font-size: .9rem; line-height: 1.65; margin-bottom: 1rem; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--woo);
  transition: gap var(--transition);
}
.service-card:hover .service-link { gap: .6rem; }

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ── CTA STRIP ────────────────────────────────── */
.cta-strip {
  background: linear-gradient(135deg, var(--woo) 0%, var(--woo-deep) 100%);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-title { color: #fff; margin-bottom: .75rem; }
.cta-desc  { color: rgba(255,255,255,.72); font-size: 1.05rem; margin-bottom: 2.25rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 480px) {
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 340px; justify-content: center; }
}