/* ========================================================================== PC Dreams Luxury Experience — sistema de diseño Tokens y componentes tomados del diseño aprobado del sitio. ========================================================================== */ :root { --pcd-navy: #03112B; --pcd-red: #CE1126; --pcd-red-dark: #A10D1E; --pcd-body: #475569; --pcd-ink-2: #334155; --pcd-muted: #64748B; --pcd-muted-2: #94A3B8; --pcd-light: #CBD5E1; --pcd-light-2: #AEBACD; --pcd-border: #E6EAF0; --pcd-border-soft: #F1F5F9; --pcd-soft: #EEF2F8; --pcd-green: #22C55E; --pcd-white: #FFFFFF; --pcd-wrap: 1240px; --pcd-gutter: 28px; --pcd-radius: 8px; --pcd-radius-lg: 14px; --pcd-font: Roboto, Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ .pcd { font-family: var(--pcd-font); color: var(--pcd-body); font-size: 16px; -webkit-font-smoothing: antialiased; } /* La base va dentro de :where() para quedar con especificidad de elemento: así cualquier regla de componente (.pcd-hero__sub, .pcd-footer a…) le gana sin tener que repetir el prefijo, y aun así se impone al reset.css del tema porque esta hoja carga después. */ :where(.pcd) *, :where(.pcd) *::before, :where(.pcd) *::after { box-sizing: border-box; } :where(.pcd) :is(h1, h2, h3, h4) { font-family: var(--pcd-font); color: var(--pcd-navy); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 0; } :where(.pcd) p { margin: 0; } :where(.pcd) a { color: var(--pcd-red); text-decoration: none; } :where(.pcd) a:where(:hover) { color: var(--pcd-red-dark); } :where(.pcd) img { max-width: 100%; height: auto; display: block; } :where(.pcd) ul { margin: 0; padding: 0; list-style: none; } :where(.pcd) :is(input, select, textarea, button) { font-family: inherit; } .pcd-wrap { max-width: var(--pcd-wrap); margin: 0 auto; padding: 0 var(--pcd-gutter); } .pcd-section { padding: 96px 0; } .pcd-section--soft { background: var(--pcd-soft); } .pcd-section--dark { background: var(--pcd-navy); } .pcd-section--tight { padding: 68px 0; } @keyframes pcd-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pcd-reveal { animation: pcd-fade-up .6s cubic-bezier(.16, 1, .3, 1) both; } @media (prefers-reduced-motion: reduce) { .pcd-reveal { animation: none; } } /* -------------------------------------------------------------------------- Tipografía de sección -------------------------------------------------------------------------- */ .pcd-kicker { display: inline-block; background: var(--pcd-red); color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 5px; } .pcd-h2 { font-size: 40px; text-wrap: balance; } .pcd-h3 { font-size: 21px; font-weight: 500; } .pcd-lead { font-size: 17px; line-height: 1.6; color: var(--pcd-muted); text-wrap: pretty; } .pcd-head { margin-bottom: 48px; } .pcd-head .pcd-h2 { margin-top: 16px; } .pcd-head .pcd-lead { margin-top: 14px; max-width: 620px; } .pcd-head--center { text-align: center; } .pcd-head--center .pcd-lead { margin-left: auto; margin-right: auto; } .pcd-section--dark .pcd-h2, .pcd-section--dark .pcd-h3 { color: #fff; } .pcd-section--dark .pcd-lead { color: var(--pcd-light-2); } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .pcd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 15px; padding: 14px 24px; border-radius: var(--pcd-radius); border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; line-height: 1.2; } .pcd-btn--primary { background: var(--pcd-red); color: #fff; } .pcd-btn--primary:hover { background: var(--pcd-red-dark); color: #fff; } .pcd-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .24); } .pcd-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } .pcd-btn--dark { background: var(--pcd-navy); color: #fff; } .pcd-btn--dark:hover { background: #071B3F; color: #fff; } .pcd-btn--outline { background: #fff; color: var(--pcd-navy); border-color: var(--pcd-border); } .pcd-btn--outline:hover { border-color: var(--pcd-navy); color: var(--pcd-navy); } .pcd-btn--sm { font-size: 13.5px; padding: 10px 16px; } .pcd-btn--block { width: 100%; } /* El tema aplica su propio color y fondo a los