/** * CESEM — main stylesheet v3.1 (dark/light theme system). * Semantic tokens: activa con data-theme="dark" o data-theme="light" en . */ /* ===================================================================== 1. Tokens de color fijos (paleta invariante) ===================================================================== */ :root { --c-navy: #0a1f44; --c-navy-mid: #0f2d5e; --c-blue: #1a56db; --c-blue-light: #3b82f6; --c-blue-glow: rgba(26, 86, 219, 0.22); --c-teal: #0d9488; --c-teal-light: #2dd4bf; --c-teal-glow: rgba(13, 148, 136, 0.18); --c-dark: #060e1c; --c-white: #ffffff; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Plus Jakarta Sans", "Poppins", var(--font-sans); --max-w: 1200px; --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px; --t-fast: 160ms ease; --t-base: 260ms ease; --t-slow: 400ms ease; --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1); --t-theme: 300ms ease; } /* ===================================================================== 2. Tema CLARO (default) ===================================================================== */ :root, [data-theme="light"] { --surface-base: #ffffff; --surface-muted: #f3f4f6; --surface-card: #ffffff; --surface-border: #e5e7eb; --surface-hover: #f9fafb; --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --header-bg: rgba(255, 255, 255, 0.88); --header-bg-solid: rgba(255, 255, 255, 0.97); --header-border: rgba(229, 231, 235, 1); --nav-link-color: #374151; --nav-link-hover: #0a1f44; --nav-link-bg: #f3f4f6; --icon-color: #374151; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18); --shadow-blue: 0 8px 32px var(--c-blue-glow); --logo-color: var(--c-navy); color-scheme: light; } /* ===================================================================== 3. Tema OSCURO ===================================================================== */ [data-theme="dark"] { --surface-base: #071531; --surface-muted: #0a1c3d; --surface-card: #0f2648; --surface-border: rgba(59, 130, 246, 0.15); --surface-hover: rgba(59, 130, 246, 0.08); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #475569; --header-bg: rgba(10, 31, 68, 0.85); --header-bg-solid: rgba(10, 31, 68, 0.98); --header-border: rgba(59, 130, 246, 0.15); --nav-link-color: #cbd5e1; --nav-link-hover: #3b82f6; --nav-link-bg: rgba(59, 130, 246, 0.1); --icon-color: #94a3b8; --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6); --shadow-blue: 0 8px 32px rgba(59, 130, 246, 0.3); --logo-color: #f8fafc; color-scheme: dark; } /* Respetar preferencia del sistema (si no hay selección manual) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-base: #071531; --surface-muted: #0a1c3d; --surface-card: #0f2648; --surface-border: rgba(59, 130, 246, 0.15); --surface-hover: rgba(59, 130, 246, 0.08); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #475569; --header-bg: rgba(10, 31, 68, 0.85); --header-bg-solid: rgba(10, 31, 68, 0.98); --header-border: rgba(59, 130, 246, 0.15); --nav-link-color: #cbd5e1; --nav-link-hover: #3b82f6; --nav-link-bg: rgba(59, 130, 246, 0.1); --icon-color: #94a3b8; --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6); --shadow-blue: 0 8px 32px rgba(59, 130, 246, 0.3); --logo-color: #f8fafc; color-scheme: dark; } } /* .nosotros-mv hardcodea un gradiente blanco→gris claro que no usa ninguna variable de tema, así que nunca se enteraba de que el modo oscuro estaba activo. En vez de aplanarla a un color liso, le damos el mismo tratamiento navy + glow que ya tienen Testimonios/Recursos (.section--dark) en todo momento, para que las secciones "siempre oscuras" del sitio compartan un mismo look consistente — no un negro plano, sino ese azul con textura de fondo. */ [data-theme="dark"] .nosotros-mv { position: relative; background: var(--c-navy); overflow: hidden; } [data-theme="dark"] .nosotros-mv::before, [data-theme="dark"] .nosotros-mv::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 1; } [data-theme="dark"] .nosotros-mv::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } [data-theme="dark"] .nosotros-mv::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } [data-theme="dark"] .nosotros-mv__grid { position: relative; z-index: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nosotros-mv { position: relative; background: var(--c-navy); overflow: hidden; } :root:not([data-theme="light"]) .nosotros-mv::before, :root:not([data-theme="light"]) .nosotros-mv::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; } :root:not([data-theme="light"]) .nosotros-mv::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } :root:not([data-theme="light"]) .nosotros-mv::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } :root:not([data-theme="light"]) .nosotros-mv__grid { position: relative; z-index: 1; } } /* ===================================================================== 2. Reset base ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } #wpadminbar, #wpadminbar *, #wpadminbar *::before, #wpadminbar *::after { box-sizing: content-box; } #wpadminbar img { display: inline-block; max-width: none; } html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--text-primary); background: var(--surface-base); transition: background var(--t-theme), color var(--t-theme); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.has-nav-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; color: var(--text-primary); letter-spacing: -0.02em; transition: color var(--t-theme); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--c-blue); color: var(--c-white); padding: 0.75em 1.25em; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; } /* ===================================================================== 3. Utilidades compartidas ===================================================================== */ /* --- Chip / kicker ---------------------------------------- */ .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; background: linear-gradient(135deg, rgba(26, 86, 219, 0.07) 0%, rgba(13, 148, 136, 0.05) 100%); border: 1px solid rgba(26, 86, 219, 0.18); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 1.1em; transition: background var(--t-theme), border-color var(--t-theme); } .kicker-text { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-teal); flex-shrink: 0; } .kicker--teal .kicker-text { background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kicker--teal::before { background: var(--c-teal); } .kicker--light { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .kicker--light .kicker-text { background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .kicker--light::before { background: var(--c-teal-light); box-shadow: 0 0 8px var(--c-teal); } .kicker--center { display: flex; margin-inline: auto; width: fit-content; } /* --- Secciones -------------------------------------------- */ .section { padding: clamp(72px, 9vw, 112px) 0; background: var(--surface-base); transition: background var(--t-theme); } .section--muted { background: var(--surface-muted); } .section--dark { position: relative; /* Flat color, not a gradient: a diagonal gradient re-evaluates per section box, so the same "navy → dark" gradient on two stacked sections still shows a visible seam where one box's darkest edge meets the next box's lightest edge. A single flat value can never mismatch itself at a shared border — the glow blobs below carry all the visual texture instead. */ background: var(--c-navy); color: var(--c-white); /* Clip the glow blobs to this section's own box. They used to bleed past the top/bottom edge on purpose (to soften the seam), but that left a blurred, unevenly-shaped tint sitting on top of whatever section came next — which read as an extra, messier line instead of a softer one. Contained blobs + the flat background above give a clean, single edge against the neighboring section. */ overflow: hidden; } /* Soft blurred glow blobs — atmosphere instead of a plain flat rectangle. ::before/::after sit behind the real content (z-index below the .container below). */ .section--dark::before, .section--dark::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; } .section--dark::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } .section--dark::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } .section--dark>.container { position: relative; z-index: 1; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-white); } .section__label { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 14px; } .section__label::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(26, 86, 219, 0.25), transparent); } .section__title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 900; max-width: 20ch; line-height: 1.1; } .section__title--wide { max-width: 32ch; } .section__title--full { max-width: none; } .section__title--center { max-width: none; text-align: center; margin-inline: auto; } .section__head { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; margin-bottom: 56px; } .section__lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; max-width: 44ch; transition: color var(--t-theme); } .section__cta { text-align: center; margin-top: 52px; } /* --- Botones ----------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.78em 1.75em; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; border: 2px solid transparent; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; transition: transform var(--t-spring), box-shadow var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); color: var(--c-white); border: none; padding: calc(0.78em + 2px) calc(1.75em + 2px); box-shadow: var(--shadow-blue); } .btn--primary:hover { background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-blue) 100%); box-shadow: 0 12px 40px var(--c-blue-glow); } .btn--outline { border: 2px solid var(--surface-border); color: var(--text-primary); background: var(--surface-card); box-shadow: var(--shadow-sm); } .btn--outline:hover { border-color: var(--c-blue); color: var(--c-blue); background: rgba(26, 86, 219, 0.04); box-shadow: var(--shadow-md); } .btn--outline-white { border-color: rgba(255, 255, 255, 0.35); color: var(--c-white); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } .btn--outline-white:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); } /* Dark Mode Button Overrides */ [data-theme="dark"] .btn--primary { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); color: var(--c-white); box-shadow: 0 4px 20px rgba(13, 148, 136, 0.18); } [data-theme="dark"] .btn--primary:hover { background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-blue) 100%); color: var(--c-white); box-shadow: 0 8px 32px rgba(13, 148, 136, 0.35); } [data-theme="dark"] .btn--outline { border-color: rgba(255, 255, 255, 0.15); color: var(--c-white); background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .btn--outline:hover { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); color: var(--c-white); border-color: transparent; box-shadow: 0 8px 32px rgba(13, 148, 136, 0.35); } .btn--lg { padding: 0.9em 2.1em; font-size: 1rem; border-radius: var(--r-md); } /* --- Media placeholder ------------------------------------ */ .media__placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 200px; height: 100%; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0px 2px, transparent 2px 18px), linear-gradient(145deg, var(--c-navy) 0%, var(--c-navy-mid) 100%); color: rgba(255, 255, 255, 0.55); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 28px; border-radius: var(--r-md); overflow: hidden; } .media__placeholder::before { content: ""; width: 40px; height: 40px; flex-shrink: 0; background: var(--c-blue); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0.9; } .media__placeholder::after { content: ""; position: absolute; bottom: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 86, 219, 0.25), transparent 60%); pointer-events: none; } .media__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); } /* --- Scroll reveal ---------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } /* Used across several section intros (template-nosotros.php, constancias.php, recursos.php) to center a kicker/title/subtitle block — was referenced but never actually defined, so paragraph text inside stayed left-aligned. */ .text-center { text-align: center; } .reveal.is-visible { opacity: 1; transform: none; } .reveal--up { transform: translateY(32px); } .reveal--left { transform: translateX(-32px); } .reveal--right { transform: translateX(32px); } .reveal--scale { transform: scale(0.94); } .reveal.is-visible { transform: none !important; } .d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; } .d5 { transition-delay: 0.40s; } /* ===================================================================== 4. Header ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 200; background: var(--header-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--header-border); transition: background var(--t-theme), box-shadow var(--t-base), border-color var(--t-theme), backdrop-filter var(--t-base); } .site-header.is-scrolled { background: var(--header-bg-solid); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12); } /* Home: header flota como cápsula sobre el hero; al hacer scroll se expande a todo el ancho */ .site-header--overlay { position: fixed; left: 0; right: 0; width: 100%; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .site-header--overlay.is-scrolled { background: var(--header-bg-solid); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: var(--header-border); } .site-header--overlay .site-header__inner { transition: max-width 480ms cubic-bezier(0.16, 1, 0.3, 1), margin 480ms cubic-bezier(0.16, 1, 0.3, 1), padding 480ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 480ms cubic-bezier(0.16, 1, 0.3, 1), background 380ms ease, box-shadow 380ms ease; } .site-header--overlay:not(.is-scrolled) .site-header__inner { max-width: calc(var(--max-w) - 60px); margin-inline: auto; margin-top: 18px; padding: 8px 14px 8px 24px; background: var(--header-bg-solid); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: var(--r-pill); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); } .site-header--overlay.is-scrolled .site-header__inner { /* Same contained width the header uses on every other page (via .container's max-width: var(--max-w)) — previously this jumped to 100% of the viewport on scroll, so the logo/nav visibly shifted position instead of just flattening from the pre-scroll pill shape. */ max-width: var(--max-w); } /* Estas dos reglas son solo para el nav-pill de escritorio dentro del header; en mobile el .nav es el panel de pantalla completa y necesita su propio fondo (ver @media max-width:780px más abajo). */ @media (min-width: 781px) { /* Dentro de la cápsula, la cápsula ya sigue el tema claro/oscuro (var(--header-bg-solid)) */ .site-header--overlay:not(.is-scrolled) .nav { background: transparent; border-color: transparent; } /* Al hacer scroll, la cápsula del nav se aplana sobre el header sólido */ .site-header.is-scrolled .nav { background: transparent; border-color: transparent; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 8px; } /* Logo */ .logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity var(--t-fast); } .logo:hover { opacity: 0.82; } .logo__img { max-height: 54px; width: auto; } .logo__img--dark { display: none; max-height: 40px; } [data-theme="dark"] .logo__img--light { display: none; } [data-theme="dark"] .logo__img--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo__img--light { display: none; } :root:not([data-theme="light"]) .logo__img--dark { display: block; } } .logo--footer { margin-bottom: 16px; } .logo--footer .logo__img { max-height: 56px; width: auto; } .logo--footer .logo__img--dark { max-height: 42px; } .nav__drawer-header { display: none; } /* Navegación - Floating Capsule Style */ .nav { border-radius: var(--r-pill); padding: 4px 6px; transition: background var(--t-theme), border-color var(--t-theme); } .nav__list { display: flex; gap: 4px; } .nav__link { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; padding: 6px 16px; border-radius: var(--r-pill); color: var(--nav-link-color); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); position: relative; } .nav__link:hover { background: var(--surface-hover); color: var(--nav-link-hover); } .nav__link.current-menu-item { background: var(--surface-card); color: var(--c-blue); box-shadow: var(--shadow-xs); } [data-theme="dark"] .nav__link.current-menu-item { color: var(--c-blue-light); } /* Submenús (ej. "Servicios" con sus 4 páginas hijas) */ .nav__item { position: relative; } .submenu-toggle { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: currentColor; flex-shrink: 0; } .menu-item-has-children .submenu-toggle { display: inline-flex; } .submenu-toggle__chevron { transition: transform var(--t-fast); } .submenu-toggle[aria-expanded="true"] .submenu-toggle__chevron { transform: rotate(180deg); } .sub-menu { list-style: none; } @media (min-width: 781px) { .nav__item { display: flex; align-items: center; } /* Bridges the visual gap between the pill link and the dropdown box so the hover state doesn't drop when the mouse crosses it. */ .menu-item-has-children::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } .submenu-toggle { position: relative; margin-left: -8px; width: 18px; pointer-events: none; } .sub-menu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 280px; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 210; } .menu-item-has-children:hover>.sub-menu, .menu-item-has-children:focus-within>.sub-menu, .menu-item-has-children.is-open>.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s; } .sub-menu .nav__link { display: block; white-space: normal; text-align: left; padding: 10px 12px; } .sub-menu .nav__link.current-menu-item { box-shadow: none; } } @media (max-width: 780px) { .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .menu-item-has-children>.nav__link { flex: 1; } .submenu-toggle { pointer-events: auto; flex-shrink: 0; width: 44px; height: 44px; } .sub-menu { flex-basis: 100%; width: 100%; max-height: 0; overflow: hidden; padding-inline: 0; padding-left: 18px; margin-left: 18px; border-left: 2px solid var(--surface-border); display: flex; flex-direction: column; transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1), padding 320ms ease; } .sub-menu li { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } [data-theme="dark"] .sub-menu li { border-bottom-color: rgba(255, 255, 255, 0.06); } .sub-menu li:last-child { border-bottom: none; } .menu-item-has-children.is-open>.sub-menu { max-height: 480px; padding-top: 6px; padding-bottom: 6px; border-left-color: var(--c-blue); } [data-theme="dark"] .menu-item-has-children.is-open>.sub-menu { border-left-color: var(--c-blue-light); } .sub-menu .nav__link { font-size: 0.9rem; font-weight: 500; padding-block: 12px; padding-inline: 8px 12px; color: var(--text-secondary); display: block; } .sub-menu .nav__link:hover { color: var(--text-primary); } .sub-menu .nav__link.current-menu-item { color: var(--c-blue); background: transparent; font-weight: 600; } [data-theme="dark"] .sub-menu .nav__link.current-menu-item { color: var(--c-blue-light); } } /* Acciones */ .site-header__actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--icon-color); transition: background var(--t-fast), color var(--t-fast), transform var(--t-spring); } .icon-btn:hover { background: var(--nav-link-bg); color: var(--nav-link-hover); } .theme-toggle-btn { cursor: pointer; } .theme-toggle-icon { transition: transform var(--t-spring); } .theme-toggle-btn:hover .theme-toggle-icon { transform: rotate(20deg) scale(1.1); } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 38px; height: 38px; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 50%; } .nav-toggle:hover { background: var(--nav-link-bg); } .nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } .nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Buscador — modal centrado con backdrop */ .search-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 20px 40px; overflow-y: auto; } .search-overlay[hidden] { display: none; } .search-overlay__backdrop { position: fixed; inset: 0; background: rgba(6, 9, 19, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .search-modal { position: relative; width: 100%; max-width: 520px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 28px; transition: background var(--t-theme), border-color var(--t-theme); } .search-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .search-modal__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin: 0; } .search-form { display: flex; gap: 10px; } .search-form__input { flex: 1; padding: 0.75em 1em; border: 1.5px solid var(--surface-border); border-radius: var(--r-pill); font-size: 0.95rem; background: var(--surface-muted); color: var(--text-primary); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-theme); } .search-form__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-glow); } .search-form__submit { padding: 0.75em 1.4em; border: none; border-radius: var(--r-pill); background: var(--c-navy); color: #fff; font-family: var(--font-display); font-weight: 700; } .search-modal__section { margin-top: 26px; } .search-modal__label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .search-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; } .search-tag { padding: 7px 16px; border-radius: var(--r-pill); background: var(--surface-muted); border: 1px solid var(--surface-border); color: var(--nav-link-color); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .search-tag:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .search-modal__news { display: flex; flex-direction: column; gap: 4px; } .search-news-item { display: flex; align-items: center; gap: 14px; padding: 8px; margin-inline: -8px; border-radius: var(--r-md); transition: background var(--t-fast); } .search-news-item:hover { background: var(--surface-hover); } .search-news-item__media { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; } .search-news-item__media .media__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .search-news-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search-news-item__title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-news-item__date { font-size: 0.74rem; color: var(--text-muted); } /* Popup modal — video completo bajo demanda ("Ver video completo") */ .video-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; } .video-modal[hidden] { display: none; } .video-modal__backdrop { position: fixed; inset: 0; background: rgba(6, 9, 19, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .video-modal__panel { position: relative; width: 100%; max-width: 960px; } .video-modal__close { position: absolute; top: -48px; right: 0; background: rgba(255, 255, 255, 0.1); color: #fff; } .video-modal__close:hover { background: rgba(255, 255, 255, 0.2); } .video-modal__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); background: #000; } .video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* ===================================================================== 5. Hero — nuevo diseño dramático ===================================================================== */ .hero { position: relative; color: #fff; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(150px, 16vw, 210px); padding-bottom: clamp(72px, 8vw, 96px); overflow: hidden; isolation: isolate; } /* Fondo base */ .hero__media { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 800px 600px at 80% 40%, rgba(26, 86, 219, 0.22) 0%, transparent 60%), radial-gradient(ellipse 400px 400px at 10% 80%, rgba(59, 130, 246, 0.16) 0%, transparent 50%), linear-gradient(145deg, var(--c-dark) 0%, var(--c-navy) 55%, #0e2557 100%); } /* Con foto de fondo */ .hero__media--photo { background-size: cover; background-position: center; } .hero__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__media--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(6, 14, 28, 0.93) 0%, rgba(6, 14, 28, 0.78) 48%, rgba(6, 14, 28, 0.35) 100%); } /* Rejilla decorativa */ .hero__media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; } /* Orbes animados */ .hero::before { content: ""; position: absolute; width: 700px; height: 700px; top: -250px; right: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 86, 219, 0.28) 0%, transparent 65%); z-index: -1; animation: float-orb 12s ease-in-out infinite alternate; } .hero::after { content: ""; position: absolute; width: 400px; height: 400px; bottom: -80px; left: 5%; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, transparent 65%); z-index: -1; animation: float-orb 9s ease-in-out infinite alternate-reverse; } @keyframes float-orb { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 25px) scale(1.1); } } .hero__inner { position: relative; } /* Badge */ .hero__badge { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.12) 0%, rgba(13, 148, 136, 0.1) 100%); border: 1px solid rgba(59, 130, 246, 0.25); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3.2em; } .hero__badge-text { background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-teal-light); box-shadow: 0 0 12px var(--c-teal); animation: dot-pulse 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.75); } } .hero__title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-white); max-width: 20ch; margin-bottom: 0.55em; } .hero__rotator-wrap { display: flex; align-items: center; min-height: 1.2em; } .hero--centered .hero__rotator-wrap { justify-content: center; } .hero__rotator { background: linear-gradient(135deg, var(--c-blue-light) 20%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .hero__rotator-cursor { display: inline-block; width: 3px; height: 0.85em; margin-left: 4px; background: var(--c-blue-light); animation: hero-cursor-blink 1s step-end infinite; } @keyframes hero-cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, 0.72); max-width: 50ch; line-height: 1.7; margin-bottom: 2em; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* Hero variante 2 — layout centrado */ .hero--centered .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero--centered .hero__title { max-width: 34ch; margin-inline: auto; } .hero--centered .hero__subtitle { margin-inline: auto; } .hero--centered .hero__actions { justify-content: center; } .hero__trustedby { margin-top: 56px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; } .hero__trustedby-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .hero__trustedby-track-wrap { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .hero__trustedby-track { display: flex; align-items: center; flex-wrap: nowrap; width: max-content; gap: 56px; animation: hero-trustedby-scroll 32s linear infinite; } .hero__trustedby-track:hover { animation-play-state: paused; } @keyframes hero-trustedby-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero__trustedby-logo { height: 132px; width: auto; max-width: 300px; object-fit: contain; flex-shrink: 0; filter: grayscale(1) brightness(0) invert(1); opacity: 0.6; transition: opacity var(--t-base); } .hero__trustedby-logo:hover { opacity: 0.9; } .hero__trustedby-text { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; flex-shrink: 0; } /* Guía de scroll — mouse clickeable que baja a la siguiente sección */ .hero__scroll-cue { margin-top: 48px; display: inline-flex; align-items: center; justify-content: center; } .hero__scroll-cue-mouse { width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-pill); display: flex; justify-content: center; padding-top: 8px; transition: border-color var(--t-fast), transform var(--t-spring); } .hero__scroll-cue:hover .hero__scroll-cue-mouse { border-color: rgba(255, 255, 255, 0.85); transform: translateY(2px); } .hero__scroll-cue-dot { width: 4px; height: 8px; border-radius: 2px; background: #fff; animation: hero-scroll-cue-dot 1.8s ease-in-out infinite; } @keyframes hero-scroll-cue-dot { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0.25; } 100% { transform: translateY(14px); opacity: 0; } } /* Quicklinks Card Layout */ .hero__quicklinks-wrap { margin-top: 56px; } .hero-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); transform: translateY(32px); margin-bottom: -32px; overflow: hidden; transition: background var(--t-theme), border-color var(--t-theme); } .hero-quicklink { display: flex; align-items: center; gap: 16px; padding: 24px 22px; color: var(--text-primary); position: relative; transition: background var(--t-base), color var(--t-fast); border-right: 1px solid var(--surface-border); } .hero-quicklink:last-child { border-right: none; } .hero-quicklink::before { content: ""; position: absolute; inset-x: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c-blue), var(--c-teal)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); } .hero-quicklink:hover { background: var(--surface-hover); } .hero-quicklink:hover::before { transform: scaleX(1); } .hero-quicklink__icon { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: var(--r-sm); color: var(--c-blue); transition: background var(--t-base), color var(--t-base), border-color var(--t-base); } .hero-quicklink:hover .hero-quicklink__icon { background: var(--c-blue); color: #fff; border-color: transparent; } .hero-quicklink__content { display: flex; flex-direction: column; flex: 1; gap: 3px; } .hero-quicklink__label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); line-height: 1.2; } .hero-quicklink__desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.35; } .hero-quicklink__arrow { color: var(--text-faint); font-size: 1.1rem; transition: transform var(--t-spring), color var(--t-base); } .hero-quicklink:hover .hero-quicklink__arrow { transform: translateX(4px); color: var(--c-blue); } /* ===================================================================== 6. Nosotros / About — grid dividido con decoración premium ===================================================================== */ .about-section { padding: clamp(100px, 12vw, 140px) 0 clamp(72px, 9vw, 112px); position: relative; overflow: hidden; } /* Fondo decorativo sutil */ .about-bg-decor { position: absolute; top: -10%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(26, 86, 219, 0.03) 0%, transparent 70%); pointer-events: none; z-index: 0; } .about-wrap { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; } /* Gradiente de texto */ .text-gradient { background: linear-gradient(135deg, var(--c-blue) 20%, var(--c-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .about__title { font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 0.5em; color: var(--text-primary); } .about__body { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; transition: color var(--t-theme); } .about__body p { margin: 0 0 0.8em; } .about__lead { font-size: 1.15rem; font-weight: 500; line-height: 1.7; color: var(--text-primary); } /* Tarjeta destacada tipo glassmorphism */ .about__card { position: relative; margin: 20px 0; padding: 16px 20px 16px 56px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.04) 0%, rgba(13, 148, 136, 0.03) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--surface-border); border-left: 4px solid var(--c-blue); border-radius: var(--r-md); transition: all var(--t-base); } .about__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(26, 86, 219, 0.25); border-left-color: var(--c-teal); background: linear-gradient(135deg, rgba(26, 86, 219, 0.06) 0%, rgba(13, 148, 136, 0.05) 100%); } .about__card-icon { position: absolute; top: 16px; left: 18px; color: var(--c-blue); opacity: 0.25; transition: transform var(--t-spring), color var(--t-base), opacity var(--t-base); } .about__card:hover .about__card-icon { transform: scale(1.1) rotate(-8deg); color: var(--c-teal); opacity: 0.45; } .about__card-content p { margin: 0; font-weight: 600; font-style: italic; font-size: 0.96rem; color: var(--text-primary); line-height: 1.6; } /* Área de acciones / botones */ .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 24px; } /* Botón con flecha animada */ .btn--has-arrow { display: inline-flex; align-items: center; gap: 8px; } .btn__arrow { transition: transform var(--t-spring); } .btn--has-arrow:hover .btn__arrow { transform: translateX(4px); } /* Botón con icono de reproducción (play) */ .btn--has-play { display: inline-flex; align-items: center; gap: 10px; } .btn__play-icon { transition: transform var(--t-spring); flex-shrink: 0; } .btn--has-play:hover .btn__play-icon { transform: scale(1.15); } /* Enlace secundario */ .btn-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--c-blue); transition: color var(--t-base), transform var(--t-base); padding: 8px 12px; border-radius: var(--r-sm); } .btn-link svg { transition: transform var(--t-spring), stroke var(--t-base); stroke: var(--c-blue); } .btn-link:hover { color: var(--c-teal); } .btn-link:hover svg { transform: translate(2px, -2px); stroke: var(--c-teal); } /* Contenedor de Medios con Capas */ .about__media-container { position: relative; padding: 20px; } /* Cuadrícula de puntos decorativa */ .about__grid-dots { position: absolute; top: 0; right: 0; width: 140px; height: 140px; background-image: radial-gradient(var(--surface-border) 2px, transparent 2.5px); background-size: 16px 16px; opacity: 0.7; z-index: 1; pointer-events: none; } [data-theme="dark"] .about__grid-dots { opacity: 0.35; background-image: radial-gradient(var(--c-blue) 1.5px, transparent 2px); } /* Resplandor decorativo de fondo */ .about__glow { position: absolute; bottom: 10%; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(26, 86, 219, 0.12) 0%, transparent 70%); filter: blur(40px); z-index: 0; pointer-events: none; } [data-theme="dark"] .about__glow { background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 75%); } .about__media-wrap { position: relative; z-index: 2; transition: transform var(--t-slow); } /* Slideshow: imágenes apiladas que rotan solas con crossfade */ .about__media-wrap.about__media-wrap--slideshow .media__img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; /* Especificidad reforzada (doble clase) para ganarle a la transition de box-shadow/border-color de la regla general de más abajo. */ transition: opacity 1.6s ease-in-out, box-shadow var(--t-base), border-color var(--t-base); } .about__media-wrap.about__media-wrap--slideshow .media__img.is-active { opacity: 1; z-index: 2; } .about__media-wrap .media__placeholder, .about__media-wrap .media__img { min-height: 380px; border-radius: var(--r-xl); box-shadow: var(--shadow-xl), 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.5); transition: box-shadow var(--t-base), border-color var(--t-base); } [data-theme="dark"] .about__media-wrap .media__placeholder, [data-theme="dark"] .about__media-wrap .media__img { border-color: rgba(59, 130, 246, 0.15); } .about__media-container:hover .about__media-wrap { transform: translateY(-4px); } .about__media-container:hover .about__media-wrap .media__placeholder, .about__media-container:hover .about__media-wrap .media__img { box-shadow: 0 30px 60px rgba(10, 31, 68, 0.22); } [data-theme="dark"] .about__media-container:hover .about__media-wrap .media__placeholder, [data-theme="dark"] .about__media-container:hover .about__media-wrap .media__img { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); } /* Badge flotante modernizado con Glassmorphism */ .about__badge { position: absolute; bottom: -15px; left: -15px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--r-lg); padding: 18px 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), var(--shadow-lg); display: flex; align-items: center; gap: 16px; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.6); transition: transform var(--t-spring), background var(--t-theme), border-color var(--t-theme), box-shadow var(--t-theme); } [data-theme="dark"] .about__badge { background: rgba(18, 32, 57, 0.85); border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), var(--shadow-lg); } .about__badge-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); color: var(--c-white); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 16px rgba(26, 86, 219, 0.25); } .about__badge-text { font-family: var(--font-display); } .about__badge-text strong { display: block; font-size: 1.2rem; font-weight: 900; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 2px; } .about__badge-text span { display: block; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; line-height: 1.2; } /* Efecto hover contrario en el badge flotante para simular paralaje */ .about__media-container:hover .about__badge { transform: translate(6px, 6px); } /* Decoración geométrica secundaria */ .about__deco { position: absolute; top: -20px; right: -20px; width: 90px; height: 90px; background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-blue) 100%); border-radius: var(--r-lg); opacity: 0.12; z-index: -1; transition: transform var(--t-slow); } .about__media-container:hover .about__deco { transform: translate(-10px, 10px) rotate(15deg); } /* ===================================================================== 7. Stats — banner visual impactante ===================================================================== */ .stats { background: radial-gradient(ellipse at 0% 50%, rgba(13, 148, 136, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 100% 50%, rgba(26, 86, 219, 0.12) 0%, transparent 50%), linear-gradient(135deg, rgba(10, 31, 68, 0.92) 0%, rgba(6, 14, 28, 0.95) 100%), url('../images/square-5165633_1920.jpg') center/cover no-repeat fixed; padding-block: 64px; position: relative; overflow: hidden; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } [data-theme="dark"] .stats { border-top: 1px solid rgba(59, 130, 246, 0.15); border-bottom: 1px solid rgba(59, 130, 246, 0.15); background: radial-gradient(ellipse at 0% 50%, rgba(13, 148, 136, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 100% 50%, rgba(26, 86, 219, 0.08) 0%, transparent 50%), linear-gradient(135deg, rgba(9, 23, 48, 0.92) 0%, rgba(5, 11, 20, 0.95) 100%), url('../images/square-5165633_1920.jpg') center/cover no-repeat fixed; } .stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 36px 36px; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; } .stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; position: relative; color: var(--c-white); } .stats__item+.stats__item::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent); } .stats__number { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; min-height: 1.2em; /* prevent jump while empty */ } .stats__label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--c-white); } .stats__sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); margin-top: 4px; } .stats__divider { display: none; } /* Texto placeholder cuando stats están vacíos */ .stats__number:empty::after { content: "—"; -webkit-text-fill-color: rgba(255, 255, 255, 0.25); background: none; } /* ===================================================================== 8. Servicios — grid visual rico ===================================================================== */ .services-centered-header { text-align: center; position: relative; margin-bottom: 64px; z-index: 2; } /* Outlined background text "SERVICIOS" */ .services-header-content { position: relative; z-index: 1; } /* Services Grid */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; max-width: 1080px; margin-left: auto; margin-right: auto; } /* Service Card */ .service-card { position: relative; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base), background var(--t-theme); z-index: 1; display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 20px 40px rgba(26, 86, 219, 0.04); border-color: var(--theme-color-border); } [data-theme="dark"] .service-card:hover { box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.3); } /* Color theme mappings */ .bento-theme-blue { --theme-color: var(--c-blue); --theme-color-light: var(--c-blue-light); --theme-color-glow: rgba(26, 86, 219, 0.08); --theme-color-border: rgba(26, 86, 219, 0.25); } .bento-theme-teal { --theme-color: var(--c-teal); --theme-color-light: var(--c-teal-light); --theme-color-glow: rgba(13, 148, 136, 0.08); --theme-color-border: rgba(13, 148, 136, 0.25); } .bento-theme-indigo { --theme-color: #6366f1; --theme-color-light: #818cf8; --theme-color-glow: rgba(99, 102, 241, 0.08); --theme-color-border: rgba(99, 102, 241, 0.25); } .bento-theme-emerald { --theme-color: #10b981; --theme-color-light: #34d399; --theme-color-glow: rgba(16, 185, 129, 0.08); --theme-color-border: rgba(16, 185, 129, 0.25); } .service-card__glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, var(--theme-color-glow) 0%, transparent 60%); opacity: 0; z-index: -1; transition: opacity var(--t-slow); pointer-events: none; } .service-card:hover .service-card__glow { opacity: 1; } .service-card__body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 35px; flex-grow: 1; } .service-card__main-content { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 24px; } .service-card__icon-wrap { width: 56px; height: 56px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(26, 86, 219, 0.06) 0%, rgba(13, 148, 136, 0.04) 100%); border: 1px solid rgba(26, 86, 219, 0.15); color: var(--theme-color); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 26px; transition: background var(--t-theme), color var(--t-theme), border-color var(--t-theme), transform var(--t-spring); } [data-theme="dark"] .service-card__icon-wrap { background: linear-gradient(135deg, rgba(26, 86, 219, 0.12) 0%, rgba(13, 148, 136, 0.1) 100%); border-color: rgba(255, 255, 255, 0.1); color: var(--theme-color-light); } .service-card:hover .service-card__icon-wrap { transform: scale(1.08) rotate(3deg); background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color-light) 100%); color: var(--c-white); border-color: transparent; box-shadow: 0 8px 24px var(--theme-color-glow); } .service-card__title { font-size: 1.20rem; font-weight: 800; color: var(--text-primary); line-height: 1.35; margin-bottom: 12px; font-family: var(--font-display); } .service-card__desc { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; } /* Checklist styling */ .service-card__checklist { list-style: none; padding: 0; margin: 0 0 8px 0; display: flex; flex-direction: column; gap: 12px; width: 100%; } .service-card__checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); } .service-card__check-icon { color: var(--theme-color); font-weight: 900; font-size: 0.95rem; transition: color var(--t-theme); } [data-theme="dark"] .service-card__check-icon { color: var(--theme-color-light); } /* Link Saber más */ .service-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-color); transition: color var(--t-fast); margin-top: auto; } [data-theme="dark"] .service-card__link { color: var(--theme-color-light); } .service-card__arrow { transition: transform var(--t-spring); } .service-card__link:hover { color: var(--text-primary); } .service-card__link:hover .service-card__arrow { transform: translateX(4px); } /* Responsive for services-grid */ @media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 640px; } } @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; gap: 20px; } .service-card__body { padding: 28px; } } /* Casos de Éxito (template-parts/casos-exito.php) reusa las clases de .project-card / .cards-grid--projects tal cual (misma tarjeta con foto, tag y footer con flecha que ya se ve en Proyectos) — solo necesita un color propio para el tag de "cliente" para distinguirlo de las categorías de proyecto. */ .project-card__tag--cliente { color: #b45309; background: rgba(180, 83, 9, 0.1); } /* ===================================================================== 9. Impact / CTA — dark section con gradiente ===================================================================== */ .impact { position: relative; padding: clamp(72px, 10vw, 120px) 0; /* Mismo fondo que .section--dark (Testimonios/Recursos) al pixel — antes cada sección "siempre oscura" tenía su propio gradiente/ángulo/ color de blob, y se notaba la inconsistencia. Estandarizado. */ background: var(--c-navy); color: var(--c-white); /* Contiene los blobs dentro de esta sección — antes se dejaban asomar fuera a propósito para "suavizar" la costura, pero eso terminaba pintando un parche difuminado sobre la sección siguiente, que se veía como una línea peor, no mejor. */ overflow: hidden; } /* Mismos blobs, mismas posiciones y colores que .section--dark. */ .impact::before, .impact::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; } .impact::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } .impact::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } .impact__grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; } .impact__text h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--c-white); font-weight: 900; letter-spacing: -0.03em; } .impact__text>p { color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; line-height: 1.72; max-width: 46ch; } .checklist { margin: 28px 0; display: flex; flex-direction: column; gap: 16px; } .checklist li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, 0.85); font-size: 0.97rem; line-height: 1.6; } .checklist__icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; background: var(--c-teal); color: var(--c-white); border-radius: 50%; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; margin-top: 2px; box-shadow: 0 0 18px rgba(13, 148, 136, 0.45); } .impact__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .impact__media { position: relative; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 16/10; box-shadow: 0 32px 80px rgba(6, 14, 28, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform var(--t-spring), border-color var(--t-base), box-shadow var(--t-base); } .impact__media:hover { transform: translateY(-4px) scale(1.01); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 40px 90px rgba(6, 14, 28, 0.7); } .impact__media .media__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); display: block; } .impact__media:hover .media__img { transform: scale(1.04); } /* ===================================================================== 10. Proyectos — grid masonry-like ===================================================================== */ .cards-grid--projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; /* "stretch" (el default de grid) forzaba a cada tarjeta a la altura de la fila completa — inofensivo cuando todas miden lo mismo, pero en cuanto la destacada (grid-column: span 2, foto más alta) comparte fila con una tarjeta normal, esa tarjeta normal se estiraba y su contenido quedaba flotando con un hueco vacío antes del footer. "start" deja que cada tarjeta mida lo que su propio contenido pide. */ align-items: start; } .project-card { border-radius: var(--r-xl); overflow: hidden; background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base), background var(--t-theme); display: flex; flex-direction: column; height: 100%; } .project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.05); border-color: rgba(26, 86, 219, 0.2); } [data-theme="dark"] .project-card:hover { box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.3); border-color: rgba(59, 130, 246, 0.25); } .project-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; } /* Banner con foto de fondo para cabeceras de página interior (ej. Proyectos): más compacto que el .hero de la home, que asume un header transparente superpuesto — acá el .site-header es sticky normal, así que no hace falta el padding-top gigante del hero principal. */ .page-banner { position: relative; overflow: hidden; isolation: isolate; color: var(--c-white); padding: clamp(56px, 7vw, 84px) 0 clamp(44px, 5vw, 64px); } .page-banner__media { position: absolute; inset: 0; z-index: -1; background: var(--c-navy); } .page-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-banner__media::after { content: ""; position: absolute; inset: 0; /* Vertical (no diagonal) para que el contraste sea parejo en toda la fila horizontal — el contenido ahora está centrado, así que ya no podemos apoyarnos en un lado siempre oscuro y el otro siempre claro. */ background: linear-gradient(180deg, rgba(6, 14, 28, 0.7) 0%, rgba(6, 14, 28, 0.88) 100%); } .page-banner__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .page-banner__title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-white); margin: 0 0 12px 0; max-width: 28ch; } .page-banner__subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.78); max-width: 58ch; line-height: 1.65; margin: 0; } /* .section trae un padding-top pensado para venir después de otro bloque blanco (72–112px). Detrás de un .page-banner ya oscuro y con su propio padding inferior, esos dos paddings se suman y dejan un salto de vacío antes de los tabs. */ .page-banner + .section { padding-top: clamp(32px, 4vw, 48px); } /* Tarjeta "Destacado" — resalta un proyecto en la grilla (marcado desde el checkbox "_cesem_destacado" en el admin del proyecto). */ .project-card--featured { grid-column: span 2; border-color: rgba(26, 86, 219, 0.25); box-shadow: var(--shadow-md), 0 0 0 1px rgba(26, 86, 219, 0.12); } .project-card--featured:hover { border-color: rgba(26, 86, 219, 0.4); } /* La destacada es el doble de ancha, así que su media hereda un aspect-ratio 16/10 (pensado para 1 columna) y se vuelve desproporcionadamente alta. Un formato más panorámico la mantiene como una "portada", no un póster. */ .project-card--featured .project-card__media { aspect-ratio: 2/1; } .project-card__badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-white); background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-blue) 100%); padding: 6px 12px; border-radius: var(--r-pill); box-shadow: 0 4px 14px rgba(26, 86, 219, 0.45); } .project-card__media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--c-navy); } .project-card__media .media__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .project-card:hover .project-card__media .media__img { transform: scale(1.06); } /* Galería de fotos de servicio (template-parts/servicio-galeria.php) */ .servicio-galeria__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .servicio-galeria__item { aspect-ratio: 4/3; overflow: hidden; margin: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-xs); background: var(--c-navy); } .servicio-galeria__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); } .servicio-galeria__item:hover .servicio-galeria__img { transform: scale(1.06); } /* Custom Placeholder for Projects */ .project-card__placeholder { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .project-placeholder__bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--c-navy-mid) 0%, #1e3a8a 50%, var(--c-blue) 100%); transition: transform var(--t-slow), filter var(--t-slow); } /* Custom gradients based on category */ .project-placeholder--salud .project-placeholder__bg { background: linear-gradient(135deg, #310a14 0%, #7f1d1d 50%, #b91c1c 100%); } .project-placeholder--educacion .project-placeholder__bg { background: linear-gradient(135deg, #062f21 0%, #065f46 50%, #0f766e 100%); } .project-placeholder--gobierno-local .project-placeholder__bg { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); } .project-placeholder__circle { position: relative; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); transition: transform var(--t-spring), background var(--t-base), border-color var(--t-base); z-index: 2; } /* Hover effects for placeholder */ .project-card:hover .project-placeholder__bg { transform: scale(1.08); filter: brightness(1.15); } .project-card:hover .project-placeholder__circle { transform: scale(1.12) rotate(-5deg); background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3); } .project-card__body { padding: 26px 24px; display: flex; flex-direction: column; flex-grow: 1; background: var(--surface-card); } .project-card__tag { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 12px; align-self: flex-start; transition: transform var(--t-fast); color: var(--c-blue); background: var(--c-blue-glow); } /* Dynamic colors for categories */ .project-card__tag[data-category="salud"] { color: #f43f5e; background: rgba(244, 63, 94, 0.08); } .project-card__tag[data-category="educacion"] { color: #10b981; background: rgba(16, 185, 129, 0.08); } .project-card__tag[data-category="gobierno-local"] { color: #6366f1; background: rgba(99, 102, 241, 0.08); } .project-card__tag[data-category="agropecuario-y-desarrollo-rural"] { color: #16a34a; background: rgba(22, 163, 74, 0.08); } .project-card__tag[data-category="educacion-y-fortalecimiento-de-capacidades"] { color: #10b981; background: rgba(16, 185, 129, 0.08); } .project-card__tag[data-category="gestion-publica-y-planificacion-territorial"] { color: #6366f1; background: rgba(99, 102, 241, 0.08); } .project-card__tag[data-category="desarrollo-empresarial-proveedores-y-empleabilidad"] { color: #1a56db; background: rgba(26, 86, 219, 0.08); } .project-card__tag[data-category="programas-hudbay"] { color: #d97706; background: rgba(217, 119, 6, 0.08); } .project-card__tag[data-category="proyectos-productivos-y-empresariales"] { color: #16a34a; background: rgba(22, 163, 74, 0.08); } .project-card__tag[data-category="proyectos-de-desarrollo"] { color: #6366f1; background: rgba(99, 102, 241, 0.08); } .project-card__tag[data-category="servicios-empresariales"] { color: #1a56db; background: rgba(26, 86, 219, 0.08); } .project-card__title { margin: 0 0 10px 0; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); line-height: 1.35; transition: color var(--t-fast); } .project-card:hover .project-card__title { color: var(--c-blue-light); } .project-card__client { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px 0; } .project-card__excerpt { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 20px 0; } .project-card__footer { display: flex; align-items: center; font-size: 0.75rem; font-weight: 800; color: var(--c-blue); text-transform: uppercase; letter-spacing: 0.05em; gap: 6px; margin-top: auto; transition: color var(--t-fast); } [data-theme="dark"] .project-card__footer { color: var(--c-blue-light); } .project-card__footer-arrow { transition: transform var(--t-spring); } .project-card:hover .project-card__footer-arrow { transform: translateX(4px); } /* ===================================================================== 11. Equipo — cards elegantes ===================================================================== */ .team-marquee-wrap { width: 100%; overflow: hidden; position: relative; padding-block: 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .team-marquee-track { display: flex; width: max-content; } .team-marquee-list { display: flex; align-items: stretch; gap: 28px; padding-right: 28px; animation: team-marquee-scroll 35s linear infinite; } .team-marquee-track:hover .team-marquee-list { animation-play-state: paused; } @keyframes team-marquee-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } .team-card { width: 290px; flex-shrink: 0; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--surface-border); box-shadow: 0 10px 30px rgba(6, 14, 28, 0.02); transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base); background: var(--surface-card); display: flex; flex-direction: column; } .team-card:hover { transform: translateY(-8px); box-shadow: 0 22px 45px rgba(6, 14, 28, 0.12); border-color: rgba(26, 86, 219, 0.2); } .team-card__media-wrap { position: relative; aspect-ratio: 1/1; /* Modern square portrait aspect ratio */ overflow: hidden; background: var(--surface-muted); } .team-card__image, .team-card__media-wrap .media__img, .team-card__media-wrap .media__placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .team-card:hover .team-card__image, .team-card:hover .team-card__media-wrap .media__img { transform: scale(1.05); } .team-card__content { padding: 24px; display: flex; flex-direction: column; text-align: left; flex-grow: 1; } .team-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: var(--text-primary); margin: 0 0 4px 0; } .team-card__role { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 20px 0; } .team-card__social { display: flex; gap: 12px; margin-top: auto; } .team-card__social-link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); padding: 10px 14px; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-spring), box-shadow var(--t-fast); border: 1px solid transparent; } .team-card__social-icon { flex-shrink: 0; transition: transform var(--t-fast); } .team-card__social-link--linkedin { background: linear-gradient(135deg, rgba(26, 86, 219, 0.05) 0%, rgba(26, 86, 219, 0.08) 100%); border-color: rgba(26, 86, 219, 0.12); color: var(--c-blue); } .team-card__social-link--linkedin:hover { background: var(--c-blue); border-color: transparent; color: var(--c-white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2); } .team-card__social-link--email { background: linear-gradient(135deg, rgba(13, 148, 136, 0.05) 0%, rgba(13, 148, 136, 0.08) 100%); border-color: rgba(13, 148, 136, 0.12); color: var(--c-teal); } .team-card__social-link--email:hover { background: var(--c-teal); border-color: transparent; color: var(--c-white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2); } .team-card__social-link:hover .team-card__social-icon { transform: scale(1.1); } /* ===================================================================== 11b. Testimonios — quote cards ===================================================================== */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .testimonial-card { position: relative; padding: 32px 28px 26px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: transform var(--t-spring), box-shadow var(--t-base), background var(--t-theme), border-color var(--t-theme); } .testimonial-card:hover { transform: translateY(-6px); border-color: rgba(26, 86, 219, 0.25); box-shadow: 0 20px 40px -15px rgba(26, 86, 219, 0.12), var(--shadow-xl); } .testimonial-card__quote-mark { display: inline-block; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.85; margin-bottom: 4px; } .testimonial-card__text { font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 24px; } .testimonial-card__author { display: flex; align-items: center; gap: 14px; } .testimonial-card__avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; overflow: hidden; } .testimonial-card__name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; color: var(--text-primary); line-height: 1.3; } .testimonial-card__role { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .testimonial-card__empresa { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-teal); background: rgba(13, 148, 136, 0.1); border: 1px solid rgba(13, 148, 136, 0.25); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; } /* ===================================================================== 12. Socios — logo strip elegante ===================================================================== */ .partners-wrap { position: relative; } .partners-intro { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; } .partners-intro__line { flex: 1; height: 1px; background: var(--surface-border); min-width: 60px; } .partners-track-wrap { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .partners-track { display: flex; align-items: stretch; flex-wrap: nowrap; width: max-content; gap: 20px; animation: partners-scroll 36s linear infinite; } .partners-track:hover { animation-play-state: paused; } @keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .partners__item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 290px; padding: 24px; /* Fixed white, not var(--surface-card): these are full-color client logos, not the white-silhouette kind, so the card must stay white even in dark theme or the logos lose their contrast. */ background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: var(--r-xl); transition: transform var(--t-spring), border-color var(--t-base), box-shadow var(--t-base); min-height: 165px; } .partners__item:hover { transform: scale(1.05); border-color: var(--c-blue); box-shadow: var(--shadow-blue); } .partners__img { max-height: 84px; width: auto; max-width: 100%; margin: auto; } .partners__img--lg { max-height: 135px; } .partners__img--md { max-height: 104px; } .partners__img--xl { max-height: 165px; } .partners__text { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); text-align: center; line-height: 1.3; } /* ===================================================================== 13. Recursos / documentos — listado estructurado ===================================================================== */ .resource-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-left: auto; margin-right: auto; } .resource-list__item { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--surface-card); border: 1.5px solid var(--surface-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); transition: transform var(--t-spring), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .resource-list__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } .resource-list__icon { font-size: 24px; flex-shrink: 0; color: var(--c-blue-light); } .resource-list__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .resource-list__title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); line-height: 1.35; } .resource-list__desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; } .resource-list__link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-blue); white-space: nowrap; transition: color var(--t-fast), transform var(--t-spring); } .resource-list__link:hover { color: var(--c-teal); transform: translateX(3px); } @media (max-width: 600px) { .resource-list__item { flex-wrap: wrap; } .resource-list__link { margin-left: 42px; } } /* ===================================================================== 14. FAQ — acordeón moderno ===================================================================== */ .faq-layout { display: grid; grid-template-columns: 1fr; gap: 56px; } .faq__intro-title { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.12; max-width: 20ch; } .faq__intro p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 0.75em 0 0; } .faq__list { display: flex; flex-direction: column; gap: 10px; } .faq__item { background: var(--surface-card); border: 1.5px solid var(--surface-border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-theme); } .faq__item[open] { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-glow); } .faq__question { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 0.97rem; color: var(--text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; gap: 16px; transition: color var(--t-fast); } .faq__question::-webkit-details-marker { display: none; } .faq__question::after { content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--c-blue); flex-shrink: 0; line-height: 1; transition: transform var(--t-base); } .faq__item[open] .faq__question { color: var(--c-blue); } .faq__item[open] .faq__question::after { transform: rotate(45deg); } .faq__answer { color: var(--text-muted); padding: 0 22px 20px; font-size: 0.95rem; line-height: 1.72; } /* ===================================================================== 15. Contacto — layout 2 columnas con diseño premium ===================================================================== */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } .contact__info {} .contact__info h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 0.75em; } .contact__info>p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; margin-bottom: 32px; } .contact-details { display: flex; flex-direction: column; gap: 14px; } .contact-detail { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: var(--r-lg); font-size: 0.9rem; color: var(--text-secondary); } .contact-detail__icon { width: 40px; height: 40px; background: var(--c-navy); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--c-white); flex-shrink: 0; font-size: 1rem; } .contact-detail a { color: var(--c-blue); font-weight: 600; } .contact-detail a:hover { text-decoration: underline; } /* En tema oscuro el azul de link se pierde contra el navy del sitio (todo alrededor ya es azul) — se leen igual que texto normal en vez de destacar como algo clickeable. Los pasamos a blanco para que contrasten, y el hover pasa a teal (el acento que ya usa el resto del sitio) para seguir marcando la interacción. */ [data-theme="dark"] .contact-detail a { color: var(--c-white); } [data-theme="dark"] .contact-detail a:hover { color: var(--c-teal-light); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-detail a { color: var(--c-white); } :root:not([data-theme="light"]) .contact-detail a:hover { color: var(--c-teal-light); } } /* Tarjeta de formulario */ .contact-card { background: var(--surface-card); border-radius: var(--r-2xl); padding: 40px; box-shadow: var(--shadow-xl); border: 1px solid var(--surface-border); transition: background var(--t-theme), border-color var(--t-theme); } .contact-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; color: var(--text-primary); margin-bottom: 28px; letter-spacing: -0.02em; } .contact-form { display: flex; flex-direction: column; gap: 14px; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.02em; } .contact-form input, .contact-form textarea { width: 100%; padding: 0.82em 1em; border: 1.5px solid var(--surface-border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-primary); background: var(--surface-muted); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-glow); background: var(--surface-card); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-faint); } .contact-form textarea { resize: vertical; } .contact-form__submit { align-self: flex-end; width: 100%; justify-content: center; } .contact__map { margin-top: 20px; } .contact__map iframe { width: 100%; height: 340px; border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-sm); } /* #proyectos y #contacto son secciones "claras" normales (usan --surface-base), pero en el flujo de la home quedan pegadas a Constancias y Recursos, que son secciones "siempre oscuras" (.section--dark, fondo --c-navy). En tema oscuro --surface-base y --c-navy son dos azules ligeramente distintos, así que el borde compartido se veía como un corte duro. Igualamos su fondo al mismo navy de sus vecinas para que toda la franja se lea como un solo bloque continuo. */ [data-theme="dark"] #proyectos, [data-theme="dark"] #contacto { background: var(--c-navy); } /* Recursos (#recursos) es, en realidad, una sección "clara" normal (class="section", NO section--dark) — a pesar de lo que dice el comentario de abajo, nunca tuvo su fondo igualado al navy de Constancias. Mismo corte duro de siempre, en la costura del final de la home. */ [data-theme="dark"] #recursos { background: var(--c-navy); } [data-theme="dark"] #recursos > .container { position: relative; z-index: 1; } /* Igualar el fondo no alcanzaba: los blobs de brillo de Constancias/ Recursos (.section--dark::before/::after) se recortan en seco contra su propio borde (overflow: hidden), así que el brillo aparecía/ desaparecía de golpe en la costura. Duplicar un blob "espejado" en la sección vecina tampoco funcionó: el offset en % se calcula sobre la altura de CADA sección, y como Proyectos/Contacto no miden lo mismo que Constancias/Recursos, los dos blobs no coincidían — quedaba una línea justo donde terminaba uno y empezaba el otro. La solución real es dejar que sea el MISMO blob el que cruce el borde: como el vecino ahora tiene el mismo navy de fondo, ya no hay riesgo de que el blob "manche" una sección de otro color, así que le quitamos el overflow: hidden a Constancias/Recursos para que su brillo se difumine libremente hacia el vecino. El contenido de Proyectos/Contacto queda protegido con z-index para que el blob pase detrás, no encima. Asociados Fundadores (.nosotros-trustedby) queda literalmente entre Proyectos y Contacto, así que tiene el mismo problema y se resuelve igual — sin sumar overrides nuevos, ya que sus vecinos son los mismos que arriba. */ [data-theme="dark"] #constancias, [data-theme="dark"] #recursos, [data-theme="dark"] .nosotros-trustedby { overflow: visible; } [data-theme="dark"] #proyectos > .container, [data-theme="dark"] #contacto > .container { position: relative; z-index: 1; } /* asociados-fundadores.php también se incluye en template-nosotros.php, donde sus vecinos NO son Proyectos/Contacto sino #historia (arriba) y #clientes (abajo, template-parts/socios.php) — ninguno de los dos estaba en la lista de arriba, así que en esa página la costura seguía sin arreglar. Mismos 3 pasos, mismos vecinos nuevos. */ [data-theme="dark"] #historia, [data-theme="dark"] #clientes { background: var(--c-navy); } [data-theme="dark"] #historia > .container, [data-theme="dark"] #clientes > .container { position: relative; z-index: 1; } /* #clientes ya comparte el mismo navy que su vecino de ABAJO también: #mision-vision-valores (.nosotros-mvv) es otra sección "siempre oscura", así que el color ya coincide — pero .nosotros-mvv nunca perdió su overflow: hidden, así que su propio blob superior se recortaba en seco justo en esa costura. Le sumamos overflow: visible igual que a Constancias/Recursos/Trustedby; #clientes>.container ya quedó protegido con z-index arriba, así que no hace falta nada más. */ [data-theme="dark"] .nosotros-mvv { overflow: visible; } /* .nosotros-mvv también tiene un vecino de ABAJO sin arreglar: #pilares (.nosotros-section.nosotros-pilares) es una sección "clara" normal, así que en tema oscuro mostraba --surface-base en vez de --c-navy — la misma costura de siempre, ahora un piso más abajo en la página. */ [data-theme="dark"] #pilares { background: var(--c-navy); } [data-theme="dark"] #pilares > .container { position: relative; z-index: 1; } /* Mismo problema, mismo arreglo: .impact ("Creada por y para...") es otra sección "siempre oscura" (fondo --c-navy) que en tema oscuro queda pegada arriba a #servicios (.section--muted, fondo --surface-muted) — otro azul cercano pero distinto, con el mismo blob superior de .impact recortándose en seco en la costura. */ [data-theme="dark"] #servicios { background: var(--c-navy); } [data-theme="dark"] .impact { overflow: visible; } [data-theme="dark"] #servicios > .container { position: relative; z-index: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #proyectos, :root:not([data-theme="light"]) #contacto { background: var(--c-navy); } :root:not([data-theme="light"]) #recursos { background: var(--c-navy); } :root:not([data-theme="light"]) #recursos>.container { position: relative; z-index: 1; } :root:not([data-theme="light"]) #servicios { background: var(--c-navy); } :root:not([data-theme="light"]) .impact { overflow: visible; } :root:not([data-theme="light"]) #servicios>.container { position: relative; z-index: 1; } :root:not([data-theme="light"]) #constancias, :root:not([data-theme="light"]) #recursos, :root:not([data-theme="light"]) .nosotros-trustedby { overflow: visible; } :root:not([data-theme="light"]) #proyectos>.container, :root:not([data-theme="light"]) #contacto>.container { position: relative; z-index: 1; } :root:not([data-theme="light"]) #historia, :root:not([data-theme="light"]) #clientes { background: var(--c-navy); } :root:not([data-theme="light"]) #historia>.container, :root:not([data-theme="light"]) #clientes>.container { position: relative; z-index: 1; } :root:not([data-theme="light"]) .nosotros-mvv { overflow: visible; } :root:not([data-theme="light"]) #pilares { background: var(--c-navy); } :root:not([data-theme="light"]) #pilares>.container { position: relative; z-index: 1; } } /* Legacy contact head (kept for backwards compat) */ .contact__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; } .contact__location { display: flex; gap: 10px; align-items: flex-start; color: var(--c-gray-500); font-size: 0.95rem; } /* ===================================================================== 16. Footer ===================================================================== */ .site-footer { background: #f1f5f9; color: var(--text-secondary); position: relative; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, 0.06); transition: background var(--t-theme), color var(--t-theme); } .site-footer::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px); background-size: 36px 36px; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr; gap: 40px; padding-top: 80px; padding-bottom: 56px; position: relative; z-index: 1; } .site-footer__contact-info { margin-bottom: 20px; } .site-footer__contact-info p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 8px; } .site-footer__contact-info a { color: var(--text-secondary); transition: color var(--t-fast); } .site-footer__contact-info a:hover { color: var(--c-blue); } .site-footer__col p { font-size: 0.88rem; line-height: 1.72; } .site-footer__col--brand p { max-width: 30ch; } .site-footer__heading { color: var(--c-navy); font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; transition: color var(--t-theme); } .site-footer__list li { margin-bottom: 12px; } .site-footer__list a { transition: color var(--t-fast), padding-left var(--t-fast); font-size: 0.88rem; color: var(--text-secondary); opacity: 0.8; } .site-footer__list a:hover { color: var(--c-blue); opacity: 1; padding-left: 4px; } .footer-community__title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-navy); margin-bottom: 8px; transition: color var(--t-theme); } [data-theme="dark"] .footer-community__title { color: var(--c-white); } .footer-community__text { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); opacity: 0.85; margin-bottom: 16px; } .social { display: flex; gap: 12px; margin-top: 24px; } .social__link { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--surface-base); border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 50%; color: var(--text-secondary); box-shadow: var(--shadow-xs); transition: background var(--t-base), color var(--t-fast), transform var(--t-spring), border-color var(--t-fast), box-shadow var(--t-fast); } .social__link:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-sm); } .social__link--facebook:hover { background: #1877f2; color: var(--c-white); } .social__link--linkedin:hover { background: #0a66c2; color: var(--c-white); } .social__link--whatsapp:hover { background: #25d366; color: var(--c-white); } /* Newsletter Section Row */ .site-footer__newsletter { border-top: 1px solid rgba(0, 0, 0, 0.08); padding-block: 48px; position: relative; z-index: 1; transition: border-color var(--t-theme); } .site-footer__newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .site-footer__newsletter-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; transition: color var(--t-theme); } .site-footer__newsletter-subtitle { font-size: 0.88rem; color: var(--text-secondary); opacity: 0.8; margin: 0; transition: color var(--t-theme); } .site-footer__newsletter-form-wrap { flex-grow: 1; max-width: 480px; } .site-footer__newsletter-form { display: flex; background: var(--surface-base); border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 50px; padding: 5px 5px 5px 20px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-theme); } .site-footer__newsletter-form:focus-within { border-color: var(--c-blue); box-shadow: 0 0 16px rgba(26, 86, 219, 0.12); } .site-footer__newsletter-input { background: transparent; border: none; color: var(--text-primary); font-size: 0.88rem; flex-grow: 1; outline: none; padding-right: 12px; transition: color var(--t-theme); } .site-footer__newsletter-input::placeholder { color: var(--text-muted); } .site-footer__newsletter-btn { background: var(--c-navy); color: var(--c-white); border: none; border-radius: 50px; padding: 10px 24px; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast); } .site-footer__newsletter-btn:hover { background-color: var(--c-blue); } /* Footer Bottom */ .site-footer__bottom { border-top: 1px solid rgba(0, 0, 0, 0.08); position: relative; z-index: 1; transition: border-color var(--t-theme); } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 24px; font-size: 0.82rem; color: var(--text-muted); } .site-footer__bottom-links a { color: var(--text-muted); transition: color var(--t-fast); } .site-footer__bottom-links a:hover { color: var(--c-blue); } .site-footer__bottom-sep { margin-inline: 8px; color: rgba(0, 0, 0, 0.1); } /* Floating Scroll to Top */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; background: var(--surface-base); border: 2px solid var(--c-blue); border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--c-blue); box-shadow: 0 4px 16px rgba(26, 86, 219, 0.1); z-index: 999; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { background: var(--c-blue); color: var(--c-white); border-color: var(--c-blue); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26, 86, 219, 0.25); } .scroll-to-top__icon { position: relative; z-index: 1; } /* Fills from the bottom up as the page is scrolled, reaching 100% at the page end */ .scroll-to-top__fill { position: absolute; inset: auto 0 0 0; height: calc(var(--scroll-progress, 0) * 100%); background: var(--c-blue); opacity: 0.18; z-index: 0; transition: height 0.1s linear; pointer-events: none; } .scroll-to-top:hover .scroll-to-top__fill { background: var(--c-white); opacity: 0.25; } /* ===================================================================== Floating WhatsApp Button ===================================================================== */ .whatsapp-float { position: fixed; bottom: 25px; right: 86px; z-index: 9999; display: flex; align-items: center; gap: 10px; text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .whatsapp-float__btn { width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); position: relative; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; order: 2; } .whatsapp-float__btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.5); animation: wa-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes wa-pulse { 0% { transform: scale(0.95); opacity: 0.8; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } .whatsapp-float:hover .whatsapp-float__btn { background: #20ba5a; transform: scale(1.08); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5); } .whatsapp-float__badge { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--surface-border); padding: 8px 16px; border-radius: var(--r-pill); font-size: 0.84rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; pointer-events: none; order: 1; } .whatsapp-float:hover .whatsapp-float__badge { opacity: 1; visibility: visible; transform: translateX(0); } [data-theme="dark"] .whatsapp-float__badge { background: #0f172a; color: #f8fafc; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .contact-detail__icon--whatsapp { color: #25d366 !important; background: rgba(37, 211, 102, 0.1) !important; } @media (max-width: 768px) { .whatsapp-float { bottom: 20px; right: 74px; } .whatsapp-float__badge { display: none; } .whatsapp-float__btn { width: 48px; height: 48px; } } /* Dark Mode Overrides for Footer */ [data-theme="dark"] .site-footer { background: radial-gradient(ellipse 800px 350px at 50% 100%, rgba(13, 148, 136, 0.22) 0%, rgba(26, 86, 219, 0.05) 50%, transparent 100%), linear-gradient(185deg, var(--c-dark) 0%, var(--c-navy) 100%); color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .site-footer::before { background-image: radial-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px); } [data-theme="dark"] .site-footer__contact-info a { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .site-footer__contact-info a:hover { color: var(--c-white); } [data-theme="dark"] .site-footer__heading { color: var(--c-white); } [data-theme="dark"] .site-footer__list a { color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .site-footer__list a:hover { color: var(--c-white); } [data-theme="dark"] .social__link { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .site-footer__newsletter { border-top: 1px solid rgba(255, 255, 255, 0.07); } [data-theme="dark"] .site-footer__newsletter-title { color: var(--c-white); } [data-theme="dark"] .site-footer__newsletter-subtitle { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .site-footer__newsletter-form { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .site-footer__newsletter-form:focus-within { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 0 16px rgba(59, 130, 246, 0.1); } [data-theme="dark"] .site-footer__newsletter-input { color: var(--c-white); } [data-theme="dark"] .site-footer__newsletter-input::placeholder { color: rgba(255, 255, 255, 0.3); } [data-theme="dark"] .site-footer__newsletter-btn { background: var(--c-white); color: #020812; } [data-theme="dark"] .site-footer__newsletter-btn:hover { background-color: var(--c-teal-light); } [data-theme="dark"] .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); } [data-theme="dark"] .site-footer__bottom-inner { color: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .site-footer__bottom-links a { color: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .site-footer__bottom-links a:hover { color: var(--c-white); } [data-theme="dark"] .site-footer__bottom-sep { color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .scroll-to-top { background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.25); color: var(--c-white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .scroll-to-top .scroll-to-top__fill { background: var(--c-white); opacity: 0.16; } [data-theme="dark"] .scroll-to-top:hover { background: var(--c-white); color: #020812; border-color: var(--c-white); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2); } [data-theme="dark"] .scroll-to-top:hover .scroll-to-top__fill { background: #020812; opacity: 0.12; } @media (max-width: 991px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .site-footer__newsletter-inner { flex-direction: column; align-items: stretch; text-align: center; } .site-footer__newsletter-form-wrap { max-width: 100%; } } @media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; gap: 36px; } .site-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; } } /* ===================================================================== 17. Páginas misceláneas ===================================================================== */ .prose-page { max-width: 780px; } .prose-page__media { margin: 24px 0; } .project-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0; } .project-story__card { position: relative; padding: 28px 24px 24px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .project-story__card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-teal) 100%); } .project-story__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-lg); background: rgba(26, 86, 219, 0.1); color: var(--c-blue); margin-bottom: 16px; } .project-story__label { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 8px 0; } .project-story__text { font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); } .project-story__text p { margin: 0 0 0.8em 0; } .project-story__text p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .project-story { grid-template-columns: 1fr; } } .project-ficha { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px 0; padding: 0; } .project-ficha__item { padding: 10px 18px; background: var(--surface-muted, var(--surface-card)); border: 1px solid var(--surface-border); border-radius: var(--r-lg); } .project-ficha__item dt { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 2px 0; } .project-ficha__item dd { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin: 0; } .project-achievements { margin: 40px 0; } .project-achievements__title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--text-primary); margin: 0 0 20px 0; } .project-achievements__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .project-achievements__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); } .project-achievements__check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-teal-glow); color: var(--c-teal); font-size: 0.8rem; font-weight: 900; margin-top: 2px; } .not-found { text-align: center; } .not-found .btn { margin-top: 12px; } .post-preview { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--c-gray-200); } /* ===================================================================== 18. Responsive ===================================================================== */ @media (min-width: 900px) { .about-wrap { grid-template-columns: 1.05fr 0.95fr; } .about__media-wrap .media__placeholder, .about__media-wrap .media__img { min-height: 480px; } .section__head { grid-template-columns: 1fr auto; } .impact__grid { grid-template-columns: 1.05fr 0.95fr; } .faq-layout { grid-template-columns: 0.72fr 1.28fr; } #contacto, #contacto .container { overflow: visible !important; } .contact-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; } .contact-card { position: -webkit-sticky; position: sticky; top: 96px; align-self: start; height: fit-content; z-index: 10; transform: none !important; } } @media (max-width: 780px) { .nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(320px, 85vw); height: 100vh; max-height: 100vh; padding: 24px 24px 40px; display: flex; flex-direction: column; align-items: stretch; background: var(--surface-card); border-left: 1px solid var(--surface-border); border-top: none; border-radius: 0; box-shadow: -8px 0 32px rgba(15, 23, 42, 0.08); overflow-y: auto; z-index: 260; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease, visibility 0s linear 320ms; opacity: 0; } .nav__drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--surface-border); } .nav__drawer-header .logo__img { max-height: 28px; width: auto; } .nav.is-open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(0); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease, visibility 0s linear 0s; } .nav__list { flex-direction: column; gap: 6px; padding: 0; width: 100%; } .nav__link { display: block; padding: 12px 16px; border-radius: var(--r-md); font-size: 1.05rem; font-weight: 600; text-align: left; color: var(--text-primary); transition: all var(--t-fast); } .nav__link:hover, .nav__link:focus { background: var(--surface-muted); color: var(--c-blue); } .nav__link.current-menu-item { background: rgba(26, 86, 219, 0.06); box-shadow: none; color: var(--c-blue); } [data-theme="dark"] .nav__link.current-menu-item { background: rgba(59, 130, 246, 0.12); color: var(--c-blue-light); } .nav-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(15, 23, 42, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; } body.has-nav-open .nav-backdrop { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 300ms ease, visibility 0s linear 0s; } body.has-nav-open .site-header { z-index: 300 !important; } .site-header__actions { position: relative; z-index: 270; } body.has-nav-open .site-header__inner>.logo, body.has-nav-open .theme-toggle-btn, body.has-nav-open .icon-btn--search { opacity: 0; pointer-events: none; } .nav-toggle { display: inline-flex; position: relative; z-index: 270; transition: transform var(--t-base), background var(--t-fast); } body.has-nav-open .nav-toggle { position: fixed !important; top: 24px; right: 24px; z-index: 270 !important; } /* Disable floating/transparent overlay header on mobile - make it always solid & fixed */ .site-header--overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: var(--header-bg-solid) !important; border-bottom: 1px solid var(--header-border) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; } .site-header--overlay .site-header__inner { max-width: 100% !important; margin-top: 0 !important; margin-inline: 0 !important; padding: 12px 20px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .hero-quicklinks { grid-template-columns: repeat(2, 1fr); transform: translateY(36px); margin-bottom: -36px; } .hero-quicklink { border-right: none; border-bottom: 1px solid var(--c-gray-100); } .hero-quicklink:nth-child(odd) { border-right: 1px solid var(--c-gray-100); } .hero-quicklink:nth-child(3), .hero-quicklink:nth-child(4) { border-bottom: none; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stats__item+.stats__item::before { display: none; } .stats { background-attachment: scroll !important; } .stats__item { padding: 20px 12px; } .contact-form__row { grid-template-columns: 1fr; } .contact-card { padding: 28px 22px; } /* Testimonios: un slide a la vez, con flechas + indicadores */ .testimonial-slider { position: relative; } .testimonial-grid { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Allow both horizontal swiping within container and vertical viewport scrolling natively */ touch-action: pan-x pan-y; gap: 16px; margin-inline: -20px; padding-inline: 20px; padding-top: 12px; padding-bottom: 16px; margin-top: -12px; margin-bottom: -8px; scrollbar-width: none; } .testimonial-grid::-webkit-scrollbar { display: none; } .testimonial-card { flex: 0 0 88%; scroll-snap-align: center; } .testimonial-nav { display: flex; position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--surface-border); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-md); } .testimonial-nav--prev { left: -6px; } .testimonial-nav--next { right: -6px; } .testimonial-nav:active { transform: translateY(-50%) scale(0.92); } .testimonial-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; } .testimonial-dot { width: 22px; height: 5px; border-radius: 3px; border: none; padding: 0; background: var(--surface-border); transition: background var(--t-fast), width var(--t-fast); } .testimonial-dot.is-active { width: 32px; background: var(--c-blue); } /* Proyectos: mismo patrón de slider que Testimonios */ .project-slider { position: relative; } .cards-grid--projects { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Allow both horizontal swiping within container and vertical viewport scrolling natively */ touch-action: pan-x pan-y; gap: 16px; margin-inline: -20px; padding-inline: 20px; padding-top: 12px; padding-bottom: 16px; margin-top: -12px; margin-bottom: -8px; scrollbar-width: none; } .cards-grid--projects::-webkit-scrollbar { display: none; } .cards-grid--projects .project-card { flex: 0 0 88%; scroll-snap-align: center; } .project-nav { display: flex; position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--surface-border); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-md); } .project-nav--prev { left: -6px; } .project-nav--next { right: -6px; } .project-nav:active { transform: translateY(-50%) scale(0.92); } .project-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; } .project-dot { width: 22px; height: 5px; border-radius: 3px; border: none; padding: 0; background: var(--surface-border); transition: background var(--t-fast), width var(--t-fast); } .project-dot.is-active { width: 32px; background: var(--c-blue); } } @media (min-width: 781px) { .testimonial-nav, .testimonial-dots, .project-nav, .project-dots, .nav-backdrop { display: none; } } @media (max-width: 580px) { .hero-quicklinks { grid-template-columns: 1fr; } .hero-quicklink { border-right: none !important; } .hero-quicklink:nth-child(n) { border-bottom: 1px solid var(--c-gray-100) !important; } .hero-quicklink:last-child { border-bottom: none !important; } .stats__grid { grid-template-columns: 1fr; } .stats__item+.stats__item::before { display: none; } .logo__text small { display: none; } .about__badge { display: none; } } /* ===================================================================== Custom cursor (Pointer) Premium ===================================================================== */ .custom-cursor, .custom-cursor-follower { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; opacity: 0; transition: opacity 0.3s ease; display: none; } @media (pointer: fine) { .custom-cursor.is-active, .custom-cursor-follower.is-active { display: block; opacity: 1; } .custom-cursor-enabled, .custom-cursor-enabled a, .custom-cursor-enabled button, .custom-cursor-enabled [role="button"], .custom-cursor-enabled input, .custom-cursor-enabled textarea, .custom-cursor-enabled select { cursor: none !important; } } .custom-cursor__dot { display: block; width: 8px; height: 8px; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s ease; } .custom-cursor__ring { display: block; width: 32px; height: 32px; border: 1.5px solid var(--c-blue); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s ease, background-color 0.25s ease; } /* Hover state on interactive elements */ .custom-cursor.cursor-hover .custom-cursor__dot { transform: translate(-50%, -50%) scale(0.4); background: var(--c-teal); } .custom-cursor-follower.cursor-hover .custom-cursor__ring { transform: translate(-50%, -50%) scale(1.6); border-color: var(--c-teal); background-color: rgba(13, 148, 136, 0.08); } /* Click state */ .custom-cursor.cursor-click .custom-cursor__dot { transform: translate(-50%, -50%) scale(1.3); } .custom-cursor-follower.cursor-click .custom-cursor__ring { transform: translate(-50%, -50%) scale(0.85); border-color: var(--c-teal); background-color: rgba(13, 148, 136, 0.2); } /* Modo Oscuro: Cursor Blanco */ [data-theme="dark"] .custom-cursor__dot { background: var(--c-white); } [data-theme="dark"] .custom-cursor-follower .custom-cursor__ring { border-color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .custom-cursor.cursor-hover .custom-cursor__dot { background: var(--c-white); } [data-theme="dark"] .custom-cursor-follower.cursor-hover .custom-cursor__ring { border-color: var(--c-white); background-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .custom-cursor-follower.cursor-click .custom-cursor__ring { border-color: var(--c-white); background-color: rgba(255, 255, 255, 0.2); } /* ===================================================================== Services Ticker — horizontal scrolling marquee ===================================================================== */ .services-ticker { width: 100%; overflow: hidden; background: var(--surface-base); border-top: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border); padding-block: 18px; user-select: none; position: relative; z-index: 5; transition: background var(--t-theme), border-color var(--t-theme); } .services-ticker::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--surface-base) 0%, transparent 10%, transparent 90%, var(--surface-base) 100%); z-index: 2; transition: background var(--t-theme); } .services-ticker__track { display: flex; width: max-content; } .services-ticker__list { display: flex; align-items: center; gap: 40px; padding-right: 40px; animation: scroll-ticker 35s linear infinite; } .services-ticker:hover .services-ticker__list { animation-play-state: paused; } .services-ticker__item { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; transition: color var(--t-fast); } .services-ticker__item:hover { color: var(--c-blue-light); } .services-ticker__sep { color: var(--c-teal-light); display: inline-flex; align-items: center; flex-shrink: 0; } @keyframes scroll-ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } /* ===================================================================== Quiénes Somos / About — Modern SaaS split layout ===================================================================== */ .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .about__media-col { position: relative; padding: 20px; } .about__media-col .media__img, .about__media-col .media__placeholder { height: 520px; object-fit: cover; } .about__media-col .about__media-wrap--slideshow { height: 520px; } .about__content-col { display: flex; flex-direction: column; align-items: flex-start; } /* Kicker styled exactly like the Hero badge */ .about__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.07) 0%, rgba(13, 148, 136, 0.05) 100%); border: 1px solid rgba(26, 86, 219, 0.18); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; transition: background var(--t-theme), border-color var(--t-theme); } .about__kicker-text { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } .about__kicker-dot { width: 6px; height: 6px; background: var(--c-teal); border-radius: 50%; display: inline-block; animation: pulse-dot 2s infinite; } [data-theme="dark"] .about__kicker { background: linear-gradient(135deg, rgba(26, 86, 219, 0.1) 0%, rgba(13, 148, 136, 0.08) 100%); border-color: rgba(59, 130, 246, 0.25); } [data-theme="dark"] .about__kicker-text { background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } [data-theme="dark"] .about__kicker-dot { background: var(--c-teal-light); } /* Global Kicker Gradient in Dark Environments */ [data-theme="dark"] .kicker, .section--dark .kicker { background: linear-gradient(135deg, rgba(26, 86, 219, 0.1) 0%, rgba(13, 148, 136, 0.08) 100%); border-color: rgba(59, 130, 246, 0.25); } [data-theme="dark"] .kicker-text, .section--dark .kicker-text { background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } @keyframes pulse-dot { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.5); } 70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(13, 148, 136, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); } } .about__lead { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 16px; } .about__desc { font-size: 0.94rem; line-height: 1.65; color: var(--text-secondary); opacity: 0.88; margin-bottom: 28px; } /* SaaS Checkbox Features List */ .about__features { margin: 0 0 32px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .about__features li { display: flex; align-items: start; gap: 14px; } .about__feature-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(13, 148, 136, 0.1); color: var(--c-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--t-theme), color var(--t-theme); } [data-theme="dark"] .about__feature-icon { background: rgba(45, 212, 191, 0.12); color: var(--c-teal-light); } .about__feature-text { display: flex; flex-direction: column; gap: 2px; } .about__feature-text strong { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); } .about__feature-text span { font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; } @media (max-width: 991px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } .about__media-col { max-width: 520px; margin-inline: auto; } .about__media-col .media__img, .about__media-col .media__placeholder { height: 380px; } .about__media-col .about__media-wrap--slideshow { height: 380px; } } /* ===================================================================== Dark Testimonies Section Styling (Glassmorphism & Color accents) ===================================================================== */ .section--dark .testimonial-card { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .section--dark .testimonial-card:hover { background: rgba(15, 23, 42, 0.6); border-color: rgba(13, 148, 136, 0.35); box-shadow: 0 25px 50px -12px rgba(13, 148, 136, 0.2), 0 20px 40px rgba(0, 0, 0, 0.4); } .section--dark .testimonial-card__text { color: rgba(255, 255, 255, 0.82); } .section--dark .testimonial-card__name { color: var(--c-white); } .section--dark .testimonial-card__role { color: rgba(255, 255, 255, 0.55); } .section--dark .testimonial-card__empresa { color: var(--c-teal-light); background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.3); } /* ===================================================================== Custom Lightbox Modal ===================================================================== */ .lightbox-overlay-custom { position: fixed; inset: 0; background: rgba(6, 14, 28, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 24px; } .lightbox-overlay-custom.is-active { opacity: 1; } .lightbox-container-custom { position: relative; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .lightbox-overlay-custom.is-active .lightbox-container-custom { transform: scale(1); } .lightbox-img-custom { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.3s, max-height 0.3s; } .lightbox-caption-custom { margin-top: 14px; color: var(--c-white); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-align: center; } .lightbox-close-custom { position: absolute; top: 24px; right: 24px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--c-white); font-size: 2.2rem; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s, transform 0.25s; line-height: 1; z-index: 100002; } .lightbox-close-custom:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.05); } .lightbox-rotate-custom { position: absolute; top: 24px; right: 88px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--c-white); font-size: 1.5rem; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s, transform 0.25s; line-height: 1; z-index: 100002; } .lightbox-rotate-custom:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.05); } /* ===================================================================== Dark Resources List Styling (Glassmorphism overrides) ===================================================================== */ .section--dark .resource-list__item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .section--dark .resource-list__item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(59, 130, 246, 0.35); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(59, 130, 246, 0.15); } .section--dark .resource-list__title { color: var(--c-white); } .section--dark .resource-list__desc { color: rgba(255, 255, 255, 0.6); } .section--dark .resource-list__icon { color: var(--c-blue-light); transition: color var(--t-fast); } .section--dark .resource-list__item:hover .resource-list__icon { color: var(--c-teal-light); } .section--dark .resource-list__link { color: rgba(255, 255, 255, 0.7); } .section--dark .resource-list__item:hover .resource-list__link { color: var(--c-teal-light); } /* ===================================================================== Página de Nosotros Template Styles ===================================================================== */ .nosotros-hero { position: relative; padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 120px); background: radial-gradient(ellipse at 50% 100%, rgba(26, 86, 219, 0.15) 0%, transparent 60%), linear-gradient(185deg, var(--c-dark) 0%, var(--c-navy) 100%); color: var(--c-white); overflow: hidden; } .nosotros-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 1; } /* Looping background video (seconds 5–20) behind the two-column hero content */ .nosotros-hero__video-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .nosotros-hero__video-bg iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; /* 16:9 forced-cover trick */ height: 100vh; min-width: 100%; min-height: 56.25vw; /* 16:9 */ transform: translate(-50%, -50%); } .nosotros-hero__video-overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 100%, rgba(26, 86, 219, 0.2) 0%, transparent 60%), linear-gradient(185deg, rgba(6, 14, 28, 0.88) 0%, rgba(10, 31, 68, 0.82) 100%); } .nosotros-hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; position: relative; z-index: 2; } @media (max-width: 991px) { .nosotros-hero__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; } } .nosotros-hero__content { max-width: 700px; } .nosotros-hero__title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 900; line-height: 1.1; margin: 20px 0; letter-spacing: -0.02em; color: var(--c-white); } .nosotros-hero__subtitle { font-size: clamp(1.02rem, 1.8vw, 1.22rem); line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin-bottom: 32px; } @media (max-width: 991px) { .nosotros-hero__subtitle { margin-inline: auto; } } .nosotros-hero__media { position: relative; display: flex; justify-content: center; } .nosotros-hero__glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(rgba(13, 148, 136, 0.25) 0%, transparent 70%); top: -50px; right: -50px; z-index: 1; pointer-events: none; } .nosotros-hero__image-wrap { position: relative; z-index: 2; width: 100%; max-width: 440px; border-radius: var(--r-2xl); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); padding: 8px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(12px); } .nosotros-hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-2xl) - 6px); } .nosotros-hero__badge { position: absolute; bottom: -24px; left: -24px; background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); border-radius: var(--r-xl); padding: 20px 24px; display: flex; align-items: center; gap: 16px; max-width: 280px; z-index: 3; text-align: left; } @media (max-width: 575px) { .nosotros-hero__badge { position: static; margin-top: 16px; max-width: 100%; left: auto; bottom: auto; } } .nosotros-hero__badge-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .nosotros-hero__badge-text { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); line-height: 1.3; } /* Stats Nosotros Overrides */ .stats--nosotros { background: transparent !important; border-top: 1px solid var(--surface-border) !important; border-bottom: 1px solid var(--surface-border) !important; } .stats--nosotros::before { display: none !important; } .stats--nosotros .stats__grid { grid-template-columns: repeat(3, 1fr) !important; } .stats--nosotros .stats__item { color: var(--text-primary) !important; } .stats--nosotros .stats__label { color: var(--text-primary) !important; } .stats--nosotros .stats__sub { color: var(--text-muted) !important; } .stats--nosotros .stats__item+.stats__item::before { background: linear-gradient(180deg, transparent, var(--surface-border), transparent) !important; } @media (max-width: 767px) { .stats--nosotros .stats__grid { grid-template-columns: 1fr !important; } .stats--nosotros .stats__item+.stats__item::before { display: none; } } /* Asociados Fundadores strip (template-nosotros.php) — reuses .section--dark for the navy panel + glow blobs and the hero's marquee keyframe (hero-trustedby-scroll) so it keeps scrolling like a slider. Each partner is a bordered card: a white circular badge holding the logo recolored to CESEM's brand blue via a CSS mask (exact, consistent tint regardless of the source logo's original colors), plus the name below. */ .nosotros-trustedby.section--dark { padding-block: clamp(56px, 7vw, 88px); } .nosotros-trustedby__inner { display: flex; flex-direction: column; align-items: center; gap: 44px; } .nosotros-trustedby__title { margin-top: 10px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .nosotros-trustedby__subtitle { max-width: 620px; margin: 14px auto 0; color: rgba(255, 255, 255, 0.62); font-size: 1rem; line-height: 1.6; } .nosotros-trustedby__track-wrap { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .nosotros-trustedby__track { display: flex; align-items: stretch; flex-wrap: nowrap; width: max-content; gap: 24px; animation: hero-trustedby-scroll 32s linear infinite; } .nosotros-trustedby__track:hover { animation-play-state: paused; } .nosotros-trustedby__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; flex-shrink: 0; width: 260px; padding: 28px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid transparent; border-radius: var(--r-2xl); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.55); transition: transform var(--t-spring), box-shadow var(--t-base); } .nosotros-trustedby__card::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal-light) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background var(--t-base); } .nosotros-trustedby__card:hover { transform: translateY(-5px); box-shadow: 0 0 32px rgba(59, 130, 246, 0.28), 0 20px 40px -20px rgba(0, 0, 0, 0.55); } .nosotros-trustedby__card:hover::before { background: linear-gradient(135deg, var(--c-blue-light) 0%, var(--c-teal-light) 100%); } .nosotros-trustedby__badge { width: 168px; height: 168px; flex-shrink: 0; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 26px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } .nosotros-trustedby__badge-mask { width: 100%; height: 100%; background-color: #0a2046; -webkit-mask-image: var(--mask-url); mask-image: var(--mask-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .nosotros-trustedby__badge-text { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; line-height: 1.2; color: var(--c-navy); text-align: center; } .nosotros-trustedby__name { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: #ffffff; text-align: center; line-height: 1.3; } .nosotros-trustedby__desc { margin: 0; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.6); text-align: center; } .nosotros-trustedby__tagline { display: inline-flex; align-items: center; gap: 16px; max-width: 620px; margin: 0 auto; padding: 20px 28px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.12) 0%, rgba(13, 148, 136, 0.1) 100%); border: 1px solid rgba(59, 130, 246, 0.25); backdrop-filter: blur(8px); border-radius: var(--r-2xl); } .nosotros-trustedby__tagline-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(94, 156, 255, 0.16); color: var(--c-teal-light); } .nosotros-trustedby__tagline-text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); text-align: left; } .nosotros-trustedby__tagline-accent { display: block; color: #10b981; font-weight: 700; } /* Misión & Visión Section */ .nosotros-mv { position: relative; padding: clamp(80px, 10vw, 130px) 0 clamp(120px, 12vw, 170px); background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); overflow: hidden; } .nosotros-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.06; pointer-events: none; z-index: 1; } .nosotros-blob--1 { width: 350px; height: 350px; background: var(--c-blue); top: 10%; left: -100px; } .nosotros-blob--2 { width: 400px; height: 400px; background: var(--c-teal); bottom: 10%; right: -100px; } .nosotros-mv__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; position: relative; z-index: 2; } @media (max-width: 767px) { .nosotros-mv__grid { grid-template-columns: 1fr; gap: 24px; } } .nosotros-mv-card { background: var(--surface-card); border: 1px solid rgba(26, 86, 219, 0.08); border-radius: var(--r-2xl); padding: clamp(32px, 5vw, 56px); position: relative; overflow: hidden; transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base); display: flex; flex-direction: column; gap: 24px; box-shadow: 0 10px 30px rgba(6, 14, 28, 0.02); } @media (min-width: 768px) { .nosotros-mv-card--vision { margin-top: 40px; } } .nosotros-mv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; } .nosotros-mv-card--mision::before { background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue-light) 100%); } .nosotros-mv-card--vision::before { background: linear-gradient(90deg, var(--c-teal) 0%, var(--c-teal-light) 100%); } .nosotros-mv-card:hover { transform: translateY(-6px); } .nosotros-mv-card--mision:hover { border-color: rgba(26, 86, 219, 0.35); box-shadow: 0 30px 60px rgba(26, 86, 219, 0.08); } .nosotros-mv-card--vision:hover { border-color: rgba(13, 148, 136, 0.35); box-shadow: 0 30px 60px rgba(13, 148, 136, 0.08); } .nosotros-mv-card__glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(60px); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 0; } .nosotros-mv-card--mision .nosotros-mv-card__glow { background: radial-gradient(circle, rgba(26, 86, 219, 0.1) 0%, transparent 70%); top: -50px; left: -50px; } .nosotros-mv-card--vision .nosotros-mv-card__glow { background: radial-gradient(circle, rgba(13, 148, 136, 0.1) 0%, transparent 70%); top: -50px; left: -50px; } .nosotros-mv-card:hover .nosotros-mv-card__glow { opacity: 1; } .nosotros-mv-card__number { position: absolute; top: 15px; right: 30px; font-family: var(--font-display); font-size: 8.5rem; font-weight: 900; line-height: 1; color: var(--c-dark); opacity: 0.035; pointer-events: none; user-select: none; transition: transform var(--t-spring), opacity var(--t-base); z-index: 0; } .nosotros-mv-card:hover .nosotros-mv-card__number { opacity: 0.06; transform: translateY(8px) scale(1.05); } .nosotros-mv-card__header { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; } .nosotros-mv-card__icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--c-white); transition: transform var(--t-spring); } .nosotros-mv-card--mision .nosotros-mv-card__icon { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-light) 100%); } .nosotros-mv-card--vision .nosotros-mv-card__icon { background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-light) 100%); } .nosotros-mv-card:hover .nosotros-mv-card__icon { transform: scale(1.1) rotate(6deg); } .nosotros-mv-card__title { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); margin: 0; } .nosotros-mv-card__text { font-size: 1.05rem; line-height: 1.75; color: var(--text-secondary); margin: 0; position: relative; z-index: 1; } .nosotros-historia__lead { max-width: 760px; margin: 0 auto 48px; text-align: center; font-size: 1.08rem; line-height: 1.75; color: var(--text-secondary); position: relative; z-index: 1; } .nosotros-caso { position: relative; z-index: 1; margin-top: 40px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-sm); } .nosotros-caso__media { position: relative; min-height: 260px; } .nosotros-caso__media .media__img, .nosotros-caso__media .media__placeholder { width: 100%; height: 100%; object-fit: cover; } .nosotros-caso__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .nosotros-caso__title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--text-primary); margin: 0; line-height: 1.35; } .nosotros-caso__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .nosotros-caso__meta span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--r-pill); color: var(--c-blue); background: var(--c-blue-glow); } .nosotros-caso__text { font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); margin: 0; } .section--dark .nosotros-caso { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); } .section--dark .nosotros-caso__client-badge { background: rgba(26, 86, 219, 0.22); color: var(--c-blue-light); border: 1px solid rgba(59, 130, 246, 0.3); } /* ===================================================================== Rediseño Nosotros — Timeline, MVV, Pilares & Gradient Section ===================================================================== */ .nosotros-section { padding: clamp(70px, 9vw, 110px) 0; } .section--dark.nosotros-mvv { padding: clamp(90px, 11vw, 140px) 0; } /* Timeline */ .nosotros-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; margin-top: 36px; } .nosotros-timeline::before { content: ""; position: absolute; top: 18px; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-teal) 100%); z-index: 0; opacity: 0.3; } .nosotros-timeline__item { position: relative; z-index: 1; } .nosotros-timeline__year { display: inline-block; padding: 4px 14px; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); color: #ffffff; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; border-radius: var(--r-pill); margin-bottom: 16px; box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25); } .nosotros-timeline__card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-sm); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .nosotros-timeline__card:hover { transform: translateY(-4px); border-color: var(--c-blue); box-shadow: 0 16px 32px -10px rgba(26, 86, 219, 0.15); } .nosotros-timeline__title { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--text-primary); margin: 0 0 8px 0; } .nosotros-timeline__card p { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); margin: 0; } /* MVV Pair (Misión y Visión Juntas en 2 Columnas) */ .nosotros-mv-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; position: relative; z-index: 2; } .nosotros-mv-card-dark { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-2xl); padding: 36px 32px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); } .nosotros-mv-card-dark:hover { background: rgba(15, 23, 42, 0.65); border-color: rgba(26, 86, 219, 0.4); transform: translateY(-4px); box-shadow: 0 24px 48px -12px rgba(26, 86, 219, 0.3), 0 20px 40px rgba(0, 0, 0, 0.4); } .nosotros-mv-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .nosotros-mv-card__icon-dark { width: 48px; height: 48px; border-radius: var(--r-lg); background: rgba(26, 86, 219, 0.2); color: var(--c-blue-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nosotros-mv-card__title-dark { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: #ffffff; margin: 0; } .nosotros-mv-card__text-dark { font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin: 0; } /* Valores Grid (4 Columnas Abajo) */ .nosotros-valores__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .valor-card-dark { background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--r-xl); padding: 24px 20px; transition: background var(--t-base), border-color var(--t-base), transform var(--t-base); } .valor-card-dark:hover { background: rgba(15, 23, 42, 0.55); border-color: rgba(45, 212, 191, 0.35); transform: translateY(-3px); } .valor-card__icon-dark { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(13, 148, 136, 0.18); color: var(--c-teal-light); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .valor-card-dark h4 { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #ffffff; margin: 0 0 6px 0; } .valor-card-dark p { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0; } @media (max-width: 991px) { .nosotros-mv-pair, .nosotros-valores__grid { grid-template-columns: repeat(2, 1fr); } } } /* ===================================================================== Constancias de Prestación de Servicios — Official Accreditation Section ===================================================================== */ .constancias-section { position: relative; overflow: hidden; } .constancias-seal-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 16px; } .constancias-seal-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 18px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.25) 0%, rgba(13, 148, 136, 0.2) 100%); border: 1px solid rgba(45, 212, 191, 0.4); border-radius: var(--r-pill); color: var(--c-teal-light); font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 20px rgba(13, 148, 136, 0.25); } .constancias-trust-bar { display: flex; align-items: center; justify-content: center; gap: 40px; margin-bottom: 48px; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border-radius: var(--r-xl); padding: 20px 36px; max-width: 840px; margin-inline: auto; } .constancias-trust-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .constancias-trust-num { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; background: linear-gradient(135deg, #ffffff 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .constancias-trust-text { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.04em; } .constancias-trust-divider { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.12); } @media (max-width: 768px) { .constancias-trust-bar { flex-direction: column; gap: 16px; padding: 20px; } .constancias-trust-divider { width: 60px; height: 1px; } } .constancias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 2; } .constancia-card { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-2xl); padding: 32px 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); } .constancia-card:hover { background: rgba(15, 23, 42, 0.65); border-color: rgba(13, 148, 136, 0.4); transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(13, 148, 136, 0.25), 0 20px 40px rgba(0, 0, 0, 0.4); } .constancia-card__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-teal-light); background: rgba(45, 212, 191, 0.12); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid rgba(45, 212, 191, 0.25); white-space: nowrap; margin-bottom: 16px; } .constancia-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: #ffffff; line-height: 1.45; margin: 0 0 12px 0; min-height: 3em; display: flex; align-items: center; } .constancia-card__desc { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0 0 24px 0; min-height: 4.8em; } .constancia-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: auto; } .constancia-card__year { font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); } @media (max-width: 991px) { .constancias-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .constancias-grid { grid-template-columns: 1fr; } } /* Pilares de Acción (4 Columns) */ .nosotros-pilares__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .pilar-card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .pilar-card:hover { transform: translateY(-4px); border-color: var(--c-teal); box-shadow: 0 16px 32px -10px rgba(13, 148, 136, 0.2); } .pilar-card__icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: rgba(13, 148, 136, 0.1); color: var(--c-teal); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .pilar-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; color: var(--text-primary); margin: 0 0 8px 0; } .pilar-card p { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); margin: 0; } /* Stats con Fondo Degradado Institucional */ .stats--gradient { position: relative; background: radial-gradient(ellipse 900px 450px at 50% 50%, rgba(26, 86, 219, 0.28) 0%, rgba(13, 148, 136, 0.15) 50%, transparent 100%), #060e1c; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; padding: clamp(60px, 8vw, 90px) 0; } .stats--gradient .stats__number { background: linear-gradient(135deg, #ffffff 0%, var(--c-teal-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .stats--gradient .stats__label { color: #ffffff; } .stats--gradient .stats__sub { color: rgba(255, 255, 255, 0.7); } /* Dark mode overrides for Nosotros page */ [data-theme="dark"] .nosotros-timeline__card, [data-theme="dark"] .nosotros-mvv-card, [data-theme="dark"] .pilar-card { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .nosotros-mvv-card__icon { background: rgba(59, 130, 246, 0.15); color: var(--c-blue-light); } [data-theme="dark"] .pilar-card__icon { background: rgba(45, 212, 191, 0.15); color: var(--c-teal-light); } @media (max-width: 991px) { .nosotros-timeline, .nosotros-mvv__grid, .nosotros-pilares__grid { grid-template-columns: repeat(2, 1fr); } .nosotros-timeline::before { display: none; } } @media (max-width: 600px) { .nosotros-timeline, .nosotros-mvv__grid, .nosotros-pilares__grid { grid-template-columns: 1fr; } } /* Nosotros CTA */ .nosotros-cta { position: relative; padding: clamp(80px, 10vw, 130px) 0; /* Mismo fondo que .section--dark — ver .impact arriba. */ background: var(--c-navy); color: var(--c-white); text-align: center; overflow: hidden; } /* Mismos blobs que .section--dark / .impact. */ .nosotros-cta::before, .nosotros-cta::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; } .nosotros-cta::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } .nosotros-cta::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } .nosotros-cta__inner { max-width: 720px; margin-inline: auto; position: relative; z-index: 2; } .nosotros-cta__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; line-height: 1.15; margin-bottom: 24px; color: var(--c-white); letter-spacing: -0.02em; } .nosotros-cta__subtitle { font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin-bottom: 40px; } .nosotros-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* ===================================================================== 18. Plantilla de Detalle de Servicio (single-cesem_servicio) ===================================================================== */ .single-service-hero { position: relative; padding: clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px); /* Mismo fondo que .section--dark — ver .impact arriba. */ background: var(--c-navy); color: var(--c-white); overflow: hidden; } /* Mismos blobs que .section--dark / .impact / .nosotros-cta. */ .single-service-hero::before, .single-service-hero::after { content: ""; position: absolute; z-index: 0; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; filter: blur(90px); pointer-events: none; } .single-service-hero::before { top: -14%; right: 4%; background: radial-gradient(circle, rgba(26, 86, 219, 0.38) 0%, transparent 70%); } .single-service-hero::after { bottom: -16%; left: 2%; background: radial-gradient(circle, rgba(15, 45, 94, 0.55) 0%, transparent 70%); } .single-service-hero__wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .single-service-hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.15; margin-top: 16px; margin-bottom: 20px; color: var(--c-white); } .single-service-hero__subtitle { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 32px; max-width: 55ch; } .single-service-hero__image-wrap { position: relative; aspect-ratio: 4/3; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-xl); background: var(--surface-muted); } .single-service-hero__image-wrap img { width: 100%; height: 100%; object-fit: cover; } .single-service-methodology { background: var(--surface-base); } .methodology-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .methodology-card { position: relative; padding: 36px 28px 32px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: transform var(--t-spring), box-shadow var(--t-base), border-color var(--t-base); overflow: hidden; } .methodology-card:hover { transform: translateY(-6px); border-color: rgba(26, 86, 219, 0.25); box-shadow: 0 20px 40px -15px rgba(26, 86, 219, 0.12), var(--shadow-xl); } .methodology-card__glow { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-teal) 100%); } .methodology-card__number { display: block; font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; line-height: 1; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; } .methodology-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text-primary); margin: 0 0 10px 0; } .methodology-card__text { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); margin: 0; } .single-service-details { background: var(--surface-muted); } .service-detail-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; } .service-detail__body { text-align: left; } .service-detail__heading { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-primary); margin: 0 0 24px 0; } .service-description-card { padding: 40px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-2xl); box-shadow: var(--shadow-md); } .service-details-card { padding: 32px; background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--r-2xl); box-shadow: var(--shadow-md); } .sidebar-section { margin-bottom: 32px; } .sidebar-section:last-child { margin-bottom: 0; } .sidebar-section__title { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--text-primary); margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.04em; } .sidebar-tag-group { display: flex; flex-wrap: wrap; gap: 8px; } .sidebar-tag { display: inline-block; padding: 6px 12px; background: var(--surface-muted); color: var(--text-secondary); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--surface-border); } .sidebar-benefits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .sidebar-benefits-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); } .benefit-check-icon { color: var(--c-teal); font-weight: 900; flex-shrink: 0; } .sidebar-cta-box { padding: 24px; background: linear-gradient(135deg, rgba(26, 86, 219, 0.03) 0%, rgba(13, 148, 136, 0.03) 100%); border: 1px dashed rgba(26, 86, 219, 0.2); border-radius: var(--r-xl); margin-top: 32px; text-align: left; } .sidebar-cta-box__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 8px 0; } .sidebar-cta-box__desc { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px 0; } .single-service-projects { background: var(--surface-base); } /* Responsividad para Servicios */ @media (max-width: 991px) { .single-service-hero__wrap { grid-template-columns: 1fr; gap: 36px; text-align: center; } .single-service-hero__subtitle { margin-inline: auto; } .single-service-hero__cta { justify-content: center; } .methodology-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .service-detail-layout { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 575px) { .methodology-grid { grid-template-columns: 1fr; } .service-details-card { padding: 20px; } .service-description-card { padding: 24px; } } /* ===================================================================== 19. Filtro de Proyectos por Tabs (template-proyectos.php) ===================================================================== */ .projects-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .filter-tab { background: var(--surface-card); border: 1px solid var(--surface-border); color: var(--text-muted); padding: 7px 16px; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--t-base); user-select: none; } .filter-tab:hover { border-color: var(--c-blue); color: var(--c-blue); } .filter-tab.is-active { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); } .project-card.is-hidden { display: none !important; } @media (max-width: 780px) { /* Con muchas categorías, flex-wrap normal apila tabs en 4-5 filas y empuja el resto de la página hacia abajo. En vez de eso: exactamente 2 filas fijas (grid en columnas) y lo que no entra se desplaza con scroll horizontal, igual que los sliders de tarjetas. */ .projects-filter { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Allow both horizontal swiping within container and vertical viewport scrolling natively */ touch-action: pan-x pan-y; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; padding-bottom: 4px; } .projects-filter::-webkit-scrollbar { display: none; } .filter-tab { flex-shrink: 0; white-space: nowrap; } } /* ===================================================================== Custom Lightbox Popup with Blurred Backdrop (Images & PDFs) ===================================================================== */ .lightbox-overlay-custom { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(6, 14, 28, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 24px; } .lightbox-overlay-custom.is-active { opacity: 1; visibility: visible; } .lightbox-close-custom { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000000; transition: background var(--t-base), transform var(--t-base); } .lightbox-close-custom:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.08); } .lightbox-rotate-custom { position: absolute; top: 24px; right: 88px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000000; transition: background var(--t-base), transform var(--t-base); } .lightbox-rotate-custom:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.08); } .lightbox-container-custom { position: relative; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-img-custom { max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: 12px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); transition: transform 0.3s ease; } .lightbox-caption-custom { margin-top: 14px; color: rgba(255, 255, 255, 0.9); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } /* ===================================================================== Resource Cards 2-Column Grid & 100% Clickable Cards ===================================================================== */ .resource-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .resource-card-link { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25); transition: background var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); cursor: pointer; } .resource-card-link:hover { background: rgba(15, 23, 42, 0.65); border-color: rgba(45, 212, 191, 0.4); transform: translateY(-5px); box-shadow: 0 20px 45px -10px rgba(13, 148, 136, 0.25), 0 16px 36px rgba(0, 0, 0, 0.35); } .resource-card-link__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .resource-card-link__icon { width: 42px; height: 42px; border-radius: var(--r-md); background: rgba(13, 148, 136, 0.16); color: var(--c-teal-light); display: flex; align-items: center; justify-content: center; } .resource-card-link__badge { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-teal-light); background: rgba(45, 212, 191, 0.12); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid rgba(45, 212, 191, 0.25); } .resource-card-link__title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: #ffffff; line-height: 1.45; margin: 0 0 10px 0; } .resource-card-link__desc { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 0 20px 0; } .resource-card-link__footer { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: auto; } .resource-card-link__action { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--c-blue-light); transition: color var(--t-base), transform var(--t-base); } .resource-card-link:hover .resource-card-link__action { color: var(--c-teal-light); } .resource-card-link:hover .resource-card-link__action svg { transform: translateX(4px); } @media (max-width: 768px) { .resource-cards-grid { grid-template-columns: 1fr; } }