/* ==========================================================================
   Landings (programas/porteros, programas/tecnificacion…): piezas comunes
   Migas, hero con foto a la derecha, datos clave, «si vives fuera de España»
   (rutas) y preguntas frecuentes. Cada landing añade su propio CSS.
   ========================================================================== */

.page--lp .nav a { white-space: nowrap; }
.page--lp main > section { position: relative; }

/* ---------- Migas ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--line); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 0.8em; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; padding: 6px 0; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }

/* ---------- 01 · Hero ---------- */
.hero--lp { min-height: max(100svh, 760px); background: var(--navy-950); }
/* La foto ocupa la parte derecha; cada landing fija el encuadre con --lp-pos y --lp-pos-mob */
.lp-hero__bg { inset: -8% 0 0 var(--lp-bg-left, 38%); }
.lp-hero__bg img { object-position: var(--lp-pos, 50% 40%); }
.lp-hero__shade {
  background:
    linear-gradient(90deg, var(--navy-950) 0%, var(--navy-950) 38%, rgba(2, 14, 28, 0.55) 48%, rgba(2, 14, 28, 0.05) 66%, rgba(2, 14, 28, 0) 100%),
    linear-gradient(0deg, var(--navy-950) 0%, rgba(2, 14, 28, 0) 34%),
    linear-gradient(180deg, rgba(2, 14, 28, 0.8) 0%, rgba(2, 14, 28, 0) 26%);
}
.lp-hero__lines { z-index: 2; }
.lp-hero__lines path { stroke-width: 1.4; stroke-dasharray: 2 9; stroke-linecap: round; }
.lp-hero__lines path:not(.is-soft) { stroke-dasharray: none; }
.lp-hero__col { z-index: 4; }
.lp-hero__eyebrow { position: relative; z-index: 4; margin-top: clamp(14px, 2.4vh, 28px); color: var(--white); }
.lp-hero__title { position: relative; z-index: 4; margin-top: clamp(14px, 2.4vh, 26px); font: 900 min(6.6vw, 11vh)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.016em; max-width: 6.7em; }
.lp-hero__title > span { display: block; }
.lp-hero__content { margin-top: clamp(18px, 3vh, 36px); padding-top: 0; max-width: min(560px, 46vw); }
.lp-hero__lead { max-width: 44ch; }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.lp-hero__actions .btn { margin-top: 0; }

.lp-facts { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 980px); margin: auto 0 0; padding-top: clamp(28px, 5vh, 56px); }
.lp-facts > div { padding: 14px clamp(12px, 1.6vw, 24px) 4px 0; border-top: 1px solid var(--line-soft); }
.lp-facts > div + div { padding-left: clamp(12px, 1.6vw, 24px); box-shadow: inset 1px 0 0 var(--line-soft); }
.lp-facts dt { font: 600 0.6875rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--line); }
.lp-facts dd { margin: 8px 0 0; font: 800 clamp(1.15rem, 1.6vw, 1.6rem)/1 var(--font-display); text-transform: uppercase; }
.lp-facts b { color: var(--red); font-weight: 900; }
.lp-hero__note { top: auto; bottom: clamp(150px, 24vh, 240px); right: calc(var(--gutter) + 2vw); transform: rotate(-6deg); }
/* ---------- 05 · Venir a Valencia ---------- */
.lp-stay { padding: var(--space-xl) var(--gutter); background: var(--navy); }
.lp-stay__head { display: grid; gap: clamp(16px, 2vw, 28px); max-width: 1100px; }
.lp-routes { margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--line-soft); }
.lp-route__link { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.4fr) 52px; align-items: center; gap: clamp(14px, 2.4vw, 40px); padding: clamp(18px, 3vh, 30px) 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.lp-route__link::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--cobalt); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.6s var(--ease-out); }
.lp-route__link:hover::before, .lp-route__link:focus-visible::before { transform: scaleY(1); }
.lp-route__icon { width: 48px; height: 48px; }
.lp-route__icon svg { width: 100%; height: 100%; overflow: visible; }
.lp-route__icon svg * { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-route__icon svg .ic-red { stroke: var(--red); transition: stroke 0.3s linear; }
.lp-route__link:hover .lp-route__icon svg .ic-red, .lp-route__link:focus-visible .lp-route__icon svg .ic-red { stroke: var(--white); }
.lp-route__name { font: 900 clamp(1.9rem, 3.6vw, 3.8rem)/0.95 var(--font-display); text-transform: uppercase; transition: transform 0.6s var(--ease-out); }
.lp-route__link:hover .lp-route__name, .lp-route__link:focus-visible .lp-route__name { transform: translateX(0.12em); }
.lp-route__text { color: var(--muted); transition: color 0.3s linear; }
.lp-route__link:hover .lp-route__text, .lp-route__link:focus-visible .lp-route__text { color: var(--white); }
.lp-route__arrow { display: grid; place-items: center; width: 52px; height: 52px; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.35); transition: background-color 0.3s linear, color 0.3s linear; }
.lp-route__arrow svg { width: 16px; height: 12px; }
.lp-route__link:hover .lp-route__arrow, .lp-route__link:focus-visible .lp-route__arrow { background: var(--white); color: var(--navy); }

