/* Soluciones Aplicadas IA — hoja compartida para páginas de texto (legal, producto).
   Copiada desde pyme-crm/pagina.css el 2026-09-27 para reusar en privacidad.html
   y terminos.html del sitio principal. Si se edita una, revisar la otra. */
:root {
  color-scheme: light;
  --paper: oklch(96% 0.012 92);
  --paper-deep: oklch(92% 0.018 88);
  --ink: oklch(17% 0.02 250);
  --blue: oklch(45% 0.16 250);
  --blue-deep: oklch(36% 0.16 250);
  --amber: oklch(72% 0.16 68);
  --amber-hover: oklch(78% 0.16 68);
  --muted: oklch(40% 0.02 250);
  --hairline: oklch(17% 0.02 250 / 0.18);
  --display: Anton, Impact, "Haettenschweiler", sans-serif;
  --body: Archivo, "Helvetica Neue", system-ui, sans-serif;
  --t-hero: clamp(2.8rem, 1rem + 5.2vw, 5.5rem);
  --t-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --t-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --gutter: clamp(1.25rem, 0.2rem + 4.5vw, 6rem);
  --section: clamp(3rem, 2rem + 4vw, 6rem);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--blue); }
a:hover { color: var(--blue-deep); }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
.rot { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--blue); }
.shell { width: min(100%, 1200px); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; z-index: 10; }
.skip:focus { left: 0; top: 0; }

.topbar { border-bottom: 1px solid var(--hairline); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.wordmark { font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: 1.5rem; font-size: 0.9375rem; font-weight: 600; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--blue); }

.btn { display: inline-block; font: 600 1rem/1 var(--body); padding: 1rem 1.5rem; border: 2px solid transparent; text-decoration: none; transition: background 150ms; }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--amber-hover); color: var(--ink); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.portada { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: var(--section); }
.portada h1 { font-size: var(--t-hero); margin-block: 0.75rem 1.25rem; }
.portada .lead { font-size: var(--t-lead); color: var(--muted); max-width: 34rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.telefono img { max-height: 620px; width: auto; margin-inline: auto; }

.banda { background: var(--paper-deep); padding-block: var(--section); }
.banda h2, .seccion h2 { font-size: var(--t-h2); margin-bottom: 2rem; }
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 3rem; list-style: none; margin: 0; padding: 0; }
.modulos li { border-top: 3px solid var(--ink); padding-top: 1rem; }
.modulos h3 { font: 700 1.15rem/1.3 var(--body); margin: 0 0 0.4rem; }
.modulos p { color: var(--muted); font-size: 0.9375rem; margin: 0; }

.seccion { padding-block: var(--section); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.nota { font-size: 0.9375rem; color: var(--muted); }

.pie { border-top: 1px solid var(--hairline); padding-block: 2rem; font-size: 0.9375rem; color: var(--muted); }
.pie .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Documento legal */
.legal { max-width: 46rem; padding-block: var(--section); }
.legal h1 { font-size: clamp(2.2rem, 1.2rem + 3.5vw, 3.75rem); margin-block: 0.75rem 1rem; }
.legal h2 { font: 700 1.3rem/1.3 var(--body); margin: 2.5rem 0 0.75rem; }
.legal ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal .fecha { color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 860px) {
  .portada, .dos { grid-template-columns: 1fr; }
  .telefono { order: -1; }
  .telefono img { max-height: 420px; }
}