/* ==========================================================================
   deRentas Smart — Documentos legales (Términos y Privacidad)
   Alineado a los Lineamientos de uso de marca deRentas (2026.06).
   ========================================================================== */

/* ---- Tipografía de marca: PP Neue Montreal ----
   Es una fuente licenciada (no se incluye). Cuando tengas los archivos,
   colocalos en assets/fonts/ y descomentá este bloque:

@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
   Mientras tanto, se usa una pila de respaldo neo-grotesca similar.        */

:root {
  /* Paleta oficial */
  --yellow: #F6C300;        /* Acento / Marca */
  --yellow-600: #D0A500;
  --yellow-100: #FDE99C;
  --yellow-050: #FFF3C3;
  --grad-a: #F6C300;
  --grad-b: #FFFEE4;

  --dark: #212529;          /* Color principal / texto */
  --dark-700: #2b3036;
  --red: #DC2626;           /* Badge "Smart" */

  --ink: #212529;
  --ink-soft: #52585f;
  --muted: #6b7280;

  --bg: #ffffff;            /* Neutral 0 */
  --bg-soft: #FAFAFA;       /* Neutral 50 / gris claro */
  --line: #ECEEF2;          /* Neutral 100 */

  --maxw: 1040px;
  --radius: 12px;
  --font: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, system-ui,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* seguro contra desbordes horizontales */
}

/* Enlaces: texto oscuro (accesible) con subrayado amarillo de marca */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--ink); }

h1, h2, h3 { line-height: 1.22; color: var(--ink); margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 4.5vw, 48px); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: .5rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; min-height: 62px;
  padding-top: 8px; padding-bottom: 8px;   /* conserva el padding lateral del .container */
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 40px; width: auto; display: block; border-radius: 9px; }

.doc-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.3rem; }
.doc-nav a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; text-decoration: none; }
.doc-nav a:hover { color: var(--dark); }
.doc-nav a[aria-current="page"] { color: var(--dark); font-weight: 700; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }

/* Header en pantallas chicas: logo arriba y navegación debajo (a lo ancho) */
@media (max-width: 560px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .doc-nav { gap: .5rem 1.1rem; }
  .doc-nav a { font-size: .92rem; }
}

/* ---------- Hero del documento ---------- */
.legal-hero {
  background:
    radial-gradient(680px 340px at 88% -20%, rgba(246,195,0,.18), transparent 60%),
    var(--dark);
  color: #fff; padding: 58px 0 46px;
}
.legal-hero h1 { color: #fff; }
.legal-hero p { color: #cfd3d8; margin: 0; }

/* ---------- Layout ---------- */
.legal-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 48px;
  padding: 48px 0 72px;
}
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 20px; } }

.legal-toc { position: sticky; top: 82px; align-self: start; font-size: .9rem; }
@media (max-width: 900px) {
  .legal-toc {
    position: static; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  }
}
.legal-toc h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 12px; font-weight: 700;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin-bottom: 8px; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--dark); }

/* ---------- Cuerpo ---------- */
.legal-body { max-width: 720px; }
.legal-body h2 { scroll-margin-top: 96px; margin-top: 40px; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { margin-top: 26px; }
.legal-body p, .legal-body li { color: var(--ink-soft); }
.legal-body ul { padding-left: 1.3rem; }
.legal-body li { margin-bottom: .4rem; }
.legal-body .lead { font-size: 1.08rem; color: var(--ink); font-weight: 500; }

.note {
  background: var(--bg-soft); border-left: 4px solid var(--yellow);
  border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: .95rem;
}
.meta-line { color: var(--muted); font-size: .9rem; }

/* ---------- Tabla Data Safety ---------- */
.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { background: var(--bg-soft); font-weight: 700; color: var(--dark); white-space: nowrap; }
table.data td { color: var(--ink-soft); }
table.data tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 28px 0; margin-top: 8px;
  color: var(--muted); font-size: .9rem;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
.footer-inner a { color: var(--ink-soft); }

/* ---------- Página de índice ---------- */
.index-hero { text-align: center; padding: 64px 0 4px; }
.index-hero__logo { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 18px; display: block; }
.index-hero h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin-bottom: .35rem; }
.index-hero p { color: var(--muted); font-size: 1.05rem; margin: 0 auto; max-width: 46ch; }

.doc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 40px 0 72px; }
@media (max-width: 720px) { .doc-cards { grid-template-columns: 1fr; } }
.doc-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.doc-card:hover {
  text-decoration: none; border-color: var(--yellow);
  box-shadow: 0 14px 32px -20px rgba(33,37,41,.5); transform: translateY(-2px);
}
.doc-card h2 { font-size: 1.2rem; margin-bottom: .35rem; }
.doc-card p { color: var(--muted); font-size: .95rem; margin: 0 0 1.2rem; flex: 1; }
.doc-card__cta { font-weight: 700; color: var(--dark); }
.doc-card__cta span { border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }