@charset "UTF-8";
/* =====================================================================
   DEI — Departamento de Electrónica e Informática · UC
   theme.css — sistema de diseño "azul institucional" (v2)
   Full-bleed · responsive · paleta derivada del banner real del DEI
   (imagenes/banner.jpg: duotono azul #103A62 → #1E73B4 → #2E9BD6).
   Tipografía Inter (todo sans). Reemplaza default/menu/menu-vertical.css.
   Autosuficiente (reset propio).
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* azul institucional (muestreado del banner) */
  --navy:      #0F3A62;   /* azul profundo: barra de menú, footer, títulos   */
  --navy-2:    #0B2C4C;   /* más profundo: hover de barras                   */
  --azure:     #1E73B4;   /* azul de marca: links, botones, foco             */
  --azure-2:   #185E96;   /* azure hover                                     */
  --cyan:      #2E9BD6;   /* brillo cian del banner: acento, activo, degradé */
  --gold:      #E8B23A;   /* oro UC — micro-acento (eyebrows), muy sutil     */

  --ink:       #18222E;   /* texto de cuerpo                                 */
  --muted:     #5B6B7B;   /* texto secundario                                */
  --white:     #FFFFFF;
  --paper:     #FFFFFF;   /* fondo de contenido                              */
  --panel:     #EFF4FA;   /* panel / fila alterna (azul muy claro)           */
  --panel-2:   #E6EEF7;
  --line:      #E1E8F0;   /* filete frío                                     */
  --line-soft: #EDF1F7;

  /* tipografía */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'UbuntuLight', Arial, sans-serif;

  /* medidas */
  --wrap:    1240px;                     /* ancho de contenido centrado */
  --gutter:  clamp(18px, 4.5vw, 60px);
  --measure: 70ch;                       /* medida de lectura */
  --radius:  8px;
  --radius-sm: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 2px rgba(15,58,98,.06), 0 2px 8px rgba(15,58,98,.05);
  --shadow-md: 0 8px 30px rgba(15,58,98,.12);
  --nav-h: 58px;
}

/* ------------------------------------------------------------------ *
 * 2. RESET / BASE
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; }
iframe { max-width: 100%; }
a { color: var(--azure); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -.011em;
}
p { margin: 0 0 1.15em; }

::selection { background: var(--azure); color: #fff; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, area:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* wrapper reutilizable: centra el contenido de una banda full-bleed */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* eyebrow: mayúsculas con tracking + filete (marcador institucional) */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--azure);
  display: inline-flex; align-items: center; gap: .8em;
  margin: 0 0 1.1em;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ------------------------------------------------------------------ *
 * 3. CONTENEDOR — full width (sin bandas laterales)
 * ------------------------------------------------------------------ */
#contenedor {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--white);
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 4. CABECERA (franja de logos) — full-bleed, contenido centrado
 * ------------------------------------------------------------------ */
#cabecera {
  width: 100%; height: auto; background: #fff;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.logo-strip { position: relative; max-width: 1040px; margin: 0 auto; }
.logo-img { display: block; width: 100%; height: auto; }
.logo-hit {
  position: absolute; display: block;
  transition: opacity .18s var(--ease);
}
.logo-hit:hover { opacity: .55; }
.logo-uc  { left: 4.1%;  top: 15%; width: 15.7%; height: 68%; }
.logo-cyt { left: 83%;   top: 24%; width: 13.5%; height: 52%; }

/* ------------------------------------------------------------------ *
 * 5. MENU — barra azul full-bleed, nav centrado + hamburguesa mobile
 * ------------------------------------------------------------------ */
#menu {
  width: 100%; height: auto;
  background: var(--navy);
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 2px 0 rgba(46,155,214,.5), 0 6px 18px rgba(11,44,76,.18);
}
.moduletable_menu {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter);
  border: 0; height: auto; background: none;
  position: relative;
}

/* botón hamburguesa (oculto en desktop) */
.nav-toggle {
  display: none;
  align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer;
  color: #fff; font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 0; height: var(--nav-h);
}
.nav-toggle-bars { position: relative; width: 22px; height: 2px; background: #fff; display: inline-block; transition: background .2s var(--ease); }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff;
  transition: transform .22s var(--ease), top .22s var(--ease); }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }
