/* ============================================================
   Portal de Legalinares — legalinares.cl
   Estático puro: sin JavaScript, sin llamadas a ninguna API.

   La página está compuesta como la primera hoja de un escrito judicial: filete
   entintado en el margen izquierdo, márgenes anchos, Garamond para lo que se lee y una
   «suma» de apertura. Es la única licencia formal que se toma; el resto se mantiene
   callado a propósito, porque un estudio serio no se anuncia a gritos.
   ============================================================ */

:root{
  --grafito:#1A1A1A;
  --tinta:#2E2A24;          /* texto largo: grafito con algo de calor, menos duro que el negro */
  --dorado:#B08D57;
  --marfil:#F7F4EF;
  --papel:#FFFFFF;
  --neutro:#6B6B6B;
  --linea:#DED8CC;

  --garamond:'EB Garamond', Georgia, serif;
  --inter:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --margen:clamp(1.75rem, 7vw, 7rem);
  --medida:38rem;            /* la columna de lectura, como en la app */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:var(--inter); color:var(--tinta); background:var(--marfil);
  line-height:1.6; padding:0 var(--margen) 0 calc(var(--margen) + 1rem);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

/* El filete del margen: fino, entintado, a lo alto de toda la hoja. */
.filete{
  position:fixed; left:calc(var(--margen) * .45); top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--dorado) 8%, var(--dorado) 92%, transparent);
  opacity:.55;
}
@media (max-width:640px){ .filete{left:.75rem} }

/* ── Cabecera ── */
.cabecera{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding:clamp(2rem,6vw,4rem) 0 clamp(3rem,8vw,5rem);
}
.cabecera__nombre{
  font-family:var(--garamond); font-size:clamp(1.5rem,3.2vw,2rem); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--grafito);
}
.cabecera__sub{
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--neutro);
}

/* ── La suma ── */
.suma{ max-width:var(--medida); padding-bottom:clamp(3.5rem,9vw,6rem); }
.suma__etiqueta{
  font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dorado); margin-bottom:1.1rem;
}
.suma__texto{
  font-family:var(--garamond); font-weight:400;
  font-size:clamp(1.6rem,4.6vw,2.6rem); line-height:1.32; color:var(--grafito);
  text-wrap:balance;
}
/* Las áreas van en cursiva dentro de la suma, como se destaca lo pedido en un escrito. */
.suma__texto em{font-style:italic}
.suma__pie{
  margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--linea);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--neutro);
}

/* ── Títulos de sección ── */
.titulo{
  font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--neutro); margin-bottom:1.6rem;
}

/* ── Áreas de práctica ── */
.areas{padding-bottom:clamp(3rem,8vw,5rem)}
.areas__lista{
  display:grid; gap:2.2rem 3rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  max-width:58rem;
}
.area dt{
  font-family:var(--garamond); font-size:1.3rem; color:var(--grafito);
  margin-bottom:.4rem;
}
.area dd{
  font-size:.9375rem; color:var(--tinta); max-width:30rem;
  padding-left:.9rem; border-left:1px solid var(--linea);
}

/* ── Acceso ──
   La única acción de la página, y por eso lo único que se comporta como un control. */
.acceso{padding-bottom:clamp(3rem,8vw,5rem)}
.acceso__tarjeta{
  display:inline-flex; flex-direction:column; gap:.35rem; max-width:26rem;
  padding:1.4rem 1.6rem; background:var(--papel);
  border:1px solid var(--linea); border-left:2px solid var(--dorado);
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.acceso__tarjeta:hover{border-color:var(--dorado); transform:translateX(2px)}
.acceso__tarjeta:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}
.acceso__nombre{
  font-family:var(--garamond); font-size:1.5rem; color:var(--grafito); line-height:1.1;
}
.acceso__nombre i{font-style:italic}
.acceso__desc{font-size:.875rem; color:var(--neutro)}
.acceso__ir{
  margin-top:.5rem; font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dorado);
}

/* ── Contacto ── */
.contacto{padding-bottom:clamp(3rem,8vw,5rem)}
.contacto__linea a{
  font-family:var(--garamond); font-size:1.2rem; color:var(--grafito);
  text-decoration:none; border-bottom:1px solid var(--dorado); padding-bottom:2px;
}
.contacto__linea a:hover{color:var(--dorado)}

/* ── Pie: el bloque de firma de un escrito ── */
.pie{
  margin-top:auto; padding:2.5rem 0 clamp(2.5rem,7vw,4rem);
  border-top:1px solid var(--linea); max-width:var(--medida);
}
.pie__firma{
  font-family:var(--garamond); font-size:1.15rem; color:var(--grafito);
  letter-spacing:.02em;
}
.pie__cargo{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--neutro);
  margin-top:.2rem;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important; scroll-behavior:auto!important}
}