/* =====================================================================
   CAJA NOTARIAL · PROTOTIPO INSTITUCIONAL
   Arquitectura del CSS:
   1) Tokens (paleta, tipografía, escala, radios, sombras)
   2) Reset
   3) Layout base
   4) Componentes (topbar, header, mega-menu, hero, quick-access,
      tramites, mi-caja, noticias, stats, footer)
   5) Utilidades
   6) Responsive (tablet y mobile)
   ===================================================================== */

/* 1) TOKENS ----------------------------------------------------------- */
:root{
  /* Paleta institucional — verde Caja Notarial (#007E45) y variantes */
  --c-navy-900:#004A2A;
  --c-navy-800:#006239;
  --c-navy-700:#007E45;
  --c-navy-50: #EAF7F1;
  --c-gold-600:#006B3A;
  --c-gold-500:#00A85A;
  --c-gold-100:#CBEEDD;
  --c-gold-50: #F0FBF5;

  /* Neutros */
  --c-ink:     #14181F;
  --c-body:    #2F3540;
  --c-muted:   #6B7280;
  --c-line:    #E3E6EC;
  --c-line-2:  #F0F2F6;
  --c-bg:      #FFFFFF;
  --c-bg-alt:  #F7F8FB;

  /* Funcional */
  --c-ok:      #2F7D5B;
  --c-warn:    #B7472A;
  --c-info:    #2563EB;

  /* Tipografía */
  --ff-head: "Georgia","Source Serif Pro","Times New Roman",serif;
  --ff-body: "Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* Escala */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;

  /* Espaciado */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;

  /* Radios y sombras */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,74,42,.06), 0 1px 3px rgba(0,74,42,.05);
  --shadow-md: 0 4px 12px rgba(0,74,42,.08), 0 2px 4px rgba(0,74,42,.04);
  --shadow-lg: 0 18px 40px rgba(0,74,42,.12), 0 6px 12px rgba(0,74,42,.06);

  /* Layout */
  --max-w: 1400px;
  --header-h: 72px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 2) RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--fs-16);
  line-height:1.55;
  color:var(--c-body);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:transparent}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--c-gold-500);
  outline-offset:3px;
  border-radius:3px;
}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--c-navy-900);margin:0;font-weight:600;letter-spacing:-.005em}
h2{font-size:var(--fs-30);line-height:1.2}
h3{font-size:var(--fs-20);line-height:1.3}
p{margin:0}

/* 3) LAYOUT BASE ------------------------------------------------------ */
.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--sp-6);
}
.section{padding:var(--sp-16) 0}
.section--alt{background:var(--c-bg-alt)}
.section__head{
  display:flex;align-items:end;justify-content:space-between;gap:var(--sp-6);
  margin-bottom:var(--sp-8);flex-wrap:wrap;
}
.section__head h2{max-width:680px}
.section__head .eyebrow{
  font-family:var(--ff-body);font-size:var(--fs-12);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold-600);
  margin-bottom:var(--sp-2);
}
.section__head .lead{color:var(--c-muted);margin-top:var(--sp-2);max-width:600px}
.section__link{
  font-size:var(--fs-14);font-weight:600;color:var(--c-navy-800);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.section__link:hover{color:var(--c-gold-600)}

/* 4) COMPONENTES ------------------------------------------------------ */

/* 4.1 Topbar (banda superior fina, alto contraste) */
.topbar{
  background:var(--c-navy-900);
  color:#fff;
  font-size:var(--fs-14);
}
.topbar__row{
  display:flex;align-items:center;justify-content:space-between;
  height:38px;gap:var(--sp-6);
}
.topbar__profiles{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.topbar__profiles button{
  color:#fff;opacity:.78;padding:6px 10px;border-radius:var(--r-sm);
  font-size:var(--fs-14);transition:background .2s var(--ease),opacity .2s var(--ease);
}
.topbar__profiles button:hover,
.topbar__profiles button[aria-pressed="true"]{
  background:rgba(255,255,255,.12);opacity:1;
}
.topbar__profiles .label{
  opacity:.55;margin-right:var(--sp-2);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.1em;
}
.topbar__utils{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-12);min-width:0}
.topbar__utils a{opacity:.8}.topbar__utils a:hover{opacity:1}
.topbar__utils .sep{opacity:.3;flex-shrink:0}
/* Saludo de sesion: nunca empuja a los enlaces, se recorta si no entra */
.topbar__user{
  font-weight:700;color:var(--c-gold-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}

/* 4.2 Header principal */
.header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid var(--c-line);
  height:var(--header-h);
  display:flex;align-items:center;
}
.header__row{
  display:flex;align-items:center;gap:var(--sp-8);
  width:100%;min-width:0;
}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0}
.brand__logo{
  height:56px;width:auto;object-fit:contain;display:block;
}
.footer .brand__logo{
  height:70px;border-radius:var(--r-sm);padding:6px;
}
.brand__mark{
  width:44px;height:44px;border-radius:50%;
  background:var(--c-navy-900);
  display:grid;place-items:center;color:#fff;
  font-family:var(--ff-head);font-weight:700;font-size:18px;
  letter-spacing:.02em;
  position:relative;
}
.brand__mark::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--c-gold-500);
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__text strong{
  font-family:var(--ff-head);color:var(--c-navy-900);font-size:var(--fs-18);font-weight:700;
}
.brand__text span{font-size:var(--fs-12);color:var(--c-muted);letter-spacing:.04em;text-transform:uppercase}

/* Nav principal. min-width:0 para que sea el nav el que ceda ancho y no
   empuje al buscador y al CTA fuera del contenedor. */
.nav{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 auto;min-width:0}
.nav__item{position:relative}
.nav__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:var(--c-navy-900);font-weight:600;font-size:var(--fs-14);
  white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.nav__btn:hover,.nav__btn[aria-expanded="true"]{background:var(--c-navy-50);color:var(--c-navy-800)}
.nav__btn .chev{
  width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .2s var(--ease);opacity:.7;
}
.nav__btn[aria-expanded="true"] .chev{transform:rotate(225deg);margin-top:2px}

