/* ============================================================ Grupo Papillón Desarrollo — css/styles.css Fuente requerida en del HTML: https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap ============================================================ */ /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; background: #ffffff; color: #333333; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; border: 0; } a { color: #337ab7; text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { color: #245c8a; } h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.3; color: #111111; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } ul { list-style: none; } /* ── SITE HEADER ── */ .site-header { position: sticky; top: 0; z-index: 100; background: #337ab7; text-align: center; padding: 0.65em 1.5em; box-shadow: 0 2px 8px rgba(51, 122, 183, 0.25); } .site-header a { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; } .site-header a:hover { color: rgba(255, 255, 255, 0.75); } /* ── PP HEADER (logo) ── */ .pp-header { display: flex; justify-content: center; align-items: center; padding: 60px 60px 54px; background: #ffffff; position: relative; } .pp-header::after { content: ''; position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, #337ab7, transparent); } .pp-header img { max-width: 520px; width: 100%; } /* ── BRANDS NAV ── */ .pp-brands-section { padding: 56px 60px 20px; max-width: 1480px; margin: 0 auto; } .pp-brands-label { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: #337ab7; margin-bottom: 36px; } .pp-brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pp-brand-pill { background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 36px 28px; min-height: 120px; border: 1px solid #dde5ef; border-radius: 8px; position: relative; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .pp-brand-pill::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #337ab7; transform: scaleX(0); transition: transform 0.3s ease; } .pp-brand-pill:hover { border-color: #337ab7; box-shadow: 0 4px 20px rgba(51, 122, 183, 0.14); } .pp-brand-pill:hover::before { transform: scaleX(1); } .pp-brand-pill img { max-width: 190px; max-height: 90px; width: auto; height: auto; object-fit: contain; filter: grayscale(10%) brightness(0.95); transition: filter 0.3s ease; } .pp-brand-pill:hover img { filter: grayscale(0%) brightness(1); } /* ── CONTENT WRAPPER ── */ .pp-content-wrapper { max-width: 1480px; margin: 0 auto; padding: 72px 60px; } /* ── COMPANY CARDS ── */ .pp-card { display: grid; grid-template-columns: 1fr 2fr; border: 1px solid #dde5ef; border-radius: 8px; overflow: hidden; margin-bottom: 4px; background: #f5f8fc; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .pp-card.pp-visible { opacity: 1; transform: translateY(0); } .pp-card.pp-card-reverse { grid-template-columns: 2fr 1fr; } .pp-card-visual { background: #e4edf7; display: flex; align-items: center; justify-content: center; padding: 48px 36px; position: relative; border-right: 1px solid #dde5ef; } .pp-card-visual::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #337ab7, transparent); } .pp-card-reverse .pp-card-visual { order: 2; border-right: none; border-left: 1px solid #dde5ef; } .pp-card-visual img { max-width: 280px; max-height: 170px; width: auto; height: auto; object-fit: contain; } .pp-card-body { padding: 56px 72px; background: #ffffff; } .pp-card-reverse .pp-card-body { order: 1; } .pp-card-tag { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #337ab7; border: 1px solid rgba(51, 122, 183, 0.35); border-radius: 3px; padding: 5px 13px; margin-bottom: 18px; } .pp-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 700; color: #111111; margin-bottom: 20px; line-height: 1.3; } .pp-card-text { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 400; color: #333333; line-height: 1.85; margin-bottom: 16px; } .pp-card-text strong { font-weight: 600; color: #111111; } .pp-card-text a { color: #337ab7; border-bottom: 1px solid rgba(51, 122, 183, 0.3); transition: color 0.2s; } .pp-card-text a:hover { color: #245c8a; } .pp-card-list { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; } .pp-card-list li { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; color: #444444; padding-left: 20px; position: relative; line-height: 1.65; } .pp-card-list li::before { content: '\2022'; position: absolute; left: 0; color: #337ab7; font-size: 18px; line-height: 1.65; } .pp-card-list a { color: #444444; transition: color 0.2s; } .pp-card-list a:hover { color: #337ab7; } .pp-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #337ab7; border-bottom: 1px solid rgba(51, 122, 183, 0.35); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; margin-top: 12px; } .pp-card-link::after { content: '\2192'; transition: transform 0.2s; } .pp-card-link:hover { color: #245c8a; border-color: #245c8a; } .pp-card-link:hover::after { transform: translateX(4px); } /* ── DIVIDER ── */ .pp-divider { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; } .pp-divider::before { content: ''; width: 1px; height: 38px; background: linear-gradient(to bottom, #337ab7, transparent); } /* ── FOOTER NOTE (ayuda UE) ── */ .pp-footer-note { max-width: 760px; margin: 70px auto 50px; padding: 28px 36px; border: 1px solid #dde5ef; border-left: 3px solid #337ab7; border-radius: 4px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #888888; line-height: 1.85; background: #f5f8fc; } /* ── SITE FOOTER ── */ .site-footer { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #888888; text-align: center; padding: 2.5em 1.5em; border-top: 1px solid #e8edf3; background: #f5f8fc; line-height: 1.9; } .site-footer a { color: #337ab7; } .site-footer a:hover { color: #245c8a; } .site-footer p { margin-bottom: 0.3em; } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { .pp-card-body { padding: 40px 44px; } .pp-brands-section { padding: 40px 30px 16px; } .pp-content-wrapper { padding: 48px 30px; } } @media (max-width: 900px) { .pp-brands-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .pp-card, .pp-card.pp-card-reverse { grid-template-columns: 1fr; } .pp-card-visual { border-right: none; border-bottom: 1px solid #dde5ef; } .pp-card-reverse .pp-card-visual { order: 0; border-left: none; border-bottom: 1px solid #dde5ef; } .pp-card-reverse .pp-card-body { order: 0; } .pp-card-body { padding: 30px 24px; } .pp-card-list { grid-template-columns: 1fr; } .pp-content-wrapper { padding: 36px 18px; } .pp-brands-section { padding: 32px 18px 12px; } .pp-header { padding: 36px 24px 30px; } }