:root {
  --turquesa: #009887;
  --magenta-oficial: #c90066;
  --rojo-oficial: #ae1922;
  --negro-oficial: #000000;
  --beige-oficial: #d3c2b4;

  --vino: #c90066;
  --vino-oscuro: #1b1117;
  --magenta: #c90066;
  --dorado: #009887;
  --verde: #009887;
  --rojo: #ae1922;
  --crema: #f8f4ef;
  --arena: #d3c2b4;
  --texto: #1c1c1c;
  --muted: #6d6268;
  --white: #ffffff;
  --border: rgba(0, 152, 135, .18);
  --shadow: 0 18px 50px rgba(0, 0, 0, .12);
  --radius: 22px;
  --font-title: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; transition: color .35s ease, background-color .35s ease, border-color .35s ease, opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
.container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 10px; background: var(--vino); color: white; padding: 10px 16px; border-radius: 999px; z-index: 99; }
.skip-link:focus { left: 16px; }

.topbar { background: var(--negro-oficial); color: rgba(255,255,255,.92); font-size: .92rem; border-bottom: 3px solid var(--turquesa); }
.topbar__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar a { font-weight: 700; }
.site-header { position: sticky; top: 0; z-index: 50; }
.navbar { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.navbar__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--magenta-oficial), var(--rojo-oficial)); color: white; font-family: var(--font-title); font-weight: 800; box-shadow: 0 10px 24px rgba(201,0,102,.22); }
.brand__text strong { display: block; font-family: var(--font-title); color: var(--magenta-oficial); line-height: 1.1; }
.brand__text small { display: block; color: var(--muted); margin-top: 2px; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav-menu a { display: block; padding: 10px 13px; border-radius: 999px; font-weight: 700; color: #493842; }
.nav-menu a:hover, .nav-menu a.active { color: var(--vino); background: rgba(111,23,63,.08); transform: translateY(-1px); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: rgba(111,23,63,.08); border-radius: 14px; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: var(--vino); margin: 5px 0; border-radius: 99px; transition: transform .35s ease, opacity .35s ease; }

.section-pad { padding: 80px 0; }
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at top left, rgba(0,152,135,.18), transparent 32%), linear-gradient(135deg, #fff, #f8f4ef 48%, #efe3da); }
.hero::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(111,23,63,.07); right: -150px; bottom: -220px; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 42px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--magenta); font-family: var(--font-title); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.eyebrow::before { content: ''; width: 30px; height: 3px; border-radius: 99px; background: var(--dorado); }
h1, h2, h3 { font-family: var(--font-title); line-height: 1.12; margin: 0 0 14px; color: var(--vino-oscuro); }
h1 { font-size: clamp(2.35rem, 5vw, 4.8rem); letter-spacing: -.05em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.7rem); letter-spacing: -.035em; }
h3 { font-size: 1.18rem; }
p { margin: 0 0 16px; color: var(--muted); }
.hero__lead { max-width: 680px; font-size: 1.18rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; cursor: pointer; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease; }
.btn:hover { transform: translateY(-3px) scale(1.01); }
.btn-primary { background: linear-gradient(135deg, var(--magenta-oficial), var(--rojo-oficial)); color: white; box-shadow: 0 14px 28px rgba(201,0,102,.24); }
.btn-outline { border-color: rgba(201,0,102,.24); background: white; color: var(--magenta-oficial); }
.btn-light { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: white; backdrop-filter: blur(10px); }
.btn-light:hover { background: rgba(255,255,255,.2); }
.btn-small { min-height: 40px; padding: 9px 16px; font-size: .92rem; }
.hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; }
.hero__meta div { background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.hero__meta strong { display: block; font-family: var(--font-title); color: var(--vino); font-size: 1.45rem; }
.hero__meta span { color: var(--muted); }
.hero-card { background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 32px; padding: 30px; box-shadow: var(--shadow); }
.hero-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--verde); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 6px rgba(27,127,104,.12); }
.quick-links { display: grid; gap: 12px; margin-top: 18px; }
.quick-links a { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); background: #fff; border-radius: 18px; font-weight: 800; color: var(--vino-oscuro); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .35s ease; }
.quick-links a:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(60,22,42,.08); border-color: rgba(111, 23, 63, .24); }
.quick-links span { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(201,154,50,.15); color: var(--vino); font-family: var(--font-title); }
.notice-strip { background: linear-gradient(90deg, var(--magenta-oficial), var(--rojo-oficial)); color: white; }
.notice-strip__inner { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; flex-wrap: wrap; }
.notice-strip span { color: rgba(255,255,255,.9); }
.section-title { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.section-title .eyebrow { justify-content: center; }
.action-grid, .resource-grid, .directory-grid, .stats-grid { display: grid; gap: 22px; }
.action-grid { grid-template-columns: repeat(3, 1fr); }
.action-card, .resource-card, .directory-card, .stat-card, .support-card, .faq-preview, .chart-card, .faq-sidebar { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: 0 12px 34px rgba(60,22,42,.06); }
.action-card { position: relative; overflow: hidden; min-height: 288px; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .35s ease; }
.action-card:hover, .resource-card:hover, .directory-card:hover, .stat-card:hover, .faq-sidebar:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(60,22,42,.10); border-color: rgba(111,23,63,.2); }
.action-card::after { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(201,154,50,.12); right: -60px; bottom: -60px; }
.icon-circle { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(111,23,63,.12), rgba(201,154,50,.16)); margin-bottom: 20px; font-size: 1.4rem; }
.card-link { font-weight: 900; color: var(--vino); display: inline-flex; margin-top: 6px; }
.card-link::after { content: '→'; margin-left: 6px; }
.section-muted { background: #fff7eb; border-block: 1px solid rgba(111,23,63,.08); }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.timeline__item { background: white; border: 1px solid var(--border); border-radius: 22px; padding: 22px; position: relative; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .35s ease; }
.timeline__item:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(60,22,42,.08); border-color: rgba(111,23,63,.18); }
.timeline__item span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: var(--vino); color: white; font-family: var(--font-title); font-weight: 800; margin-bottom: 16px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.support-card { background: linear-gradient(135deg, var(--negro-oficial), var(--magenta-oficial)); color: white; }
.support-card h2, .support-card p, .support-card .eyebrow { color: white; }
.support-card .eyebrow::before { background: var(--dorado); }
.contact-list { display: grid; gap: 10px; margin-top: 20px; }
.contact-list a, .contact-list span { background: rgba(255,255,255,.12); padding: 13px 14px; border-radius: 16px; color: white; }
.accordion { display: grid; gap: 12px; }
.accordion__item { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; transition: box-shadow .35s ease, border-color .35s ease; }
.accordion__item:hover { box-shadow: 0 14px 26px rgba(60,22,42,.06); border-color: rgba(111,23,63,.18); }
.accordion__trigger { width: 100%; border: 0; background: white; padding: 18px 20px; text-align: left; font-weight: 900; color: var(--vino-oscuro); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.accordion__trigger::after { content: '+'; color: var(--vino); font-size: 1.25rem; transition: transform .35s ease; }
.accordion__item.is-open .accordion__trigger::after { transform: rotate(45deg); }
.accordion__panel { display: block; max-height: 0; overflow: hidden; padding: 0 20px; color: var(--muted); opacity: 0; transition: max-height .45s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
.accordion__item.is-open .accordion__panel { max-height: 300px; padding: 0 20px 18px; opacity: 1; }
.floating-help { position: fixed; right: 24px; bottom: 24px; width: 58px; height: 58px; display: grid; place-items: center; background: var(--dorado); color: var(--vino-oscuro); border-radius: 50%; font-family: var(--font-title); font-size: 1.6rem; font-weight: 900; box-shadow: 0 14px 30px rgba(60,22,42,.22); z-index: 40; animation: floatHelp 3.6s ease-in-out infinite; }
.site-footer { background: var(--negro-oficial); color: white; border-top: 5px solid var(--turquesa); }
.footer__grid { padding: 48px 0; display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 32px; }
.footer__grid p { color: rgba(255,255,255,.68); }
.footer__grid a, .footer__grid strong { display: block; color: white; margin-bottom: 8px; }
.footer-bottom { padding: 18px 16px; text-align: center; color: rgba(255,255,255,.72); background: rgba(0,0,0,.18); }

.page-hero { padding: 72px 0; background: linear-gradient(135deg, #fff, #f4e5dc); border-bottom: 1px solid var(--border); }
.page-hero p { max-width: 760px; font-size: 1.08rem; }
.filter-bar { display: flex; gap: 12px; margin-bottom: 26px; }
.filter-bar input, .filter-bar select, .faq-sidebar input { width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 14px 18px; background: white; outline: none; }
.filter-bar select { max-width: 260px; color: var(--vino-oscuro); font-weight: 800; }
.resource-grid { grid-template-columns: repeat(4, 1fr); }
.resource-card { min-height: 232px; display: flex; flex-direction: column; align-items: flex-start; }
.resource-card .btn { margin-top: auto; }
.tag { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(27,127,104,.1); color: var(--verde); font-weight: 900; font-size: .78rem; margin-bottom: 14px; }
.empty-state { text-align: center; background: white; border: 1px dashed var(--border); border-radius: var(--radius); padding: 46px; }
.faq-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.faq-sidebar { position: sticky; top: 124px; }
.category-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.category-pills button { border: 1px solid var(--border); background: white; color: var(--vino); border-radius: 999px; padding: 8px 12px; cursor: pointer; font-weight: 800; }
.category-pills button.active { background: var(--vino); color: white; }
.directory-grid { grid-template-columns: repeat(2, 1fr); }
.directory-card__meta { display: grid; gap: 8px; margin-top: 18px; }
.directory-card__meta a, .directory-card__meta span { padding: 10px 12px; border-radius: 14px; background: rgba(111,23,63,.06); color: #4a3541; }
.stats-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 24px; }
.stat-card { text-align: center; }
.stat-card span { display: block; font-family: var(--font-title); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; color: var(--vino); line-height: 1; margin-bottom: 12px; }
.chart-card__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.updated { color: var(--muted); font-weight: 800; }
.progress-list { display: grid; gap: 18px; }
.progress-row { display: grid; grid-template-columns: 220px 1fr 54px; gap: 16px; align-items: center; }
.progress-row div:first-child span { display: block; color: var(--muted); font-size: .92rem; }
.progress { height: 14px; background: #efe3d8; border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; width: var(--value); background: linear-gradient(90deg, var(--vino), var(--dorado)); border-radius: inherit; }
.note { text-align: center; font-size: .95rem; }

@keyframes floatHelp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1), filter .8s ease; filter: blur(4px); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal--soft { transform: translateY(18px) scale(.995); transition-duration: 1.1s; }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .nav-menu { position: absolute; inset: 100% 16px auto; display: none; flex-direction: column; align-items: stretch; background: white; padding: 12px; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
  .nav-menu.is-open { display: flex; }
  .hero__grid, .split, .faq-layout { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .action-grid, .resource-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-sidebar { position: static; }
}

@media (max-width: 680px) {
  .topbar__inner { justify-content: center; text-align: center; flex-direction: column; padding: 8px 0; }
  .brand__text small { display: none; }
  .section-pad { padding: 54px 0; }
  .hero__meta, .timeline, .action-grid, .resource-grid, .directory-grid, .stats-grid, .footer__grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; }
  .filter-bar select { max-width: none; }
  .hero-card { padding: 22px; border-radius: 24px; }
  .progress-row { grid-template-columns: 1fr; gap: 8px; }
  .chart-card__head { align-items: flex-start; flex-direction: column; }
  h1 { font-size: 2.35rem; }
}



/* Encabezado institucional de ancho completo */
.masthead-banner {
  width: 100%;
  min-height: clamp(360px, 46vw, 620px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 152, 135, .32), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(201, 0, 102, .24), transparent 30%),
    linear-gradient(135deg, #000000 0%, #16050d 48%, #2b0615 100%);
  color: white;
  isolation: isolate;
}

.masthead-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(0,152,135,.12) 0 10%, transparent 10% 18%, rgba(201,0,102,.12) 18% 26%, transparent 26%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
  opacity: .9;
  z-index: -2;
}

.masthead-banner::after {
  content: '';
  position: absolute;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  right: -120px;
  bottom: -180px;
  border: 34px solid rgba(0, 152, 135, .22);
  transform: rotate(45deg);
  z-index: -1;
}

.masthead-banner__content {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(46px, 7vw, 88px) 0;
}

.masthead-banner__info { max-width: 620px; }

.masthead-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.masthead-banner__label::before {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--turquesa);
}

.masthead-banner h2 {
  color: white;
  font-size: clamp(2rem, 4.2vw, 4.6rem);
  letter-spacing: -.055em;
  margin-bottom: 18px;
}

.masthead-banner p {
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  max-width: 600px;
}

.masthead-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.masthead-banner__logo {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(24px, 3vw, 38px);
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 26px 70px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}

.masthead-banner__logo img {
  width: 100%;
  max-height: clamp(210px, 28vw, 390px);
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.35));
}

