/* ================================================================
   SER02.CSS
   Desplegable del servicio 02: Inteligencia artificial para empresas.

   Este archivo está separado para que puedas copiarlo al proyecto
   original. No modifica el body global de la landing.

   Índice:
   01. Variables locales
   02. Contenedor demo y botón desplegable
   03. Panel principal estilo referencia
   04. Columna izquierda: título, opciones y tarjeta
   05. Mapa AI Sales: centro, pasos, líneas y brillos
   06. Responsive
   ================================================================ */

/* ================================================================
   01. VARIABLES LOCALES
   Paleta oscura con azul y verde luminoso.
   ================================================================ */
:root {
  --ser02-bg: #030608;
  --ser02-panel: #071014;
  --ser02-card: rgba(14, 23, 29, 0.82);
  --ser02-card-strong: rgba(19, 34, 42, 0.9);
  --ser02-text: #f7fbff;
  --ser02-muted: rgba(247, 251, 255, 0.68);
  --ser02-soft: rgba(247, 251, 255, 0.1);
  --ser02-line: rgba(105, 214, 255, 0.9);
  --ser02-blue: #4aaeff;
  --ser02-blue-soft: #7ed7ff;
  --ser02-green: #75f2b3;
  --ser02-radius: 34px;
  --ser02-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ser02-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ser02-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ================================================================
   02. CONTENEDOR DEMO Y BOTÓN DESPLEGABLE
   .ser02-demo-shell solo sirve para abrir ser02.html aislado.
   ================================================================ */
.ser02-demo-shell {
  width: min(100% - 32px, 1600px);
  margin: 48px auto;
  font-family: var(--ser02-body);
}

.ser02-details {
  display: block;
}

.ser02-summary {
  width: fit-content;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 0 28px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    #202126;
  color: white;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.22);
  transition: transform 220ms var(--ser02-ease), box-shadow 220ms var(--ser02-ease);
}

.ser02-summary::-webkit-details-marker {
  display: none;
}

.ser02-summary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(73, 168, 255, 0.24),
    0 18px 44px rgba(0, 0, 0, 0.28);
}

.ser02-summary i {
  width: 28px;
  height: 28px;
  position: relative;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.86);
  color: white;
}

.ser02-summary i::before,
.ser02-summary i::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform: translateY(-50%);
}

.ser02-summary i::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 180ms var(--ser02-ease);
}

.ser02-details[open] .ser02-summary i::after {
  transform: translateY(-50%) rotate(0deg);
}

/* ================================================================
   03. PANEL PRINCIPAL ESTILO REFERENCIA
   Marco oscuro grande con brillo perimetral.
   ================================================================ */
.ser02-ai-panel {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(340px, 0.38fr) minmax(680px, 1fr);
  gap: clamp(34px, 5vw, 84px);
  padding: clamp(42px, 4.5vw, 66px);
  border: 1px solid rgba(91, 176, 255, 0.28);
  border-radius: var(--ser02-radius);
  background:
    radial-gradient(circle at 67% 50%, rgba(75, 178, 255, 0.18), transparent 35%),
    radial-gradient(circle at 84% 26%, rgba(111, 246, 181, 0.12), transparent 28%),
    linear-gradient(135deg, #020405 0%, #05090c 42%, #0b1118 100%);
  color: var(--ser02-text);
  font-family: var(--ser02-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 100px rgba(0, 0, 0, 0.38);
  isolation: isolate;
}

.ser02-ai-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(111, 246, 181, 0.2), transparent 20% 76%, rgba(74, 174, 255, 0.22)),
    radial-gradient(circle at 50% 100%, rgba(74, 174, 255, 0.12), transparent 48%);
  pointer-events: none;
}

.ser02-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ================================================================
   04. COLUMNA IZQUIERDA
   Título, selector de opción y tarjeta descriptiva.
   ================================================================ */
.ser02-copy {
  position: relative;
  z-index: 5;
  align-self: start;
}