/* 4.3 Mega-menú */
.megapanel{
  position:absolute;top:calc(100% + 10px);left:0;
  width:min(880px, 90vw);
  background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-6);
  display:none;
  z-index:60;
}
.nav__item--open .megapanel{display:block;animation:fadeIn .18s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.megapanel--wide{width:min(1040px, 92vw)}

.mega__grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-8);
}
.mega__grid--2{grid-template-columns:1fr 1fr}
.mega__grid--4{grid-template-columns:1fr 1fr 1fr 1.1fr}
.mega__col h4{
  font-family:var(--ff-body);font-size:var(--fs-12);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold-600);
  margin-bottom:var(--sp-3);
}
.mega__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.mega__col a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm);
  color:var(--c-body);font-size:var(--fs-14);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.mega__col a:hover{background:var(--c-bg-alt);color:var(--c-navy-900)}
.mega__col a .ext{
  width:14px;height:14px;flex-shrink:0;opacity:.55;
}
.mega__col a.is-external{color:var(--c-navy-700);font-weight:500}
.mega__col a.is-external:hover{color:var(--c-gold-600)}
.mega__col a.is-external::after{
  content:"\2197";font-size:var(--fs-12);color:var(--c-gold-600);font-weight:700;
}

.mega__feature{
  background:var(--c-navy-900);color:#fff;
  border-radius:var(--r-md);padding:var(--sp-5);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);
  min-height:200px;
}
.mega__feature .tag{
  display:inline-block;font-size:var(--fs-12);font-weight:700;
  color:var(--c-gold-500);letter-spacing:.14em;text-transform:uppercase;
}
.mega__feature h5{
  font-family:var(--ff-head);font-size:var(--fs-18);font-weight:600;margin:8px 0 6px;line-height:1.3;
}
.mega__feature p{font-size:var(--fs-14);opacity:.85;margin-bottom:var(--sp-4)}
.mega__feature .btn{align-self:flex-start}

/* 4.4 Buscador en header */
.search{
  position:relative;flex:0 0 auto;
}
.search input{
  width:220px;height:40px;padding:0 38px 0 14px;
  border:1px solid var(--c-line);border-radius:999px;
  font:inherit;font-size:var(--fs-14);color:var(--c-ink);
  background:var(--c-bg-alt);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.search input::placeholder{color:var(--c-muted)}
.search input:focus{
  outline:none;background:#fff;border-color:var(--c-navy-700);
  box-shadow:0 0 0 4px rgba(0,126,69,.10);
}
.search__btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  color:var(--c-navy-800);
}
.search__btn:hover{background:var(--c-navy-50)}

/* 4.5 CTA login */
.login-cta{
  display:inline-flex;align-items:center;gap:var(--sp-2);flex-shrink:0;
  padding:9px 16px;border-radius:999px;
  background:var(--c-gold-500);color:var(--c-navy-900);
  font-weight:700;font-size:var(--fs-14);
  transition:background .2s var(--ease),transform .15s var(--ease);
}
.login-cta:hover{background:var(--c-gold-600);color:#fff}

.login-cta__text{white-space:nowrap}

/* Burger (mobile) */
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);align-items:center;justify-content:center;color:var(--c-navy-900)}
.burger:hover{background:var(--c-navy-50)}
.burger span{
  position:relative;width:20px;height:2px;background:currentColor;display:block;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
  transition:top .2s var(--ease), transform .2s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
/* Estado abierto: transforma hamburguesa en × */
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* 4.6 Hero */
.hero{
  position:relative;
  background:linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
  color:#fff;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(800px 400px at 90% -10%, rgba(0,168,90,.18), transparent 60%),
    radial-gradient(600px 300px at 10% 110%, rgba(0,168,90,.10), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-12);
  align-items:center;padding:var(--sp-16) 0 var(--sp-20);
}
.hero .eyebrow{
  font-size:var(--fs-12);font-weight:700;color:var(--c-gold-500);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--sp-4);
}
.hero h1{
  font-family:var(--ff-head);font-size:clamp(var(--fs-30), 4vw, var(--fs-48));
  line-height:1.1;color:#fff;font-weight:600;margin-bottom:var(--sp-4);letter-spacing:-.01em;
}
.hero p.lead{
  font-size:var(--fs-18);color:rgba(255,255,255,.85);max-width:540px;margin-bottom:var(--sp-6);
}
.hero__ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:13px 22px;border-radius:999px;font-weight:600;font-size:var(--fs-14);
  transition:all .2s var(--ease);
}
.btn--primary{background:var(--c-gold-500);color:var(--c-navy-900)}
.btn--primary:hover{background:var(--c-gold-600);color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--dark{background:var(--c-navy-900);color:#fff}
.btn--dark:hover{background:var(--c-navy-700)}
.btn--outline{background:transparent;color:var(--c-navy-900);border:1px solid var(--c-navy-900)}
.btn--outline:hover{background:var(--c-navy-900);color:#fff}

/* Hero card (lateral) */
.hero__card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border-radius:var(--r-lg);padding:var(--sp-6);
}
.hero__card h3{color:#fff;font-size:var(--fs-18);margin-bottom:var(--sp-2)}
.hero__card p{font-size:var(--fs-14);color:rgba(255,255,255,.75);margin-bottom:var(--sp-4)}
.hero__card .list{display:flex;flex-direction:column;gap:var(--sp-2)}
.hero__card .list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);
  color:#fff;font-size:var(--fs-14);font-weight:500;
  transition:background .2s var(--ease),transform .15s var(--ease);
}
.hero__card .list a:hover{background:rgba(0,168,90,.22);transform:translateX(2px)}
.hero__card .list a .arrow{color:var(--c-gold-500);font-weight:700}

/* Hero buscador grande (alternativa, debajo del título) */
.hero__search{
  display:flex;align-items:center;gap:var(--sp-2);
  background:#fff;border-radius:999px;padding:6px;max-width:520px;margin-top:var(--sp-6);
  box-shadow:var(--shadow-md);
}
.hero__search input{
  flex:1;height:46px;border:0;padding:0 18px;font:inherit;font-size:var(--fs-16);color:var(--c-ink);background:transparent;
}
.hero__search input:focus{outline:none}
.hero__search button{
  height:46px;padding:0 22px;border-radius:999px;background:var(--c-navy-900);color:#fff;font-weight:600;font-size:var(--fs-14);
}
.hero__search button:hover{background:var(--c-navy-700)}

/* 4.7 Accesos rápidos */
.quick{
  margin-top:calc(-1 * var(--sp-12));position:relative;z-index:5;
}
.quick__grid{
  display:grid;grid-template-columns:repeat(6, 1fr);gap:var(--sp-3);
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--shadow-lg);
}
.quick__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--sp-5) var(--sp-3);border-radius:var(--r-md);
  transition:background .2s var(--ease),transform .15s var(--ease);
  color:var(--c-navy-900);
}
.quick__item:hover{background:var(--c-gold-50);transform:translateY(-2px)}
.quick__icon{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--c-navy-50);color:var(--c-navy-800);margin-bottom:var(--sp-3);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.quick__item:hover .quick__icon{background:var(--c-navy-900);color:var(--c-navy-50)}
.quick__icon svg{width:22px;height:22px;stroke-width:1.6}
.quick__label{font-size:var(--fs-14);font-weight:600;line-height:1.25}

