/* ============================================================
main.css — Razonando QuímicaMente
Base compartida por TODAS las páginas del sitio.
Incluye: variables, reset, tipografía, nav, page-hero,
breadcrumb, botones, sección genérica, cta-final,
footer, reveal, redes sociales y responsive base.
============================================================ */
/* ── VARIABLES ── */
:root {
/* Colores principales */
--verde-fondo: #e8f4f2;
--verde: #78B0A7;
--naranja: #fa9755;
--rojo: #ec516b;
/* Colores alternativos */
--verde-claro: #c5dcd9;
--verde-footer: #4e8880; /* exclusivo del footer */
--verde-palido: #e8f4f2;
--naranja-claro: #fdd4b4;
--naranja-palido: #fff3ea;
--naranja-oscuro: #c96c28; /* texto sobre badges/pills naranja-palido */
--naranja-hover: #e07c3a; /* hover de botones/CTA naranja */
--rojo-claro: #f8b0bb;
--rojo-palido: #fde8eb;
--rojo-oscuro: #b82d44; /* texto sobre badges/pills rojo-palido */
--crema: #FAFAF8;
--tinta: #1a1a18;
--gris-medio: #5a6660;
--gris-claro: #dce8e6;
}
/* ── RESET ── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* El atributo [hidden] siempre oculta: algunos botones (.btn-primary, etc.)
definen su propio display y anulaban el ocultamiento del navegador. */
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Mulish', Arial, sans-serif;
background: var(--crema);
color: var(--tinta);
overflow-x: hidden;
}
/* ── TIPOGRAFÍA ── */
/* Títulos → Nunito Bold (Google Fonts, cargada con en el ) */
h1, h2, h3,
.section-title,
.nav-brand-text,
.stat-num,
.paso-num {
font-family: 'Nunito', sans-serif;
font-weight: bold;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 5%;
background: var(--verde);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
/* Logo como imagen (index) */
.navbar-logo {
width: 36px;
height: 36px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* Logo como círculo RQ (páginas internas) */
.nav-logo-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: bold;
color: white;
font-family: 'Nunito', sans-serif;
flex-shrink: 0;
}
.nav-brand-text {
font-size: 0.95rem;
color: white;
letter-spacing: -0.01em;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.nav-brand-text span {
display: block;
font-size: 0.68rem;
font-family: 'Mulish', Arial, sans-serif;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 1.75rem;
list-style: none;
align-items: center;
}
.nav-links a {
text-decoration: none;
font-size: 0.875rem;
font-weight: 700;
color: white;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--naranja-claro);
}
/* Página actual: chip claro translúcido — legible sobre el verde del nav */
.nav-links a.active:not(.nav-cta) {
color: #fff;
background: rgba(255, 255, 255, 0.2);
padding: 0.4rem 0.95rem;
border-radius: 100px;
}
.nav-cta {
background: var(--naranja) !important;
color: white !important;
padding: 0.45rem 1.2rem;
border-radius: 100px;
box-shadow: 0 2px 12px rgba(250, 151, 85, 0.4);
transition: background 0.2s !important;
}
.nav-cta:hover {
background: var(--naranja-hover) !important;
color: white !important;
}
/* Sombra del nav al hacer scroll (profundidad sobre el contenido) */
nav.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}
/* En el menú desplegable móvil, el chip se adapta a fila resaltada */
@media (max-width: 960px) {
.nav-links a.active:not(.nav-cta) {
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 0.9rem 0.75rem;
}
}
/* ── NAV TOGGLE (hamburguesa, sólo móvil/tablet) ── */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
padding: 9px;
background: none;
border: none;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 100%;
height: 2.5px;
border-radius: 2px;
background: white;
transition: transform 0.25s, opacity 0.25s;
}
nav.is-open .nav-toggle span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
nav.is-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
nav.is-open .nav-toggle span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
/* ── BREADCRUMB ── */
/* Barra de navegación secundaria en páginas internas */
.breadcrumb {
padding: 0.85rem 5%;
background: white;
border-bottom: 1px solid var(--gris-claro);
display: flex;
gap: 0.5rem;
align-items: center;
font-size: 0.78rem;
color: var(--gris-medio);
margin-top: 64px; /* altura del nav fijo */
}
.breadcrumb a {
color: var(--verde);
text-decoration: none;
font-weight: 700;
}
.breadcrumb a:hover {
color: var(--naranja);
}
.breadcrumb-sep {
opacity: 0.4;
}
/* Si hay breadcrumb antes del hero, éste ya despeja el nav fijo:
reducimos el padding-top del page-hero para un espaciado parejo. */
.breadcrumb + .page-hero {
padding-top: 3rem;
}
/* ── PAGE HERO (páginas internas) ── */
/* Hero estándar verde que encabeza todas las páginas internas */
.page-hero {
background: var(--verde);
padding: 7rem 5% 4.5rem;
position: relative;
overflow: hidden;
/* el padding-top alto compensa el nav fijo cuando NO hay breadcrumb */
}
.page-hero-label {
font-size: 0.72rem;
font-weight: 700;
font-family: 'Mulish', Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0.7rem;
position: relative;
z-index: 1;
}
.page-hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
color: white;
margin-bottom: 1rem;
line-height: 1.15;
position: relative;
z-index: 1;
/* Sobreescribe el h1 genérico del index */
text-shadow: none;
}
/* Resaltar em */
.page-hero h1 em {
color: var(--naranja);
font-style: normal;
}
.page-hero-desc {
color: rgba(255, 255, 255, 0.85);
max-width: 580px;
line-height: 1.8;
font-size: 1rem;
position: relative;
z-index: 1;
margin-bottom: 2rem;
}
/* Chips / tabs de navegación dentro del hero */
.hero-chips,
.hero-tabs {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.hero-chip,
.hero-tab {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.38rem 1rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 700;
font-family: 'Mulish', Arial, sans-serif;
text-decoration: none;
transition: background 0.2s;
display: inline-block;
}
.hero-tab:hover,
.hero-tab.active {
background: white;
color: var(--verde);
}
/* Chip variante naranja */
.hero-chip-orange {
background: rgba(250, 151, 85, 0.25);
border: 1px solid rgba(250, 151, 85, 0.4);
color: white;
padding: 0.35rem 1rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 700;
font-family: 'Mulish', Arial, sans-serif;
}
/* ── PAGE HERO · VARIANTE CLARA (.is-light) ──────────────────
Hero compartido por todas las páginas internas.
Fondo claro con fórmulas, contenido centrado, texto oscuro
y un badge con punto pulsante. Reemplaza al hero verde sólido.
Activar con:
…
──────────────────────────────────────────────────────────── */
.page-hero.is-light {
background: url("../img/background/fondo-hero.webp") center / cover no-repeat;
text-align: center;
padding: 3rem 5% 5.5rem;
}
/* Sin los círculos decorativos del hero verde en la variante clara */
.page-hero.is-light::before,
.page-hero.is-light::after {
content: none;
}
.page-hero.is-light h1 {
color: var(--tinta);
}
.page-hero.is-light .page-hero-desc {
color: var(--gris-medio);
margin-left: auto;
margin-right: auto;
}
/* Tabs y chips centrados sobre fondo claro */
.page-hero.is-light .hero-tabs,
.page-hero.is-light .hero-chips {
justify-content: center;
}
/* Píldoras blancas con borde (tabs + chips) sobre fondo claro */
.page-hero.is-light .hero-tab,
.page-hero.is-light .hero-chip {
background: #fff;
border: 1px solid var(--gris-claro);
color: var(--verde);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.page-hero.is-light .hero-tab:hover,
.page-hero.is-light .hero-tab.active,
.page-hero.is-light .hero-chip:hover {
background: var(--verde);
border-color: var(--verde);
color: #fff;
}
/* Chip naranja "en camino" adaptado al fondo claro */
.page-hero.is-light .hero-chip-orange {
background: var(--naranja-palido);
border: 1px solid var(--naranja-claro);
color: var(--naranja-oscuro);
}
/* ── PAGE HERO · VARIANTE CON LOGO AL COSTADO (.has-logo) ─────
Toma el hero interno y lo pasa a 2 columnas (texto + logo).
Sobre la base .is-light pero con fondo verde sólido y texto
en blanco. El logo va en un círculo crema. Compacto: no es un
hero de landing a pantalla completa.
Activar con: