/* =============================================
   GRUPO SALVADOR — CSS TÉRMINOS Y PRIVACIDAD
   Etapa 8J: páginas de lectura con el lenguaje de la Etapa 8. Cabecera corta
   sobre rosa claro (sin hero rojo), hoja blanca curva que cierra contra el
   footer rojo, índice lateral fijo (desplegable en móvil) y columna de texto
   de ancho controlado. Rojo solo como acento: números de sección, viñetas y
   enlaces. Base común: _legal.html.
   ============================================= */

.gs-lgl {
  --gs-sheet-radius: 40px;
}

/* Texto solo para lectores de pantalla. */
.gs-lgl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── CABECERA ── */
.gs-lgl-hero {
  padding: 64px 0 calc(var(--gs-sheet-radius) + 56px);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .7), transparent 42%),
    var(--gs-red-soft, #fbeeed);
}
.gs-lgl-hero__inner { max-width: calc(1080px + 48px); }
.gs-lgl-hero__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-red, #a61916);
}
.gs-lgl-hero__title {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--gs-red, #a61916);
}
.gs-lgl-hero__updated { margin-top: 14px; font-size: 14.5px; font-weight: 600; color: #555; }
.gs-lgl-hero__intro {
  max-width: 680px;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

/* ── HOJA BLANCA ── */
/* El wrap pinta detrás de las esquinas inferiores el rojo del footer. */
.gs-lgl-sheet-wrap {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--gs-sheet-radius));
  background: linear-gradient(to bottom,
    transparent calc(100% - var(--gs-sheet-radius)),
    var(--gs-red, #a61916) 0);
}
.gs-lgl-sheet {
  display: flow-root;
  padding: 72px 0 104px;
  border-radius: var(--gs-sheet-radius);
  background: var(--gs-white);
}

/* Índice | texto. La columna de lectura no pasa de ~72 caracteres por línea. */
.gs-lgl-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 740px);
  gap: 64px;
  justify-content: center;
  align-items: start;
  max-width: calc(1080px + 48px);
}

