/* Reset local para evitar interferencias de WordPress */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
;
@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');

.process-wheel-container,
.process-wheel-container * {
  box-sizing: border-box;
}

/* Contenedor Fluido: Se adapta al 100% del espacio del padre con un máximo deseado */
.process-wheel-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Tamaño máximo en pantallas grandes */
  aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada perfecta */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  container-type: inline-size; /* Permite usar Container Queries para fuentes relativas */
}

button.step-node {
    line-height: 0;
    font-size: 34px !important;
    font-weight: 300;
}

button.step-node.active{
    font-weight: 600;
}

/* Capa SVG Adaptable */
.wheel-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.ring-visible-path {
  stroke: #15142e;
  stroke-width: 1px;
}

.curved-text-element {
  font-size: 27px;
  font-weight: 400!important;
  letter-spacing: 5px;
  fill: #1e293b;
  font-weight: 500;
  text-transform: uppercase;

}

/* Anillo contenedor de botones */
.circle-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Nodos numéricos con dimensiones escalables (%) */
.step-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.6cqw;  /* Se escala proporcionalmente al ancho del contenedor */
  height: 9.6cqw;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background-color: #ffffff;
      border: 1px solid #15142e;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 2.8cqw, 1rem); /* Tamaño de texto dinámico */
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.step-node.active {
  background-color: #4338ca;
  color: #ffffff;
  border-color: #4338ca;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.4);
}

/* Tarjeta Central Adaptable */
.center-card {
position: relative;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  z-index: 3;
padding: 0 100px;
}

.card-circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.card-image-wrapper {
position: relative;
  height: 50%;
  width: 100%;
  z-index: 2;
}

.card-image-wrapper img {
position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  
  /* VARIABLES AJUSTABLES PARA EL DESBORDE:
     height: 120% hace que la imagen sea 20% más alta que su contenedor.
     transform: translateX(-50%) la mantiene centrada horizontalmente.
  */

  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15)); /* Sombra suave para acentuar el efecto 3D */
}

.card-content {
position: relative;
  height: 50%;
  width: 100%;
  background-color: #c7d2fe;
  padding: 4cqw 5cqw;
  text-align: center;
  z-index: 2;
  border-bottom-left-radius: 155px; /* Radio proporcional al semicírculo inferior */
  border-bottom-right-radius: 155px;
font-family: "Poppins", sans-serif;
}

.step-title {
  margin: 0 0 4px 0;
  font-size: clamp(0.85rem, 3.5cqw, 1.15rem);
  color: #1e1b4b; 
}

#stepDescription {
font-size: 16px;
    padding: 10px 0;
  line-height: 1.3;
  color: #312e81;
  margin: 0; 
}

/* ==========================================================================
   TARJETA CENTRAL RECIRCULARIZADA CON DESBORDE DE IMAGEN
   ========================================================================== */

/* Contenedor principal de la tarjeta central */
.center-card {
  position: relative;
  width: 62%;
  height: 62%;
  /* Mantenemos el contenedor como referencia de posición sin recortar la cabeza */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 3;
}

/* 1. Fondo Circular Recortado (Máscara para los colores de fondo) */
.card-circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Fuerza la forma circular perfecta */
  overflow: hidden;   /* Corta los fondos rectangulares interno */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

/* Fondo de la mitad superior (si tu imagen es PNG transparente) */
.top-half-bg {
  height: 50%;
  width: 100%;
}

/* Fondo de la mitad inferior */
.bottom-half-bg {
  height: 50%;
  width: 100%;
  background-color: #c7d2fe; /* Color azul claro del texto */
}

/* 2. Capa de la Imagen (Por encima del fondo circular) */
.card-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 2; /* Se dibuja sobre el fondo circular */
  pointer-events: none;
}

.card-image-wrapper img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;/* Controla cuánto sobresalen las cabezas por arriba */
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.12));
}

/* 3. Capa de Texto Inferior */
.card-content {
  position: relative;
  width: 100%;
  height: 50%;
  padding: 3cqw 4cqw;
  text-align: center;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Hacemos transparente el fondo del texto porque el color ya lo da .bottom-half-bg */
  background-color: transparent; 
}

.step-title {
  margin: 0 0 4px 0;
  font-size: clamp(0.8rem, 3cqw, 1.05rem);
  color: #1e1b4b;
  font-weight: 600;
}

#stepDescription {
  font-size: 16px;
  padding: 20px 0;
  line-height: 1.25;
  color: #312e81;
  margin: 0;
}

h3.step-title{
    font-size: 35px;
    line-height: 35px;
}

span#stepNumber {
    font-weight: 300;
}

/* Ocultar la línea de tiempo móvil en pantallas de escritorio */
.mobile-timeline-wrapper {
  display: none;
}

/* --- MEDIA QUERY PARA CELULARES --- */
@media (max-width: 768px) {
  


  /* Ocultamos el contenedor del círculo */
  #processWheelContainer {
    display: none !important;
  }

  /* Mostramos el contenedor de la línea de tiempo */
  .mobile-timeline-wrapper {
    display: block;
    position: relative;
    padding-left: 60px; /* Espacio para la línea y el número */
    
  }

  /* La línea vertical de fondo */
  .mobile-timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25px; /* Centrado con los círculos */
    bottom: 0;
    width: 2px;
    background-color: #cbd5e1; /* Color de la línea */
  }

  /* Cada bloque de la línea de tiempo */
  .timeline-item {
    position: relative;
    margin-bottom: 40px;
  }

  /* El círculo blanco con el número */
  .timeline-number-circle {
    position: absolute;
    left: -60px; /* Lo movemos hacia la línea */
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1e293b;
    z-index: 2;
  }

  /* Tarjeta circular (imitando tu diseño) */
  .timeline-card-mobile {/* Color morado suave */
    border-radius: 50%;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* Imagen superior de la tarjeta circular */
  .timeline-img {
    width: 100%;
    height: 50%;
    object-fit: cover;
  }

  /* Área de texto inferior de la tarjeta */
  .timeline-text-area {
    background-color: #c7d2fe;
    height: 50%;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  
    align-items: center;

    top: 50%;
  
  }

  .timeline-text-area h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: bold;
  }

  .timeline-text-area p {
    margin: 0;
    font-size: 12px;
    color: #334155;
    line-height: 1.2;
      max-width: 230px;
  }
}