.ser02-kicker {
  margin: 0 0 14px;
  color: var(--ser02-green);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.ser02-copy h2 {
  margin: 0;
  color: var(--ser02-text);
  font-family: var(--ser02-font);
  font-size: clamp(58px, 6.5vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-shadow: 0 10px 26px rgba(255, 255, 255, 0.12);
}

.ser02-lead {
  max-width: 460px;
  margin: 28px 0 0;
  color: var(--ser02-muted);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.45;
}

.ser02-pill-stack {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 42px);
}

.ser02-pill {
  min-height: 62px;
  width: min(100%, 430px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 20px;
  font-weight: 780;
  transition: transform 220ms var(--ser02-ease), border-color 220ms var(--ser02-ease), box-shadow 220ms var(--ser02-ease);
}

.ser02-pill:hover {
  transform: translateX(5px);
  border-color: rgba(126, 215, 255, 0.34);
}

.ser02-pill-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ser02-green);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#ser02-tab-sales:checked ~ .ser02-copy .ser02-pill-sales,
#ser02-tab-sales-index:checked ~ .ser02-copy .ser02-pill-sales {
  color: white;
  border-color: rgba(126, 215, 255, 0.72);
  background:
    radial-gradient(circle at 12% 50%, rgba(117, 242, 179, 0.22), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(14, 25, 34, 0.92);
  box-shadow:
    0 0 0 1px rgba(117, 242, 179, 0.2),
    0 0 32px rgba(74, 174, 255, 0.45);
}

#ser02-tab-support:checked ~ .ser02-copy .ser02-pill-support,
#ser02-tab-support-index:checked ~ .ser02-copy .ser02-pill-support,
#ser02-tab-connect:checked ~ .ser02-copy .ser02-pill-connect,
#ser02-tab-connect-index:checked ~ .ser02-copy .ser02-pill-connect {
  color: white;
  border-color: rgba(126, 215, 255, 0.72);
  background:
    radial-gradient(circle at 12% 50%, rgba(117, 242, 179, 0.22), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(14, 25, 34, 0.92);
  box-shadow:
    0 0 0 1px rgba(117, 242, 179, 0.2),
    0 0 32px rgba(74, 174, 255, 0.45);
}

/* Estado textual del panel: solo se ve el titulo, lead y tarjeta
   correspondientes a la opcion seleccionada. */
.ser02-title,
.ser02-lead-stack .ser02-lead,
.ser02-info-stack .ser02-info-card {
  display: none;
}

#ser02-tab-sales:checked ~ .ser02-copy .ser02-title-sales,
#ser02-tab-sales-index:checked ~ .ser02-copy .ser02-title-sales,
#ser02-tab-support:checked ~ .ser02-copy .ser02-title-support,
#ser02-tab-support-index:checked ~ .ser02-copy .ser02-title-support,
#ser02-tab-connect:checked ~ .ser02-copy .ser02-title-connect,
#ser02-tab-connect-index:checked ~ .ser02-copy .ser02-title-connect {
  display: block;
}

#ser02-tab-sales:checked ~ .ser02-copy .ser02-lead-sales,
#ser02-tab-sales-index:checked ~ .ser02-copy .ser02-lead-sales,
#ser02-tab-support:checked ~ .ser02-copy .ser02-lead-support,
#ser02-tab-support-index:checked ~ .ser02-copy .ser02-lead-support,
#ser02-tab-connect:checked ~ .ser02-copy .ser02-lead-connect,
#ser02-tab-connect-index:checked ~ .ser02-copy .ser02-lead-connect {
  display: block;
}

#ser02-tab-sales:checked ~ .ser02-copy .ser02-info-sales,
#ser02-tab-sales-index:checked ~ .ser02-copy .ser02-info-sales,
#ser02-tab-support:checked ~ .ser02-copy .ser02-info-support,
#ser02-tab-support-index:checked ~ .ser02-copy .ser02-info-support,
#ser02-tab-connect:checked ~ .ser02-copy .ser02-info-connect,
#ser02-tab-connect-index:checked ~ .ser02-copy .ser02-info-connect {
  display: block;
}

.ser02-info-card {
  width: min(100%, 470px);
  margin-top: 22px;
  padding: 28px 30px 30px;
  border: 1px solid rgba(126, 215, 255, 0.42);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(117, 242, 179, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 15, 22, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 38px rgba(74, 174, 255, 0.22);
}

.ser02-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 16px;
  color: white;
  font-size: 26px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.75), transparent 22%),
    linear-gradient(135deg, #6ef3b7, #3aa6ff 62%, #4765ff);
  box-shadow: 0 0 34px rgba(74, 174, 255, 0.55);
}