/* ── ÍNDICE ── */
.gs-lgl-toc {
  position: sticky;
  top: calc(var(--gs-header-total-height) + 24px);
  max-height: calc(100vh - var(--gs-header-total-height) - 48px);
  overflow-y: auto;
}
.gs-lgl-toc__box {
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: var(--gs-red-soft, #fbeeed);
}
.gs-lgl-toc__summary {
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gs-red, #a61916);
}
.gs-lgl-toc__summary::-webkit-details-marker { display: none; }
.gs-lgl-toc__list {
  list-style: none;
  counter-reset: gs-lgl-toc;
  margin-top: 12px;
}
.gs-lgl-toc__list li { counter-increment: gs-lgl-toc; }
.gs-lgl-toc__list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: #3a3a3a;
  transition: color .2s;
}
.gs-lgl-toc__list a::before {
  content: counter(gs-lgl-toc);
  font-weight: 700;
  color: var(--gs-red, #a61916);
}
/* Entrada sin número (el resumen de la Política no es una sección numerada). */
.gs-lgl-toc__list .gs-lgl-toc__plain { counter-increment: none; }
.gs-lgl-toc__list .gs-lgl-toc__plain a::before { content: '–'; }
.gs-lgl-toc__list a:hover { color: var(--gs-red, #a61916); }
.gs-lgl-toc__list a:focus-visible { outline: 2px solid var(--gs-red, #a61916); outline-offset: 2px; border-radius: 4px; }

/* ── TEXTO ── */
.gs-lgl-doc { min-width: 0; }
.gs-lgl-sec + .gs-lgl-sec {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--gs-border, #E5E5E5);
}
.gs-lgl-doc h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gs-text, #1a1a1a);
}
/* El JS del índice enfoca el título de la sección (tabindex="-1"): sin anillo,
   no es un control. */
.gs-lgl-doc h2:focus { outline: none; }
.gs-lgl-num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gs-red, #a61916);
  color: var(--gs-white);
  font-size: 15px;
  font-weight: 700;
}
.gs-lgl-doc h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gs-red, #a61916);
}
.gs-lgl-doc p,
.gs-lgl-doc li,
.gs-lgl-doc dd {
  font-size: 16.5px;
  line-height: 1.75;
  color: #3a3a3a;
}
.gs-lgl-doc p + p,
.gs-lgl-doc ul + p,
.gs-lgl-doc ol + p,
.gs-lgl-doc p + ul,
.gs-lgl-doc p + ol { margin-top: 14px; }
.gs-lgl-doc a {
  font-weight: 600;
  color: var(--gs-red, #a61916);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.gs-lgl-doc a:hover { color: var(--gs-red-hover, #8a1412); }
.gs-lgl-doc a:focus-visible { outline: 2px solid var(--gs-red, #a61916); outline-offset: 2px; border-radius: 2px; }
.gs-lgl-doc strong { color: var(--gs-text, #1a1a1a); }
.gs-lgl-doc code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--gs-gray-light, #F5F5F5);
  font-size: .92em;
}

/* Viñetas rojas pequeñas. */
.gs-lgl-doc ul { list-style: none; }
.gs-lgl-doc ul > li { position: relative; padding-left: 22px; }
.gs-lgl-doc ul > li + li { margin-top: 8px; }
.gs-lgl-doc ul > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gs-red, #a61916);
}

/* Pasos numerados (cotización → contratación). */
.gs-lgl-steps { list-style: none; counter-reset: gs-lgl-step; }
.gs-lgl-steps > li {
  position: relative;
  counter-increment: gs-lgl-step;
  padding: 14px 18px 14px 58px;
  border-radius: 16px;
  background: var(--gs-gray-light, #F5F5F5);
}
.gs-lgl-steps > li + li { margin-top: 10px; }
.gs-lgl-steps > li::before {
  content: counter(gs-lgl-step);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gs-red, #a61916);
  border-radius: 50%;
  color: var(--gs-red, #a61916);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Datos de contacto: etiqueta | valor. */
.gs-lgl-doc .gs-lgl-contact > li { padding-left: 0; }
.gs-lgl-doc .gs-lgl-contact > li::before { display: none; }
.gs-lgl-contact > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.gs-lgl-contact > li > span { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #666; line-height: 2.05; }

/* Resumen inicial de la Política (información por capas). */
.gs-lgl-sec--resumen {
  padding: 28px 30px 30px;
  border-radius: 24px;
  background: var(--gs-red-soft, #fbeeed);
}
.gs-lgl-sec--resumen h2 { color: var(--gs-red, #a61916); }

/* Un bloque por tratamiento: datos / para qué / base legal / quién interviene. */
.gs-lgl-trat {
  margin-top: 20px;
  padding: 24px 26px 22px;
  border: 1.5px solid var(--gs-border, #E5E5E5);
  border-left: 4px solid var(--gs-red, #a61916);
  border-radius: 18px;
}
.gs-lgl-trat dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 20px;
}
.gs-lgl-trat dt {
  padding-top: 3px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #555;
}
.gs-lgl-trat dd { margin: 0; }
.gs-lgl-trat dl + p { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--gs-border, #E5E5E5); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gs-lgl-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 900px) {
  .gs-lgl { --gs-sheet-radius: 28px; }
  /* Móvil: índice arriba, desplegable; texto debajo a todo el ancho. */
  .gs-lgl-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gs-lgl-toc { position: static; max-height: none; overflow: visible; }
  .gs-lgl-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    cursor: pointer;
  }
  .gs-lgl-toc__summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .gs-lgl-toc__box[open] .gs-lgl-toc__summary::after { transform: rotate(225deg); }
  .gs-lgl-toc__summary:focus-visible { outline: 2px solid var(--gs-red, #a61916); outline-offset: 4px; border-radius: 4px; }
}
@media (max-width: 700px) {
  .gs-lgl-hero { padding: 44px 0 calc(var(--gs-sheet-radius) + 40px); }
  .gs-lgl-hero__intro { font-size: 16.5px; }
  .gs-lgl-sheet { padding: 40px 0 80px; }
  .gs-lgl-doc p,
  .gs-lgl-doc li,
  .gs-lgl-doc dd { font-size: 16px; line-height: 1.7; }
  .gs-lgl-sec + .gs-lgl-sec { margin-top: 36px; padding-top: 32px; }
  .gs-lgl-sec--resumen { padding: 22px 20px 24px; border-radius: 20px; }
  .gs-lgl-trat { padding: 20px 18px 18px; border-radius: 16px; }
  .gs-lgl-trat dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gs-lgl-trat dd + dt { margin-top: 10px; }
  .gs-lgl-contact > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gs-lgl-contact > li > span { line-height: 1.6; }
  .gs-lgl-contact > li + li { margin-top: 12px; }
  .gs-lgl-steps > li { padding: 14px 16px 14px 54px; }
}

/* Impresión: solo el documento. */
@media print {
  .gs-site-header, .gs-footer, .gs-chat, .gs-lgl-toc { display: none !important; }
  body { padding-top: 0 !important; }
  .gs-lgl-hero, .gs-lgl-sheet { padding: 0 !important; background: none !important; }
  .gs-lgl-sheet-wrap { margin: 0 !important; background: none !important; }
  .gs-lgl-layout { display: block; }
}