/* =========================================================
   Baipor Group · Páginas de servicio y cabeceras con foto (20-oct-2026)
   Va DESPUÉS de site.css (y de pages.css donde exista) y solo AÑADE:
   no cambia nada de lo que ya había. Usa sus variables y componentes
   (.ihero, .sh, .inc, .pack, .proc, .irev, .faq, .ctabox, .other…).
   ========================================================= */

/* ---------- menú «Servicios» (escritorio): desplegable sin JS ----------
   El enlace sigue llevando a /#servicios; al pasar el ratón o con el
   teclado (foco dentro) se abre la lista de las cinco páginas de servicio. */
.nav-svc { position: relative; display: flex; align-items: center; }
.hdr .hdr-nav .nav-svc > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-svc > a .chev { width: 13px; height: 13px; flex: none; transition: transform .3s var(--ease); }
.nav-svc:hover > a .chev, .nav-svc:focus-within > a .chev { transform: rotate(180deg); }
.nav-svc-pop {
  position: absolute; left: -22px; top: calc(100% + 6px); z-index: 60; min-width: 320px; padding: 8px 0;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(5, 8, 31, .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s linear .3s;
}
.nav-svc-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-svc:hover .nav-svc-pop, .nav-svc:focus-within .nav-svc-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hdr .hdr-nav .nav-svc .nav-svc-pop a {
  display: flex; align-items: center; gap: 12px; padding: 11px 22px; min-height: 44px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); text-shadow: none; white-space: nowrap;
  border-left: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s;
}
.hdr .hdr-nav .nav-svc .nav-svc-pop a::after { display: none; }
.hdr .hdr-nav .nav-svc .nav-svc-pop a:hover { background: var(--navy-50); color: var(--navy); }
.hdr .hdr-nav .nav-svc .nav-svc-pop a[aria-current] { color: var(--navy); border-left-color: var(--red); background: var(--navy-50); }
.nav-svc-pop .n { font-family: var(--fd); font-size: 16px; color: var(--red); min-width: 20px; }

