/* ==========================================================
   SOPORTE TÉCNICO WEB
   Diseño coordinado con Hosting y Mantenimiento
   Carga después de estilos.css y componentes.css
========================================================== */

.soporte-tecnico-page { overflow: hidden; }


.stec-hero { margin-top: 0; }
.stec-hero .comp-hero__fondo {
   background:
      radial-gradient(circle at 84% 20%, rgba(255,255,255,.34) 0 10%, transparent 10.5%),
      radial-gradient(circle at 76% 74%, rgba(255,214,0,.22) 0 13%, transparent 13.5%),
      linear-gradient(115deg, #fff1f8 0%, #f6eafa 48%, #e8f4ff 100%);
}

.stec-hero .comp-hero__texto { padding-top: 0; padding-bottom: 0; }
.stec-hero .comp-eyebrow { color: #c00087; }

.stec-hero h1 {
   position: relative;
   display: inline-block;
   margin-bottom: 22px;
   background: linear-gradient(90deg, #29274c 0%, #642b78 58%, #c00087 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: #29274c;
}

.stec-hero .comp-hero__texto > p:not(.comp-eyebrow) { color: #514e65; }

.stec-hero .comp-hero__imagen { margin-bottom: -10px; }

.stec-hero .comp-hero__imagen img {
   width: min(430px, 78%);
   max-height: 440px;
   object-fit: contain;
   filter: drop-shadow(0 22px 25px rgba(41,39,76,.12));
}

.punto-bote {
   display: inline-block;
   width: 13px;
   height: 13px;
   margin-left: 7px;
   border-radius: 50%;
   background: #ffd400;
   -webkit-text-fill-color: initial;
   vertical-align: baseline;
   animation: stec-bote 1.8s ease-in-out infinite;
}

@keyframes stec-bote {
   0%, 100% { transform: translateY(0); }
   45% { transform: translateY(-10px); }
   65% { transform: translateY(0); }
   78% { transform: translateY(-4px); }
}


/* ==========================================================
   AYUDA CUANDO LA NECESITAS
========================================================== */

.stec-intro { background: #fff; }

.stec-intro .comp-dos-columnas {
   grid-template-columns: 1.05fr .95fr;
   gap: 70px;
   align-items: center;
}

.stec-intro .comp-dos-columnas__texto h2 {
   max-width: 610px;
}

.stec-intro .comp-dos-columnas__imagen-wrap {
   min-height: 560px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
}

.stec-intro .comp-dos-columnas__imagen img {
   display: block;
   width: auto;
   max-width: 100%;
   max-height: 570px;
   margin: 0 auto;
   object-fit: contain;
}

.stec-check-list { margin-top: 20px; }

.stec-check-list li {
   position: relative;
   margin: 0;
   padding: 7px 0 7px 31px;
}

.stec-check-list li::before {
   content: "✓";
   position: absolute;
   top: 50%;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 19px;
   height: 19px;
   border-radius: 50%;
   background: #c00087;
   color: #fff;
   font-size: 11px;
   font-weight: 800;
   line-height: 1;
   transform: translateY(-50%);
}


/* ==========================================================
   FRASE
========================================================== */

.stec-frase {
   padding: 25px 0 85px;
   background: #fff;
}

.stec-frase .comp-frase__comillas { color: #c00087; }
.stec-frase .comp-frase p { color: #29274c; }


/* ==========================================================
   PROBLEMAS CONCRETOS
========================================================== */

.stec-casos {
   padding-top: 95px;
   padding-bottom: 105px;
   background: #f6f3f7;
}

.stec-casos .comp-section-head {
   max-width: 780px;
   margin: 0 auto 48px;
   text-align: center;
}

.stec-casos .comp-card {
   height: 100%;
   border: 1px solid rgba(41,39,76,.05);
   box-shadow: 0 12px 42px rgba(41,39,76,.07);
}

.stec-casos .comp-card__imagen {
   display: flex;
   align-items: center;
   justify-content: center;
   
}

.stec-casos .comp-card__imagen img {
   display: block;
   width: auto;
   max-width: 90%;
   object-fit: contain;
}


/* ==========================================================
   ACOMPAÑAMIENTO
========================================================== */

.stec-acompanamiento {
   padding-top: 100px;
   padding-bottom: 100px;
   background: #fff;
}

.stec-acompanamiento .comp-dos-columnas { align-items: center; }

.stec-acompanamiento__casos {
   padding: 38px 42px;
   border-left: 4px solid #ffd400;
   border-radius: 0 18px 18px 0;
   background: #f8f9fc;
}

.stec-acompanamiento__titulo {
   margin: 0 0 18px;
   color: #29274c;
   font-size: 1.15rem;
   font-weight: 700;
}

.stec-ejemplos {
   padding: 38px 42px 40px;
   border-radius: 20px;
   background: #f7f6fa;
}

.stec-ejemplos__titulo {
   margin: 0 0 30px 52px;
   color: #29274c;
   font-size: 1.15rem;
   font-weight: 750;
}

.stec-ejemplos__recorrido {
   position: relative;
}

/* Hilo base */
.stec-ejemplos__recorrido::before {
   content: "";
   position: absolute;
   top: 15px;
   bottom: 15px;
   left: 10px;
   width: 3px;
   border-radius: 10px;
   background: linear-gradient(
      180deg,
      #ffd400 0%,
      #ffbf00 25%,
      #ed008c 62%,
      #c00087 100%
   );
   box-shadow:
      0 0 7px rgba(255,212,0,.55),
      0 0 15px rgba(237,0,140,.22);
}

/* Luz que recorre el hilo */
.stec-ejemplos__recorrido::after {
   content: "";
   position: absolute;
   z-index: 4;
   top: 0;
   left: 10px;
   width: 3px;
   height: 42px;
   border-radius: 10px;
   background: #f5ff00;
   box-shadow:
      0 0 4px #f5ff00,
      0 0 9px #eaff00,
      0 0 15px rgba(234,255,0,.75);
   animation: stec-flujo 4s ease-in-out infinite;
}

.stec-ejemplo {
   position: relative;
   z-index: 3;
   display: grid;
   grid-template-columns: 22px 1fr;
   gap: 28px;
   align-items: center;
   min-height: 72px;
}

.stec-ejemplo__punto {
   position: relative;
   z-index: 3;
   display: block;
   width: 13px;
   height: 13px;
   margin-left: 5px;
   box-sizing: border-box;
   border: 3px solid #fff;
   border-radius: 50%;
   background: #c00087;
   box-shadow:
      0 0 0 2px #c00087,
      0 0 10px rgba(192,0,135,.28);
}

.stec-ejemplo:first-child .stec-ejemplo__punto {
   background: #ffd400;
   box-shadow:
      0 0 0 2px #ffd400,
      0 0 12px rgba(255,212,0,.55);
}

.stec-ejemplo__numero {
   display: block;
   margin-bottom: 3px;
   color: #c00087;
   font-size: .68rem;
   font-weight: 800;
   letter-spacing: .08em;
}

.stec-ejemplo p {
   margin: 0;
   color: #383657;
   font-size: .98rem;
   line-height: 1.45;
}

@keyframes stec-flujo {
   0% {
      top: 0;
      opacity: 0;
   }

   8% {
      opacity: 1;
   }

   92% {
      opacity: 1;
   }

   100% {
      top: calc(100% - 42px);
      opacity: 0;
   }
}

@media (max-width: 650px) {
   .stec-ejemplos {
      padding: 30px 24px 32px;
   }

   .stec-ejemplos__titulo {
      margin-left: 44px;
   }

   .stec-ejemplo {
      grid-template-columns: 22px 1fr;
      gap: 20px;
      min-height: 78px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .stec-ejemplos__recorrido::after {
      display: none;
   }
}

/* ==========================================================
   CÓMO FUNCIONA
========================================================== */

.stec-proceso {
   padding-top: 90px;
   padding-bottom: 90px;
   background: #f6f3f7;
}

.stec-proceso .comp-section-head {
   max-width: 720px;
   margin: 0 auto 38px;
   text-align: center;
}

.stec-proceso .comp-info-grid {
   padding: 22px;
   background: #ece6ee;
   border-radius: 18px;
}

.stec-proceso .comp-info-grid article {
   min-height: 180px;
   border: 0;
   background: #fff;
}

.stec-numero {
   display: block;
   margin-bottom: 14px;
   color: #c00087;
   font-size: .8rem;
   font-weight: 800;
   letter-spacing: .08em;
}

.stec-precio {
   max-width: 760px;
   margin: 35px auto 0;
   padding: 17px 25px;
   border-radius: 12px;
   background: #fff;
   text-align: center;
   box-shadow: 0 7px 25px rgba(41,39,76,.05);
}

.stec-precio p { margin: 0; color: #383657; line-height: 1.55; }
.stec-precio strong { color: #c00087; }


/* ==========================================================
   SOPORTE O MANTENIMIENTO
========================================================== */

.stec-mantenimiento {
   padding-top: 100px;
   padding-bottom: 100px;
   background: #fff;
}

.stec-mantenimiento .comp-dos-columnas { align-items: center; }
.stec-mantenimiento .comp-boton { margin-top: 14px; }

.stec-mantenimiento .comp-dos-columnas__imagen-wrap {
   min-height: 420px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.stec-mantenimiento .comp-dos-columnas__imagen img {
   display: block;
   width: 100%;
   max-width: 620px;
   height: auto;
   object-fit: contain;
}


/* ==========================================================
   CTA FINAL
========================================================== */

.stec-final {
   padding: 15px 0 100px;
   background: #fff;
}

.stec-final .comp-cta {
   overflow: hidden;
   background: linear-gradient(110deg, #e9f5ff 0%, #f1ecff 58%, #fff1c7 100%);
}

.stec-final .comp-cta h2 {
   background: linear-gradient(90deg, #29274c 0%, #662d7d 55%, #c00087 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

   .stec-intro .comp-dos-columnas { grid-template-columns: 1fr; gap: 35px; }

   .stec-intro .comp-dos-columnas__imagen-wrap { min-height: 360px; }

   .stec-intro .comp-dos-columnas__imagen img {
      width: 100%;
      max-width: 620px;
      margin: 0 auto;
   }

   .stec-casos,
   .stec-acompanamiento,
   .stec-proceso,
   .stec-mantenimiento { padding-top: 75px; padding-bottom: 75px; }

   .stec-acompanamiento__casos { padding: 30px; }
}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 800px) {

   .stec-hero .comp-hero__fondo {
      background:
         radial-gradient(circle at 82% 22%, rgba(255,255,255,.34) 0 11%, transparent 11.5%),
         linear-gradient(145deg, #fff1f8 0%, #f3eafa 55%, #e8f4ff 100%);
   }

   .stec-hero .comp-hero__texto { padding-top: 55px; }

   .stec-hero .comp-hero__imagen {
      margin-top: 15px;
      margin-bottom: -85px;
   }

   .stec-hero .comp-hero__imagen img {
      width: min(390px, 76%);
      max-height: none;
   }
}

@media (max-width: 650px) {

   .punto-bote {
      width: 10px;
      height: 10px;
      margin-left: 4px;
   }

   .stec-intro .comp-dos-columnas__imagen-wrap { min-height: 285px; }

   .stec-intro .comp-dos-columnas__imagen img {
      width: 108%;
      max-width: none;
      margin-left: -4%;
   }

   .stec-frase { padding: 15px 0 60px; }

   .stec-casos,
   .stec-acompanamiento,
   .stec-proceso,
   .stec-mantenimiento { padding-top: 60px; padding-bottom: 60px; }

   .stec-casos .comp-section-head,
   .stec-proceso .comp-section-head { margin-bottom: 30px; }

   .stec-acompanamiento__casos {
      width: 100%;
      box-sizing: border-box;
      padding: 25px 22px;
   }

   .stec-precio {
      margin-top: 28px;
      padding: 17px 18px;
      text-align: left;
   }

   .stec-mantenimiento .comp-dos-columnas__imagen-wrap { min-height: 300px; }

   .stec-final { padding: 0 0 65px; }
}

@media (prefers-reduced-motion: reduce) {
   .punto-bote { animation: none; }
}