.ser02-info-card h3 {
  margin: 0;
  color: white;
  font-size: clamp(25px, 2.35vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.ser02-info-card p {
  margin: 22px 0 0;
  color: var(--ser02-muted);
  font-size: 18px;
  line-height: 1.48;
}

.ser02-info-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ser02-info-card li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.ser02-info-card li:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-left: 18px;
  border-radius: 50%;
  background: var(--ser02-green);
  box-shadow: 0 0 14px rgba(117, 242, 179, 0.9);
}

.ser02-example {
  margin-top: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
}

.ser02-example strong,
.ser02-example span,
.ser02-result {
  display: block;
}

.ser02-example strong {
  color: white;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ser02-example span,
.ser02-result {
  margin-top: 8px;
  color: var(--ser02-muted);
  font-size: 15px;
  line-height: 1.45;
}

.ser02-result {
  color: rgba(255, 255, 255, 0.88);
}

/* ================================================================
   05A. MAPAS SELECCIONABLES
   Mantiene las tres opciones disponibles y cambia solo el mapa activo.
   ================================================================ */
.ser02-visual-stack {
  position: relative;
  align-self: center;
}

.ser02-map {
  position: relative;
  min-height: 650px;
  display: none;
}

#ser02-tab-sales:checked ~ .ser02-visual-stack .ser02-map-sales,
#ser02-tab-sales-index:checked ~ .ser02-visual-stack .ser02-map-sales,
#ser02-tab-support:checked ~ .ser02-visual-stack .ser02-map-support,
#ser02-tab-support-index:checked ~ .ser02-visual-stack .ser02-map-support,
#ser02-tab-connect:checked ~ .ser02-visual-stack .ser02-map-connect,
#ser02-tab-connect-index:checked ~ .ser02-visual-stack .ser02-map-connect {
  display: block;
}

.ser02-map::before {
  content: "";
  position: absolute;
  inset: 72px 64px 72px 52px;
  border: 3px solid rgba(101, 215, 255, 0.78);
  border-left-color: rgba(117, 242, 179, 0.78);
  border-bottom-color: rgba(117, 242, 179, 0.78);
  border-radius: 130px;
  filter:
    drop-shadow(0 0 7px rgba(126, 215, 255, 0.8))
    drop-shadow(0 0 24px rgba(74, 174, 255, 0.42));
  opacity: 0.9;
  animation: ser02CircuitGlow 2.6s ease-in-out infinite;
}

.ser02-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74, 174, 255, 0.23), transparent 64%);
  filter: blur(4px);
}

.ser02-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: clamp(240px, 22vw, 330px);
  min-height: clamp(210px, 18vw, 270px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(126, 215, 255, 0.78);
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(38, 52, 63, 0.98), rgba(5, 9, 12, 0.96) 76%);
  box-shadow:
    0 0 0 7px rgba(126, 215, 255, 0.08),
    0 0 42px rgba(74, 174, 255, 0.62),
    0 0 60px rgba(117, 242, 179, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.ser02-core strong {
  color: white;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.055em;
}

/* ================================================================
   05. MAPA AI SALES
   Circuito horizontal con tarjetas conectadas alrededor del centro.
   ================================================================ */
.ser02-sales-map {
  position: relative;
  min-height: 650px;
  align-self: center;
}

.ser02-sales-map::before {
  content: "";
  position: absolute;
  inset: 72px 64px 72px 52px;
  border: 3px solid rgba(101, 215, 255, 0.78);
  border-left-color: rgba(117, 242, 179, 0.78);
  border-bottom-color: rgba(117, 242, 179, 0.78);
  border-radius: 130px;
  filter:
    drop-shadow(0 0 7px rgba(126, 215, 255, 0.8))
    drop-shadow(0 0 24px rgba(74, 174, 255, 0.42));
  opacity: 0.9;
  animation: ser02CircuitGlow 2.6s ease-in-out infinite;
}

.ser02-sales-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74, 174, 255, 0.23), transparent 64%);
  filter: blur(4px);
}

.ser02-sales-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: clamp(240px, 22vw, 330px);
  min-height: clamp(210px, 18vw, 270px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(126, 215, 255, 0.78);
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(38, 52, 63, 0.98), rgba(5, 9, 12, 0.96) 76%);
  box-shadow:
    0 0 0 7px rgba(126, 215, 255, 0.08),
    0 0 42px rgba(74, 174, 255, 0.62),
    0 0 60px rgba(117, 242, 179, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.ser02-core-image-slot {
  width: clamp(86px, 7vw, 120px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(117, 242, 179, 0.64);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 12%, rgba(117, 242, 179, 0.34), transparent 54%),
    linear-gradient(135deg, rgba(117, 242, 179, 0.16), rgba(74, 174, 255, 0.22));
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ser02-core-image-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ser02-sales-core strong {
  color: white;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.ser02-flow-card {
  position: absolute;
  z-index: 5;
  width: clamp(230px, 19vw, 330px);
  min-height: 106px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(126, 215, 255, 0.34);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 20%, rgba(117, 242, 179, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(9, 16, 22, 0.88);
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(255, 255, 255, 0.035),
    0 0 28px rgba(74, 174, 255, 0.22);
  animation: ser02Float 5.4s var(--ser02-ease) infinite;
}

.ser02-flow-card::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 7px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--ser02-blue-soft), transparent);
  box-shadow: 0 0 16px rgba(126, 215, 255, 0.86);
  animation: ser02LineRun 2.2s linear infinite;
}

.ser02-flow-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(117, 242, 179, 0.4);
  border-radius: 50%;
  color: var(--ser02-green);
  font-size: 31px;
  background: rgba(5, 12, 14, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 26px rgba(117, 242, 179, 0.28);
}

.ser02-flow-card strong {
  display: block;
  color: white;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.08;
}

.ser02-flow-card small {
  display: block;
  margin-top: 7px;
  color: var(--ser02-muted);
  font-size: 14px;
  line-height: 1.35;
}

.card-question { left: 49%; top: 0; transform: translateX(-50%); animation-delay: -0.2s; }
.card-understand { right: 0; top: 25%; animation-delay: -0.8s; }
.card-search { right: 2%; top: 58%; animation-delay: -1.4s; }
.card-recommend { left: 48%; bottom: 0; transform: translateX(-50%); animation-delay: -2s; }
.card-quote { left: 0; top: 58%; animation-delay: -2.6s; }
.card-transfer { left: 0; top: 28%; animation-delay: -3.2s; }

@keyframes ser02CircuitGlow {
  0%, 100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 6px rgba(126, 215, 255, 0.65));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(126, 215, 255, 0.95))
      drop-shadow(0 0 28px rgba(117, 242, 179, 0.45));
  }
}