/* 4.8 Trámites destacados */
.tramites__filters{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6);
}
.chip{
  padding:8px 16px;border-radius:999px;font-size:var(--fs-14);font-weight:500;
  background:#fff;border:1px solid var(--c-line);color:var(--c-body);
  transition:all .15s var(--ease);
}
.chip:hover{border-color:var(--c-navy-800);color:var(--c-navy-900)}
.chip[aria-pressed="true"]{background:var(--c-navy-900);color:#fff;border-color:var(--c-navy-900)}

.tramites__grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--sp-5);
}
.tramite{
  position:relative;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 6px);
  transition:all .2s var(--ease);
  display:flex;flex-direction:column;gap:var(--sp-3);min-height:200px;
}
.tramite::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c-gold-500);border-radius:var(--r-md) 0 0 var(--r-md);
}
.tramite:hover{
  border-color:var(--c-navy-700);box-shadow:var(--shadow-md);transform:translateY(-2px);
}
.tramite__meta{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-12);font-weight:600;padding:3px 10px;border-radius:999px;
}
.tag--online{background:#E7F4EE;color:var(--c-ok)}
.tag--presencial{background:#FBF1E5;color:#A65E14}
.tag--descarga{background:var(--c-navy-50);color:var(--c-navy-800)}
.tag--audiencia{background:var(--c-bg-alt);color:var(--c-muted)}

.tramite h3{font-size:var(--fs-18);color:var(--c-navy-900)}
.tramite p{font-size:var(--fs-14);color:var(--c-muted);flex:1}
.tramite .cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-14);font-weight:600;color:var(--c-navy-800);
  align-self:flex-start;
}
.tramite .cta:hover{color:var(--c-gold-600)}
.tramite .cta .arrow{transition:transform .2s var(--ease)}
.tramite:hover .cta .arrow{transform:translateX(4px)}

/* 4.9 Audiencias (banda con 3 perfiles) */
.audiences{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--sp-5);
}
.audience{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:var(--sp-6);transition:all .2s var(--ease);
}
.audience:hover{border-color:var(--c-navy-700);box-shadow:var(--shadow-md)}
.audience__icon{
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--c-navy-900);color:var(--c-gold-500);
  display:grid;place-items:center;margin-bottom:var(--sp-4);
}
.audience__icon svg{width:24px;height:24px}
.audience h3{font-size:var(--fs-20);margin-bottom:var(--sp-2)}
.audience p{font-size:var(--fs-14);color:var(--c-muted);margin-bottom:var(--sp-4)}
.audience ul{list-style:none;padding:0;margin:0 0 var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.audience ul li{
  display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);color:var(--c-body);
}
.audience ul li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--c-gold-500);flex-shrink:0;
}
.audience .arrow-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:var(--fs-14);color:var(--c-navy-800);
}
.audience .arrow-link:hover{color:var(--c-gold-600)}

/* 4.10 Mi Caja (CTA fuerte para sistemas externos) */
.mi-caja{
  background:linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-800) 100%);
  color:#fff;border-radius:var(--r-lg);padding:var(--sp-12);
  display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-10);align-items:center;
  position:relative;overflow:hidden;
}
.mi-caja::before{
  content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;
  background:radial-gradient(circle, rgba(0,168,90,.16), transparent 70%);
  pointer-events:none;
}
.mi-caja__text{position:relative;z-index:1}
.mi-caja .eyebrow{
  font-size:var(--fs-12);font-weight:700;color:var(--c-gold-500);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--sp-3);
}
.mi-caja h2{color:#fff;margin-bottom:var(--sp-3)}
.mi-caja p{font-size:var(--fs-16);color:rgba(255,255,255,.8);margin-bottom:var(--sp-5);max-width:440px}

.mi-caja__systems{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;
}
.mi-caja__systems .system{flex:1 1 calc(33.333% - var(--sp-3))}
.system{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
  transition:all .2s var(--ease);
  color:#fff;
}
.system:hover{background:rgba(0,168,90,.12);border-color:rgba(0,168,90,.40);transform:translateY(-2px)}
.system__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.system__head strong{font-family:var(--ff-head);font-size:var(--fs-16);font-weight:600}
.system__head .ext{
  font-size:var(--fs-12);color:var(--c-gold-500);
  display:inline-flex;align-items:center;gap:4px;
}
.system p{font-size:var(--fs-12);color:rgba(255,255,255,.65);margin:0}

/* 4.11 Noticias */
.news__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-5);
}
.news{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);
  border:1px solid var(--c-line);overflow:hidden;
  transition:all .2s var(--ease);
}
.news:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.news__media{
  height:200px;background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  position:relative;display:grid;place-items:center;color:rgba(255,255,255,.4);
  font-family:var(--ff-head);font-size:var(--fs-24);overflow:hidden;
}
.news__media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(0,168,90,.25), transparent 60%);
  pointer-events:none;
}
.news__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.news--featured{grid-row:span 2}
.news--featured .news__media{height:280px}
.news--featured .news__body{padding:var(--sp-6)}
.news--featured h3{font-size:var(--fs-24)}
.news__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.news__meta{
  font-size:var(--fs-12);color:var(--c-muted);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;
}
.news__meta .cat{color:var(--c-gold-600);margin-right:var(--sp-2)}
.news h3{font-size:var(--fs-18);color:var(--c-navy-900);line-height:1.35}
.news p{font-size:var(--fs-14);color:var(--c-muted);flex:1}
.news a.read{
  font-size:var(--fs-14);font-weight:600;color:var(--c-navy-800);
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
}
.news a.read:hover{color:var(--c-gold-600)}