.hero.section-pad { padding-top: 56px; }

@media (max-width: 980px) {
  .masthead-banner { min-height: auto; }
  .masthead-banner__content {
    grid-template-columns: 1fr;
    text-align: center;
    width: min(920px, calc(100% - 32px));
    padding: 46px 0 54px;
  }
  .masthead-banner__info { margin-inline: auto; }
  .masthead-banner__label { justify-content: center; }
  .masthead-banner__buttons { justify-content: center; }
  .masthead-banner__logo { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 680px) {
  .masthead-banner__content { padding: 34px 0 42px; }
  .masthead-banner h2 { font-size: 2.2rem; }
  .masthead-banner__logo { padding: 14px; border-radius: 22px; }
  .masthead-banner__logo img { max-height: 230px; }
  .hero.section-pad { padding-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Material de apoyo dividido por secciones */
.page-hero--material {
  background:
    radial-gradient(circle at 90% 20%, rgba(0,152,135,.16), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8f4ef 55%, rgba(211,194,180,.45));
}

.material-page .filter-bar {
  position: sticky;
  top: 118px;
  z-index: 20;
  background: rgba(248,244,239,.88);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}

.material-toc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 28px 0 30px;
}

.material-toc a {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--border);
  color: var(--vino-oscuro);
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(0,0,0,.045);
}

.material-toc a:hover {
  transform: translateY(-4px);
  border-color: rgba(201,0,102,.32);
  box-shadow: 0 18px 36px rgba(0,0,0,.08);
}

.material-toc span,
.section-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--turquesa), #007f73);
  color: white;
  font-family: var(--font-title);
  font-weight: 800;
}

.material-sections {
  display: grid;
  gap: 34px;
}

.resource-section {
  background: rgba(255,255,255,.76);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 18px 46px rgba(0,0,0,.06);
}

.resource-section[hidden] {
  display: none;
}

.resource-section__head {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.resource-section__head h2 {
  margin-bottom: 8px;
}

.resource-grid--languages,
.resource-grid--formats,
.campaign-grid,
.contact-resource-grid {
  display: grid;
  gap: 18px;
}

.resource-grid--languages {
  grid-template-columns: repeat(4, 1fr);
}

.resource-grid--formats {
  grid-template-columns: repeat(4, 1fr);
}

.resource-grid--formats .resource-card--wide {
  grid-column: span 2;
}

.resource-card--featured {
  border-top: 5px solid var(--turquesa);
}

.material-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(201,0,102,.08);
  border: 1px solid rgba(201,0,102,.18);
}

.material-note strong {
  color: var(--magenta-oficial);
  font-family: var(--font-title);
}

.material-note p {
  margin-bottom: 0;
}

.legal-list {
  display: grid;
  gap: 12px;
}

.legal-item {
  min-height: auto;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
}

.legal-item span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,152,135,.12);
  color: var(--turquesa);
  font-weight: 900;
}