#menu.open .nav-toggle-bars { background: transparent; }
#menu.open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
#menu.open .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* lista principal */
ul.menudropdown, ul.menudropdown ul { list-style: none; margin: 0; padding: 0; }
ul.menudropdown {
  position: relative; z-index: 300;
  display: flex; flex-wrap: nowrap; float: none;
}
ul.menudropdown > li { position: relative; float: none; height: auto; border: 0; padding: 0; line-height: normal; }
ul.menudropdown li.parent { position: relative; }

ul.menudropdown > li > a,
ul.menudropdown > li > span,
ul.menudropdown a:link, ul.menudropdown a:visited, ul.menudropdown span {
  display: flex; align-items: center;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 0 16px; height: var(--nav-h);
  position: relative; white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
/* subrayado cian (del banner) que crece en hover / activo */
ul.menudropdown > li > a::after,
ul.menudropdown > li > span::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 10px;
  height: 2.5px; background: var(--cyan); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
ul.menudropdown > li:hover > a,
ul.menudropdown > li:hover > span,
ul.menudropdown > li.hover > a { color: #fff; background: rgba(255,255,255,.06); }
ul.menudropdown > li:hover > a::after,
ul.menudropdown > li:hover > span::after,
ul.menudropdown > li.active > a::after,
ul.menudropdown > li.current > a::after { transform: scaleX(1); opacity: 1; }
ul.menudropdown > li.active > a,
ul.menudropdown > li.current > a { color: #fff; }

/* indicador ▾ en ítems con hijos (desktop) */
ul.menudropdown > li.parent > a::before,
ul.menudropdown > li.parent > span::before {
  content: ""; order: 2; margin-left: 8px;
  width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
}

/* submenús (flotantes) */
ul.menudropdown ul {
  visibility: hidden; opacity: 0;
  position: absolute; top: 100%; left: 0;
  min-width: 250px; width: max-content; max-width: 320px;
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  box-shadow: var(--shadow-md);
  padding: 8px; margin-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(8px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 320;
}
ul.menudropdown li:hover > ul { visibility: visible; opacity: 1; transform: translateY(0); }
ul.menudropdown ul li { position: relative; border: 0; }
ul.menudropdown ul a:link, ul.menudropdown ul a:visited, ul.menudropdown ul span {
  display: flex; align-items: center; height: auto;
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink); padding: 10px 14px; border-radius: var(--radius-sm);
  white-space: normal;
}
ul.menudropdown ul li:hover > a, ul.menudropdown ul li:hover > span { background: var(--panel); color: var(--azure); }
/* submenú de 3er nivel: flyout lateral */
ul.menudropdown ul ul { top: -11px; left: 100%; border-top: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 0 var(--radius) var(--radius) 0; }
ul.menudropdown ul li.parent > a::after,
ul.menudropdown ul li.parent > span::after {
  content: ""; margin-left: auto; padding-left: 12px;
  width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); flex: none;
}

/* caret de acordeón (solo mobile; oculto en desktop) */
.nav-caret { display: none; }

/* ------------------------------------------------------------------ *
 * 6. HERO (banner) — duotono azul del banner sobre foto del campus
 * ------------------------------------------------------------------ */
#banner {
  width: 100%; height: auto;
  position: relative; overflow: hidden;
  background-color: var(--azure);
  background-image: url(../bgCyt1.jpg);
  background-size: cover; background-position: center 42%;
  background-blend-mode: multiply;   /* tiñe la foto de azul → duotono como el banner */
  color: #fff;
}
#banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(11,44,76,.90) 0%, rgba(15,58,98,.74) 42%, rgba(46,155,214,.42) 100%);
  pointer-events: none;
}
#banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--cyan));
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: clamp(48px, 8vw, 104px) var(--gutter);
}
.hero-inner .eyebrow { color: #EAF4FB; }
.hero-inner .eyebrow::before { background: var(--gold); }
.hero-title {
  font-family: var(--sans);
  color: #fff; margin: 0 0 .35em;
  font-size: clamp(29px, 5vw, 58px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.06;
  max-width: 18ch;
  overflow-wrap: break-word; word-wrap: break-word; hyphens: auto;
  text-shadow: 0 2px 24px rgba(6,24,42,.35);
}
.hero-sub {
  font-family: var(--sans);
  color: #DCEBF6; margin: 0;
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6;
  max-width: 52ch; overflow-wrap: break-word;
}
/* si la posición banner tiene módulo real en vez del hero */
#banner .moduletable, #banner .custom, #banner .banneritem {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--gutter); color: #fff;
}
#banner .moduletable h3 { color: #fff; font-size: clamp(24px, 3.4vw, 38px); }
#banner img { display: block; width: 100%; height: auto; }
#banner a { color: #EAF4FB; }

/* ------------------------------------------------------------------ *
 * 7. CUERPO — layout centrado con aire
 * ------------------------------------------------------------------ */
#cuerpo {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(30px, 4.5vw, 60px) var(--gutter);
  background: var(--paper);
}
#col-izq { flex: 0 0 clamp(196px, 20vw, 250px); margin: 0; padding: 0; border: 0; background: none; }
#col-der { flex: 0 0 clamp(196px, 20vw, 250px); margin: 0; padding: 0; }
#col-mid {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
#col-mid.no-cols, #col-mid.no-col-izq, #col-mid.no-col-der { width: auto !important; }

