/* =============================
   ENHANCEMENTS (UX dinámico + título + fondo izquierdo)
   - Sin tocar HTML
   - SOLO cambio de tonos a #671c34
   ============================= */

/* Paleta institucional (ANTES azul → AHORA granate) */
:root {
  --friendly-bg: #f6ecef;        /* granate muy suave */
  --friendly-border: #e6cdd4;    /* borde suave */
  --friendly-accent: #671c34;   /* color principal institucional */
}


/* 1) Título más grande y destacado */
html body h1 { 
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem) !important; 
  letter-spacing: .2px; 
}

html body h1 p { 
  color: #671c34 !important; 
  margin: 0 !important;
}


/* 2) Fondo más amigable para la columna izquierda */
html body .home-slideshow .row > .col-xs-4 {
  background: linear-gradient(180deg, var(--friendly-bg), #ffffff);
  border: 1px solid var(--friendly-border);
  border-radius: 12px;
}

html body .home-slideshow .row > .col-xs-4 .sub-header {
  padding: 1rem 1rem 1.25rem 1rem !important;
}

html body .home-slideshow .row > .col-xs-4 .banner-descripcion {
  display: block; 
  color: #484549 !important; 
}


/* 3) Animación suave */
@keyframes uxFadeUp { 
  from { opacity: 0; transform: translateY(6px);} 
  to { opacity: 1; transform: translateY(0);} 
}

html body h1 { animation: uxFadeUp .4s ease-out both; }
html body .home-slideshow .row > .col-xs-4 { animation: uxFadeUp .5s .05s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  html body h1,
  html body .home-slideshow .row > .col-xs-4 { animation: none !important; }
}


/* 4) Enlaces */
html body a { 
  transition: color .2s ease, text-decoration-thickness .15s ease; 
}

html body a:hover { 
  color: var(--friendly-accent) !important; 
}


/* 5) Imagen banner */
html body #bodyRss img { 
  width: 100%; 
  height: auto; 
  border-radius: 12px; 
  display: block; 
}


/* === FIX: Forzar fondo amigable columna izquierda === */
html body .home-slideshow .row > div.col-xs-4 {
  background: linear-gradient(180deg, var(--friendly-bg), #ffffff) !important;
  border: 1px solid var(--friendly-border) !important;
  border-radius: 12px !important;
  padding: 0 !important;
}

html body .home-slideshow .row > div.col-xs-4 > .sub-header {
  background: inherit !important;
  border-radius: inherit !important;
  border: 1px solid var(--friendly-border) !important;
  padding: 1rem 1rem 1.25rem 1rem !important;
}

html body .home-slideshow .row > div.col-xs-4 *,
html body .home-slideshow .row > div.col-xs-4 > .sub-header * {
  background-color: transparent !important;
}

html body table, 
html body td { 
  background-color: transparent !important; 
}

html body .home-slideshow .row > div.col-xs-4 { 
  min-height: 140px; 
}


/* === menuFiduprevisora === */
html body :is(#menuFiduprevisora, .menuFiduprevisora) {
  background: linear-gradient(180deg, var(--friendly-bg), #ffffff) !important;
  border: 1px solid var(--friendly-border) !important;
  border-radius: 12px !important;
}

html body :is(#menuFiduprevisora, .menuFiduprevisora):hover {
  background: linear-gradient(180deg, #ffffff, var(--friendly-bg)) !important;
  transition: background .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#menuFiduprevisora, .menuFiduprevisora):hover { 
    transition: none; 
  }
}