.legal-item h3,
.legal-item p {
  margin-bottom: 0;
}

.campaign-slogan {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(201,0,102,.08);
  color: var(--magenta-oficial);
  font-weight: 900;
}

.campaign-grid {
  grid-template-columns: repeat(3, 1fr);
}

.campaign-card {
  overflow: hidden;
}

.campaign-thumb {
  min-height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  margin-bottom: 18px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(201,0,102,.94), rgba(174,25,34,.92)),
    linear-gradient(45deg, transparent 0 30%, rgba(0,152,135,.18) 30% 45%, transparent 45%);
  isolation: isolate;
}

.campaign-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 86% 20%, rgba(0,152,135,.28), transparent 24%),
    linear-gradient(125deg, transparent 0 58%, rgba(255,255,255,.08) 58% 68%, transparent 68%);
  z-index: -1;
}

.campaign-thumb::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -34px;
  bottom: -42px;
  border-radius: 24px;
  border: 14px solid rgba(255,255,255,.10);
  transform: rotate(28deg);
}

.campaign-thumb img {
  width: min(100%, 300px);
  max-height: 136px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.22));
}

.campaign-thumb--banner {
  background:
    linear-gradient(135deg, rgba(0,152,135,.96), rgba(14,92,84,.94)),
    linear-gradient(45deg, transparent 0 30%, rgba(201,0,102,.18) 30% 45%, transparent 45%);
}

.campaign-thumb--diptico {
  background:
    linear-gradient(135deg, rgba(0,0,0,.96), rgba(31,31,31,.94)),
    linear-gradient(45deg, transparent 0 30%, rgba(211,194,180,.24) 30% 45%, transparent 45%);
}

.campaign-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  color: white;
  font-family: var(--font-title);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
}

.signature-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 12%, rgba(0,152,135,.12), transparent 30%),
    #ffffff;
}

.signature-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.contact-resource-grid {
  grid-template-columns: 1.1fr .95fr .95fr;
}

.contact-resource-card p:last-child {
  margin-bottom: 0;
}

.resource-card[hidden],
.material-note[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .material-toc,
  .resource-grid--languages,
  .resource-grid--formats,
  .campaign-grid,
  .contact-resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-item {
    grid-template-columns: 1fr;
  }

  .resource-grid--formats .resource-card--wide {
    grid-column: span 1;
  }

  .signature-panel {
    grid-template-columns: 1fr;
  }

  .signature-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .material-page .filter-bar {
    position: static;
  }

  .material-toc,
  .resource-grid--languages,
  .resource-grid--formats,
  .campaign-grid,
  .contact-resource-grid {
    grid-template-columns: 1fr;
  }

  .resource-section__head {
    grid-template-columns: 1fr;
  }

  .campaign-thumb {
    min-height: 168px;
    padding: 14px;
  }

  .campaign-thumb img {
    max-height: 112px;
  }

  .campaign-badge {
    left: 12px;
    top: 12px;
    padding: 8px 10px;
    font-size: .82rem;
  }
}


/* Ajustes solicitados para Material de apoyo */
.legal-list--full {
  gap: 14px;
}

.legal-item--full {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: auto;
}

.legal-item--full h3 {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0;
  color: var(--texto);
}

.campaign-thumb {
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.campaign-thumb--cartel {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.18), transparent 20%),
    linear-gradient(135deg, rgba(201,0,102,.96), rgba(174,25,34,.92));
}

.campaign-thumb img {
  width: min(92%, 310px);
  max-height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 16px 25px rgba(0,0,0,.34));
  z-index: 1;
}

.campaign-format {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--font-title);
  letter-spacing: .02em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.signature-panel--complete {
  align-items: start;
}

.signature-copy p {
  color: #51464d;
  margin-bottom: 12px;
}

.signature-actions--stacked {
  min-width: min(100%, 360px);
  flex-direction: column;
  align-items: stretch;
}

.signature-actions--stacked .btn {
  width: 100%;
  text-align: center;
}

@media (max-width: 1120px) {
  .legal-item--full {
    grid-template-columns: 1fr;
  }
}


/* Ajuste solicitado: miniaturas de campaña solo con imagen y fondo */
.campaign-thumb {
  min-height: 214px;
  flex-direction: row;
  gap: 0;
}

.campaign-thumb img {
  width: min(88%, 280px);
  max-height: 138px;
  object-fit: contain;
}

.campaign-badge,
.campaign-format {
  display: none !important;
}

/* Rediseño visual de la sección de firma electrónica */
.signature-shell {
  display: grid;
  grid-template-columns: minmax(290px, .95fr) minmax(320px, 1.05fr);
  gap: 22px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(248,244,239,1) 100%);
}

.signature-hero-block {
  position: relative;
  padding: 30px;
  background:
    radial-gradient(circle at 18% 16%, rgba(0,152,135,.16), transparent 28%),
    linear-gradient(135deg, #14080d 0%, #2a0a17 52%, #4f1027 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.signature-hero-block::after {
  content: '';
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 168px;
  height: 168px;
  border: 20px solid rgba(255,255,255,.08);
  border-radius: 30px;
  transform: rotate(22deg);
}

.signature-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-title);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.signature-hero-block h3 {
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2rem);
  margin-bottom: 14px;
}

.signature-lead {
  color: rgba(255,255,255,.82);
  font-size: 1.02rem;
  margin-bottom: 18px;
}

.signature-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 24px;
}

.signature-chip-row span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,152,135,.16);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
}

.signature-actions--hero {
  margin-top: auto;
}

.signature-actions--hero .btn-outline {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.24);
}

.signature-actions--hero .btn-outline:hover {
  background: rgba(255,255,255,.14);
}

.signature-detail-grid {
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}

.signature-mini-card {
  min-height: 100%;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(0,152,135,.16);
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}

.signature-mini-card h4 {
  margin: 0 0 10px;
  color: var(--magenta-oficial);
  font-family: var(--font-title);
  font-size: 1.02rem;
}

.signature-mini-card p {
  margin: 0;
  color: #51464d;
  line-height: 1.7;
}

.signature-mini-card--highlight {
  background: linear-gradient(135deg, rgba(0,152,135,.08), rgba(201,0,102,.06));
  border-color: rgba(201,0,102,.14);
}

@media (max-width: 1120px) {
  .signature-shell {
    grid-template-columns: 1fr;
  }

  .signature-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .campaign-thumb {
    min-height: 180px;
  }

  .signature-hero-block,
  .signature-detail-grid {
    padding: 20px;
  }

  .signature-detail-grid {
    grid-template-columns: 1fr;
  }
}


/* Ajuste compacto solicitado para Firma Electrónica */
.signature-shell {
  grid-template-columns: minmax(250px, .68fr) minmax(440px, 1.32fr);
  gap: 0;
  align-items: stretch;
}

.signature-hero-block {
  padding: 22px;
  min-height: auto;
}

.signature-hero-block::after {
  width: 118px;
  height: 118px;
  border-width: 15px;
  right: -28px;
  bottom: -38px;
}

.signature-kicker {
  margin-bottom: 10px;
  padding: 6px 10px;
  font-size: .72rem;
}

.signature-hero-block h3 {
  font-size: clamp(1.28rem, 1.6vw, 1.58rem);
  margin-bottom: 8px;
}

.signature-lead {
  font-size: .92rem;
  line-height: 1.48;
  margin-bottom: 10px;
}

.signature-chip-row {
  gap: 7px;
  margin: 6px 0 14px;
}

.signature-chip-row span {
  padding: 5px 9px;
  font-size: .8rem;
}

.signature-actions--hero {
  gap: 8px;
}

.signature-actions--hero .btn {
  min-height: 39px;
  padding: 8px 12px;
  font-size: .86rem;
}