/* 4.12 Stats institucionales */
.stats{
  background:var(--c-navy-900);color:#fff;
  border-radius:var(--r-lg);padding:var(--sp-12) var(--sp-10);
  display:grid;grid-template-columns:1.4fr 3fr;gap:var(--sp-10);align-items:center;
}
.stats h2{color:#fff;max-width:320px}
.stats p.lead{color:rgba(255,255,255,.7);margin-top:var(--sp-3);font-size:var(--fs-16)}
.stats__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--sp-6)}
.stat__num{
  font-family:var(--ff-head);font-size:var(--fs-36);font-weight:600;
  color:var(--c-gold-500);line-height:1;margin-bottom:var(--sp-2);
}
.stat__label{font-size:var(--fs-14);color:rgba(255,255,255,.75);line-height:1.4}

/* 4.13 Contact strip */
.contact-strip{
  background:var(--c-gold-50);border-top:1px solid var(--c-gold-100);
  padding:var(--sp-10) 0;
}
.contact-strip__inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6);align-items:start;
}
.contact-strip h3{font-size:var(--fs-24);color:var(--c-navy-900);margin-bottom:var(--sp-2)}
.contact-strip p.intro{color:var(--c-muted);font-size:var(--fs-14);max-width:280px}
.contact-block .label{
  font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.14em;
  color:var(--c-gold-600);font-weight:700;margin-bottom:var(--sp-2);
}
.contact-block .value{
  font-family:var(--ff-head);color:var(--c-navy-900);font-size:var(--fs-18);font-weight:600;line-height:1.3;
}
.contact-block .sub{font-size:var(--fs-14);color:var(--c-muted);margin-top:4px}

/* 4.14 Footer */
.footer{background:var(--c-navy-900);color:rgba(255,255,255,.78);padding-top:var(--sp-16)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:var(--sp-8);padding-bottom:var(--sp-12);border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand .brand__text strong{color:#fff}
.footer__brand .brand__text span{color:rgba(255,255,255,.55)}
.footer__brand p{font-size:var(--fs-14);color:rgba(255,255,255,.6);margin-top:var(--sp-4);max-width:280px;line-height:1.6}
.footer h4{
  font-family:var(--ff-body);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.14em;
  color:var(--c-gold-500);font-weight:700;margin-bottom:var(--sp-4);
}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.footer ul a{font-size:var(--fs-14);color:rgba(255,255,255,.7);transition:color .15s var(--ease)}
.footer ul a:hover{color:var(--c-gold-500)}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) 0;font-size:var(--fs-12);color:rgba(255,255,255,.5);
  flex-wrap:wrap;gap:var(--sp-3);
}
.footer__social{display:flex;gap:var(--sp-2)}
.footer__social a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:rgba(255,255,255,.7);
  transition:all .2s var(--ease);
}
.footer__social a:hover{background:var(--c-gold-500);color:var(--c-navy-900);border-color:var(--c-gold-500)}
.footer__social a i{font-size:16px;line-height:1}

/* 4.15 Botón flotante de ayuda */
.help-fab{
  position:fixed;bottom:24px;right:24px;z-index:80;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:14px 22px;border-radius:999px;
  background:var(--c-navy-900);color:#fff;font-weight:600;font-size:var(--fs-14);
  box-shadow:var(--shadow-lg);
  transition:all .2s var(--ease);
  border: 1px solid;
}
.help-fab:hover{background:var(--c-gold-500);color:var(--c-navy-900)}
.help-fab svg{width:18px;height:18px}

/* 5) UTILIDADES ------------------------------------------------------- */
.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}

/* 6) RESPONSIVE ------------------------------------------------------- */
@media (max-width:1500px){
  /* Buscador: solo icono, sin campo de texto */
  .search input{display:none}
  .search__btn{position:static;transform:none;width:38px;height:38px}

  /* Login: solo icono */
  .login-cta{padding:9px;gap:0}
  .login-cta__text{display:none}
}

@media (max-width:1440px){
  .nav{gap:4px}
  .nav__btn{padding:8px 9px;font-size:var(--fs-13)}
  .header__row{gap:var(--sp-5)}
}

@media (max-width:1280px){
  .header__row{gap:var(--sp-4)}
}

@media (max-width:1200px){
  /* Header: muestra burger, oculta nav y search */
  .burger{display:flex}
  .nav,.search{display:none}
  .header__row{justify-content:space-between;gap:var(--sp-3)}

  /* Mega-menú: convertir a panel mobile */
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    background:#fff;padding:var(--sp-5);
    overflow-y:auto;overflow-x:hidden;
    z-index:100;gap:var(--sp-1);
  }
  .nav.is-open .nav__btn{
    width:100%;justify-content:space-between;
    padding:14px 12px;min-height:44px;
  }
  .nav.is-open .megapanel{
    position:static;width:100%;box-shadow:none;border:0;
    border-radius:0;padding:var(--sp-3) var(--sp-3) var(--sp-5);background:var(--c-bg-alt);
    margin-bottom:var(--sp-2);
    animation:none;
  }
  .mega__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .mega__feature{display:none}
  body.menu-open{overflow:hidden}
}

@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-8);padding:var(--sp-12) 0 var(--sp-16)}
  .hero__card{order:2}
  .quick__grid{grid-template-columns:repeat(3, 1fr)}
  .tramites__grid{grid-template-columns:repeat(2, 1fr)}
  .audiences{grid-template-columns:1fr;gap:var(--sp-4)}
  .mi-caja{grid-template-columns:1fr;padding:var(--sp-8)}
  .news__grid{grid-template-columns:1fr 1fr}
  .news--featured{grid-column:span 2;grid-row:auto}
  .news--featured .news__media{height:240px}
  .stats{grid-template-columns:1fr;padding:var(--sp-8)}
  .stats__grid{grid-template-columns:repeat(1, 1fr)}
  .contact-strip__inner{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}

