/* Amco Design System — hoja de estilos de páginas legales
   Tokens tomados de Amco DS (Figma): Slate + brand darkblue/blue. */
:root{
  --brand-darkblue:rgb(0,47,110);
  --brand-blue:rgb(25,155,216);
  --primary:rgb(37,99,235);
  --primary-hover:rgb(29,78,216);
  --slate-50:rgb(248,250,252);
  --slate-100:rgb(241,245,249);
  --slate-200:rgb(226,232,240);
  --slate-500:rgb(100,116,139);
  --slate-700:rgb(51,65,85);
  --slate-800:rgb(30,41,59);
  --surface-primary:#ffffff;
  --radius-sm:4px; --radius-md:8px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.03);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Nunito Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surface-primary); color:var(--slate-700);
  font-family:var(--font-body); font-size:16px; line-height:24px;
  text-wrap:pretty;
}
.page{max-width:1120px; margin:0 auto; padding:0 24px 64px;}

/* Encabezado: solo el logotipo Amco centrado sobre surface-primary */
.site-header{background:var(--surface-primary); padding:40px 24px 24px; text-align:center;}
.site-header img{width:172px; height:auto; display:inline-block;}

.doc-title{
  font-family:var(--font-display); font-weight:500; font-size:30px; line-height:38px;
  color:var(--brand-darkblue); margin:0 0 4px; letter-spacing:0;
}
.doc-meta{font-size:14px; line-height:20px; color:var(--slate-500); margin:0 0 40px;}
.doc-rule{border:0; border-top:1px solid var(--slate-200); margin:0 0 40px;}

h2.section{
  font-family:var(--font-display); font-weight:500; font-size:24px; line-height:32px;
  color:var(--brand-darkblue); margin:40px 0 16px;
}
h3.sub{
  font-family:var(--font-display); font-weight:500; font-size:18px; line-height:26px;
  color:var(--slate-800); margin:24px 0 8px;
}
p{margin:0 0 16px;}
strong{color:var(--slate-800); font-weight:700;}
a{color:var(--primary); font-weight:700; text-decoration:underline;}
a:hover{color:var(--primary-hover);}

/* Aviso destacado */
.callout{
  background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius-md);
  padding:24px; margin:0 0 40px;
}
.callout p{margin:0 0 12px; color:var(--slate-700);}
.callout p:last-child{margin:0;}

/* Listas de definiciones de cookies */
.def-group{margin:0 0 24px;}
.def-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.def-list li{
  border-left:2px solid var(--slate-200); padding:0 0 0 16px;
}
.def-list .term{color:var(--slate-800); font-weight:700;}
.def-list p{margin:0;}
ul.links{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px;}

/* Tabla de cookies */
.table-wrap{
  border:1px solid var(--slate-200); border-radius:var(--radius-md);
  overflow:auto; box-shadow:var(--shadow-sm); margin:0 0 16px;
}
table.cookies{border-collapse:collapse; width:100%; min-width:1300px; font-size:14px; line-height:20px; table-layout:fixed;}
table.cookies col.c-name{width:260px;}
table.cookies col.c-type{width:110px;}
table.cookies col.c-purpose{width:230px;}
table.cookies col.c-mgmt{width:150px;}
table.cookies col.c-dur{width:130px;}
table.cookies col.c-impact{width:280px;}
table.cookies col.c-plat{width:190px;}
table.cookies th{
  background:var(--brand-darkblue); color:#fff; font-family:var(--font-display); font-weight:500;
  text-align:left; vertical-align:bottom; padding:12px; border-right:1px solid rgba(255,255,255,.16);
  position:sticky; top:0;
}
table.cookies th:last-child{border-right:0;}
table.cookies td{
  padding:12px; border-top:1px solid var(--slate-200); border-right:1px solid var(--slate-200);
  vertical-align:top; color:var(--slate-700); overflow-wrap:break-word;
}
table.cookies td:last-child{border-right:0;}
table.cookies tbody tr:nth-child(even){background:var(--slate-50);}
table.cookies td.cookie-name{font-family:var(--font-display); font-weight:500; color:var(--slate-800);}
table.cookies td.cookie-name span{display:block; white-space:nowrap;}
table.cookies td:last-child a{overflow-wrap:anywhere;}
.table-note{font-size:12px; line-height:16px; color:var(--slate-500); margin:0 0 8px;}

@media (max-width:640px){
  .doc-title{font-size:24px; line-height:32px;}
  h2.section{font-size:20px; line-height:28px;}
  .page{padding:0 16px 40px;}
}

/* Tabla apilada en móvil: cada fila se vuelve una tarjeta */
@media (max-width:768px){
  .table-note{display:none;}
  .table-wrap{border:0; border-radius:0; box-shadow:none; overflow:visible;}
  table.cookies{min-width:0; width:100%; table-layout:auto; display:block;}
  table.cookies colgroup,
  table.cookies thead{display:none;}
  table.cookies tbody{display:grid; gap:12px;}
  table.cookies tbody tr{
    display:block; background:var(--surface-primary);
    border:1px solid var(--slate-200); border-radius:var(--radius-md);
    padding:0; overflow:hidden;
  }
  table.cookies tbody tr:nth-child(even){background:var(--surface-primary);}
  table.cookies td{
    display:block; border:0; border-top:1px solid var(--slate-100);
    padding:8px 16px;
  }
  table.cookies tr td:first-child{border-top:0;}
  table.cookies td::before{
    content:attr(data-label);
    display:block; font-family:var(--font-display); font-weight:500;
    font-size:12px; line-height:16px; color:var(--slate-500); margin-bottom:2px;
  }
  table.cookies td.cookie-name{background:var(--slate-50);}
  table.cookies td.cookie-name span{white-space:normal; overflow-wrap:anywhere;}
}