/* Página de aerolínea (Iberia y siguientes). Portado del mockup aprobado.
   Reutiliza base.css + home.css + derechos.css; aquí solo lo propio. */
/* .crumb: fuente unica en derechos.css (centrado + una sola linea con ellipsis). */
.dp .hero-in{max-width:820px;margin:0 auto;text-align:center}
.dp .hero .btn-cta{font-size:15px;padding:13px 26px;gap:8px}
.dp .hero .btn-cta svg{width:17px;height:17px}

main.dp{position:relative}
.dp .brand-wash{position:absolute;left:0;right:0;top:0;height:1300px;pointer-events:none;z-index:0}
.dp>section{position:relative;z-index:1}
.dp .hero,.dp .a-motivos{background:transparent}
.dp .subnav{z-index:55}
.dp .a-mono{width:76px;height:76px;border-radius:20px;background:var(--c1);color:var(--tx);display:grid;place-items:center;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;box-shadow:0 10px 30px var(--sh);margin:0 auto 22px}
.dp .a-mono--logo{background:#fff;overflow:hidden}
.dp .a-mono--logo img{width:100%;height:100%;object-fit:contain;padding:11px;box-sizing:border-box;display:block;border-radius:inherit}
.dp .a-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin-bottom:14px}
.dp .a-eyebrow::before,.dp .a-eyebrow::after{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.dp .a-hero .btn-cta{font-size:15px;padding:13px 26px;gap:8px;margin-top:28px}
.dp .a-hero .btn-cta svg{width:17px;height:17px}
.dp .a-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.dp .a-stat{background:#fff;border:1px solid var(--gray-100);border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.06);padding:26px 24px;text-align:center}
.dp .a-stat .n{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.dp .a-stat .d{font-size:.9rem;color:var(--gray-500);line-height:1.5;margin-top:10px}
@media(max-width:760px){.dp .a-stats{grid-template-columns:1fr}}
.dp .a-why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.dp .a-why .w{background:#fff;border:1px solid var(--gray-100);border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.06);padding:26px 24px}
.dp .a-why .w-ic{width:46px;height:46px;border-radius:13px;background:var(--wash2);color:var(--ink);display:grid;place-items:center;margin-bottom:14px}
.dp .a-why .w-ic svg{width:23px;height:23px}
.dp .a-why h4{font-size:1rem;font-weight:700;color:var(--dark)}
.dp .a-why p{color:var(--gray-500);font-size:.9rem;line-height:1.6;margin-top:7px}
@media(max-width:1000px){.dp .a-why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dp .a-why{grid-template-columns:1fr}}
/* Cards de "Cuándo te debe compensación" (#motivos): la card es un enlace a la
   página de esa incidencia. El grid ya iguala alturas; con flex-column + el CTA a
   margin-top:auto, TODOS los CTA quedan a la misma altura (abajo). El CTA usa la
   animación canónica de enlace: subrayado que crece 0→100% (como .bc .more) +
   flecha que se desplaza 3px (como .air-card .arw). box-decoration-break:clone →
   el subrayado se dibuja bajo cada línea si el texto envuelve. */
.dp #motivos .a-why .w{display:flex;flex-direction:column;transition:box-shadow .2s cubic-bezier(.22,.61,.36,1)}
.dp #motivos .a-why .w:hover{box-shadow:0 4px 8px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.08)} /* mismo hover que el bento .bc y las .ar-tile: profundiza sombra, no levanta */
.dp #motivos .w-cta-wrap{margin-top:auto;padding-top:14px}
.dp #motivos .w-cta{display:inline;color:var(--blue);font-weight:600;font-size:.9rem;line-height:1.55;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .2s cubic-bezier(.22,.61,.36,1)}
.dp #motivos .w:hover .w-cta,.dp #motivos .w:focus-visible .w-cta{background-size:100% 1px}
.dp #motivos .w-cta svg{width:14px;height:14px;vertical-align:-2px;margin-left:1px;transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.dp #motivos .w-cta-nb{white-space:nowrap} /* la flecha nunca se separa de la última palabra */
.dp #motivos .w:hover .w-cta svg,.dp #motivos .w:focus-visible .w-cta svg{transform:translateX(3px)}
/* ── A QUIÉN RECLAMAR (operadores): 3 columnas, apila a 1 en móvil ── */
.dp #operadores .a-why{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.dp #operadores .a-why .w{flex:1 1 300px;max-width:380px}
@media(max-width:900px){.dp #operadores .a-why .w{flex-basis:100%;max-width:none}}
/* Logos = MISMO componente .al-logo del directorio (aerolineas.css), sin
   duplicar código. En el directorio .al-logo es flex-item (se blockifica); aquí
   van sueltos en la card, así que se les da display:grid para que respeten el
   tamaño 50×50. Aquí sólo el espaciado/display propio de operadores. */
.dp #operadores .al-logo{display:grid;place-items:center;margin-bottom:15px}
/* SIEMPRE en una sola línea; los que no caben NO se muestran (se recortan). */
.dp #operadores .op-logos{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:15px;overflow:hidden}
.dp #operadores .op-logos .al-logo{margin-bottom:0;flex:0 0 auto}
.dp #operadores .stats-legal{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
@media(max-width:560px){.dp #operadores .stats-legal{text-align:left;margin-left:0;max-width:none}}
.dp #importes .stats-legal{text-align:center;max-width:70ch;margin-left:auto;margin-right:auto}
@media(max-width:560px){.dp #importes .stats-legal{text-align:left;margin-left:0;max-width:none}}
/* ── LA AEROLÍNEA ── */
.dp #aerolinea .a-air-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-top:6px}
.dp .a-air-text .section-title{margin:.5rem 0 1.3rem}
.dp .a-air-text p{color:var(--gray-500);line-height:1.75;margin:0 0 1.1rem;font-size:1.02rem}
.dp .a-air-text p:last-child{margin-bottom:0}
.dp .a-air-text strong{color:var(--dark);font-weight:600}
/* Cards tamaño MEDIO — ni estiradas ni diminutas; bloque centrado respecto al texto de la izquierda */
.dp .a-air-cards{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
.dp .a-air-card{background:#fff;border:1px solid var(--gray-100);border-radius:16px;box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.06);padding:18px 20px;min-height:118px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.dp .a-air-card .k{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400)}
.dp .a-air-card .v{font-size:1rem;font-weight:600;color:var(--dark);line-height:1.35}
@media(max-width:860px){.dp #aerolinea .a-air-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:460px){.dp .a-air-cards{grid-template-columns:1fr;grid-auto-rows:auto}}