@media (max-width:768px){
  :root{--header-h:64px}
  .container{padding:0 var(--sp-4)}
  .section{padding:var(--sp-12) 0}

  /* Topbar: oculta perfiles y saludo, conserva utilidades */
  .topbar__profiles{display:none}
  .topbar__user,.topbar__user + .sep{display:none}
  .topbar__row{height: auto;padding: 10px;justify-content: center;}
  .topbar__utils {flex-wrap: wrap;}
  
  /* Header mobile */
  .brand__logo{height:48px}
  .footer .brand__logo{height:58px}

  .hero h1{font-size:var(--fs-30)}
  .hero p.lead{font-size:var(--fs-16)}
  .hero__search{max-width:100%}
  .hero__search button{padding:0 16px;font-size:var(--fs-12)}

  .quick{margin-top:calc(-1 * var(--sp-8))}
  .quick__grid{grid-template-columns:repeat(2, 1fr);gap:var(--sp-2);padding:var(--sp-3)}
  .quick__item{padding:var(--sp-4) var(--sp-2)}
  .quick__icon{width:38px;height:38px;margin-bottom:var(--sp-2)}
  .quick__label{font-size:var(--fs-12)}

  .tramites__grid{grid-template-columns:1fr}
  .tramites__filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--sp-2);scrollbar-width:none}
  .tramites__filters::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0}

  .mi-caja__systems .system{flex:1 1 100%}
  .news__grid{grid-template-columns:1fr}
  .news--featured{grid-column:auto}

  .stats__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .stat__num{font-size:var(--fs-30)}

  .contact-strip__inner{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .footer__brand{grid-column:span 2}

  .help-fab{bottom:16px;right:16px;padding:12px 18px;font-size:var(--fs-12)}
  .help-fab .label{display:none}
}

/* =====================================================================
   7) AMPLIACIONES SEGUNDO BOCETO
   Estilos nuevos para: indicadores económicos, botón secundario en
   trámites, badge "repartido", páginas internas (hero, breadcrumb,
   prose/post, listado de cards, blog/novedades, inversiones rurales).
   ===================================================================== */

/* 7.1 Badge de menú restringido (repartido) */
.nav__badge{
  display:inline-block;font-size:9px;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--c-gold-100);color:var(--c-gold-600);
  padding:3px 6px;border-radius:999px;margin-left:6px;vertical-align:middle;
}

/* 7.2 Indicadores económicos (datos más consultados) */
.indicators{
  background:var(--c-line);border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.indicators__inner{
  /* --indicators-cols: cantidad de indicadores a mostrar. site.jsp la
     sobrescribe por style inline con el minimo entre el maximo configurado
     (cn.home.indicadores.max) y la cantidad de hijos del container. */
  --indicators-cols:4;
  display:grid;grid-template-columns:auto repeat(var(--indicators-cols,4),1fr);gap:var(--sp-6);
  align-items:end;padding:var(--sp-5) 0;
}
.indicators__title{
  display:flex;flex-direction:column;gap:2px;
}
.indicators__title .eyebrow{
  font-size:var(--fs-12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-gold-600);
}
.indicators__title strong{
  font-family:var(--ff-head);color:var(--c-navy-900);font-size:var(--fs-18);font-weight:600;
}
.indicator{
  display:flex;flex-direction:column;gap:2px;padding-left:var(--sp-6);
  border-left:1px solid var(--c-line);
}
.indicator .label{font-size:var(--fs-12);color:var(--c-muted);font-weight:600}
.indicator .num{
  font-family:var(--ff-head);font-size:var(--fs-24);font-weight:600;color:var(--c-navy-900);line-height:1.1;
}
.indicator .freq{
  font-size:var(--fs-12);color:var(--c-ok);font-weight:600;display:inline-flex;align-items:center;gap:4px;
}
.indicator .freq::before{content:"\25CF";font-size:8px}

/* 7.3 Botón secundario "Más información" en trámites */
.tramite__actions{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:auto}
.tramite .more{
  font-size:var(--fs-14);font-weight:600;color:var(--c-muted);
  border-bottom:1px solid var(--c-line);padding-bottom:1px;transition:color .15s var(--ease),border-color .15s var(--ease);
}
.tramite .more:hover{color:var(--c-navy-900);border-color:var(--c-navy-700)}

/* 7.4 PÁGINAS INTERNAS ------------------------------------------------ */

/* Hero / encabezado de página interna */
.page-hero{
  background:linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 320px at 88% -20%, rgba(0,168,90,.18), transparent 60%);
  pointer-events:none;
}
.page-hero__inner{position:relative;padding:var(--sp-12) 0 var(--sp-12);max-width:1300px}
.page-hero .eyebrow{
  font-size:var(--fs-12);font-weight:700;color:var(--c-gold-500);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--sp-3);
}
.page-hero h1{
  color:#fff;font-size:clamp(var(--fs-30),3.4vw,var(--fs-36));line-height:1.15;
  font-weight:600;margin-bottom:var(--sp-4);
}
.page-hero p.lead{font-size:var(--fs-18);color:rgba(255,255,255,.85);max-width:620px}

/* Breadcrumb */
.breadcrumb{padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line)}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  margin:0;padding:0;font-size:var(--fs-14);color:var(--c-muted);
}
.breadcrumb li{display:flex;align-items:center;gap:var(--sp-2)}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--c-line);margin-left:var(--sp-1)}
.breadcrumb a{color:var(--c-navy-800);font-weight:500}
.breadcrumb a:hover{color:var(--c-gold-600)}
.breadcrumb li[aria-current]{color:var(--c-body)}

/* Layout de contenido con sidebar */
.layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-12);align-items:start}
.layout--reverse{grid-template-columns:300px 1fr}
.sidebar{position:sticky;top:calc(var(--header-h) + var(--sp-4))}
.sidebar__box{
  background:var(--c-bg-alt);border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.sidebar__box h4{
  font-family:var(--ff-body);font-size:var(--fs-12);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-gold-600);margin-bottom:var(--sp-3);
}
.sidebar__box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sidebar__box ul a{
  display:block;padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm);
  font-size:var(--fs-14);color:var(--c-body);transition:background .15s var(--ease),color .15s var(--ease);
}
.sidebar__box ul a:hover,.sidebar__box ul a[aria-current]{background:#fff;color:var(--c-navy-900);font-weight:600}
.sidebar__cta{
  background:var(--c-navy-900);color:#fff;border-radius:var(--r-md);padding:var(--sp-5);
}
.sidebar__cta h4{color:var(--c-gold-500)}
.sidebar__cta p{font-size:var(--fs-14);color:rgba(255,255,255,.8);margin-bottom:var(--sp-4)}

/* Prose / cuerpo de texto enriquecido (post) */
.prose{max-width:720px;color:var(--c-body);font-size:var(--fs-16);line-height:1.7}
.prose > * + *{margin-top:var(--sp-5)}
.prose h2{font-size:var(--fs-24);margin-top:var(--sp-10)}
.prose h3{font-size:var(--fs-20);margin-top:var(--sp-8)}
.prose p{color:var(--c-body)}
.prose a{color:var(--c-navy-800);font-weight:600;border-bottom:1px solid var(--c-gold-100)}
.prose a:hover{color:var(--c-gold-600);border-color:currentColor}
.prose ul,.prose ol{margin-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.prose li{padding-left:var(--sp-1)}
.prose img{border-radius:var(--r-md);margin:var(--sp-6) 0}
.prose figure{margin:var(--sp-6) 0}
.prose figcaption{font-size:var(--fs-12);color:var(--c-muted);margin-top:var(--sp-2);text-align:center}
.prose blockquote{
  border-left:4px solid var(--c-gold-500);background:var(--c-gold-50);
  padding:var(--sp-4) var(--sp-5);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--ff-head);font-size:var(--fs-18);color:var(--c-navy-900);font-style:italic;
}
.callout{
  background:var(--c-navy-50);border:1px solid var(--c-gold-100);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start;
}
.callout__icon{
  flex-shrink:0;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--c-navy-900);color:var(--c-gold-500);display:grid;place-items:center;
}
.callout h4{color:var(--c-navy-900);font-family:var(--ff-head);font-size:var(--fs-16);margin-bottom:4px}
.callout p{font-size:var(--fs-14);color:var(--c-body);margin:0}

