/* ==========================================================================
   RŌNIN — SERVICIOS: composición sobre el sistema visual reutilizable
   ==========================================================================
   Esta hoja NO es un componente reutilizable: es la composición específica
   de servicios.html sobre css/ronin-tokens.css + css/ronin-components.css
   (el header/nav/footer compartidos con Home viven en ronin-components.css,
   ver el bloque "HEADER / NAV / FOOTER — markup REAL compartido").

   Misma estrategia dual-class que Home (ver css/ronin-home.css): las clases
   reales de css/servicios.css y css/styles.css siguen sin guard y gobiernan
   <1024px tal cual; esta hoja solo añade/ajusta el aspecto en escritorio.
   No hay ninguna sección aquí que sustituya el mecanismo HTML (a diferencia
   de Home con su hero/carrusel/acordeón): el estimador, los bloques de
   servicio y los precios conservan su estructura real completa, incluidos
   TODOS los id/name/value/required de #estimatorForm — no se tocan.

   Todo el archivo va envuelto en @media (min-width:1024px), igual que
   css/ronin-components.css y css/ronin-home.css.
   ========================================================================== */

@media (min-width: 1024px) {

/* ── Hero de Servicios ─────────────────────────────────────────────────
   Deliberadamente NO es un clon del hero de Home: una columna editorial
   izquierda (como ya era en el real), sin los 5 paneles parallax (esa
   composición pertenece a la Home). Mismo sistema tipográfico/color. ── */
.ronin-services-hero{ padding-block: 156px 88px; }
.ronin-services-hero-mark{ opacity: .05; }
.ronin-services-hero-inner{ max-width: 760px; }

.ronin-services-pill{
  border-color: var(--ronin-border-hover);
  background: var(--ronin-surface-raised);
  color: var(--ronin-text-muted);
  font-family: var(--ronin-font-mono);
  letter-spacing: .06em;
}

.ronin-services-hero h1{ margin-top: 26px; }
.ronin-services-hero .hero-rule{ background: var(--ronin-red); }

.ronin-services-quicknav{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--ronin-border);
  max-width: 480px;
}
.ronin-services-quicknav a{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--ronin-border);
  border-radius: 0;
  background: none;
  color: var(--ronin-text-muted);
  font-size: 15px;
  font-weight: 700;
  transition: color var(--ronin-duration-fast) var(--ronin-ease), padding-left var(--ronin-duration-fast) var(--ronin-ease);
}
.ronin-services-quicknav a .ronin-mono{ color: var(--ronin-red); }
.ronin-services-quicknav a:hover,
.ronin-services-quicknav a:focus-visible{ color: var(--ronin-text); padding-left: 8px; }

/* ── Bloques de servicio (Presencia / Automatización / IA) ──────────────
   El grid 2x2 con divisores viene de ronin-components.css; aquí solo se
   retipografía la cabecera y las etiquetas para que lean como el resto
   del sistema (mono/gris, con el número grande de acento). ──────────── */
.ronin-sol-block{ border-top-color: var(--ronin-border); }
.ronin-sol-head h2{ font-family: var(--ronin-font-sans); }
.ronin-sol-num{
  font-family: var(--ronin-font-mono);
  color: var(--ronin-red);
  opacity: .55;
}
.ronin-grid-2x2-item{ background: var(--ronin-surface); border-color: var(--ronin-border); }
.ronin-grid-2x2-item p{ color: var(--ronin-text-muted); }
.ronin-grid-2x2-item ul{ display: grid; gap: 10px; }
.ronin-grid-2x2-item li{ color: var(--ronin-text-muted); }
.ronin-grid-2x2-item li::before{ color: var(--ronin-red); }

/* ── Caso relacionado (aside dentro de cada bloque de servicio) ─────────
   Mismo criterio que el Portfolio de Home: hairline fino, fondo neutro,
   sin el degradado/borde rojo "tarjeta anterior". El dorado/rojo de marca
   queda solo donde corresponde (nombre del proyecto en negrita). ──────── */
