/**
 * Seccion "Como trabajamos": estado hover de cada paso.
 *
 * La seccion esta hecha con widgets nativos de Elementor (heading, divider,
 * text-editor) y ninguno de ellos tiene controles de hover, asi que el estado
 * se resuelve aqui. Los colores por defecto se siguen editando desde Elementor:
 * estas reglas solo describen el hover.
 *
 * Sobre la especificidad: Elementor escribe el color de cada elemento como
 *   .elementor-53 .elementor-element.elementor-element-XXX .elementor-heading-title
 * que es (0,4,0). Las reglas de estado llevan .elementor-element ademas del
 * prefijo body: (0,5,1) contra (0,4,0), asi ganan por especificidad y no por
 * orden de carga. Con un empate el resultado dependia de que hoja cargara
 * ultima y el estado se aplicaba de forma intermitente.
 *
 * El ancho por defecto de la raya (40px) NO esta aqui: vive en el widget
 * divider, editable desde Elementor. Aqui solo crece al 100% en hover.
 */

.scala-paso .elementor-heading-title,
.scala-paso .elementor-widget-text-editor {
  transition: color 1.2s ease;
}

/* Elementor pinta la linea con border-block-start, y un borde no admite
   puntas redondeadas. Se convierte en una caja propia (alto + fondo) para
   poder aplicarle border-radius, conservando los valores que el widget expone
   en --divider-border-width y --divider-color (siguen editables en Elementor).
   Por lo mismo se anima background-color y no border-color. */
.scala-paso .elementor-divider-separator {
  border-block-start: 0;
  height: var(--divider-border-width, 2px);
  background-color: var(--divider-color);
  border-radius: 99px;
  transition: width 3s cubic-bezier(.33, 1, .68, 1), background-color 1.2s ease;
}

