/* === LPDO DIVISIONES CREMA PREMIUM REV 2.25 === */
/* Objetivo: divisiones suaves, simétricas, crema, sin línea dura ni doble corte. */

:root {
  --lpdo-cream-top: #efe5d7;
  --lpdo-cream-mid: #f5ecdf;
  --lpdo-cream-base: #fff8ed;

  --lpdo-soft-line: rgba(181, 91, 48, .075);
  --lpdo-soft-light: rgba(255, 255, 255, .58);

  --lpdo-gap-desktop: 70px;
  --lpdo-gap-mobile: 54px;
}

/* Matar restos viejos de divisores */
#pedidos::before, #pedidos::after,
#carta::before, #carta::after,
#historia::before, #historia::after,
.site-footer::before, .site-footer::after,
.story-info-grid::before, .story-info-grid::after,
.info-grid::before, .info-grid::after,
main > section::before, main > section::after {
  content: none !important;
  display: none !important;
}

#pedidos,
#carta,
#historia,
.site-footer,
.story-info-grid,
.info-grid {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Divisiones principales: Pedidos, Carta, Historia, Footer */
#pedidos,
#carta,
#historia,
.site-footer {
  position: relative !important;
}

/* Hero -> Pedidos */
#pedidos {
  padding-top: var(--lpdo-gap-desktop) !important;
  margin-top: 0 !important;
}

/* Pedidos -> Carta / Carta -> Historia / Info -> Footer */
#carta,
#historia,
.site-footer {
  padding-top: var(--lpdo-gap-desktop) !important;
  margin-top: 0 !important;
}

/* Banda crema suave, sin línea negra */
#pedidos::before,
#carta::before,
#historia::before,
.site-footer::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--lpdo-gap-desktop) !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      var(--lpdo-cream-top) 0%,
      var(--lpdo-cream-mid) 42%,
      var(--lpdo-cream-base) 100%
    ) !important;
}

/* Línea ultra fina, crema/café muy suave */
#pedidos::after,
#carta::after,
#historia::after,
.site-footer::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 22px !important;
  right: 22px !important;
  height: 1px !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(181,91,48,0) 0%,
      var(--lpdo-soft-line) 12%,
      var(--lpdo-soft-line) 88%,
      rgba(181,91,48,0) 100%
    ) !important;
  box-shadow: 0 1px 0 var(--lpdo-soft-light) !important;
}

/* Separación interna Historia -> Horario/Ubicación/Contacto/Reservas */
#historia .story-info-grid,
#historia .info-grid {
  position: relative !important;
  margin-top: var(--lpdo-gap-mobile) !important;
  padding-top: var(--lpdo-gap-mobile) !important;
}

#historia .story-info-grid::before,
#historia .info-grid::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--lpdo-gap-mobile) !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      var(--lpdo-cream-top) 0%,
      var(--lpdo-cream-mid) 42%,
      var(--lpdo-cream-base) 100%
    ) !important;
}

#historia .story-info-grid::after,
#historia .info-grid::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 22px !important;
  right: 22px !important;
  height: 1px !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(181,91,48,0) 0%,
      var(--lpdo-soft-line) 12%,
      var(--lpdo-soft-line) 88%,
      rgba(181,91,48,0) 100%
    ) !important;
  box-shadow: 0 1px 0 var(--lpdo-soft-light) !important;
}

/* Mobile */
@media (max-width: 768px) {
  #pedidos,
  #carta,
  #historia,
  .site-footer {
    padding-top: var(--lpdo-gap-mobile) !important;
  }

  #pedidos::before,
  #carta::before,
  #historia::before,
  .site-footer::before {
    height: var(--lpdo-gap-mobile) !important;
  }

  #pedidos::after,
  #carta::after,
  #historia::after,
  .site-footer::after {
    left: 18px !important;
    right: 18px !important;
  }

  #historia .story-info-grid,
  #historia .info-grid {
    margin-top: 44px !important;
    padding-top: 44px !important;
  }

  #historia .story-info-grid::before,
  #historia .info-grid::before {
    height: 44px !important;
  }

  #historia .story-info-grid::after,
  #historia .info-grid::after {
    left: 18px !important;
    right: 18px !important;
  }
}

@media (max-width: 420px) {
  :root {
    --lpdo-gap-mobile: 48px;
  }

  #historia .story-info-grid,
  #historia .info-grid {
    margin-top: 40px !important;
    padding-top: 40px !important;
  }

  #historia .story-info-grid::before,
  #historia .info-grid::before {
    height: 40px !important;
  }
}