Cabecera en una línea; vuelve el boceto 5 y va antes del panel

README.md

@@ -51,9 +51,9 @@ Borrador para la asamblea en [`docs/ideario.md`](docs/ideario.md). Propuesta: **
 
 `sites/` tiene dos webs con el mismo diseño: `takethestreet/` (takethestreet.net, internacional) y `tomalacalle/` (tomalacalle.net, estatal). HTML y CSS, sin JavaScript, igual que acampada26s.net. El deck va aparte, en `deck.takethestreet.net`. La portada cuenta el ideario de arriba abajo:
 
-1. **Cabecera**: la firma grande y centrada como título, sin lema.
-2. **Síguelas**: un panel como el del deck, con el árbol de colectivos, una columna por acampada con sus cuentas de verdad y un mapa. Internacional en takethestreet.net y estatal en tomalacalle.net. En móvil va una acampada por fila.
-3. **Dibujo** de la plaza y tres botones (Únete, Encuentra tu acampada, Difunde).
+1. **Cabecera** en una línea: la farola a la izquierda, el logotipo en el centro como título (sin lema) y los idiomas a la derecha.
+2. **Dibujo** (el boceto 5, el cruce) y tres botones (Únete, Encuentra tu acampada, Difunde).
+3. **Síguelas**: un panel como el del deck, con el árbol de colectivos, una columna por acampada con sus cuentas de verdad y un mapa. Internacional en takethestreet.net y estatal en tomalacalle.net. En móvil va una acampada por fila.
 4. **Cuatro ejes**: una tarjeta por eje, con una piña de monigotes en su color (*Techo* naranja, *Tierra* verde, *Sin fronteras* amarillo, *Paz* azul). Debajo, la franja violeta de los feminismos.
 5. **Quiénes somos**: dos párrafos, de Sol a todas las luchas.
 6. **Acampadas**: por país en takethestreet.net y por territorio en tomalacalle.net, más «¿Y tu ciudad?».
@@ -255,7 +255,7 @@ Tres piezas, cada una con su uso:
 
 ![Hoja de marca](docs/marca/hoja.png)
 
-- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna que alumbra hacia abajo con dos rayos de luz entrelazados, naranja y amarillo. Es la luz que se queda encendida en la plaza. Se genera con `python3 tools/farola.py docs/marca`. Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja.
+- **Símbolo** (`docs/marca/simbolo*.svg`): una farola al estilo de los *throw-ups* de los writers: relleno naranja, contorno negro grueso, brillos blancos, chorreones y destellos en la luz. Es la luz que se queda encendida en la plaza. Se genera con `python3 tools/farola.py docs/marca`. Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja.
 - **Logotipo** (`docs/marca/logotipo*.svg`): «TAKE THE STREET» en **Grindy Brush**, todo en negro (o en blanco sobre negro). Va convertido a trazados, así que no hace falta la fuente. Hay versión en una línea y en dos.
 - **Firma**: símbolo + logotipo. Es lo que va arriba a la izquierda de la web.
 - **Ilustración** (`docs/calle.svg`): la imagen principal de la portada, nunca en la cabecera. Ver el apartado 6.
@@ -274,7 +274,7 @@ Grindy Brush es una versión demo **solo para uso personal**. Antes de usar el l
 
 ## 6. Dibujo
 
-En la web va **la plaza** (`docs/plaza.svg`): el cruce del boceto 5 se abre en una plaza llena de gente, con tiendas, farolas y gente que entra por las cuatro calles. Es el mismo fichero copiado a `sites/<web>/img/calle.svg`.
+En la web va **el boceto 5** (el cruce), copiado a `sites/<web>/img/calle.svg`. **La plaza** (`docs/plaza.svg`) es el mismo cruce abierto en una plaza llena de gente, con tiendas y farolas.
 
 La plaza y los bocetos 6 a 10 se generan con `python3 tools/plazas.py docs/bocetos docs/plaza.svg`.
 

sites/takethestreet/css/web.css

@@ -19,16 +19,17 @@ body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(-
 a { color: inherit; }
 img { max-width: 100%; }
 
-.cab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 22px; }
+.cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 24px; }
+.cab .simbolo { justify-self: start; line-height: 0; }
+.cab .simbolo img { height: 92px; }
 .cab h1 { margin: 0; line-height: 0; }
-.firma { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
-.firma .simbolo { height: 120px; }
-.firma .logotipo { height: 78px; margin-bottom: 6px; }
-.idiomas { align-self: flex-end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; }
+.firma { display: block; line-height: 0; }
+.firma .logotipo { height: 72px; }
+.idiomas { justify-self: end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; }
 .idiomas a { border: var(--bd); border-radius: 6px; padding: 4px 9px 2px; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); }
 .idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); }
 
