/* =========================================================
   Páginas legales (terminos.html, privacidad.html) · web v5
   Se carga después de v5.css, home-ui.css, depilacion-mujer.css (header interno) y nav-submenu.css.
   1. Cabecera  2. Cuerpo con índice lateral  3. Texto editorial  4. Móvil
   ========================================================= */

.lg { --lg-acento: #8F5A22; /* mostaza oscuro con contraste AA sobre blanco y crema */ }

/* ---------- 1. Cabecera ---------- */
.lg-cab { background: var(--crema); }
.lg-cab__in { padding-top: 64px; padding-bottom: 56px; }
.lg-aviso { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--r-pildora); background: var(--blanco); box-shadow: inset 0 0 0 1px rgba(206, 137, 59, .35); color: var(--lg-acento); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.lg-aviso .lucide { width: 16px; height: 16px; flex: none; }
.lg-titulo { margin-top: 22px; font-family: var(--serif); font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; }
.lg-titulo em { font-style: normal; color: var(--acento-hondo); }
.lg-lead { margin-top: 14px; max-width: 60ch; font-size: 17px; color: var(--texto-60); }
.lg-fecha { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--texto-60); }
.lg-fecha .lucide { width: 16px; height: 16px; color: var(--acento-hondo); }

/* ---------- 2. Cuerpo con índice lateral ---------- */
.lg-cuerpo { display: grid; grid-template-columns: 280px minmax(0, 68ch); justify-content: start; gap: 96px; padding-top: 64px; padding-bottom: 120px; }
.lg-lado { position: relative; }
.lg-indice { position: sticky; top: 104px; }
.lg-indice summary { display: none; }
.lg-indice ol { margin: 0; padding: 0 0 0 2px; list-style: none; border-left: 1px solid rgba(31, 26, 21, .1); }
.lg-indice a { position: relative; display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--texto-60); transition: color .2s var(--curva-hover), border-color .2s var(--curva-hover); }
.lg-indice a:hover { color: var(--texto); }
.lg-indice a.activo { border-left-color: var(--acento); color: var(--texto); font-weight: 500; }

/* ---------- 3. Texto editorial ---------- */
.lg-texto { font-size: 16.5px; line-height: 1.7; letter-spacing: -0.01em; color: rgba(31, 26, 21, .82); }
.lg-texto section { scroll-margin-top: 100px; }
.lg-texto section + section { margin-top: 44px; padding-top: 44px; border-top: 1px solid rgba(31, 26, 21, .08); }
.lg-texto h2 { margin-bottom: 14px; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.65rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; color: var(--texto); }
.lg-texto p + p, .lg-texto ul + p, .lg-texto p + ul { margin-top: 14px; }
.lg-texto ul { margin: 0; padding: 0; list-style: none; }
.lg-texto ul li { position: relative; padding-left: 22px; }
.lg-texto ul li + li { margin-top: 10px; }
.lg-texto ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.lg-texto strong { font-weight: 600; color: var(--texto); }
.lg-texto em { font-style: normal; font-weight: 500; color: var(--texto); }
.lg-texto a { color: var(--lg-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lg-texto a:hover { color: var(--texto); }
/* Datos que faltan: resaltados para que Radiance los complete antes de publicar */
.lg-pend { padding: 1px 6px; border-radius: 4px; background: #FFF1C9; color: #6B4A12; font-size: .94em; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.lg-contacto li { display: flex; align-items: center; gap: 10px; padding-left: 0 !important; }
.lg-contacto li::before { display: none; }
.lg-contacto .lucide, .lg-contacto svg { width: 19px; height: 19px; flex: none; color: var(--acento-hondo); }
.lg-contacto a { overflow-wrap: anywhere; }

.lg-texto a.lg-boton { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px 0 16px; border-radius: var(--r-pildora); background: var(--crema); color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.lg-texto a.lg-boton:hover { background: var(--acento); color: var(--blanco); }
.lg-boton .lucide { width: 18px; height: 18px; }

/* Footer: enlace de la página actual */
.pf__legal a[aria-current="page"] { color: #F0C38A; }

/* ---------- 4. Tablet y móvil ---------- */
@media (max-width: 1023px) {
  .lg-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 88px; }
  .lg-indice { position: static; border-radius: 14px; background: var(--crema); }
  .lg-indice summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
  .lg-indice summary::-webkit-details-marker { display: none; }
  .lg-indice summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--curva); }
  .lg-indice[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .lg-indice ol { margin: 0 18px 16px; padding: 0; border-left: 0; columns: 2; column-gap: 24px; }
  .lg-indice a { margin: 0; padding: 7px 0; border: 0; break-inside: avoid; }
  .lg-indice a.activo { font-weight: 400; color: var(--texto-60); }
  .lg-texto { max-width: 68ch; }
}
@media (max-width: 640px) {
  .lg-cab__in { padding-top: 36px; padding-bottom: 36px; }
  .lg-titulo { margin-top: 18px; }
  .lg-aviso { font-size: 11.5px; }
  .lg-lead { font-size: 16px; }
  .lg-indice ol { columns: 1; }
  .lg-texto { font-size: 16px; line-height: 1.65; }
  .lg-texto section + section { margin-top: 32px; padding-top: 32px; }
}
@media print {
  .nav, .cf-a__cierre, .wa-flota, .lg-lado { display: none !important; }
  .lg-cuerpo { display: block; padding: 0; }
}