/* ------------------------------------------------------------------ *
 * 8. SIDEBAR — nav vertical con filetes finos
 * ------------------------------------------------------------------ */
#col-izq .moduletable, #col-izq .moduletable_menuv, div.moduletable_menuv {
  background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0 0 28px;
}
#col-izq .moduletable h3, #col-izq .moduletable_menuv h3, div.moduletable_menuv h3 {
  font-family: var(--sans);
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azure);
  margin: 0 0 4px; padding: 0 0 12px;
  border-bottom: 2px solid var(--navy);
}
#col-izq .moduletable h3::before, div.moduletable_menuv h3::before { content: none; }

#col-izq ul.menu, ul.menuv-dropdown {
  list-style: none; float: none; width: auto; margin: 0; padding: 0;
  font-family: var(--sans);
}
#col-izq ul.menu li, ul.menuv-dropdown li,
#col-izq ul.menu ul, ul.menuv-dropdown ul {
  float: none; border: 0; width: auto; margin: 0; padding: 0;
  position: static; visibility: visible; background: none;
}
#col-izq ul.menu a:link, #col-izq ul.menu a:visited,
ul.menuv-dropdown a:link, ul.menuv-dropdown a:visited {
  display: block; font-size: 15px; font-weight: 500;
  color: var(--ink); background: none; text-decoration: none;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
  transition: color .15s var(--ease), padding-left .15s var(--ease);
}
#col-izq ul.menu a:hover, ul.menuv-dropdown a:hover { color: var(--azure); padding-left: 8px; }
#col-izq ul.menu li.current > a, #col-izq ul.menu li.active > a,
ul.menuv-dropdown li.current > a, ul.menuv-dropdown li.active > a {
  color: var(--navy); font-weight: 700;
}
#col-izq ul.menu li.current > a::before, ul.menuv-dropdown li.current > a::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  background: var(--cyan); vertical-align: middle; margin-right: 10px;
}
#col-izq ul.menu li ul, ul.menuv-dropdown li ul { padding-left: 16px; }
#col-izq ul.menu li ul a, ul.menuv-dropdown li ul a { font-size: 14px; color: var(--muted); padding: 8px 2px; }
#col-izq div.custom, #col-der div.custom { display: block; }

/* ------------------------------------------------------------------ *
 * 9. CONTENIDO (col-mid) — flujo editorial
 * ------------------------------------------------------------------ */
#col-mid h1, #col-mid .item-title, #col-mid .page-header h1, #col-mid .page-header h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.1; color: var(--navy);
  letter-spacing: -.022em; margin: 0 0 .5em;
}
#col-mid h2 { font-size: clamp(22px, 2.5vw, 29px); margin: 1.9em 0 .55em; }
#col-mid h3 { font-size: clamp(18px, 1.9vw, 21px); margin: 1.7em 0 .5em; }
#col-mid h4 { font-size: 17px; margin: 1.5em 0 .5em; }
#col-mid h5 { font-size: 15px; }
#col-mid h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

