/* Hoja de estilos compartida por las páginas legales de Elanthia */
:root{
  --petroleo:#0B5664; --petroleo-d:#08424D; --navy:#1F2B38; --navy-d:#17212B;
  --arena:#B86F48; --arena-d:#9A5A37; --arena-l:#F1DED2;
  --crema:#F6F3EE; --salvia-l:#DCEAEC;
  --line:#E6E1D9; --ink:#26313D; --muted:#5F6B76; --white:#fff;
  --head:'Poppins',system-ui,-apple-system,sans-serif;
  --body:'Mulish',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{font-family:var(--body);color:var(--ink);background:var(--crema);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--petroleo-d);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--navy);}
img{display:block;max-width:100%;}
:focus-visible{outline:3px solid var(--arena);outline-offset:3px;border-radius:4px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--petroleo);color:#fff;
  font-family:var(--head);font-weight:600;padding:12px 22px;border-radius:0 0 12px 0;text-decoration:none;}
.skip-link:focus{left:0;}

/* ---------- Cabecera ---------- */
header{background:var(--navy);padding:16px 0;position:sticky;top:0;z-index:100;}
.wrap{max-width:820px;margin:0 auto;padding:0 24px;}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand img{width:40px;}
.brand .bt{font-family:var(--head);font-weight:600;font-size:17px;color:var(--crema);line-height:1.1;}
.brand .bt small{display:block;font-weight:400;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--arena-l);margin-top:2px;}
.back{font-family:var(--head);font-weight:600;font-size:14px;color:var(--arena-l);text-decoration:none;white-space:nowrap;}
.back:hover{color:#fff;text-decoration:underline;}

/* ---------- Portada del documento ---------- */
.doc-head{background:var(--navy);color:var(--crema);padding:44px 0 56px;}
.doc-head .eyebrow{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--arena);display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.doc-head .eyebrow::before{content:"";width:28px;height:2px;background:var(--arena);border-radius:2px;}
.doc-head h1{font-family:var(--head);font-weight:600;font-size:clamp(27px,5.2vw,40px);line-height:1.15;
  letter-spacing:-.02em;color:#fff;}
.doc-head .meta{margin-top:18px;font-size:14.5px;color:rgba(246,243,238,.75);}

/* ---------- Cuerpo ---------- */
main{padding:44px 0 80px;}
.toc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin-bottom:44px;}
.toc h2{font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);margin-bottom:14px;}
.toc ol{margin:0;padding-left:20px;}
.toc li{margin:5px 0;font-size:15px;}
.toc a{text-decoration:none;}
.toc a:hover{text-decoration:underline;}

section{margin-bottom:38px;scroll-margin-top:96px;}
h2{font-family:var(--head);font-weight:600;font-size:clamp(20px,3.2vw,24px);line-height:1.25;
  letter-spacing:-.01em;color:var(--navy);margin-bottom:14px;padding-top:6px;}
h3{font-family:var(--head);font-weight:600;font-size:17px;color:var(--navy);margin:24px 0 8px;}
p{margin-bottom:14px;}
ul,ol{margin:0 0 16px 22px;}
li{margin-bottom:8px;}
strong,b{font-weight:700;color:var(--navy);}

.callout{background:var(--salvia-l);border-left:4px solid var(--petroleo);border-radius:0 12px 12px 0;
  padding:20px 24px;margin:22px 0;}
.callout p:last-child{margin-bottom:0;}
.callout.aviso{background:#FDF3E7;border-left-color:var(--arena-d);}
.callout.urgente{background:#FBEAEA;border-left-color:#B4453E;}
.callout h3{margin-top:0;}

table{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:15px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-family:var(--head);font-weight:600;color:var(--navy);background:var(--white);}
.tbl-wrap{overflow-x:auto;}

/* Dato pendiente de completar antes de publicar */
.todo{background:#FFF0B3;color:#6B4E00;padding:1px 7px;border-radius:4px;font-weight:700;
  font-family:var(--head);font-size:.92em;white-space:normal;}

/* ---------- Pie ---------- */
footer{background:var(--navy-d);color:rgba(246,243,238,.72);padding:36px 0;font-size:14.5px;}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;}
footer a{color:var(--arena-l);}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;}
footer nav a{padding:5px 0;}

@media(max-width:560px){
  /* Tablas más compactas: menos scroll horizontal dentro de .tbl-wrap */
  th,td{padding:9px 11px;font-size:14px;}
  .tbl-wrap{-webkit-overflow-scrolling:touch;}
  .callout{padding:17px 18px;}
  .doc-head{padding:32px 0 40px;}
  main{padding:32px 0 60px;}
  .toc{padding:22px 20px;}
  header .wrap{gap:10px;}
  .brand .bt small{display:none;}
}

/* ============================================================
   REVISIÓN RESPONSIVE — capa final
   ============================================================ */

/* Márgenes fluidos y áreas seguras (notch en horizontal) */
:root{--gutter:24px;}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));
      padding-right:max(var(--gutter),env(safe-area-inset-right));}
@media(max-width:361px){ :root{--gutter:16px;} }
header{padding-top:calc(16px + env(safe-area-inset-top));}
footer{padding-bottom:calc(36px + env(safe-area-inset-bottom));}

/* El header es sticky: las anclas del índice deben quedar por debajo */
html{scroll-padding-top:calc(96px + env(safe-area-inset-top));}
@media(max-width:560px){
  html{scroll-padding-top:calc(80px + env(safe-area-inset-top));}
  section{scroll-margin-top:80px;}
}

/* Objetivos táctiles de 44px o más (WCAG 2.5.8) */
@media(max-width:760px){
  footer nav a{display:inline-block;padding:10px 0;}
  .brand,.back{min-height:44px;display:flex;align-items:center;}
  /* separación en el índice sin romper la alineación de los números
     (inline-block partía en dos líneas los títulos largos) */
  .toc li{margin:12px 0;}
}

/* Legibilidad: sin cortes raros y sin desbordes de URLs o correos largos */
h1,h2,h3{overflow-wrap:break-word;}
a,code,td,th{overflow-wrap:anywhere;}

/* Móvil en horizontal */
@media(max-width:980px) and (max-height:520px) and (orientation:landscape){
  .doc-head{padding:26px 0 32px;}
  main{padding:28px 0 48px;}
}