/* ---------- menú móvil: los servicios bajo «Servicios» ---------- */
.menu-nav a:has(+ .menu-sub) { border-bottom-color: transparent; }
.menu-nav .menu-sub { display: grid; padding: 0 0 12px 40px; border-bottom: 1px solid var(--line-d); }
.menu-nav .menu-sub a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0;
  font-family: var(--ft); font-size: 16px; font-weight: 500; line-height: 1.3; text-transform: none; color: var(--txt-d);
}
.menu-nav .menu-sub a::before { content: none; }
.menu-nav .menu-sub a:hover, .menu-nav .menu-sub a[aria-current] { color: #fff; }
.menu-nav .menu-sub a[aria-current]::after { content: ""; width: 18px; height: 2px; margin-left: 12px; background: var(--red); }

/* ---------- hero de servicio: titulares más largos que «Suiza ⇄ España» ----------
   Cada página fija el tamaño en el móvil (--ifs-m) y en escritorio (--ifs-d)
   para que el titular quepa sin desbordar (375 px) y en una línea (escritorio). */
.ihero-title.it-fit { font-size: var(--ifs-m, 17vw); }
.ihero-title.it-fit .l2 { white-space: normal; }
@media (min-width: 900px) { .ihero-title.it-fit { font-size: min(var(--ifs-d, 10vw), 25vh); } }
.ihero-media img.op-t { object-position: 30% 50%; }
.ihero-media img.op-r { object-position: 70% 50%; }
@media (max-aspect-ratio: 4/5) { .ihero-media img.op-t { object-position: 52% 50%; } .ihero-media img.op-r { object-position: 64% 50%; } }

/* ---------- cabecera con foto de las páginas secundarias ----------
   Misma pieza que el hero de servicio (.ihero), más baja y con la foto
   suavizada. --page: equipo, historia, FAQ, alquiler…; --low: textos
   legales, avisos y 404. El titular usa .pg-title (pages.css). */
.ihero--page { min-height: min(74vh, 780px); min-height: min(74svh, 780px); }
.ihero--low { min-height: min(56vh, 560px); min-height: min(56svh, 560px); }
@media (max-width: 599px) {
  .ihero--page { min-height: 78vh; min-height: 78svh; }
  .ihero--low { min-height: 60vh; min-height: 60svh; }
}
.ihero--soft .ihero-media img { filter: saturate(.8); }
.ihero--soft .ihero-media::after {
  background: linear-gradient(180deg, rgba(5, 8, 31, .72) 0%, rgba(5, 8, 31, .38) 34%, rgba(5, 8, 31, .62) 62%, rgba(5, 8, 31, .95) 100%), linear-gradient(90deg, rgba(5, 8, 31, .6) 0%, rgba(5, 8, 31, 0) 70%);
}
.ihero .pg-title { max-width: 16ch; }
html[lang="de"] .ihero .pg-title { max-width: 18ch; }
.ihero .pg-title + .lead, .ihero .pg-title + .pg-meta { margin-top: 2px; }
.ihero-in > .lead { color: rgba(255, 255, 255, .88); max-width: 60ch; }
.ihero .pg-meta { color: var(--txt-d); }
.ihero-in > .actions { margin-top: 4px; }
.ihero .e404-l a { color: #fff; }
.ihero .e404-l { color: var(--txt-d); font-size: 14px; }
.js .ihero-in > .lead, .js .ihero-in > .actions, .js .ihero-in > .pg-meta, .js .ihero-in > .e404-l { animation: fadeUp 1s var(--ease) .45s both; }
.noanim .ihero-in > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .js .ihero-in > * { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* ---------- 01 «Qué transportamos» (tipos de carga) ---------- */
.ttypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); margin-top: clamp(32px, 4vw, 56px); }
.ttype { display: grid; gap: 16px; align-content: start; padding: 24px 16px 26px 0; border-bottom: 1px solid var(--line-2); }
.ttype:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line-2); }
.ttype .ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--navy-200); border-radius: 50%; color: var(--red); }
.ttype .ic svg { width: 20px; height: 20px; }
.ttype b { font-family: var(--fd); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 36px); line-height: .95; color: var(--navy); overflow-wrap: break-word; }
@media (min-width: 900px) {
  .ttypes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ttype { padding: 30px 28px 34px 0; }
  .ttype + .ttype { padding-left: 28px; border-left: 1px solid var(--line-2); }
}
.svc-note { margin-top: 24px; font-size: 14px; color: var(--ink-3); padding-left: 16px; border-left: 2px solid var(--red); max-width: 60ch; }
.svc-lead-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .svc-lead-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 7%; align-items: end; } }

/* ---------- bloque texto + foto (montaje, equipo…) ---------- */
.split { padding: clamp(80px, 10vw, 150px) 0; }
.split-grid { display: grid; gap: 40px; }
.split-txt { display: grid; gap: 22px; align-content: start; }
.split-txt .sh { margin-bottom: 8px; }
.split-txt p:not(.lead) { color: var(--ink-2); max-width: 54ch; }
.split-fig { position: relative; }
.split-fig .ph-media { aspect-ratio: 3 / 4; }
.split-fig figcaption { margin-top: 14px; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-3); }
.split-fig figcaption b { font-family: var(--fd); font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); line-height: 1.05; }
@media (min-width: 900px) {
  .split-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 7%; align-items: center; }
  .split-fig { max-width: 520px; }
  .split--rev .split-fig { order: 2; justify-self: end; }
}
.ticks { display: grid; border-top: 1px solid var(--line-2); }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.ticks svg { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }

