@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap");

:root {
  --uv-azul: #005baa;
  --uv-azul-profundo: #003b70;
  --uv-verde: #00a651;
  --uv-tinta: #172534;
  --uv-fondo: #f5f8fa;
  --uv-linea: #d7e1e8;
}

html, body, button, input, select, textarea {
  font-family: Roboto, Arial, sans-serif !important;
}
body { background: var(--uv-fondo); color: var(--uv-tinta); }
.institutional-header, .institutional-footer { display: none !important; }
.hero { background: linear-gradient(145deg, #fff 0%, #f1f7fb 66%, #edf8f1 100%); border-bottom: 1px solid var(--uv-linea); }
.hero:before { content: none !important; display: none !important; }
.hero h1, .detail-heading h1, .glossary-hero h1 { color: var(--uv-azul-profundo); }
.master-search, .results-search, .glossary-search { border: 1px solid #c9d7e1 !important; box-shadow: 0 8px 24px #003b7012 !important; }
.search-button, .download-flyer, .inline-result-cta, .glossary-spotlight > a { background: var(--uv-azul) !important; }
.results-page { background: #fff; min-height: 100vh; padding-top: 28px; }
.results-tabs { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--uv-linea); }
.results-tabs button.active { color: var(--uv-azul); border-bottom-color: var(--uv-verde); }
.result { border-bottom-color: var(--uv-linea); }
.result h2 { color: var(--uv-azul); }
.result:hover h2 { color: var(--uv-verde); }
.resource-detail { max-width: 1380px; }
.detail-heading { border-bottom: 1px solid var(--uv-linea); max-width: none; }
.detail-kicker, .kicker { color: var(--uv-verde) !important; }
.detail-meta span { background: #f3f8fb; border-color: #d3e1ea; }
.flyer-panel > a:first-child { background: white; border-radius: 18px; box-shadow: 0 14px 38px #003b7018; }
.written-entry { border-top-color: var(--uv-verde); box-shadow: 0 10px 30px #003b7010; }
.written-entry h2, .glossary h3 { color: var(--uv-azul-profundo); }
.fold-section, #perfiles.fold-section { background: #fff; }
.section-tint.fold-section { background: #edf4f8; }
.profile-card, .area-card, .resource-grid button { background: #fff; border-color: #d9e3e9; box-shadow: 0 5px 16px #003b7009; }
.glossary-spotlight { border-left-color: var(--uv-verde); }
.lu-floating { border-color: #cad9e3; }
.back-top { bottom: 20px; }
@media (max-width: 620px) {
  .hero:before { line-height: 1.5; }
  .results-page { padding-top: 16px; }
}

/* Navegación integral en una sola pantalla */
body { padding-top: 64px; }
.uv-integrated-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  min-height: 64px;
  padding: 8px clamp(14px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 24px;
  color: #fff;
  background: linear-gradient(100deg, var(--uv-azul-profundo), #075f9e);
  border-bottom: 4px solid var(--uv-verde);
  box-shadow: 0 5px 18px #002c5424;
}
.uv-nav-brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.uv-nav-brand span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--uv-azul-profundo); font-weight: 800; }
.uv-nav-brand b { font-size: 14px; font-weight: 600; }
.uv-nav-scroll { margin-left: auto; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.uv-nav-scroll::-webkit-scrollbar { display: none; }
.uv-nav-scroll button { min-width: max-content; min-height: 38px; padding: 0 14px; border-radius: 20px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.uv-nav-scroll button:hover, .uv-nav-scroll button:focus-visible { background: #ffffff1f; outline: 2px solid #ffffff88; outline-offset: -2px; }
.uv-nav-scroll button.active { background: #fff; color: var(--uv-azul-profundo); }
.fold-section, #perfiles.fold-section, .resource-detail { scroll-margin-top: 84px; }
.uv-overlay-open { overflow: hidden; }
.uv-integrated-overlay {
  position: fixed;
  inset: 64px 0 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f5f8fa;
}
.uv-integrated-overlay[hidden] { display: none; }
.uv-overlay-bar { min-height: 70px; padding: 10px clamp(16px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-bottom: 1px solid var(--uv-linea); box-shadow: 0 3px 12px #003b700c; }
.uv-overlay-bar > div { display: grid; gap: 2px; }
.uv-overlay-bar small { color: var(--uv-verde); letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.uv-overlay-bar strong { color: var(--uv-azul-profundo); font-size: 20px; }
.uv-overlay-bar button { cursor: pointer; min-height: 40px; padding: 0 14px; border: 1px solid #cddae3; border-radius: 22px; color: var(--uv-azul-profundo); background: #fff; font-weight: 600; }
.uv-overlay-bar button:hover { border-color: var(--uv-azul); background: #f1f7fb; }
.uv-overlay-bar button span { margin-left: 5px; font-size: 22px; line-height: 1; }
.uv-overlay-content { min-height: 0; overflow: auto; }
.uv-overlay-content iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.uv-overlay-content figure { min-height: 100%; padding: 28px; display: grid; place-items: start center; }
.uv-overlay-content figure img { width: auto; max-width: min(100%, 900px); max-height: none; border-radius: 16px; background: #fff; box-shadow: 0 16px 42px #003b7026; }
@media (max-width: 820px) {
  body { padding-top: 112px; }
  .uv-integrated-nav { min-height: 112px; padding: 8px 14px; align-items: stretch; flex-direction: column; gap: 6px; }
  .uv-nav-brand { min-height: 38px; }
  .uv-nav-brand span { width: 32px; height: 32px; }
  .uv-nav-scroll { width: 100%; margin-left: 0; padding-bottom: 2px; }
  .uv-nav-scroll button { min-height: 34px; padding: 0 12px; }
  .uv-integrated-overlay { inset: 112px 0 0; }
  .fold-section, #perfiles.fold-section, .resource-detail { scroll-margin-top: 128px; }
}
@media (max-width: 480px) {
  .uv-nav-brand b { font-size: 13px; }
  .uv-overlay-bar { min-height: 62px; }
  .uv-overlay-bar small { display: none; }
  .uv-overlay-bar strong { font-size: 17px; }
  .uv-overlay-bar button { min-height: 36px; padding: 0 11px; font-size: 12px; }
  .uv-overlay-content figure { padding: 14px; }
}

/* Afinación visual inspirada en el lenguaje institucional de ProAcciónUV */
:root {
  --uv-azul-noche: #062a72;
  --uv-azul-brillante: #0068b5;
  --uv-celeste: #e8f3ff;
  --uv-verde-vivo: #00ad4d;
  --uv-verde-oscuro: #00833e;
  --uv-amarillo: #ffc52f;
}
html, body { max-width: 100%; overflow-x: clip; }
body { background: #fff; }
.uv-integrated-nav {
  min-height: 58px;
  padding-block: 5px;
  background: var(--uv-azul-noche);
  border-bottom: 0;
  box-shadow: none;
}
.uv-integrated-nav::before {
  content: "Universidad Veracruzana";
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  padding-left: 7px;
  color: #fff;
  background: #15529a;
  font-size: 8px;
  line-height: 14px;
}
.uv-nav-brand, .uv-nav-scroll { margin-top: 12px; }
.uv-nav-brand span { color: #fff; background: var(--uv-verde-vivo); }
.uv-nav-scroll button { border-radius: 3px; font-size: 11px; font-weight: 500; }
.uv-nav-scroll button.active { color: #fff; background: #ffffff16; box-shadow: inset 0 -3px var(--uv-verde-vivo); }
body { padding-top: 58px; }
.hero {
  isolation: isolate;
  min-height: 390px;
  overflow: hidden;
  display: grid;
  align-content: center;
  background: linear-gradient(112deg, #0758a5 0%, #006d98 39%, #00ad4d 100%);
  border: 0;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -130px;
  top: -220px;
  opacity: .18;
  border: 80px solid #fff;
  border-radius: 48% 52% 43% 57%;
  transform: rotate(28deg);
}
.hero:before { color: #fff; opacity: .95; }
.hero .eyebrow { color: #c5f4d5; }
.hero h1 { color: #fff; text-shadow: 0 2px 10px #003b7044; }
.hero-subtitle { color: #fff !important; opacity: .94; }
.hero .spark { opacity: .55; background: var(--uv-amarillo); }
.search-shell .master-search { border: 0 !important; box-shadow: 0 12px 30px #00275335 !important; }
.search-button { background: var(--uv-azul-noche) !important; }
.examples, .examples button { color: #fff !important; }
.examples button { text-decoration: underline; text-underline-offset: 4px; }
.fold-section, #perfiles.fold-section { border-top: 0; padding-block: 50px; }
#perfiles.fold-section { position: relative; padding-top: 54px; }
#perfiles.fold-section::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 calc(50% - 50vw);
  z-index: -1;
  width: 100vw;
  background: #fff;
}
.fold-trigger small { color: var(--uv-verde-oscuro); }
.fold-trigger b { color: var(--uv-azul-noche); }
.profile-grid { gap: 22px; }
.profile-card {
  overflow: hidden;
  min-height: 235px;
  border: 0;
  border-radius: 24px 24px 10px 10px;
  box-shadow: 0 12px 26px #003b7014;
}
.profile-card::before {
  content: "";
  position: absolute;
  width: 115px;
  height: 70px;
  right: -28px;
  top: 18px;
  border-radius: 50%;
  background: linear-gradient(110deg, var(--uv-verde-vivo), var(--uv-azul-brillante));
  opacity: .14;
}
.profile-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px #003b7021; }
.profile-card b { color: var(--uv-azul-noche); }
.section-tint.fold-section {
  position: relative;
  background: linear-gradient(105deg, #eaf4ff, #f4f9ff);
}
.section-tint.fold-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background: radial-gradient(circle at 90% 15%, #00ad4d 0 85px, transparent 86px), radial-gradient(circle at 8% 90%, #0068b5 0 110px, transparent 111px);
}
.area-card, .resource-grid button {
  border: 0;
  border-top: 5px solid var(--uv-verde-vivo);
  border-radius: 18px;
  box-shadow: 0 9px 24px #003b7012;
  transition: transform .2s, box-shadow .2s;
}
.area-card:hover, .resource-grid button:hover { transform: translateY(-4px); box-shadow: 0 15px 30px #003b701e; }
#recursos { position: relative; padding-block: 54px; }
#recursos::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 calc(50% - 50vw);
  z-index: -1;
  width: 100vw;
  background: #fff;
}
.glossary-spotlight {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(110deg, var(--uv-azul-noche), var(--uv-azul-brillante));
  box-shadow: 0 15px 34px #003b7021;
}
.glossary-spotlight::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -100px;
  border: 45px solid #00ad4d;
  border-radius: 50%;
  opacity: .35;
}
.glossary-spotlight h2, .glossary-spotlight div > p:last-child, .glossary-spotlight .kicker { color: #fff !important; }
.glossary-spotlight > a { z-index: 1; color: var(--uv-azul-noche); background: var(--uv-amarillo) !important; }
.topics { padding-block: 54px 70px; }
.topics h2 { color: var(--uv-azul-noche); }
.topics button { border-color: #cbdcea; color: var(--uv-azul-noche); }
.topics button:hover { color: #fff; background: var(--uv-azul-brillante); border-color: var(--uv-azul-brillante); }
.results-page { background: linear-gradient(#f6faff 0 180px, #fff 180px); }
.results-search-wrap { padding-top: 26px; padding-bottom: 24px; }
.results-tabs { box-shadow: 0 5px 16px #003b7008; }
.results-tabs button.active { color: var(--uv-azul-noche); border-bottom-color: var(--uv-verde-vivo); }
.result h2 { color: #0756aa; }
.result:hover h2 { color: var(--uv-verde-oscuro); }
.resource-detail { padding-top: 44px; }
.detail-heading h1 { color: var(--uv-azul-noche); }
.detail-kicker { color: var(--uv-verde-oscuro) !important; }
.written-entry { border-top: 6px solid var(--uv-verde-vivo); border-radius: 22px; }
.download-flyer { background: var(--uv-azul-noche) !important; }
.uv-integrated-overlay { inset: 58px 0 0; }
.uv-overlay-bar { border-bottom: 4px solid var(--uv-verde-vivo); }
.uv-overlay-content { background: #eef5fb; }
@media (max-width: 820px) {
  body { padding-top: 102px; }
  .uv-integrated-nav { min-height: 102px; }
  .uv-integrated-nav::before { height: 12px; line-height: 12px; }
  .uv-nav-brand, .uv-nav-scroll { margin-top: 8px; }
  .uv-integrated-overlay { inset: 102px 0 0; }
  .hero { min-height: 410px; padding-top: 54px; }
  .profile-card { min-height: 205px; }
}
@media (max-width: 620px) {
  .hero { min-height: 430px; padding-inline: 18px; }
  .hero h1 { font-size: 38px; }
  .fold-section, #perfiles.fold-section, #recursos { padding-block: 34px; }
  .glossary-spotlight { border-radius: 18px; }
}

/* Encabezado superior retirado a solicitud del usuario */
.uv-integrated-nav { display: none !important; }
body { padding-top: 0 !important; }
.uv-integrated-overlay { inset: 0 !important; }

/* Buscador: sugerencias completas por encima del contenido */
.hero { overflow: visible; z-index: 20; }
.search-shell { z-index: 80; }
.search-suggestions {
  z-index: 120 !important;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #aeb8c2 !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 16px 38px #17324d2b, 0 2px 7px #17324d14 !important;
}
.search-suggestions button + button { border-top: 1px solid #e5e9ed; }
.search-suggestions button { border-radius: 8px; }
.search-suggestions button:hover,
.search-suggestions button:focus-visible { background: #edf4fa; }

/* Glosario SAF a todo el ancho de la ventana */
.glossary-spotlight.container {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(34px, calc((100vw - 1180px) / 2));
  padding-right: max(34px, calc((100vw - 1180px) / 2));
  border-radius: 0;
}
@media (max-width: 620px) {
  .glossary-spotlight.container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Tarjetas de perfiles restauradas al diseño original */
.profile-grid { gap: 16px; }
.profile-card {
  overflow: visible;
  min-height: 215px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: 16px;
  box-shadow: none;
  transform: none;
}
.profile-card::before { display: none; }
.profile-card:hover { transform: none; box-shadow: none; }

/* Resultados y detalles insertados dentro de la portada */
.uv-inline-results { position: relative; z-index: 10; scroll-margin-top: 20px; padding: 42px 0 82px; background: #fff; border-top: 8px solid var(--uv-verde-vivo); }
.uv-inline-results[hidden] { display: none; }
.uv-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--uv-linea); }
.uv-inline-head small, .uv-inline-title > small, .uv-inline-written > small { color: var(--uv-verde-oscuro); letter-spacing: .11em; font-weight: 800; }
.uv-inline-head h2 { color: var(--uv-azul-noche); margin: 6px 0; font-size: clamp(26px, 4vw, 40px); }
.uv-inline-head p { color: #61707d; margin: 0; }
.uv-inline-head > button { cursor: pointer; min-height: 42px; padding: 0 15px; border: 1px solid #c8d5df; border-radius: 22px; color: var(--uv-azul-noche); background: #fff; font-weight: 700; }
.uv-inline-head > button:hover { background: #edf5fb; border-color: var(--uv-azul-brillante); }
.uv-inline-head > button span { margin-left: 5px; font-size: 20px; }
.uv-inline-list { max-width: 920px; }
.uv-inline-result { padding: 28px 0; border-bottom: 1px solid #d7e1e8; }
.uv-inline-result > small { color: #627180; }
.uv-inline-result > button { display: block; cursor: pointer; text-align: left; background: none; }
.uv-inline-result h3 { margin: 8px 0 10px; color: #0756aa; font-size: 22px; }
.uv-inline-result > button:hover h3 { color: var(--uv-verde-oscuro); text-decoration: underline; }
.uv-inline-result > p { margin: 0 0 13px; color: #263746; line-height: 1.55; }
.uv-inline-result > div { display: flex; flex-wrap: wrap; gap: 8px; color: #667582; font-size: 12px; }
.uv-inline-result i { font-style: normal; }
.uv-inline-empty { padding: 70px 20px; text-align: center; }
.uv-inline-detail { padding-top: 4px; }
.uv-inline-back { cursor: pointer; margin-bottom: 28px; color: #0756aa; background: none; font-weight: 700; }
.uv-inline-title { padding-bottom: 30px; }
.uv-inline-title h2 { margin: 8px 0 12px; color: var(--uv-azul-noche); font-size: clamp(30px, 5vw, 50px); line-height: 1.08; }
.uv-inline-title > p { max-width: 900px; color: #5d6973; font-size: 17px; line-height: 1.55; }
.uv-inline-title > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.uv-inline-title span { padding: 7px 11px; border: 1px solid #d4e0e8; border-radius: 18px; background: #f5f9fc; font-size: 12px; }
.uv-inline-detail-grid { display: grid; grid-template-columns: minmax(280px, 430px) minmax(0, 1fr); gap: 42px; align-items: start; }
.uv-inline-detail-grid.without-image { grid-template-columns: 1fr; }
.uv-inline-detail-grid aside button { overflow: hidden; cursor: zoom-in; border: 1px solid #dbe3e8; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px #003b7017; }
.uv-inline-detail-grid aside img { width: 100%; }
.uv-inline-detail-grid aside > a { display: flex; justify-content: center; align-items: center; min-height: 46px; margin-top: 13px; border-radius: 10px; color: #fff; background: var(--uv-azul-noche); font-weight: 700; text-decoration: none; }
.uv-inline-written { padding: 31px; border-top: 6px solid var(--uv-verde-vivo); border-radius: 20px; background: #fff; box-shadow: 0 10px 30px #003b7012; }
.uv-inline-written > h3 { margin: 8px 0; color: var(--uv-azul-noche); font-size: 29px; }
.uv-inline-written > p { margin: 0 0 24px; color: #63707b; }
.uv-inline-written > div { border-top: 1px solid #dce4e9; }
.uv-inline-written > div > section { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 23px 0; border-bottom: 1px solid #dce4e9; }
.uv-inline-written h4 { color: #0756aa; font-size: 16px; }
.uv-inline-written em { color: #2c343b; font-family: Georgia, serif; }
.uv-inline-written section p { margin: 9px 0 0; line-height: 1.55; }
@media (max-width: 800px) {
  .uv-inline-detail-grid { grid-template-columns: 1fr; }
  .uv-inline-detail-grid aside { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .profile-card { min-height: 190px; }
  .uv-inline-results { padding: 30px 0 58px; }
  .uv-inline-head { align-items: flex-start; }
  .uv-inline-head > button { flex: none; }
  .uv-inline-written { padding: 24px 20px; }
  .uv-inline-written > div > section { grid-template-columns: 1fr; gap: 7px; }
}

/* Banner principal permanente: queda fuera del árbol React para conservarse en búsquedas y cambios de vista */
.uv-main-banner {
  position: relative;
  z-index: 25;
  width: 100%;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.uv-main-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}



/* Guías DGRH: tarjetas de acceso directo */
.uv-guide-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 18px 0;
  padding: 20px 22px;
  border: 1px solid #d6e1e8;
  border-left: 6px solid var(--uv-verde-vivo);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px #003b7010;
}
.uv-guide-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f9f7;
}
.uv-guide-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.uv-guide-card h3 {
  margin: 0;
  color: var(--uv-azul-noche);
  font-size: 20px;
  line-height: 1.3;
}
.uv-guide-card-action {
  display: inline-flex;
  min-width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 10px;
  color: #fff;
  background: var(--uv-verde-vivo);
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.uv-guide-card-action:hover {
  transform: translateY(-1px);
  filter: brightness(.91);
  box-shadow: 0 8px 18px #008a4b2b;
}
.uv-guide-card-action.is-disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: grayscale(.25);
}
@media (max-width: 700px) {
  .uv-guide-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    padding: 17px;
  }
  .uv-guide-card-icon { width: 72px; height: 72px; }
  .uv-guide-card h3 { font-size: 17px; }
  .uv-guide-card-action { grid-column: 1 / -1; width: 100%; }
}

/* =========================================================
   LU TE ORIENTA · Asistente guiado del repositorio
   ========================================================= */
html.lu-guide-lock, html.lu-guide-lock body { overflow: hidden !important; }
.lu-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 27, 54, .66);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .22s ease;
}
.lu-guide-overlay[hidden] { display: none !important; }
.lu-guide-overlay.is-open { opacity: 1; }
.lu-guide-modal {
  width: min(1180px, 96vw);
  height: min(780px, 92vh);
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 33, 66, .35);
  transform: translateY(16px) scale(.985);
  transition: transform .25s ease;
}
.lu-guide-overlay.is-open .lu-guide-modal { transform: translateY(0) scale(1); }
.lu-guide-mascot {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 34px 34px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,193,7,.28) 0 5px, transparent 6px),
    radial-gradient(circle at 83% 20%, rgba(255,255,255,.22) 0 4px, transparent 5px),
    linear-gradient(145deg, #003b70 0%, #0756aa 55%, #006b3f 118%);
}
.lu-guide-mascot::before,
.lu-guide-mascot::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.lu-guide-mascot::before { width: 260px; height: 260px; right: -120px; top: -80px; }
.lu-guide-mascot::after { width: 210px; height: 210px; left: -120px; bottom: -70px; }
.lu-mascot-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 350px);
  height: 360px;
  margin: 0 auto 12px;
}
.lu-mascot-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.96) translateY(8px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.16));
}
.lu-mascot-stage img.is-active { opacity: 1; transform: scale(1) translateY(0); }
.lu-mascot-copy { position: relative; z-index: 2; text-align: center; }
.lu-mascot-copy > span {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #b9f5d0;
}
.lu-mascot-copy h2 { margin: 0 auto 10px; max-width: 320px; font-size: 26px; line-height: 1.14; color: #fff; }
.lu-mascot-copy p { margin: 0 auto; max-width: 330px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
.lu-mascot-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.lu-mascot-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: width .3s ease, background .3s ease; }
.lu-mascot-dots i.is-active { width: 22px; border-radius: 6px; background: #fff; }
.lu-guide-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 34px 30px;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}
.lu-guide-close {
  position: absolute;
  z-index: 3;
  right: 24px;
  top: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid #d7e1e8;
  border-radius: 50%;
  background: #fff;
  color: #003b70;
  font-size: 29px;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(0,59,112,.08);
}
.lu-guide-close:hover { background: #eef5fb; }
.lu-guide-progress { flex: 0 0 auto; display: flex; align-items: center; gap: 15px; min-height: 38px; padding-right: 58px; color: #607180; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.lu-guide-progress > div { display: flex; gap: 6px; }
.lu-guide-progress i { display: block; width: 28px; height: 5px; border-radius: 4px; background: #dbe5ec; transition: background .3s ease, width .3s ease; }
.lu-guide-progress i.is-active { background: #00a859; }
.lu-guide-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lu-step, .lu-results { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.lu-step.from-right, .lu-results.from-right { animation: luSlideInRight .38s cubic-bezier(.2,.75,.2,1) both; }
.lu-step.from-left { animation: luSlideInLeft .34s cubic-bezier(.2,.75,.2,1) both; }
.lu-step.slide-out-left, .lu-results.slide-out-left { animation: luSlideOutLeft .23s ease both; }
.lu-step.slide-out-right, .lu-results.slide-out-right { animation: luSlideOutRight .23s ease both; }
@keyframes luSlideInRight { from { opacity: 0; transform: translateX(52px); } to { opacity: 1; transform: translateX(0); } }
@keyframes luSlideOutLeft { to { opacity: 0; transform: translateX(-52px); } }
@keyframes luSlideInLeft { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes luSlideOutRight { to { opacity: 0; transform: translateX(42px); } }
.lu-step-heading { flex: 0 0 auto; padding: 30px 2px 18px; }
.lu-step-heading > span, .lu-results-head > span { color: #008b4a; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.lu-step-heading h1, .lu-results-head h1 { margin: 8px 0 8px; color: #003b70; font-size: clamp(27px, 3vw, 39px); line-height: 1.1; }
.lu-step-heading p, .lu-results-head p { max-width: 720px; margin: 0; color: #627180; font-size: 15px; line-height: 1.5; }
.lu-option-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  padding: 7px 3px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.lu-option {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  cursor: pointer;
  text-align: left;
  border: 1px solid #d7e2e9;
  border-radius: 15px;
  background: #fff;
  color: #17324d;
  box-shadow: 0 3px 12px rgba(0,59,112,.045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lu-option:hover { transform: translateY(-2px); border-color: #7eb7dd; box-shadow: 0 10px 22px rgba(0,59,112,.10); }
.lu-option.is-selected { border-color: #00a859; background: #f1fbf6; box-shadow: inset 0 0 0 1px #00a859, 0 8px 20px rgba(0,168,89,.10); }
.lu-option-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eef5fb; color: #0756aa; font-size: 23px; font-weight: 900; }
.lu-option.is-selected .lu-option-symbol { background: #dff6e9; color: #008b4a; }
.lu-option-text { font-size: 14px; font-weight: 800; line-height: 1.3; }
.lu-check { width: 23px; height: 23px; display: grid; place-items: center; border: 2px solid #b8c6d0; border-radius: 6px; background: #fff; transition: all .18s ease; }
.lu-check i { width: 9px; height: 5px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(-45deg) translateY(-1px); }
.lu-option.is-selected .lu-check { border-color: #00a859; background: #00a859; }
.lu-option.is-selected .lu-check i { border-color: #fff; }
.lu-step-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid #e5ebef; }
.lu-selected-count { color: #6a7985; font-size: 13px; font-weight: 700; }
.lu-step-actions { display: flex; gap: 10px; margin-left: auto; }
.lu-primary, .lu-secondary {
  min-height: 44px;
  padding: 0 20px;
  cursor: pointer;
  border-radius: 11px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.lu-primary { border: 1px solid #00a859; background: #00a859; color: #fff; box-shadow: 0 7px 16px rgba(0,168,89,.18); }
.lu-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,168,89,.24); }
.lu-primary:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
.lu-secondary { border: 1px solid #cbd8e1; background: #fff; color: #003b70; }
.lu-secondary:hover { background: #eef5fb; }
.lu-results-head { flex: 0 0 auto; padding: 24px 2px 13px; }
.lu-results-head h1 { font-size: clamp(25px, 2.5vw, 35px); }
.lu-result-search {
  flex: 0 0 auto;
  min-height: 50px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  padding: 0 14px;
  margin-bottom: 12px;
  border: 1px solid #b9cbd8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,59,112,.06);
}
.lu-result-search > span { color: #0756aa; font-size: 26px; }
.lu-result-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #17324d; font-size: 15px; }
.lu-selection-summary { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.lu-selection-summary > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 9px; border-radius: 8px; background: #eef5fb; color: #526575; font-size: 11px; }
.lu-selection-summary b { color: #003b70; }
.lu-results-toolbar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 3px 1px 10px; }
.lu-results-toolbar strong { color: #17324d; font-size: 13px; }
.lu-results-toolbar button { cursor: pointer; border: 0; background: transparent; color: #0756aa; font-size: 12px; font-weight: 900; text-decoration: underline; }
.lu-result-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 24px 1px; scrollbar-width: thin; }
.lu-result-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #d9e3ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,59,112,.055);
  animation: luCardIn .34s ease both;
  animation-delay: var(--delay, 0ms);
}
@keyframes luCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.lu-result-thumb { width: 82px; height: 82px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #f2f7fa; color: #0756aa; font-size: 28px; }
.lu-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lu-result-copy { min-width: 0; }
.lu-result-copy > small { display: block; margin-bottom: 4px; color: #008b4a; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.lu-result-copy h3 { margin: 0 0 6px; color: #003b70; font-size: 17px; line-height: 1.28; }
.lu-result-copy > p { margin: 0 0 8px; color: #60717f; font-size: 13px; line-height: 1.45; }
.lu-result-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.lu-result-meta span { padding: 4px 7px; border-radius: 7px; background: #f1f5f8; color: #647481; font-size: 10px; }
.lu-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lu-result-actions a, .lu-result-actions button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; cursor: pointer; border: 1px solid #00a859; border-radius: 8px; background: #00a859; color: #fff; font-size: 11px; font-weight: 900; text-decoration: none; }
.lu-result-actions button { border-color: #bdd0dc; background: #fff; color: #0756aa; }
.lu-result-details { grid-column: 1 / -1; margin-top: 12px; padding: 14px; border-radius: 12px; background: #f7fafc; }
.lu-result-details section + section { margin-top: 11px; padding-top: 11px; border-top: 1px solid #dde6ec; }
.lu-result-details h4 { margin: 0 0 3px; color: #003b70; font-size: 13px; }
.lu-result-details em { display: block; color: #008b4a; font-size: 12px; font-weight: 700; }
.lu-result-details p { margin: 5px 0 0; color: #5e6d78; font-size: 12px; line-height: 1.45; }
.lu-no-results { padding: 50px 20px; text-align: center; color: #61717d; }
.lu-no-results > div { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; background: #eef5fb; color: #0756aa; font-size: 29px; }
.lu-no-results h3 { margin: 0 0 7px; color: #003b70; }
.lu-no-results p { margin: 0; font-size: 13px; }
@media (max-width: 900px) {
  .lu-guide-overlay { padding: 12px; }
  .lu-guide-modal { height: min(900px, 96vh); grid-template-columns: 220px minmax(0,1fr); border-radius: 22px; }
  .lu-guide-mascot { padding: 22px 17px; }
  .lu-mascot-stage { height: 260px; }
  .lu-mascot-copy h2 { font-size: 20px; }
  .lu-mascot-copy p { font-size: 12px; }
  .lu-guide-main { padding: 22px 22px 24px; }
}
@media (max-width: 700px) {
  .lu-guide-modal { width: 97vw; height: 96vh; grid-template-columns: 1fr; grid-template-rows: 155px minmax(0,1fr); }
  .lu-guide-mascot { display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px 18px; }
  .lu-mascot-stage { grid-row: 1 / span 2; width: 128px; height: 128px; margin: 0; }
  .lu-mascot-copy { text-align: left; }
  .lu-mascot-copy > span { margin-bottom: 3px; }
  .lu-mascot-copy h2 { margin: 0 0 5px; font-size: 17px; }
  .lu-mascot-copy p { font-size: 11px; line-height: 1.35; }
  .lu-mascot-dots { grid-column: 2; justify-content: flex-start; margin: 0; }
  .lu-guide-main { padding: 17px 16px 18px; }
  .lu-guide-close { top: 11px; right: 11px; width: 38px; height: 38px; }
  .lu-guide-progress { min-height: 31px; padding-right: 42px; }
  .lu-step-heading { padding: 17px 0 12px; }
  .lu-step-heading h1, .lu-results-head h1 { font-size: 25px; }
  .lu-option-grid { grid-template-columns: 1fr; }
  .lu-option { min-height: 68px; grid-template-columns: 36px minmax(0,1fr) 24px; padding: 12px; }
  .lu-option-symbol { width: 36px; height: 36px; }
  .lu-step-footer { align-items: stretch; flex-direction: column; gap: 8px; }
  .lu-step-actions { width: 100%; margin-left: 0; }
  .lu-step-actions button { flex: 1; }
  .lu-selected-count { text-align: center; }
  .lu-results-head { padding-top: 14px; }
  .lu-result-card { grid-template-columns: 62px minmax(0,1fr); gap: 11px; padding: 12px; }
  .lu-result-thumb { width: 62px; height: 62px; }
  .lu-result-copy h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .lu-guide-overlay, .lu-guide-modal, .lu-mascot-stage img, .lu-step, .lu-results, .lu-result-card { animation: none !important; transition: none !important; }
}


/* Hero/buscador más compacto — 2026-10-07 */
.hero {
  min-height: 0 !important;
  padding: 52px 24px 38px !important;
}
.hero .eyebrow { display: none !important; }
.hero h1 { margin-top: 0 !important; margin-bottom: 8px !important; }
.hero-subtitle { margin-bottom: 24px !important; }
.examples { margin-top: 12px !important; }
@media (max-width: 620px) {
  .hero { padding: 38px 18px 30px !important; }
  .hero-subtitle { margin-bottom: 20px !important; }
}

/* =========================================================
   TUTORIALES EN VIDEO · tarjetas y reproductor ampliado
   ========================================================= */
html.uv-video-lock, html.uv-video-lock body { overflow: hidden !important; }
.uv-video-card {
  display: grid;
  grid-template-columns: minmax(250px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 20px 0;
  padding: 18px;
  border: 1px solid #d6e1e8;
  border-left: 6px solid var(--uv-verde);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 26px #003b7010;
}
.uv-video-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  background: #0d1e2e;
  box-shadow: inset 0 0 0 1px #ffffff16;
}
.uv-video-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  background: #0d1e2e;
}
.uv-video-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 25, 48, .56));
  transition: background .2s ease;
}
.uv-video-preview:hover::after { background: linear-gradient(180deg, rgba(0, 59, 112, .08), rgba(0, 25, 48, .64)); }
.uv-video-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: var(--uv-verde);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-size: 24px;
  transition: transform .2s ease, background .2s ease;
}
.uv-video-preview:hover .uv-video-play { transform: translate(-50%, -50%) scale(1.08); background: #008e46; }
.uv-video-expand {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.uv-video-card-copy small { color: #008b4a; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.uv-video-card-copy h3 { margin: 7px 0 8px; color: var(--uv-azul-profundo); font-size: 22px; line-height: 1.25; }
.uv-video-card-copy p { margin: 0 0 15px; color: #60717f; font-size: 14px; line-height: 1.5; }
.uv-video-card-action {
  min-height: 42px;
  padding: 0 18px;
  cursor: pointer;
  border: 1px solid var(--uv-verde);
  border-radius: 10px;
  background: var(--uv-verde);
  color: #fff;
  font-weight: 900;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.uv-video-card-action:hover { transform: translateY(-1px); filter: brightness(.92); box-shadow: 0 8px 18px #008a4b2b; }
.uv-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 22, 43, .78);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .18s ease;
}
.uv-video-overlay[hidden] { display: none !important; }
.uv-video-overlay.is-open { opacity: 1; }
.uv-video-modal {
  position: relative;
  width: min(1120px, 96vw);
  max-height: 94vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-top: 6px solid var(--uv-verde);
  border-radius: 22px;
  background: #f8fbfd;
  box-shadow: 0 28px 90px rgba(0, 16, 35, .42);
  transform: translateY(12px) scale(.985);
  transition: transform .2s ease;
}
.uv-video-overlay.is-open .uv-video-modal { transform: translateY(0) scale(1); }
.uv-video-close {
  position: absolute;
  z-index: 3;
  right: 16px;
  top: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid #cddbe4;
  border-radius: 50%;
  background: #fff;
  color: var(--uv-azul-profundo);
  font-size: 28px;
  line-height: 1;
}
.uv-video-heading { padding: 0 54px 14px 2px; }
.uv-video-heading small { color: #008b4a; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.uv-video-heading h2 { margin: 6px 0 0; color: var(--uv-azul-profundo); font-size: clamp(21px, 3vw, 30px); line-height: 1.2; }
.uv-video-stage { overflow: hidden; border-radius: 15px; background: #000; box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.uv-video-stage video { display: block; width: 100%; max-height: calc(94vh - 130px); aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.lu-result-thumb { position: relative; }
.lu-result-thumb video { width: 100%; height: 100%; object-fit: cover; background: #0d1e2e; }
.lu-video-thumb-play { position: absolute; inset: 50% auto auto 50%; width: 30px; height: 30px; display: grid; place-items: center; padding-left: 2px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--uv-verde); color: #fff; font-size: 11px; font-style: normal; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (max-width: 760px) {
  .uv-video-card { grid-template-columns: 1fr; padding: 14px; gap: 15px; }
  .uv-video-card-copy h3 { font-size: 18px; }
  .uv-video-card-action { width: 100%; }
  .uv-video-overlay { padding: 10px; }
  .uv-video-modal { width: 98vw; padding: 14px; border-radius: 16px; }
  .uv-video-close { right: 10px; top: 9px; width: 38px; height: 38px; }
  .uv-video-heading { padding-right: 44px; }
  .uv-video-stage video { max-height: calc(94vh - 105px); }
}
@media (prefers-reduced-motion: reduce) {
  .uv-video-overlay, .uv-video-modal, .uv-video-play, .uv-video-card-action { transition: none !important; }
}

/* Ocultar tarjeta promocional Glosario SAF en la página principal */
.glossary-spotlight.container {
  display: none !important;
}

/* SAF · Ajuste visual de la portada (03/11/2026)
   Solo se eliminan adornos de fondo; los íconos, las tarjetas y los controles
   interactivos mantienen sus estilos y funciones. */
.hero .spark,
.hero::after,
.section-tint.fold-section::before {
  content: none !important;
  display: none !important;
}

/* Franja verde UV tenue, de borde a borde, para «Lo más consultado». */
.topics.container {
  position: relative;
  isolation: isolate;
}
.topics.container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #edf9f1;
  pointer-events: none;
}