/* Formato nuevo de los artículos (Actualidad Jurídica), con el lenguaje visual de la web nueva:
   azul marino, dorado, beige; Cormorant Garamond para títulos e Inter para el texto. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

.nga {
  --marino: #2d3748; --marino-2: #3a4558; --oro: #c5a059; --oro-osc: #a8853f; --beige: #ebe5dc; --beige-2: #f6f2ec;
  --texto: #4a5568; --suave: #718096; --linea: rgb(45 55 72 / 0.12);
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--sans); color: var(--texto); -webkit-font-smoothing: antialiased;
}
.nga *, .nga *::before, .nga *::after { box-sizing: border-box; }
.nga a { color: inherit; }
.nga .nga-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); font-weight: 500; margin: 0 0 0.8rem; }
.nga .nga-punto { color: var(--oro); }

/* ---------- Cabecera del artículo ---------- */
.nga-hero { background: var(--marino); color: #fff; text-align: center; padding: 5rem 1.5rem 4.2rem; }
.nga-hero__dentro { max-width: 900px; margin: 0 auto; }
.nga-migas { font-size: 12px; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.55); margin-bottom: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.6rem; }
.nga-migas a { color: rgb(255 255 255 / 0.75); text-decoration: none; }
.nga-migas a:hover { color: var(--oro); }
.nga .nga-hero h1 { font-family: var(--serif) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.02em !important; font-size: clamp(30px, 4.2vw, 48px) !important; line-height: 1.15 !important; color: #fff !important; margin: 0 auto !important; max-width: 820px; }
.nga-hero hr { width: 56px; border: 0; border-top: 1px solid var(--oro); margin: 1.8rem auto; opacity: 1; }
.nga-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.8rem; margin: 0; font-size: 13px; color: rgb(255 255 255 / 0.78); }
.nga-hero__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.nga-meta__i { width: 16px; height: 16px; color: var(--oro); flex: none; }

/* ---------- Cuerpo: artículo + lateral ---------- */
.nga-cuerpo { max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4.5rem; align-items: start; }
.nga-articulo { min-width: 0; max-width: 740px; }
.nga-imagen { margin: 0.4rem 0 2.2rem; aspect-ratio: 21 / 9; overflow: hidden; border: 0.5px solid var(--linea); }
.nga-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.95) contrast(1.02) sepia(0.1); }

.nga-texto { font-size: 17px; line-height: 1.8; color: var(--texto); }
.nga-texto p { margin: 0 0 1.25rem; }
.nga-texto strong { color: var(--marino); font-weight: 600; }
.nga-texto a { color: var(--oro-osc); text-decoration: underline; text-underline-offset: 3px; }
.nga-entradilla p { font-family: var(--serif); font-size: 23px; line-height: 1.55; color: var(--marino); font-style: italic; margin-bottom: 1.1rem; }
.nga-entradilla p strong { font-weight: 500; color: var(--marino); }
.nga-entradilla { margin-bottom: 1.6rem; }

