/* =====================================================================
   estilos.css — Registro Civil de La Rioja
   Organizado por secciones. Cada selector se define UNA sola vez.
   ===================================================================== */

/* ---------- 1. Variables (paleta oficial) ---------- */
:root{
  --purpura:#5C247A;
  --purpura-deep:#45185c;
  --cian:#22C8E8;
  --magenta:#F03293;
  --verde:#BEDA19;
  --gris:#E9E9E9;

  --ink:#1b1b20;
  --ink-soft:#54545d;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --line:#E2E2E6;

  --sello-soft:#FCE4F1;
  --verde-soft:#F1F7C6;
  --cian-soft:#DDF6FC;
  --valido:#1E7A46;
  --valido-soft:#e6f2eb;
  --alerta:#C81E5B;

  /* Alias heredados: los usan otras páginas, no borrar */
  --azul:var(--purpura);
  --azul-deep:var(--purpura-deep);
  --sello:var(--magenta);

  --radius:10px;
  --maxw:1080px;
  --shadow:0 1px 2px rgba(20,20,30,.06),0 10px 26px rgba(20,20,30,.07);
  --font-cond:"Ford Antenna Cond","Antenna Condensed","Barlow Condensed","Barlow",sans-serif;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:110px} /* que el menú fijo no tape lo que se enfoca */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Ford Antenna","Antenna","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.55;
}
h1,h2,h3,h4{font-family:var(--font-cond); font-weight:700; line-height:1.1; margin:0; color:var(--purpura)}
p{margin:0}
img{max-width:100%}
a{color:var(--purpura); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Link "Saltar al contenido": invisible hasta que se navega con teclado (Tab) */
.saltar{position:absolute; left:12px; top:-60px; z-index:50; background:var(--purpura); color:#fff;
  padding:10px 16px; border-radius:8px; font-weight:600}
.saltar:focus{top:12px; text-decoration:none}

/* Foco visible para quien navega con teclado (accesibilidad) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--cian); outline-offset:2px;
}

/* Texto solo para lectores de pantalla (no se ve, pero se lee en voz alta) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- 3. Cabecera ---------- */
header{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topline{height:5px; background:linear-gradient(90deg,var(--purpura) 0 40%,var(--magenta) 40% 62%,var(--cian) 62% 82%,var(--verde) 82% 100%)}
.bar{display:flex; align-items:center; gap:20px; padding:12px 20px; max-width:var(--maxw); margin:0 auto}

/* Logos oficiales */
.lockup{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.lockup:hover{text-decoration:none}
.lockup .logo-gob{height:42px; width:auto; display:block}
.lockup .logo-rc{height:30px; width:auto; display:block}
.lockup .div{width:2px; height:34px; background:var(--magenta); flex:0 0 auto}

/* Menú (sirve para <a> y para <button>, y para la clase .menu) */
header nav,.menu{margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:nowrap}
header nav a,header nav button,.menu a{
  font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:0; padding:8px 10px; border-radius:8px; cursor:pointer;
  text-decoration:none; display:inline-block; white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
header nav a:hover,header nav button:hover,.menu a:hover{background:var(--purpura); color:#fff; text-decoration:none}
header nav a[aria-current="page"],header nav button[aria-current="page"]{color:var(--purpura); background:var(--sello-soft)}
header nav a[aria-current="page"]:hover{background:var(--purpura); color:#fff}

/* Desplegable "Actas" (computadora) */
.menu-grupo{position:relative}
.menu-toggle .flecha{display:inline-block; font-size:12px; margin-left:2px; transition:transform .15s ease}
.submenu{
  display:none; position:absolute; top:100%; left:0; z-index:50; min-width:230px; margin-top:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px;
}
.submenu::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px} /* puente: el mouse no "se cae" entre botón y lista */
.submenu a{display:block; padding:10px 12px}
.menu-grupo:hover .submenu,.menu-grupo.abierto .submenu{display:block}
.menu-grupo:hover .flecha,.menu-grupo.abierto .flecha{transform:rotate(180deg)}

/* Celular / tablet: logos arriba, menú abajo con scroll horizontal */
@media(max-width:1000px){
  /* sin desplegable: las tres opciones de "Actas" van directo en la fila */
  .menu-toggle{display:none}
  .menu-grupo{display:contents}
  .submenu,.menu-grupo:hover .submenu{display:contents}
  .submenu::before{display:none}
  .submenu a{display:inline-block; padding:8px 10px}
  .bar{flex-wrap:wrap; gap:10px}
  header nav,.menu{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px}
}
@media(max-width:480px){
  .lockup{gap:12px}
  .lockup .logo-gob{height:34px}
  .lockup .logo-rc{height:24px}
  .lockup .div{height:28px}
}

/* ---------- 4. Hero (portada) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:url('../hero-fondo.png') center right / cover no-repeat;
  border-bottom:1px solid var(--line); padding:44px 0 40px;
}
.hero .eyebrow{
  display:inline-block; background:var(--verde); color:#2a2410; padding:3px 10px; border-radius:4px;
  font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
}
.hero h1{font-size:clamp(30px,6vw,46px); margin:8px 0 10px; max-width:16ch; text-transform:uppercase; line-height:1.2}
/* Títulos en MAYÚSCULAS con tilde (Á, Í, Ó): con interlineado 1.1 la tilde toca el renglón de arriba */
.section-head h1,.section-head h2,.done h1,.done h2{line-height:1.2}
.hero .lead{font-size:clamp(17px,2.4vw,20px); color:var(--ink-soft); max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ---------- 5. Botones ---------- */
.btn{
  font:inherit; font-weight:600; font-size:16px; cursor:pointer; border-radius:var(--radius);
  padding:14px 22px; border:1px solid transparent; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--purpura); color:#fff}
.btn-primary:hover{background:var(--purpura-deep)}
.btn-ghost{background:var(--surface); color:var(--purpura); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--purpura)}
.btn-block{width:100%; justify-content:center}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- 6. Secciones y títulos ---------- */
section.view{padding:40px 0 56px}
.view[hidden]{display:none}
.section-head{margin-bottom:22px}
.section-head h1,.section-head h2{
  font-size:clamp(22px,3.4vw,30px); text-transform:uppercase;
  position:relative; display:inline-block; padding-bottom:8px;
}
.section-head h1::after,.section-head h2::after{content:""; position:absolute; left:0; bottom:0; width:52px; height:4px; background:var(--magenta); border-radius:2px}
.section-head p{color:var(--ink-soft); margin-top:6px; max-width:58ch}
.proto-tag{
  display:inline-block; font-size:12px; font-weight:700; color:var(--magenta); text-transform:uppercase;
  border:1px solid var(--magenta); border-radius:20px; padding:3px 10px; margin-bottom:14px; letter-spacing:.03em;
}

/* ---------- 7. Tarjetas ---------- */
/* auto-fit: 4 actas quedan en 4 columnas; 3 trámites en 3; en celular, 1 */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card .ic{width:40px; height:40px; color:var(--purpura); margin-bottom:12px; display:block}
.card h3{font-size:20px; font-weight:600; margin-bottom:6px}
.card p{color:var(--ink-soft); font-size:15.5px}
.card .pick{
  display:inline-block; margin-top:16px; font:inherit; font-weight:600; font-size:15px; color:var(--purpura);
  background:none; border:0; padding:0; cursor:pointer;
}
.card .pick:hover{text-decoration:underline}
.card-online{border-color:var(--purpura); box-shadow:inset 0 0 0 1px var(--purpura),var(--shadow)}
.tag-online{
  display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#2a2410; background:var(--verde); padding:3px 9px; border-radius:4px; margin-bottom:10px;
}

/* ---------- 8. "Cómo solicitás tu acta" (pasos numerados) ---------- */
.pasos{display:grid; grid-template-columns:1fr; gap:32px 28px; margin-top:8px}
@media(min-width:720px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso-num{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-cond); font-weight:700; font-size:20px; margin-bottom:16px;
}
/* Color del número elegido para que se lea bien sobre cada fondo */
.paso-num--cian{background:var(--cian); color:var(--purpura)}
.paso-num--verde{background:var(--verde); color:#2a2410}
.paso-num--magenta{background:var(--magenta); color:#fff}
.paso h3{font-size:19px; margin-bottom:6px}
.paso p{color:var(--ink-soft); font-size:15px; line-height:1.5}

/* Llamado a la acción al final de la portada */
.cta-final{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px;
  margin-top:56px; padding:28px 32px; border-radius:14px;
  background:var(--sello-soft); border-left:6px solid var(--magenta);
}
.cta-final h2{font-size:clamp(22px,3vw,28px); text-transform:uppercase; margin-bottom:6px}
.cta-final p{color:var(--ink-soft); max-width:52ch}
@media(max-width:560px){ .cta-final{padding:22px 20px} .cta-final .btn{width:100%; justify-content:center} }

/* ---------- Página 404 ---------- */
.error-404{padding:64px 0 40px}
.error-404 .error-codigo{
  font-family:var(--font-cond); font-weight:700; font-size:clamp(72px,14vw,120px); line-height:1;
  color:var(--magenta); margin-bottom:8px;
}
.error-404 h1{font-size:clamp(28px,5vw,40px); text-transform:uppercase; margin-bottom:12px}
.error-404 .lead{color:var(--ink-soft); max-width:56ch; font-size:18px}
.error-links{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 24px}
.error-links a{font-weight:600}

/* ---------- 9. Formulario de solicitud (wizard) ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; max-width:680px}
.progress{display:flex; border-bottom:1px solid var(--line)}
.progress .p{flex:1; text-align:center; padding:12px 6px; font-size:12.5px; font-weight:600; color:var(--ink-soft)}
.progress .p[data-on="1"]{color:var(--purpura)}
.progress .p[data-done="1"]{color:var(--valido)}
.progress .p span{display:block; font-size:16px; font-family:var(--font-cond); margin-bottom:2px}
.panel-body{padding:26px}
.step-title{font-family:var(--font-cond); font-size:22px; font-weight:700; margin-bottom:4px; text-transform:uppercase; color:var(--purpura)}
.step-sub{color:var(--ink-soft); font-size:15px; margin-bottom:20px}

.opts{display:grid; gap:12px}
.opt{
  display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; background:var(--surface); text-align:left; font:inherit; width:100%;
}
.opt:hover{border-color:var(--purpura)}
.opt[aria-pressed="true"]{border-color:var(--purpura); background:var(--sello-soft); box-shadow:inset 0 0 0 1px var(--purpura)}
.opt .ic{width:26px; height:26px; color:var(--purpura); flex:0 0 auto}
.opt .t{display:block; font-weight:600; margin-bottom:2px}
.opt .d{font-size:14px; color:var(--ink-soft)}

.field{margin-bottom:16px}
.field label{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px}
.field .hint{font-weight:400; color:var(--ink-soft); font-size:13px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; padding:12px 13px; color:var(--ink);
  background:var(--paper); border:1px solid #a7a7b0; border-radius:9px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--purpura); outline-offset:1px; border-color:var(--purpura)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--alerta); border-width:2px}
.err{color:var(--alerta); font-size:13.5px; margin-top:6px; display:none}
.field.bad .err{display:block}
/* Resumen de errores arriba del formulario */
.resumen-errores{border:2px solid var(--alerta); background:rgba(200,30,91,.06); border-radius:var(--radius); padding:14px 18px; margin-bottom:22px}
.resumen-errores p{margin:0 0 6px}
.resumen-errores ul{margin:0; padding-left:20px}
.resumen-errores li{margin:4px 0}
.resumen-errores a{color:var(--alerta)}
.resumen-errores:focus{outline:none}
.obligatorios{font-size:14px; color:var(--ink-soft); margin-bottom:18px}
/* Grupos de campos */
.grupo{border:0; padding:0; margin:0 0 10px}
.grupo legend{font-family:var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--purpura); font-size:15px; padding:0; margin-bottom:12px}
.grupo + .grupo{margin-top:24px}
/* Campo trampa para bots: fuera de la pantalla */
.campo-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.row2{display:grid; gap:16px}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}

.review{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:18px}
.review .li{display:flex; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:15px}
.review .li:last-child{border-bottom:0}
.review .li .k{color:var(--ink-soft)}
.review .li .v{font-weight:600; text-align:right}
.arancel{display:flex; justify-content:space-between; align-items:center; padding:16px; background:var(--sello-soft); border-radius:var(--radius); margin-bottom:20px}
.arancel .k{font-weight:600}
.arancel .v{font-family:var(--font-cond); font-weight:700; font-size:26px; color:var(--ink)}
.note{
  font-size:13.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--purpura); padding:12px 14px; border-radius:8px; margin-top:8px;
}
.nav-btns{display:flex; gap:12px; margin-top:24px}
.nav-btns .btn{flex:1; justify-content:center}
.grow{flex:2 !important}

/* Confirmación */
.done{text-align:center; padding:44px 26px}
.done .check{width:64px; height:64px; color:var(--valido); margin:0 auto 16px}
.done h1,.done h2{font-size:26px; margin-bottom:8px; text-transform:uppercase}
.done .hint-correo{font-size:14px}
.done p{color:var(--ink-soft); max-width:44ch; margin:0 auto 10px}
.ticket{
  display:inline-flex; flex-direction:column; align-items:center; margin:16px auto; padding:16px 28px;
  border:1px dashed var(--purpura); border-radius:var(--radius); background:var(--paper);
}
.ticket .lbl{font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em}
.ticket .num{font-family:var(--font-cond); font-weight:700; font-size:28px; color:var(--purpura)}

/* ---------- 10. Validar acta ---------- */
.valid-grid{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:820px){.valid-grid{grid-template-columns:1.2fr .8fr}}
.result{margin-top:20px; border-radius:var(--radius); display:none}
.result.show{display:block}
.result.ok{border:1px solid var(--valido); background:var(--valido-soft)}
.result.no{border:1px solid var(--alerta); background:rgba(200,30,91,.06)}
.result .head{display:flex; align-items:center; gap:12px; padding:16px 18px}
.result .ic{width:30px; height:30px; flex:0 0 auto}
.result.ok .ic{color:var(--valido)}
.result.no .ic{color:var(--alerta)}
.result .head strong{font-size:17px}
.result .detail{padding:0 18px 16px}
.result .li{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(0,0,0,.06); font-size:15px}
.result .li .k{color:var(--ink-soft)}
.aside{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.aside h3{font-size:16px; font-weight:600; margin-bottom:10px}
.aside ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:14.5px}
.aside li{margin-bottom:8px}

/* ---------- 11. Guía de trámites ---------- */
.guia-cat{margin-bottom:34px}
.guia-cat .cat{
  font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
  margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line);
}

/* Página de cada trámite (tramite.php) */
.card .pick-sec{display:block; margin-top:8px; font-weight:500; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px}
.link-flecha{font-weight:600}
.link-flecha span{display:inline-block; transition:transform .15s ease}
.link-flecha:hover span{transform:translateX(3px)}

.tramite{max-width:820px}
.migas{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-soft); margin-bottom:14px}
.migas a{font-weight:600}

.tramite-online{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px;
  padding:18px 22px; margin-bottom:24px; border-radius:var(--radius);
  background:var(--verde-soft); border:1px solid var(--verde);
}
.tramite-online p{max-width:52ch}

/* Dónde / Costo / Plazo: datos rápidos arriba de todo */
.tramite-datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  margin:0 0 32px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.tramite-datos > div{background:var(--surface); padding:16px 20px}
.tramite-datos dt{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:4px}
.tramite-datos dd{margin:0; font-weight:600}

.tramite-bloque{padding:26px 0; border-top:1px solid var(--line)}
.tramite-bloque h2{font-size:22px; margin-bottom:12px}
.tramite-bloque p{max-width:68ch}

/* Requisitos como lista para tildar mentalmente */
.tramite-requisitos{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.tramite-requisitos li{position:relative; padding-left:32px}
.tramite-requisitos li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border:2px solid var(--purpura); border-radius:4px}

/* Pasos numerados */
.tramite-pasos{list-style:none; counter-reset:paso; margin:0; padding:0; display:grid; gap:14px}
.tramite-pasos li{counter-increment:paso; position:relative; padding-left:46px; min-height:30px; padding-top:3px}
.tramite-pasos li::before{
  content:counter(paso); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--purpura); color:#fff; font-family:var(--font-cond); font-weight:700;
}

.tramite-bloque.tramite-nota{background:var(--cian-soft); border-top:0; border-radius:var(--radius); padding:20px 22px; margin-top:8px}
.tramite-pendiente{padding:20px 22px; margin:8px 0 24px; border-radius:var(--radius); background:var(--sello-soft)}
.tramite-pie{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; margin-top:16px; padding-top:24px; border-top:1px solid var(--line)}

/* ---------- 12. Delegaciones ---------- */
.demo-banner{font-size:13.5px; color:var(--ink-soft); background:var(--verde-soft); border:1px solid var(--verde); border-radius:8px; padding:11px 14px; margin-bottom:20px}
.deleg-box{max-width:560px}
.deleg-card{margin-top:20px; border:1px solid var(--line); border-left:4px solid var(--magenta); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.deleg-card h3{font-size:20px; margin-bottom:14px}
.deleg-data{list-style:none; margin:0; padding:0}
.deleg-data li{display:flex; gap:12px; align-items:baseline; padding:7px 0; font-size:16px; border-top:1px solid var(--line)}
.deleg-data li:first-child{border-top:0}
.deleg-data .ic{flex:0 0 auto; width:22px; text-align:center}
.deleg-pending{color:var(--ink-soft); font-style:italic}

/* ---------- 13. Pie institucional (banda púrpura) ---------- */
footer{background:var(--purpura); color:#fff; margin-top:60px}
.footer-brand .footer-titulo{font-family:var(--font-cond); font-weight:700; font-size:20px; line-height:1.25; margin-bottom:10px; opacity:1}
.footer-top{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; padding:44px 20px 28px}
.footer-brand{display:flex; align-items:center; gap:24px; max-width:560px}
.footer-logo{height:84px; width:auto; flex:0 0 auto; display:block}
.footer-div{width:1px; align-self:stretch; background:rgba(255,255,255,.3); flex:0 0 auto}
.footer-brand-txt{min-width:0}
@media(max-width:560px){
  .footer-brand{gap:16px}
  .footer-logo{height:64px}
}
.footer-brand p{font-size:13.5px; opacity:.85; line-height:1.5}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap}
.footer-col-titulo{font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; opacity:.9}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.footer-col a{color:#fff; opacity:.85; font-size:14.5px}
.footer-col a:hover{opacity:1; text-decoration:underline}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
  padding:16px 20px; border-top:1px solid rgba(255,255,255,.18); font-size:12.5px; opacity:.8;
}
.footer-tag{font-style:italic}

/* ---------- 14. Movimiento reducido ---------- */
@media(prefers-reduced-motion:no-preference){
  .panel-body,.result{transition:opacity .18s ease}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
}
/* Copyright centrado en el pie */
.footer-bottom{justify-content:center; text-align:center}

/* Guía: fecha de actualización, subtítulos dentro de requisitos y listas con viñeta */
.tramite-actualizado{margin-top:8px; font-size:14px; color:var(--ink-soft)}
.tramite-subtitulo{font-size:17px; font-weight:700; color:var(--purpura); margin:20px 0 10px}
.tramite-bloque h2 + .tramite-subtitulo{margin-top:4px}
.tramite-lista{margin:0; padding-left:20px; display:grid; gap:8px; max-width:68ch}
.tramite-lista li::marker{color:var(--purpura)}
/* ===== Páginas legales (privacidad.php, condiciones.php) ===== */
.legal{max-width:820px}
.legal .panel{max-width:none; margin-bottom:18px}
.legal h2{font-family:var(--font-cond); font-size:22px; color:var(--purpura); margin:0 0 10px}
.legal p, .legal li{line-height:1.6; margin-bottom:8px}
.legal ul{padding-left:22px; margin:6px 0 10px}
.legal .actualizado{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px}
.legal .aaip{font-size:13.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; margin-top:12px}
/* Marca de texto que falta completar o aprobar. Debe desaparecer antes de publicar. */
.completar{background:#fff3b0; color:#5a4500; padding:1px 5px; border-radius:4px; font-weight:600}

/* ===== Consultar trámite (consultar.php) ===== */
.consulta-cabecera{display:flex; flex-wrap:wrap; gap:14px 34px; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line)}
.consulta-cabecera .lbl{display:block; font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase}
.consulta-cabecera .num{font-family:var(--font-cond); font-size:24px; color:var(--purpura)}
.linea-estado{list-style:none; margin:0 0 22px; padding:0}
.linea-estado li{display:flex; gap:14px; position:relative; padding-bottom:20px}
.linea-estado li:last-child{padding-bottom:0}
.linea-estado li:not(:last-child)::before{content:""; position:absolute; left:10px; top:24px; bottom:0; width:2px; background:var(--line)}
.linea-estado li.hecho:not(:last-child)::before{background:var(--valido)}
.linea-estado .punto{flex:0 0 22px; height:22px; border-radius:50%; border:2px solid var(--line); background:var(--surface); margin-top:1px}
.linea-estado li.hecho .punto{background:var(--valido); border-color:var(--valido)}
.linea-estado li.actual .punto{background:var(--purpura); border-color:var(--purpura); box-shadow:0 0 0 5px var(--sello-soft)}
.linea-estado li.pendiente strong{color:var(--ink-soft); font-weight:500}
.linea-estado li.actual strong{color:var(--purpura); font-size:17px}
.linea-estado p{margin:4px 0 0; color:var(--ink-soft); font-size:15px}
.consulta-aviso h2{font-size:21px; color:var(--alerta); margin-bottom:8px}
.consulta-aviso p{margin-bottom:8px}
.consulta-error{border-left-color:var(--alerta); color:var(--alerta); margin:0 0 18px}
.chico-gris{font-size:13.5px; color:var(--ink-soft); margin-top:16px}

/* ===== Botón "Volver arriba" (includes/footer.php) ===== */
.volver-arriba{
  position:fixed; right:20px; bottom:20px; z-index:60; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--purpura); color:#fff; box-shadow:0 4px 14px rgba(20,20,30,.25);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s, background .15s ease;
}
.volver-arriba.visible{opacity:1; visibility:visible; transform:none}
.volver-arriba:hover{background:var(--purpura-deep); text-decoration:none}
.volver-arriba:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}
@media(max-width:480px){.volver-arriba{right:14px; bottom:14px; width:44px; height:44px}}
@media(prefers-reduced-motion:reduce){.volver-arriba{transition:none}}