/* Cabecera de artículo (post) */
.article-head{max-width:760px}
.article-head .meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  font-size:var(--fs-12);color:var(--c-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-3);
}
.article-head .meta .cat{color:var(--c-gold-600)}
.article-head h1{font-size:clamp(var(--fs-30),3.2vw,var(--fs-36));line-height:1.2;margin-bottom:var(--sp-4)}
.article-head .standfirst{font-size:var(--fs-18);color:var(--c-muted);line-height:1.5}
.article-cover{
  height:360px;border-radius:var(--r-lg);overflow:hidden;margin:var(--sp-8) 0;
  background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  display:grid;place-items:center;color:rgba(255,255,255,.4);
  font-family:var(--ff-head);font-size:var(--fs-24);position:relative;
}
.article-cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 75% 25%,rgba(0,168,90,.25),transparent 60%);
}
.article-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* Listado de contenidos en matriz de cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.cards-grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;transition:all .2s var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--c-navy-700)}
.card__media{
  height:170px;background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  position:relative;display:grid;place-items:center;color:rgba(255,255,255,.45);overflow:hidden;
}
.card__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card__media .icon{width:40px;height:40px;color:var(--c-gold-500)}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.card__meta{
  font-size:var(--fs-12);color:var(--c-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.card__meta .cat{color:var(--c-gold-600);margin-right:var(--sp-2)}
.card h3{font-size:var(--fs-18);color:var(--c-navy-900);line-height:1.35}
.card p{font-size:var(--fs-14);color:var(--c-muted);flex:1}
.card .read{
  font-size:var(--fs-14);font-weight:600;color:var(--c-navy-800);
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}
.card .read:hover{color:var(--c-gold-600)}
.card .read .arrow{transition:transform .2s var(--ease)}
.card:hover .read .arrow{transform:translateX(4px)}

/* Filtros de listado */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-6);
}
.toolbar .count{font-size:var(--fs-14);color:var(--c-muted)}

/* Paginación */
.pagination{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-10)}
.pagination a,.pagination span{
  min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--c-line);border-radius:var(--r-sm);font-size:var(--fs-14);font-weight:600;
  color:var(--c-body);transition:all .15s var(--ease);
}
.pagination a:hover{border-color:var(--c-navy-700);color:var(--c-navy-900)}
.pagination [aria-current]{background:var(--c-navy-900);color:#fff;border-color:var(--c-navy-900)}

/* Blog: entrada destacada horizontal */
.feature-post{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-10);
}
.feature-post__media{
  min-height:340px;background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  position:relative;display:grid;place-items:center;color:rgba(255,255,255,.4);
  font-family:var(--ff-head);font-size:var(--fs-24);
}
.feature-post__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feature-post__body{padding:var(--sp-10);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3)}
.feature-post__body .meta{
  font-size:var(--fs-12);color:var(--c-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.feature-post__body .meta .cat{color:var(--c-gold-600);margin-right:var(--sp-2)}
.feature-post__body h2{font-size:var(--fs-30);line-height:1.2}
.feature-post__body p{color:var(--c-muted);font-size:var(--fs-16)}

/* Blog: lista de entradas tipo fila */
.post-row{
  display:grid;grid-template-columns:220px 1fr;gap:var(--sp-6);
  padding:var(--sp-6) 0;border-bottom:1px solid var(--c-line);
}
.post-row:first-child{padding-top:0}
.post-row__media{
  height:150px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  display:grid;place-items:center;color:rgba(255,255,255,.4);
}
.post-row__media img{width:100%;height:100%;object-fit:cover}
.post-row__body{display:flex;flex-direction:column;gap:var(--sp-2);justify-content:center}
.post-row__body .meta{font-size:var(--fs-12);color:var(--c-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.post-row__body .meta .cat{color:var(--c-gold-600);margin-right:var(--sp-2)}
.post-row__body h3{font-size:var(--fs-20);color:var(--c-navy-900)}
.post-row__body p{font-size:var(--fs-14);color:var(--c-muted)}

/* Inversiones rurales: pilares con íconos circulares */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);text-align:center}
.pillar{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.pillar__icon{
  width:84px;height:84px;border-radius:50%;background:var(--c-gold-50);
  border:1px solid var(--c-gold-100);display:grid;place-items:center;color:var(--c-navy-700);
}
.pillar__icon svg{width:34px;height:34px;stroke-width:1.4}
.pillar__icon img {width: 50px;height: 50px;object-fit: contain;}
.pillar h3{font-size:var(--fs-18);color:var(--c-navy-900)}
.pillar p{font-size:var(--fs-14);color:var(--c-muted);max-width:240px}

/* Bloque media + texto (certificación, destacados) */
.media-block{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-10);align-items:center}
.media-block--reverse{grid-template-columns:1.1fr 1fr}
.media-block__img{
  border-radius:var(--r-lg);overflow:hidden;min-height:280px;
  background:linear-gradient(135deg,var(--c-navy-700),var(--c-navy-900));
  display:grid;place-items:center;color:rgba(255,255,255,.5);position:relative;
}
.media-block__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media-block__text h2{margin-bottom:var(--sp-4)}
.media-block__text p{color:var(--c-body);margin-bottom:var(--sp-5)}

/* Enlaces con ícono (consultas / denuncias) */
.icon-links{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-8)}
.icon-link{
  display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-16);
  font-weight:600;color:var(--c-navy-900);
}
.icon-link svg{width:22px;height:22px;color:var(--c-navy-700)}
.icon-link:hover{color:var(--c-gold-600)}
.icon-link:hover svg{color:var(--c-gold-600)}