/* ---------- opiniones con dos tarjetas ---------- */
@media (min-width: 760px) { .irev-grid.irev-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- otros servicios: cuatro tarjetas con icono, toda la tarjeta pulsable ---------- */
@media (min-width: 640px) { .ocards.ocards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ocards.ocards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ocards-4 .ocard { position: relative; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.ocards-4 .ocard .ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--navy-200); border-radius: 50%; color: var(--red); transition: color .35s, border-color .35s; }
.ocards-4 .ocard .ic svg { width: 20px; height: 20px; }
.ocards-4 .ocard .link { justify-self: start; }
.ocards-4 .ocard .link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ocards-4 .ocard .link:focus-visible { outline-color: #fff; }
.ocards-4 .ocard:focus-within { background: var(--red); border-color: var(--red); }
.ocards-4 .ocard:focus-within h3, .ocards-4 .ocard:focus-within p, .ocards-4 .ocard:focus-within .link, .ocards-4 .ocard:focus-within .ic { color: #fff; border-color: rgba(255, 255, 255, .55); }
@media (hover: hover) {
  .ocards-4 .ocard:hover { background: var(--red); border-color: var(--red); cursor: pointer; }
  .ocards-4 .ocard:hover h3, .ocards-4 .ocard:hover p, .ocards-4 .ocard:hover .link, .ocards-4 .ocard:hover .ic { color: #fff; border-color: rgba(255, 255, 255, .55); }
  .ocards-4 .ocard:hover .link svg { transform: translateX(4px); }
}

/* ---------- equipo (página «El equipo») ---------- */
.team-pg { padding: clamp(72px, 9vw, 140px) 0; }
.team-pg .team { margin-top: 0; }
@media (min-width: 1100px) { .team-grid.team-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1099.98px) { .team-grid.team-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* seis fichas (con la de María del Carmen): 2 · 3 · 6 columnas */
@media (min-width: 720px) { .team-grid.team-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .team-grid.team-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- nuestra historia: capítulos ---------- */
.chap { padding: clamp(72px, 9vw, 136px) 0; }
.chap + .chap { padding-top: 0; }
.chap-grid { display: grid; gap: 32px; }
.chap-txt { display: grid; gap: 20px; align-content: start; }
.chap-say { font-size: clamp(22px, 2.3vw, 34px); font-weight: 300; line-height: 1.32; letter-spacing: -.01em; color: var(--ink); max-width: 34ch; }
.chap-txt p:not(.chap-say) { color: var(--ink-2); max-width: 56ch; }
.chap-fig .ph-media { aspect-ratio: 4 / 5; }
.chap-fig figcaption { margin-top: 12px; display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; color: var(--ink-3); }
.chap-fig figcaption b { font-family: var(--fd); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--navy); }
@media (min-width: 900px) {
  .chap-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 8%; align-items: start; }
  .chap-grid.no-fig { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
  .chap--rev .chap-fig { order: -1; }
  .chap--rev .chap-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.chap-end { background: var(--navy-950); color: #fff; }
.chap-end .chap-say { color: #fff; }
.chap-end .chap-txt p:not(.chap-say) { color: var(--txt-d); }
.chap.chap-end { padding-top: clamp(72px, 9vw, 136px); }

/* ---------- avisos (solicitud recibida, pago) bajo la cabecera con foto ---------- */
.pg-status--under { padding-top: clamp(32px, 5vw, 64px); }
.pg-status--under .pg-status-card { margin-top: 0; }

/* ---------- alternancia de fondos entre secciones ---------- */
.alt-bg { background: var(--paper-2); }
.inc.inc-w { background: var(--paper); }
/* rótulo de sección que es a la vez el título (capítulos de la historia) */
.sh h2.sh-l { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
/* la ficha «La flota» en la página del equipo: pages.css tiene otra .fleet (la rejilla de alquiler) */
.team-grid .member.fleet { display: block; }
.chap-fig figcaption b { white-space: nowrap; }
.chap-fig .ph-media img { object-position: 50% 0; }
.chap-end .chap-fig figcaption b { color: #fff; }
.chap-end .chap-fig figcaption { color: var(--txt-d); }
.chap-end .quote { border-top-color: var(--line-d); }
@media (max-width: 899px) { .split-fig .ph-media { aspect-ratio: 1 / 1; } .split-fig .ph-media img { object-position: 50% 18%; } }