.signature-detail-grid {
  padding: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signature-mini-card {
  padding: 13px 14px;
  border-radius: 15px;
  box-shadow: 0 7px 16px rgba(0,0,0,.035);
}

.signature-mini-card h4 {
  font-size: .9rem;
  margin-bottom: 5px;
}

.signature-mini-card p {
  font-size: .86rem;
  line-height: 1.38;
}

@media (max-width: 1120px) {
  .signature-shell {
    grid-template-columns: 1fr;
  }

  .signature-hero-block {
    padding: 20px;
  }

  .signature-actions--hero {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .signature-actions--hero .btn {
    width: auto;
  }
}

@media (max-width: 760px) {
  .signature-actions--hero {
    flex-direction: column;
  }

  .signature-actions--hero .btn {
    width: 100%;
  }

  .signature-detail-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .signature-mini-card {
    padding: 13px;
  }
}


/* Banner principal restaurado en inicio */
.home-main-banner {
  width: 100%;
  background: linear-gradient(180deg, #f8f4ef 0%, #ffffff 100%);
  padding: 0;
  overflow: hidden;
}

.home-main-banner__media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-bottom: 5px solid var(--turquesa);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}

.home-main-banner__media img {
  width: 100%;
  height: clamp(220px, 32vw, 440px);
  object-fit: cover;
  object-position: center;
}

@media (max-width: 680px) {
  .home-main-banner__media img {
    height: 190px;
  }
}

/* Firma Electrónica resumida y menos alta */
.signature-compact-card {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, .8fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,152,135,.12), transparent 28%),
    linear-gradient(135deg, #ffffff, #fbf7f2);
  border-left: 6px solid var(--turquesa);
}

.signature-compact-card__main h3 {
  margin-bottom: 8px;
  font-size: clamp(1.15rem, 1.4vw, 1.45rem);
}

.signature-compact-card__main p {
  margin-bottom: 0;
  font-size: .96rem;
  line-height: 1.52;
}

.signature-compact-card .signature-kicker {
  color: var(--magenta-oficial);
  background: rgba(201,0,102,.08);
  border: 1px solid rgba(201,0,102,.14);
  margin-bottom: 9px;
}

.signature-compact-card__steps {
  display: grid;
  gap: 8px;
}

.signature-compact-card__steps div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(0,152,135,.07);
  border: 1px solid rgba(0,152,135,.14);
}

.signature-compact-card__steps strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--turquesa);
  color: white;
  font-family: var(--font-title);
}

.signature-compact-card__steps span {
  font-weight: 800;
  color: #393238;
  font-size: .9rem;
  line-height: 1.25;
}

.signature-compact-card__actions {
  display: grid;
  gap: 9px;
  min-width: 190px;
}

.signature-compact-card__actions .btn {
  min-height: 40px;
  padding: 8px 13px;
  font-size: .86rem;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .signature-compact-card {
    grid-template-columns: 1fr;
  }

  .signature-compact-card__steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .signature-compact-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signature-compact-card__actions .btn {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .signature-compact-card {
    padding: 16px;
  }

  .signature-compact-card__steps,
  .signature-compact-card__actions {
    grid-template-columns: 1fr;
  }
}


/* Página de inicio: banner principal institucional como referencia */
.home-main-banner {
  display: none !important;
}

.masthead-banner--home {
  width: 100%;
  min-height: clamp(430px, 40vw, 650px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(0,152,135,.22) 0 11%, transparent 11% 22%, rgba(255,255,255,.035) 22% 31%, transparent 31%),
    radial-gradient(circle at 83% 18%, rgba(201,0,102,.34), transparent 32%),
    linear-gradient(135deg, #020202 0%, #10040a 43%, #430019 100%);
  color: #fff;
  isolation: isolate;
}

.masthead-banner--home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 45%),
    radial-gradient(circle at 72% 66%, rgba(0,152,135,.17), transparent 14%);
  z-index: -2;
}

.masthead-banner--home::after {
  content: '';
  position: absolute;
  right: -95px;
  top: 18%;
  width: clamp(190px, 22vw, 340px);
  aspect-ratio: 1;
  border: clamp(34px, 4vw, 58px) solid rgba(255,255,255,.13);
  border-left-color: rgba(0,152,135,.17);
  transform: rotate(45deg);
  z-index: -1;
}

.masthead-banner--home .masthead-banner__content {
  width: min(1320px, calc(100% - 56px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(34px, 6vw, 88px);
  padding: clamp(54px, 7vw, 86px) 0;
}

.masthead-banner--home .masthead-banner__info {
  max-width: 650px;
}

.masthead-banner--home .masthead-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-title);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.masthead-banner--home .masthead-banner__label::before {
  content: '';
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--turquesa);
}

.masthead-banner--home h2 {
  color: #fff;
  font-size: clamp(3rem, 5.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.06em;
  margin-bottom: 22px;
}

.masthead-banner--home p {
  max-width: 610px;
  color: rgba(255,255,255,.78);
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.6;
}

.masthead-banner--home .masthead-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.masthead-banner--home .masthead-banner__logo {
  position: relative;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 34px;
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}

.masthead-banner--home .masthead-banner__logo::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%, rgba(0,152,135,.12));
  pointer-events: none;
}

.masthead-banner--home .masthead-banner__logo img {
  width: 100%;
  max-height: clamp(190px, 22vw, 300px);
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.38));
}

.hero--orientation {
  padding-top: 62px;
}

@media (max-width: 1100px) {
  .masthead-banner--home .masthead-banner__content {
    grid-template-columns: 1fr;
    text-align: center;
    width: min(920px, calc(100% - 36px));
  }

  .masthead-banner--home .masthead-banner__info {
    margin-inline: auto;
  }

  .masthead-banner--home .masthead-banner__label,
  .masthead-banner--home .masthead-banner__buttons {
    justify-content: center;
  }

  .masthead-banner--home .masthead-banner__logo {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .masthead-banner--home {
    min-height: auto;
  }

  .masthead-banner--home .masthead-banner__content {
    padding: 40px 0 44px;
    width: min(100% - 28px, 560px);
  }

  .masthead-banner--home h2 {
    font-size: 2.45rem;
  }

  .masthead-banner--home p {
    font-size: .98rem;
  }

  .masthead-banner--home .masthead-banner__logo {
    padding: 18px;
    border-radius: 24px;
  }

  .masthead-banner--home .masthead-banner__logo img {
    max-height: 190px;
  }
}


/* Preguntas frecuentes completas */
.page-hero--faq {
  background:
    radial-gradient(circle at 86% 12%, rgba(201,0,102,.12), transparent 30%),
    radial-gradient(circle at 14% 22%, rgba(0,152,135,.14), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8f4ef 62%, rgba(211,194,180,.38));
}

.faq-page .faq-layout {
  grid-template-columns: 340px 1fr;
}

.faq-count {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0,152,135,.10);
  color: var(--turquesa);
  font-family: var(--font-title);
  font-size: .82rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.faq-sidebar p {
  font-size: .95rem;
}

.faq-source-note {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(201,0,102,.06);
  border: 1px solid rgba(201,0,102,.12);
}

.faq-source-note strong {
  color: var(--magenta-oficial);
  font-family: var(--font-title);
}

.faq-source-note p {
  margin: 6px 0 0;
  font-size: .9rem;
}

.faq-summary-card {
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,0,0,.94), rgba(62,0,24,.92));
  color: #fff;
  border-left: 5px solid var(--turquesa);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.faq-summary-card strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.08rem;
  margin-bottom: 4px;
}

.faq-summary-card p {
  color: rgba(255,255,255,.78);
  margin: 0;
}

.faq-list .accordion__trigger {
  align-items: flex-start;
  line-height: 1.3;
}

.faq-list .accordion__panel p,
.faq-list .accordion__panel li {
  color: #51464d;
  font-size: .98rem;
  line-height: 1.72;
}

.faq-list .accordion__panel p:last-child {
  margin-bottom: 0;
}

.answer-list {
  margin: 8px 0 14px;
  padding-left: 1.2rem;
}

.answer-list li + li {
  margin-top: 7px;
}

@media (max-width: 980px) {
  .faq-page .faq-layout {
    grid-template-columns: 1fr;
  }
}


