/* ===================================================================== CRC Suchitoto — Hoja de estilos personalizada --------------------------------------------------------------------- Este archivo contiene SOLO los estilos personalizados que NO son utilidades de Tailwind. Las utilidades de Tailwind se cargan vía el script `@tailwindcss/browser` en el de cada página, o bien vía la versión compilada (ver README para `npm run build`). Paleta y tipografía del Manual de Marca e Identidad Corporativa del CRC. Pantone 368C / 7578C / 2985C / 717UP. ===================================================================== */ :root { /* Paleta corporativa oficial (Manual de Marca) */ --crc-green: #76bc21; --crc-orange: #df6a2f; --crc-sky: #54c0e8; --crc-yellow: #e0e622; /* Variantes */ --crc-green-700: #5e9b16; --crc-green-50: #f1f9e6; --crc-orange-700: #b65322; --crc-sky-700: #2f9bcb; --crc-ink: #1a1a1a; --crc-cream: #faf7ee; --crc-gray-50: #f7f7f7; --crc-gray-300: #d4d4d4; --crc-gray-500: #737373; --crc-gray-700: #404040; /* Tipografía */ --crc-font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ===================== Reset suave ===================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--crc-font-sans); color: var(--crc-ink); background: #fff; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--crc-green); color: #fff; } :focus-visible { outline: 3px solid var(--crc-orange); outline-offset: 3px; border-radius: 4px; } /* ===================== Botones ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; border: 2px solid transparent; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; } .btn-primary { background: var(--crc-green); color: #fff; } .btn-primary:hover { background: var(--crc-green-700); transform: translateY(-2px); } .btn-secondary { background: var(--crc-orange); color: #fff; } .btn-secondary:hover { background: var(--crc-orange-700); transform: translateY(-2px); } .btn-sky { background: var(--crc-sky); color: #fff; } .btn-sky:hover { background: var(--crc-sky-700); transform: translateY(-2px); } .btn-outline { background: transparent; border-color: #fff; color: #fff; } .btn-outline:hover { background: #fff; color: var(--crc-ink); } .btn-outline-dark { background: transparent; border-color: var(--crc-ink); color: var(--crc-ink); } .btn-outline-dark:hover { background: var(--crc-ink); color: #fff; } .btn-donate { background: linear-gradient(135deg, var(--crc-orange) 0%, #f08e3f 100%); color: #fff; } .btn-donate:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(223, 106, 47, 0.5); } /* ===================== Homepage: Proyecto cards ===================== */ .project-card-home { background: #fff; border-radius: 20px; padding: 32px 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; border-top: 4px solid var(--accent, var(--crc-green)); display: flex; flex-direction: column; gap: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card-home:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); } .project-card-home__badge { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; } .project-card-home h3 { font-size: 1.15rem; font-weight: 900; margin: 0; color: var(--crc-ink); } .project-card-home__program { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crc-gray-500); } .project-card-home p { font-size: 0.92rem; color: var(--crc-gray-700); line-height: 1.6; margin: 0; flex: 1; } /* ===================== Homepage: Platform cards ===================== */ .platform-home-card { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: background 0.3s ease, transform 0.3s ease; } .platform-home-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); } /* ===================== Etiquetas y títulos ===================== */ .section-label { display: inline-block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: var(--crc-orange); margin-bottom: 14px; } .section-title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--crc-ink); margin: 0 0 8px; } .section-subtitle { font-size: 1.05rem; color: var(--crc-gray-700); line-height: 1.6; max-width: 720px; } .crc-divider { width: 80px; height: 5px; background: linear-gradient( 90deg, var(--crc-green) 0%, var(--crc-yellow) 50%, var(--crc-sky) 100% ); border-radius: 99px; margin: 22px 0; } /* ===================== Cinta de colores corporativos ===================== */ .crc-ribbon { height: 6px; background: linear-gradient( 90deg, var(--crc-green) 0%, var(--crc-green) 25%, var(--crc-yellow) 25%, var(--crc-yellow) 50%, var(--crc-orange) 50%, var(--crc-orange) 75%, var(--crc-sky) 75%, var(--crc-sky) 100% ); } /* ===================== Navegación ===================== */ .crc-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; } .crc-nav__bar { height: 80px; display: flex; align-items: center; position: relative; /* overflow: hidden movido a .crc-nav__bg para no recortar el dropdown */ background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transition: height 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease; } .crc-nav__bg { position: absolute; inset: 0; display: flex; overflow: hidden; /* contiene las franjas decorativas sin recortar el dropdown */ } .crc-nav__bg .stripe-sky { width: 24px; background: var(--crc-sky); } .crc-nav__bg .stripe-orange { width: 24px; background: var(--crc-orange); } .crc-nav__bg .stripe-yellow { width: 24px; background: var(--crc-yellow); } .crc-nav__bg .stripe-green { flex: 1; background: var(--crc-green); position: relative; } .crc-nav__bg svg { position: absolute; inset: 0; width: 100%; height: 100%; } .crc-nav__inner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding-inline: 24px; max-width: 1280px; margin-inline: auto; } .crc-nav__brand { display: flex; align-items: center; gap: 12px; margin-right: 24px; } .crc-nav__logo { width: 48px; height: 48px; border-radius: 999px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 2px solid #fff; transition: width 0.35s cubic-bezier(0.4,0,0.2,1), height 0.35s cubic-bezier(0.4,0,0.2,1); } .crc-nav__logo img { width: 100%; height: 100%; object-fit: contain; } .crc-nav__title { color: #fff; font-weight: 900; font-style: italic; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); white-space: nowrap; transition: font-size 0.35s cubic-bezier(0.4,0,0.2,1); } @media (min-width: 1024px) { .crc-nav__title { font-size: 1.65rem; } .crc-nav__logo { width: 56px; height: 56px; } } .crc-nav__links { display: none; align-items: center; gap: 8px; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } @media (min-width: 1024px) { .crc-nav__links { display: flex; } } @media (min-width: 1152px) { .crc-nav__links { gap: 14px; font-size: 0.7rem; letter-spacing: 0.1em; } } @media (min-width: 1280px) { .crc-nav__links { gap: 20px; font-size: 0.78rem; letter-spacing: 0.18em; } } .crc-nav__links { transition: font-size 0.35s cubic-bezier(0.4,0,0.2,1), gap 0.35s cubic-bezier(0.4,0,0.2,1); } .crc-nav__links a { transition: color 0.2s; white-space: nowrap; } .crc-nav__links a:hover, .crc-nav__links a[aria-current="page"] { color: var(--crc-yellow); } .crc-nav__cta { background: linear-gradient(135deg, #ff4444 0%, #ff6b35 100%); color: #fff; padding: 8px 20px; border-radius: 6px; font-weight: 900; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 14px rgba(255, 68, 68, 0.4); transition: all 0.35s cubic-bezier(0.4,0,0.2,1); animation: cta-pulse 2.5s ease-in-out infinite; } .crc-nav__cta:hover { background: linear-gradient(135deg, #e03030 0%, #e05a28 100%); color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 68, 68, 0.5); } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(255, 68, 68, 0.4); } 50% { box-shadow: 0 4px 22px rgba(255, 68, 68, 0.65); } } .crc-nav__hamburger { display: block; padding: 8px; cursor: pointer; } @media (min-width: 1024px) { .crc-nav__hamburger { display: none; } } .nav-icon { width: 28px; height: 14px; position: relative; } .nav-icon span { display: block; position: absolute; height: 3px; width: 100%; background: #fff; border-radius: 4px; left: 0; transition: 0.3s ease-in-out; } .nav-icon span:nth-child(1) { top: 0; } .nav-icon span:nth-child(2) { top: 10px; } .nav-icon.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-icon.open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); } .crc-nav__accent { height: 6px; background: var(--crc-orange); position: relative; z-index: 1; /* z-index bajo para no cubrir el dropdown de idioma */ transition: height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; } /* ── Estado compacto del nav al hacer scroll ── */ .crc-nav--shrink .crc-nav__bar { height: 56px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13); } .crc-nav--shrink .crc-nav__accent { height: 3px; } .crc-nav--shrink .crc-nav__logo { width: 36px; height: 36px; } .crc-nav--shrink .crc-nav__title { font-size: 1rem; } @media (min-width: 1024px) { .crc-nav--shrink .crc-nav__logo { width: 42px; height: 42px; } .crc-nav--shrink .crc-nav__title { font-size: 1.25rem; } } .crc-nav--shrink .crc-nav__links { font-size: 0.6rem; gap: 6px; } @media (min-width: 1152px) { .crc-nav--shrink .crc-nav__links { font-size: 0.65rem; gap: 10px; } } @media (min-width: 1280px) { .crc-nav--shrink .crc-nav__links { font-size: 0.73rem; gap: 16px; } } .crc-nav--shrink .crc-nav__cta { padding: 6px 16px; font-size: 0.78rem; } /* ── Selector de idioma (dropdown hover) ── */ .lang-switch { position: relative; flex-shrink: 0; margin-left: 16px; } /* Botón visible (idioma activo) */ .lang-switch__toggle { display: flex; align-items: center; gap: 5px; border: none; background: rgba(0, 0, 0, 0.18); color: #fff; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .lang-switch__toggle:hover { background: rgba(0, 0, 0, 0.32); } .lang-switch__toggle svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.3s ease; } .lang-switch:hover .lang-switch__toggle svg { transform: rotate(180deg); } /* Panel desplegable */ .lang-switch__menu { position: absolute; top: 100%; right: 0; min-width: 140px; background: #fff; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); padding: 8px 6px 6px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 9999; } /* Flechita decorativa */ .lang-switch__menu::before { content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; box-shadow: -1px -1px 2px rgba(0,0,0,0.06); } /* Mostrar al hover, focus-within, o click (clase .open) */ .lang-switch:hover .lang-switch__menu, .lang-switch:focus-within .lang-switch__menu, .lang-switch__menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* SVG arrow rotated when menu is open via click */ .lang-switch__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Cada opción de idioma */ .lang-switch__menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; color: var(--crc-gray-700); font-weight: 700; font-size: 0.82rem; padding: 9px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; text-align: left; letter-spacing: 0; text-transform: none; } .lang-switch__menu button:hover { background: var(--crc-green-50, #f1f9e6); color: var(--crc-green-700); } .lang-switch__menu button.active { background: var(--crc-green); color: #fff; font-weight: 800; } .lang-switch__menu button .lang-flag { font-size: 1.05rem; line-height: 1; } /* ── Selector de idioma en menú MÓVIL ── */ .lang-switch--mobile { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; padding: 12px; background: #f3f3f3; border-radius: 12px; } .lang-switch--mobile button { border: 2px solid #e0e0e0; background: #fff; color: var(--crc-ink); font-weight: 800; font-size: 0.78rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; } .lang-switch--mobile button:hover { border-color: var(--crc-green); background: var(--crc-green-50, #f1f9e6); } .lang-switch--mobile button.active { background: var(--crc-green); border-color: var(--crc-green); color: #fff; } /* Menú móvil flotante */ #mobile-menu-container { pointer-events: none; transition: 0.4s; position: relative; max-width: 1280px; margin-inline: auto; padding-inline: 16px; } #mobile-menu-container.active { pointer-events: auto; } #mobile-menu { position: absolute; left: 16px; right: 16px; top: 14px; border-radius: 28px; padding: 32px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-15px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (min-width: 1024px) { #mobile-menu { display: none; } } #mobile-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } #mobile-menu a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 700; font-size: 1rem; color: var(--crc-gray-700); border-bottom: 1px solid #f1f1f1; transition: color 0.2s; } #mobile-menu a:last-child { border-bottom: 0; } #mobile-menu a:hover { color: var(--crc-green); } #mobile-menu .dot { width: 6px; height: 6px; background: var(--crc-green); border-radius: 999px; } #mobile-menu .mobile-cta { background: var(--crc-orange); color: #fff !important; text-align: center; border-radius: 999px !important; padding: 14px 0 !important; margin-top: 12px; border: none !important; display: block !important; } /* ===================== Hero principal ===================== */ .crc-hero { position: relative; min-height: 75vh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 12px solid var(--crc-sky); padding-top: 86px; } .crc-hero__media { position: absolute; inset: 0; z-index: 0; } .crc-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: opacity 1s ease-in-out; } .crc-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.55) 100% ); } .crc-hero__content { position: relative; z-index: 30; text-align: center; color: #fff; padding: 0 24px; max-width: 980px; } .crc-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; backdrop-filter: blur(6px); margin-bottom: 18px; } .crc-hero__badge::before { content: ""; width: 8px; height: 8px; background: var(--crc-green); border-radius: 999px; } .crc-hero__title { font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .crc-hero__title em { color: var(--crc-yellow); font-style: italic; font-weight: 900; } .crc-hero__subtitle { margin-top: 18px; font-size: 1.05rem; font-weight: 500; max-width: 720px; margin-inline: auto; line-height: 1.6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } .crc-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; } .crc-hero__nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: var(--crc-green); color: #fff; display: grid; place-items: center; border: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); z-index: 40; transition: all 0.25s; } .crc-hero__nav-btn:hover { background: var(--crc-sky); transform: translateY(-50%) scale(1.1); } .crc-hero__nav-btn--prev { left: 18px; } .crc-hero__nav-btn--next { right: 18px; } @media (min-width: 1024px) { .crc-hero__nav-btn { width: 52px; height: 52px; } .crc-hero__nav-btn--prev { left: 36px; } .crc-hero__nav-btn--next { right: 36px; } } /* Stats bar */ .crc-stats { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 720px; margin-inline: auto; } @media (min-width: 768px) { .crc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .crc-stat__num { font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--crc-orange); text-shadow: 0 2px 8px rgba(0,0,0,0.15); } @media (min-width: 768px) { .crc-stat__num { font-size: 3.6rem; } } .crc-stat__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; margin-top: 6px; color: rgba(255, 255, 255, 0.85); } /* ===================== Encabezado de página interior ===================== */ .page-header { background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%); color: #fff; padding: 130px 0 70px; text-align: center; position: relative; overflow: hidden; } .page-header h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.05; margin: 8px 0 12px; text-transform: uppercase; letter-spacing: -0.02em; } .page-header p { font-size: 1.05rem; max-width: 680px; margin: 12px auto 0; color: rgba(255, 255, 255, 0.85); line-height: 1.6; } .page-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient( 90deg, var(--crc-green) 0%, var(--crc-yellow) 33%, var(--crc-orange) 66%, var(--crc-sky) 100% ); } /* ===================== Secciones genéricas ===================== */ .section { padding: 80px 0; } .section--cream { background: var(--crc-cream); } .section--green { background: linear-gradient(135deg, var(--crc-green-700) 0%, var(--crc-green) 100%); color: #fff; } .section--green .section-title, .section--sky .section-title, .section--dark .section-title { color: #fff; } .section--sky { background: linear-gradient(135deg, var(--crc-sky-700) 0%, var(--crc-sky) 100%); color: #fff; } .section--dark { background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%); color: #fff; } .crc-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .crc-container--narrow { max-width: 920px; } .grid-2 { display: grid; gap: 48px; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-4 { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ===================== Tarjetas ===================== */ .crc-card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.04); transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; } .crc-card:hover { transform: translateY(-6px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); } /* Tarjeta de programa */ .program-card { --tint: var(--crc-green); position: relative; background: #fff; border-radius: 22px; padding: 36px 30px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; } .program-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--tint) 0%, transparent 80%); opacity: 0; transition: opacity 0.4s ease; } .program-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px rgba(0, 0, 0, 0.12); } .program-card:hover::before { opacity: 0.08; } .program-card__num { font-size: 4rem; font-weight: 900; line-height: 1; color: rgba(0, 0, 0, 0.06); margin-bottom: 14px; } .program-card__abbr { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.25em; color: var(--tint); margin-bottom: 12px; } .program-card__title { font-size: 1.35rem; font-weight: 900; line-height: 1.15; margin: 0 0 12px; color: var(--crc-ink); } .program-card__desc { font-size: 0.95rem; color: var(--crc-gray-700); line-height: 1.6; margin: 0; } /* Tarjeta de valor */ .valor-card { text-align: center; background: #fff; border-radius: 20px; padding: 32px 24px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.04); transition: transform 0.3s ease; } .valor-card:hover { transform: translateY(-4px); } .valor-card__icon { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 999px; background: var(--crc-green-50); color: var(--crc-green-700); font-size: 1.6rem; } .valor-card__title { font-size: 1.15rem; font-weight: 900; margin: 8px 0; text-transform: uppercase; color: var(--crc-ink); } .valor-card__desc { font-size: 0.9rem; color: var(--crc-gray-700); line-height: 1.6; } /* Tarjeta de proyecto */ .project-card { position: relative; border-radius: 22px; overflow: hidden; background: #1a1a1a; height: 460px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 8px solid var(--tint, var(--crc-green)); transition: transform 0.4s ease; } .project-card:hover { transform: translateY(-6px); } .project-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); transition: transform 0.6s ease, filter 0.6s ease; } .project-card:hover .project-card__img { transform: scale(1.08); filter: brightness(0.4); } .project-card__content { position: relative; z-index: 2; padding: 32px; color: #fff; } .project-card__title { font-size: 1.45rem; font-weight: 900; text-transform: uppercase; margin: 0 0 12px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .project-card__desc { font-size: 0.92rem; opacity: 0.9; margin: 0 0 18px; line-height: 1.55; } .project-card__cta { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; display: inline-flex; gap: 8px; padding-bottom: 4px; border-bottom: 2px solid var(--crc-yellow); width: max-content; } /* Tarjeta de persona */ .person-card { text-align: center; } .person-card__photo { width: 220px; height: 240px; margin: 0 auto 18px; border-radius: 28px; padding: 4px; background: linear-gradient( 135deg, var(--crc-sky) 0%, var(--crc-green) 50%, var(--crc-yellow) 100% ); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .person-card__photo > div { width: 100%; height: 100%; background: #fff; border-radius: 24px; overflow: hidden; } .person-card__photo img { width: 100%; height: 100%; object-fit: cover; } .person-card__name { font-size: 1.05rem; font-weight: 900; text-transform: uppercase; margin: 0 0 4px; color: var(--crc-ink); line-height: 1.2; } .person-card__role { font-size: 0.85rem; color: var(--crc-gray-500); font-style: italic; font-weight: 500; line-height: 1.3; } /* ===================== Lista de comunidades ===================== */ .community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .community-grid li { list-style: none; background: #fff; border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; font-weight: 600; border-left: 4px solid var(--crc-green); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, border-color 0.2s ease; } .community-grid li:hover { transform: translateX(4px); border-color: var(--crc-orange); } /* ===================== Timeline histórico ===================== */ .crc-timeline { position: relative; padding-left: 32px; } .crc-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 3px; background: linear-gradient( 180deg, var(--crc-green) 0%, var(--crc-yellow) 50%, var(--crc-orange) 100% ); border-radius: 99px; } .timeline-item { position: relative; padding-bottom: 32px; } .timeline-item::before { content: ""; position: absolute; left: -32px; top: 6px; width: 18px; height: 18px; border-radius: 999px; background: var(--crc-green); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--crc-green-700); } .timeline-year { font-size: 1.3rem; font-weight: 900; color: var(--crc-orange); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .timeline-text { font-size: 0.95rem; color: var(--crc-gray-700); line-height: 1.6; } /* ===================== Footer ===================== */ .crc-footer { background: #0d0d0d; color: rgba(255, 255, 255, 0.85); padding: 60px 0 32px; position: relative; } .crc-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient( 90deg, var(--crc-green) 0%, var(--crc-yellow) 33%, var(--crc-orange) 66%, var(--crc-sky) 100% ); } .crc-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .crc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .crc-footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; color: #fff; margin: 0 0 16px; } .crc-footer a { display: block; padding: 6px 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); transition: color 0.2s; } .crc-footer a:hover { color: var(--crc-yellow); } .crc-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .crc-footer__brand img { width: 56px; height: 56px; } .crc-footer__brand strong { display: block; font-size: 1rem; color: #fff; font-weight: 900; } .crc-footer__brand small { display: block; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; } .crc-footer__bottom { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 36px; padding-top: 24px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); } @media (min-width: 768px) { .crc-footer__bottom { flex-direction: row; } } .crc-footer__social { display: flex; gap: 10px; flex-wrap: wrap; } .crc-footer__social a { width: 40px; height: 40px; border-radius: 999px; background: var(--crc-green); display: grid; place-items: center; color: #fff; transition: all 0.25s; padding: 0 !important; } .crc-footer__social a:hover { background: var(--crc-orange); transform: translateY(-2px) scale(1.05); } .crc-footer__social svg { width: 18px; height: 18px; fill: currentColor; } /* Variante con icono PNG (íconos a color que conservan su paleta original) */ .crc-footer__social a.icon-png { background: #fff; padding: 8px !important; } .crc-footer__social a.icon-png:hover { background: var(--crc-cream); } .crc-footer__social a.icon-png img { width: 22px; height: 22px; object-fit: contain; } /* ===================== Carrusel de proyectos ===================== */ .carousel-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; } .carousel-rail::-webkit-scrollbar { display: none; } .carousel-rail { -ms-overflow-style: none; scrollbar-width: none; } .carousel-card { flex: 0 0 100%; scroll-snap-align: center; } @media (min-width: 768px) { .carousel-card { flex: 0 0 calc(50% - 12px); } } @media (min-width: 1024px) { .carousel-card { flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; } } .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; } .carousel-dot { width: 12px; height: 12px; border-radius: 99px; background: #d4d4d4; border: none; transition: all 0.3s ease; cursor: pointer; } .carousel-dot.active { width: 28px; background: var(--crc-orange); } /* ===================== Mapa SVG ===================== */ .map-wrap { position: relative; background: linear-gradient(135deg, #e8f4fa 0%, #f7fbe6 100%); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08); } .map-svg { width: 100%; height: auto; display: block; } .map-svg .lake { fill: var(--crc-sky); opacity: 0.5; } .map-svg .land { fill: #f4f1d4; } .map-svg .road { stroke: #d4d4d4; stroke-width: 0.4; fill: none; } .map-svg .border { stroke: var(--crc-green-700); stroke-width: 0.8; fill: none; stroke-dasharray: 2 2; } .map-svg .community-marker { fill: var(--crc-orange); cursor: pointer; transition: transform 0.25s ease, fill 0.25s ease; transform-origin: center; transform-box: fill-box; } .map-svg .community-marker:hover { transform: scale(1.6); fill: var(--crc-green); } .map-svg .city-marker { fill: var(--crc-green); stroke: #fff; stroke-width: 0.4; } .map-svg .label { font-family: var(--crc-font-sans); font-size: 4px; font-weight: 700; fill: var(--crc-ink); pointer-events: none; } .map-svg .label--lake { font-style: italic; fill: var(--crc-sky-700); font-size: 5px; } .map-svg .label--city { font-size: 5.5px; font-weight: 900; } /* Leyenda del mapa */ .map-legend { position: absolute; bottom: 16px; left: 16px; background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 12px 16px; font-size: 0.78rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); } .map-legend h4 { margin: 0 0 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--crc-gray-700); } .map-legend ul { list-style: none; margin: 0; padding: 0; } .map-legend li { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--crc-gray-700); } .map-legend .swatch { width: 10px; height: 10px; border-radius: 999px; } /* ===================== Formularios ===================== */ .crc-form { display: grid; gap: 18px; } .crc-form label { display: block; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crc-gray-700); margin-bottom: 6px; } .crc-form input, .crc-form textarea, .crc-form select { width: 100%; padding: 14px 16px; border: 2px solid #e5e5e5; border-radius: 12px; font-family: inherit; font-size: 1rem; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .crc-form input:focus, .crc-form textarea:focus, .crc-form select:focus { outline: none; border-color: var(--crc-green); box-shadow: 0 0 0 4px rgba(118, 188, 33, 0.18); } .crc-form textarea { min-height: 120px; resize: vertical; } .crc-form .form-row { display: grid; gap: 18px; } @media (min-width: 640px) { .crc-form .form-row--2 { grid-template-columns: 1fr 1fr; } } .crc-form__status { padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; } .crc-form__status--success { background: var(--crc-green-50); color: var(--crc-green-700); border-left: 4px solid var(--crc-green); } .crc-form__status--error { background: #fde8e8; color: #c81e1e; border-left: 4px solid #c81e1e; } /* ===================== Tarjeta de cuenta bancaria ===================== */ .bank-card { border-radius: 22px; padding: 28px; color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; position: relative; overflow: hidden; } .bank-card:hover { transform: translateY(-4px); } .bank-card.green { background: linear-gradient(135deg, var(--crc-green) 0%, var(--crc-green-700) 100%); } .bank-card.orange { background: linear-gradient(135deg, var(--crc-orange) 0%, #b85320 100%); } .bank-card.sky { background: linear-gradient(135deg, var(--crc-sky) 0%, var(--crc-sky-700) 100%); } .bank-card h4 { margin: 0 0 18px; font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .bank-card .field { margin-bottom: 12px; } .bank-card .field span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; margin-bottom: 4px; } .bank-card .field strong { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; word-break: break-all; } .bank-card .copy-btn { font-size: 0.7rem; font-weight: 700; padding: 4px 10px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 99px; color: #fff; margin-left: 8px; transition: background 0.2s; } .bank-card .copy-btn:hover { background: rgba(255, 255, 255, 0.4); } /* ===================== FAQ ===================== */ .faq-item { background: #fff; border-radius: 16px; margin-bottom: 14px; border: 1px solid #eee; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .faq-item summary { padding: 20px 24px; cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "＋"; font-size: 1.4rem; color: var(--crc-orange); transition: transform 0.3s ease; } .faq-item[open] summary { background: var(--crc-cream); } .faq-item[open] summary::after { content: "−"; transform: rotate(180deg); } .faq-item .faq-content { padding: 0 24px 22px; color: var(--crc-gray-700); line-height: 1.6; font-size: 0.95rem; } /* ===================== Reveal-on-scroll ===================== */ .crc-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .crc-reveal.crc-visible { opacity: 1; transform: none; } .crc-reveal-d1 { transition-delay: 0.15s; } .crc-reveal-d2 { transition-delay: 0.3s; } .crc-reveal-d3 { transition-delay: 0.45s; } /* ===================== Motion One enhancements ===================== Cuando motion.js está activo, agrega springs y micro-interacciones. Estas reglas suavizan la transición desde el estado oculto. ================================================================== */ .crc-reveal { /* will-change para que el navegador prepare la composición */ will-change: opacity, transform; } /* Cards reciben sombra base más sutil para que el lift sea perceptible */ .program-card, .project-card, .community-card, .partner-card, .platform-card, .value-card, .person-card, .board-card { transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Botones magnéticos: transición suave por defecto, motion.js controla x/y */ .crc-nav__cta, .btn-primary, .btn-cta, .mobile-cta, [data-magnetic] { will-change: transform; transform-origin: center center; } /* ===================== View Transitions API ===================== Transición suave de página a página cuando el navegador la soporta (Chrome 111+, Safari 18+, Firefox: detrás de flag). ================================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: crc-fade-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-new(root) { animation: crc-fade-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes crc-fade-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes crc-fade-in { from { opacity: 0; transform: translateY(12px); } } /* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .crc-reveal, .crc-reveal-d1, .crc-reveal-d2, .crc-reveal-d3 { transition: opacity 0.2s ease !important; transform: none !important; } } /* ===================== Toast (futuro: avisos) ===================== */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--crc-ink); color: #fff; padding: 14px 22px; border-radius: 12px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); z-index: 999; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; } .toast.show { transform: translateY(0); opacity: 1; } /* ===================== Skip link a11y ===================== */ .skip-link { position: absolute; top: -40px; left: 8px; background: var(--crc-orange); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 8px; } /* ===================== Print ===================== */ @media print { .crc-nav, .crc-footer, .no-print { display: none !important; } body { color: #000; } a { color: #000; text-decoration: underline; } } /* ===================== Causas de donación ===================== */ .causa-btn { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: all 0.25s ease; text-align: left; backdrop-filter: blur(4px); } .causa-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .causa-btn.active { background: #fff; color: var(--crc-green-700); border-color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); } .causa-btn__icon { font-size: 1.5rem; flex-shrink: 0; } .causa-btn__name { line-height: 1.3; } /* ===================== Reduce motion ===================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }