/* ========================================================================== Pensamientos de Colores · pensamientos.css Hoja de estilos de marca — se enlaza SIEMPRE después del CSS de la plantilla GrandPortfolio (settings.css, combined.css, style.css, etc.) para que estas reglas tengan prioridad. Basado en Manual de Identidad Visual v1.0 y Guía Maestra Web v1.0. ========================================================================== */ /* ── 1. TOKENS DE MARCA ─────────────────────────────────────────────────── */ :root { /* Colores — Manual de Identidad Visual v1.0 */ --color-primario: #7AAFD4; /* Azul Cerúleo — links, CTAs, iconos activos */ --color-secundario: #C84878; /* Magenta Rosa — destacados, "Nuevo", "Disponible" */ --color-acento-calido: #E8C84A; /* Amarillo Cadmio — hover, badges, categoría infantil */ --color-acento-energia: #E8813A; /* Naranja Sanguina — botón WhatsApp, CTA urgente */ --color-azul-cielo: #B8D8EE; --color-azul-cobalto: #4A82B4; /* Headings secundarios */ --color-azul-prusiano: #2A4E78; /* Fondos oscuros — nav, footer */ --color-violeta: #8C4AA0; --color-fondo: #FAF8F4; /* Crema Acuarela — fondo web */ --color-fondo-rgb: 250,248,244; /* mismo tono en componentes r,g,b — para el fondo semitransparente del menú al hacer scroll */ --color-blanco: #FFFFFF; --color-texto: #2C2420; /* Negro Tinta — nunca #000000 puro */ --color-gris: #6B6560; /* Gris Grafito — texto secundario, captions */ /* Pasteles derivados del logo (mezcla ~78% blanco) — fondos, degradado hero */ --pastel-amarillo: #FBF1D1; --pastel-naranja: #FAE4DB; --pastel-magenta: #F2DBE3; --pastel-violeta: #E5D7EA; --pastel-celeste: #E7F0F8; --pastel-azul-medio: #D8E6F1; --pastel-azul-oscuro: #CDDCE5; /* Pasteles medios del logo (mezcla ~55% blanco) — botones, hover, footer, elementos que necesitan algo más de contraste que el pastel suave */ --pastel-m-amarillo: #F6E3A1; --pastel-m-naranja: #F5C9B6; --pastel-m-magenta: #E5B7C6; --pastel-m-violeta: #CBADD4; --pastel-m-celeste: #CEE1F1; --pastel-m-azul-medio: #B1CDE3; --pastel-m-azul-oscuro: #99B7CB; /* Tipografía — Manual de Identidad Visual v1.0 */ --fuente-display: "Cormorant Garamond", Georgia, serif; --fuente-ui: "Raleway", system-ui, sans-serif; /* Velo de contraste sobre el hero (Sección 22): alto/opacidad de PARTIDA (scrollY = 0). El script de cabecera los lee de aquí en vez de llevarlos hardcodeados, así que se pueden afinar solo tocando estos dos valores. A 0 por defecto: desde que el header lleva su propio fondo "glass" permanente (Sección 18), el velo ya no hace falta para la legibilidad del menú — se deja a 0 en vez de borrar el mecanismo, por si algún día hiciera falta un toque de contraste extra sobre una foto muy clara, basta con subir estos dos valores otra vez. */ --hero-fade-height: 0px; --hero-fade-opacity: 0; } /* Móvil: igual que en escritorio, sin velo por defecto (el header "glass" ya da contraste). Si hiciera falta reactivarlo en un breakpoint puntual, este es el sitio. */ @media (max-width: 480px) { :root { --hero-fade-height: 0px; } } /* ── 1B. FONDO GLOBAL DEL SITIO (Opción C + A) ────────────────────────────── Base crema de marca + viñeta suave + grano de papel muy sutil. Se aplica a para propagarse a todas las páginas que enlacen este CSS. */ body { background-color: var(--color-fondo); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%20result%3D%22t%22%2F%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200.35%200.35%200.35%200%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at center, transparent 40%, rgba(44,36,32,.05) 100%); background-repeat: repeat, no-repeat; background-size: 200px 200px, cover; background-attachment: fixed, fixed; background-blend-mode: multiply, normal; } /* style.css fija #wrapper a #ffffff a secas (no a la variable de marca) — en claro es casi idéntico al crema y pasa desapercibido, pero en modo oscuro dejaría un bloque blanco encima del fondo oscuro. Lo atamos a la misma variable que el body para que ambos cambien juntos. */ #wrapper { background-color: var(--color-fondo) !important; } /* ── 2. BASE ─────────────────────────────────────────────────────────────── */ body { color: var(--color-texto) !important; font-family: var(--fuente-ui) !important; font-weight: 300; } h1, h2, h3, h4, h5, h6, .ppb_title, .portfolio_title h5, .widgettitle, .hero__title, .proceso_encargo h3, .testimonio blockquote { font-family: var(--fuente-display) !important; font-weight: 500; color: var(--color-texto); } h3, .proceso_encargo h3 { font-weight: 600; } /* Títulos de sección (h2.ppb_title) más grandes y con más presencia, en toda la web — antes se sentían apagados */ .ppb_title { font-size: 2.2rem; font-weight: 600 !important; } /* ── 2B. UTILIDAD "TÍTULO CON BLOQUE" ──────────────────────────────────────── Bloque de color atravesado tipo trazo de marcador, reutilizable en cualquier título o palabra suelta de la web. Aplicar junto a un color: .titulo-bloque--naranja / --celeste / --magenta / --amarillo / --azul */ .titulo-bloque { display: inline-block; position: relative; font-weight: 600; padding: 4px 26px; z-index: 1; } .titulo-bloque::before { content: ''; position: absolute; left: -12px; right: -12px; top: 42%; bottom: 4%; transform: skewX(-8deg) rotate(-1deg); z-index: -1; border-radius: 3px; } .titulo-bloque--celeste::before { background: var(--pastel-m-celeste); } .titulo-bloque--naranja::before { background: var(--pastel-m-naranja); } .titulo-bloque--magenta::before { background: var(--pastel-m-magenta); } .titulo-bloque--amarillo::before { background: var(--pastel-m-amarillo); } .titulo-bloque--azul::before { background: var(--pastel-m-azul-medio); } a { color: var(--color-primario); } a:hover { color: var(--color-azul-cobalto); } nav, label, .btn, .button, input, select, textarea, .post_detail, .portfolio_title_desc, .footer_bar, #copyright { font-family: var(--fuente-ui) !important; } /* Regla de oro tipográfica: Cormorant para arte/emoción/autoría, Raleway para navegación, precios y CTAs. Nunca mezclar en la misma línea. */ /* ── 3. NAVEGACIÓN ───────────────────────────────────────────────────────── */ /* El menú es siempre oscuro, tanto transparente como al hacer scroll */ #footer_menu.footer_nav li a { font-family: var(--fuente-ui) !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--color-texto) !important; } /* Menú horizontal de escritorio: misma tipografía y estilo que el menú lateral (Cormorant Garamond, cursiva, sin mayúsculas forzadas), pero a un tamaño moderado — el 3.2rem del lateral es para un menú desplegado a pantalla completa, aquí sería desproporcionado en una barra fina. */ #main_menu.nav li a, #menu_wrapper #nav_wrapper #menu_border_wrapper #main_menu.nav li a { font-family: var(--fuente-display) !important; font-weight: 500; font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1.05rem; color: var(--color-texto) !important; } /* El azul cerúleo (--color-primario) quedaba soso como color de hover del menú — lo sustituimos por el morado de marca (--color-violeta), bastante más llamativo y con mejor contraste (5.5:1 en claro, 6:1 en oscuro, ya que la variable se redefine sola en :root[data-theme="dark"]). El menú de footer no se toca: tiene su propia regla más abajo (Sección 21, #footer_menu.footer_nav li a:hover con --color-secundario) que ya ganaba la cascada sobre esta, así que se quita de aquí para no confundir. */ #main_menu.nav li a:hover, #main_menu.nav li.current-menu-item a, #menu_wrapper #nav_wrapper #menu_border_wrapper #main_menu.nav li a:hover { color: var(--color-violeta) !important; } /* Barra bajo la página activa y al pasar el cursor: la del tema quedó pegada al texto al quitar el padding para centrar verticalmente — la sustituimos por una propia. Antes solo existía para la página activa; el tema ponía la de hover con su propio border-bottom (mismo color siempre, #menu_wrapper .nav ul li a:hover{border-color:#222}) — la sustituimos también para poder variar el color por enlace y acercarla al texto. */ #main_menu.nav li a { border-bottom: none !important; position: relative; } #main_menu.nav li.current-menu-item a::after, #main_menu.nav li a:hover::after { content: ''; position: absolute; /* Con inset en % (no 0/0 a ancho completo) para que dos palabras cortas seguidas no se toquen entre sí — se estrecha proporcionalmente al ancho de cada enlace en vez de un margen fijo en px. */ left: 18%; right: 18%; /* A ras del borde inferior real de la barra, no pegada al texto — el hueco varía con el alto de la barra (grande arriba, pequeña al hacer scroll), así que se interpola por scroll igual que el resto (ver --pdc-menu-bar-gap en el