-.portada { padding: 24px 20px 24px; border-top: var(--bd); border-bottom: var(--bd); text-align: center; overflow: hidden; }
+.portada { padding: 0 20px 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; }
 h1 { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.92 var(--bt); text-transform: uppercase; }
 .c-techo { color: var(--techo); } .c-tierra { color: var(--tierra); } .c-fronteras { color: #c99500; } .c-paz { color: var(--paz); }
 .calle { display: block; width: 100%; max-width: 1200px; height: auto; margin: 10px auto 0; }
@@ -72,7 +73,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
 .pie { border-top: var(--bd); padding: 18px 20px; text-align: center; font-size: 14px; }
 .pie p { margin: 4px 0; }
 
-.panel { padding-top: 10px; border-bottom: 0; }
+.panel { padding-top: 32px; }
 .panel > p { margin: 0 0 14px; }
 .tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; font: 20px var(--bt); letter-spacing: .03em; }
 .tags span { border: 2px dashed var(--fg); padding: 1px 8px; }
@@ -119,11 +120,10 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
   .redes { gap: 8px; }
   .red { font-size: 18px; padding: 7px 10px 5px; }
   .mapa { font-size: 15px; }
-  .cab { padding: 10px 12px 16px; }
-  .idiomas { align-self: center; }
-  .firma { gap: 10px; }
-  .firma .simbolo { height: 56px; }
-  .firma .logotipo { height: 32px; margin-bottom: 3px; }
+  .cab { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px 14px; }
+  .cab .simbolo img { height: 54px; }
+  .firma .logotipo { height: auto; width: 100%; max-height: 40px; }
+  .idiomas { grid-column: 1 / -1; justify-self: center; }
   .calle { width: 150%; max-width: none; margin-left: -25%; }
   .ejes, .principios { grid-template-columns: minmax(0, 1fr); }
   .paises { gap: 14px; }

sites/takethestreet/es/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
   <nav class="idiomas" aria-label="Idioma"><a href="../">EN</a><a href="../es/" aria-current="page">ES</a><a href="../pt/">PT</a><a href="../it/">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Gente de colores llega por dos calles y llena el cruce">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Únete</a>
+    <a class="bt" href="#acampadas">Encuentra tu acampada</a>
+    <a class="bt" href="#difunde">Difunde</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Síguelas</h2>
   <p>Cada acampada habla con su propia voz. Aquí están sus cuentas.</p>
@@ -62,14 +72,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Una plaza llena de gente de colores y tiendas de campaña">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Únete</a>
-    <a class="bt" href="#acampadas">Encuentra tu acampada</a>
-    <a class="bt" href="#difunde">Difunde</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Cuatro ejes</h2>

sites/takethestreet/fr/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
   <nav class="idiomas" aria-label="Langue"><a href="../">EN</a><a href="../es/">ES</a><a href="../pt/">PT</a><a href="../it/">IT</a><a href="../fr/" aria-current="page">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Des gens en couleurs arrivent par deux rues et remplissent le carrefour">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Rejoins-nous</a>
+    <a class="bt" href="#acampadas">Trouve ton campement</a>
+    <a class="bt" href="#difunde">Fais tourner</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Suis-les</h2>
   <p>Chaque campement parle de sa propre voix. Voici leurs comptes.</p>
@@ -62,14 +72,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Une place pleine de monde en couleurs et de tentes">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Rejoins-nous</a>
-    <a class="bt" href="#acampadas">Trouve ton campement</a>
-    <a class="bt" href="#difunde">Fais tourner</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quatre axes</h2>

sites/takethestreet/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="./"><img src="img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="./"><img class="logotipo" src="img/logotipo.svg" alt="Take the Street"></a></h1>
   <nav class="idiomas" aria-label="Language"><a href="./" aria-current="page">EN</a><a href="es/">ES</a><a href="pt/">PT</a><a href="it/">IT</a><a href="fr/">FR</a></nav>
-  <h1><a class="firma" href="./"><img class="simbolo" src="img/simbolo.svg" alt=""><img class="logotipo" src="img/logotipo.svg" alt="Take the Street"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="img/calle.svg" alt="Colourful people pour in from two streets and fill the crossing">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Join us</a>
+    <a class="bt" href="#acampadas">Find your camp</a>
+    <a class="bt" href="#difunde">Spread the word</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Follow them</h2>
   <p>Each camp speaks with its own voice. Here are their accounts.</p>
@@ -62,14 +72,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="img/calle.svg" alt="A square full of colourful people and tents">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Join us</a>
-    <a class="bt" href="#acampadas">Find your camp</a>
-    <a class="bt" href="#difunde">Spread the word</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Four axes</h2>

sites/takethestreet/it/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
   <nav class="idiomas" aria-label="Lingua"><a href="../">EN</a><a href="../es/">ES</a><a href="../pt/">PT</a><a href="../it/" aria-current="page">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Gente colorata arriva da due strade e riempie l'incrocio">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Unisciti</a>