/* ---------- 06 · Preguntas frecuentes ---------- */
.lp-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); padding: var(--space-xl) var(--gutter); background: var(--navy-950); }
.lp-faq__head { display: grid; gap: clamp(16px, 2vw, 28px); align-content: start; position: sticky; top: calc(var(--header-h) + 4vh); }
.lp-faq__list { border-top: 1px solid var(--line-soft); }
.faq { border-bottom: 1px solid var(--line-soft); }
.faq__q { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: clamp(18px, 2.6vh, 26px) 0; cursor: pointer; list-style: none; font: 800 clamp(1.25rem, 1.8vw, 1.7rem)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; transition: color 0.3s linear; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--muted); }
.faq__x { position: relative; flex: none; width: 40px; height: 40px; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.35); transition: background-color 0.3s linear, box-shadow 0.3s linear; }
.faq__x::before, .faq__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -0.8px 0 0 -7px; background: currentColor; transition: transform 0.5s var(--ease-out); }
.faq__x::after { transform: rotate(90deg); }
.faq[open] .faq__x { background: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.faq[open] .faq__x::after { transform: rotate(0deg); }
.faq__a { padding: 0 64px clamp(20px, 3vh, 30px) 0; color: var(--muted); }
.faq__a p { max-width: 60ch; text-wrap: pretty; }
.faq__a a { color: var(--white); }

/* ---------- Bloques comunes ---------- */
.lp-sec { padding: var(--space-xl) var(--gutter); }
.lp-head { display: grid; gap: clamp(16px, 2vw, 28px); max-width: 1100px; }
.lp-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; max-width: none; }
.lp-head--split .lead { justify-self: start; }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-facts > div:nth-child(3) { padding-left: 0; box-shadow: none; }
  .lp-route__link { grid-template-columns: 48px minmax(0, 1fr) 52px; row-gap: 8px; }
  .lp-route__text { grid-column: 2 / 3; grid-row: 2; }
  .lp-route__arrow { grid-row: 1 / span 2; grid-column: 3; }
  .lp-route__icon { grid-row: 1 / span 2; align-self: start; }
}

@media (max-width: 899px) {
  .hero--lp { min-height: max(100svh, 700px); }
  .lp-hero__bg { inset: -8% 0 0; }
  .lp-hero__bg img { object-position: var(--lp-pos-mob, 50% 30%); }
  .lp-hero__shade {
    background:
      linear-gradient(0deg, var(--navy-950) 18%, rgba(2, 14, 28, 0.82) 52%, rgba(2, 14, 28, 0.2) 78%),
      linear-gradient(180deg, rgba(2, 14, 28, 0.85) 0%, rgba(2, 14, 28, 0) 30%);
  }
  .lp-hero__lines { display: none; }
  .lp-hero__title { font-size: min(12.4vw, 8vh); margin-top: auto; padding-top: 28vh; }
  .lp-hero__content { max-width: none; }
  .lp-facts { padding-top: 28px; }
  .lp-head--split { grid-template-columns: 1fr; }
  .lp-faq { grid-template-columns: 1fr; }
  .lp-faq__head { position: relative; top: auto; }
}

@media (max-width: 599px) {
  .lp-hero__actions .btn { flex: 1 1 100%; }
  .lp-facts dd { font-size: 1.1rem; }
  .lp-route__name { font-size: 1.8rem; }
  .faq__a { padding-right: 0; }
}