/* GANAN — legal.css Las cuatro paginas legales: compras, privacidad, cookies y terminos. Comparten plantilla y solo cambian el titulo y el texto. El contenido esta PENDIENTE de redaccion (lo escribe Diego con su asesor), asi que las cuatro llevan en su . Al publicar el texto definitivo hay que quitar esa etiqueta, o las paginas no entraran en Google. */ /* El hero de estas paginas no existe: el contenido arranca justo debajo de la cabecera, que es fija y ocupa --header-h. */ .legal { padding: calc(var(--header-h) + 70px) 0 90px; } .legal-inner { /* Mas estrecho que --frame a proposito: un texto legal a 1280px daria lineas de 150 caracteres, imposibles de seguir. 760px deja unos 90. */ max-width: 760px; margin: 0 auto; } .legal h1 { font-size: var(--fs-h1); color: var(--gold); font-weight: 400; line-height: var(--lh-heading); } .legal .rule { margin: 22px 0 0; } .legal-lead { margin-top: 30px; color: var(--cream); font-size: var(--fs-lg); line-height: var(--lh-relaxed); } /* Aviso de marcador de posicion. Se borra entero al llegar el texto real. */ .legal-nota { margin-top: 34px; padding: 22px 26px; border-radius: var(--r-md); background: var(--card); /* Filete dorado de 0.8px con sombra en vez de borde: el navegador redondea el grosor de los bordes a pixel entero. Mismo truco que .paquete-box. */ box-shadow: 0 0 0 0.8px var(--gold); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .legal-nota strong { color: var(--cream); font-weight: 700; } .legal-volver { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: 40px; color: var(--gold); font-size: var(--fs-sm); transition: opacity .2s; } .legal-volver:hover { opacity: .75; } @media (max-width: 767px) { .legal { padding: calc(var(--header-h) + 44px) 0 60px; } }