+    <a class="bt" href="#acampadas">Trova la tua accampata</a>
+    <a class="bt" href="#difunde">Diffondi</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Seguile</h2>
   <p>Ogni accampata parla con la propria voce. Ecco i loro account.</p>
@@ -62,14 +72,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Una piazza piena di gente colorata e di tende">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Unisciti</a>
-    <a class="bt" href="#acampadas">Trova la tua accampata</a>
-    <a class="bt" href="#difunde">Diffondi</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quattro assi</h2>

sites/takethestreet/pt/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
   <nav class="idiomas" aria-label="Idioma"><a href="../">EN</a><a href="../es/">ES</a><a href="../pt/" aria-current="page">PT</a><a href="../it/">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Take the Street"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Gente colorida chega por duas ruas e enche o cruzamento">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Junta-te</a>
+    <a class="bt" href="#acampadas">Encontra a tua acampada</a>
+    <a class="bt" href="#difunde">Divulga</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Segue-as</h2>
   <p>Cada acampada fala com a sua própria voz. Aqui estão as suas contas.</p>
@@ -62,14 +72,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Uma praça cheia de gente colorida e de tendas">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Junta-te</a>
-    <a class="bt" href="#acampadas">Encontra a tua acampada</a>
-    <a class="bt" href="#difunde">Divulga</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quatro eixos</h2>

sites/tomalacalle/css/web.css

@@ -19,16 +19,17 @@ body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(-
 a { color: inherit; }
 img { max-width: 100%; }
 
-.cab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 22px; }
+.cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 24px; }
+.cab .simbolo { justify-self: start; line-height: 0; }
+.cab .simbolo img { height: 92px; }
 .cab h1 { margin: 0; line-height: 0; }
-.firma { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
-.firma .simbolo { height: 120px; }
-.firma .logotipo { height: 78px; margin-bottom: 6px; }
-.idiomas { align-self: flex-end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; }
+.firma { display: block; line-height: 0; }
+.firma .logotipo { height: 72px; }
+.idiomas { justify-self: end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; }
 .idiomas a { border: var(--bd); border-radius: 6px; padding: 4px 9px 2px; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); }
 .idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); }
 
-.portada { padding: 24px 20px 24px; border-top: var(--bd); border-bottom: var(--bd); text-align: center; overflow: hidden; }
+.portada { padding: 0 20px 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; }
 h1 { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.92 var(--bt); text-transform: uppercase; }
 .c-techo { color: var(--techo); } .c-tierra { color: var(--tierra); } .c-fronteras { color: #c99500; } .c-paz { color: var(--paz); }
 .calle { display: block; width: 100%; max-width: 1200px; height: auto; margin: 10px auto 0; }
@@ -72,7 +73,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
 .pie { border-top: var(--bd); padding: 18px 20px; text-align: center; font-size: 14px; }
 .pie p { margin: 4px 0; }
 
-.panel { padding-top: 10px; border-bottom: 0; }
+.panel { padding-top: 32px; }
 .panel > p { margin: 0 0 14px; }
 .tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; font: 20px var(--bt); letter-spacing: .03em; }
 .tags span { border: 2px dashed var(--fg); padding: 1px 8px; }
@@ -119,11 +120,10 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
   .redes { gap: 8px; }
   .red { font-size: 18px; padding: 7px 10px 5px; }
   .mapa { font-size: 15px; }
-  .cab { padding: 10px 12px 16px; }
-  .idiomas { align-self: center; }
-  .firma { gap: 10px; }
-  .firma .simbolo { height: 56px; }
-  .firma .logotipo { height: 32px; margin-bottom: 3px; }
+  .cab { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px 14px; }
+  .cab .simbolo img { height: 54px; }
+  .firma .logotipo { height: auto; width: 100%; max-height: 40px; }
+  .idiomas { grid-column: 1 / -1; justify-self: center; }
   .calle { width: 150%; max-width: none; margin-left: -25%; }
   .ejes, .principios { grid-template-columns: minmax(0, 1fr); }
   .paises { gap: 14px; }

sites/tomalacalle/en/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
   <nav class="idiomas" aria-label="Language"><a href="../">ES</a><a href="../en/" aria-current="page">EN</a><a href="../pt/">PT</a><a href="../it/">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Colourful people pour in from two streets and fill the crossing">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Join us</a>
+    <a class="bt" href="#acampadas">Find your camp</a>
+    <a class="bt" href="#difunde">Spread the word</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Follow them</h2>
   <p>Each camp speaks with its own voice. Here are their accounts.</p>
@@ -82,14 +92,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="A square full of colourful people and tents">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Join us</a>
-    <a class="bt" href="#acampadas">Find your camp</a>
-    <a class="bt" href="#difunde">Spread the word</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Four axes</h2>