/* Acordeón: solo una pregunta abierta a la vez mediante JavaScript */
.accordion__item.is-open {
  border-color: rgba(201,0,102,.26);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}


/* Ajustes solicitados: sin barra superior y pie de página mejorado */
.topbar { display: none !important; }
.site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(12px); }
.navbar { border-top: 0; }

.site-footer {
  position: relative;
  background:
    radial-gradient(circle at 10% 10%, rgba(0,152,135,.14), transparent 22%),
    linear-gradient(135deg, #050505 0%, #121212 48%, #230913 100%);
  color: #fff;
  border-top: 5px solid var(--turquesa);
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 72%, rgba(201,0,102,.08) 72% 82%, transparent 82%);
  pointer-events: none;
}

.footer__wrap {
  position: relative;
  z-index: 1;
  padding: 42px 0 28px;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(280px, .85fr);
  gap: 34px;
  align-items: start;
}

.footer-brand {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: center;
}

.footer-brand__logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  padding: 12px;
}

.footer-brand__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.footer-brand__copy strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: #fff;
}

.footer-brand__copy p {
  margin: 0 0 8px;
  color: rgba(255,255,255,.78);
  max-width: 560px;
}

.footer-brand__copy span {
  color: rgba(255,255,255,.58);
  font-size: .95rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.footer-col h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 1rem;
}

.footer-col a,
.footer-col span {
  display: block;
  color: rgba(255,255,255,.76);
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  padding: 14px 16px 18px;
  text-align: center;
  color: rgba(255,255,255,.62);
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

@media (max-width: 880px) {
  .footer__wrap,
  .footer-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .footer-brand {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand__logo {
    margin-inline: auto;
  }
}

/* Directorio completo */
.page-hero--directory {
  background:
    radial-gradient(circle at 86% 16%, rgba(0,152,135,.14), transparent 30%),
    linear-gradient(135deg, #fff, #f8f4ef 62%, rgba(211,194,180,.45));
}

.directory-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(0,152,135,.09);
  border: 1px solid rgba(0,152,135,.18);
  color: var(--texto);
}

.directory-summary strong {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--turquesa);
}

.directory-grid--full {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-card--full {
  min-height: auto;
  padding: 22px;
}

.directory-card__top {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.directory-letter {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--turquesa), var(--magenta-oficial));
  color: white;
  font-family: var(--font-title);
  font-weight: 900;
}

.directory-card--full h3 {
  margin-bottom: 8px;
}

.directory-card--full p {
  margin-bottom: 0;
}

.directory-card--full .directory-card__meta {
  gap: 9px;
}

.directory-card--full .directory-card__meta span {
  line-height: 1.45;
}

.directory-legal-note {
  margin-top: 24px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(201,0,102,.06);
  border: 1px solid rgba(201,0,102,.14);
}

.directory-legal-note p {
  margin-bottom: 0;
  color: #51464d;
}

@media (max-width: 980px) {
  .directory-grid--full {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .directory-card__top {
    grid-template-columns: 1fr;
  }
}


/* Estadísticas con tabla */
.page-hero--stats {
  background: radial-gradient(circle at 88% 14%, rgba(0,152,135,.14), transparent 28%), linear-gradient(135deg, #fff, #f8f4ef 60%, rgba(211,194,180,.45));
}

.stats-years {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.stats-year {
  min-width: 110px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,152,135,.18);
  background: #fff;
  color: var(--texto);
  font-family: var(--font-title);
  font-weight: 800;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, color .35s ease;
}

.stats-year.is-active,
.stats-year:hover {
  background: linear-gradient(135deg, var(--magenta-oficial), var(--rojo-oficial));
  color: #fff;
  box-shadow: 0 14px 28px rgba(201,0,102,.18);
}

.stats-panel {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.06);
  padding: 24px;
}

.stats-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.stats-table-wrap {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.stats-table th,
.stats-table td {
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: middle;
}

.stats-table th {
  font-family: var(--font-title);
  color: var(--vino-oscuro);
  background: rgba(0,152,135,.06);
}

.percent-cell {
  display: grid;
  grid-template-columns: minmax(120px, 180px) auto;
  align-items: center;
  gap: 12px;
}

.mini-progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.mini-progress span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--turquesa), var(--magenta-oficial));
}

.percent-cell strong {
  color: var(--magenta-oficial);
  font-family: var(--font-title);
}

@media (max-width: 800px) {
  .stats-panel {
    padding: 18px;
  }
  .stats-panel__head {
    flex-direction: column;
  }
}


/* Página de capacitación en línea */
.page-hero--training {
  background:
    radial-gradient(circle at 84% 18%, rgba(0,152,135,.16), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8f4ef 56%, rgba(211,194,180,.42));
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

.training-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px rgba(0,0,0,.06);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}

.training-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(0,0,0,.09);
}

.training-card--primary {
  background:
    radial-gradient(circle at 10% 10%, rgba(0,152,135,.13), transparent 28%),
    #fff;
}

.training-card__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--turquesa), var(--magenta-oficial));
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 16px 28px rgba(0,152,135,.18);
}

.training-card p {
  margin-bottom: 18px;
}

.training-table-wrap {
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.05);
}

.training-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.training-table th,
.training-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.training-table th {
  font-family: var(--font-title);
  color: var(--vino-oscuro);
  background: rgba(0,152,135,.07);
}

.training-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .training-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .training-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}


/* Material de apoyo: la barra de búsqueda ya no queda fija al hacer scroll */
.material-page .filter-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}


/* Ajuste de menú para texto 'Directorio de Enlaces' */
.nav-menu a {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .nav-menu a {
    white-space: normal;
  }
}


/* Contacto institucional en pie de página */
.footer-col span {
  line-height: 1.45;
}

.footer-col a[href^="tel"] {
  font-weight: 800;
  color: #fff;
}


/* Corrección móvil: evitar desbordamiento horizontal en Material de apoyo */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.material-page,
.material-page main,
.material-page .container,
.material-page .resource-section,
.material-page .resource-grid,
.material-page .resource-card,
.material-page .campaign-grid,
.material-page .campaign-card,
.material-page .legal-list--full,
.material-page .legal-item--full,
.material-page .signature-compact-card {
  max-width: 100%;
  box-sizing: border-box;
}

.material-page .resource-card,
.material-page .campaign-card,
.material-page .legal-item--full,
.material-page .signature-compact-card {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 760px) {
  .material-page .container {
    width: min(100% - 24px, var(--container));
    padding-left: 0;
    padding-right: 0;
  }

  .material-page .page-hero {
    overflow: hidden;
  }

  .material-page .filter-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .material-page .filter-bar input,
  .material-page .filter-bar select,
  .material-page .filter-bar button {
    width: 100%;
    min-width: 0;
  }

  .material-page .material-toc,
  .material-page .resource-grid,
  .material-page .resource-grid--languages,
  .material-page .resource-grid--formats,
  .material-page .campaign-grid,
  .material-page .legal-list--full,
  .material-page .signature-detail-grid,
  .material-page .signature-compact-card,
  .material-page .signature-compact-card__steps,
  .material-page .signature-compact-card__actions {
    grid-template-columns: 1fr !important;
  }

  .material-page .resource-section {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 24px;
  }

  .material-page .resource-card,
  .material-page .campaign-card,
  .material-page .legal-item--full {
    padding: 18px;
    border-radius: 22px;
  }

  .material-page .resource-card .btn,
  .material-page .campaign-card .btn,
  .material-page .legal-item--full .btn,
  .material-page .signature-compact-card .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .material-page .resource-section__head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .material-page .section-number {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 420px) {
  .material-page .container {
    width: min(100% - 18px, var(--container));
  }

  .material-page .resource-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .material-page .resource-card,
  .material-page .campaign-card,
  .material-page .legal-item--full {
    padding: 16px;
  }
}


/* Footer móvil: mostrar solo bloque institucional principal */
@media (max-width: 640px) {
  .site-footer {
    border-top: 0;
  }

  .site-footer::before {
    display: none;
  }

  .footer__wrap {
    display: block;
    padding: 30px 18px 34px;
  }

  .footer-brand {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
  }

  .footer-brand__logo {
    width: 88px;
    height: 88px;
    margin: 0 auto;
  }

  .footer-brand__copy {
    max-width: 360px;
    margin: 0 auto;
  }

  .footer-brand__copy strong {
    font-size: 1.35rem;
    margin-bottom: 10px;
  }

  .footer-brand__copy p {
    margin: 0 0 12px;
    color: rgba(255,255,255,.92);
    font-size: 1rem;
    line-height: 1.55;
  }

  .footer-brand__copy span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: .98rem;
    line-height: 1.5;
  }

  .footer-links,
  .footer-bottom {
    display: none !important;
  }
}