/* Responsive internas */
@media (max-width:1024px){
  .layout,.layout--reverse{grid-template-columns:1fr}
  .sidebar{position:static}
  .feature-post{grid-template-columns:1fr}
  .feature-post__media{min-height:240px}
  .media-block,.media-block--reverse{grid-template-columns:1fr;gap:var(--sp-6)}
  .indicators__inner{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .indicators__title{grid-column:span 2}
  .indicator:nth-child(2){border-left:0;padding-left:0}
}
@media (max-width:768px){
  .cards-grid,.cards-grid--2{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr;gap:var(--sp-6)}
  .post-row{grid-template-columns:1fr}
  .post-row__media{height:180px}
  .indicators__inner{grid-template-columns:1fr;padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .indicators__title{grid-column:auto}
  .indicator{border-left:0;padding-left:0;border-top:1px solid var(--c-line);padding-top:var(--sp-3)}
  .page-hero__inner{padding:var(--sp-8) var(--sp-4)}
}

/* =====================================================================
   8) FORMULARIO INNOVA (type-innova-form2)
   Adapta el HTML generado por el framework de formularios al
   sistema de diseño institucional de la Caja Notarial.
   ===================================================================== */

#type-innova-form2,
#type-innova-form2 .jsonform-wrapper,
#type-innova-form2 #jsonform-place{
  width:100%;
}

/* Mensaje de estado del formulario */
#MiForm_msg{
  display:block;
  min-height:0;
}
#MiForm_msg:not(:empty){
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm);
  background:var(--c-gold-50);
  border:1px solid var(--c-gold-100);
  color:var(--c-ok);
  font-size:var(--fs-14);
  font-weight:600;
  margin-bottom:var(--sp-5);
}

/* Form y fieldset raíz */
#MiForm{ width:100% }
#MiForm .wrapper-fieldset{ border:0;margin:0;padding:0 }

/* Lista raíz de campos */
#MiForm .form-group-list,
#MiForm .form-wrap-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

/* Título h1 generado por el framework (field "title") */
#MiForm .form-group-list > li > h1{
  font-family:var(--ff-head);
  font-size:var(--fs-24);
  color:var(--c-navy-900);
  line-height:1.25;
  margin:0 0 var(--sp-1);
  font-weight:600;
}

/* Bloques de texto libre (title1, title3) */
#MiForm div[id^="title"]{
  font-size:var(--fs-14);
  color:var(--c-muted);
  line-height:1.65;
}
#MiForm div[id^="title"] p{ margin:0 0 var(--sp-3) }
#MiForm div[id^="title"] p:last-child{ margin-bottom:0 }

/* Labels de campo */
#MiForm > div label,
#MiForm .wrapper-fieldset > ul > li > label{
  display:block;
  font-size:var(--fs-14);
  font-weight:600;
  color:var(--c-navy-900);
  margin-bottom:var(--sp-2);
}
/* Indicador de campo requerido */
#MiForm .required::after{
  content:" *";
  color:var(--c-warn);
  font-weight:700;
}

/* Inputs de texto */
#MiForm input[type="text"]{
  display:block;
  width:100%;
  height:44px;
  padding:0 var(--sp-4);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  font:inherit;
  font-size:var(--fs-16);
  color:var(--c-ink);
  background:var(--c-bg-alt);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
#MiForm input[type="text"]:focus{
  outline:none;
  background:#fff;
  border-color:var(--c-navy-700);
  box-shadow:0 0 0 4px rgba(0,126,69,.10);
}
#MiForm input[type="text"]::placeholder{ color:var(--c-muted); font-size:var(--fs-14) }

/* Textarea */
#MiForm textarea{
  display:block;
  width:100%;
  min-height:140px;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  font:inherit;
  font-size:var(--fs-16);
  color:var(--c-ink);
  background:var(--c-bg-alt);
  resize:vertical;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
#MiForm textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--c-navy-700);
  box-shadow:0 0 0 4px rgba(0,126,69,.10);
}
#MiForm textarea::placeholder{ color:var(--c-muted); font-size:var(--fs-14) }

/* group-list: envuelve textarea y checkboxes */
#MiForm .group-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Span tipo label con alineación top (para el checkbox de acepto) */
#MiForm .label-align-top{
  display:block;
  font-size:var(--fs-14);
  font-weight:600;
  color:var(--c-navy-900);
  margin-bottom:var(--sp-3);
}

/* Checkbox + su label */
#MiForm .group-list li label{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-14);
  font-weight:400;
  color:var(--c-body);
  cursor:pointer;
  margin-bottom:0;
}
#MiForm input[type="checkbox"]{
  width:18px;
  height:18px;
  flex-shrink:0;
  accent-color:var(--c-navy-700);
  cursor:pointer;
}

/* Fieldset */
#MiForm .wrapper-fieldset > ul > li > fieldset {
    border-radius: 10px;
    border-color: var(--c-bg-alt);
}

/* Fieldset de cláusula de consentimiento */
#clausula_fieldset{
  border:1px solid var(--c-gold-100);
  border-radius:var(--r-md);
  background:var(--c-gold-50);
  padding:var(--sp-5);
}
#clausula_fieldset legend{
  font-family:var(--ff-body);
  font-size:var(--fs-12);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-gold-600);
  padding:0 var(--sp-2);
}
#clausula_fieldset .form-group-list{ gap:var(--sp-4) }

/* Texto de la cláusula con scroll cuando es largo */
#clausula_fieldset div[id^="title"]{
  font-size:var(--fs-13);
  color:var(--c-body);
  line-height:1.7;
  max-height:180px;
  overflow-y:auto;
  padding-right:var(--sp-2);
  scrollbar-width:thin;
  scrollbar-color:var(--c-gold-500) var(--c-gold-100);
}

