/* ==================================================================
   HIPOTECA PARA TI  -  estilos compartidos de las paginas legales
   ------------------------------------------------------------------
   Estos colores son los MISMOS que los de tu index.html. Si algun dia
   cambias la marca, copia aqui los valores del bloque :root del index
   (o al reves) para que todo siga a juego.
   ================================================================== */

:root{
  --ink:      #40098e;
  --ink-soft: #1b619f;
  --bg:       #F2F7F2;
  --surface:  #FFFFFF;
  --mint:     #9be9e2;
  --mint-ink: #077dc2;
  --sky:      #CBD8F6;
  --sky-ink:  #33467F;
  --butter:   #F7E3AC;
  --line:     #E1EAE2;

  --radius:    24px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 22px -16px rgba(64,9,142,.45);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3{ font-family:var(--font-display); letter-spacing:-.02em; color:var(--ink); line-height:1.15; }
p,li{ color:var(--ink-soft); }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--mint-ink); }
::selection{ background:var(--butter); color:var(--ink); }

.wrap{ max-width:820px; margin:0 auto; padding:0 1.2rem; }

/* ---- Barra superior ---- */
.legal-nav{
  background:rgba(242,247,242,.85);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.legal-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.8rem; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.brand-mark{ width:30px; height:30px; border-radius:10px; background:linear-gradient(140deg,var(--mint),var(--sky)); display:grid; place-items:center; color:var(--ink); font-size:.95rem; box-shadow:inset 0 0 0 1.5px rgba(64,9,142,.12); }
.back-link{ font-weight:600; font-size:.95rem; text-decoration:none; }

/* ---- Cabecera de pagina ---- */
header.page-head{ padding:3rem 0 1.5rem; }
.eyebrow{
  display:inline-block; font-weight:600; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint-ink); background:var(--mint); padding:.4rem .8rem; border-radius:var(--radius-pill);
}
header.page-head h1{ font-size:clamp(2rem,5vw,2.9rem); margin:1rem 0 .4rem; }
.updated{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---- Cuerpo del documento ---- */
main{ padding-bottom:3.5rem; }
main h2{ font-size:1.4rem; margin:2.4rem 0 .6rem; padding-top:.6rem; }
main h3{ font-size:1.1rem; margin:1.6rem 0 .4rem; }
main p{ margin:.6rem 0; }
main ul{ margin:.6rem 0 .6rem; padding-left:1.2rem; }
main li{ margin:.35rem 0; }
main strong{ color:var(--ink); }

/* Tabla de datos (identificacion) */
.data-table{ width:100%; border-collapse:collapse; margin:1rem 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.data-table th, .data-table td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.97rem; }
.data-table tr:last-child th, .data-table tr:last-child td{ border-bottom:0; }
.data-table th{ width:38%; color:var(--ink); font-weight:600; background:color-mix(in srgb,var(--mint) 18%, #fff); }
.data-table td{ color:var(--ink-soft); }

/* Marcador de "por completar" (resaltado amarillo) */
.todo{ background:#FFE9A8; color:#6b5300; padding:.05em .35em; border-radius:5px; font-weight:600; }

/* Aviso destacado (nota de cumplimiento) */
.callout{
  background:color-mix(in srgb,var(--butter) 45%, #fff);
  border:1px solid var(--butter); border-left:4px solid #e0b93c;
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:1.4rem 0;
}
.callout p{ color:#6b5300; margin:.3rem 0; }
.callout strong{ color:#5a4500; }

/* Indice de contenidos */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; margin:1.5rem 0; }
.toc p{ font-family:var(--font-display); font-weight:700; color:var(--ink); margin:0 0 .5rem; }
.toc ol{ margin:0; padding-left:1.3rem; }
.toc a{ color:var(--ink-soft); text-decoration:none; }
.toc a:hover{ color:var(--ink); text-decoration:underline; }

/* ---- Pie ---- */
footer.legal-foot{ border-top:1px solid var(--line); padding:2rem 0; }
footer.legal-foot .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; justify-content:space-between; }
footer.legal-foot nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
footer.legal-foot a{ color:var(--ink-soft); font-size:.9rem; text-decoration:none; }
footer.legal-foot a:hover{ color:var(--ink); }
footer.legal-foot small{ color:var(--ink-soft); font-size:.85rem; }

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } }