/* ==============================================================
   ej-blog-extra.css - Nivel 2 coherencia visual blog <-> EJ www
   Sub-op 1: logo replica fiel ej-design.css
   Sub-op 2: paleta cabecera + menu 25/05/2026
   Sub-op 3: footer replica fiel ej-footer-* 25/05/2026
   NO toca estiloak.css ni bootstrap - todo override aqui
   ============================================================== */

/* Variables EJ */
:root {
  --ej-tostado: #5C4F43;
  --ej-terracota: #C8845A;
  --ej-beige: #F2EEE9;
  --ej-texto: #2C2520;
  --ej-blanco: #FFFFFF;
  --ej-radio-sm: 4px;
}

/* ==============================
   CABECERA .head
   ============================== */

.head {
  background: var(--ej-tostado) !important;
  background-image: none !important;
  height: auto !important;
  min-height: 120px;
  margin: 0 0 20px 0 !important;
  padding: 20px 0 20px 0;
}

/* Logo ej-logo-* (replica fiel EJ www) */
.ej-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.ej-logo:hover, .ej-logo:focus {
  text-decoration: none;
}
.ej-logo-barra {
  display: inline-block;
  width: 3px;
  height: 30px;
  background: var(--ej-terracota);
  border-radius: 2px;
  flex-shrink: 0;
}
.ej-logo-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 0;
  font-family: 'Barlow Condensed', sans-serif;
}
.ej-logo-ev {
  font-size: 12px;
  font-weight: 700;
  color: var(--ej-blanco);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ej-logo-jur {
  font-size: 12px;
  font-weight: 700;
  color: var(--ej-terracota);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Badge BLOG */
.ej-blog-badge {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: var(--ej-blanco);
  background: var(--ej-terracota);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

.ej-logo.brand2 {
  margin: 0 !important;
  height: auto;
  max-width: none;
}

.head .span3 {
  display: flex;
  align-items: center;
  min-height: 40px;
}

/* Accede / Registrate */
.head .entry {
  margin: 0 !important;
}
.head .entry a {
  color: var(--ej-blanco) !important;
  text-decoration: none;
  padding: 5px 10px;
  transition: color 0.2s;
}
.head .entry a:hover {
  color: var(--ej-terracota) !important;
  text-decoration: none;
}

/* Menu secciones */
.head .navbar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto;
  margin: 15px 0 0 0;
}
.head .navbar .nav {
  float: right;
  display: flex;
  gap: 4px;
  margin: 0;
  list-style: none;
}
.head .navbar .nav > li {
  float: none;
  display: inline-block;
  margin: 0;
}
.head .navbar .nav > li > a {
  color: var(--ej-blanco) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 14px;
  border-radius: 3px;
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  text-shadow: none;
  text-decoration: none;
  transition: all 0.2s;
  width: auto;
}
.head .navbar .nav > li > a:hover {
  background: rgba(200, 132, 90, 0.25) !important;
  color: var(--ej-blanco) !important;
}
.head .navbar .nav > li.active > a {
  background: var(--ej-terracota) !important;
  color: var(--ej-blanco) !important;
}
.head .navbar .nav > li.active > a:hover {
  background: var(--ej-terracota) !important;
}

/* ==============================
   FOOTER .ej-footer (replica fiel EJ www)
   IMPORTANTE: todas las reglas BASE antes que los @media
   ============================== */

.ej-footer {
  background: var(--ej-tostado);
  padding: 32px 24px 40px;
  margin-top: 16px;
}

.ej-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ej-footer-cols {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ej-footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ej-footer-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.75) !important;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 340px;
}

.ej-footer-social { display: flex; gap: 8px; }
.ej-footer-social-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--ej-radio-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  text-decoration: none;
}
.ej-footer-social-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  text-decoration: none;
}

.ej-footer-col-titulo {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.ej-footer-link {
  display: block;
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 8px;
  text-decoration: none;
}
.ej-footer-link:hover {
  color: #fff !important;
  text-decoration: none;
}

.ej-footer-legal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ej-footer-legal-list li a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
}
.ej-footer-legal-list li a:hover {
  color: #fff !important;
}

.ej-footer-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  max-width: 1100px;
  margin: 20px auto 0;
}

.ej-footer-bottom {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 24px;
}

.ej-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin: 0;
  line-height: 1.5;
}

/* Anular restos viejos del footer tema 2012 */
.bg_footer, .border_footer {
  background: none !important;
  border: none !important;
}

/* ==============================
   MEDIA QUERIES (siempre AL FINAL)
   ============================== */

@media (min-width: 768px) {
  .ej-footer { padding: 40px 32px 48px; }
}

@media (min-width: 1024px) {
  .ej-footer-inner { flex-direction: row; gap: 40px; }
  .ej-footer-cols { flex-direction: row; gap: 32px; flex: 1; }
  .ej-footer-bottom { flex-direction: row; justify-content: space-between; }
}