/* ============================================================
   HOME — index.html
   Valores tomados del DOM vivo (spec/live-site-spec.md) y del CSS
   original del sitio (spec/css/CEUIntranet.min.css, enmarcha-publishing).
   Cabecera 92px + nav 93px; container Bootstrap 1170px; hero 403px;
   banda Quick links 193px; news cards 353x500; footer #003ca3.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--page-bg);
}

a { color: var(--link); text-decoration: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h4 { margin: 0; }
button { font-family: inherit; }

.container { width: 1170px; margin: 0 auto; padding: 0 15px; }

/* Triangulito ▾ (nav + nombre de usuario) */
.caret-down {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
}

/* ---------- Cabecera azul (92px) ---------- */
#site-header {
  width: 100%;
  background-color: var(--ceu-blue);
  position: relative;
  padding: 10px 0;
}

.container-top {
  margin: 0 30px;
  height: 72px;
  display: flex;
  align-items: center;
}

#waffle {
  position: absolute;
  left: 30px;
  top: 29px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

#header-logo { margin-left: 85px; line-height: 0; }

#header-search {
  margin-left: auto;
  margin-right: 20px;
  align-self: flex-start;
  margin-top: 12px;
  background-color: #fff;
  height: 21px;
  padding: 0 6px 0 8px;
  display: flex;
  align-items: center;
}
#header-search input {
  width: 247px;
  height: 18px;
  border: 0;
  outline: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-3);
}
#header-search input::placeholder { color: var(--text-3); }
#header-search svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.8;
}

#header-user { padding: 6px; display: flex; align-items: flex-start; }
#user-data {
  margin-right: 26px;
  font-size: 13px;
  line-height: 17px;
  color: var(--page-bg);
  text-align: left;
}
#user-name-container { display: block; margin: 6px 0; cursor: pointer; white-space: nowrap; }
#user-name-container .caret-down { color: var(--page-bg); }
#user-role { display: block; white-space: nowrap; }
#user-picture { width: 48px; height: 48px; border-radius: 50%; }

/* ---------- Nav (93px, dos filas de 46px) ---------- */
#menu-color {
  background-color: var(--nav-bg);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .5);
  position: relative;
  z-index: 20;
}

.nav-row { font-size: 0; } /* mata el espacio entre inline-blocks */
.nav-row > li { display: inline-block; position: relative; text-align: center; }
.nav-row > li > a {
  display: block;
  line-height: 45px;
  height: 46px;
  padding: 0 25px;
  font-family: var(--font);
  font-size: var(--nav-item-size);
  letter-spacing: var(--nav-item-ls);
  color: var(--text-2);
}
.nav-row > li > a:hover { color: #fff; background-color: var(--ceu-lightblue); }
.nav-row > li.selected { background-color: var(--ceu-lightblue); }
.nav-row > li.selected > a { color: #fff; font-weight: 600; }

#language {
  float: right;
  padding: 15px 40px 15px 0;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: .7px;
}
#language a { padding: 16px 10px; color: var(--text-2); }
#language a:hover { background-color: rgba(57, 57, 57, .5); color: #fff; }
#language span { color: var(--text-2); }

/* Dropdown (cuelga bajo el nav completo, +10px de margen) */
.dropdown {
  display: none;
  position: absolute;
  top: 103px; /* 46 (fila 1) + 47 (fila 2) + 10 de margen */
  left: 0;
  min-width: 208px;
  padding-top: 12px;
  background: var(--page-bg);
  border-left: 1px solid var(--page-bg);
  box-shadow: rgba(0, 0, 0, .5) 0 1px 5px;
  z-index: 30;
}
.has-sub:hover .dropdown { display: block; }
.dropdown li { display: block; border-bottom: 1px solid #fff; text-align: left; }
.dropdown li:last-child { border-bottom: 0; }
.dropdown li a {
  display: block;
  padding: 12px 25px;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: .7px;
  color: var(--text-2);
  white-space: nowrap;
}
.dropdown li a:hover { background: var(--ceu-navy); color: #fff; }

/* ---------- Hero slider (403px) ---------- */
#hero {
  position: relative;
  height: 403px;
  overflow: hidden;
  background: var(--page-bg);
}
#hero .news-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 600ms;
}
#hero .news-item.is-active { opacity: 1; }

#hero .news-data {
  position: absolute;
  left: 5%;
  top: 0;
  height: 100%;
  width: 375px;
  background: rgba(24, 143, 241, .8); /* --ceu-lightblue al 80% (valor vivo) */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
}
#hero .news-title {
  font-family: var(--font);
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: 1.32;
}
#hero .news-description {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--hero-desc-size);
  line-height: 22px;
}

.slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  z-index: 5;
  /* en el sitio vivo los dots quedan ~59px a la derecha del centro (real-home-1920.png) */
  transform: translateX(59px);
}
.slick-dots li { line-height: 0; }
.slick-dots button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.slick-dots button.is-active { background: var(--ceu-lightblue); }

/* ---------- Quick links (193px) ---------- */
#quick-links {
  background: var(--ceu-lightblue);
  color: #fff;
  text-align: center;
  padding: 22px 0 40px;
}
#quick-links h4 {
  font-family: var(--font);
  font-size: var(--section-title-size);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 28px;
}
.ql-row {
  width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.ql-item { display: block; width: 228px; color: #fff; }
.ql-item svg {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 11px;
  fill: #fff;
  stroke: #fff;
}
.ql-item span {
  display: block;
  font-family: var(--font);
  font-size: var(--quicklink-label);
  font-weight: 200;
  line-height: 18px;
}

/* ---------- Banner "Becas y Ayudas al estudio" (1140x250, refs/real-home-1920.png) ---------- */
#news { padding: 111px 0 25px; }
/* El banner real es un ÚNICO PNG del CMS con el scrim, el texto y el botón
   "Accede >" ya horneados dentro (verificado: no hay overlay HTML en el sitio).
   Exactitud = mostrar la imagen tal cual, sin texto ni scrim propios. */
.becas-banner {
  display: block;
  width: 1140px;
  margin: 0 auto;
}
.becas-banner img {
  display: block;
  width: 1140px;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

/* ---------- News grid 3x3 (cards 353x500) ---------- */
.news-grid {
  width: 1107px; /* 3x353 + 2x24 (gap real medido en real-home-1920.png) */
  margin: 167px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 353px);
  column-gap: 24px;
  row-gap: 25px;
}
.news-card {
  background: var(--card-bg);
  height: 500px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.news-card .news-image {
  display: block;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--page-bg);
}
.news-body { padding: 20px 24px; }
.news-date { font-size: 12px; color: var(--date-muted); }
.news-body .news-title {
  margin: 8px 0 10px;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ceu-navy);
}
.news-body .news-description {
  font-size: 15px;
  line-height: 21px;
  color: var(--text);
}
.star-rating { margin-top: 12px; display: flex; gap: 3px; }
.star-rating svg { width: 16px; height: 16px; fill: var(--star-blue); }
.star-rating.empty svg { fill: none; stroke: var(--star-blue); stroke-width: 1.3; }

/* Paginación 1 / 2 */
.news-pager {
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.pager-arrow {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pager-bg);
  border: 1px solid var(--pager-brd);
  border-radius: 3px;
}
.tri { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tri-left { border-right: 6px solid var(--date-muted); }
.tri-right { border-left: 6px solid var(--pager-txt); }
.pager-num { font-size: 14px; color: var(--link); }
.pager-num.current { color: var(--ceu-navy); font-weight: 700; }

/* ---------- Footer ---------- */
footer {
  clear: both;
  background-color: var(--ceu-blue);
  color: var(--page-bg);
  margin-top: 20px;
}
.centerfooter {
  width: 1170px;
  margin: 0 auto;
  padding: 28px 15px;
  display: flex;
  align-items: flex-start;
}
/* Reparto real medido en s165219: col-sm-4 + col-sm-6 + col-sm-2 */
.footer-column-1 { width: 375px; flex: none; }
.footer-column-2 { width: 585px; flex: none; }
.footer-column-3 { margin-left: auto; width: 180px; flex: none; font-weight: 600; }

.centerfooter label {
  display: block;
  font-family: var(--font);
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  margin-bottom: 15px;
  letter-spacing: 1px;
}
.centerfooter ul { letter-spacing: .7px; }
.footer-column-1 li, .footer-column-2 li {
  width: 49%;
  display: inline-block;
  margin: 6px 0;
}
.centerfooter li a {
  color: var(--page-bg);
  font-family: var(--font);
  font-size: 13px;
}
.centerfooter li.selected a { font-weight: 700; }
.footer-column-1 a::before, .footer-column-2 a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  margin-bottom: 1px;
  border-top: 2px solid var(--page-bg);
  border-right: 2px solid var(--page-bg);
  transform: rotate(45deg);
}

.social { display: flex; gap: 26px; }
.social img { display: block; }
#logofooter { display: block; margin-top: 10px; }

.sub-footer { width: 100%; background-color: var(--page-bg); }
.sub-footer .center {
  width: 1170px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.sub-footer label {
  color: var(--ceu-blue);
  padding: 1.2%;
  font-family: var(--font);
  font-size: 13px;
}