/* =========================================================
   PÁGINAS LEGALES (SÓLO CSS) — ORDENADO Y LIMPIO
   - Mantiene: hero full-bleed, card, separación footer, fix header y anclas
   - Elimina: duplicados (main.legal / html scroll-padding), reglas genéricas
     que afectaban páginas NO legales (:where(main, article)...)
   ========================================================= */

:root{
  --legal-header-h: 92px;  /* alto real del header fijo */
  --legal-max: 980px;      /* ancho máximo del contenido legal */
}

/* =========================
   Layout base (solo legales)
   ========================= */

main.legal{
  max-width: var(--legal-max);
  margin-inline: auto;
  margin-top: 0 !important;

  /* evita que el header tape el contenido */
  padding-top: var(--legal-header-h) !important;
  padding-bottom: 48px; /* aire antes del footer */
  padding-inline: clamp(16px, 3vw, 24px);

  /* main no es card (el card es .legal-card) */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Anclas/scroll: evita que queden debajo del header fijo */
html{
  scroll-padding-top: var(--legal-header-h) !important;
}
main.legal :where(h1,h2,h3,h4){
  scroll-margin-top: var(--legal-header-h) !important;
}

/* =========================
   Hero (imagen via --legal-hero-img)
   ========================= */

.legal-hero{
  position: relative;
  overflow: hidden;

  /* full width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background-image: var(--legal-hero-img);
  background-size: cover;
  background-position: center;

  min-height: clamp(220px, 28vw, 420px);

  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(18px, 3vw, 28px);

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.legal-hero::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.legal-hero__content{
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  max-width: 60rem;
}

.legal-hero__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
}

.legal-hero__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.08;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =========================
   Card del contenido legal
   ========================= */

.legal-card{
  margin-top: 18px;

  /* separación real del footer */
  margin-bottom: clamp(36px, 6vw, 84px);

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  padding: clamp(16px, 3vw, 26px);
}

/* Tipografía/espaciado dentro del card */
.legal-card p{
  margin: 10px 0;
  line-height: 1.65;
  font-size: 15px;
  color: rgba(0,0,0,.78);
}

.legal-card h2{
  margin: 22px 0 10px;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
}

.legal-card h3{
  margin: 16px 0 8px;
  font-weight: 750;
  font-size: 16px;
}

.legal-card ul,
.legal-card ol{
  margin: 10px 0 10px 18px;
  padding: 0;
  line-height: 1.65;
  color: rgba(0,0,0,.78);
}

.legal-card li{ margin: 6px 0; }

.legal-card hr{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 18px 0;
}

.legal-card :where(.note, .alert, .info, blockquote){
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.08);
}

.legal-card a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: .95;
}
.legal-card a:hover{ opacity: 1; }

/* Tabla simple (si la usas en legales) */
.legal-card table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.legal-card th,
.legal-card td{
  border: 1px solid rgba(0,0,0,.10);
  padding: 10px 12px;
  text-align: left;
}
.legal-card th{
  background: rgba(0,0,0,.04);
  font-weight: 700;
}

/* Meta (RUC, empresa, versión, fecha) */
.legal-card :where(small, .meta){
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(0,0,0,.60);
}

/* =========================
   Footer: grid + lista (global)
   (si existe .footer__grid y .footer)
   ========================= */

.footer__grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px){
  .footer__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1040px){
  .footer__grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer li{
  margin: 8px 0;
  line-height: 1.35;
}

/* =========================
   Footer abajo en páginas cortas (solo legales)
   ========================= */

@supports selector(body:has(main.legal)){
  body:has(main.legal){
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body:has(main.legal) main.legal{
    flex: 1 0 auto;
  }

  body:has(main.legal) .footer{
    margin-top: auto;
  }
}