/* Baryserv · Cisternas · landing de una sola página (instrucciones de la dirección, 11-11-2026).
   Se carga después de v3.css y solo añade lo propio de la landing: cabecera fina fija, portada con la foto entera,
   tarjetas de servicios y de repuestos, y menos aire entre bloques. */

:root { --lbar: 72px; scroll-padding-top: calc(var(--lbar) + 12px); }
html { scroll-padding-top: calc(var(--lbar) + 12px); }

/* ---------- Bloque 1 · Cabecera fija ---------- */
.lbar { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--ground) 96%, transparent); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); }
.lbar.is-scrolled { box-shadow: 0 10px 30px -18px oklch(22% 0.09 274 / 0.2); }
.lbar .wrap { display: flex; align-items: center; gap: 20px; min-height: var(--lbar); }
.lbar__logo { flex: none; display: block; }
.lbar__logo img { width: 242px; height: auto; }
.lbar__sub { color: var(--navy); font-weight: 500; font-size: 1.0625rem; padding-left: 20px; border-left: 1px solid var(--line-strong); line-height: 1.2; }
.lbar__contact { margin-left: auto; display: flex; gap: 28px; font-size: 0.9688rem; }
.lbar__contact a { color: var(--ink); text-decoration: none; font-weight: 500; }
.lbar__contact a:hover { color: var(--red); }
.lbar__partner { flex: none; margin-left: 8px; }
.lbar__partner img { width: 184px; height: auto; border-radius: 2px; }

/* ---------- Bloque 2 · Portada ---------- */
.lhero { padding-block: clamp(24px, 2.6vw, 44px) clamp(36px, 3.4vw, 56px); }
.lhero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.lhero__h1 { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.625rem); line-height: 1.03; margin-bottom: 24px; }
.lhero__copy .lead { max-width: 34ch; margin-bottom: 36px; }
.lhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lhero__hours { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 500; font-size: 1.0625rem; white-space: nowrap; }
.lhero__media picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--paper-2); }
.lhero__media img { width: 100%; height: 100%; object-fit: cover; }
.foto-recta .lhero__media picture { border-radius: 0; }

/* ---------- Bloques con menos aire arriba ---------- */
.lsec { padding-block: clamp(40px, 2.4vw + 22px, 68px); }
.lsec__title { margin-bottom: clamp(22px, 2.2vw, 34px); }
.lsec__actions { margin-top: clamp(24px, 2.4vw, 36px); display: flex; justify-content: center; }

/* Bloque 3 · Servicios */
.lservices__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--navy); letter-spacing: -0.008em; margin: 24px 0 20px; max-width: 46ch; }
.craft--flip .craft__text { margin: 0 0 32px; }
.craft--flip .craft__facts { margin-bottom: 0; }
.craft__media picture { display: block; }

/* Bloque 4 · Qué hacemos: tres tarjetas iguales */
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.lcard { display: flex; flex-direction: column; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lcard__media picture { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; }
.lcard__body { padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.lcard__body .h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; }
.lcard__body > p { color: var(--ink-2); }
.lcard__list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.lcard__list li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); font-size: 0.9688rem; color: var(--ink); line-height: 1.45; }
.lcard__list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.lcard__note { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }

/* Bloque 5 · Repuestos: tarjetas numeradas */
.lparts__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(24px, 2.6vw, 40px); }
.lparts__head .h2 { margin-bottom: 20px; }
.lparts__head .lead { max-width: 40ch; }
.lparts__photo picture { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; }
.lparts__photo img { width: 100%; height: 100%; object-fit: cover; }
.lparts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lpart { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 18px 22px; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; }
.lpart__n { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--red); letter-spacing: 0.02em; }
.lpart__name { color: var(--navy); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 450; letter-spacing: -0.01em; line-height: 1.3; }
.lpart--ask { padding: 0; background: var(--navy); border-color: var(--navy); }
.lpart--ask a { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 92px; padding: 18px 22px; text-decoration: none; }
.lpart--ask .lpart__n { color: oklch(80% 0.06 274); }
.lpart--ask .lpart__name { color: var(--ground); flex: 1; }
.lpart--ask .btn__arrow { color: var(--ground); flex: none; }
.lpart--ask a:hover .btn__arrow { transform: translateX(4px); }
.lpart--ask:hover { background: var(--navy-ink); }

/* Bloque 7 · Contacto */
.lsec--contact { padding-block: clamp(40px, 2.4vw + 22px, 68px); border-top: 1px solid var(--line); }
.lsec--contact .lead { margin: 14px 0 28px; }

/* Campo trampa para robots (oculto a las personas) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mapa en el contacto, bajo Oficina / Dirección */
.lmap { margin-top: 28px; }
.lmap iframe { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border: 0; border-radius: 10px; background: var(--paper-2); }
.lmap__go { margin-top: 14px; }

/* Servicios y preguntas: menos aire interno */
.lsec .craft { gap: clamp(32px, 5vw, 80px); }
.lsec .faq__list summary { padding: 20px 0; }
.site-footer.lfoot { padding-top: clamp(40px, 4vw, 64px); }

/* Pie sencillo, sin enlaces a otras páginas */
.lfoot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding-bottom: 32px; border-bottom: 1px solid var(--line-strong); }
.lfoot__top img { width: 200px; height: auto; }
.lfoot__top p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; }
.lfoot__top a { text-decoration: none; }
.lfoot__top a:hover { color: var(--red); }

@media (max-width: 1180px) {
  .lbar__contact a[href^="mailto"] { display: none; }
}
@media (max-width: 1020px) {
  .lbar__contact { display: none; }
  .lbar__partner { margin-left: auto; }
  .lhero__grid, .lparts__head { grid-template-columns: 1fr; }
  .lhero__copy .lead { max-width: 46ch; }
  .lcards { grid-template-columns: 1fr 1fr; }
  .lcards .lcard:last-child { grid-column: 1 / -1; }
  .lparts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --lbar: 58px; }
  .lbar .wrap { gap: 12px; }
  .lbar__logo img { width: 132px; }
  .lbar__sub { font-size: 0.9375rem; padding-left: 12px; }
  .lbar__partner img { width: 118px; }
  .lhero { padding-top: 24px; }
  .lhero__copy { text-align: center; }
  .lhero__copy .lead { margin-inline: auto; margin-bottom: 28px; }
  .lhero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .lhero__hours { justify-content: center; }
  .lhero__actions .btn { flex: 1 1 auto; }
  .lhero__media picture { border-radius: 10px; }
  .lcards, .lparts { grid-template-columns: 1fr; }
  .lpart, .lpart--ask a { min-height: 0; padding: 16px 18px; }
  .lsec__actions .btn { width: 100%; }
  .lservices__lead { font-size: 1.125rem; }
}
@media (max-width: 380px) {
  .lbar__sub { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .lhero [data-anim] { animation: rise .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
  .js .lhero__media picture { animation: lhero-in 1.2s var(--ease) both .15s; }
  .js .lhero__media img { animation: settle 1.6s var(--ease) both .15s; }
}
@keyframes lhero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }