:root{
    /* Neutros de una sola familia: papel cálido muy leve, tintado hacia el navy */
    --paper:#f6f5f2;
    --surface:#fffffe;
    --ink:#101c26;
    --ink-soft:#55636e;
    --line:#dbd8d2;
    --line-soft:#e9e6e0;
    --navy:#0e2233;
    --navy-deep:#08161f;
    --accent:#17527d;
    --accent-hi:#2a6ea3;
    --accent-soft:#eaf0f5;
    --mark:#5f9ac9;
    /* texto sobre el acento sólido, tinte de fila y subrayado de guías:
       cambian de valor en oscuro, no de regla */
    --on-accent:#fff;
    --tint:rgba(23,82,125,.028);
    --underline:rgba(23,82,125,.35);
    --foot-rule:var(--navy-deep);
    --maxw:1140px;
    /* escala de z-index, sin números arbitrarios */
    --z-noise:5;
    --z-header:20;
    --z-skip:30;
    --ease:cubic-bezier(.22,.61,.36,1);
    color-scheme:light;
  }

  /* Misma marca de noche: el fondo baja a navy, el texto conserva el crema.
     Solo cambian valores; ninguna regla de estilo se duplica. */
  :root[data-theme="dark"]{
    --paper:#0b1721;
    --surface:#13232f;
    --ink:#e9e5dc;
    --ink-soft:#9dabb7;
    --line:#243440;
    --line-soft:#1b2933;
    /* el bloque de contacto y el header se vuelven MAS claros que el fondo,
       o pierden toda la separacion visual */
    --navy:#13232f;
    --navy-deep:#0e1b25;
    --accent:#82b4dd;
    --accent-hi:#a3cbec;
    --accent-soft:#1c3446;
    --mark:#7fb0da;
    --on-accent:#0b1721;
    --tint:rgba(130,180,221,.05);
    --underline:rgba(130,180,221,.42);
    --foot-rule:#26363f;
    color-scheme:dark;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:100px}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:16px;line-height:1.65;
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
  }
  /* grano fijo: rompe la planitud del vector puro sin costar una petición */
  body::before{
    content:"";position:fixed;inset:0;z-index:var(--z-noise);pointer-events:none;opacity:.038;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-0.015em;text-wrap:balance}
  p{text-wrap:pretty}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  header :focus-visible,.contact :focus-visible,footer :focus-visible{outline-color:var(--mark)}

  .skip{
    position:absolute;top:-120px;left:16px;z-index:var(--z-skip);
    background:var(--accent);color:var(--on-accent);padding:11px 18px;font-size:14px;text-decoration:none;
    transition:top .18s var(--ease);
  }
  .skip:focus{top:16px}

  /* etiqueta monoespaciada: numeración de secciones y microtítulos */
  .label{
    font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  }

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:var(--z-header);background:var(--navy);color:#fff;border-bottom:3px solid var(--accent)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
  .brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff}
  .brand .mark{flex:0 0 auto;width:35px;height:49px;color:var(--mark);transition:color .18s var(--ease)}
  .brand:hover .mark{color:#8dbde4}
  .wordmark{display:flex;flex-direction:column;line-height:1.1}
  .brand b{font-family:'Newsreader',serif;font-weight:400;font-size:21px;letter-spacing:.16em}
  .brand span{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.22em;color:#9db4c7;text-transform:uppercase;margin-top:3px}
  .nav-links{display:flex;gap:28px;font-size:14px}
  .nav-links a{
    color:#cfdae4;text-decoration:none;padding-bottom:3px;
    border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease);
  }
  .nav-links a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
  /* sección visible: el nav dice dónde está el lector */
  .nav-links a[aria-current="true"]{color:#fff;border-bottom-color:var(--mark)}

  /* Guidance abre sus subtemas con <details>: sin JS, y responde al toque */
  .nav-item{display:flex;align-items:center;gap:7px;position:relative}
  .nav-menu > summary{list-style:none;cursor:pointer;padding:5px 2px;color:#9db4c7;transition:color .18s var(--ease)}
  .nav-menu > summary::-webkit-details-marker{display:none}
  .nav-menu > summary::after{
    content:"";display:block;width:6px;height:6px;margin-top:-3px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);transition:transform .18s var(--ease);
  }
  .nav-menu > summary:hover,.nav-menu[open] > summary{color:#fff}
  .nav-menu[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
  .nav-menu ul{
    position:absolute;top:calc(100% + 18px);left:-20px;min-width:288px;list-style:none;
    background:var(--navy-deep);border:1px solid rgba(255,255,255,.14);border-top:2px solid var(--accent);
    padding:8px 0;box-shadow:0 18px 40px rgba(8,22,31,.35);
  }
  .nav-menu li a{display:block;padding:9px 20px;border-bottom:0;line-height:1.35}
  .nav-menu li a:hover{background:rgba(255,255,255,.07)}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
    padding:12px 22px;font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;
    font-family:inherit;
    transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
  }
  .btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
  .btn:active{transform:translateY(1px)}
  .btn-sm{padding:9px 18px;font-size:13.5px}

  /* Conmutador de tema: un icono, sin texto, en la barra */
  .nav-end{display:flex;align-items:center;gap:14px}
  .theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;padding:0;cursor:pointer;
    background:none;border:1px solid rgba(255,255,255,.22);color:#cfdae4;
    transition:color .18s var(--ease),border-color .18s var(--ease);
  }
  .theme-toggle:hover{color:#fff;border-color:rgba(255,255,255,.45)}
  .theme-toggle svg{width:17px;height:17px;transition:transform .35s var(--ease)}
  :root[data-theme="dark"] .theme-toggle svg{transform:rotate(180deg)}

  /* ---------- Hero ---------- */
  .hero{padding:92px 0 0}
  .hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;padding-bottom:72px}
  .hero h1{font-size:clamp(38px,5.4vw,62px);max-width:17ch;margin:18px 0 24px}
  .hero .lede{color:var(--ink-soft);font-size:clamp(16.5px,1.6vw,18.5px);max-width:52ch}
  .hero-side{border-left:1px solid var(--line);padding-left:32px}
  .hero-side dl{display:flex;flex-direction:column;gap:22px;margin-top:16px}
  .hero-side dt{font-size:15px;font-weight:600;margin-bottom:3px}
  .hero-side dd{color:var(--ink-soft);font-size:14px;line-height:1.55;max-width:44ch}

  /* ---------- Secciones ---------- */
  /* padding inferior mayor que el superior: se ve simétrico aunque no lo sea */
  .section{padding:76px 0 90px;border-top:1px solid var(--line)}
  .section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;margin-bottom:52px}
  .section-head h2{font-size:clamp(28px,3.6vw,40px)}
  .section-head p{color:var(--ink-soft);max-width:56ch}
  .alt{background:var(--surface)}

  /* Servicios: filas de expediente, no tres tarjetas iguales */
  .lines{border-top:1px solid var(--line)}
  .line{
    display:grid;grid-template-columns:minmax(220px,1fr) 1.35fr;gap:48px;align-items:start;
    padding:36px 20px 36px 0;border-bottom:1px solid var(--line);
    transition:background .2s var(--ease);
  }
  .line:hover{background:var(--tint)}
  .line h3{font-size:clamp(21px,2.3vw,27px);max-width:18ch}
  .line ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding-top:5px}
  .line li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:62ch}
  .line li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--accent)}

  /* Marco regulatorio: dos bloques con lista de referencias normativas */
  .frame{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--paper)}
  .frame > div{padding:34px 32px;transition:background .2s var(--ease)}
  .frame > div:hover{background:var(--surface)}
  .alt .frame{background:var(--surface)}
  .alt .frame > div:hover{background:var(--paper)}
  .frame > div + div{border-left:1px solid var(--line)}
  .frame h3{font-size:20px;margin:12px 0 16px}
  .frame ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .frame li{color:var(--ink-soft);font-size:14.5px;line-height:1.55;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
  .frame li:last-child{border-bottom:none;padding-bottom:0}
  .frame p{color:var(--ink-soft);font-size:14.5px;line-height:1.65;max-width:52ch}
  .frame p + p{margin-top:12px}
  .frame code{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink);background:var(--accent-soft);padding:1px 5px}

  /* Sectores */
  .sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:52px;border-top:1px solid var(--line)}
  .sector{
    display:grid;grid-template-rows:auto auto;
    padding:26px 30px 26px 0;border-bottom:1px solid var(--line);
    transition:background .2s var(--ease)
  }
  .sector:hover{background:var(--tint)}
  .sector h3{font-size:17px;font-family:'Geist',sans-serif;font-weight:600;letter-spacing:0;margin-bottom:5px}
  .sector p{color:var(--ink-soft);font-size:14px;line-height:1.55;max-width:46ch}

  /* ---------- Contacto ---------- */
  .contact{background:var(--navy);color:#fff;padding:82px 0 92px;position:relative;overflow:hidden}
  /* filigrana: la marca a gran escala, apenas perceptible */
  /* la marca respira completa dentro del bloque: recortarla a medias leia como error */
  .watermark{position:absolute;right:52px;bottom:56px;height:340px;color:#fff;opacity:.05;pointer-events:none}
  :root[data-theme="dark"] .watermark{opacity:.075}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;position:relative}
  .contact h2{font-size:clamp(29px,3.8vw,44px);max-width:16ch;margin:16px 0 18px}
  .contact .lede{color:#a9bece;max-width:46ch}
  .contact .label{color:#7f9bb2}
  .contact-list{display:flex;flex-direction:column;gap:26px}
  .contact-list > div{border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
  .contact-list dt{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f9bb2;margin-bottom:7px}
  .contact-list dd{font-size:17px;line-height:1.5}
  .contact-list a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .18s var(--ease)}
  .contact-list a:hover{border-bottom-color:#fff}
  .contact .btn{margin-top:30px;background:#fff;color:var(--navy);border-color:#fff}
  .contact .btn:hover{background:#dbe6ef;border-color:#dbe6ef;color:var(--navy)}

  footer{background:var(--navy-deep);color:#7f9bb2;padding:46px 0 30px;font-size:13px;border-top:1px solid var(--foot-rule)}
  /* Navegación de salida: quien entra desde Google a una guía necesita a dónde ir. */
  .foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:38px;
    padding-bottom:28px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-col .label{color:#7f9bb2;margin-bottom:14px}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .foot-col a{color:#a9bece;text-decoration:none;transition:color .18s var(--ease)}
  .foot-col a:hover,.foot-col a[aria-current]{color:#fff}
  .foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
  .mark-sm{width:15px;height:21px;flex:0 0 auto;color:#456e8c}
  .foot{display:flex;justify-content:center;text-align:center;gap:18px;flex-wrap:wrap}
  .foot a{color:#a9bece;text-decoration:none;transition:color .18s var(--ease)}
  .foot a:hover{color:#fff}

  /* Entrada escalonada. Solo con JS activo, para que sin JS todo siga visible. */
  @media (prefers-reduced-motion:no-preference){
    .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
    .js .reveal.in{opacity:1;transform:none}
  }

  @media (max-width:1000px){
    .line{grid-template-columns:1fr;gap:16px}
    .line h3{max-width:none}
  }
  @media (max-width:940px){
    .nav-links{display:none}
  }
  /* Bajo ~520px la barra no cabe: marca + conmutador + CTA piden 490px.
     El texto de la marca se oculta a la vista pero sigue dando el nombre
     accesible al enlace; el logotipo solo ya identifica la casa. */
  @media (max-width:520px){
    .nav{gap:14px}
    .brand .wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }
  @media (max-width:1080px){
    .nav-links{gap:20px;font-size:13.5px}
  }
  @media (max-width:900px){
    .hero-grid,.section-head,.contact-grid{grid-template-columns:1fr;gap:36px}
    .hero-side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:28px}
    .frame{grid-template-columns:1fr}
    .frame > div + div{border-left:none;border-top:1px solid var(--line)}
    .watermark{display:none}
    .foot-cols{grid-template-columns:1fr 1fr;gap:30px 38px}
  }
  @media (max-width:720px){
    .hero{padding-top:56px}
    .section{padding:56px 0 66px}
    .sector,.line{padding-right:0}
    /* apilar las tres en una columna deja un pie de casi una pantalla:
       Guidance y Company quedan a la par y Contact cruza abajo */
    .foot-cols{grid-template-columns:1fr 1fr;gap:26px 24px}
    .foot-col:first-child{grid-column:1/-1}
  }


/* ---------- Páginas de detalle ---------- */
.doc{padding:52px 0 92px}
.crumb{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:24px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .18s var(--ease)}
.crumb a:hover{border-bottom-color:var(--accent)}
.doc h1{font-size:clamp(32px,4.4vw,52px);max-width:20ch;margin-bottom:22px}
.doc .lede{color:var(--ink-soft);font-size:clamp(16.5px,1.6vw,19px);max-width:58ch;margin-bottom:8px}
.doc-body{max-width:68ch}
.doc-body h2{font-size:clamp(23px,2.8vw,30px);margin:52px 0 16px}
.doc-body h3{font-family:'Geist',sans-serif;font-weight:600;font-size:17px;letter-spacing:0;margin:30px 0 6px}
.doc-body p{color:var(--ink-soft);margin-bottom:16px}
.doc-body ul{list-style:none;margin:0 0 20px}
.doc-body li{position:relative;padding-left:20px;color:var(--ink-soft);margin-bottom:10px;line-height:1.6}
.doc-body li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--accent)}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body code{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink);background:var(--accent-soft);padding:1px 5px}
.doc-cta{max-width:68ch;margin-top:56px;padding:32px;border:1px solid var(--line);background:var(--surface)}
.doc-cta h2{font-size:23px;margin:0 0 10px}
.doc-cta p{color:var(--ink-soft);margin-bottom:24px}
.related{margin-top:56px;border-top:1px solid var(--line);padding-top:26px}
.related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 48px;margin-top:14px}
.related a{font-size:15.5px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .18s var(--ease)}
.related a:hover{border-bottom-color:var(--accent)}

/* Índice de guías en la portada */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:52px;border-top:1px solid var(--line)}
.guide{display:grid;grid-template-rows:auto auto;padding:24px 30px 24px 0;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.guide:hover{background:var(--tint)}
.guide a{font-family:'Geist',sans-serif;font-size:17px;font-weight:600;justify-self:start;
  text-decoration:underline;text-decoration-color:var(--underline);text-decoration-thickness:1px;text-underline-offset:4px;
  transition:text-decoration-color .18s var(--ease)}
.guide a:hover{text-decoration-color:var(--accent)}
.guide p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin-top:7px;max-width:46ch}
@media (max-width:720px){.guide{padding-right:0}}

/* ---------- Retículas alineadas ---------- */
/* Cada tarjeta cede sus dos filas a la retícula madre: la fila del título la
   fija el título más alto, así las descripciones arrancan todas a la misma
   altura. Sin soporte de subgrid cada tarjeta se apila sola, como antes. */
@supports (grid-template-rows: subgrid){
  .guide,.sector{grid-row:span 2;grid-template-rows:subgrid}
}