PageSourceSearch

https://diversidad-inclusion-staging.netlify.app/

html diversidad-inclusion-staging.netlify.app collected 2026-10-03 10:39:23 UTC 61,691 bytes, 1,558 lines download raw bytes

1<!DOCTYPE html>
2<html
3  data-wf-page="60a4e25782d224061170133d"
4  data-wf-site="607ea7a2d063f1935e52615d"
5  lang="es"
6>
7  <head>
8    <meta charset="utf-8" />
9<!-- This site is hosted on Netlify. Anyone can build and deploy a site
10     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=81023a43-085c-4abb-af65-ca67127e3b2a
11     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
12    <title>Las Manos | Diversidad e inclusión - Iberdrola</title>
13    <meta
14      content="Contemplad las manos,‍ cómo prometen, conjuran, apelan, hacen señas, admiran, confiesan, instruyen y las que no,‍ con una variación y multiplicación de variaciones,‍ dan envidia a la lengua."
15      name="description"
16    />
17    <meta
18      content="Las Manos | Diversidad e inclusión - Iberdrola"
19      property="og:title"
20    />
21    <meta
22      content="Contemplad las manos,‍ cómo prometen, conjuran, apelan, hacen señas, admiran, confiesan, instruyen y las que no,‍ con una variación y multiplicación de variaciones,‍ dan envidia a la lengua."
23      property="og:description"
24    />
25    <meta content="images/intro-loading.jpg" property="og:image" />
26    <meta
27      content="Las Manos | Diversidad e inclusión - Iberdrola"
28      property="twitter:title"
29    />
30    <meta
31      content="Contemplad las manos,‍ cómo prometen, conjuran, apelan, hacen señas, admiran, confiesan, instruyen y las que no,‍ con una variación y multiplicación de variaciones,‍ dan envidia a la lengua."
32      property="twitter:description"
33    />
34    <meta content="images/intro-loading.jpg" property="twitter:image" />
35    <meta property="og:type" content="website" />
36    <meta content="summary_large_image" name="twitter:card" />
37    <meta content="width=device-width, initial-scale=1" name="viewport" />
38    <link href="css/normalize.css" rel="stylesheet" type="text/css" />
39    <link href="css/components.css" rel="stylesheet" type="text/css" />
40    <link href="css/las-manos.css" rel="stylesheet" type="text/css" />
41    <!-- [if lt IE 9]>
41<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
41<![endif] -->
42    
42<script type="text/javascript">
43      !(function (o, c) {
44        var n = c.documentElement,
45          t = " w-mod-";
46        (n.className += t + "js"),
47          ("ontouchstart" in o ||
48            (o.DocumentTouch && c instanceof DocumentTouch)) &&
49            (n.className += t + "touch");
50      })(window, document);
51    </script>
51
52    <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
53    <link href="images/webclip.png" rel="apple-touch-icon" />
54    <link
55      rel="alternate"
56      hreflang="es"
57      href="https://diversidadeinclusion.iberdrola.com"
58    />
59    <link
60      rel="alternate"
61      hreflang="en"
62      href="https://diversidadeinclusion.iberdrola.com/en/"
63    />
64    <style>
65      body {
66        overscroll-behavior: none;
67      }
68      .lock-scroll {
69        position: fixed;
70      }
71      .h-vhidden {
72        visibility: hidden;
73      }
74      .letter {
75        opacity: 0;
76        display: inline-block;
77      }
78      .o-loader,
79      .o-vignette,
80      .color-overlay,
81      .l-container.cifra {
82        pointer-events: none;
83      }
84      .facts__heading {
85        pointer-events: auto;
86      }
87      .spansword {
88        white-space: nowrap;
89      }
90    </style>
91  </head>
92  <body class="lock-scroll">
93    <div class="loading-intro">
94      <div class="l-loader-content">
95        <h1 class="ml13 span-this">
96          <span role="text" class="text-span">Las manos</span>
97        </h1>
98        <div class="l-loading-intro-elements__wrap">
99          <div
100            aria-valuetext="Cargando..."
101            role="progressbar"
102            aria-relevant="removals"
103            data-w-id="edf692bd-55be-de0f-555a-a1a967a774c1"
104            style="opacity: 1"
105            class="l-loading-text__wrap"
106          >
107            <div
108              data-w-id="54cd7fdb-772b-24a4-2a94-64ffc2d69453"
109              data-animation-type="lottie"
110              data-src="documents/lf30_editor_lbq57bfr.json"
111              data-loop="1"
112              data-direction="1"
113              data-autoplay="1"
114              data-is-ix2-target="0"
115              data-renderer="svg"
116              data-default-duration="1.4"
117              data-duration="3"
118              class="o-loader"
119            ></div>
120            <div aria-hidden="true" class="o-loading__text">Cargando</div>
121          </div>
122          <div class="h-custom-button">
123            <div
124              id="enter"
125              tabindex="0"
126              aria-relevant="additions"
127              aria-live="polite"
128              role="button"
129              aria-labelledby="enter-text"
130              style="opacity: 0; display: none"
131              class="o-enter"
132            >
133              <div id="enter-text">Entrar</div>
134              <div class="o-underline w-embed">
135                <svg viewbox="0 0 136 9" xmlns="http://www.w3.org/2000/svg">
136                  <line
137                    x1="120.921"
138                    y1="1"
139                    x2="7.94829e-08"
140                    y2="1.00001"
141                    stroke="currentColor"
142                    stroke-width="2"
143                  ></line>
144                  <path
145                    d="M134.87 8.96997C134.636 8.90546 134.435 8.74138 134.311 8.51383C133.018 6.14388 131.55 4.55191 129.587 3.52793C127.599 2.49395 125.026 1.99996 121.453 1.99996L110.011 1.99996L110.011 -1.24952e-06L121.453 -6.99376e-07C125.154 -5.21474e-07 128.036 0.505989 130.365 1.72196C132.721 2.94794 134.434 4.8559 135.871 7.48585C135.995 7.7134 136.031 7.98578 135.973 8.24308C135.914 8.50037 135.765 8.7215 135.558 8.85782C135.351 8.99414 135.103 9.03448 134.87 8.96997Z"
146                    fill="currentColor"
147                  ></path>
148                </svg>
149              </div>
150            </div>
151          </div>
152        </div>
153      </div>
154    </div>
155    <nav class="c-nav">
156      <div class="c-logo">
157        <a aria-current='page' aria-label='Recargar página' class='o-logo__wrap w-inline-block w--current' href='/' role='Navigation'>
158          <div class="o-logo-iberdrola text-color force-color w-embed">
159            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 737.89 167.64">
160              <title>Logo Iberdrola</title>
161              <g id="Layer_1" data-name="Logo Iberdrola">
162                <path
163                  d="M535.23,92.17c4.92-1.5,13.52-5.74,13.52-17.15,0-8.88-7.07-17.87-20.6-17.87H499.28v65h13.38V66H523.2c10.15,0,11.66,6,11.66,9.65,0,6-4.31,9.75-11.25,9.75-4.51,0-7.09,1.77-7.09,4.74,0,1.66,1.05,3.83,6,4.6,6.13,1,8.6,6.93,11.74,14.49,0,0,2.71,6.4,3.64,8.47s1.77,4.46,6.4,4.46h10.43l-4.6-9.92C545.53,102,541.86,96,535.23,92.17Z"
164                  fill="currentColor"
165                ></path>
166                <path
167                  d="M403.57,92.17c4.92-1.5,13.52-5.74,13.52-17.15,0-8.88-7.07-17.87-20.6-17.87H367.62v65H381V66h10.54c10.15,0,11.66,6,11.66,9.65,0,6-4.31,9.75-11.26,9.75-4.5,0-7.08,1.77-7.08,4.74,0,1.66,1.05,3.83,6,4.6,6.13,1,8.6,6.93,11.74,14.49,0,0,2.71,6.4,3.64,8.47s1.77,4.46,6.4,4.46h10.43l-4.6-9.92C413.87,102,410.19,96,403.57,92.17Z"
168                  fill="currentColor"
169                ></path>
170                <rect
171                  x="219.56"
172                  y="57.16"
173                  width="13.39"
174                  height="64.99"
175                  fill="currentColor"
176                ></rect>
177                <path
178                  d="M323.11,93h31.34V84.17H323.11V66H356V57.16H309.73v65h46.94V113.3H323.11Z"
179                  fill="currentColor"
180                ></path>
181                <path
182                  d="M456.46,57.16H430.13v65h24.42c23.94,0,37.13-11.5,37.13-32.39C491.68,69.63,478.18,57.16,456.46,57.16ZM443.51,66h10.73c15,0,23.55,8.63,23.55,23.66,0,14.81-8.73,23.65-23.35,23.65H443.51Z"
183                  fill="currentColor"
184                ></path>
185                <path
186                  d="M590.09,56.24c-24,0-34.79,16.78-34.79,33.41s10.76,33.4,34.79,33.4c23.82,0,34.68-17.31,34.68-33.4C624.77,73,614,56.24,590.09,56.24Zm0,56.26c-13.29,0-20.91-8.33-20.91-22.85S576.8,66.8,590.09,66.8s20.79,8.33,20.79,22.85S603.31,112.5,590.09,112.5Z"
187                  fill="currentColor"
188                ></path>
189                <path
190                  d="M285.12,86.81c4.74-2,11.22-6.27,11.22-14.77,0-7.41-6.46-14.88-20.9-14.88H247.58v65h31.59c20.23,0,22.41-12.78,22.41-18.27C301.58,92.5,291.47,88.31,285.12,86.81ZM261,66h10.86c7.85,0,10.65,4.29,10.65,8.3,0,4.5-3.33,9.33-10.65,9.33-4.52,0-7.09,1.62-7.09,4.42,0,1.3.68,4.37,7,4.41l3.1,0c7.16,0,12.36,4.4,12.36,10.49,0,9.17-7.85,10.34-14.68,10.34H261Z"
191                  fill="currentColor"
192                ></path>
193                <path
194                  d="M709,57.16H694.36l-26.31,65h14.16l5.14-13.61h30.59c.52,1.27,3.8,9.15,3.8,9.15.88,2.09,1.88,4.46,6.39,4.46h9.76ZM691,98.81c.68-1.77,9.08-24,10.79-28.54l12,28.54Z"
195                  fill="currentColor"
196                ></path>
197                <path
198                  d="M646.27,113.3V57.16H632.88v65h33.73l0-8.84Z"
199                  fill="currentColor"
200                ></path>
201                <path
202                  d="M101.8,97.3h0c.46-24.91,15.73-37.67,33.2-49.76A283.94,283.94,0,0,0,122.61,0C118.46,51.66,53.78,48.15,52.9,97.37c-.14,7.22,3,17.22,11.18,25.35,12.53,12.35,34.69,15.91,51.38,4.27C110.47,122.42,101.85,112.05,101.8,97.3Z"
203                  fill="currentColor"
204                ></path>
205                <path
206                  d="M176.06,0c-4.12,51.66-68.8,48.15-69.7,97.37-.11,7.22,3,17.22,11.21,25.35C145.64,150.45,222.61,134.26,176.06,0Z"
207                  fill="currentColor"
208                ></path>
209                <path
210                  d="M69.71,0C65.57,51.66.89,48.15,0,97.37c-.13,7.22,3,17.22,11.19,25.35a37.57,37.57,0,0,0,9.42,6.76,127.17,127.17,0,0,0-1.48,38.16l7.86-.4a104.48,104.48,0,0,1-1.78-35.73,40.66,40.66,0,0,0,37-4.28c-.46-.41-.91-.84-1.35-1.27-8-7.93-12.72-18.65-12.54-28.66.42-24,14.63-36.48,29.91-47.43,1.25-.9,2.52-1.8,3.77-2.68A281.68,281.68,0,0,0,69.71,0ZM60.79,49.2A24.15,24.15,0,0,1,55.1,40s0,9.09,3.23,13.74a230,230,0,0,1-12.39,20C40.34,66.06,38.21,58,37.26,55c0,0-.57,14.29,4.89,24.58a180.24,180.24,0,0,0-12,20.52c-5.45-7.89-10.23-19.59-12.37-28.71,0,0-1.4,21.47,8.67,36.9a93.44,93.44,0,0,0-5.31,16.44c-3.48-2-16.73-11.56-16.73-27.82C4.36,75.65,19.79,64.27,35.94,53h0C50,43.14,61.8,34.05,68.52,19.52,68.29,30.49,65.26,40.09,60.79,49.2Z"
211                  fill="currentColor"
212                ></path>
213              </g>
214            </svg>
215          </div>
216        </a>
217      </div>
218      <div class="c-sound__wrap">
219        <div class="o-audio-disclaimer">Se reproducirá audio</div>
220        <div class="o-sound__blocker"></div>
221        <div
222          id="sound-controller"
223          role="button"
224          tabindex="-1"
225          aria-label="Silenciar audio"
226          aria-pressed="false"
227          class="c-sound__controller"
228        >
229          <div
230            data-w-id="25ad1882-b1dc-503f-1c82-3a6bfd49576c"
231            data-animation-type="lottie"
232            data-src="documents/lf30_editor_7csn6rvi.json"
233            data-loop="0"
234            data-direction="1"
235            data-autoplay="0"
236            data-is-ix2-target="1"
237            data-renderer="svg"
238            data-default-duration="1.0010009602293968"
239            data-duration="1.0010009602293968"
240            data-ix2-initial-state="17"
241            class="o-sound__lottie"
242          ></div>
243        </div>
244      </div>
245      <div class="c-scroll-helper">
246        <div class="o-scroll-helper__wrap">
247          <div id="arrow" class="o-scroll-helper text-color w-embed">
248            <svg
249              width="20"
250              height="35"
251              viewbox="0 0 28 49"
252              fill="none"
253              xmlns="http://www.w3.org/2000/svg"
254            >
255              <path
256                d="M24.7718 2.78727C25.1132 2.58279 25.3593 2.25109 25.4561 1.86514C25.5528 1.47919 25.4923 1.07061 25.2878 0.729274C25.0834 0.387941 24.7517 0.141817 24.3657 0.0450486C23.9798 -0.0517201 23.5712 0.00879275 23.2298 0.213275C19.2848 2.58327 16.4228 5.40927 14.5838 9.29727C12.7598 13.1403 
25612.0008 17.8953 12.0008 24.0003V42.8793L2.56283 33.4413C2.28157 33.1596 1.89994 33.0012 1.50189 33.0009C1.10385 33.0007 0.721995 33.1585 0.440335 33.4398C0.158675 33.721 0.00028168 34.1027 3.75333e-07 34.5007C-0.000280929 34.8988 0.157572 35.2806 0.438834 35.5623L12.4388 47.5623C12.5782 47.702 12.7437 47.8128 12.9259 47.8884C13.1082 47.964 13.3035 48.003 13.5008 48.003C13.6981 48.003 13.8935 47.964 14.0757 47.8884C14.258 47.8128 14.4235 47.702 14.5628 47.5623L26.5628 35.5623C26.8441 35.2806 27.002 34.8988 27.0017 34.5007C27.0014 34.1027 26.843 33.721 26.5613 33.4398C26.4219 33.3005 26.2563 33.1901 26.0742 33.1148C25.8921 33.0395 25.6969 33.0008 25.4998 33.0009C25.1017 33.0012 24.7201 33.1596 24.4388 33.4413L15.0008 42.8793V24.0003C15.0008 18.1053 15.7418 13.8603 17.2928 10.5813C18.8288 7.34127 21.2168 4.92027 24.7718 2.78727Z"
257                fill="currentColor"
258              ></path>
259            </svg>
260          </div>
261        </div>
262        <div class="o-scroll-text__wrap">
263          <div
264            lang="en"
265            aria-hidden="true"
266            style="height: 0px"
267            class="o-scroll-helper__text"
268          >
269            Scroll
270          </div>
271        </div>
272      </div>
273      <div class="c-language-change">
274        <div class="l-lang__wrap">
275          <a aria-label='Change to English' class='o-lang-link text-color alternative' href='/en/' lang='en'>English</a
276          >
277        </div>
278      </div>
279      <div style="opacity: 0" class="c-scroll-progress">
280        <div
281          style="background-color: rgb(34, 34, 34)"
282          class="scroll-progress__wrap"
283        >
284          <div
285            style="background-color: rgb(239, 210, 168)"
286            class="scroll-progress__bar"
287          ></div>
288        </div>
289      </div>
290    </nav>
291    <div class="o-vignette"></div>
292    <div style="background-color: rgb(34, 34, 34)" class="color-overlay"></div>
293    <main id="main" class="h-content h-vhidden">
294      <div class="l-section h-contrast__light">
295        <div
296          data-w-id="bd814712-3e8b-d6b0-21f7-fbbcf84ee030"
297          class="h-start-section-first"
298        ></div>
299        <div
300          data-w-id="99208684-44be-2ca2-131d-28ef5bc4d177"
301          class="h-color-trigger _0"
302        ></div>
303        <div class="audio hero move-far w-embed">
304          <audio
305            loop=""
306            preload="auto"
307            id="sound0"
308            src="/audio/0-intro.mp3"
309          ></audio>
310        </div>
311        <div class="full-screen-hero">
312          <div
313            data-poster-url="videos/14-LAMPARA-Boc1-musica-poster-00001.jpg"
314            data-video-urls="videos/14-LAMPARA-Boc1-musica-transcode.mp4,videos/14-LAMPARA-Boc1-musica-transcode.webm"
315            data-autoplay="true"
316            data-loop="true"
317            data-wf-ignore="true"
318            aria-hidden="true"
319            class="bg__video w-background-video w-background-video-atom"
320          >
321            <video
322              autoplay=""
323              loop=""
324              style="
325                background-image: url('videos/14-LAMPARA-Boc1-musica-poster-00001.jpg');
326              "
327              muted=""
328              playsinline=""
329              data-wf-ignore="true"
330              data-object-fit="cover"
331            >
332              <source
333                src="videos/14-LAMPARA-Boc1-musica-transcode.mp4"
334                data-wf-ignore="true"
335              />
336              <source
337                src="videos/14-LAMPARA-Boc1-musica-transcode.webm"
338                data-wf-ignore="true"
339              />
340            </video>
341          </div>
342        </div>
343        <div class="l-container first quote">
344          <div
345            id="w-node-a1f054b5-0cc8-2afa-9727-0d196555450b-1170133d"
346            class="l-content__container cita-montaigne"
347          >
348            <div
349              role="text"
350              data-w-id="fb59e9c5-bd7d-cb25-5377-bafccfd61135"
351              class="h2__0"
352            >
353              <span class="ml3 span-this">Contemplad las manos, </span
354              ><span class="ml3 span-this">cómo prometen, </span
355              ><span class="ml3 span-this">conjuran, </span
356              ><span class="ml3 span-this">apelan, </span
357              ><span class="ml3 span-this">hacen señas, </span
358              ><span class="ml3 span-this">admiran, </span
359              ><span class="ml3 span-this">confiesan, </span
360              ><span class="ml3 span-this">instruyen </span
361              ><span class="ml3 span-this">y las que no, </span
362              ><span class="ml3 span-this"
363                >con una variación y multiplicación de variaciones, </span
364              ><span class="ml3 span-this">dan envidia a la lengua.</span>
365            </div>
366            <div class="o-cita-author ml3 span-this">Montaigne</div>
367          </div>
368        </div>
369      </div>
370      <section class="l-section h-contrast__light">
371        <div class="h-start-section"></div>
372        <div
373          data-w-id="8a3fcb3e-257f-5431-440d-b67b2b4f95ef"
374          class="h-color-trigger _1"
375        ></div>
376        <div class="audio w-embed">
377          <audio
378            loop=""
379            preload="auto"
380            id="sound1"
381            src="/audio/1-sombras.mp3"
382          ></audio>
383        </div>
384        <div class="full-screen _1">
385          <div
386            data-poster-url="videos/13-SOMBRAS-Boc1-musica-poster-00001.jpg"
387            data-video-urls="videos/13-SOMBRAS-Boc1-musica-transcode.mp4,videos/13-SOMBRAS-Boc1-musica-transcode.webm"
388            data-autoplay="true"
389            data-loop="true"
390            data-wf-ignore="true"
391            aria-hidden="true"
392            class="bg__video w-background-video w-background-video-atom"
393          >
394            <video
395              autoplay=""
396              loop=""
397              style="
398                background-image: url('videos/13-SOMBRAS-Boc1-musica-poster-00001.jpg');
399              "
400              muted=""
401              playsinline=""
402              data-wf-ignore="true"
403              data-object-fit="cover"
404            >
405              <source
406                src="videos/13-SOMBRAS-Boc1-musica-transcode.mp4"
407                data-wf-ignore="true"
408              />
409              <source
410                src="videos/13-SOMBRAS-Boc1-musica-transcode.webm"
411                data-wf-ignore="true"
412              />
413            </video>
414          </div>
415        </div>
416        <div class="l-container first">
417          <div
418            id="w-node-ccf26836-739c-94aa-2925-8f3def955bb3-1170133d"
419            class="l-content__container"
420          >
421            <h2
422              data-w-id="ccf26836-739c-94aa-2925-8f3def955bb4"
423              style="opacity: 0"
424              class="h2__1"
425            >
426              Contemplad las manos
427            </h2>
428            <div class="paragraph__wrap left">
429              <p class="color__white">
430                Nuestra sociedad ha experimentado profundos cambios. Un
431                aislamiento exterior nos ha impedido el contacto con los demás.
432                Y desde siempre, tocarnos y ser tocados es una necesidad
433                esencial. Este tiempo nos ha llevado a reflexionar sobre
434                nosotros y sobre cómo nuestra sociedad avanza hacia el futuro.
435              </p>
436            </div>
437          </div>
438        </div>
439        <div class="l-container second">
440          <div
441            id="w-node-_4795df80-a969-4eff-c309-5ad7b3b4ccd3-1170133d"
442            class="l-content__container"
443          >
444            <div class="paragraph__wrap right">
445              <p class="color__white">
446                Estamos en un mundo global. Las necesidades de unos y otros
447                deberían estar igualmente cubiertas. ¿Pero esto es así en
448                realidad? Sigue habiendo grandes diferencias entre países,
449                comunidades, razas o géneros. Debemos conseguir una mayor
450                capacidad de desarrollo y que la energía, por ejemplo, y debido
451                a su importancia, llegue a todos los hogares.
452              </p>
453            </div>
454          </div>
455        </div>
456        <div class="l-cifras__wrap">
457          <div class="h-facts-start"></div>
458          <div class="l-container cifra">
459            <div
460              id="w-node-a983327b-b7f6-45c5-626c-37ed1543eda4-1170133d"
461              class="c-facts"
462            >
463              <h2 class="facts__heading color__white">
464                <span class="o-cifra__text">El programa </span
465                ><span class="o-cifra__text"
466                  >&quot;Electricidad para todos&quot;, </span
467                ><span class="o-cifra__text">promovido por Iberdrola, </span
468                ><span class="o-cifra__text">ha alcanzado </span
469                ><span class="o-cifra color__yellow">en 2020  </span
470                ><span class="o-cifra color__yellow"
471                  >8,2 millones de beneficiarios</span
472                >
473              </h2>
474            </div>
475          </div>
476        </div>
477      </section>
478      <section class="l-section h-contrast__light">
479        <div class="h-start-section"></div>
480        <div
481          data-w-id="98a69a8e-d738-7e6e-94b6-e5d400e07b50"
482          class="h-color-trigger _2"
483        ></div>
484        <div class="audio w-embed">
485          <audio
486            loop=""
487            preload="auto"
488            id="sound2"
489            src="/audio/2-hojas.mp3"
490          ></audio>
491        </div>
492        <div class="full-screen _2">
493          <div
494            data-poster-url="videos/10-HOJAS-Boc1-musica-poster-00001.jpg"
495            data-video-urls="videos/10-HOJAS-Boc1-musica-transcode.mp4,videos/10-HOJAS-Boc1-musica-transcode.webm"
496            data-autoplay="true"
497            data-loop="true"
498            data-wf-ignore="true"
499            aria-hidden="true"
500            class="bg__video w-background-video w-background-video-atom"
501          >
502            <video
503              autoplay=""
504              loop=""
505              style="
506                background-image: url('videos/10-HOJAS-Boc1-musica-poster-00001.jpg');
507              "
508              muted=""
509              playsinline=""
510              data-wf-ignore="true"
511              data-object-fit="cover"
512            >
513              <source
514                src="videos/10-HOJAS-Boc1-musica-transcode.mp4"
515                data-wf-ignore="true"
516              />
517              <source
518                src="videos/10-HOJAS-Boc1-musica-transcode.webm"
519                data-wf-ignore="true"
520              />
521            </video>
522          </div>
523        </div>
524        <div class="l-container first">
525          <div
526            id="w-node-_18410975-9f3b-5cca-aff1-ae2090345458-1170133d"
527            class="l-content__container"
528          >
529            <div class="paragraph__wrap left">
530              <p class="color__white">
531                Son muchos los que aún no pueden elegir qué hacer, cómo vivir o
532                a quién querer. ¿Qué importa qué seamos o con qué nos
533                identifiquemos? La sociedad debería permitirnos tomar libremente
534                nuestras propias decisiones.
535              </p>
536            </div>
537          </div>
538        </div>
539        <div class="l-cifras__wrap">
540          <div class="l-container cifra">
541            <div
542              id="w-node-_1a9acb4d-823d-1394-1b9b-af33a8fc9aaf-1170133d"
543              class="c-facts"
544            >
545              <h2 class="facts__heading color__white">
546                <span class="o-cifra__text">Iberdrola ha concedido ya </span
547                ><span class="o-cifra color__yellow">1.000 becas </span
548                ><span class="o-cifra__text">para recibir formación </span
549                ><span class="o-cifra__text">de excelencia, </span
550                ><span class="o-cifra__text">principalmente </span
551                ><span class="o-cifra__text">en disciplinas STEM</span>
552              </h2>
553            </div>
554          </div>
555        </div>
556        <div class="l-container second">
557          <div
558            id="w-node-_694680c6-786b-ee1b-09e4-f8702782fc56-1170133d"
559            class="l-content__container"
560          >
561            <div class="paragraph__wrap right">
562              <p class="color__white">
563                Aún es difícil ser mujeres, madres y trabajadoras. Conciliar la
564                vida laboral y la familiar. Aspiramos a seguir formándonos y
565                ascender en la empresa. Nos gustaría cumplir todos nuestros
566                sueños y aspiraciones en cualquier ámbito. La igualdad tiene que
567                ser tanto de derechos como de recursos y oportunidades.
568              </p>
569            </div>
570          </div>
571        </div>
572        <div class="l-cifras__wrap">
573          <div class="l-container cifra">
574            <div
575              id="w-node-a46d4af5-b5a1-555f-f539-6285917d29e3-1170133d"
576              class="c-facts"
577            >
578              <h2 class="facts__heading color__white">
579                <span class="o-cifra__text">El número de mujeres </span
580                ><span class="o-cifra__text">en la plantilla de Iberdrola </span
581                ><span class="o-cifra__text">ha aumentado </span
582                ><span class="o-cifra color__yellow">un 38% </span
583                ><span class="o-cifra__text">en los últimos 5 años</span>
584              </h2>
585            </div>
586          </div>
587        </div>
588        <div class="l-cifras__wrap">
589          <div class="l-container cifra">
590            <div
591              id="w-node-d10e2479-aaf6-87ee-e59a-56f80fd892b7-1170133d"
592              class="c-facts"
593            >
594              <h2 class="facts__heading color__white">
595                <span class="o-cifra color__yellow">100% </span
596                ><span class="o-cifra__text">Igualdad salarial</span>
597              </h2>
598            </div>
599          </div>
600        </div>
601        <div class="l-cifras__wrap">
602          <div class="l-container cifra">
603            <div
604              id="w-node-dc01aaea-e447-3cc4-c99c-4ee4fa14c13f-1170133d"
605              class="c-facts"
606            >
607              <h2 class="facts__heading color__white">
608                <span class="o-cifra color__yellow">En 2020 </span
609                ><span class="o-cifra__text">la remuneración media total </span
610                ><span class="o-cifra__text">de las mujeres </span
611                ><span class="o-cifra__text">es superior </span
612                ><span class="o-cifra__text">a la de los hombres</span>
613              </h2>
614            </div>
615          </div>
616        </div>
617      </section>
618      <section class="l-section h-contrast__light">
619        <div class="h-start-section"></div>
620        <div
621          data-w-id="a5def186-e4aa-485a-11ca-ef9f6a694c3c"
622          class="h-color-trigger _3"
623        ></div>
624        <div class="audio w-embed">
625          <audio
626            loop=""
627            preload="auto"
628            id="sound3"
629            src="/audio/3-bronce.mp3"
630          ></audio>
631        </div>
632        <div class="full-screen _3">
633          <div
634            data-poster-url="videos/8-PELO-BRONCE-Boc1-musica-poster-00001.jpg"
635            data-video-urls="videos/8-PELO-BRONCE-Boc1-musica-transcode.mp4,videos/8-PELO-BRONCE-Boc1-musica-transcode.webm"
636            data-autoplay="true"
637            data-loop="true"
638            data-wf-ignore="true"
639            aria-hidden="true"
640            class="bg__video w-background-video w-background-video-atom"
641          >
642            <video
643              autoplay=""
644              loop=""
645              style="
646                background-image: url('videos/8-PELO-BRONCE-Boc1-musica-poster-00001.jpg');
647              "
648              muted=""
649              playsinline=""
650              data-wf-ignore="true"
651              data-object-fit="cover"
652            >
653              <source
654                src="videos/8-PELO-BRONCE-Boc1-musica-transcode.mp4"
655                data-wf-ignore="true"
656              />
657              <source
658                src="videos/8-PELO-BRONCE-Boc1-musica-transcode.webm"
659                data-wf-ignore="true"
660              />
661            </video>
662          </div>
663        </div>
664        <div class="l-container first">
665          <div
666            id="w-node-_83bda7cc-534f-81a1-5718-4f60366b34dc-1170133d"
667            class="l-content__container"
668          >
669            <div class="paragraph__wrap left">
670              <p class="color__white">
671                No hablamos la misma lengua ni compartimos la misma cultura.
672                Somos de distinta raza y tenemos otro color de piel. ¿Eso va a
673                impedir que nos entendamos? ¿No vamos a poder vivir y trabajar
674                juntos? La diversidad es buena para todo, en el trabajo amplía
675                las perspectivas y mejora el rendimiento.
676              </p>
677            </div>
678          </div>
679        </div>
680        <div class="l-cifras__wrap">
681          <div class="l-container cifra">
682            <div
683              id="w-node-_99adcf32-660b-e8b1-62ad-b1d952d663bd-1170133d"
684              class="c-facts"
685            >
686              <h2 class="facts__heading color__white">
687                <span class="o-cifra color__skin">El 42% </span
688                ><span class="o-cifra__text">de los consejeros externos </span
689                ><span class="o-cifra__text">de Iberdrola </span
690                ><span class="o-cifra__text">son mujeres</span>‍
691              </h2>
692            </div>
693          </div>
694        </div>
695        <div class="l-cifras__wrap">
696          <div class="l-container cifra">
697            <div
698              id="w-node-b5a16b6f-5318-76d2-84ed-49960c937e7f-1170133d"
699              class="c-facts"
700            >
701              <h2 class="facts__heading color__white">
702                <span class="o-cifra__text">Presencia </span
703                ><span class="o-cifra color__skin">de 6 nacionalidades </span
704                ><span class="o-cifra__text">diferentes en el Consejo</span>
705              </h2>
706            </div>
707          </div>
708        </div>
709        <div class="l-container second">
710          <div
711            id="w-node-e5d9689a-40a0-f47d-4df8-3b187ba93fc5-1170133d"
712            class="l-content__container"
713          >
714            <div class="paragraph__wrap right">
715              <p class="color__white">
716                Es importante sentirnos parte de un grupo, cada uno con nuestra
717                edad y talla, con nuestra religión y pensamiento. Somos muy
718                valiosos, porque aportamos grandes cosas.
719              </p>
720            </div>
721          </div>
722        </div>
723        <div class="l-cifras__wrap">
724          <div class="l-container cifra">
725            <div
726              id="w-node-_6a81bcc9-1f4e-33a5-9788-2a0c82c5123a-1170133d"
727              class="c-facts"
728            >
729              <h2 class="facts__heading color__white">
730                <span class="o-cifra__text"
731                  >En Iberdrola conviven empleados </span
732                ><span class="o-cifra color__skin">de 72 nacionalidades </span
733                ><span class="o-cifra color__skin"
734                  >y más de 4 generaciones</span
735                >
736              </h2>
737            </div>
738          </div>
739        </div>
740      </section>
741      <section
742        data-w-id="d1de99de-b5ea-ed22-8659-3e51ffb37345"
743        class="l-section h-contrast__dark"
744      >
745        <div class="h-start-section"></div>
746        <div
747          data-w-id="9a3de8d0-6cb0-3b4b-1fd9-589bdc48ddf9"
748          class="h-color-trigger _4"
749        ></div>
750        <div class="audio w-embed">
751          <audio
752            loop=""
753            preload="auto"
754            id="sound4"
755            src="/audio/4-diverso.mp3"
756          ></audio>
757        </div>
758        <div class="full-screen _4">
759          <div
760            data-poster-url="videos/11-DIVERSO-Boc1-musica-poster-00001.jpg"
761            data-video-urls="videos/11-DIVERSO-Boc1-musica-transcode.mp4,videos/11-DIVERSO-Boc1-musica-transcode.webm"
762            data-autoplay="true"
763            data-loop="true"
764            data-wf-ignore="true"
765            aria-hidden="true"
766            class="bg__video w-background-video w-background-video-atom"
767          >
768            <video
769              autoplay=""
770              loop=""
771              style="
772                background-image: url('videos/11-DIVERSO-Boc1-musica-poster-00001.jpg');
773              "
774              muted=""
775              playsinline=""
776              data-wf-ignore="true"
777              data-object-fit="cover"
778            >
779              <source
780                src="videos/11-DIVERSO-Boc1-musica-transcode.mp4"
781                data-wf-ignore="true"
782              />
783              <source
784                src="videos/11-DIVERSO-Boc1-musica-transcode.webm"
785                data-wf-ignore="true"
786              />
787            </video>
788          </div>
789        </div>
790        <div class="l-container first">
791          <div
792            id="w-node-_4c8249ef-e3c0-03b9-8363-0e224c33048d-1170133d"
793            class="l-content__container"
794          >
795            <div class="paragraph__wrap left">
796              <p class="color__black">
797                Con mayor o menor dificultad, avanzamos. Aunque no lo tenemos
798                fácil, lo seguimos intentando. Siempre buscamos llegar a la
799                meta, superando las barreras que nos vamos encontrando. Formamos
800                parte del movimiento y solo necesitamos un poco más de impulso.
801              </p>
802            </div>
803          </div>
804        </div>
805        <div class="l-container second">
806          <div
807            id="w-node-_6f12946a-4c72-788e-5c3e-bf233024517d-1170133d"
808            class="l-content__container"
809          >
810            <div class="paragraph__wrap right">
811              <p class="color__black">
812                Tenemos otras capacidades. Nos comunicamos, nos expresamos y
813                sentimos. ¡Participamos en el avance de la sociedad! Nuestras
814                diferencias nos enseñan cómo diseñar modelos que se adapten a
815                todos.
816              </p>
817            </div>
818          </div>
819        </div>
820        <div class="l-cifras__wrap">
821          <div class="l-container cifra">
822            <div
823              id="w-node-_0e7d85a2-9ad2-c2b9-d28f-b3b91fd61bea-1170133d"
824              class="c-facts"
825            >
826              <h2 class="facts__heading color__black">
827                <span class="o-cifra__text">Comprometidos </span
828                ><span class="o-cifra__text">con la promoción </span
829                ><span class="o-cifra__text">de la inclusión </span
830                ><span class="o-cifra__text">y el talento diverso</span>
831              </h2>
832            </div>
833          </div>
834        </div>
835        <div class="l-cifras__wrap">
836          <div class="l-container cifra">
837            <div
838              id="w-node-_94e9fb6d-2433-7f41-66db-d8d9d6bd3378-1170133d"
839              class="c-facts"
840            >
841              <h2 class="facts__heading color__black">
842                <span class="o-cifra__text">Las contrataciones </span
843                ><span class="o-cifra__text">de personas </span
844                ><span class="o-cifra__text">con discapacidad </span
845                ><span class="o-cifra__text">han incrementado </span
846                ><span class="o-cifra__text">la representatividad </span
847                ><span class="o-cifra__text">de este colectivo </span
848                ><span class="o-cifra color__red">un 38% </span
849                ><span class="o-cifra color__red">en los últimos 3 años</span>
850              </h2>
851            </div>
852          </div>
853        </div>
854      </section>
855      <section class="l-section h-contrast__dark">
856        <div class="h-start-section"></div>
857        <div
858          data-w-id="823569c9-658c-bdb3-7391-004a474f473d"
859          class="h-color-trigger _5"
860        ></div>
861        <div class="audio w-embed">
862          <audio
863            loop=""
864            preload="auto"
865            id="sound5"
866            src="/audio/5-skate.mp3"
867          ></audio>
868        </div>
869        <div class="full-screen _5">
870          <div
871            data-poster-url="videos/9-SKATE-BALON-Boc1-musica-poster-00001.jpg"
872            data-video-urls="videos/9-SKATE-BALON-Boc1-musica-transcode.mp4,videos/9-SKATE-BALON-Boc1-musica-transcode.webm"
873            data-autoplay="true"
874            data-loop="true"
875            data-wf-ignore="true"
876            aria-hidden="true"
877            class="bg__video w-background-video w-background-video-atom"
878          >
879            <video
880              autoplay=""
881              loop=""
882              style="
883                background-image: url('videos/9-SKATE-BALON-Boc1-musica-poster-00001.jpg');
884              "
885              muted=""
886              playsinline=""
887              data-wf-ignore="true"
888              data-object-fit="cover"
889            >
890              <source
891                src="videos/9-SKATE-BALON-Boc1-musica-transcode.mp4"
892                data-wf-ignore="true"
893              />
894              <source
895                src="videos/9-SKATE-BALON-Boc1-musica-transcode.webm"
896                data-wf-ignore="true"
897              />
898            </video>
899          </div>
900        </div>
901        <div class="l-container first">
902          <div
903            id="w-node-edf3bdf7-7d89-96f6-ac27-cdf65cf2b7bf-1170133d"
904            class="l-content__container"
905          >
906            <div class="paragraph__wrap left">
907              <p class="color__black">
908                Nuestros errores y fracasos, que los tenemos, y también nuestras
909                derivas y experimentos forman parte de un proceso. Aceptarlos
910                nos abre caminos y nos lleva más lejos. De eso se trata, de
911                llegar lo más lejos posible, de no tener miedo. El miedo frena y
912                la curiosidad estimula. Esa es la manera de crecer y avanzar.
913              </p>
914            </div>
915          </div>
916        </div>
917        <div class="l-container second">
918          <div
919            id="w-node-f0a59d18-de6a-b965-e450-5f8b4b11fcf8-1170133d"
920            class="l-content__container"
921          >
922            <div class="paragraph__wrap right">
923              <p class="color__black">
924                ¿Quién ha dicho que hay deportes mejores para unos u otros? ¿Por
925                qué no vamos a poder practicar el deporte que nos gusta por
926                falta de medios, por exclusión o porque nos encasillen? Somos
927                rápidas y fuertes.
928              </p>
929            </div>
930          </div>
931        </div>
932        <div class="l-cifras__wrap">
933          <div class="l-container cifra">
934            <div
935              id="w-node-_7370419f-88a7-9b4f-1b23-24b7c07c587c-1170133d"
936              class="c-facts"
937            >
938              <h2 class="facts__heading color__black">
939                <span class="o-cifra__text">Impulso al deporte </span
940                ><span class="o-cifra__text">practicado por las mujeres </span
941                ><span class="o-cifra color__orange">en 16 federaciones </span
942                ><span class="o-cifra__text">en búsqueda </span
943                ><span class="o-cifra__text">de la igualdad efectiva </span
944                ><span class="o-cifra__text">en todos los ámbitos </span
945                ><span class="o-cifra__text">de la sociedad</span>
946              </h2>
947            </div>
948          </div>
949        </div>
950      </section>
951      <section class="l-section h-contrast__dark">
952        <div class="h-start-section"></div>
953        <div
954          data-w-id="7dfe351d-9a9e-27fa-149f-2ee7167f910b"
955          class="h-color-trigger _6"
956        ></div>
957        <div class="audio w-embed">
958          <audio
959            loop=""
960            preload="auto"
961            id="sound6"
962            src="/audio/6-mesa.mp3"
963          ></audio>
964        </div>
965        <div class="full-screen _6">
966          <div
967            data-poster-url="videos/12-MESA-Boc1-musica-poster-00001.jpg"
968            data-video-urls="videos/12-MESA-Boc1-musica-transcode.mp4,videos/12-MESA-Boc1-musica-transcode.webm"
969            data-autoplay="true"
970            data-loop="true"
971            data-wf-ignore="true"
972            aria-hidden="true"
973            class="bg__video w-background-video w-background-video-atom"
974          >
975            <video
976              autoplay=""
977              loop=""
978              style="
979                background-image: url('videos/12-MESA-Boc1-musica-poster-00001.jpg');
980              "
981              muted=""
982              playsinline=""
983              data-wf-ignore="true"
984              data-object-fit="cover"
985            >
986              <source
987                src="videos/12-MESA-Boc1-musica-transcode.mp4"
988                data-wf-ignore="true"
989              />
990              <source
991                src="videos/12-MESA-Boc1-musica-transcode.webm"
992                data-wf-ignore="true"
993              />
994            </video>
995          </div>
996        </div>
997        <div class="l-container first">
998          <div
999            id="w-node-d4e81f5b-ead7-8102-009c-c9959ae75930-1170133d"
1000            class="l-content__container"
1001          >
1002            <div class="paragraph__wrap left">
1003              <p class="color__black">
1004                El aire, el sol, el agua… Compartimos y nos preocupa nuestro
1005                planeta. Si queremos disfrutarlo, el cambio debe empezar por
1006                nosotros mismos. El medio ambiente es cosa de todos.
1007              </p>
1008            </div>
1009          </div>
1010        </div>
1011        <div class="l-cifras__wrap margin-top">
1012          <div class="l-container cifra">
1013            <div
1014              id="w-node-_6a89a9fa-ca8e-c8a2-bb10-b4d86133eec2-1170133d"
1015              class="c-facts"
1016            >
1017              <h2 class="facts__heading color__black">
1018                <span class="o-cifra color__red">En 2022 </span
1019                ><span class="o-cifra color__red"
1020                  >el 70% de los proveedores </span
1021                ><span class="o-cifra__text">de Iberdrola </span
1022                ><span class="o-cifra__text">estarán sujetos a políticas </span
1023                ><span class="o-cifra__text">y estándares </span
1024                ><span class="o-cifra__text">de sostenibilidad</span>
1025              </h2>
1026            </div>
1027          </div>
1028        </div>
1029        <div class="l-container second">
1030          <div
1031            id="w-node-_597e88d3-863a-437e-1814-c0e04c5ba38c-1170133d"
1032            class="l-content__container"
1033          >
1034            <div class="paragraph__wrap right">
1035              <p class="color__black">
1036                La forma de energía más subestimada es el calor humano. Desde
1037                siempre, cuando las personas se sentían en peligro, tendían a
1038                agruparse. Cuando nuestra civilización pensaba en los grandes
1039                avances que había conseguido, se ha encontrado con una situación
1040                que la hace vulnerable. Gracias a las nuevas tecnologías, hemos
1041                podido estar conectados con aquellos que se encontraban lejos.
1042                De alguna manera, hemos logrado agruparnos. Hay que defender e
1043                impulsar todo aquello que nos hace más humanos.
1044              </p>
1045            </div>
1046          </div>
1047        </div>
1048        <div class="l-container second">
1049          <div
1050            id="w-node-d6caffdb-2b2b-6674-6d54-92b0bcfede7c-1170133d"
1051            class="l-content__container"
1052          >
1053            <div class="paragraph__wrap left">
1054              <p class="color__black">
1055                Las empresas también deberían ser más humanas. Escuchar y tener
1056                en cuenta la opinión de sus grupos de interés. Para esto es
1057                necesario conocer sus necesidades y preocupaciones. Las
1058                actividades que fomentan la relación entre los diferentes
1059                miembros permiten establecer más fácilmente objetivos y metas
1060                comunes. Se crea un equipo.
1061              </p>
1062            </div>
1063          </div>
1064        </div>
1065        <div class="l-container second">
1066          <div
1067            id="w-node-_678c2aa5-152a-2677-8da6-e66ce9a674d0-1170133d"
1068            class="l-content__container"
1069          >
1070            <div class="paragraph__wrap right">
1071              <p class="color__black">
1072                No buscamos encajar, buscamos sobresalir. Somos iguales, somos
1073                diversos y queremos estar incluidos. Tenemos mucho que decir,
1074                mucho que aportar y mucho que construir. Nuestros logros son los
1075                logros de todos. Estamos en camino y vamos de la mano. Las manos
1076                hacen cada día el mundo.
1077              </p>
1078            </div>
1079          </div>
1080        </div>
1081        <div class="l-cifras__wrap margin-top">
1082          <div class="l-container cifra">
1083            <div
1084              id="w-node-_9fbe977a-783f-5f2c-1975-e158fe08824f-1170133d"
1085              class="c-facts"
1086            >
1087              <h2 class="facts__heading color__black">
1088                <span class="o-cifra color__red">En 2020 </span
1089                ><span class="o-cifra__text">se ha aprobado </span
1090                ><span class="o-cifra__text">una política de igualdad, </span
1091                ><span class="o-cifra__text"
1092                  >diversidad e inclusión innovadora </span
1093                ><span class="o-cifra__text">que incorpora </span
1094                ><span class="o-cifra__text"
1095                  >las mejores prácticas internacionales</span
1096                >
1097              </h2>
1098            </div>
1099          </div>
1100        </div>
1101      </section>
1102      <section class="l-section h-contrast__dark">
1103        <div
1104          data-w-id="0504c363-9e6e-bd8c-a81a-d9eaef297ed4"
1105          class="h-color-trigger _7"
1106        ></div>
1107        <div class="audio footer w-embed">
1108          <audio
1109            loop=""
1110            preload="auto"
1111            id="sound7"
1112            src="/audio/7-epilogue.mp3"
1113          ></audio>
1114        </div>
1115        <div class="full-screen _7">
1116          <div
1117            data-poster-url="videos/1-LUZyAGUA-Boc1-musica-poster-00001.jpg"
1118            data-video-urls="videos/1-LUZyAGUA-Boc1-musica-transcode.mp4,videos/1-LUZyAGUA-Boc1-musica-transcode.webm"
1119            data-autoplay="true"
1120            data-loop="true"
1121            data-wf-ignore="true"
1122            aria-hidden="true"
1123            class="bg__video w-background-video w-background-video-atom"
1124          >
1125            <video
1126              autoplay=""
1127              loop=""
1128              style="
1129                background-image: url('videos/1-LUZyAGUA-Boc1-musica-poster-00001.jpg');
1130              "
1131              muted=""
1132              playsinline=""
1133              data-wf-ignore="true"
1134              data-object-fit="cover"
1135            >
1136              <source
1137                src="videos/1-LUZyAGUA-Boc1-musica-transcode.mp4"
1138                data-wf-ignore="true"
1139              />
1140              <source
1141                src="videos/1-LUZyAGUA-Boc1-musica-transcode.webm"
1142                data-wf-ignore="true"
1143              />
1144            </video>
1145          </div>
1146        </div>
1147        <div class="l-container first epilogo">
1148          <div
1149            id="w-node-_0cc218a3-33f8-723f-dde7-271c7096ab13-1170133d"
1150            class="l-content__container"
1151          >
1152            <h2 class="h2__7 color__green-iberdrola">
1153              <span class="mlend span-this">El futuro </span
1154              ><span class="mlend span-this">siempre </span
1155              ><span class="mlend span-this">debería </span
1156              ><span class="mlend span-this">ser mejor</span>
1157            </h2>
1158          </div>
1159        </div>
1160        <footer role="contentinfo" class="l-footer">
1161          <div class="l-container footer">
1162            <div
1163              id="w-node-_8d7b3be1-c117-4e19-7eb0-1e7b59beb536-1170133d"
1164              data-w-id="8d7b3be1-c117-4e19-7eb0-1e7b59beb536"
1165              style="opacity: 0"
1166              class="o-more"
1167            >
1168              <h3 class="footer-more-heading">
1169                <span class="h-break-line">¿Quieres conocer más </span
1170                ><span class="h-break-line">sobre diversidad e inclusión </span
1171                >en
1172                <a
1173                  href="https://www.iberdrola.com/"
1174                  class="o-credits__link-green"
1175                  >Iberdrola</a
1176                >?
1177              </h3>
1178              <a
1179                href="https://www.iberdrola.com/compromiso-social/diversidad-inclusion"
1180                class="o-credits__download"
1181                >Diversidad e inclusión, una prioridad estratégica para el
1182                crecimiento sostenible</a
1183              >
1184            </div>
1185            <div
1186              id="w-node-_46e75499-bc70-1112-7281-60e6458a8f08-1170133d"
1187              data-w-id="46e75499-bc70-1112-7281-60e6458a8f08"
1188              style="opacity: 0"
1189              class="l-credits__container"
1190            >
1191              <div class="o-credits">
1192                Diseño y desarrollo web de
1193                <a
1194                  href="https://diegodesousa.com"
1195                  rel="noopener"
1196                  tabindex="-1"
1197                  target="_blank"
1198                  class="o-credits__link"
1199                  >Diego de Sousa</a
1200                >
1201              </div>
1202              <div class="o-credits">Música de J M Artero</div>
1203            </div>
1204          </div>
1205        </footer>
1206      </section>
1207    </main>
1208    
1208<script src="js/jquery.min.js" type="text/javascript"></script>
1208
1209    
1209<script src="js/las-manos.js" type="text/javascript"></script>
1209
1210    <!-- [if lte IE 9]>
1210<script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
1210<![endif] -->
1211    
1211<script src="js/anime.min.js" type="text/javascript"></script>
1211
1212    
1212<script src="js/jquery.inview.min.js" type="text/javascript"></script>
1212
1213    <!--  Audio crossfade  -->
1214    
1214<script>
1215      var $animation_elements = $(".audio");
1216      var $window = $(window);
1217      $window.on("scroll resize", check_if_in_view);
1218      $window.trigger("scroll");
1219      function check_if_in_view() {
1220        var window_height = $window.height();
1221        var window_top_position = $window.scrollTop();
1222        var window_bottom_position = window_top_position + window_height;
1223        $animation_elements.each(function () {
1224          var $element = $(this);
1225          var element_height = $element.outerHeight();
1226          var element_top_position = $element.offset().top;
1227          var element_bottom_position = element_top_position + element_height;
1228          //check to see if this current container is within viewport
1229          if (
1230            element_bottom_position >= window_top_position &&
1231            element_top_position <= window_bottom_position
1232          ) {
1233            $element.addClass("in-view");
1234            $audio = $(this).find("audio");
1235            audio = $audio.get(0);
1236            if (!$audio.is(":animated") && audio.paused) {
1237              audio.volume = 0;
1238              $audio.animate(
1239                {
1240                  volume: 1,
1241                },
1242                2000
1243              );
1244              audio.play();
1245            }
1246          } else {
1247            $element.removeClass("in-view");
1248            $audio = $(this).find("audio");
1249            audio = $audio.get(0);
1250            if (!$audio.is(":animated") && !audio.paused) {
1251              $audio.animate(
1252                {
1253                  volume: 0,
1254                },
1255                2000,
1256                function () {
1257                  this.pause();
1258                }
1259              );
1260            }
1261          }
1262        });
1263      }
1264    </script>
1264
1265    <!--  END - Audio crossfade  -->
1266    <!--  Span letters with .span-this class  -->
1267    
1267<script>
1268      // Find all text with .span-this class and break each letter into a span
1269      var spansWord = document.getElementsByClassName("span-this");
1270      for (var i = 0; i < spansWord.length; i++) {
1271        var wordWrap = spansWord.item(i);
1272        wordWrap.innerHTML = wordWrap.innerHTML.replace(
1273          /(^|<\/?[^>]+>|\s+)([^\s<]+)/g,
1274          '$1<span class="spansword">$2</span>'
1275        );
1276      }
1277      var tricksLetter = document.getElementsByClassName("spansword");
1278      for (var i = 0; i < tricksLetter.length; i++) {
1279        var letterWrap = tricksLetter.item(i);
1280        letterWrap.innerHTML = letterWrap.textContent.replace(
1281          /\S/g,
1282          "<span class='letter'>$&</span>"
1283        );
1284      }
1285    </script>
1285
1286    <!--  END - Span letters with .span-this class  -->
1287    <!--  Mute & Unmute Sound with button  -->
1288    
1288<script>
1289      $(document).ready(function () {
1290        /*** Mute all ***/
1291        $("#mute_all").on("click", function () {
1292          /*** Mute all video and audio on page ***/
1293          $("body audio").each(function () {
1294            /*** Do it here globally ***/
1295            $(this).prop("muted", true);
1296          });
1297        });
1298        /*** UnMute all ***/
1299        $("#unmute_all").on("click", function () {
1300          /*** Un Mute all video and audio on page ***/
1301          $("body audio").each(function () {
1302            /*** Do it here globally ***/
1303            $(this).prop("muted", false);
1304          });
1305        });
1306      });
1307    </script>
1307
1308    <!--  END - Mute & Unmute Sound with button  -->
1309    <!--  "The hands" animation  -->
1310    
1310<script>
1311      var textOpacityIn1 = anime.timeline({
1312        loop: false,
1313        autoplay: false,
1314      });
1315      textOpacityIn1.add({
1316        targets: ".ml13 .letter",
1317        opacity: [0, 1],
1318        easing: "easeInOutQuad",
1319        duration: 2250,
1320        delay: (el, i) => 150 * (i + 1),
1321      });
1322      var textOpacityOut1 = anime.timeline({
1323        loop: false,
1324        autoplay: false,
1325      });
1326      textOpacityOut1.add({
1327        targets: ".ml13",
1328        opacity: 0,
1329        duration: 1000,
1330        easing: "easeOutExpo",
1331        delay: (el, i) => 150 * (i + 1),
1332      });
1333      $(document).ready(function () {
1334        // Play animation when scrolled into view
1335        $(".l-loader-content").on("inview", function (event, isInView) {
1336          if (isInView) {
1337            // Put the play below this line
1338            textOpacityIn1.play();
1339          } else {
1340          }
1341        });
1342      });
1343    </script>
1343
1344    <!--  END "The hands" animation  -->
1345    <!--  ENTER function  -->
1346    
1346<script>
1347      // On .o-enter click actions
1348      document.addEventListener("DOMContentLoaded", () => {
1349        document.querySelectorAll(".o-enter").forEach((trigger) => {
1350          trigger.addEventListener("click", function () {
1351            // REMOVE LOCK SCROLL ON BODY
1352            document
1353              .querySelectorAll("body")
1354              .forEach((target) => target.classList.remove("lock-scroll"));
1355            // REMOVE CLASS THAT HIDES FIRST AUDIO TO AVOID AUTOPLAY
1356            document
1357              .querySelectorAll(".audio")
1358              .forEach((target) => target.classList.remove("move-far"));
1359            // REMOVE CLASS THAT HIDES CONTENT
1360            document
1361              .querySelectorAll(".h-content")
1362              .forEach((target) => target.classList.remove("h-vhidden"));
1363            // Play first audio
1364            document.getElementById("sound0").play();
1365            // Play "the hands" out animation
1366            textOpacityOut1.play();
1367            // Click on Lottie
1368            $(".c-sound__controller").click();
1369            // Change tabindex of Sound component
1370            $("#sound-controller").attr("tabIndex", 0);
1371          });
1372        });
1373      });
1374    </script>
1374
1375    <!--  END ENTER function  -->
1376    <!--  Quote animation function  -->
1377    
1377<script>
1378      var textOpacityIn2 = anime.timeline({
1379        loop: false,
1380        autoplay: false,
1381      });
1382      textOpacityIn2.add({
1383        targets: ".ml3 .letter",
1384        opacity: [0, 1],
1385        easing: "easeInOutQuad",
1386        duration: 2250,
1387        delay: (el, i) => 5 + 20 * i,
1388      });
1389      // WHEN SCROLLED IN VIEW
1390      $(document).ready(function () {
1391        // Play animation when scrolled into view
1392        $(".ml3").on("inview", function (event, isInView) {
1393          if (isInView) {
1394            // Put the play below this line
1395            textOpacityIn2.play();
1396          } else {
1397          }
1398        });
1399      });
1400    </script>
1400
1401    <!--  END - Quote animation function  -->
1402    <!--  Scroll down when arrow click  -->
1403    
1403<script>
1404      $(document).ready(function () {
1405        $(".c-scroll-helper").click(function () {
1406          var y = $(window).scrollTop();
1407          $("html, body").animate({
1408            scrollTop: y + 250,
1409          });
1410        });
1411      });
1412    </script>
1412
1413    <!--  END Scroll down when arrow click  -->
1414    <!--  Epilogue animation function  -->
1415    
1415<script>
1416      var textOpacityIn3 = anime.timeline({
1417        loop: false,
1418        autoplay: false,
1419      });
1420      textOpacityIn3.add({
1421        targets: ".mlend .letter",
1422        opacity: [0, 1],
1423        easing: "easeInOutQuad",
1424        duration: 2250,
1425        delay: (el, i) => 5 + 20 * i,
1426      });
1427      // WHEN SCROLLED IN VIEW
1428      $(document).ready(function () {
1429        // Play animation when scrolled into view
1430        $(".mlend").on("inview", function (event, isInView) {
1431          if (isInView) {
1432            // Put the play below this line
1433            textOpacityIn3.play();
1434          } else {
1435          }
1436        });
1437      });
1438    </script>
1438
1439    <!--  END - Epilogue animation function  -->
1440    <!--  Mute & Unmute -->
1441    
1441<script>
1442      $(document).ready(function () {
1443        $(".c-sound__controller").click(function () {
1444          var clicks = $(this).data("clicks");
1445          if (clicks) {
1446            // odd clicks
1447            /*** Mute all video and audio on page ***/
1448            $("body audio").each(function () {
1449              /*** Do it here globally ***/
1450              $(this).prop("muted", true);
1451            });
1452          } else {
1453            // even clicks
1454            /*** Un Mute all video and audio on page ***/
1455            $("body audio").each(function () {
1456              /*** Do it here globally ***/
1457              $(this).prop("muted", false);
1458            });
1459          }
1460          $(this).data("clicks", !clicks);
1461        });
1462      });
1463    </script>
1463
1464    <!--  END Mute & Unmute -->
1465    
1465<script>
1466      function buttonsAccesible() {
1467        var actionButton = document.getElementById("enter");
1468        actionButton.addEventListener("keydown", actionButtonKeydownHandler);
1469        actionButton.addEventListener("keyup", actionButtonKeyupHandler);
1470        var toggleButton = document.getElementById("sound-controller");
1471        toggleButton.addEventListener("keydown", toggleButtonKeydownHandler);
1472        toggleButton.addEventListener("keyup", toggleButtonKeyupHandler);
1473      }
1474      /**
1475       * Activates the action button with the enter key.
1476       *
1477       * @param {KeyboardEvent} event
1478       */
1479      function actionButtonKeydownHandler(event) {
1480        // The action button is activated by space on the keyup event, but the
1481        // default action for space is already triggered on keydown. It needs to be
1482        // prevented to stop scrolling the page before activating the button.
1483        if (event.keyCode === 32) {
1484          event.preventDefault();
1485        }
1486        // If enter is pressed, activate the button
1487        else if (event.keyCode === 13) {
1488          event.preventDefault();
1489          activateActionButton();
1490        }
1491      }
1492      /**
1493       * Activates the action button with the space key.
1494       *
1495       * @param {KeyboardEvent} event
1496       */
1497      function actionButtonKeyupHandler(event) {
1498        if (event.keyCode === 32) {
1499          event.preventDefault();
1500          activateActionButton();
1501        }
1502      }
1503      function activateActionButton() {
1504        // Action below
1505        event.currentTarget.click();
1506      }
1507      /**
1508       * Toggles the toggle button’s state if it’s actually a button element or has
1509       * the `role` attribute set to `button`.
1510       *
1511       * @param {MouseEvent} event
1512       */
1513      function toggleButtonClickHandler(event) {
1514        if (
1515          event.currentTarget.tagName === "button" ||
1516          event.currentTarget.getAttribute("role") === "button"
1517        ) {
1518          toggleButtonState(event.currentTarget);
1519        }
1520      }
1521      /**
1522       * Toggles the toggle button’s state with the enter key.
1523       *
1524       * @param {KeyboardEvent} event
1525       */
1526      function toggleButtonKeydownHandler(event) {
1527        if (event.keyCode === 32) {
1528          event.preventDefault();
1529        } else if (event.keyCode === 13) {
1530          event.preventDefault();
1531          toggleButtonState(event.currentTarget);
1532        }
1533      }
1534      /**
1535       * Toggles the toggle button’s state with space key.
1536       *
1537       * @param {KeyboardEvent} event
1538       */
1539      function toggleButtonKeyupHandler(event) {
1540        if (event.keyCode === 32) {
1541          event.preventDefault();
1542          toggleButtonState(event.currentTarget);
1543        }
1544      }
1545      /**
1546       * Toggles the toggle button’s state between *pressed* and *not pressed*.
1547       *
1548       * @param {HTMLElement} button
1549       */
1550      function toggleButtonState(button) {
1551        var isAriaPressed = button.getAttribute("aria-pressed") === "true";
1552        button.setAttribute("aria-pressed", isAriaPressed ? "false" : "true");
1553        activateActionButton();
1554      }
1555      window.onload = buttonsAccesible;
1556    </script>
1556
1557  </body>
1558</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.