sites/tomalacalle/fr/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
   <nav class="idiomas" aria-label="Langue"><a href="../">ES</a><a href="../en/">EN</a><a href="../pt/">PT</a><a href="../it/">IT</a><a href="../fr/" aria-current="page">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Des gens en couleurs arrivent par deux rues et remplissent le carrefour">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Rejoins-nous</a>
+    <a class="bt" href="#acampadas">Trouve ton campement</a>
+    <a class="bt" href="#difunde">Fais tourner</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Suis-les</h2>
   <p>Chaque campement parle de sa propre voix. Voici leurs comptes.</p>
@@ -82,14 +92,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Une place pleine de monde en couleurs et de tentes">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Rejoins-nous</a>
-    <a class="bt" href="#acampadas">Trouve ton campement</a>
-    <a class="bt" href="#difunde">Fais tourner</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quatre axes</h2>

sites/tomalacalle/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="./"><img src="img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="./"><img class="logotipo" src="img/logotipo.svg" alt="Toma la calle"></a></h1>
   <nav class="idiomas" aria-label="Idioma"><a href="./" aria-current="page">ES</a><a href="en/">EN</a><a href="pt/">PT</a><a href="it/">IT</a><a href="fr/">FR</a></nav>
-  <h1><a class="firma" href="./"><img class="simbolo" src="img/simbolo.svg" alt=""><img class="logotipo" src="img/logotipo.svg" alt="Toma la calle"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="img/calle.svg" alt="Gente de colores llega por dos calles y llena el cruce">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Únete</a>
+    <a class="bt" href="#acampadas">Encuentra tu acampada</a>
+    <a class="bt" href="#difunde">Difunde</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Síguelas</h2>
   <p>Cada acampada habla con su propia voz. Aquí están sus cuentas.</p>
@@ -82,14 +92,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="img/calle.svg" alt="Una plaza llena de gente de colores y tiendas de campaña">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Únete</a>
-    <a class="bt" href="#acampadas">Encuentra tu acampada</a>
-    <a class="bt" href="#difunde">Difunde</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Cuatro ejes</h2>

sites/tomalacalle/it/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
   <nav class="idiomas" aria-label="Lingua"><a href="../">ES</a><a href="../en/">EN</a><a href="../pt/">PT</a><a href="../it/" aria-current="page">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Gente colorata arriva da due strade e riempie l'incrocio">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Unisciti</a>
+    <a class="bt" href="#acampadas">Trova la tua accampata</a>
+    <a class="bt" href="#difunde">Diffondi</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Seguile</h2>
   <p>Ogni accampata parla con la propria voce. Ecco i loro account.</p>
@@ -82,14 +92,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Una piazza piena di gente colorata e di tende">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Unisciti</a>
-    <a class="bt" href="#acampadas">Trova la tua accampata</a>
-    <a class="bt" href="#difunde">Diffondi</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quattro assi</h2>

sites/tomalacalle/pt/index.html

@@ -15,11 +15,21 @@
 </head>
 <body>
 <header class="cab">
+  <a class="simbolo" href="../"><img src="../img/simbolo.svg" alt=""></a>
+  <h1><a class="firma" href="../"><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
   <nav class="idiomas" aria-label="Idioma"><a href="../">ES</a><a href="../en/">EN</a><a href="../pt/" aria-current="page">PT</a><a href="../it/">IT</a><a href="../fr/">FR</a></nav>
-  <h1><a class="firma" href="../"><img class="simbolo" src="../img/simbolo.svg" alt=""><img class="logotipo" src="../img/logotipo.svg" alt="Toma la calle"></a></h1>
 </header>
 
 <main>
+<section class="portada">
+  <img class="calle" src="../img/calle.svg" alt="Gente colorida chega por duas ruas e enche o cruzamento">
+  <nav class="acciones">
+    <a class="bt" href="#unete">Junta-te</a>
+    <a class="bt" href="#acampadas">Encontra a tua acampada</a>
+    <a class="bt" href="#difunde">Divulga</a>
+  </nav>
+</section>
+
 <section class="bloque panel" id="red">
   <h2>Segue-as</h2>
   <p>Cada acampada fala com a sua própria voz. Aqui estão as suas contas.</p>
@@ -82,14 +92,6 @@
   </div>
 </section>
 
-<section class="portada">
-  <img class="calle" src="../img/calle.svg" alt="Uma praça cheia de gente colorida e de tendas">
-  <nav class="acciones">
-    <a class="bt" href="#unete">Junta-te</a>
-    <a class="bt" href="#acampadas">Encontra a tua acampada</a>
-    <a class="bt" href="#difunde">Divulga</a>
-  </nav>
-</section>
 
 <section class="bloque" id="ejes">
   <h2>Quatro eixos</h2>