/* Firma Electrónica en página de inicio */
.home-signature-section .container {
  max-width: 1180px;
}

.home-signature-section .section-title {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 28px;
}

.home-signature-section .signature-compact-card {
  margin-top: 0;
}

@media (max-width: 760px) {
  .home-signature-section .section-title {
    text-align: left;
  }
}


/* Marco legal: tipografía más compacta */
.material-page #marco-legal .legal-item--full h3,
.material-page #marco .legal-item--full h3,
.material-page .legal-list--full .legal-item--full h3 {
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.material-page #marco-legal .legal-item--full p,
.material-page #marco .legal-item--full p,
.material-page .legal-list--full .legal-item--full p {
  font-size: .92rem;
  line-height: 1.45;
}

.material-page #marco-legal .legal-item--full,
.material-page #marco .legal-item--full,
.material-page .legal-list--full .legal-item--full {
  padding: 18px 20px;
}

@media (max-width: 760px) {
  .material-page #marco-legal .legal-item--full h3,
  .material-page #marco .legal-item--full h3,
  .material-page .legal-list--full .legal-item--full h3 {
    font-size: .95rem;
  }

  .material-page #marco-legal .legal-item--full,
  .material-page #marco .legal-item--full,
  .material-page .legal-list--full .legal-item--full {
    padding: 15px;
  }
}


/* Marco legal: versión más compacta solicitada */
.material-page #marco,
.material-page #marco-legal {
  padding-top: 28px;
  padding-bottom: 28px;
}

.material-page #marco .resource-section__head,
.material-page #marco-legal .resource-section__head {
  margin-bottom: 22px;
  gap: 14px;
}

.material-page #marco .resource-section__head h2,
.material-page #marco-legal .resource-section__head h2 {
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin-bottom: 8px;
}

.material-page #marco .resource-section__head p,
.material-page #marco-legal .resource-section__head p {
  font-size: .9rem;
  line-height: 1.35;
}

.material-page #marco .legal-list--full,
.material-page #marco-legal .legal-list--full {
  gap: 12px;
}

.material-page #marco .legal-item--full,
.material-page #marco-legal .legal-item--full,
.material-page .legal-list--full .legal-item--full {
  padding: 13px 18px;
  border-radius: 18px;
  min-height: auto;
  gap: 14px;
}

.material-page #marco .legal-item--full h3,
.material-page #marco-legal .legal-item--full h3,
.material-page .legal-list--full .legal-item--full h3 {
  font-size: clamp(.78rem, .9vw, .9rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin-bottom: 0;
}

.material-page #marco .legal-item--full .card-link,
.material-page #marco-legal .legal-item--full .card-link,
.material-page .legal-list--full .legal-item--full .card-link {
  font-size: .8rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .material-page #marco,
  .material-page #marco-legal {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .material-page #marco .resource-section__head h2,
  .material-page #marco-legal .resource-section__head h2 {
    font-size: 1.65rem;
  }

  .material-page #marco .legal-item--full,
  .material-page #marco-legal .legal-item--full,
  .material-page .legal-list--full .legal-item--full {
    padding: 12px 14px;
  }

  .material-page #marco .legal-item--full h3,
  .material-page #marco-legal .legal-item--full h3,
  .material-page .legal-list--full .legal-item--full h3 {
    font-size: .82rem;
    line-height: 1.32;
  }
}


/* Material de apoyo: índice de secciones al 100% */
.material-page .material-toc {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.material-page .material-toc a {
  width: 100%;
  min-width: 0;
  height: 100%;
}

@media (max-width: 1100px) {
  .material-page .material-toc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .material-page .material-toc {
    grid-template-columns: 1fr !important;
  }
}


/* Capacitación: acceso, registro y videos */
.page-hero--training {
  background:
    radial-gradient(circle at 84% 12%, rgba(0,152,135,.14), transparent 28%),
    linear-gradient(135deg, #fff, #f8f4ef 64%, rgba(211,194,180,.45));
}

.training-form-layout {
  display: grid;
  place-items: center;
}

.training-form-layout--wide {
  place-items: stretch;
}

.training-form-card {
  width: min(100%, 760px);
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0,152,135,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}

.training-form-layout--wide .training-form-card {
  width: 100%;
}

.training-form-card form {
  display: grid;
  gap: 16px;
}

.training-form-card label {
  font-weight: 800;
  color: var(--vino-oscuro);
  margin-bottom: 6px;
  display: block;
}

.training-form-card input,
.training-form-card select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 13px;
  font: inherit;
  background: #fff;
}

.training-form-card input:focus,
.training-form-card select:focus {
  outline: 3px solid rgba(0,152,135,.18);
  border-color: var(--turquesa);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-help {
  margin: 16px 0 0;
  color: var(--texto-suave);
}

.alert {
  padding: 13px 15px;
  border-radius: 16px;
  margin-bottom: 18px;
  font-weight: 700;
}

.alert-error {
  background: rgba(174,25,34,.08);
  color: #8f111a;
  border: 1px solid rgba(174,25,34,.18);
}

.alert-warning {
  background: rgba(201,0,102,.08);
  color: var(--magenta-oficial);
  border: 1px solid rgba(201,0,102,.18);
}

.video-training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.video-card {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0,152,135,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}

.video-card video {
  width: 100%;
  border-radius: 18px;
  background: #000;
  margin-top: 14px;
}

.video-card.is-locked {
  opacity: .58;
}

.video-card.is-locked video {
  pointer-events: none;
  filter: grayscale(1);
}

.video-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--turquesa);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 900;
  margin-bottom: 12px;
}

.locked-message {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(201,0,102,.08);
  color: var(--magenta-oficial);
  font-weight: 800;
}

@media (max-width: 860px) {
  .form-grid,
  .video-training-grid {
    grid-template-columns: 1fr;
  }

  .training-form-card {
    padding: 20px;
  }
}


/* Capacitación: formulario dentro de la misma página */
.training-inline-form {
  width: 100%;
  margin-top: 28px;
  scroll-margin-top: 110px;
}

.section-title--left {
  text-align: left;
  margin-bottom: 18px;
}

.training-inline-form .btn {
  justify-self: start;
}

@media (max-width: 760px) {
  .training-inline-form .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Capacitación: formulario oculto hasta hacer clic */
.training-inline-form.is-hidden {
  display: none;
}

.training-inline-form.is-visible {
  display: block;
  animation: trainingFormIn .35s ease both;
}

@keyframes trainingFormIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Finalización de capacitación */
.training-complete-card {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(0,152,135,.13), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8f4ef);
  border: 1px solid rgba(0,152,135,.20);
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
  scroll-margin-top: 110px;
}

.training-complete-card.is-hidden {
  display: none;
}

.training-complete-card.is-visible {
  display: block;
  animation: trainingFormIn .35s ease both;
}

.training-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .training-complete-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Botón de constancia enviado por POST */
.constancia-post-form {
  margin: 0;
  display: inline-flex;
}

.constancia-post-form .btn {
  border: 0;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 760px) {
  .constancia-post-form {
    width: 100%;
  }

  .constancia-post-form .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Tabla de Total de Capacitaciones */
.training-total-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 20px 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(0,152,135,.12), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8f4ef);
  border: 1px solid rgba(0,152,135,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}

