Get pre-processed data from nested Paragraphs
I'd advice not to loop through the render array content, but go directly for the entity object, in your case $paragraphObject = $variables['paragraph']

Once you have the object, you can always query any data you want, to drill through a referenced/nested entity, use -&gt;entity:
$paragaph-&gt;hostfield-&gt;first()-&gt;entity-&gt;field_whatever-&gt;value

For paragraphs, you can also query upwards:
$parentEntity = $paragraph-&gt;getParentEntity()

The example above works similar for almost all entity templates like node.html.twig or paragraph.html.twig and actually wouldn't need any preprocessing at all, since the entity object is passed to Twig:

Most of the time you can use
entity.fieldname.index.value

E.g. for a simple plain text field:
{{ paragraph.field_whatever.0.value }}

For nested paragraphs or referenced entities you can use:
{{ paragraph.hostfield.0.target_id }} /* only numeric ID of ref.ent. */
{% paragraph.hostfield.0.entity %} /* referenced entity object, can be queried again */
{{ paragraph.hostfield.0.entity.field_whatever.0.value }} /* field value of a nested paragraph */  

For your hero paragraph you could do something like

{% include 'hero.twig' with { title: paragraph.field_title.0.value } %}