.ronin-case-teaser{
  border: 1px solid var(--ronin-border);
  border-left: 1px solid var(--ronin-border);
  border-radius: 8px;
  background: var(--ronin-surface);
}
.ronin-case-teaser:hover{ border-color: var(--ronin-border-hover); }
.ronin-case-teaser.is-soon{ opacity: .6; }
.ronin-case-teaser p{ color: var(--ronin-text-muted); }
.ronin-case-teaser strong{ color: var(--ronin-text); }
.ronin-link-secondary.link-arrow:hover,
.ronin-link-secondary.link-arrow:focus-visible{ transform: translateX(3px); }

/* ── Precios orientativos ────────────────────────────────────────────── */
.ronin-pricing-grid{ gap: 1px; background: var(--ronin-border); border: 1px solid var(--ronin-border); border-radius: 10px; overflow: hidden; }
.ronin-price-card{
  border: none;
  border-radius: 0;
  background: var(--ronin-surface);
  padding: 40px 32px;
}
.ronin-price-card.is-featured{
  background: var(--ronin-surface-raised);
  box-shadow: inset 0 2px 0 var(--ronin-red);
}
.ronin-price-card h3{ font-family: var(--ronin-font-sans); font-size: 20px; }
.ronin-price-card .price-card-desc{ color: var(--ronin-text-muted); }
.ronin-price-card .price-range{ border-color: var(--ronin-border); }
.ronin-price-card .price-value{ font-family: var(--ronin-font-sans); color: var(--ronin-text); }
.ronin-price-card .price-unit{ font-family: var(--ronin-font-mono); color: var(--ronin-text-tertiary); }
.ronin-price-card li{ color: var(--ronin-text-muted); }
.ronin-price-card li::before{ content:"→"; color: var(--ronin-text-tertiary); font-weight: 400; }

.ronin-pricing-notes .pricing-disclaimer{ border-color: var(--ronin-red); color: var(--ronin-text); }
.ronin-pricing-notes .pricing-costs strong{ color: var(--ronin-text); }
.ronin-pricing-notes .pricing-costs li{ color: var(--ronin-text-muted); }

/* ── Estimador ────────────────────────────────────────────────────────
   Prioridad funcional: solo se retipografía/recolorea. Ningún id/name/
   value/required se toca aquí ni en el HTML — ver informe de migración. */
.ronin-estimator{
  border: 1px solid var(--ronin-border);
  border-radius: 14px;
  background: var(--ronin-surface);
}
.ronin-estimator .estimator-head h3{ font-family: var(--ronin-font-sans); }
.ronin-estimator .estimator-head p{ color: var(--ronin-text-muted); }

/* Refinamiento (pasada 2): el step deja de ser una "caja dentro de otra
   caja" — sin borde/fondo propio, solo un hairline inferior discreto que
   separa los 5 grupos de preguntas (mismo criterio hairline-list que el
   resto del sistema). Las cajas reales quedan solo en las opciones, un
   único nivel de anidamiento en vez de dos. Más aire vertical vía el gap
   del form (ver .ronin-estimator .estimator-form) + el padding inferior
   de cada step. */
.ronin-estimator .estimator-form{ gap: 6px; }
.ronin-estimator-step{
  border: none;
  border-radius: 0;
  background: none;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--ronin-border);
}
.ronin-estimator-step:last-of-type{ border-bottom: none; padding-bottom: 0; }
.ronin-estimator-step legend{ font-family: var(--ronin-font-sans); color: var(--ronin-text); }
.estimator-step-num.ronin-mono{
  border-radius: 50%;
  background: var(--ronin-surface-raised);
  border-color: var(--ronin-border-hover);
}

