/* =====================================================
   Servicios Pro — servicios-redesign.css
   Scope: .sp-page
   Pixel-fiel al diseño del diseñador (Style Block 2 + 3)
   ===================================================== */

/* --- Tokens ----------------------------------------- */
.sp-page {
  --amber-50:   #FFF9E8;
  --amber-100:  #FDF1CB;
  --amber-200:  #FCE5A0;
  --amber-300:  #F8D26A;
  --amber-400:  #F5BE3F;
  --amber-500:  #E8A91E;
  --amber-600:  #C98A10;
  --cream-50:   #FDFAF1;
  --cream-100:  #FBF4DE;
  --cream-200:  #F8EBC2;
  --ink-900:    #0E0E0E;
  --ink-800:    #1A1A1A;
  --ink-700:    #2A2A2A;
  --ink-600:    #444444;
  --ink-500:    #6B6B6B;
  --ink-400:    #9A9A9A;
  --ink-300:    #C7C7C7;
  --ink-200:    #E5E5E5;
  --ink-100:    #F2F2F2;
  --ink-50:     #FAFAFA;
  --white:      #FFFFFF;
  --border-1:   #E5E5E5;
  --border-amber: #F5BE3F;
  --surface-card: #FFFFFF;
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 6px rgba(14,14,14,.06), 0 1px 2px rgba(14,14,14,.04);
  --shadow-md:  0 10px 24px rgba(14,14,14,.08), 0 2px 6px rgba(14,14,14,.04);
  --shadow-lg:  0 24px 60px rgba(14,14,14,.12), 0 6px 16px rgba(14,14,14,.06);
  --lh-base:    1.5;
  --lh-loose:   1.65;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  background: var(--white);
}

/* --- Container ---------------------------------------- */
.sp-cnt {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- Shared section head ----------------------------- */
.sp-section-head {
  margin-bottom: 40px;
}
.sp-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-500);
}
.sp-section-title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-900);
  text-wrap: balance;
}
.sp-section-lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: var(--lh-loose);
  color: var(--ink-600);
  max-width: 560px;
  text-wrap: pretty;
}

/* --- Shared buttons ---------------------------------- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  border: none;
  padding: 14px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.sp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sp-btn--primary {
  background: var(--amber-400);
  color: var(--ink-900);
  box-shadow: 0 4px 14px rgba(245,190,63,.35);
}
.sp-btn--primary:hover { background: var(--amber-500); color: var(--ink-900); }
.sp-btn--outline {
  background: var(--white);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1.5px var(--ink-900);
}
.sp-btn--outline:hover {
  background: var(--ink-900);
  color: var(--white);
}
.sp-btn--outline-dark {
  background: var(--white);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1.5px var(--ink-900);
}
.sp-btn--outline-dark:hover {
  background: var(--ink-900);
  color: var(--white);
}

/* =====================================================
   1. HERO — fondo negro, editorial
   ===================================================== */
.sp-hero {
  background: var(--ink-900);
  overflow: hidden;
}
.sp-hero .sp-cnt {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}
.sp-hero .sp-eyebrow { color: var(--amber-400); }
.sp-hero-title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.sp-hero-title .hl { color: var(--amber-400); }
.sp-hero-copy p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: var(--lh-loose);
  color: var(--ink-300);
  max-width: 520px;
  text-wrap: pretty;
}
.sp-hero-actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Imagen del hero */
.sp-hero-art {
  position: relative;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.sp-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-hero-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
  background: var(--amber-400);
  color: var(--ink-900);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
}
.sp-hero-badge .badge-n {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sp-hero-badge .badge-t {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 130px;
}

/* =====================================================
   2. ÍNDICE DE SERVICIOS — chips sticky-like
   ===================================================== */
.sp-solnav {
  background: var(--cream-50);
  border-top: 1px solid var(--cream-200);
  border-bottom: 1px solid var(--cream-200);
}
.sp-solnav .sp-cnt {
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.sp-solnav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-right: 6px;
}
.sp-solnav-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sp-solnav-chip:hover { text-decoration: none; border-color: var(--amber-400); box-shadow: var(--shadow-sm); }
.sp-solnav-chip i { color: var(--amber-600); }

/* =====================================================
   3. SERVICIOS EN DETALLE — filas alternadas
   ===================================================== */
.sp-services {
  padding: 12px 0 72px;
  background: var(--white);
}
.sp-solrows { display: flex; flex-direction: column; gap: 0; }

/* Compensa el header fijo del sitio (--ms-header-height) al saltar
   a un ancla (#sp-pricing, #pro-servicios, #pro-contacto, etc.),
   evitando que el título quede tapado bajo la barra fija. */
.sp-solrow,
#pro-servicios,
#pro-contacto,
#sp-form {
  scroll-margin-top: calc(var(--ms-header-height, 166px) + 16px);
}
.sp-solrow {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 52px;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--border-1);
}
.sp-solrow:first-child { border-top: 0; padding-top: 12px; }
.sp-solrow:nth-child(even) .sp-solrow-art { order: -1; }
.sp-solrow-art {
  position: relative;
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.sp-solrow-art img { width: 100%; height: 100%; object-fit: cover; }
.sp-solrow-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--amber-400);
  color: var(--ink-900);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}
