✈️ City to City - Transform

🎯 Objetivo

Transformar cualquier HTML o texto fuente de las páginas “City to City” (por ejemplo “Vuelos Barcelona-Estrasburgo”) 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">[Pregunta]</h3>
<div class="__pfs __bss __pfs vypanel">
  <p class="__pfs __bss __pfs">[Respuesta]</p>
</div>

Cajas grises
Se usan únicamente para:

“Cómo llegar al aeropuerto”

“Preguntas frecuentes”

Formato visual de caja gris:

🧱 Estructura estándar esperada para landings “City to City”
SECCIÓN 1: Introducción y datos del vuelo

Contiene:

h2 principal (“Vuelos [Ciudad]-[Ciudad]”)

Párrafos introductorios

Tabla/box con duración del vuelo, distancia y transporte público (formato de iconos oficial)
<div class="__pfs __pfs __pfs __pfs">
  <div role="" aria-label="" aria-labelledby="" aria-describedby="" class="__pfs __pfs __pfs __pfs px-3 py-4">
    <div role="" aria-label="" aria-labelledby="" aria-describedby="" class="__pfs __pfs __pfs __pfs __bss __psc">
      <div class="__pfs __pfs __pfs __pfs __pfs __pfs row">

<div class="__pfs __pfs __pfs __pfs __pfs __pfs col-sm-4" style="margin-bottom: 16px;">
          <div class="__pfs __pfs __pfs __pfs __pfs __pfs" style="border: 1px solid #e9e9e9; border-radius: 8px; min-height: 106px; text-align: center;">
            <div style="text-align: -webkit-center;">
              <img style="height: 36px; margin-bottom: 16px; margin-top: 16px;" src="https://static.vueling.com/corporative7/media/2383/flight_time_l-min.png" alt="">
            </div>
            <p class="__pfs __pfs __pfs __pfs __pfs __pfs __pfs">
              <strong class="__pfs" style="font-size: 18px;">Duración del vuelo</strong>
            </p>
            <p class="__pfs __pfs __pfs" style="font-size: 18px;">[Duración]</p>
          </div>
        </div>

<div class="__pfs __pfs __pfs __pfs __pfs __pfs col-sm-4" style="margin-bottom: 16px;">
          <div class="__pfs __pfs __pfs __pfs __pfs __pfs" style="border: 1px solid #e9e9e9; border-radius: 8px; min-height: 106px; text-align: center;">
            <div style="text-align: -webkit-center;">
              <img style="height: 36px; margin-bottom: 16px; margin-top: 16px;" src="https://static.vueling.com/corporative7/media/2384/map_pin2_l-min.png" alt="">
            </div>
            <p class="__pfs __pfs __pfs __pfs __pfs __pfs __pfs">
              <strong class="__pfs" style="font-size: 18px;">Distancia</strong>
            </p>
            <p class="__pfs __pfs __pfs" style="font-size: 18px;">[Distancia]</p>
          </div>
        </div>

<div class="__pfs __pfs __pfs __pfs __pfs __pfs col-sm-4" style="margin-bottom: 16px;">
          <div class="__pfs __pfs __pfs __pfs __pfs __pfs" style="border: 1px solid #e9e9e9; border-radius: 8px; min-height: 106px; text-align: center;">
            <div style="text-align: -webkit-center;">
              <img style="height: 36px; margin-bottom: 16px; margin-top: 16px;" src="https://static.vueling.com/corporative7/media/2382/bus_l-min.png" alt="">
            </div>
            <p class="__pfs __pfs __pfs __pfs __pfs __pfs __pfs">
              <strong class="__pfs" style="font-size: 18px;">Transporte público</strong>
            </p>
            <p class="__pfs __pfs __pfs" style="font-size: 18px;">[Ej: Tren, bus y taxi]</p>
          </div>
        </div>

</div>
    </div>
  </div>
</div>

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

SECCIÓN 2: Información ampliada del vuelo

h2 “Vuelos [Ciudad]-[Ciudad] en avión”

Párrafos con detalles del trayecto, aeropuertos de salida y llegada, servicios a bordo generales, horarios.
🟡 Sin caja gris.

SECCIÓN 3: Servicios a bordo

h2 “Servicios a bordo en vuelos [Ciudad]-[Ciudad]”

Subapartados h3 “Comida y bebida”, “Wifi”, “Mascotas”, “Personas con necesidades especiales”
🟡 Sin caja gris (salvo que se especifique en proyecto).

SECCIÓN 4: 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.

Ejemplo correcto:

<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.

SECCIÓN 5: Información del aeropuerto

h2 “Todo lo que necesitas saber sobre el Aeropuerto [Nombre]”

Lista de servicios: Salas VIP, taxis, Wifi gratuito, accesibilidad, consigna, zonas comerciales, aparcamiento, áreas de descanso
🟡 Puede ir en bloque normal o caja gris si se pide explícito en proyecto.

SECCIÓN 6: Transporte público en destino

h2 “Cómo moverte por [Ciudad destino] en transporte público”

Subapartado h3 “Cómo pagar el transporte en [Ciudad]”

Lista con billetes, tarjetas, bonos, pago contactless

Subapartado h3 “Cómo validar tu viaje”

Lista con pasos de validación
🟡 Sin caja gris.

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

Formato:

<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 1?</h3>
  <div class="__pfs __bss __pfs vypanel">
    <p class="__pfs __bss __pfs">Respuesta completa...</p>
  </div>

<h3 class="__pfs __bss __pfs vyaccordion">¿Pregunta 2?</h3>
  <div class="__pfs __bss __pfs vypanel">
    <p class="__pfs __bss __pfs">Respuesta completa...</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

Todos 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	☐