#col-mid p { color: var(--ink); font-size: 17px; line-height: 1.78; margin: 0 0 1.25em; max-width: var(--measure); }
#col-mid > .blog-featured > p, #col-mid .item-page > p { max-width: var(--measure); }
#col-mid h1 + p, #col-mid .item-title + p, #col-mid .item-page > p:first-of-type {
  font-size: clamp(18px, 2vw, 21px); line-height: 1.62; color: #36434F; font-weight: 400;
}
#col-mid strong { color: var(--navy); font-weight: 700; }
#col-mid ul, #col-mid ol { color: var(--ink); font-size: 17px; line-height: 1.7; padding-left: 0; margin: 0 0 1.25em; max-width: var(--measure); }
#col-mid li { margin: .5em 0; }
#col-mid ul { list-style: none; }
#col-mid ul > li { position: relative; padding-left: 1.5em; }
#col-mid ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
}
#col-mid ol { padding-left: 1.4em; }
/* excluir uls de navegación/estructura de la viñeta */
#col-mid .breadcrumbs, #col-mid ul.breadcrumb,
#col-mid .pagination ul, #col-mid ul.pagenav, #col-mid ul.actions { padding-left: 0; }
#col-mid .breadcrumbs > li, #col-mid ul.breadcrumb > li,
#col-mid .pagination li, #col-mid ul.pagenav li, #col-mid ul.actions li { padding-left: 0; }
#col-mid .breadcrumbs > li::before, #col-mid ul.breadcrumb > li::before,
#col-mid .pagination li::before, #col-mid ul.pagenav li::before,
#col-mid ul.actions li::before { content: none; display: none; }

/* links de cuerpo */
#col-mid a, #col-mid a:visited { color: var(--azure); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(30,115,180,.4); }
#col-mid a:hover { color: var(--navy); text-decoration-color: var(--navy); }
#col-mid h1 a, #col-mid h2 a, #col-mid h3 a, #col-mid h4 a,
#col-mid h1 a:visited, #col-mid h2 a:visited, #col-mid h3 a:visited { color: inherit; text-decoration: none; }
#col-mid h1 a:hover, #col-mid h2 a:hover, #col-mid h3 a:hover { color: var(--azure); }

/* breadcrumbs */
.breadcrumbs, #col-mid .breadcrumb {
  font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 26px; padding: 0;
  list-style: none; display: flex; flex-wrap: wrap; gap: .6em; align-items: center;
}
.breadcrumbs a, #col-mid .breadcrumb a { color: var(--azure); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

#system-message-container { background: transparent; }

/* pullquote / cita */
.pullquote, #col-mid blockquote {
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45;
  color: var(--navy); font-weight: 600;
  margin: 1.6em 0; padding: .2em 0 .2em 24px;
  border-left: 4px solid var(--cyan); max-width: var(--measure);
}

/* ------------------------------------------------------------------ *
 * 10. TABLAS
 * ------------------------------------------------------------------ */
#col-mid table { border-collapse: collapse; width: 100%; margin: 1.5em 0; text-align: left; font-family: var(--sans); font-size: 15.5px; }
#col-mid th { background: var(--navy); color: #fff; font-weight: 600; border: 0; }
#col-mid tr { background: none; }
#col-mid tbody tr:nth-child(even) { background: var(--panel); }
#col-mid tbody tr { border-bottom: 1px solid var(--line); }
#col-mid th, #col-mid td { border: 0; padding: 12px 14px; }
#col-mid th:first-child { border-radius: var(--radius-sm) 0 0 0; }
#col-mid th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
#col-mid th p, #col-mid td p { font-size: 15px; color: inherit; margin: 0; max-width: none; }
#col-mid th p { color: #fff; }

/* tabla plan de estudios */
.tabla-plan-estudios tr > th:first-child + th + th,
.tabla-plan-estudios tr > td:first-child + td + td { background-color: var(--panel) !important; border: none !important; }
.tabla-plan-estudios tr > th:first-child, .tabla-plan-estudios tr > th:first-child + th + th + th,
.tabla-plan-estudios tr > td:first-child, .tabla-plan-estudios tr > td:first-child + td + td + td { width: 40% !important; }
.tabla-plan-estudios tr > th:first-child + th, .tabla-plan-estudios tr > th:first-child + th + th + th + th,
.tabla-plan-estudios tr > td:first-child + td, .tabla-plan-estudios tr > td:first-child + td + td + td + td { width: 10% !important; text-align: center !important; }
.tabla-plan-estudios > tbody > tr:first-child > th, .tabla-plan-estudios > tr:first-child > th { text-align: center !important; }

/* tablas de aranceles */
.aranceles td td, .aranceles th { border: none !important; }
.aranceles .page-title { background-color: var(--navy) !important; }
.aranceles .page-title, .aranceles .page-title b { color: #fff !important; }
.aranceles .page-sub { background-color: var(--panel); }
.aranceles .page-important { background-color: var(--panel-2); }

/* ------------------------------------------------------------------ *
 * 11. NOTICIAS / BLOG (featured)
 * ------------------------------------------------------------------ */
.blog-featured, .blog { margin: 0; }
.items-leading > div { display: block; overflow: hidden; padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--line); max-width: var(--measure); }

