✈️ From City - Transform

🎯 Objetivo

Transformar cualquier HTML o texto fuente de las páginas “Desde [ciudad]” (vuelos de salida) en un HTML estandarizado Vueling, con formato visual y semántico coherente.
Debe mantener todo el contenido original, aplicar las estructuras y clases oficiales, y reflejar el diseño aprobado.
No uses markdown (###, **, -) ni bloques de código (```html).  
Genera siempre el contenido en HTML limpio (usa solo etiquetas HTML válidas como <h2>, <h3>, <p>, <ul>, <li>, <strong>, <a>, etc.).

⚙️ Normas generales

No omitir contenido.
Todo lo que aparezca en el texto original debe conservarse (ni eliminar ni reescribir).

No inventar ni añadir información nueva.

Estructura base:

Usar las clases obligatorias:

Titulares h2: class="__pfs __bss __pfs"

Subtitulares h3: class="__pfs __bss __pfs"

Párrafos y listas: class="__pfs __bss __pfs"

Acordeones FAQ:

h3 class="__pfs __bss __pfs vyaccordion"

div class="__pfs __bss __pfs vypanel"

Cajas grises
Solo se usan para:

“Cómo llegar al aeropuerto”

“Preguntas frecuentes”

Formato visual de caja gris:

🧱 Estructura estándar esperada para landings “From City”

SECCIÓN 1: Qué tener en cuenta antes de volar

Contiene:

h2 principal

Llegar con tiempo

Documentación

Equipaje

Check-in online

Terminal de salida

🟡 Sin caja gris.
Todo el contenido va en bloque blanco estándar.

SECCIÓN 2: Cómo llegar al aeropuerto (CAJA GRIS)

⚠️ Importante:
El h2 “Cómo llegar al aeropuerto de [Ciudad]” y su primer párrafo introductorio deben ir dentro de la caja gris, no fuera.

Así:

<div class="__pfs" style="background:#f3f3f3; border-radius:8px; padding:24px; margin:40px 0;">
  <h2 class="__pfs __bss __pfs"><strong>Cómo llegar al aeropuerto de Oporto desde el centro</strong></h2>
  <p class="__pfs __bss __pfs">
    El Aeropuerto de Oporto está bien conectado con el centro de la ciudad...
  </p>
  
</div>

Nunca dejar el título fuera de la caja, ya que forma parte de ese bloque de información práctica.

SECCIÓN 3: Qué hacer en el aeropuerto

Incluye:

h2 principal

Subapartados: Relajarse, Comer, Comprar, Wi-Fi, Familias
🟡 Sin caja gris.

SECCIÓN 4: Preguntas frecuentes (CAJA GRIS + ACORDEONES)

Estructura:

<div class="__pfs" style="background:#f3f3f3; border-radius:8px; padding:24px; margin:32px 0;">
  <h2 class="__pfs __bss __pfs VY_FAQTitle">Preguntas frecuentes</h2>

<h3 class="__pfs __bss __pfs vyaccordion">[Pregunta]</h3>
  <div class="__pfs __bss __pfs vypanel">
    <p class="__pfs __bss __pfs">[Respuesta]</p>
  </div>
</div>

🔗 Enlaces oficiales que deben mantenerse

Documentación de viaje:
https://help.vueling.com/hc/es/articles/19798843861393-Documentaci%C3%B3n-para-viajar

Check-in online:
https://help.vueling.com/hc/es/articles/19798828851473-Check-in-online

Ambos con target="_blank" y rel="noopener".

✅ Checklist antes de entregar
Elemento	Cumple
Todo el contenido original está incluido	☐
Clases __pfs __bss __pfs aplicadas correctamente	☐
Caja gris SOLO en “Cómo llegar” y “Preguntas frecuentes”	☐
El h2 “Cómo llegar…” y su párrafo introductorio están dentro de la caja gris	☐
Links con target="_blank" y rel="noopener"	☐
FAQ en formato acordeón (vyaccordion / vypanel)	☐
Sin <html>, <body> ni CSS externos	☐