/* NeoServeis · hoja de estilo de las páginas legales */

:root{
  --yellow:#FEBD2B; --yellow-dark:#E5A612;
  --blue:#0F8AC5; --blue-dark:#0B6E9E; --blue-soft:#E7F4FB;
  --ink:#1E1E1E; --ink-soft:#3A3A3A; --grey:#6C7A85;
  --line:#E4EAEE; --bg:#FFFFFF; --bg-soft:#F5F9FB;
  --radius:18px; --maxw:820px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500; font-size:17px; line-height:1.75;
  color:var(--ink-soft); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Cabecera */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  max-width:1180px; height:92px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav .brand{display:flex; align-items:center; height:100%; padding:12px 0}
.nav .brand img{height:100%; width:auto; max-height:44px; object-fit:contain}
.nav .volver{
  font-weight:700; font-size:15px; color:var(--ink); text-decoration:none;
  padding:10px 22px; border-radius:999px; background:var(--yellow);
  box-shadow:0 6px 16px rgba(254,189,43,.4); white-space:nowrap;
}
.nav .volver:hover{background:var(--yellow-dark); color:var(--ink)}

/* Encabezado de página */
.cabecera{
  background:linear-gradient(155deg,#0B6E9E 0%,#0F8AC5 100%);
  color:#fff; padding:60px 0 54px; text-align:center;
}
.cabecera h1{
  font-size:clamp(1.8rem,4.6vw,2.7rem); font-weight:700; color:#fff;
  margin:0 0 10px; letter-spacing:-.02em;
}
.cabecera p{margin:0; color:#D8EEFA; font-size:.95rem}

/* Contenido */
main{padding:56px 0 72px}
main h2{
  font-size:1.28rem; font-weight:700; color:var(--ink);
  margin:44px 0 14px; padding-top:20px; border-top:1px solid var(--line);
}
main h2:first-of-type{margin-top:0; border-top:0; padding-top:0}
main h3{font-size:1.04rem; font-weight:700; color:var(--ink); margin:26px 0 8px}
main p{margin:0 0 16px}
main ul{margin:0 0 18px; padding-left:0; list-style:none}
main ul li{position:relative; padding-left:22px; margin-bottom:9px}
main ul li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:7px; height:7px; border-radius:50%; background:var(--yellow);
}

.ficha{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px; margin:0 0 28px;
}
.ficha dl{margin:0; display:grid; grid-template-columns:190px 1fr; gap:8px 18px}
.ficha dt{font-weight:700; color:var(--ink); font-size:.9rem}
.ficha dd{margin:0}

.pendiente{
  background:#FFF8E6; border:1px solid #F4DFA6; border-left:4px solid var(--yellow);
  border-radius:12px; padding:18px 22px; margin:0 0 28px; font-size:.94rem;
}
.pendiente strong{color:var(--ink)}

table{
  width:100%; border-collapse:collapse; margin:0 0 24px; font-size:.93rem;
}
table th,table td{
  border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top;
}
table th{background:var(--bg-soft); font-weight:700; color:var(--ink)}

.actualizado{
  font-size:.87rem; color:var(--grey); border-top:1px solid var(--line);
  padding-top:20px; margin-top:44px;
}

/* Pie */
.footer{background:#151515; color:#8E9AA2; padding:44px 0; font-size:.93rem}
.footer a{color:#8E9AA2; text-decoration:none}
.footer a:hover{color:var(--yellow)}
.footer .wrap{
  max-width:1180px; display:flex; justify-content:space-between;
  align-items:center; gap:18px; flex-wrap:wrap;
}
.footer ul{display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap}

@media (max-width:640px){
  body{font-size:16px}
  .nav .wrap{height:74px}
  .nav .brand img{max-height:48px}
  .cabecera{padding:44px 0 40px}
  main{padding:40px 0 56px}
  .ficha dl{grid-template-columns:1fr; gap:2px}
  .ficha dt{margin-top:10px}
  .footer .wrap{flex-direction:column; text-align:center}
  table{font-size:.87rem}
  table th,table td{padding:9px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