@keyframes ser02Float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

@keyframes ser02LineRun {
  0%, 100% {
    opacity: 0.45;
    transform: scaleX(0.56);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ================================================================
   06. RESPONSIVE
   En pantallas pequeñas el circuito pasa a lista vertical.
   ================================================================ */
@media (max-width: 1180px) {
  .ser02-ai-panel {
    grid-template-columns: 1fr;
  }

  .ser02-copy {
    max-width: 760px;
  }

  .ser02-sales-map,
  .ser02-map {
    min-height: 700px;
  }
}

@media (max-width: 760px) {
  .ser02-demo-shell {
    width: min(100% - 20px, 1600px);
    margin: 24px auto;
  }

  .ser02-ai-panel {
    min-height: auto;
    padding: 26px 16px;
    border-radius: 26px;
  }

  .ser02-copy h2 {
    font-size: clamp(48px, 18vw, 76px);
  }

  .ser02-lead {
    font-size: 17px;
  }

  .ser02-pill {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
  }

  .ser02-info-card {
    width: 100%;
    padding: 24px 20px;
  }

  .ser02-sales-map,
  .ser02-map {
    min-height: auto;
    gap: 14px;
  }

  #ser02-tab-sales:checked ~ .ser02-visual-stack .ser02-map-sales,
  #ser02-tab-sales-index:checked ~ .ser02-visual-stack .ser02-map-sales,
  #ser02-tab-support:checked ~ .ser02-visual-stack .ser02-map-support,
  #ser02-tab-support-index:checked ~ .ser02-visual-stack .ser02-map-support,
  #ser02-tab-connect:checked ~ .ser02-visual-stack .ser02-map-connect,
  #ser02-tab-connect-index:checked ~ .ser02-visual-stack .ser02-map-connect {
    display: grid;
  }

  .ser02-sales-map::before,
  .ser02-sales-map::after,
  .ser02-map::before,
  .ser02-map::after {
    display: none;
  }

  .ser02-sales-core,
  .ser02-core,
  .ser02-flow-card {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    animation: none;
  }

  .ser02-sales-core,
  .ser02-core {
    min-height: 210px;
    border-radius: 30px;
  }

  .ser02-flow-card {
    grid-template-columns: 52px 1fr;
    min-height: 94px;
    border-radius: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ser02-flow-card,
  .ser02-flow-card::after,
  .ser02-sales-map::before,
  .ser02-map::before,
  .ser02-summary,
  .ser02-pill {
    animation: none;
    transition: none;
  }
}

/* ================================================================
   07. ACOPLAMIENTO CON INDEX.HTML
   Conserva el borde rojo neón solicitado y evita conflictos con
   la cuadrícula de la tarjeta de servicio principal.
   ================================================================ */
.service-dark .ser02-summary {
  border-color: #45c3ed;
  box-shadow:
    0 0 8px rgba(69, 195, 237, 0.3),
    inset 0 0 7px rgba(69, 195, 237, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.22);
}

.service-dark .ser02-summary:hover {
  border-color: #7edbfa;
  box-shadow:
    0 0 10px rgba(69, 195, 237, 0.46),
    0 0 20px rgba(69, 195, 237, 0.14),
    inset 0 0 8px rgba(69, 195, 237, 0.1);
}

@media (min-width: 1180px) {
  .service-dark .ser02-details {
    grid-column: 1 / -1;
  }
}