.nga .nga-texto h2 { display: flex; align-items: center; gap: 1rem; font-family: var(--serif) !important; font-weight: 500 !important; font-size: clamp(25px, 2.6vw, 31px) !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: var(--marino) !important; margin: 3.2rem 0 1.3rem !important; scroll-margin-top: 110px; }
.nga .nga-texto h3 { display: flex; align-items: center; gap: 0.7rem; font-family: var(--serif) !important; font-weight: 600 !important; font-size: 22px !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--marino) !important; margin: 2.2rem 0 0.9rem !important; scroll-margin-top: 110px; }
.nga .nga-texto h4 { font-family: var(--sans) !important; font-size: 15px !important; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--marino) !important; margin: 1.8rem 0 0.7rem !important; scroll-margin-top: 110px; }
.nga-h-icono { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0.5px solid rgb(197 160 89 / 0.6); border-radius: 50%; color: var(--oro); background: #fff; }
.nga-h-icono svg { width: 22px; height: 22px; }
.nga-texto h3 .nga-h-icono { width: 34px; height: 34px; }
.nga-texto h3 .nga-h-icono svg { width: 17px; height: 17px; }

/* listas */
.nga-texto ul, .nga-texto ol { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.nga-texto li { position: relative; padding-left: 1.7rem; margin: 0 0 0.7rem; }
.nga-texto ul > li::before { content: ''; position: absolute; left: 0.25rem; top: 0.72em; width: 7px; height: 7px; border: 1px solid var(--oro); transform: rotate(45deg); }
.nga-texto ol { counter-reset: nga; }
.nga-texto ol > li { counter-increment: nga; padding-left: 2.6rem; }
.nga-texto ol > li::before { content: counter(nga, decimal-leading-zero); position: absolute; left: 0; top: -0.05em; font-family: var(--serif); font-size: 21px; color: var(--oro); line-height: 1.6; }
.nga-texto li ul, .nga-texto li ol { margin: 0.7rem 0 0; }
.nga-texto ul.nga-lista-iconos > li::before { display: none; }
.nga-texto li .nga-li-icono { position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; color: var(--oro); }
.nga-texto li.nga-si .nga-li-icono { color: #3f7d5a; }
.nga-texto li.nga-no .nga-li-icono { color: #a8584a; }
.nga-texto ul.nga-lista-iconos > li { padding-left: 1.9rem; }
.nga-p-icono { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 500; color: var(--marino) !important; }
.nga-p-icono__i svg { width: 18px; height: 18px; color: var(--oro); position: relative; top: 3px; }
.nga-texto blockquote { margin: 2rem 0; padding: 1.2rem 1.6rem; border-left: 2px solid var(--oro); background: var(--beige-2); font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--marino); }
.nga-texto table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 15px; }
.nga-texto th, .nga-texto td { border-bottom: 0.5px solid var(--linea); padding: 0.8rem 0.6rem; text-align: left; vertical-align: top; }
.nga-texto th { font-weight: 600; color: var(--marino); background: var(--beige-2); }

/* llamada a la acción a mitad del artículo */
.nga-llamada { margin: 3rem 0; padding: 2.4rem 2.2rem; background: var(--marino); border: 0.5px solid rgb(197 160 89 / 0.55); outline: 0.5px solid rgb(197 160 89 / 0.35); outline-offset: -10px; text-align: center; color: rgb(255 255 255 / 0.85); }
.nga-llamada__titulo { font-family: var(--serif); font-size: clamp(25px, 2.8vw, 31px); line-height: 1.2; color: #fff; text-transform: uppercase; margin: 0 0 0.9rem; }
.nga-llamada__texto { max-width: 520px; margin: 0 auto 1.6rem !important; font-size: 15.5px; line-height: 1.7; }
.nga-llamada__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }

/* botones */
.nga .nga-boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.5rem; background: var(--oro); color: var(--marino) !important; border: 1px solid var(--oro); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; transition: background 0.2s, color 0.2s, border-color 0.2s; box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); }
.nga .nga-boton:hover { background: #fff; border-color: #fff; color: var(--marino) !important; }
.nga .nga-boton--borde { background: transparent; color: #fff !important; border-color: rgb(197 160 89 / 0.7); box-shadow: none; }
.nga .nga-boton--borde:hover { background: var(--oro); border-color: var(--oro); color: var(--marino) !important; }
.nga-boton__i { width: 16px; height: 16px; flex: none; }

/* autora */
.nga-autora { display: flex; gap: 1.4rem; align-items: center; margin: 3.5rem 0 1.5rem; padding: 1.8rem; background: var(--beige-2); border: 0.5px solid var(--linea); }
.nga-autora img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; filter: grayscale(0.15); }
.nga-autora .nga-eyebrow { margin-bottom: 0.3rem; }
.nga-autora p { margin: 0; }
.nga-autora__nombre { font-family: var(--serif); font-size: 25px; color: var(--marino); line-height: 1.2; }
.nga-autora__cargo { font-size: 14px; color: var(--marino); margin-top: 0.15rem !important; }
.nga-autora__cred { font-size: 13px; color: var(--suave); margin-top: 0.35rem !important; }
.nga-aviso { font-size: 12.5px; line-height: 1.6; color: var(--suave); font-style: italic; margin: 0; }

/* lateral: índice + contacto */
.nga-lateral { position: relative; height: 100%; }
.nga-lateral__fijo { position: sticky; top: 120px; display: grid; gap: 1.6rem; }
.nga-indice--lateral { border-left: 0.5px solid var(--linea); padding: 0.2rem 0 0.2rem 1.3rem; }
.nga-indice__titulo { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); font-weight: 500; margin: 0 0 1rem; }
.nga-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: ind; }
.nga-indice li { counter-increment: ind; margin: 0 0 0.75rem; }
.nga-indice a { display: grid; grid-template-columns: 1.7rem 1fr; font-size: 13.5px; line-height: 1.45; color: var(--suave); text-decoration: none; transition: color 0.2s; }
.nga-indice a::before { content: counter(ind, decimal-leading-zero); font-family: var(--serif); font-size: 15px; color: var(--oro); }
.nga-indice a:hover, .nga-indice a.activo { color: var(--marino); }
.nga-indice a.activo { font-weight: 500; }
.nga-contacto { background: var(--marino); color: rgb(255 255 255 / 0.8); padding: 1.8rem 1.6rem; text-align: center; font-size: 14px; line-height: 1.6; }
.nga-contacto p { margin: 0 0 1.1rem; }
.nga-contacto__titulo { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: #fff; text-transform: uppercase; }
.nga-contacto .nga-boton { width: 100%; margin-top: 0.6rem; }
.nga .nga-boton--claro { background: transparent; color: #fff !important; border-color: rgb(255 255 255 / 0.35); box-shadow: none; }
.nga .nga-boton--claro:hover { background: #25d366; border-color: #25d366; color: #fff !important; }
.nga-indice--movil { display: none; }

/* relacionados */
.nga-relacionados { background: var(--beige-2); padding: 4.5rem 1.5rem; border-top: 0.5px solid var(--linea); }
.nga-relacionados__dentro { max-width: 1140px; margin: 0 auto; }
.nga .nga-relacionados__titulo { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(26px, 3vw, 32px) !important; text-transform: uppercase; color: var(--marino) !important; margin: 0 0 2rem !important; letter-spacing: 0.01em !important; }
.nga-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nga-tarjeta { background: #fff; border: 0.5px solid rgb(45 55 72 / 0.14); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.3s; }
.nga-tarjeta:hover { border-color: rgb(197 160 89 / 0.6); }
.nga-tarjeta__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.nga-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.95) contrast(1.02) sepia(0.1); transition: filter 0.4s, transform 0.4s; }
.nga-tarjeta:hover .nga-tarjeta__media img { filter: none; transform: scale(1.02); }
.nga-tarjeta__texto { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.nga-tarjeta__meta { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; font-size: 11px; color: #8895a8; }
.nga-tarjeta__meta span { color: var(--oro); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.nga .nga-tarjeta h3 { font-family: var(--serif) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.35 !important; margin: 0 0 16px !important; text-transform: none !important; letter-spacing: 0 !important; }
.nga-tarjeta h3 a { color: var(--marino); text-decoration: none; }
.nga-tarjeta h3 a:hover { color: var(--oro); }
.nga-tarjeta__mas { margin-top: auto; color: var(--oro) !important; text-decoration: none; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.nga-tarjeta__mas::after { content: ' →'; }
.nga-relacionados__todos { text-align: center; margin: 2.5rem 0 0; }
.nga-relacionados__todos a { color: var(--oro-osc); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; text-decoration: none; border-bottom: 0.5px solid var(--oro); padding-bottom: 3px; }

/* ---------- Tablet y móvil ---------- */
@media (max-width: 1024px) {
  .nga-cuerpo { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.5rem; }
  .nga-articulo { max-width: none; }
  .nga-lateral__fijo { position: static; }
  .nga-indice--lateral { display: none; }
  .nga-indice--movil { display: block; margin: 0 0 2.2rem; border: 0.5px solid var(--linea); background: var(--beige-2); }
  .nga-indice--movil summary { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.2rem; cursor: pointer; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marino); font-weight: 500; list-style: none; }
  .nga-indice--movil summary::-webkit-details-marker { display: none; }
  .nga-indice--movil summary::after { content: '+'; margin-left: auto; color: var(--oro); font-size: 18px; }
  .nga-indice--movil[open] summary::after { content: '–'; }
  .nga-indice__i { width: 18px; height: 18px; color: var(--oro); }
  .nga-indice--movil ol { padding: 0 1.2rem 1rem; }
  .nga-rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nga-hero { padding-left: 1.2rem; padding-right: 1.2rem; padding-bottom: 3rem; }
  .nga-migas { margin-bottom: 1.5rem; }
  .nga-cuerpo { padding: 2rem 1.2rem 2rem; }
  .nga-texto { font-size: 16px; }
  .nga-entradilla p { font-size: 20px; }
  .nga .nga-texto h2 { gap: 0.8rem; }
  .nga-h-icono { width: 40px; height: 40px; }
  .nga-h-icono svg { width: 19px; height: 19px; }
  .nga-llamada { padding: 2rem 1.3rem; margin: 2.4rem -0.2rem; }
  .nga-llamada__botones .nga-boton { width: 100%; }
  .nga-autora { flex-direction: column; text-align: center; }
  .nga-rejilla { grid-template-columns: 1fr; }
}