/* * DondeVeo — Base Styles * Estilos compartidos entre todos los tipos de página generada. * Requiere tokens.css cargado antes en el . */ *,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .main { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; } /* ── Nav ─────────────────────────────────────────────────────────────────── */ nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; } .ni { max-width: 1100px; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; } .li { width: 36px; height: 36px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; } .lt { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .lt span { color: var(--accent); } .back { font-size: 13px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); padding: 6px 14px; border-radius: 100px; transition: all .2s; white-space: nowrap; } .back:hover { color: var(--text); border-color: var(--accent); } /* ── Breadcrumb ──────────────────────────────────────────────────────────── */ .breadcrumb { font-size: 12px; color: var(--text-dim); margin-bottom: 28px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--text); } .breadcrumb span { margin: 0 6px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ footer { background: var(--surface); border-top: 1px solid var(--border); padding: 20px; text-align: center; font-size: 11px; color: var(--text-dim); } footer a { color: var(--text-muted); } footer a:hover { color: var(--gold); } /* ── Share block (fichas + países) ──────────────────────────────────────── */ .share-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 28px 0; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); } .share-label { font-size: 13px; font-weight: 700; color: var(--text); margin-right: 4px; } .share-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; font-weight: 700; text-decoration: none; color: #fff; transition: transform .2s; border: 1.5px solid transparent; } .share-btn:hover { transform: scale(1.12); } .share-x { background: #000; border-color: #333; } .share-fb { background: #1877f2; border-color: #1877f2; } .share-wa { background: #25d366; border-color: #25d366; } .share-tg { background: #0088cc; border-color: #0088cc; } .share-rt { background: #ff4500; border-color: #ff4500; } .share-copy { display: flex; align-items: center; gap: 6px; margin-left: auto; background: transparent; border: 1.5px solid var(--border); color: var(--text-muted); padding: 8px 16px; border-radius: 100px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; } .share-copy:hover { border-color: var(--accent); color: var(--text); } @media (max-width: 680px) { .share-wrap { justify-content: center; } .share-copy { width: 100%; margin-left: 0; margin-top: 8px; } } /* ── Platform cards (blog post CTAs) ────────────────────────────────────── */ .platform-section { margin-top: 48px; padding: 32px 24px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); } .platform-section-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .platform-card { padding: 20px; border-radius: 12px; border: 2px solid var(--border); background: var(--card); display: flex; flex-direction: column; gap: 10px; transition: transform .2s, border-color .2s; } .platform-card:hover { transform: translateY(-3px); } .pc-icon { font-size: 28px; line-height: 1; } .pc-name { font-size: 16px; font-weight: 800; color: var(--text); } .pc-price { font-size: 22px; font-weight: 800; color: var(--emerald); line-height: 1; } .pc-desc { font-size: 13px; color: var(--tm); line-height: 1.5; flex: 1; } .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 100px; text-decoration: none; transition: opacity .2s; margin-top: 4px; } .pc-btn:hover { opacity: .85; } .movistar-cta { border-color: #00A9E0; background: linear-gradient(135deg, rgba(0,169,224,.10), var(--card)); } .movistar-cta .pc-btn { background: #00A9E0; } .dazn-cta { border-color: #FFCC00; background: #1a1a1a; } .dazn-cta .pc-name, .dazn-cta .pc-price { color: #FFCC00; } .dazn-cta .pc-btn { background: #FFCC00; color: #000; } .netflix-cta { border-color: #E50914; background: linear-gradient(135deg, rgba(229,9,20,.10), var(--card)); } .netflix-cta .pc-btn { background: #E50914; } .hbo-cta { border-color: #5822B4; background: linear-gradient(135deg, rgba(88,34,180,.10), var(--card)); } .hbo-cta .pc-btn { background: #5822B4; } .disney-cta { border-color: #113CCF; background: linear-gradient(135deg, rgba(17,60,207,.10), var(--card)); } .disney-cta .pc-btn { background: #113CCF; } .prime-cta { border-color: #00A8E1; background: linear-gradient(135deg, rgba(0,168,225,.10), var(--card)); } .prime-cta .pc-btn { background: #00A8E1; } @media(max-width: 600px) { .platform-grid { grid-template-columns: 1fr 1fr; } .platform-section { padding: 24px 16px; } } @media(max-width: 400px) { .platform-grid { grid-template-columns: 1fr; } }