/* =========================================================================
   URRETA — Tramos
   -------------------------------------------------------------------------
   `.contenido` es una pila de tramos en flujo normal. Cada tramo tiene la
   altura que esa seccion mide en el artboard, asi que si uno crece —porque el
   editor anadio una pregunta al FAQ o el articulo es mas largo— todos los de
   abajo bajan solos.

   Dentro de cada tramo, `.tramo__ancla` esta desplazado hacia arriba
   exactamente el origen del tramo. Los hijos absolutos se resuelven contra el
   ancla, que queda justo donde estaria el borde superior del artboard, de modo
   que las coordenadas del diseno siguen siendo validas sin tocar ni un `top`.

   El ancla mide 0 de alto a proposito: no debe aportar nada al flujo, solo
   servir de sistema de referencia.

   El solape entre tramos es normal. El diseno sangra muchas piezas sobre la
   seccion siguiente, asi que `overflow` se queda visible.
   ========================================================================= */

.contenido {
  position: relative;
}

.tramo {
  position: relative;
  width: 100%;
  height: var(--tramo-alto, auto);
}

.tramo__ancla {
  position: absolute;
  top: calc(-1 * var(--tramo-origen, 0rem));
  left: 0;
  width: 100%;
  height: 0;
}

/* -------------------------------------------------------------------------
   Tramo fluido: lo alto lo decide el contenido, no el artboard. Lo usan las
   secciones donde el numero de elementos o el largo del texto mandan de
   verdad (cuerpo del articulo, lista del FAQ, rejilla de aseguradoras).
   ------------------------------------------------------------------------- */

.tramo--fluido {
  height: auto;
}

.tramo--fluido > .tramo__ancla {
  position: static;
  height: auto;
}

/* -------------------------------------------------------------------------
   Celular: el lienzo ya no es un artboard sino una columna. `mobile.css`
   devuelve casi todo a flujo normal, asi que los tramos tienen que dejar de
   imponer altura y el ancla dejar de desplazar nada.
   ------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .tramo {
    height: auto;
  }

  .tramo__ancla {
    position: static;
    height: auto;
  }
}