/* Botón enviar — adapta las clases del framework al design system */
.btn-primario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:13px 28px;
  border:0;
  border-radius:999px;
  font:inherit;
  font-weight:700;
  font-size:var(--fs-16);
  background:var(--c-gold-500);
  color:var(--c-navy-900);
  cursor:pointer;
  transition:all .2s var(--ease);
}
.btn-primario:hover{
  background:var(--c-gold-600);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.btn-lg{ padding:15px 36px; font-size:var(--fs-18) }
.btn-center{ display:flex; margin:0 auto }

/* Nota de pie dentro del formulario (title3) */
#title3{
  text-align:center;
  font-size:var(--fs-13);
  color:var(--c-muted);
  border-top:1px solid var(--c-line);
  padding-top:var(--sp-4);
}

/* ── Sidebar de contacto ──────────────────────────────────────── */
.contact-info-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.contact-info-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
}
.contact-info-item i{
  font-size:20px;
  color:var(--c-gold-600);
  flex-shrink:0;
  margin-top:2px;
}
.contact-info-label{
  font-size:var(--fs-12);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--c-gold-600);
  font-weight:700;
  margin-bottom:2px;
}
.contact-info-value{
  font-family:var(--ff-head);
  color:var(--c-navy-900);
  font-size:var(--fs-16);
  font-weight:600;
  line-height:1.3;
  display:block;
}
a.contact-info-value:hover{ color:var(--c-gold-600) }
.contact-info-sub{
  font-size:var(--fs-13);
  color:var(--c-muted);
  margin-top:2px;
}

.hours-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.hours-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--fs-14);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--c-line);
}
.hours-row:last-child{ border-bottom:0; padding-bottom:0 }
.hours-row span:first-child{ color:var(--c-body); font-weight:500 }
.hours-row span:last-child{ color:var(--c-navy-900); font-weight:600 }

/* Responsive del formulario */
@media (max-width:768px){
  #MiForm .form-group-list > li > h1{ font-size:var(--fs-20) }
  .btn-lg{ font-size:var(--fs-16); padding:13px 24px }
}


/************************ Acordion *************************/

.accordion-item {border: 1px solid rgba(0,0,0);}
.accordion-flush .accordion-item:last-child {border-bottom: 1px solid rgba(0,0,0);}
.accordion-button {padding: .75rem 1.25rem;}
.accordion-button::after {background-image: none;content: "+";font-size: 1.5rem;width: auto;height: auto;}
.accordion-button:not(.collapsed)::after {background-image: none;font-size: 2rem;}
.accordion-button:not(.collapsed) {background-color: #ffffff;border: none;}
.accordion-button:focus {box-shadow: none;}

.accordion {
  color: #212529;
  background-color: #fff;
}

.accordion-item {
  color: #212529;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.accordion-item:first-of-type {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-item:last-of-type {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    border-radius 0.15s ease;
}

.accordion-button:not(.collapsed) {
  color: #052c65;
  background-color: #cfe2ff;
  box-shadow: inset 0 -1px 0 #dee2e6;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:hover {
  z-index: 2;
}

.accordion-button:focus {
  z-index: 3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.accordion-collapse {
  border: 0;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

/* Accordion flush */

.accordion-flush > .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.accordion-flush > .accordion-item:first-child {
  border-top: 0;
}

.accordion-flush > .accordion-item:last-child {
  border-bottom: 0;
}

.accordion-flush
  > .accordion-item
  > .accordion-collapse,
.accordion-flush
  > .accordion-item
  > .accordion-header
  .accordion-button,
.accordion-flush
  > .accordion-item
  > .accordion-header
  .accordion-button.collapsed {
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-button,
  .accordion-button::after {
    transition: none;
  }
}
.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

/* =====================================================================
   Acordeón de contenidos
   ===================================================================== */

.content-accordion {
    width: 100%;
    max-width: 900px;
}

.content-accordion__item {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: var(--sp-3);
    box-shadow: var(--shadow-sm);
    transition:
        border-color .2s var(--ease),
        box-shadow .2s var(--ease);
}

.content-accordion__item:hover {
    border-color: var(--c-navy-700);
    box-shadow: var(--shadow-md);
}

.content-accordion__item:last-child {
    margin-bottom: 0;
}

.content-accordion__heading {
    margin: 0;
}

/* Botón */

.content-accordion__button {
	justify-content: space-between;
    min-height: 64px;
    padding: var(--sp-4) var(--sp-5);
    color: var(--c-navy-900);
    background: var(--c-bg);
    font-family: var(--ff-head);
    font-size: var(--fs-18);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    border: 0;
    box-shadow: none;
}

.content-accordion__button:hover {
    color: var(--c-navy-800);
    background: var(--c-navy-50);
}

.content-accordion__button:not(.collapsed) {
    color: var(--c-navy-900);
    background: var(--c-navy-50);
    box-shadow: inset 0 -1px 0 var(--c-line);
}

.content-accordion__button:focus {
    box-shadow:
        0 0 0 3px rgba(0,126,69,.12);
}

.content-accordion__button::after {
    width: 10px;
    height: 10px;
    margin-left: var(--sp-4);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background-image: none;
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}

.content-accordion__button:not(.collapsed)::after {
    background-image: none;
    transform: rotate(225deg);
}

/* Contenido */

.content-accordion__body {
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

/*
 * El contenido viene enriquecido desde el CMS.
 * Se mantienen los estilos de .prose, pero se limita su ancho
 * para favorecer una lectura cómoda.
 */

.content-accordion__text.prose {
    margin-bottom: 0;
}

/* Recursos */

.content-accordion__resources {
    max-width: 720px;
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}

.content-accordion__resources-title {
    margin: 0 0 var(--sp-4);
    font-family: var(--ff-body);
    font-size: var(--fs-12);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-gold-600);
}

.content-accordion__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.content-accordion__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: fit-content;
    max-width: 100%;
    padding: 8px 10px;
    margin-left: -10px;
    border-radius: var(--r-sm);
    color: var(--c-navy-800);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.4;
    transition:
        background .15s var(--ease),
        color .15s var(--ease);
}

.content-accordion__link:hover {
    color: var(--c-gold-600);
}

.content-accordion__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    color: var(--c-navy-700);
    font-size: var(--fs-14);
    font-weight: 700;
}

/* Responsive */

@media (max-width: 768px) {

    .content-accordion__button {
        min-height: 58px;
        padding: var(--sp-4);
        font-size: var(--fs-16);
    }

    .content-accordion__body {
        padding: var(--sp-5) var(--sp-4) var(--sp-6);
    }

    .content-accordion__resources {
        margin-top: var(--sp-6);
    }

}