/* Opciones: se conserva el <input> nativo (radio/checkbox) por accesibilidad
   — solo se recolorea con accent-color (soportado por navegadores modernos,
   no requiere apariencia custom ni JS) y se retipografía la fila.

   text-transform/letter-spacing: css/styles.css trae una regla legacy
   `label{text-transform:uppercase;letter-spacing:.08em}` pensada para las
   etiquetas cortas del formulario de contacto (leadForm), no para filas de
   respuesta largas. Se sobrescribe aquí, scopeada a .ronin-estimator, sin
   tocar styles.css (afectaría también a leadForm y a cualquier otro <label>
   del sitio) ni el texto real en el HTML. */
.ronin-estimator .estimator-options label{
  border-color: var(--ronin-border);
  border-radius: 8px;
  background: none;
  color: var(--ronin-text-muted);
  font-family: var(--ronin-font-sans);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--ronin-duration-fast) var(--ronin-ease),
              background-color var(--ronin-duration-fast) var(--ronin-ease);
}
.ronin-estimator .estimator-options label:hover{ border-color: var(--ronin-border-hover); background: var(--ronin-surface-raised); }
.ronin-estimator .estimator-options input{ accent-color: var(--ronin-red); }
/* El focus-ring nativo teñido por accent-color no es fiable entre navegadores/
   estados (comprobado inconsistente en pruebas) — se fija explícitamente. */
.ronin-estimator input:focus-visible{
  outline: 2px solid var(--ronin-red);
  outline-offset: 3px;
}
/* Seleccionada: texto ligeramente más claro (no rojo completo, ver informe) */
.ronin-estimator .estimator-options input:checked ~ span{ color: var(--ronin-text); }
.ronin-estimator .estimator-options label:has(input:checked){
  border-color: rgba(207,0,12,.45);
  background: rgba(207,0,12,.06);
}

.estimator-actions .ronin-btn{ background: none; }
.estimator-actions .btn-primary.ronin-btn:hover{ border-color: var(--ronin-red); }

/* Resultado: mismo hairline que el resto del sistema + microanimación de
   aparición suave (no bloquea interacción, respeta reduced-motion abajo). */
.ronin-estimator-result{ border-top-color: var(--ronin-border); background: var(--ronin-surface-elevated); }
.ronin-estimator-result .estimator-type{ font-family: var(--ronin-font-sans); color: var(--ronin-text); }
.ronin-estimator-result .estimator-figure{ font-family: var(--ronin-font-sans); color: var(--ronin-red); }
.ronin-estimator-result .estimator-type-desc{ color: var(--ronin-text-muted); }
.ronin-estimator-result .estimator-notes{ color: var(--ronin-text-tertiary); }
.ronin-estimator-result .estimator-review-list li{ color: var(--ronin-text-muted); }
.ronin-estimator-result .estimator-review-list li::before{ content:"→"; color: var(--ronin-text-tertiary); font-weight: 400; }
.ronin-estimator-result .estimator-review-note{ color: var(--ronin-text-tertiary); }
.ronin-estimator-result .estimator-maint-value{ color: var(--ronin-text); font-family: var(--ronin-font-sans); }
.ronin-estimator-result .estimator-disclaimer{ border-color: var(--ronin-red); color: var(--ronin-text-tertiary); }

@keyframes ronin-estimator-reveal{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
#estimatorResult:not([hidden]){ animation: ronin-estimator-reveal 420ms var(--ronin-ease); }
@media (prefers-reduced-motion: reduce){
  #estimatorResult:not([hidden]){ animation: none; }
}

/* ── CTA final ────────────────────────────────────────────────────────
   Mismo criterio que el bloque de impacto de Home ("regla sencilla"):
   hairline neutro en vez del degradado/borde rojo "tarjeta anterior". ── */
.ronin-services-cta .ronin-quote-card{
  border-color: var(--ronin-border);
  background: var(--ronin-surface);
}
.ronin-quote-card blockquote{ font-family: var(--ronin-font-sans); }
.ronin-quote-card blockquote span{ color: var(--ronin-red); }

} /* /@media (min-width: 1024px) */