/*!
 * CAPTIA Tech — Estilos de las páginas de servicio
 * ---------------------------------------------------------------------------
 * Hoja aparte, cargada DESPUÉS de styles.css y solo por /es/servicios/*.
 *
 * Por qué no va dentro de styles.css: el CSS principal se sirve con
 * Cache-Control immutable a un año y la única forma de invalidarlo es subir el
 * ?v=N a mano EN TODAS las páginas del sitio. Meter aquí unos estilos que solo
 * usan las páginas de servicio obligaría a tocar las 19 cada vez que se ajusta
 * un margen de esta plantilla. Cuando las seis páginas estén cerradas y esto
 * deje de moverse, se funde con styles.css en una sola pasada.
 *
 * Solo define clases nuevas: no pisa nada de styles.css.
 */

:root {
  /* Rojo para marcar el dolor en los casos por sector. Contraste ~6:1 sobre
     blanco, así que vale también para el texto pequeño en mayúsculas. */
  --red: #b3261e;
  --red-soft: rgba(179, 38, 30, 0.055);
  /* Algo más de cuerpo que --red-soft: un subrayado a franja tenue dentro de
     un párrafo necesita verse sin llegar a gritar. */
  --red-mark: rgba(179, 38, 30, 0.1);
}

/* ===========================================================================
   1. Portada partida: texto a la izquierda, diagrama a la derecha
   =========================================================================== */

.hero-split .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.hero-figura {
  margin: 0;
  display: flex;
  justify-content: center;
}

.hero-figura svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

@media (max-width: 960px) {
  .hero-split .container { grid-template-columns: 1fr; }
  .hero-figura svg { max-width: 340px; }
}

/* Por debajo de 720 px el diagrama se retira: en un móvil empujaría el botón
   de contacto fuera de la primera pantalla, y lo que cuenta ya está dicho en
   el párrafo de entrada y dibujado otra vez en «Cómo funciona». */
@media (max-width: 720px) {
  .hero-figura { display: none; }
}

/* ===========================================================================
   2. Casos por sector: dos paneles, hoy → con la automatización
   ===========================================================================
   Mismo lenguaje visual que el diagrama antes/ahora de «Cómo funciona»: la
   página cuenta la misma historia dos veces y conviene que se reconozca. El
   panel de la izquierda agrupa el proceso y su dolor porque son la misma cosa
   —lo que pasa hoy—; el de la derecha, adónde llega.
   =========================================================================== */

.caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.9rem;
  margin: 0 0 1.9rem;
}

.caso-hoy,
.caso-despues {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 1rem 1.1rem 1.1rem;
}

.caso-despues {
  border-color: rgba(252, 150, 49, 0.45);
  background: rgba(252, 150, 49, 0.05);
}

.caso-etiqueta {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.65rem;
}

.caso-despues .caso-etiqueta { color: var(--orange-dark); }

.caso p { margin: 0; }

/* El dolor va DENTRO del párrafo del proceso, no en un bloque aparte: como
   bloque estiraba el panel izquierdo muy por encima del derecho y los dos
   quedaban descompensados. Resaltado a franja, que no añade ni una línea de
   alto. box-decoration-break: clone es lo que mantiene el redondeo y el
   relleno cuando el resaltado parte en dos líneas; sin él, la segunda línea
   sale con la esquina cortada. */
.caso-dolor {
  color: var(--red);
  /* Mismo peso que el resto del parrafo: el rojo y la franja ya destacan de
     sobra, y con negrita encima quedaba media pagina en bold. */
  background: var(--red-mark);
  border-radius: 4px;
  padding: 0.08em 0.28em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Flecha dibujada con bordes en vez de un SVG repetido cinco veces. Es
   decorativa: lo que dice ya lo dicen las dos etiquetas de los paneles. */
.caso-flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
}

.caso-flecha::before {
  content: "";
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--gray);
  border-right: 2px solid var(--gray);
  transform: rotate(45deg);
}

@media (max-width: 720px) {
  .caso { grid-template-columns: 1fr; gap: 0.6rem; }
  .caso-flecha { min-height: 1.4rem; }
  .caso-flecha::before { transform: rotate(135deg); }
}

/* Enlaces laterales al final del artículo. Van después de la FAQ y no antes
   porque quien llega ahí ya ha decidido si este servicio le encaja; ofrecerle
   los vecinos a mitad de lectura solo le saca de la página. */
.servicios-hermanos {
  margin: 2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gray-light);
  font-size: 0.95rem;
  color: var(--gray);
}

/* ===========================================================================
   3. Comparación del flujo: antes y ahora
   =========================================================================== */

.flujo {
  margin: 1.8rem 0 0.5rem;
  display: grid;
  gap: 1rem;
}

.flujo-fila {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.3rem;
  background: var(--bg-soft);
}