.items-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3.4vw, 44px); margin: 0 0 30px; }
.cols-1 { display: block; float: none !important; margin: 0 !important; }
.items-row .column-1, .items-row .column-2, .items-row .column-3,
.cols-2 .column-1, .cols-2 .column-2, .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3 {
  width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
.items-row .item {
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--cyan); border-radius: var(--radius);
  padding: 22px 22px 24px; margin: 0; text-align: left;
  display: flex; flex-direction: column;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.items-row .item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.items-leading > div, .items-row .item { text-align: left; }
.item-title { font-family: var(--sans); font-size: clamp(19px, 2.1vw, 24px); font-weight: 700; line-height: 1.22; margin: 0 0 .5em; }
.item-title a { color: var(--navy); text-decoration: none; }
.item-title a:hover { color: var(--azure); }
.items-leading > div p img { max-width: 44% !important; float: left; margin: 4px 22px 12px 0 !important; border-radius: var(--radius-sm); }
.items-row .item p img, .items-row .item img { max-width: 100% !important; display: block; float: none !important; margin: 0 0 16px !important; border-radius: var(--radius-sm); }

.article-info { margin: 0 0 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azure); }
.article-info dd { padding: 0; margin: 0; border: 0; display: inline; }
.article-info-term { display: none; }
.published { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azure); }

.readmore { border: 0 !important; margin-top: auto; padding-top: 16px; }
#col-mid div.blog-featured .readmore, #col-mid .items-leading .readmore { width: 100%; border: 0 !important; }
.readmore a, #col-mid .readmore a {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); color: var(--azure) !important; font-weight: 700; font-size: 14px;
  letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none !important; padding: 0 !important;
}
.readmore a::after { content: "→"; transition: transform .18s var(--ease); }
.readmore a:hover { color: var(--navy) !important; }
.readmore a:hover::after { transform: translateX(5px); }
.row-separator { display: block; clear: both; margin: 0; border: 0; height: 0; }
.item-separator { display: none; }

/* ------------------------------------------------------------------ *
 * 12. FORMULARIOS
 * ------------------------------------------------------------------ */
#col-mid input[type="text"], #col-mid input[type="email"], #col-mid input[type="password"],
#col-mid textarea, #col-mid select {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  width: 100%; max-width: 440px; padding: 11px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#col-mid input:focus, #col-mid textarea:focus, #col-mid select:focus {
  outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(30,115,180,.16);
}
#col-mid button, #col-mid input[type="submit"], #col-mid .btn, #col-mid .button {
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--azure); cursor: pointer;
  border: 0; border-radius: var(--radius-sm); padding: 13px 26px;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
#col-mid button:hover, #col-mid .button:hover { background: var(--navy); }
#col-mid button:active, #col-mid .button:active { transform: translateY(1px); }

div.cajita-mensaje-success, div.cajita-mensaje-error {
  display: block; border-left: 4px solid; background: var(--panel);
  margin: 16px 0; padding: 13px 18px; font-size: 14.5px; border-radius: var(--radius-sm);
}
div.cajita-mensaje-success { color: #1e6b45; border-color: #2f9d63; }
div.cajita-mensaje-error   { color: #9a3329; border-color: #cf4a3a; }

/* ------------------------------------------------------------------ *
 * 13. FOOTER — banda azul profunda
 * ------------------------------------------------------------------ */
#footer {
  width: 100%; height: auto;
  background: var(--navy); color: #C6D7E6;
  padding: 38px var(--gutter); font-size: 13.5px;
  border-top: 4px solid var(--cyan);
}
#footer p { max-width: var(--wrap); margin: 0 auto; text-align: center; line-height: 2; color: #C6D7E6; font-family: var(--sans); }
#footer em { color: #fff; font-style: italic; font-weight: 400; }

/* ------------------------------------------------------------------ *
 * 14. TOTOP
 * ------------------------------------------------------------------ */
#toTop {
  display: none; position: fixed; right: 22px; bottom: 22px; z-index: 500;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--azure); padding: 12px 16px; border-radius: var(--radius-sm);
  cursor: pointer; box-shadow: var(--shadow-md); border: 0;
  transition: background .15s var(--ease);
}
#toTop:hover { background: var(--navy); }

/* ------------------------------------------------------------------ *
 * 15. RESPONSIVE
 * ------------------------------------------------------------------ */

