/* =====================================================================
AMBIOS · Tema de color
---------------------------------------------------------------------
Sobrescribe las variables de la plantilla "Learner" (BootstrapMade)
con la paleta de marca ambios extraída del logo.
CÓMO USARLO:
Inclúyelo en include/header.php DESPUÉS de main.css:
se repite igual en
las 36 páginas internas, así que se estiliza SOLO desde aquí (sin tocar
los PHP). Se neutraliza el fondo claro de la plantilla.
===================================================================== */
.page-title,
.page-title.light-background {
background: linear-gradient(120deg, var(--ambios-navy) 0%, var(--ambios-blue) 55%, var(--ambios-aqua) 150%);
background-color: transparent; /* anula --background-color de la plantilla */
color: #fff;
padding: 42px 0;
position: relative;
overflow: hidden;
border-bottom: 3px solid var(--ambios-aqua);
}
/* Halo suave, mismo recurso del CTA */
.page-title::after {
content: ""; position: absolute; right: -100px; top: -120px;
width: 340px; height: 340px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,191,215,.30), transparent 70%);
pointer-events: none;
}
.page-title .container { position: relative; z-index: 2; }
/* main.css define h1..h6{color:var(--heading-color)} (azul oscuro) y pisaría
el blanco heredado: el título quedaría invisible sobre el degradado. */
.page-title h1 {
color: #fff;
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 700;
margin: 0;
}
.page-title .breadcrumbs ol { color: rgba(255,255,255,.85); }
.page-title .breadcrumbs ol a { color: #fff; text-decoration: none; }
.page-title .breadcrumbs ol a:hover { color: var(--ambios-aqua); }
.page-title .breadcrumbs ol li.current { color: var(--ambios-aqua); font-weight: 600; }
.page-title .breadcrumbs ol li+li::before { color: rgba(255,255,255,.45); }
/* ---------- Sección de contenido sobre navy ----------
Las tarjetas blancas (.mvv-card, etc.) resaltan sobre el navy.
Se fuerza el texto suelto a blanco para que nunca quede ilegible. */
.section-navy { background: var(--ambios-navy) !important; color: #fff; }
.section-navy h1, .section-navy h2, .section-navy h3,
.section-navy h4, .section-navy h5, .section-navy h6 { color: #fff; }
.section-navy p, .section-navy li { color: rgba(255,255,255,.85); }
.section-navy .subtitle { color: var(--ambios-aqua) !important; }
/* Las tarjetas conservan su fondo blanco y su tipografía oscura */
.section-navy .mvv-card { background: #fff; border-color: rgba(255,255,255,.18); }
.section-navy .mvv-card h3 { color: var(--ambios-navy); }
.section-navy .mvv-card p { color: var(--ambios-muted); }
/* ---------- Ajustes de piezas dentro de un bloque .section-navy ---------- */
/* El antetítulo va en aqua y con peso, ya que se quitaron los estilos en línea */
.section-navy .subtitle { font-weight: 600; }
/* Tarjetas de blog: siguen blancas (resaltan sobre el navy); solo se suaviza
el borde, que en azul claro no se veía contra el fondo oscuro. */
.section-navy .post-card { border-color: rgba(255,255,255,.14); }
.section-navy .post-card:hover { border-color: var(--ambios-aqua); box-shadow: 0 18px 36px rgba(0,0,0,.28); }
.section-navy .post-card h3 { color: var(--ambios-navy); }
.section-navy .post-card p { color: var(--ambios-muted); }
/* Botón "Leer más artículos": en azul de marca se fundía con el navy del
fondo. En blanco contrasta y al pasar el mouse se invierte. */
.section-navy .home-blog-foot a {
background: #fff; color: var(--ambios-blue); border: 2px solid #fff;
}
.section-navy .home-blog-foot a:hover {
background: transparent; color: #fff; border-color: #fff;
}