.sp-solrow-copy h3 {
  margin: 8px 0 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1.08;
  text-wrap: balance;
}
.sp-solrow-copy > p.lede {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: var(--lh-loose);
  color: var(--ink-600);
  text-wrap: pretty;
}
.sp-solrow-lists {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border-1);
}
.sp-solrow-lists h5 {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.sp-solrow-lists ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sp-solrow-lists li {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-600);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.sp-solrow-lists li i { color: var(--amber-500); flex-shrink: 0; margin-top: 3px; font-size: 12px; }
.sp-solrow-lists .col-ben li i { color: var(--ink-900); }
.sp-solrow-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* =====================================================
   4. FORMULARIO — contacto inline
   ===================================================== */
.sp-form-section {
  padding: 72px 0;
  background: var(--white);
  border-top: 1px solid var(--border-1);
}
.sp-proform-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
}
.sp-proform-copy h2 {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1.08;
  text-wrap: balance;
}
.sp-proform-copy > p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: var(--lh-loose);
  color: var(--ink-600);
  max-width: 420px;
}
.sp-proform-list {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-proform-list li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  color: var(--ink-800);
  font-weight: 500;
}
.sp-proform-list li i {
  font-size: 18px;
  color: var(--amber-600);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Form card */
.sp-form-card {
  background: var(--white);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 30px 28px;
}
.sp-form-card h3 {
  margin: 0 0 20px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.sp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 16px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp-field.full { grid-column: 1 / -1; }
.sp-field label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.sp-field .req { color: var(--amber-600); }
.sp-field input,
.sp-field select,
.sp-field textarea {
  width: 100%;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-900);
  border: 1px solid var(--border-1);
  background: var(--ink-50);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sp-field textarea { min-height: 110px; resize: vertical; line-height: var(--lh-base); }
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
  background: var(--white);
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px var(--amber-100);
}
.sp-field input::placeholder,
.sp-field textarea::placeholder { color: var(--ink-400); }

.sp-form-foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sp-form-note { font-size: 12px; color: var(--ink-500); }
.sp-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  border: none;
  padding: 14px 28px;
  cursor: pointer;
  background: var(--ink-900);
  color: var(--white);
  transition: background 120ms ease, transform 120ms ease;
}
.sp-btn-submit:hover { background: var(--ink-700); transform: translateY(-1px); }
.sp-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.sp-form-success {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--cream-100);
  border: 1px solid var(--amber-300);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 16px;
}

/* Errores de validación del servidor (el form vuelve con #sp-form) */
.sp-form-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 16px;
}
.sp-form-error i { color: #DC2626; flex-shrink: 0; margin-top: 2px; }
.sp-form-error ul { margin: 0; padding: 0; list-style: none; }

/* =====================================================
   RESPONSIVE — igual que el diseñador: full → 1col en 760px
   ===================================================== */
@media (max-width: 760px) {
  .sp-hero .sp-cnt { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; padding-bottom: 48px; }
  .sp-hero-title { font-size: 32px; }
  .sp-hero-copy p { font-size: 15px; }
  .sp-hero-art { height: 240px; order: -1; }
  .sp-solrow { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
  .sp-solrow:nth-child(even) .sp-solrow-art { order: -1; }
  .sp-solrow-art { height: 220px; }
  .sp-solrow-copy h3 { font-size: 24px; }
  .sp-solrow-lists { grid-template-columns: 1fr; gap: 18px; }
  .sp-solnav .sp-cnt { gap: 8px; }
  .sp-proform-grid { grid-template-columns: 1fr; gap: 28px; }
  .sp-proform-copy h2 { font-size: 24px; }
  .sp-form-card { padding: 22px 20px; }
  .sp-form-grid { grid-template-columns: 1fr; }
  .sp-section-title { font-size: 24px; }
}

@media (max-width: 576px) {
  .sp-cnt { padding: 0 16px; }
  .sp-hero-actions { flex-direction: column; }
  .sp-hero-actions .sp-btn { width: 100%; justify-content: center; }
}