/* Páginas legales (privacidad.html, terminos.html).
Van en su propia hoja y no en styles.css porque la portada no las usa: así el
CSS de la página principal, que es lo que mide todo el mundo, no engorda por
dos páginas que casi nadie abre.
Se apoyan en las variables de estilos.css (dirección "Historial", s2), fijada
en el de cada página: aquí no hay selector. */
.lg {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.lg__head {
padding: 1.4rem 0;
border-bottom: 1px solid var(--line);
}
.lg__body {
flex: 1;
padding: clamp(2.5rem, 8vh, 4.5rem) 0 clamp(3rem, 10vh, 5rem);
}
/* Medida corta a propósito: es texto legal, y se lee en columna estrecha o no se
lee. 62ch ronda las 75 palabras por línea que aguanta la vista sin perderse. */
.lg__inner {
width: min(62ch, 100% - 2.5rem);
}
.lg__kicker {
font-family: var(--mono);
font-size: .74rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--emerald-text);
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
}
.lg__kicker::before {
content: "";
width: 26px;
height: 2px;
background: var(--emerald-lit);
border-radius: 2px;
}
.lg h1 {
font-size: clamp(1.9rem, 4.6vw, 2.6rem);
line-height: 1.14;
margin: .9rem 0 0;
}
.lg__lead {
color: var(--ink-soft);
font-size: 1.06rem;
line-height: 1.65;
margin: 1rem 0 2.4rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--line);
}
.lg h2 {
font-size: 1.22rem;
line-height: 1.3;
margin: 2.4rem 0 .7rem;
}
.lg p {
line-height: 1.7;
margin: 0 0 1rem;
color: var(--ink);
}
.lg a {
color: var(--emerald-text);
text-underline-offset: .18em;
}
.lg a:hover { text-decoration: none; }
/* Aparte visual para lo que no debe leerse en diagonal: el aviso de que esto no
sustituye a un médico, y la nota de que el formulario no pide datos de salud. */
.lg__note,
.lg__warn {
border-left: 3px solid var(--emerald-lit);
background: var(--surface);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: .95rem 1.15rem;
margin: 1.2rem 0 1.4rem;
color: var(--ink-soft);
font-size: .97rem;
}
.lg__h2--warn { color: var(--emerald-text); }
.lg__table {
width: 100%;
border-collapse: collapse;
margin: 1.1rem 0 1.4rem;
font-size: .95rem;
}
.lg__table th,
.lg__table td {
text-align: left;
padding: .62rem .7rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.lg__table th {
font-family: var(--mono);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--emerald-text);
}
/* En móvil la tabla no cabe: se deja desbordar con scroll propio en vez de
romper la maquetación de la página. */
@media (max-width: 34rem) {
.lg__table { display: block; overflow-x: auto; white-space: nowrap; }
}
.lg__updated {
margin-top: 2.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: .78rem;
color: var(--ink-soft);
}
.lg__acts {
display: flex;
gap: .8rem;
flex-wrap: wrap;
margin-top: 1.6rem;
}
.lg__ghost {
display: inline-flex;
align-items: center;
padding: .85rem 1.5rem;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
text-decoration: none;
font-weight: 600;
transition: border-color .18s ease, background .18s ease;
}
.lg__ghost:hover {
border-color: var(--emerald-lit);
background: var(--surface);
}