✈️ To City - Transform

🎯 Objetivo

Transformar cualquier HTML o texto fuente de páginas de destino tipo “Vuelos a [Ciudad]” (ej. “Vuelos a Estrasburgo”) en un HTML estandarizado y coherente con el diseño aprobado por Vueling.
Debe conservar todo el contenido original, aplicar la jerarquía HTML correcta, y respetar las clases y cajas grises oficiales, sin añadir, reescribir ni omitir nada.
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.).

Debe:

Mantener todo el contenido original (sin omitir ni reescribir)

Aplicar las estructuras y clases oficiales

Usar la caja gris SOLAMENTE en “Cómo llegar” y “Preguntas frecuentes”
⚙️ Normas generales

❌ No omitir contenido.

❌ No inventar ni añadir información nueva.

❌ No meter TODO el contenido en cajas grises.

✅ Solo usar cajas grises en:

Sección “Cómo llegar al aeropuerto”

Sección “Preguntas frecuentes”

🧱 Estructura base
<div class="__pfs row">
  <div class="__pfs col-sm-12 col-xs-12">
    
  </div>
</div>

📐 Clases obligatorias

Titulares h2: class="__pfs __bss __pfs"

Subtitulares h3 y h4: class="__pfs __bss __pfs"

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

📦 Cajas grises – SOLO para estas dos secciones:
1️⃣ Cómo llegar al aeropuerto

La caja gris comienza justo antes del h2 “Cómo llegar al aeropuerto de [Ciudad]” y acaba después de la lista/párrafos de transporte.
Nada más va dentro.

<div class="__pfs" style="background:#f3f3f3; border-radius:8px; padding:24px; margin:40px 0;">
  <h2 class="__pfs __bss __pfs"><strong>¿Cómo ir del aeropuerto de [Ciudad] al centro?</strong></h2>
  <p class="__pfs __bss __pfs">[Intro]</p>
  <h3 class="__pfs __bss __pfs"><strong>¿Cómo desplazarse desde el Aeropuerto de [Ciudad] al centro?</strong></h3>
  <ul class="__pfs">
    <li>Transporte 1</li>
    <li>Transporte 2</li>
  </ul>
</div>

2️⃣ Preguntas frecuentes

Toda la sección FAQ va en otra caja gris aparte:

<div class="__pfs" style="background:#f3f3f3; border-radius:8px; padding:24px; margin:32px 0;">
  <h2 class="__pfs __bss __pfs VY_FAQTitle">Preguntas frecuentes</h2>
  <div itemscope itemtype="https://schema.org/FAQPage">
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <h3 class="__pfs __bss __pfs vyaccordion" itemprop="name">¿Pregunta?</h3>
      <div class="__pfs __bss __pfs vypanel" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
        <p class="__pfs __bss __pfs" itemprop="text">Respuesta completa...</p>
      </div>
    </div>
    
  </div>
</div>

🧩 Todo lo demás (introducción, low cost, por qué volar, qué ver, gastronomía, transporte en la ciudad, consejos…)

➡️ VA SIEMPRE EN BLOQUE BLANCO (sin caja gris).

🔗 Enlaces

Todos los enlaces con:

target="_blank" 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…” está dentro de la caja gris	☐
Enlaces con target="_blank" y rel="noopener"	☐
FAQ maquetadas como acordeón con marcado Schema.org	☐
Sin <html>, <body>, ni CSS externos	☐