.flujo-fila.es-ahora {
  border-color: rgba(252, 150, 49, 0.45);
  background: rgba(252, 150, 49, 0.05);
}

.flujo-etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.85rem;
}

.es-ahora .flujo-etiqueta { color: var(--orange-dark); }

.flujo-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.flujo-pasos li {
  flex: 1 1 8.5rem;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font-size: 0.92rem;
  line-height: 1.35;
  position: relative;
}

.flujo-pasos li strong {
  display: block;
  color: var(--navy);
  font-size: 0.95rem;
}

.flujo-pasos li small {
  display: block;
  margin-top: 0.25rem;
  color: var(--gray);
  font-size: 0.8rem;
}

/* La flecha entre pasos es decorativa: el orden ya lo da la lista numerada,
   así que se pinta con ::after y se oculta a los lectores de pantalla. */
.flujo-pasos li + li::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 50%;
  width: 0.42rem;
  height: 1px;
  background: var(--gray-light);
}

.flujo-pasos li.es-cuello {
  border-color: var(--red);
  background: var(--red-soft);
}

.flujo-pasos li.es-cuello strong { color: var(--red); }

.flujo-pasos li.es-clave { border-color: rgba(252, 150, 49, 0.6); }

.flujo-rama {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--gray);
  padding-left: 0.2rem;
}

.flujo-rama strong { color: var(--navy); font-weight: 600; }

.flujo-nota {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--gray);
}

.flujo-pie {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  color: var(--gray);
  font-style: italic;
}

@media (max-width: 720px) {
  .flujo-pasos { flex-direction: column; }
  .flujo-pasos li + li::before {
    left: 50%;
    top: -0.46rem;
    width: 1px;
    height: 0.46rem;
  }
}

/* ---------------------------------------------------------------------------
   3.1 Recorrido animado: dónde está el caso en cada momento
   ---------------------------------------------------------------------------
   Los dos flujos se recorren A LA VEZ y en la misma escala de tiempo, dentro
   de un ciclo común de 6 s. El de arriba avanza cada 1,6 s y no ha terminado
   cuando el de abajo, que avanza cada 0,5 s, ya ha acabado y espera. Esa
   espera es el argumento de la sección, y verla dice más que leerla.

   Las proporciones son ilustrativas, no una medición: lo que se afirma es que
   uno tarda bastante más que el otro, no cuánto exactamente. El texto que
   acompaña al diagrama lo dice.

   La animación NO toca borde ni fondo, solo un anillo y un desplazamiento de
   3 px. Si los tocara pisaría el rojo del cuello de botella y el naranja del
   paso clave, que es información y no adorno.

   Solo se activa cuando el diagrama entra en pantalla: la clase .flujo-anim la
   pone el script del final de la página. Una animación infinita gastando CPU
   en una pestaña de fondo, en una página que es casi toda texto, no se paga.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .flujo-anim .flujo-pasos li {
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  .flujo-anim .es-antes .flujo-pasos li {
    animation-name: recorrido-antes;
    animation-duration: 6s;
  }
  .flujo-anim .es-antes .flujo-pasos li:nth-child(2) { animation-delay: 1.6s; }
  .flujo-anim .es-antes .flujo-pasos li:nth-child(3) { animation-delay: 3.2s; }

  .flujo-anim .es-ahora .flujo-pasos li {
    animation-name: recorrido-ahora;
    animation-duration: 6s;
  }
  .flujo-anim .es-ahora .flujo-pasos li:nth-child(2) { animation-delay: 0.5s; }
  .flujo-anim .es-ahora .flujo-pasos li:nth-child(3) { animation-delay: 1s; }
  .flujo-anim .es-ahora .flujo-pasos li:nth-child(4) { animation-delay: 1.5s; }
}

/* 1,6 s de 6 s = 26,6 % del ciclo */
@keyframes recorrido-antes {
  0%, 26.6% {
    box-shadow: 0 0 0 2px rgba(26, 51, 96, 0.45), 0 4px 10px rgba(18, 35, 71, 0.1);
    transform: translateY(-3px);
  }
  27.6%, 100% {
    box-shadow: 0 0 0 0 rgba(26, 51, 96, 0), 0 0 0 rgba(18, 35, 71, 0);
    transform: none;
  }
}

/* 0,5 s de 6 s = 8,3 % del ciclo */
@keyframes recorrido-ahora {
  0%, 8.3% {
    box-shadow: 0 0 0 2px rgba(224, 127, 21, 0.75), 0 4px 10px rgba(18, 35, 71, 0.1);
    transform: translateY(-3px);
  }
  9.3%, 100% {
    box-shadow: 0 0 0 0 rgba(224, 127, 21, 0), 0 0 0 rgba(18, 35, 71, 0);
    transform: none;
  }
}