body .scala-paso:hover .elementor-element.elementor-widget-heading .elementor-heading-title,
body .scala-paso:focus-within .elementor-element.elementor-widget-heading .elementor-heading-title,
body .scala-paso:hover .elementor-element.elementor-widget-text-editor,
body .scala-paso:focus-within .elementor-element.elementor-widget-text-editor {
  color: var(--e-global-color-borgonas_darker, #250D1E);
}

body .scala-paso:hover .elementor-element.elementor-widget-divider,
body .scala-paso:focus-within .elementor-element.elementor-widget-divider {
  --divider-color: var(--e-global-color-borgonas_darker, #250D1E);
}

/* Crece de izquierda a derecha: el widget ya ocupa el ancho restante de la
   columna (flex-grow), asi que el 100% es ese ancho y la raya se extiende
   desde su borde izquierdo. */
body .scala-paso:hover .elementor-element.elementor-widget-divider .elementor-divider-separator,
body .scala-paso:focus-within .elementor-element.elementor-widget-divider .elementor-divider-separator {
  width: 100%;
}

/* Los titulos de paso tienen una o dos lineas, y eso corria la lista hacia
   arriba en unos pasos y no en otros. Se reserva el alto de dos lineas para que
   las listas arranquen a la misma altura. Solo de tablet hacia arriba: en movil
   los pasos van apilados y reservar alto solo deja huecos.
   2.4em = 2 lineas con el interlineado de 1.2em del global h3. */
@media (min-width: 768px) {
  .scala-paso > .elementor-widget-heading .elementor-heading-title {
    min-height: 2.4em;
  }
}

/* ---------- movil ---------- */

@media (max-width: 767px) {
  /* El intro deja de ir centrado. */
  /* .e-con suma especificidad: Elementor declara align-items:var(--align-items)
     sobre esa clase y con un empate decidiria el orden de carga. */
  .e-con.scala-proceso__intro {
    align-items: flex-start;
    text-align: left;
  }

  .scala-proceso__titulo .elementor-heading-title {
    text-align: left;
  }

  /* En movil el antetitulo lleva un solo guion, el de la izquierda.
     Los guiones son widgets divider (ver 42-guiones-como-divisor.php), asi que
     el selector ya no puede apuntar a un heading. */
  .scala-proceso__antetitulo > :last-child {
    display: none;
  }

  /* Cada paso pasa a dos columnas: el numero a la izquierda, el titulo a su
     derecha y la lista debajo, alineada con el titulo y no con el numero.
     Hace falta grid y no flex porque el titulo y la lista son hermanos del
     numero en el DOM, no hijos de un mismo contenedor.
     .e-con suma especificidad: Elementor declara display:var(--display) sobre
     esa clase y con un empate decidiria el orden de carga. */
  .e-con.scala-paso {
    display: grid;
    /* La columna la marca el digito: la raya es vertical y mide 2px. */
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
    /* stretch para que la cabecera ocupe todo el alto del paso y la raya pueda
       bajar; el titulo y la lista se alinean arriba a mano. */
    align-items: stretch;
  }

  /* La cabecera vuelve a columna: el numero y su raya debajo. En escritorio
     van uno al lado del otro (ver 35-proceso-linea-al-lado.php). */
  /* .e-flex hace falta: Elementor declara flex-direction en .e-con.e-flex,
     que empata con .scala-paso > .e-con y dejaba la cabecera en fila. */
  .scala-paso > .e-con.e-flex {
    /* Ocupa las dos filas y se estira: asi la raya puede bajar por el costado
       a lo largo de todo el paso. */
    /* span 2 y no 1 / -1: las filas son implicitas, y en un grid sin
       grid-template-rows el -1 apunta al final del grid explicito (que no
       existe), asi que la cabecera abarcaba una sola fila. */
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .scala-paso > .elementor-widget-heading {
    grid-area: 1 / 2;
    align-self: start;
  }

  .scala-paso > .elementor-widget-text-editor {
    grid-area: 2 / 2;
    align-self: start;
  }

  /* La raya, ahora debajo del numero.
     Dos cosas se rompian: el widget es un bloque dentro de un flex column con
     align-items:flex-start, asi que se encogia a 0 de ancho; y el separador,
     que es un flex item con width:40px, se encogia con el hasta desaparecer.
     Se le da el ancho de la columna y se le quita el encogimiento.
     El margen inferior lo puso 35-proceso-linea-al-lado.php para apoyar la
     raya en la base del numero; debajo del numero sobra.
     Las clases extra (.e-con, .elementor-element) son para ganar por
     especificidad y no por orden de carga: esta hoja se encola antes que el
     CSS del post, asi que en un empate gana Elementor. */
  /* La raya baja por el costado: 2px de ancho y todo el alto que sobra bajo
     el numero. En escritorio es horizontal (ver 35-proceso-linea-al-lado.php).
     Las clases extra son para ganar por especificidad: esta hoja se encola
     antes que el CSS del post, asi que en un empate gana Elementor. */
  .e-con.scala-paso .elementor-element.scala-paso__linea {
    flex: 1 1 auto;
    width: 2px;
    min-height: 24px;
    margin-bottom: 0;
    --divider-color: var(--e-global-color-borgonas_darker, #250D1E);
  }

  .e-con.scala-paso .elementor-element.scala-paso__linea .elementor-divider {
    height: 100%;
  }

  .e-con.scala-paso .elementor-element.scala-paso__linea .elementor-divider-separator {
    width: 2px;
    height: 100%;
    flex-shrink: 0;
  }

  /* Sin hover en tactil, todo el paso va oscuro por defecto: numero, titulo
     y descripcion. */
  .e-con.scala-paso .elementor-element.elementor-widget-heading .elementor-heading-title,
  .e-con.scala-paso .elementor-element.elementor-widget-text-editor {
    color: var(--e-global-color-borgonas_darker, #250D1E);
  }

  /* Los bullets se alinean con el titulo, no mas adentro. */
  .scala-paso > .elementor-widget-text-editor ul {
    margin: 0;
    padding-left: 1.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scala-paso .elementor-heading-title,
  .scala-paso .elementor-widget-text-editor,
  .scala-paso .elementor-divider-separator {
    transition: none;
  }
}

/**
 * El header es sticky y flota sobre el contenido, asi que al saltar al ancla
 * desde el boton "Como trabajamos" el antetitulo quedaba tapado. El
 * scroll-margin reserva ese alto en el destino del salto.
 *
 * En vh y no en px: el salto deja la seccion arrancando a un cuarto de
 * pantalla, o sea mas al centro que pegada al borde superior, y se adapta al
 * alto de cada monitor. El minimo en px cubre las pantallas bajas, donde 25vh
 * no alcanza a despejar el header.
 */
#como-trabajamos {
  scroll-margin-top: max(140px, 25vh);
}