.training-total-summary span {
  display: block;
  color: var(--texto-suave);
  font-weight: 800;
}

.training-total-summary strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--turquesa);
  line-height: 1;
}

.training-total-table-wrap {
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid rgba(0,152,135,.18);
  background: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.06);
}

.training-total-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.training-total-table th,
.training-total-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-align: left;
  vertical-align: middle;
}

.training-total-table thead th {
  background: rgba(0,152,135,.08);
  color: var(--vino-oscuro);
  font-family: var(--font-title);
  font-size: .95rem;
  text-transform: uppercase;
}

.training-total-table tbody tr:nth-child(odd) {
  background: rgba(0,0,0,.035);
}

.training-total-table tbody tr:hover {
  background: rgba(201,0,102,.06);
}

.training-total-table tfoot th {
  background: var(--negro-oficial);
  color: #fff;
  font-family: var(--font-title);
}

.table-link {
  color: var(--magenta-oficial);
  font-weight: 800;
  white-space: nowrap;
}

.table-link:hover {
  color: var(--rojo-oficial);
}

@media (max-width: 760px) {
  .training-total-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .training-total-summary .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Presentación elegante de Total de Capacitaciones */
.training-dashboard {
  display: grid;
  grid-template-columns: 1.25fr repeat(2, minmax(0, .8fr));
  gap: 18px;
  margin-bottom: 24px;
}

.training-dashboard-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0,152,135,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}

.training-dashboard-card::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -46px;
  width: 130px;
  height: 130px;
  border-radius: 36px;
  background: rgba(211,194,180,.22);
  transform: rotate(25deg);
}

.training-dashboard-card--main {
  background:
    radial-gradient(circle at 92% 10%, rgba(0,152,135,.18), transparent 30%),
    linear-gradient(135deg, #111, #330015);
  color: #fff;
  border-color: rgba(255,255,255,.12);
}

.training-dashboard-card span {
  display: block;
  position: relative;
  z-index: 1;
  font-weight: 900;
  color: var(--magenta-oficial);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
}

.training-dashboard-card--main span {
  color: var(--turquesa);
}

.training-dashboard-card strong {
  display: block;
  position: relative;
  z-index: 1;
  margin: 10px 0 6px;
  font-family: var(--font-title);
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: .95;
  color: var(--vino-oscuro);
}

.training-dashboard-card--main strong {
  color: #fff;
}

.training-dashboard-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--texto-suave);
}

.training-dashboard-card--main p {
  color: rgba(255,255,255,.78);
}

.training-table-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border-radius: 26px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(0,152,135,.16);
  backdrop-filter: blur(10px);
}

.training-table-toolbar h2 {
  margin: 3px 0 0;
}

.training-table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.training-table-actions input {
  min-width: 280px;
  min-height: 44px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  background: #fff;
}

.training-table-actions input:focus {
  outline: 3px solid rgba(0,152,135,.16);
  border-color: var(--turquesa);
}

.training-total-table-wrap--elegant {
  border-radius: 30px;
  overflow: hidden;
}

.training-total-table--elegant {
  min-width: 820px;
}

.training-total-table--elegant thead th {
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(0,152,135,.14), rgba(201,0,102,.06));
  color: var(--vino-oscuro);
}

.training-total-table--elegant td {
  padding: 14px 22px;
}

.dependency-cell {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
}

.dependency-cell span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--turquesa), var(--magenta-oficial));
  color: #fff;
  font-family: var(--font-title);
  font-weight: 900;
}

.dependency-cell strong {
  font-size: .95rem;
  line-height: 1.25;
  color: var(--vino-oscuro);
}

.count-pill {
  min-width: 60px;
  display: inline-flex;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,152,135,.10);
  color: var(--turquesa);
  font-family: var(--font-title);
  font-weight: 900;
}

.table-link--button {
  display: inline-flex;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(201,0,102,.08);
  color: var(--magenta-oficial);
  transition: transform .3s ease, background-color .3s ease;
}

.table-link--button:hover {
  transform: translateY(-2px);
  background: rgba(201,0,102,.14);
}

.training-table-note {
  margin-top: 14px;
  color: var(--texto-suave);
  font-size: .94rem;
}

.training-total-summary--detail p {
  margin: 8px 0 0;
  color: var(--texto-suave);
}

@media (max-width: 980px) {
  .training-dashboard {
    grid-template-columns: 1fr;
  }

  .training-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .training-table-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .training-table-actions input {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .training-dashboard-card {
    padding: 20px;
  }
}


/* Optimización visual para listados grandes */
.training-pagination-info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  color: var(--texto-suave);
  font-weight: 800;
}

.training-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
}

.training-pagination a {
  min-width: 42px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,152,135,.18);
  color: var(--vino-oscuro);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

.training-pagination a:hover,
.training-pagination a.is-active {
  background: linear-gradient(135deg, var(--magenta-oficial), var(--rojo-oficial));
  color: #fff;
}

.training-table-actions button {
  border: 0;
  cursor: pointer;
}

@media (max-width: 760px) {
  .training-pagination-info {
    flex-direction: column;
  }
}


/* Vista compacta de listado de capacitados */
.page-hero--capacitados-compact {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(38px, 5vw, 64px);
}

.page-hero--capacitados-compact h1 {
  max-width: 920px;
  font-size: clamp(2.15rem, 5vw, 4.6rem);
  line-height: .98;
  letter-spacing: -0.055em;
}

.page-hero--capacitados-compact p {
  max-width: 760px;
  font-size: 1rem;
}

.page-hero--capacitados-compact .eyebrow {
  font-size: .78rem;
}

.training-total-summary--detail {
  padding: 16px 20px;
  border-radius: 22px;
  margin-bottom: 16px;
}