/* tablet: reducir aire lateral del nav */
@media (max-width: 1080px) {
  ul.menudropdown > li > a, ul.menudropdown > li > span { padding: 0 12px; letter-spacing: .04em; }
}

/* MOBILE: hamburguesa + nav vertical (acordeón) */
@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  #menu { position: sticky; }
  .moduletable_menu { padding: 0; }
  /* el botón solo aparece si nav.js está activo */
  #menu.js-nav .nav-toggle { display: flex; margin: 0 var(--gutter); }

  /* nav vertical — VISIBLE por defecto: fallback usable si el JS no cargó */
  ul.menudropdown {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    background: var(--navy-2);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  /* con JS presente: se colapsa tras la hamburguesa */
  #menu.js-nav ul.menudropdown { display: none; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  #menu.js-nav.open ul.menudropdown { display: flex; }

  ul.menudropdown > li,
  ul.menudropdown li.parent { position: static; }
  ul.menudropdown > li { border-bottom: 1px solid rgba(255,255,255,.08); }

  ul.menudropdown > li > a,
  ul.menudropdown > li > span,
  ul.menudropdown a:link, ul.menudropdown a:visited, ul.menudropdown span {
    height: auto; padding: 15px var(--gutter);
    letter-spacing: .04em; text-transform: uppercase; font-size: 13px;
  }
  /* subrayado desktop off en mobile */
  ul.menudropdown > li > a::after, ul.menudropdown > li > span::after { display: none; }
  /* quitar la flechita CSS de desktop (usamos el caret JS) */
  ul.menudropdown > li.parent > a::before, ul.menudropdown > li.parent > span::before,
  ul.menudropdown ul li.parent > a::after, ul.menudropdown ul li.parent > span::after { content: none; display: none; }

  /* caret de acordeón */
  ul.menudropdown li.parent { position: relative; }
  .nav-caret {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; bottom: 0; width: 58px;
    background: none; border: 0; border-left: 1px solid rgba(255,255,255,.12);
    cursor: pointer; z-index: 5;
  }
  .nav-caret::before {
    content: ""; display: block; width: 10px; height: 10px; margin-top: -4px;
    border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
    transform: rotate(45deg); transition: transform .2s var(--ease);
  }
  li.parent.expanded > .nav-caret { background: rgba(255,255,255,.06); }
  li.parent.expanded > .nav-caret::before { margin-top: 4px; transform: rotate(-135deg); }
  /* los submenús anidados (3er nivel) llevan su caret un poco más adentro */
  ul.menudropdown ul .nav-caret { width: 52px; }

  /* submenús: colapsados por defecto, se abren con .expanded */
  ul.menudropdown ul {
    visibility: visible; opacity: 1; position: static; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: rgba(0,0,0,.16);
    min-width: 0; max-width: none; width: auto; padding: 0; margin: 0;
    display: block;
  }
  /* con JS: submenús colapsados (acordeón por caret) */
  #menu.js-nav ul.menudropdown ul { display: none; }
  #menu.js-nav li.parent.expanded > ul { display: block; }
  ul.menudropdown ul ul { top: auto; left: auto; }
  ul.menudropdown ul a:link, ul.menudropdown ul a:visited, ul.menudropdown ul span {
    color: rgba(255,255,255,.82); text-transform: none; letter-spacing: 0;
    font-weight: 500; font-size: 14px; padding: 12px var(--gutter) 12px calc(var(--gutter) + 16px);
    border-radius: 0;
  }
  ul.menudropdown ul li:hover > a, ul.menudropdown ul li:hover > span { background: rgba(255,255,255,.06); color: #fff; }
  ul.menudropdown ul ul a:link, ul.menudropdown ul ul a:visited { padding-left: calc(var(--gutter) + 32px); }
}

/* layout de columnas → apila */
@media (max-width: 900px) {
  #cuerpo { flex-direction: column; }
  #col-izq, #col-der { flex: 1 1 100%; width: 100%; }
  #col-mid { order: 1; flex: 1 1 100%; }
  #col-izq { order: 2; margin-top: 24px; }
  #col-der { order: 3; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  #cabecera { padding: 14px 16px; }
  .items-leading > div p img { max-width: 100% !important; float: none !important; margin: 0 0 14px !important; }
  .items-row .item { padding: 18px; }
}

/* ------------------------------------------------------------------ *
 * 16. MOVIMIENTO REDUCIDO
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}