/* Páginas internas (términos, privacidad) y página de error.
   Se cargan después de landing.css y reutilizan su navegación, botones, etiquetas y pie. */

/* Encabezado con el degradé de la landing */
.cab-legal { color: var(--blanco); padding: 150px 0 4.5rem; position: relative; overflow: hidden; }
.cab-legal h1 { color: var(--blanco); font-size: clamp(2.2rem, 4.6vw, 4rem); margin: 1.2rem 0 1rem; max-width: 18ch; }
.cab-legal p { color: var(--light); max-width: 60ch; }
.cab-legal .simb { position: absolute; right: max(24px, calc((100vw - var(--ancho)) / 2)); bottom: -50px; height: 260px; fill: rgba(255,255,255,.08); }

/* Cuerpo: índice fijo a la izquierda y texto a la derecha */
.legal-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 5rem; padding: 5rem 0 7rem; }
.indice { position: sticky; top: 100px; align-self: start; border-top: 2px solid var(--naranja); padding-top: 1rem; }
.indice h2 { font-size: .74rem; font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; color: var(--matte); font-family: "Montserrat", sans-serif; font-weight: 600; margin-bottom: .8rem; }
.indice ol { list-style: none; display: grid; gap: .1rem; counter-reset: ind; }
.indice a { display: grid; grid-template-columns: 28px 1fr; padding: .35rem 0; font-size: .86rem; color: var(--gris); transition: color .2s; }
.indice a::before { counter-increment: ind; content: counter(ind, decimal-leading-zero); color: var(--naranja); font-weight: 600; font-size: .78rem; padding-top: .08rem; }
.indice a:hover, .indice a.activo { color: var(--tender); font-weight: 600; }

.texto { max-width: 74ch; counter-reset: sec; }
.texto section { padding: 0 0 2.6rem; scroll-margin-top: 100px; }
.texto section + section { border-top: 1px solid var(--christmas); padding-top: 2.6rem; }
.texto h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-stretch: 115%; margin-bottom: 1.1rem; display: flex; gap: .9rem; align-items: baseline; }
.texto h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); color: var(--naranja); font-size: .9rem; font-weight: 800; }
.texto p, .texto li { font-size: .98rem; color: var(--gris); }
.texto p + p, .texto p + ul, .texto ul + p { margin-top: .9rem; }
.texto ul { list-style: none; display: grid; gap: .55rem; }
.texto li { padding-left: 1.4rem; position: relative; }
.texto li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 4px; background: var(--naranja); clip-path: polygon(0 100%, 100% 0, 100% 40%, 22% 100%); }
.texto a { color: var(--tender); font-weight: 600; border-bottom: 1px solid var(--naranja); }
.texto a:hover { color: var(--naranja); }
.texto strong { color: var(--tender); }
.aviso { background: var(--christmas); border-left: 3px solid var(--naranja); padding: 1.2rem 1.4rem; margin-top: 1rem; font-size: .92rem; }
/* Datos de la empresa que faltan cargar: bien visibles para no publicarlos así */
.completar { background: #FFE3D6; color: var(--primitive); padding: 0 .3em; font-weight: 600; }

/* Error 404 */
.error { min-height: 100vh; display: flex; align-items: center; color: var(--blanco); position: relative; overflow: hidden; }
.error .cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 130px 0 5rem; }
.error-cod { font-family: "Anybody", sans-serif; font-stretch: 140%; font-weight: 900; font-size: clamp(6rem, 16vw, 13rem); line-height: .85; color: var(--naranja); letter-spacing: -.03em; }
.error h1 { color: var(--blanco); font-size: clamp(1.8rem, 3.4vw, 3rem); margin: 1.4rem 0 1rem; max-width: 16ch; }
.error p { color: var(--light); max-width: 46ch; margin-bottom: 2.2rem; }
.error .acc { display: flex; flex-wrap: wrap; gap: .8rem; }
.error-atajos { list-style: none; border-top: 1px solid rgba(252,243,242,.2); }
.error-atajos a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(252,243,242,.2); font-family: "Anybody", sans-serif; font-stretch: 115%; font-weight: 700; font-size: 1.15rem; transition: color .25s, padding .3s var(--ease); }
.error-atajos a span { font-family: "Montserrat", sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .14em; color: var(--naranja); }
.error-atajos a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.error-atajos a:hover { color: var(--naranja); padding-left: .6rem; }
.error .simb { position: absolute; right: -40px; bottom: -60px; height: 420px; fill: rgba(255,255,255,.05); }

@media (max-width: 900px) {
  .legal-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 3rem; }
  .indice { position: static; }
  .error .cont { grid-template-columns: minmax(0, 1fr); padding-top: 120px; }
}