.training-total-summary--detail strong {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.training-total-summary--detail span {
  font-size: .85rem;
}

.training-total-summary--detail .btn {
  min-height: 40px;
  padding: 9px 16px;
}

.training-table-toolbar {
  padding: 16px 18px;
  margin-bottom: 12px;
}

.training-table-toolbar h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.training-table-actions input {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .92rem;
}

.training-table-actions .btn {
  min-height: 40px;
  padding: 9px 16px;
}

.training-pagination-info {
  margin: 10px 0;
  font-size: .88rem;
}

.training-total-table-wrap {
  border-radius: 20px;
}

.training-total-table {
  min-width: 620px;
}

.training-total-table th,
.training-total-table td {
  padding: 9px 14px;
  font-size: .86rem;
  line-height: 1.25;
}

.training-total-table thead th {
  font-size: .78rem;
  letter-spacing: .03em;
}

.training-total-table tbody td:first-child {
  font-weight: 700;
  color: var(--vino-oscuro);
}

.training-pagination {
  margin-top: 16px;
}

.training-pagination a {
  min-width: 36px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: .86rem;
}

@media (max-width: 760px) {
  .page-hero--capacitados-compact h1 {
    font-size: clamp(1.9rem, 12vw, 3rem);
  }

  .training-total-table {
    min-width: 520px;
  }

  .training-total-table th,
  .training-total-table td {
    padding: 8px 10px;
    font-size: .82rem;
  }
}


/* Ajuste final: título y nombres más pequeños en Ver Capacitados */
body.page-capacitados-detalle .page-hero--capacitados-compact .capacitados-title,
body.page-capacitados-detalle .page-hero--capacitados-compact h1 {
  font-size: clamp(1.9rem, 3.55vw, 3.25rem) !important;
}

body.page-capacitados-detalle .capacitados-compact-table th,
body.page-capacitados-detalle .capacitados-compact-table td {
  padding: 5px 9px !important;
  font-size: .72rem !important;
  line-height: 1.16 !important;
}


/* Ajuste fino: nombres y filas con un poco más de aire */
body.page-capacitados-detalle .capacitados-compact-table th,
body.page-capacitados-detalle .capacitados-compact-table td {
  padding: 7px 11px !important;
  font-size: .80rem !important;
  line-height: 1.28 !important;
}

body.page-capacitados-detalle .capacitados-compact-table tbody td:first-child {
  font-size: .82rem !important;
  font-weight: 700 !important;
}


/* Tamaño uniforme para títulos principales de páginas */
.page-hero h1,
.material-hero h1,
.training-hero h1,
.resource-hero h1,
.faq-hero h1,
.stats-hero h1,
.links-hero h1,
body.page-capacitados-detalle .page-hero--capacitados-compact h1,
body.page-capacitados-detalle .page-hero--capacitados-compact .capacitados-title {
  max-width: 860px !important;
  font-size: clamp(1.9rem, 3.55vw, 3.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 10px !important;
}

/* Mantiene el banner principal de inicio con su tamaño especial */
.home-hero h1,
.hero h1,
.main-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
}


/* Ajuste fino: títulos principales un poco más grandes */
.page-hero h1,
.material-hero h1,
.training-hero h1,
.resource-hero h1,
.faq-hero h1,
.stats-hero h1,
.links-hero h1,
body.page-capacitados-detalle .page-hero--capacitados-compact h1,
body.page-capacitados-detalle .page-hero--capacitados-compact .capacitados-title {
  font-size: clamp(1.9rem, 3.55vw, 3.25rem) !important;
  line-height: 1.08 !important;
}


/* Ajuste final: títulos principales un poco más grandes */
.page-hero h1,
.material-hero h1,
.training-hero h1,
.resource-hero h1,
.faq-hero h1,
.stats-hero h1,
.links-hero h1,
body.page-capacitados-detalle .page-hero--capacitados-compact h1,
body.page-capacitados-detalle .page-hero--capacitados-compact .capacitados-title {
  font-size: clamp(1.9rem, 3.55vw, 3.25rem) !important;
  line-height: 1.07 !important;
}

/* Tarjetas de resumen de capacitaciones más compactas */
.training-dashboard {
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.training-dashboard-card {
  min-height: 0 !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
}

.training-dashboard-card strong {
  margin: 6px 0 4px !important;
  font-size: clamp(2rem, 4vw, 3.45rem) !important;
}

.training-dashboard-card p {
  font-size: .94rem !important;
  line-height: 1.45 !important;
}

.training-dashboard-card span {
  font-size: .72rem !important;
}

.training-dashboard-card::after {
  width: 105px !important;
  height: 105px !important;
  right: -34px !important;
  bottom: -38px !important;
}

/* CURP siempre visible en mayúsculas */
input[name="curp"],
#curp,
.curp-input {
  text-transform: uppercase !important;
}

/* Corrección móvil Directorio de Enlaces: evitar desbordamientos */
.links-page,
.links-page *,
.directory-page,
.directory-page *,
.enlaces-page,
.enlaces-page * {
  box-sizing: border-box;
}

.links-page,
.directory-page,
.enlaces-page {
  max-width: 100%;
  overflow-x: hidden;
}

.links-grid,
.directory-grid,
.enlaces-grid,
.link-directory-grid,
.directory-list,
.enlaces-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.link-card,
.directory-card,
.enlace-card,
.directory-item,
.link-item,
.enlaces-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.link-card *,
.directory-card *,
.enlace-card *,
.directory-item *,
.link-item *,
.enlaces-item * {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .training-dashboard-card {
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }

  .training-dashboard-card strong {
    font-size: clamp(1.9rem, 10vw, 2.85rem) !important;
  }

  .training-dashboard-card p {
    font-size: .9rem !important;
  }

  .links-grid,
  .directory-grid,
  .enlaces-grid,
  .link-directory-grid,
  .directory-list,
  .enlaces-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .link-card,
  .directory-card,
  .enlace-card,
  .directory-item,
  .link-item,
  .enlaces-item {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .link-card h3,
  .directory-card h3,
  .enlace-card h3,
  .directory-item h3,
  .link-item h3,
  .enlaces-item h3 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
}


/* Reducir espacio entre títulos de páginas internas y contenido */
.page-hero,
.material-hero,
.training-hero,
.resource-hero,
.faq-hero,
.stats-hero,
.links-hero {
  padding-bottom: clamp(34px, 4vw, 56px) !important;
}

.page-hero + .section-pad,
.material-hero + .section-pad,
.training-hero + .section-pad,
.resource-hero + .section-pad,
.faq-hero + .section-pad,
.stats-hero + .section-pad,
.links-hero + .section-pad {
  padding-top: clamp(24px, 3vw, 42px) !important;
}

/* En páginas con tarjetas o filtros inmediatamente después del encabezado */
.page-hero + section,
.material-hero + section,
.training-hero + section,
.resource-hero + section,
.faq-hero + section,
.stats-hero + section,
.links-hero + section {
  margin-top: 0 !important;
}

/* Mantener el inicio con su respiración visual */
.home-hero,
.hero,
.main-hero {
  padding-bottom: initial;
}

@media (max-width: 760px) {
  .page-hero,
  .material-hero,
  .training-hero,
  .resource-hero,
  .faq-hero,
  .stats-hero,
  .links-hero {
    padding-bottom: 28px !important;
  }

  .page-hero + .section-pad,
  .material-hero + .section-pad,
  .training-hero + .section-pad,
  .resource-hero + .section-pad,
  .faq-hero + .section-pad,
  .stats-hero + .section-pad,
  .links-hero + .section-pad {
    padding-top: 20px !important;
  }
}


/* Total de Capacitaciones: mostrar datos inmediatamente al cargar */
.training-dashboard,
.training-table-toolbar,
.training-total-table-wrap,
.training-table-note {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Menú principal: página actual activa */
.nav-menu a.active,
.nav-menu a[aria-current="page"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #009887, #006f66);
  box-shadow: 0 10px 24px rgba(0, 152, 135, .24);
  border-radius: 999px;
}

.nav-menu a.active::after,
.nav-menu a[aria-current="page"]::after {
  width: 70%;
  opacity: 1;
  background: #ffffff;
}

@media (max-width: 900px) {
  .nav-menu a.active,
  .nav-menu a[aria-current="page"] {
    color: #009887 !important;
    background: rgba(0, 152, 135, .10);
    box-shadow: none;
    border-left: 4px solid #009887;
    border-radius: 14px;
  }

  .nav-menu a.active::after,
  .nav-menu a[aria-current="page"]::after {
    display: none;
  }
}

/* Tabla de dependencias / capacitaciones: responsiva en móvil sin cambiar estilo visual */
.training-total-table-wrap,
.stats-table-wrap,
.dependencies-table-wrap,
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Mantiene el estilo original de la tabla; solo agrega ancho mínimo para poder deslizar */
.training-total-table-wrap table,
.stats-table-wrap table,
.dependencies-table-wrap table,
.table-responsive table,
.training-total-table {
  min-width: 720px;
}

.training-total-table-wrap .table-link,
.training-total-table-wrap .table-link--button,
.stats-table-wrap .table-link,
.stats-table-wrap .table-link--button,
.dependencies-table-wrap .table-link,
.dependencies-table-wrap .table-link--button {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .training-total-table-wrap,
  .stats-table-wrap,
  .dependencies-table-wrap,
  .table-responsive {
    display: block;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .training-total-table-wrap table,
  .stats-table-wrap table,
  .dependencies-table-wrap table,
  .table-responsive table,
  .training-total-table {
    min-width: 760px;
  }

  .training-total-table-wrap th,
  .training-total-table-wrap td,
  .stats-table-wrap th,
  .stats-table-wrap td,
  .dependencies-table-wrap th,
  .dependencies-table-wrap td,
  .table-responsive th,
  .table-responsive td {
    white-space: nowrap;
  }

  .training-total-table-wrap td:first-child,
  .stats-table-wrap td:first-child,
  .dependencies-table-wrap td:first-child,
  .table-responsive td:first-child {
    white-space: normal;
    min-width: 260px;
  }

  .training-total-table-wrap .table-link--button,
  .stats-table-wrap .table-link--button,
  .dependencies-table-wrap .table-link--button,
  .table-responsive .table-link--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    white-space: nowrap;
  }
}