/* ============================================================
Google Analytics / AdSense Theme
Base: Bootstrap 5 + Flexbox + Google Sans
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');
/* ── Reset & Root ─────────────────────────────────────────── */
:root {
--google-blue: #1a73e8;
--google-blue-hover: #1557b0;
--google-blue-light: #e8f0fe;
--google-teal: #137333; /* AdSense green */
--google-teal-link: #188038;
--google-green: #0f9d58;
--google-red: #ff3300;
--google-yellow: #f9ab00;
--surface: #ffffff;
--surface-alt: #f1f3f4;
--surface-hover: #e8eaed;
--surface-card: #f8f9fa;
--border: #dadce0;
--border-light: #e8eaed;
--text-primary: #202124;
--text-secondary: #5f6368;
--text-tertiary: #80868b;
--text-link: #1a73e8;
--text-link-teal: #1e8e3e;
--sidebar-width: 256px;
--header-height: 64px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
--shadow-2: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
--shadow-3: 0 2px 6px 2px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.30);
--font-sans: 'Google Sans', 'Roboto', Arial, sans-serif;
--font-display: 'Google Sans Display', 'Google Sans', Arial, sans-serif;
--font-body: 'Roboto', Arial, sans-serif;
--transition: 0.2s cubic-bezier(.4,0,.2,1);
/* Button palette */
--btn-red: #ff3300;
--btn-red-h: #cc2900;
--btn-blue: #0066ff;
--btn-blue-h: #0052cc;
--btn-green: #00c853;
--btn-green-h: #00a040;
--btn-yellow: #ffbb00;
--btn-yellow-h: #e6a800;
--btn-cyan: #00b4d8;
--btn-cyan-h: #0090ad;
--btn-purple: #7c3aed;
--btn-purple-h: #6028c4;
--btn-dark: #1a1a2e;
--btn-dark-h: #0d0d1a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font-body);
color: var(--text-primary);
background: #dee1e7;
min-height: 100vh;
}
/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 500; }
.text-primary-g { color: var(--text-primary) !important; }
.text-secondary-g { color: var(--text-secondary) !important; }
.text-tertiary-g { color: var(--text-tertiary) !important; }
.text-link { color: var(--text-link) !important; }
.text-link-teal { color: var(--text-link-teal) !important; }
/* ── Layout Shell ─────────────────────────────────────────── */
.g-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.g-body {
display: flex;
flex: 1;
padding-top: var(--header-height);
}
.g-content {
flex: 1;
min-width: 0;
padding: 24px;
margin-left: var(--sidebar-width);
}
.g-main-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px 0 40px;
}
/* ── Top Bar ──────────────────────────────────────────────── */
.g-topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-height);
background: var(--surface);
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
padding: 0 16px 0 8px;
gap: 8px;
z-index: 100;
}
.g-topbar__logo {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
text-decoration: none;
}
.g-topbar__logo-mark {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--google-blue);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
}
.g-topbar__product {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
}
.g-topbar__spacer { flex: 1; }
.g-topbar__search {
flex: 1;
max-width: 720px;
height: 40px;
background: var(--surface-alt);
border: 1px solid transparent;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.g-topbar__search:focus-within {
background: var(--surface);
border-color: var(--google-blue);
box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}
.g-topbar__search input {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
outline: none;
}
.g-topbar__search input::placeholder { color: var(--text-tertiary); }
.g-topbar__icon-btn {
width: 40px; height: 40px;
border: none;
background: transparent;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: background var(--transition);
text-decoration: none;
}
.g-topbar__icon-btn:hover { background: var(--surface-hover); }
.g-topbar__avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: #4285f4;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
/* ── Sidebar ──────────────────────────────────────────────── */
.g-sidebar {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
width: var(--sidebar-width);
background: var(--surface);
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
z-index: 90;
border-right: 1px solid var(--border-light);
}
.g-sidebar::-webkit-scrollbar { width: 6px; }
.g-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.g-nav-section { padding: 4px 0; }
.g-nav-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 16px 16px 4px;
}
.g-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
height: 40px;
border-radius: var(--radius-pill);
margin: 2px 8px;
cursor: pointer;
text-decoration: none;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
transition: background var(--transition), color var(--transition);
}
.g-nav-item:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.g-nav-item.active {
background: var(--google-blue-light);
color: var(--google-blue);
}
.g-nav-item .material-symbols-outlined {
font-size: 20px;
flex-shrink: 0;
}
.g-nav-divider {
border: none;
border-top: 1px dashed var(--border-light);
margin: 8px 0;
}
/* ── Cards ────────────────────────────────────────────────── */
.g-card {
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow: hidden;
}
.g-raised {
background-image: linear-gradient(to bottom, #fff, var(--surface-alt)) !important;
border:none;
}
.g-lowered {
background-image: linear-gradient(to top, #fff, var(--surface-alt)) !important;
border:none;
}
.g-card--shadow { border: none; box-shadow: var(--shadow-1); }
.g-card--flat { background: var(--surface-card); border: 1px solid var(--border-light); }
.g-card--borderless { border: none; }
.g-card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border-light);
}
.g-card__title {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
.g-card__subtitle {
font-size: 13px;
color: var(--text-secondary);
margin-top: 2px;
}
.g-card__body { padding: 10px; }
.g-card__body2 { padding: 10px; }
/* .g-card__body:last-child { padding-top: 0px; } */
@media (max-width: 767px) {
.g-card__body { padding: 10px !important; }
}
/* ── Promo / Info Card (as in screenshot) ─────────────────── */
.g-promo-card {
background: var(--surface-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.g-promo-card__title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.4;
}
.g-promo-card__desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
.g-promo-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-link-teal);
text-decoration: none;
margin-top: 4px;
transition: opacity var(--transition);
}
.g-promo-card__link:hover { opacity: .8; }
/* ── Promo Card — Parallax background variant ─────────────── */
.g-promo-card--parallax {
background-image: url('../img/landing-ciberseguridad-pagina-prousuario-nat.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
border: none;
padding: 60px 48px;
min-height: 80vh;
justify-content: flex-end;
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.g-promo-card--parallax::before {
content: '';
position: absolute;
inset: 0;
/* background: linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(0,26,51,.5) 100%); */
border-radius: inherit;
z-index: 0;
}
.g-promo-card--parallax .g-promo-card__title,
.g-promo-card--parallax .g-promo-card__desc,
.g-promo-card--parallax .g-promo-card__link {
position: relative;
z-index: 1;
}
.g-promo-card--parallax .g-promo-card__title {
font-size: 22px;
font-weight: 700;
color: #ffffff;
line-height: 1.25;
}
.g-promo-card--parallax .g-promo-card__desc {
color: rgba(255,255,255,.8);
font-size: 14px;
}
.g-promo-card--parallax .g-promo-card__link {
color: #00d4ff;
}
.g-promo-card--parallax .g-promo-card__link-icon {
background: #00d4ff;
color: #001a33;
}
@media (max-width: 991px) {
.g-promo-card--parallax {
background-attachment: scroll;
padding: 40px 28px;
}
}
.g-promo-card__link-icon {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--text-link-teal);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
/* ── Source Footer Bar ────────────────────────────────────── */
.g-source-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 0 4px;
font-size: 12px;
color: var(--text-secondary);
}
.g-source-bar__link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-link-teal);
text-decoration: none;
font-weight: 500;
font-size: 12px;
transition: opacity var(--transition);
}
.g-source-bar__link:hover { opacity: .8; }
.g-source-bar__ext-icon {
font-size: 13px;
opacity: .8;
}
/* ── Metric Cards ─────────────────────────────────────────── */
.g-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.g-metric-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
transition: box-shadow var(--transition);
}
/* .g-metric-card:hover { box-shadow: var(--shadow-1); } */
.g-metric-card__label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: .1px;
}
.g-metric-card__value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
color: var(--text-primary);
line-height: 1.2;
}
.g-metric-card__delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 500;
margin-top: 4px;
}
.g-metric-card__delta--up { color: var(--google-green); }
.g-metric-card__delta--down { color: var(--google-red); }
.g-metric-card__delta--flat { color: var(--text-secondary); }
.g-metric-card__accent {
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
}
/* ── Buttons ──────────────────────────────────────────────── */
.g-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 24px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: .25px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
white-space: nowrap;
user-select: none;
}
/* Filled / Primary */
.g-btn--filled {
background: var(--google-blue);
color: #fff;
}
.g-btn--filled:hover { background: var(--google-blue-hover); box-shadow: var(--shadow-1); }
/* Outlined */
.g-btn--outlined {
background: transparent;
border-color: var(--border);
color: var(--google-blue);
}
.g-btn--outlined:hover { background: var(--google-blue-light); border-color: var(--google-blue); }
/* Text */
.g-btn--text {
background: transparent;
color: var(--google-blue);
padding: 0 12px;
}
.g-btn--text:hover { background: var(--google-blue-light); }
/* Tonal */
.g-btn--tonal {
background: var(--google-blue-light);
color: var(--google-blue);
}
.g-btn--tonal:hover { background: #d2e3fc; }
/* Danger */
.g-btn--danger { background: var(--google-red); color: #fff; }
.g-btn--danger:hover { background: #cc2900; }
/* ══════════════════════════════════════════════════════════
SISTEMA DE BOTONES — Bootstrap overrides
══════════════════════════════════════════════════════════ */
/* Base shape — todos los .btn heredan esto */
.btn {
display: inline-block;
padding: 12px 22px;
font-size: 12px;
font-weight: 600;
border-radius: var(--radius-md);
border: none;
line-height: 1.4;
transition: background-color .2s ease, opacity .2s ease;
text-decoration: none;
cursor: pointer;
}
.btn-sm { padding: 12px 22px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
/* Solid variants */
.btn-primary { background-color: var(--btn-blue); border-color: var(--btn-blue); color: #fff; }
.btn-secondary { background-color: #6c6c7e; border-color: #6c6c7e; color: #fff; }
.btn-success { background-color: var(--btn-green); border-color: var(--btn-green); color: #fff; }
.btn-danger { background-color: var(--btn-red); border-color: var(--btn-red); color: #fff; }
.btn-warning { background-color: var(--btn-yellow); border-color: var(--btn-yellow); color: #000; }
.btn-info { background-color: var(--btn-cyan); border-color: var(--btn-cyan); color: #fff; }
.btn-dark { background-color: var(--btn-dark); border-color: var(--btn-dark); color: #fff; }
.btn-light { background-color: #ffffff; border: 1px solid var(--border-light); color: #000; }
.btn-teal { background-color: var(--text-link-teal); border-color: var(--text-link-teal); color: #fff; }
.btn-purple { background-color: var(--btn-purple); border-color: var(--btn-purple); color: #fff; }
/* Solid hover/focus/active */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--btn-blue-h); border-color: var(--btn-blue-h); color: #fff; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: #50505e; border-color: #50505e; color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--btn-green-h); border-color: var(--btn-green-h); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--btn-red-h); border-color: var(--btn-red-h); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: var(--btn-yellow-h); border-color: var(--btn-yellow-h); color: #000; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--btn-cyan-h); border-color: var(--btn-cyan-h); color: #fff; }
.btn-dark:hover, .btn-dark:focus, .btn-dark:active { background-color: var(--btn-dark-h); border-color: var(--btn-dark-h); color: #fff; }
.btn-light:hover, .btn-light:focus, .btn-light:active { background-color: #e9ecef; border-color: #dee2e6; color: #000; }
.btn-teal:hover, .btn-teal:focus, .btn-teal:active { background-color: var(--text-link-teal); border-color: var(--text-link-teal); color: #fff; opacity: .85; }
.btn-purple:hover, .btn-purple:focus, .btn-purple:active { background-color: var(--btn-purple-h); border-color: var(--btn-purple-h); color: #fff; }
/* Outline variants */
.btn-outline-primary { border: 1px solid var(--btn-blue); color: var(--btn-blue); background: transparent; }
.btn-outline-secondary { border: 1px solid var(--border-light); color: #6c6c7e; background: transparent; }
.btn-outline-success { border: 1px solid var(--btn-green); color: var(--btn-green); background: transparent; }
.btn-outline-danger { border: 1px solid var(--btn-red); color: var(--btn-red); background: transparent; }
.btn-outline-warning { border: 1px solid var(--btn-yellow); color: var(--btn-yellow); background: transparent; }
.btn-outline-info { border: 1px solid var(--btn-cyan); color: var(--btn-cyan); background: transparent; }
.btn-outline-dark { border: 1px solid var(--btn-dark); color: var(--btn-dark); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--btn-blue); color: #fff; border-color: var(--btn-blue); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { background-color: #6c6c7e; color: #fff; border-color: #6c6c7e; }
.btn-outline-success:hover, .btn-outline-success:active { background-color: var(--btn-green); color: #fff; border-color: var(--btn-green); }
.btn-outline-danger:hover, .btn-outline-danger:active { background-color: var(--btn-red); color: #fff; border-color: var(--btn-red); }
.btn-outline-warning:hover, .btn-outline-warning:active { background-color: var(--btn-yellow); color: #000; border-color: var(--btn-yellow); }
.btn-outline-info:hover, .btn-outline-info:active { background-color: var(--btn-cyan); color: #fff; border-color: var(--btn-cyan); }
.btn-outline-dark:hover, .btn-outline-dark:active { background-color: var(--btn-dark); color: #fff; border-color: var(--btn-dark); }
/* Sizes */
.g-btn--sm { height: 28px; font-size: 12px; padding: 0 16px; }
.g-btn--lg { height: 44px; font-size: 15px; padding: 0 32px; }
/* ── Tabs ─────────────────────────────────────────────────── */
.g-tabs {
display: flex;
border-bottom: 2px solid var(--border-light);
gap: 0;
}
.g-tab {
position: relative;
padding: 12px 16px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
border: none;
background: transparent;
text-decoration: none;
transition: color var(--transition);
white-space: nowrap;
}
.g-tab::after {
content: '';
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
transition: background var(--transition);
}
.g-tab:hover { color: var(--text-primary); }
.g-tab:hover::after { background: var(--border); }
.g-tab.active { color: var(--google-blue); }
.g-tab.active::after { background: var(--google-blue); }
/* ── Chips ────────────────────────────────────────────────── */
.g-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-primary);
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
user-select: none;
}
.g-chip:hover { background: var(--surface-hover); }
.g-chip.selected { background: var(--google-blue-light); border-color: var(--google-blue); color: var(--google-blue); }
/* ── Date Range Chip ──────────────────────────────────────── */
.g-date-range {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: box-shadow var(--transition);
}
/* .g-date-range:hover { box-shadow: var(--shadow-1); } */
/* ── Tables ───────────────────────────────────────────────── */
.g-table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
}
.g-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.g-table thead th {
padding: 12px 16px;
text-align: left;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--surface-card);
border-bottom: 1px solid var(--border-light);
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.g-table thead th:hover { background: var(--surface-hover); }
.g-table tbody tr {
border-bottom: 1px solid var(--border-light);
transition: background var(--transition);
}
.g-table tbody tr:last-child { border-bottom: none; }
.g-table tbody tr:hover { background: var(--surface-alt); }
.g-table tbody td {
padding: 12px 16px;
color: var(--text-primary);
vertical-align: middle;
}
.g-table--striped tbody tr:nth-child(even) { background: var(--surface-card); }
/* ── Badges ───────────────────────────────────────────────── */
.g-badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 8px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
}
.g-badge--blue { background: var(--google-blue-light); color: var(--google-blue); }
.g-badge--green { background: #e6f4ea; color: var(--google-green); }
.g-badge--red { background: #fce8e6; color: var(--google-red); }
.g-badge--yellow { background: #fef7e0; color: #b06000; }
.g-badge--gray { background: var(--surface-hover); color: var(--text-secondary); }
/* Badges por fuente de noticia (taxonomía fuentes → badge-{slug}) */
.badge-el-dia,
.badge-el-dia a {
color: #fff !important;
background-color: #e36423 !important;
border: transparent;
}
.badge-cristian-caricaturas-el-dia,
.badge-cristian-caricaturas-el-dia a {
color: #fff !important;
background-color: #e36423 !important;
border: transparent;
}
.badge-primicias,
.badge-primicias a {
color: #000 !important;
background-color: #fff !important;
border: transparent;
}
.badge-nuria-piera,
.badge-nuria-piera a {
color: #fff !important;
background-color: #3e6fb3 !important;
border: transparent;
}
.badge-listin-diario,
.badge-listin-diario a {
color: #000 !important;
background-color: #fbbc05 !important;
border: transparent;
}
.badge-diario-libre,
.badge-diario-libre a {
color: #fff !important;
background-color: #157751 !important;
border: transparent;
}
.badge-el-caribe,
.badge-el-caribe a {
color: #fff !important;
background-color: #38a9db !important;
border: transparent;
}
.badge-el-nuevo-diario,
.badge-el-nuevo-diario a {
color: #fff !important;
background-color: #e01c2b !important;
border: transparent;
}
.badge-acento,
.badge-acento a {
color: #fff !important;
background-color: #f81616 !important;
border: transparent;
}
.badge-deportes,
.badge-deportes a {
color: #fff !important;
background-color: #343a40 !important;
border: transparent;
}
.badge-periodico-hoy,
.badge-periodico-hoy a {
color: #fff !important;
background-color: #4f94df !important;
border: transparent;
}
.badge-el-nacional,
.badge-el-nacional a {
color: #fff !important;
background-color: #c12735 !important;
border: transparent;
}
.badge-cdn,
.badge-cdn a {
color: #fff !important;
background-color: #c92127 !important;
border: transparent;
}
.badge-mas-vip,
.badge-mas-vip a {
color: #fff !important;
background-color: #bf1b23 !important;
border: transparent;
}
.badge-actualidad-rt,
.badge-actualidad-rt a {
color: #000 !important;
background-color: #6ec702 !important;
border: transparent;
}
.badge-internacional,
.badge-internacional a {
color: #000 !important;
background-color: #6ec702 !important;
border: transparent;
}
.badge-infobae,
.badge-infobae a {
color: #fff !important;
background-color: #f98300 !important;
border: transparent;
}
.badge-farandula,
.badge-farandula a {
color: #fff !important;
background-color: #ff00cc !important;
border: transparent;
}
.badge-luminariastv,
.badge-luminariastv a {
color: #fff !important;
background-color: #ff00cc !important;
border: transparent;
}
.badge-youtube,
.badge-youtube a {
color: #fff !important;
background-color: #ff0000 !important;
border: transparent;
}
.badge-twitter,
.badge-twitter a {
color: #fff !important;
background-color: #00c3f3 !important;
border: transparent;
}
.badge-noticias-sin,
.badge-noticias-sin a {
color: #fff !important;
background-color: #003366 !important;
border: transparent;
}
.badge-presidencia,
.badge-presidencia a {
color: #fff !important;
background-color: #1a3a6b !important;
border: transparent;
}
.badge-la-informacion,
.badge-la-informacion a {
color: #fff !important;
background-color: #1a3a6b !important;
border: transparent;
}
/* ── Form Controls ────────────────────────────────────────── */
.g-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.g-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: .3px;
}
.g-input {
height: 40px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
background: var(--surface);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.g-input:hover { border-color: var(--text-secondary); }
.g-input:focus {
border-color: var(--google-blue);
box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}
.g-select {
height: 40px;
padding: 0 36px 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
color: var(--text-primary);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235f6368'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
appearance: none;
outline: none;
cursor: pointer;
transition: border-color var(--transition);
}
.g-select:focus { border-color: var(--google-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
/* Toggle Switch */
.g-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.g-toggle input { opacity: 0; width: 0; height: 0; }
.g-toggle__track {
position: absolute; inset: 0;
background: var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--transition);
}
.g-toggle__track::before {
content: '';
position: absolute;
width: 14px; height: 14px;
left: 3px; top: 3px;
background: #fff;
border-radius: 50%;
transition: transform var(--transition);
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.g-toggle input:checked + .g-toggle__track { background: var(--google-blue); }
.g-toggle input:checked + .g-toggle__track::before { transform: translateX(16px); }
/* ── Progress / Sparkline bar ─────────────────────────────── */
.g-progress-bar {
height: 6px;
background: var(--surface-hover);
border-radius: var(--radius-pill);
overflow: hidden;
}
.g-progress-bar__fill {
height: 100%;
border-radius: var(--radius-pill);
background: var(--google-blue);
transition: width .5s ease;
}
/* ── Divider ──────────────────────────────────────────────── */
.g-divider {
border: none;
border-top: 1px dashed var(--border-light);
margin: 16px 0;
opacity: 1;
}
/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #3c4043;
color: #fff;
font-size: 11px;
font-family: var(--font-body);
white-space: nowrap;
padding: 5px 10px;
border-radius: var(--radius-sm);
pointer-events: none;
opacity: 0;
transition: opacity var(--transition);
}
[data-tooltip]:hover::after { opacity: 1; }
/* ── Empty State ──────────────────────────────────────────── */
.g-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 24px;
text-align: center;
color: var(--text-secondary);
}
.g-empty__icon {
font-size: 48px;
color: var(--border);
}
.g-empty__title {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
.g-empty__desc { font-size: 14px; max-width: 360px; }
/* ── Snackbar / Toast ─────────────────────────────────────── */
.g-snackbar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: #3c4043;
color: #fff;
font-family: var(--font-body);
font-size: 14px;
padding: 12px 16px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 16px;
min-width: 288px;
max-width: 568px;
box-shadow: var(--shadow-2);
z-index: 9999;
opacity: 0;
transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.g-snackbar.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.g-snackbar__action {
margin-left: auto;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: #8ab4f8;
cursor: pointer;
border: none;
background: transparent;
padding: 4px;
}
/* ── Modal / Dialog ───────────────────────────────────────── */
.g-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.32);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
}
.g-overlay.open { opacity: 1; pointer-events: all; }
.g-dialog {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 24px;
max-width: 560px;
width: calc(100% - 48px);
box-shadow: var(--shadow-3);
transform: scale(.92);
transition: transform var(--transition);
}
.g-overlay.open .g-dialog { transform: scale(1); }
.g-dialog__title {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.g-dialog__body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.g-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 24px;
}
/* ── Page Header ──────────────────────────────────────────── */
.g-page-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.g-page-header__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--text-primary);
}
.g-page-header__actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
/* ── Alert Banners ────────────────────────────────────────── */
.g-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 13px;
line-height: 1.5;
}
.g-alert--info { background: var(--google-blue-light); color: #174ea6; }
.g-alert--success { background: #e6f4ea; color: #137333; }
.g-alert--warning { background: #fef7e0; color: #7a4f00; }
.g-alert--error { background: #fce8e6; color: #cc2900; }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 959px) {
.g-sidebar { transform: translateX(-100%); transition: transform var(--transition); }
.g-sidebar.open { transform: translateX(0); }
.g-content { margin-left: 0; padding: 16px; }
}
@media (max-width: 599px) {
.g-metric-grid { grid-template-columns: 1fr 1fr; }
.g-content { padding: 12px; }
.g-page-header { flex-direction: column; align-items: flex-start; }
.g-page-header__actions { margin-left: 0; }
}
/* ════════════════════════════════════════════════════════════
GOOGLE SITE KIT COMPONENTS
════════════════════════════════════════════════════════════ */
/* ── Site Kit Top Bar ─────────────────────────────────────── */
.sticky-top {
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
}
.sk-topbar {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 9px 16px;
min-height: 60px;
flex-wrap: wrap;
}
/* Hamburger → X when mobile nav is open */
.sk-mobile-toggle[aria-expanded="true"] i::before { content: "\f00d"; }
.sk-topbar__brand,
.sp-saludo-brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
flex-shrink: 0;
}
.sk-topbar__name {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 400;
color: var(--text-primary);
letter-spacing: -.3px;
}
.sk-topbar__brand .sp-location-name {
color: var(--text-primary);
}
.sk-topbar__brand .sp-location-sub {
color: var(--text-secondary);
}
.sk-tabs-top {
display: flex;
align-items: center;
height: 100%;
flex: 1;
justify-content: center;
gap: 2px;
}
.sk-tab-top {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
height: 36px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border: 1px solid transparent;
transition: background var(--transition), border-color var(--transition), color var(--transition);
white-space: nowrap;
}
.sk-tab-top:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.sk-tab-top.active {
border-color: var(--border);
color: var(--text-primary);
background: var(--surface);
}
.sk-topbar__actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.sk-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
height: 36px;
border-radius: var(--radius-md);
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition);
white-space: nowrap;
}
.sk-action-btn:hover { background: var(--surface-hover); }
/* ── Section wrappers ─────────────────────────────────────── */
.sk-section {
background: var(--surface-alt);
border-radius: var(--radius-lg);
padding: 20px 0;
margin-bottom: 0;
}
.sk-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
/* margin-bottom: 16px; */
gap: 12px;
flex-wrap: wrap;
}
.sk-section__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 4px;
}
.sk-section__desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.sk-change-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-link-teal);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: opacity var(--transition);
}
.sk-change-link:hover { opacity: .75; }
/* ── Key Metrics grid ─────────────────────────────────────── */
.sk-metric-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sk-metric-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 130px;
}
.sk-metric-card__label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 5px;
line-height: 1.4;
}
.sk-info-icon {
color: #5f9ea0;
font-size: 13px;
cursor: pointer;
flex-shrink: 0;
}
.sk-metric-card__empty {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
flex: 1;
}
.sk-metric-card__value {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
color: var(--text-primary);
line-height: 1.1;
margin-top: 4px;
}
.sk-metric-card__value--lg {
font-size: 26px;
font-weight: 700;
margin-top: 4px;
}
.sk-metric-card__sub {
font-size: 12px;
color: var(--text-secondary);
}
/* Delta pills */
.sk-delta {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
align-self: flex-start;
margin-top: 2px;
}
.sk-delta--up { background: #e6f4ea; color: #137333; }
.sk-delta--down { background: #fce8e6; color: #cc2900; }
.sk-delta--flat { background: var(--surface-hover); color: var(--text-secondary); }
/* Author row */
.sk-author-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.sk-author-name { font-size: 14px; color: var(--text-primary); }
.sk-author-val { font-size: 14px; font-weight: 500; color: var(--text-primary); }
/* City list */
.sk-city-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sk-city-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-secondary);
}
.sk-city-row strong { color: var(--text-primary); }
/* Keyword list */
.sk-keyword-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sk-keyword-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 12px;
}
.sk-kw-link {
color: var(--text-link-teal);
text-decoration: none;
font-size: 12px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sk-kw-link:hover { text-decoration: underline; }
.sk-kw-ctr {
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
flex-shrink: 0;
}
/* ── Speed — Device toggle ────────────────────────────────── */
.sk-device-toggle {
display: flex;
align-items: center;
background: var(--surface-alt);
border-radius: var(--radius-pill);
padding: 3px;
gap: 2px;
flex-shrink: 0;
}
.sk-device-btn {
width: 36px; height: 30px;
border: none;
background: transparent;
border-radius: var(--radius-pill);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.sk-device-btn.active {
background: #1e6e3e;
color: #fff;
}
/* ── Speed — Vitals ───────────────────────────────────────── */
.sk-learn-link {
color: var(--text-link-teal);
text-decoration: none;
font-weight: 500;
transition: opacity var(--transition);
}
.sk-learn-link:hover { opacity: .75; }
.sk-vital-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid var(--border-light);
}
.sk-vital-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.sk-vital-name {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
}
.sk-vital-desc {
font-size: 13px;
color: var(--text-secondary);
}
.sk-vital-note {
font-size: 12px;
color: var(--text-link-teal);
margin-top: 4px;
}
.sk-vital-score {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
text-align: right;
}
.sk-vital-val {
font-size: 15px;
font-weight: 700;
}
.sk-vital-status { font-size: 13px; }
.sk-vital-score--good .sk-vital-val,
.sk-vital-score--good .sk-vital-status { color: #137333; }
.sk-vital-score--warn .sk-vital-val,
.sk-vital-score--warn .sk-vital-status { color: #b06000; }
.sk-vital-score--bad .sk-vital-val,
.sk-vital-score--bad .sk-vital-status { color: var(--google-red); }
/* ── AdSense metrics ──────────────────────────────────────── */
.sk-adsense-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-bottom: 24px;
}
.sk-adsense-metric {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 8px 0 0;
}
.sk-adsense-label {
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.sk-adsense-value {
font-family: var(--font-display);
font-size: 36px;
font-weight: 400;
color: var(--text-primary);
text-align: center;
line-height: 1.1;
}
.sk-adsense-delta {
font-size: 12px;
font-weight: 500;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.sk-adsense-delta--up { color: #137333; }
.sk-adsense-delta--down { color: var(--google-red); }
/* ── Chart ────────────────────────────────────────────────── */
.sk-chart-wrap {
display: flex;
align-items: stretch;
height: 120px;
margin-bottom: 4px;
gap: 8px;
}
.sk-chart-yaxis {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 11px;
color: var(--text-tertiary);
padding: 2px 0;
flex-shrink: 0;
min-width: 36px;
text-align: right;
}
.sk-chart-area {
flex: 1;
position: relative;
border-bottom: 1px solid var(--border-light);
}
.sk-chart-dates {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #b57500;
padding: 6px 0 12px 44px;
}
.sk-chart-legend {
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
color: var(--text-secondary);
padding: 4px 0 8px 44px;
}
.sk-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── WordPress footer ─────────────────────────────────────── */
.sk-wp-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 4px 8px;
font-size: 13px;
color: var(--text-tertiary);
font-style: italic;
flex-wrap: wrap;
gap: 8px;
}
/* ── Responsive Site Kit ──────────────────────────────────── */
@media (max-width: 1100px) {
.sk-metric-grid { grid-template-columns: repeat(2, 1fr); }
.sk-adsense-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
.sk-tabs-top { display: none; }
.sk-metric-grid { grid-template-columns: 1fr; }
.sk-adsense-grid { grid-template-columns: repeat(2, 1fr); }
.g-main-container { padding: 16px 16px 32px; }
/* Topbar + Bottombar mobile */
.sk-topbar,
.sk-bottombar {
padding: 10px 16px;
flex-wrap: wrap;
min-height: 52px;
align-items: center;
}
/* Brand: izquierda */
.sk-topbar__brand {
order: 0;
flex: 1;
}
/* Hamburger: derecha */
.sk-topbar > .sk-mobile-toggle,
.sk-bottombar > .sk-mobile-toggle {
order: 1;
flex-shrink: 0;
margin-left: auto;
}
/* Collapse: fila completa debajo del brand */
.sk-topbar #skMobileNav,
.sk-bottombar #skBottomMobileNav {
order: 3;
width: 100%;
}
/* Bottombar: el menú móvil aparece ARRIBA del brand y del toggle */
.sk-bottombar #skBottomMobileNav { order: -1; }
/* Ocultar acciones secundarias en mobile (menos el botón de menú) */
.sk-topbar__actions .g-topbar__icon-btn:not(.sk-mobile-toggle),
.sk-topbar__actions .g-topbar__avatar,
.sk-topbar__actions .sk-action-btn { display: none; }
.sk-topbar__actions { order: 2; }
}
/* ── g-main-container breakpoints ────────────────────────── */
@media (min-width: 1200px) {
/* .g-main-container { max-width: 1272px; } */
}
@media (min-width: 1400px) {
/* .g-main-container { max-width: 1440px; } */
}
/* ── Utility ──────────────────────────────────────────────── */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.flex-1 { flex: 1; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-0 { padding: 0 !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
/* ── New Components ── */
/* ── Icon size helpers (used in topbar tabs & buttons) ─────── */
.icon-10 { font-size: 10px; }
.icon-11 { font-size: 11px; }
.icon-12 { font-size: 12px; }
.icon-13 { font-size: 13px; }
.icon-14 { font-size: 14px; }
.icon-15 { font-size: 15px; }
.icon-16 { font-size: 16px; }
.icon-18 { font-size: 18px; }
/* ── Mobile nav border separator ──────────────────────────── */
.mobile-nav-inner {
border-bottom: 1px solid var(--border-light);
}
/* Variante para el bottombar: el divisor va arriba (separa de los accesos rápidos) */
.mobile-nav-inner--bottom {
border-top: 1px solid var(--border-light);
border-bottom: none;
}
/* ── Table link ────────────────────────────────────────────── */
.table-link {
color: var(--text-link);
text-decoration: none;
}
/* ── Alert icon (flex-shrink:0) ────────────────────────────── */
.alert-icon {
font-size: 18px;
flex-shrink: 0;
}
/* ── Speed section header bar (tabs + device toggle row) ───── */
.speed-header-bar {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-light);
padding: 0 24px;
}
.speed-tabs-inner {
border-bottom: none;
flex: 1;
}
/* ── Speed description / vitals padding ────────────────────── */
.speed-desc {
padding: 20px 24px 0;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.speed-vitals {
padding: 8px 24px 20px;
}
.speed-footer {
text-align: right;
padding: 12px 24px;
border-top: 1px solid var(--border-light);
}
/* ── Monetization section header ────────────────────────────── */
.monetization-head {
margin-bottom: 12px;
}
.monetization-title {
font-size: 18px;
font-weight: 400;
}
.monetization-subtitle {
font-size: 13px;
color: #b35900;
}
/* ── Performance line (blue accent under title) ─────────────── */
.perf-title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 16px;
}
.perf-accent-bar {
width: 160px;
height: 3px;
background: #4285f4;
border-radius: 2px;
margin-bottom: 20px;
}
/* ── Chart legend dot/line ──────────────────────────────────── */
.chart-legend-line {
display: inline-block;
width: 20px;
height: 2px;
vertical-align: middle;
}
.chart-legend-line--solid { background: #4285f4; }
.chart-legend-line--dashed {
background: #bdc1c6;
border-top: 2px dashed #bdc1c6;
}
/* ── AdSense card footer row ────────────────────────────────── */
.adsense-footer {
border-top: 1px solid var(--border-light);
padding: 10px 20px;
}
/* ── Progress bar min-width ─────────────────────────────────── */
.g-progress-bar--min80 { min-width: 80px; }
/* ── Trip Stats ─────────────────────────────────────────────── */
.ts-stats-row {
border-bottom: 1px solid var(--border-light);
overflow-x: auto;
}
.ts-stat {
border-right: 1px solid var(--border-light);
min-width: 90px;
}
.ts-stat--last { min-width: 110px; }
.ts-stat--medium { min-width: 110px; }
.ts-stat--wide { min-width: 120px; }
.ts-value {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
}
.ts-value--alert { color: var(--google-red); }
.ts-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-tertiary);
margin-top: 4px;
}
.ts-detail-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.ts-detail-value {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
/* ── App Cards (Trabaja con Turista.do) ────────────────────── */
.app-card {
cursor: pointer;
transition: box-shadow var(--transition);
}
/* .app-card:hover { box-shadow: var(--shadow-1); } */
.app-card__hero {
height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.app-card__hero--blue { background: #4285f4; }
.app-card__hero--green { background: #34a853; }
.app-card__hero--red { background: #ff3300; }
.app-card__hero--purple { background: #8b5cf6; }
.app-card__hero-icon {
font-size: 44px;
color: #fff;
opacity: 0.9;
}
.app-card__body {
padding: 12px 14px 14px;
}
.app-card__title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em;
}
.app-card__rating {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
}
.app-card__rating-star { font-size: 11px; color: #fbbc04; }
.app-card__rating-info { font-size: 11px; color: var(--text-tertiary); }
.app-card__rating-value {
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
}
.app-card__desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
/* ── Section header (Trabaja / Top Categories) ───────────────── */
.pf-title {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 2px;
}
.pf-title a,
.phone {
text-decoration: none;
}
.pf-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
.pf-link {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
padding-top: 4px;
}
/* ── Section title (h3 style) used for Top Categories ──────── */
.section-title-18 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 16px;
}
/* ── Welcome Banner ─────────────────────────────────────────── */
.welcome-banner {
position: relative;
}
.welcome-dismiss {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-tertiary);
font-size: 14px;
z-index: 1;
transition: background var(--transition);
}
.welcome-dismiss:hover { background: var(--surface-hover); }
.welcome-title {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.welcome-text {
font-size: 14px;
color: var(--google-blue);
line-height: 1.6;
margin: 0;
}
/* ── Promo Banner ───────────────────────────────────────────── */
.promo-banner {
background: #fef6e4;
border-radius: var(--radius-lg);
padding: 32px 36px;
}
.promo-banner__title {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 6px;
}
.promo-banner__desc {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 20px;
line-height: 1.5;
}
/* ── Category chips (Top Categories row) ───────────────────── */
.cat-chip {
border-radius: var(--radius-lg);
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
transition: box-shadow var(--transition);
}
/* .cat-chip:hover { box-shadow: var(--shadow-1); } */
.cat-chip--blue { background: #e8f0fe; }
.cat-chip--gray { background: var(--surface-hover); }
.cat-chip--green { background: #e6f4ea; }
.cat-chip__label {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.cat-chip__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cat-chip__icon--blue { background: #4285f4; }
.cat-chip__icon--gray { background: #5f6368; }
.cat-chip__icon--blue2 { background: #1a73e8; }
.cat-chip__icon--green { background: #34a853; }
.cat-chip__icon-i { font-size: 16px; color: #fff; }
/* ── Para ti (News Feed) ────────────────────────────────────── */
.pf-header-wrap {
padding: 20px 20px 4px;
}
.pf-header-title {
font: 600 18px var(--font-display);
color: var(--text-primary);
}
.pf-header-sub {
font-size: 12px;
color: var(--text-tertiary);
margin: 0;
}
.nf-article {
border-bottom: 1px solid var(--border-light);
}
.nf-article--last {
/* no border */
}
.nf-article__inner {
padding: 14px 20px;
}
.nf-source-badge {
width: 18px;
height: 18px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nf-source-badge i { color: #fff; font-size: 9px; }
.nf-source-name {
font-size: 11px;
color: var(--text-tertiary);
}
.nf-headline {
font: 500 13px/1.45 var(--font-sans);
color: var(--text-primary);
margin: 0 0 8px;
}
.nf-meta {
font-size: 11px;
color: var(--text-tertiary);
}
.nf-bookmark {
font-size: 14px;
color: var(--text-tertiary);
cursor: pointer;
}
.nf-thumbnail {
width: 72px;
height: 72px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.nf-thumbnail i { color: #fff; font-size: 24px; }
/* nf-source-badge color modifiers */
.nf-source-badge--blue { background: #1a73e8; }
.nf-source-badge--green { background: #34a853; }
.nf-source-badge--amber { background: #f9ab00; }
.nf-source-badge--red { background: #ff3300; }
.nf-source-badge--purple { background: #8e24aa; }
.nf-source-badge--teal { background: #00897b; }
/* nf-thumbnail gradient modifiers */
.nf-thumb--blue { background: #1a73e8; }
.nf-thumb--green { background: #34a853; }
.nf-thumb--amber { background: #f9ab00; }
.nf-thumb--red { background: #ff3300; }
.nf-thumb--purple { background: #8e24aa; }
.nf-thumb--teal { background: #00897b; }
/* ── Destination Cards ──────────────────────────────────────── */
.dc-card { cursor: pointer; }
.dc-image {
aspect-ratio: 1/1;
border-radius: 12px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.dc-image__bg-icon {
color: rgba(255, 255, 255, 0.18);
font-size: 64px;
}
.dc-badge {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.32);
border-radius: 6px;
padding: 3px 8px;
backdrop-filter: blur(4px);
}
.dc-badge span {
color: #fff;
font-size: 10px;
font-weight: 500;
}
.dc-name {
font: 500 13px/1.3 var(--font-sans);
color: var(--text-primary);
margin: 0 0 2px;
}
.dc-sub {
font-size: 12px;
color: var(--text-tertiary);
margin: 0;
}
/* dc-image gradient modifiers */
.dc-image--blue { background: #1a73e8; }
.dc-image--green { background: #34a853; }
.dc-image--red { background: #ff3300; }
.dc-image--orange { background: #e65100; }
/* ── Boarding Pass Wide (Component 8) ──────────────────────── */
.bp-header {
background: #111;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bp-brand-name {
color: #fff;
font: 700 12px var(--font-display);
letter-spacing: 0.08em;
}
.bp-label {
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
letter-spacing: 0.1em;
}
.bp-label-icon { color: rgba(255, 255, 255, 0.65); font-size: 12px; }
.bp-body { padding: 20px; }
.bp-airport-label {
font-size: 10px;
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.bp-code {
font: 700 42px/1 var(--font-display);
color: var(--text-primary);
}
.bp-city {
font-size: 11px;
color: var(--text-secondary);
margin-top: 6px;
}
.bp-date {
font-size: 10px;
color: var(--text-tertiary);
margin-top: 2px;
}
.bp-route-mid {
flex: 1.2;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.bp-route-line {
width: 100%;
position: relative;
height: 2px;
}
.bp-route-dashed {
position: absolute;
inset: 0;
border-top: 2px dashed var(--border-light);
}
.bp-route-plane {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 6px;
line-height: 1;
}
.bp-stop-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid var(--text-tertiary);
display: inline-block;
}
.bp-passenger {
background: var(--surface-alt);
border-radius: 10px;
padding: 14px;
}
.bp-detail-label {
font-size: 9px;
color: var(--text-tertiary);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 3px;
}
.bp-detail-value {
font: 600 13px var(--font-sans);
color: var(--text-primary);
}
.bp-passenger-name {
font: 600 14px var(--font-sans);
color: var(--text-primary);
margin-bottom: 12px;
}
.bp-barcode {
border-top: 2px dashed var(--border-light);
margin-top: 20px;
padding-top: 16px;
display: flex;
justify-content: center;
}
.bp-airport-col {
flex: 1;
text-align: center;
}
.bp-barcode-strip {
width: 240px;
height: 50px;
border-radius: 3px;
overflow: hidden;
background: repeating-linear-gradient(
90deg,
#111 0, #111 2px, transparent 2px, transparent 5px,
#111 5px, #111 7px, transparent 7px, transparent 9px,
#111 9px, #111 12px, transparent 12px, transparent 16px,
#111 16px, #111 17px, transparent 17px, transparent 21px,
#111 21px, #111 24px, transparent 24px, transparent 27px,
#111 27px, #111 28px, transparent 28px, transparent 32px,
#111 32px, #111 35px, transparent 35px, transparent 38px,
#111 38px, #111 39px, transparent 39px, transparent 41px
);
background-size: 41px 100%;
}
/* ── Boarding Pass Minimal QR (Component 9) ─────────────────── */
.bp-route-block {
background: var(--surface-alt);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
}
.bp-airport-label2 {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 3px;
}
.bp-code2 {
font: 700 34px/1 var(--font-display);
color: var(--text-primary);
}
.bp-city2 {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 5px;
}
.bp-time2 {
font: 600 13px var(--font-sans);
color: var(--text-primary);
}
.bp-detail-label2 {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
}
.bp-detail-value2 {
font: 600 22px var(--font-display);
color: var(--text-primary);
}
.bp-tear-line {
position: relative;
margin: 0 -4px 16px;
}
.bp-tear-dashed { border-top: 2px dashed var(--border-light); }
.bp-notch-left {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 22px;
background: var(--surface-alt);
border-radius: 0 11px 11px 0;
}
.bp-notch-right {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 22px;
background: var(--surface-alt);
border-radius: 11px 0 0 11px;
}
.bp-passenger-label {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
}
.bp-passenger-name2 {
font: 600 14px var(--font-sans);
color: var(--text-primary);
margin-bottom: 12px;
}
.bp-seat-label {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
}
.bp-seat-value {
font: 600 22px var(--font-display);
color: var(--text-primary);
}
.bp-qr { flex-shrink: 0; }
/* ── Spotlight Hero (Component 10) ─────────────────────────── */
.sp-hero {
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 320px;
font-size: 12px;
background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sp-top {
padding: 20px;
flex-wrap: wrap;
}
/* Saludo: fila 1 completa en mobile, columna izquierda en desktop */
.sp-saludo-wrap {
width: 100%;
margin-bottom: 8px;
display: flex;
flex-direction: column;
}
/* Fila inferior: logo + location text */
.sp-saludo-brand {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
/* Reloj: comparte fila 2 en mobile, centro en desktop */
.sp-top .sp-clock {
flex: 1;
text-align: center;
}
/* Location: fila propia en mobile, columna derecha en desktop */
.sp-location-wrap {
width: 100%;
text-align: right;
}
@media (min-width: 768px) {
.sp-saludo-wrap {
width: auto;
flex: 1;
margin-bottom: 0;
}
.sp-top .sp-clock {
flex: 0 0 auto;
}
.sp-location-wrap {
flex: 1;
}
}
/* Label del saludo */
.sp-saludo-label {
color: #ffffff;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 4px;
}
/* Motivador del día */
.sp-motivador {
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
font-style: italic;
margin-bottom: 10px;
}
.sp-bottom {
padding: 20px;
}
.sp-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.sp-icon-btn i { color: #fff; font-size: 13px; }
/* Espacio de icono del hero de página (header-page) */
.sp-hero-page__icon {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
}
.sp-hero-page__icon i {
color: #fff;
font-size: 28px;
}
.sp-location-label {
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
}
.sp-location-name {
color: rgba(255, 255, 255, 0.95);
font-size: 12px;
font-weight: 600;
}
.sp-location-sub {
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
}
/* Rotador promo (placeholder esquina sup. derecha del hero) */
.sp-promo-item {
display: none;
text-decoration: none;
color: inherit;
}
.sp-promo-item.is-active {
display: block;
}
/* Descripción en azul como los links de los widgets */
.sp-promo-item .sp-location-sub {
color: #4fc3f7;
}
.sp-clock {
padding: 24px 0 20px;
}
@media (max-width: 767px) {
.sp-clock { padding: 0px 0 10px; }
}
.sp-clock__time {
font: 300 72px/1 var(--font-display);
color: #fff;
letter-spacing: -2px;
}
.sp-date {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin-top: 8px;
}
.sp-widgets {
padding: 0 12px 12px;
}
.sp-widget-pad { padding: 4px; }
.sp-widget {
background: rgba(20, 35, 48, 0.78);
border-radius: 10px;
padding: 12px;
backdrop-filter: blur(8px);
}
.sp-widget-title {
color: rgba(255, 255, 255, 0.65);
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
}
/* ── Cabecera homologada de los widgets del hero (icono gris + título) ──
Modelada en el header de Lotería. Aplica a Clima, Lotería, Tasa,
Interés y Próxima cita. El icono va en gris (mismo tono que el título). */
.sp-widget-head {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 6px;
}
.sp-widget-head > i {
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
flex-shrink: 0;
}
.sp-widget-head__title {
flex: 1;
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-widget-value {
font: 700 26px/1 var(--font-display);
color: #fff;
margin-bottom: 4px;
}
.sp-widget-sub { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.sp-widget-sub2 { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
/* Widget clima: texto en blanco pleno */
.sp-widget--clima .sp-widget-value,
.sp-widget--clima .sp-widget-sub2 { color: #fff; }
.sp-link {
color: #4fc3f7;
font-size: 12px;
cursor: pointer;
}
.sp-market-label { color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.sp-market-delta { color: #34a853; font-size: 12px; font-weight: 700; }
.sp-market-value { color: rgba(255, 255, 255, 0.8); font-size: 12px; }
.sp-event-title {
font: 500 12px/1.4 var(--font-sans);
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3px;
}
.sp-event-venue { color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.sp-event-time { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.sp-event-badge {
background: #ff3300;
border-radius: 6px;
padding: 2px 7px;
text-align: center;
}
.sp-event-badge__month { color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }
.sp-event-badge__day { color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
/* ── Noticias: tarjeta horizontal en mobile ──────────────────── */
@media (max-width: 767px) {
.g-noticia-col .g-card__body2 {
display: flex;
flex-direction: row;
gap: 10px;
align-items: flex-start;
}
.g-noticia-col .g-noticia-img {
width: 110px;
min-width: 110px;
aspect-ratio: 1 / 1;
margin-bottom: 0 !important;
flex-shrink: 0;
}
.g-noticia-col .app-card__body {
flex: 1;
min-width: 0;
padding: 0;
}
.g-noticia-col .app-card__title {
-webkit-line-clamp: 3;
}
}
/* ── Widget Tasa de cambio ───────────────────────────────────── */
.sp-tasa-main {
margin-bottom: 8px;
}
.sp-tasa-label {
color: rgba(255,255,255,0.45);
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
margin-bottom: 2px;
}
.sp-tasa-valor {
font: 700 28px/1 var(--font-display);
color: #fff;
margin-bottom: 2px;
}
.sp-tasa-delta { font-size: 12px; font-weight: 600; }
.sp-tasa-up { color: #34a853; }
.sp-tasa-down { color: #ea4335; }
.sp-tasa-carousel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sp-tasa-slides { flex: 1; }
.sp-tasa-slide { display: none; }
.sp-tasa-slide.is-active { display: block; }
.sp-tasa-slide-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-tasa-chart-wrap { position: relative; flex: 1; height: 52px; min-width: 0; }
.sp-tasa-chart { width: 100% !important; height: 100% !important; }
/* ── Widget Lotería ──────────────────────────────────────────── */
.sp-widget--loteria { display: flex; flex-direction: column; }
.sp-loteria-header {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 6px;
}
.sp-loteria-icon {
color: #ff3300;
font-size: 13px;
flex-shrink: 0;
}
.sp-loteria-name {
flex: 1;
color: rgba(255,255,255,0.85);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-loteria-nav { display: flex; gap: 2px; margin-left: auto; }
.sp-loteria-btn {
background: rgba(255,255,255,0.1);
border: none;
color: rgba(255,255,255,0.7);
border-radius: 4px;
width: 20px; height: 20px;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex; align-items: center; justify-content: center;
}
.sp-loteria-btn:hover { background: rgba(255,255,255,0.2); }
.sp-loteria-slides { flex: 1; }
.sp-loteria-slide { display: none; }
.sp-loteria-slide.is-active { display: flex; flex-direction: column; align-items: center; text-align: center; animation: loteria-in 0.4s ease; }
@keyframes loteria-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.sp-loteria-slide.is-active .sp-loteria-num {
animation: num-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(1) { animation-delay: 0.05s; }
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(2) { animation-delay: 0.15s; }
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(3) { animation-delay: 0.25s; }
@keyframes num-pop {
0% { opacity: 0; transform: scale(0.5) translateY(10px); }
70% { transform: scale(1.15) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.sp-loteria-turno { margin-bottom: 6px; }
.sp-loteria-numeros {
display: flex;
gap: 6px;
margin-bottom: 6px;
}
.sp-loteria-num {
width: 42px; height: 42px;
background: rgba(255,255,255,0.12);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font: 700 18px/1 var(--font-display);
color: #fff;
}
.sp-loteria-fecha { margin-bottom: 6px; }
.sp-loteria-link { margin-top: auto; }
/* Hero pequeño — single de vídeos */
.sp-hero--sm {
min-height: auto;
}
.vh-breadcrumb {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.vh-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
.vh-breadcrumb a:hover { color: #fff; }
.vh-breadcrumb i { font-size: 8px; color: rgba(255, 255, 255, 0.3); }
.vh-canal-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 51, 0, 0.2);
border: 1px solid rgba(255, 51, 0, 0.35);
border-radius: 4px;
padding: 1px 7px;
font-size: 11px;
color: rgba(255, 180, 150, 0.95);
margin-right: 6px;
vertical-align: middle;
}
.vh-edit-link a {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
text-decoration: none;
}
.vh-edit-link a:hover { color: #fff; }
/* ── Paginación WordPress ────────────────────────────────────── */
ul.page-numbers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
ul.page-numbers li { display: flex; }
ul.page-numbers li .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
border: 1px solid var(--border);
color: var(--google-blue);
background: transparent;
transition: background .15s ease, border-color .15s ease, color .15s ease;
cursor: pointer;
user-select: none;
}
ul.page-numbers li .page-numbers:hover {
background: var(--google-blue-light);
border-color: var(--google-blue);
}
ul.page-numbers li .page-numbers.current {
background: var(--google-blue);
color: #fff;
border-color: var(--google-blue);
pointer-events: none;
}
ul.page-numbers li .page-numbers.dots {
border-color: transparent;
background: none;
color: var(--text-tertiary);
pointer-events: none;
min-width: auto;
padding: 0 6px;
}
ul.page-numbers li .prev.page-numbers,
ul.page-numbers li .next.page-numbers {
color: var(--text-secondary);
font-size: 11px;
}
ul.page-numbers li .prev.page-numbers:hover,
ul.page-numbers li .next.page-numbers:hover {
color: var(--google-blue);
}
.yt-pagination-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.yt-pagination-info {
font-size: 12px;
color: var(--text-tertiary);
}
@media (max-width: 575px) {
ul.page-numbers li .page-numbers {
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 12px;
}
/* En mobile oculta páginas intermedias, deja solo prev/next + actual */
ul.page-numbers li:not(:first-child):not(:last-child) .page-numbers:not(.current):not(.dots) {
display: none;
}
ul.page-numbers li .page-numbers.dots { display: none; }
}
.btn-instagram {
color: #fff;
background-color: #f65962;
border-color: #f65962;
}
.btn-whatsapp {
color: #fff;
background-color: #1d9e11;
border-color: #1d9e11;
}
.btn-facebook {
color: #fff;
background-color: #2d5f9a;
border-color: #2d5f9a;
}
.btn-twitter {
color: #fff;
background-color: #00c3f3;
border-color: #00c3f3;
}
.btn-issuu {
color: #fff;
background-color: #ff6633;
border-color: #ff6633;
}
.btn-white {
color: #4285f4;
background-color: #fff;
border-color: #4285f4;
}
.color-facebook {
color: #3b5998 !important;
}
.color-instagram {
/* background: -webkit-linear-gradient(#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */
}
.color-instagram {
color: #e1306c;
}
.color-twitter {
color: #00acee !important;
}
.color-youtube {
color: #ff0000 !important;
}
.color-linkedin {
color: #0077b5 !important;
}
.text-blue {
color: #0099cc !important;
}
.text-indigo {
color: #6610f2 !important;
}
.text-purple {
color: #6f42c1 !important;
}
.text-pink {
color: #e83e8c !important;
}
.text-red {
color: #ff3300 !important;
}
.text-orange {
color: #fd7e14 !important;
}
.text-yellow {
color: #ffc107 !important;
}
.text-green {
color: #28a745 !important;
}
.text-teal {
color: #20c997 !important;
}
.text-cyan {
color: #17a2b8 !important;
}
.text-white {
color: #fff !important;
}
.text-gray {
color: #6c757d !important;
}
.text-gray-lite {
color: #eeeeee !important;
}
.text-gray-dark {
color: #343a40 !important;
}
.text-dark {
color: #181818 !important;
}
.text-google {
color: #4285f4 !important;
}
/* class="btn btn-space btn-secondary btn-sm bg-yellow text-dark" */
.bg-blue {
background-color: #0099cc !important;
}
.bg-indigo {
background-color: #6610f2 !important;
}
.bg-purple {
background-color: #6f42c1 !important;
}
.bg-pink {
background-color: #e83e8c !important;
}
.bg-red {
background-color: #ff3300 !important;
}
.bg-orange {
background-color: #fd7e14 !important;
}
.bg-yellow {
background-color: #ffc107 !important;
}
.bg-green {
background-color: #28a745 !important;
}
.bg-teal {
background-color: #20c997 !important;
}
.bg-cyan {
background-color: #17a2b8 !important;
}
.bg-white {
background-color: #fff !important;
}
.bg-gray {
background-color: #6c757d !important;
}
.bg-gray-dark {
background-color: #343a40 !important;
}
.bg-dark {
background-color: #181818 !important;
}
.b-blue {
border: 1px solid #0099cc !important;
}
.b-indigo {
border: 1px solid #6610f2 !important;
}
.b-purple {
border: 1px solid #6f42c1 !important;
}
.b-pink {
border: 1px solid #e83e8c !important;
}
.b-red {
border: 1px solid #ff3300 !important;
}
.b-orange {
border: 1px solid #fd7e14 !important;
}
.b-yellow {
border: 1px solid #ffc107 !important;
}
.b-green {
border: 1px solid #28a745 !important;
}
.b-teal {
border: 1px solid #20c997 !important;
}
.b-cyan {
border: 1px solid #17a2b8 !important;
}
.b-white {
border: 1px solid #fff !important;
}
.b-gray {
border: 1px solid #6c757d !important;
}
.b-gray-dark {
border: 1px solid #343a40 !important;
}
.b-dark {
border: 1px solid #181818 !important;
}
/* ── Key Metrics — highlighted text ─────────────────────────── */
.text-blue { color: var(--google-blue); }
/* Truncado a 2 líneas */
/* Iconos Servicios — sin subrayado en todos los links */
.iconos-servicios a {
text-decoration: none;
}
/* Centrado solo en los iconos de columna, no en los títulos */
.iconos-servicios .col-4 a,
.iconos-servicios .col-sm-2 a,
.iconos-servicios .col-lg-1 a {
display: flex;
flex-direction: column;
align-items: center;
}
/* Ícono sin logo: círculo con iniciales y color de fondo.
Mismo tamaño/forma que los ![]()
de logo (rounded-circle border).
El color de fondo se define inline por item (style="background:..."). */
.icono-iniciales {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--google-blue);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(13px, 2.6vw, 26px);
line-height: 1;
text-transform: uppercase;
}
.ellipsis-two {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Progress bar colours ───────────────────────────────────── */
.fill-blue { background: #4285f4; }
.fill-green { background: #34a853; }
.fill-yellow { background: #fbbc04; }
.fill-red { background: #ff3300; }
/* ── Metric card accent bars ────────────────────────────────── */
.accent-blue { background: #4285f4; }
.accent-green { background: #34a853; }
.accent-yellow { background: #fbbc04; }
.accent-red { background: #ff3300; }
/* ── Welcome illustration ───────────────────────────────────── */
.illus-wrap {
position: relative;
width: 150px;
height: 100px;
flex-shrink: 0;
}
.illus-card {
position: absolute;
width: 95px;
height: 62px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.illus-card--green { background: #34a853; transform: rotate(14deg); top: 24px; left: 34px; }
.illus-card--yellow { background: #fbbc04; transform: rotate(7deg); top: 14px; left: 24px; }
.illus-card--blue { background: #4285f4; top: 4px; left: 14px; }
.illus-card__stripe1 {
position: absolute;
top: 12px; left: 12px;
width: 34px; height: 8px;
background: rgba(255, 255, 255, 0.35);
border-radius: 4px;
}
.illus-card__stripe2 {
position: absolute;
top: 26px; left: 12px;
width: 22px; height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.illus-coin {
position: absolute;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.illus-coin--lg { width: 26px; height: 26px; background: #fbbc04; bottom: 0; right: 6px; }
.illus-coin--sm { width: 18px; height: 18px; background: #f9ab00; bottom: 12px; right: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
/* ── Promo banner illustration (rainbow) ────────────────────── */
.rainbow-wrap {
position: relative;
width: 200px;
height: 120px;
overflow: hidden;
flex-shrink: 0;
}
.rainbow-arc {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-bottom: none;
box-sizing: border-box;
}
.rainbow-arc--red { width: 160px; height: 80px; border-radius: 80px 80px 0 0; border: 14px solid #ff3300; }
.rainbow-arc--yellow { width: 126px; height: 63px; border-radius: 63px 63px 0 0; border: 14px solid #fbbc04; }
.rainbow-arc--green { width: 92px; height: 46px; border-radius: 46px 46px 0 0; border: 14px solid #34a853; }
.rainbow-arc--blue { width: 60px; height: 30px; border-radius: 30px 30px 0 0; border: 14px solid #4285f4; }
.rainbow-ground {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 12px;
background: #fef6e4;
}
.rainbow-cloud {
position: absolute;
background: #fff;
border-radius: 10px;
opacity: 0.7;
}
.rainbow-cloud--right { bottom: 8px; right: 4px; width: 40px; height: 16px; }
.rainbow-cloud--left { bottom: 8px; left: 4px; width: 30px; height: 14px; }
.rainbow-smiley {
position: absolute;
top: 0; right: 16px;
width: 36px; height: 36px;
border-radius: 50%;
background: #34a853;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ── Footer link ────────────────────────────────────────────── */
.footer-wp-link {
color: var(--google-blue);
text-decoration: underline;
}
/* ── Modal body text ────────────────────────────────────────── */
.modal-body {
padding: calc(var(--bs-modal-padding) - 0.50rem);
}
.modal-body-desc {
font-size: 14px;
color: var(--text-secondary);
}
/* ── Source bar label ───────────────────────────────────────── */
.source-bar-label {
color: var(--text-tertiary);
font-size: 12px;
}
/* ── Vital row last (no border-bottom) ──────────────────────── */
.sk-vital-row--last { border-bottom: none; }
/* ════════════════════════════════════════════════════════════
COMPONENT: TOP TOPICS
════════════════════════════════════════════════════════════ */
.tt-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.tt-view-all {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--google-blue);
text-decoration: none;
transition: opacity .15s;
}
.tt-view-all:hover { opacity: .75; color: var(--google-blue); }
.tt-view-all__icon { font-size: 16px; }
.tt-card {
display: block;
color: inherit;
}
.tt-card:hover .tt-card__img { transform: scale(1.03); }
.tt-card__img-wrap {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
background: var(--surface-alt);
margin-bottom: 10px;
border: 1px solid var(--border-light);
}
.tt-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .2s ease;
}
.tt-card__title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.tt-card__count {
font-size: 12px;
color: var(--google-blue);
font-weight: 500;
}
@media (min-width: 992px) {
.col-lg-tt {
flex: 0 0 auto;
width: 12.5%;
}
}
.site-card {
background: var(--surface-alt);
border: 1px solid rgba(255,255,255,.06);
color: inherit;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
min-height: 100%;
}
.site-card:hover {
transform: translateY(-2px);
border-color: var(--surface-alt);
color: inherit;
}
.site-logo {
width: 32px;
height: 32px;
border-radius: .5rem;
flex: 0 0 auto;
}
.text-muted-custom {
color: var(--muted) !important;
}
.header-wrap, .footer-wrap {
max-width: 1100px;
}
/* ════════════════════════════════════════════
OUR PRICING SECTION
════════════════════════════════════════════ */
.our-pricing {
background: var(--surface);
padding: 80px 40px;
border: 1px solid var(--border-light);
}
.pricing-content {
position: sticky;
top: 80px;
}
.pricing-box-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.pricing-box {
width: 100%;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 28px 36px;
display: flex;
align-items: center;
gap: 30px;
background: var(--surface);
}
.pricing-box.highlighted-box {
background: #ff3300;
border-color: transparent;
}
.pricing-box-content {
width: calc(36% - 15px);
text-align: center;
border-right: 1px solid var(--border-light);
padding-right: 28px;
flex-shrink: 0;
}
.pricing-box.highlighted-box .pricing-box-content {
border-color: rgba(255,255,255,.22);
}
.pricing-title p {
text-transform: capitalize;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
}
.pricing-box.highlighted-box .pricing-title p {
color: rgba(255,255,255,.8);
}
.pricing-title h2 {
font-size: 44px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
margin: 0;
}
.pricing-box.highlighted-box .pricing-title h2 {
color: #fff;
}
.pricing-title h2 sup {
font-size: 24px;
vertical-align: super;
}
.pricing-title h2 sub {
font-size: 13px;
font-weight: 400;
color: var(--text-secondary);
}
.pricing-box.highlighted-box .pricing-title h2 sub {
color: rgba(255,255,255,.7);
}
.pricing-btn {
margin-top: 14px;
}
.pricing-btn .btn-default {
display: inline-block;
padding: 9px 18px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 600;
text-decoration: none;
background: var(--google-blue);
color: #fff;
transition: opacity .2s;
white-space: nowrap;
}
.pricing-btn .btn-default:hover { opacity: .85; }
.pricing-btn .btn-highlighted {
background: #fff;
color: #ff3300;
}
.pricing-list {
width: calc(64% - 15px);
padding-left: 28px;
}
.pricing-list ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.pricing-list ul li {
position: relative;
width: calc(50% - 7px);
text-transform: capitalize;
padding-left: 22px;
font-size: 13px;
color: var(--text-secondary);
}
.pricing-box.highlighted-box .pricing-list ul li {
color: rgba(255,255,255,.9);
}
.pricing-list ul li::before {
content: '\f00c';
font-family: 'Font Awesome 7 Free';
font-weight: 900;
position: absolute;
top: 1px;
left: 0;
font-size: 13px;
color: var(--google-blue);
}
.pricing-box.highlighted-box .pricing-list ul li::before {
color: #fff;
}
.pricing-benefit-list {
margin-top: 20px;
}
.pricing-benefit-list ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
gap: 10px 24px;
}
.pricing-benefit-list ul li {
color: var(--text-secondary);
font-weight: 500;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.pricing-benefit-list ul li i {
color: var(--google-blue);
}
/* Pricing title in left column */
.pricing-section-title h3 {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--google-blue);
margin-bottom: 8px;
}
.pricing-section-title h2 {
font-size: 32px;
font-weight: 300;
color: var(--text-primary);
line-height: 1.25;
margin-bottom: 14px;
}
.pricing-section-title h2 span { font-weight: 700; }
.pricing-section-title p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 24px;
}
@media (max-width: 991px) {
.our-pricing { padding: 50px 20px; }
.pricing-content { position: static; margin-bottom: 28px; }
}
@media (max-width: 575px) {
.pricing-box { flex-direction: column; padding: 20px; gap: 16px; }
.pricing-box-content {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border-light);
padding-right: 0;
padding-bottom: 16px;
}
.pricing-box.highlighted-box .pricing-box-content { border-color: rgba(255,255,255,.22); }
.pricing-title h2 { font-size: 32px; }
.pricing-list { width: 100%; padding-left: 0; padding-top: 4px; }
.pricing-list ul li { width: 100%; }
}
/* ════════════════════════════════════════════
INTRO VIDEO — PARALLAX SECTION
════════════════════════════════════════════ */
.bg-section {
width: 100%;
max-width: 1800px;
margin-left: auto;
margin-right: auto;
border-radius: var(--radius-lg);
overflow: hidden;
}
.intro-video {
position: relative;
/* padding: 380px 0 60px; */
/* background: url('https://img.youtube.com/vi/bDeznGExhAw/maxresdefault.jpg') center center / cover no-repeat; */
overflow: hidden;
}
.intro-video::before {
content: '';
display: block;
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 26, 51, 0) 27%, #001a33 100%);
}
.intro-video > .row {
position: relative;
z-index: 1;
}
/* Section title inside intro-video */
.iv-badge {
display: inline-block;
background: #ff3300;
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 14px;
}
.iv-title {
margin-bottom: 0;
}
.iv-title h2 {
color: #fff;
font-size: 38px;
font-weight: 300;
line-height: 1.25;
margin: 0;
}
.iv-title h2 span {
font-weight: 700;
}
/* Play button */
.iv-play-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.iv-play-btn a {
background: #ff3300;
border-radius: 50%;
width: 64px;
height: 64px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background-position .3s ease;
}
.iv-play-btn a:hover {
background: #cc2900;
}
.iv-play-btn a i {
font-size: 22px;
color: #fff;
}
.iv-play-btn p {
color: #fff;
font-size: 18px;
font-weight: 600;
margin: 0;
text-transform: capitalize;
}
/* Feature list */
.iv-list {
border-top: 1px solid rgba(255, 255, 255, .22);
margin-top: 42px;
padding-top: 40px;
}
.iv-list ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
}
.iv-list ul li {
position: relative;
width: calc(25% - 22.5px);
color: #fff;
padding-left: 28px;
font-size: 14px;
font-weight: 500;
}
.iv-list ul li::after {
content: '\f00c';
font-family: 'Font Awesome 7 Free';
font-weight: 900;
position: absolute;
top: 1px;
left: 0;
font-size: 15px;
color: #fff;
}
@media (max-width: 991px) {
.intro-video {
padding: 240px 0 50px;
}
.iv-list ul li {
width: calc(50% - 15px);
}
}
@media (max-width: 575px) {
.intro-video {
padding: 160px 0 40px;
}
.iv-title h2 {
font-size: 26px;
}
.iv-play-btn {
justify-content: flex-start;
margin-top: 20px;
}
.iv-list ul li {
width: 100%;
}
}
/* ════════════════════════════════════════════
COMPANY GROWTH — STATS SECTION
════════════════════════════════════════════ */
.company-growth {
background: var(--surface);
padding: 80px 40px;
}
.company-growth-image figure {
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
margin: 0;
}
.company-growth-image img {
width: 100%;
aspect-ratio: 1 / 0.77;
object-fit: cover;
display: block;
}
.company-growth-content {
margin-left: 30px;
}
.cg-title {
margin-bottom: 32px;
}
.cg-title h3 {
display: inline-block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--google-blue);
margin-bottom: 12px;
}
.cg-title h2 {
font-size: 36px;
font-weight: 300;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 16px;
max-width: 520px;
}
.cg-title h2 span {
font-weight: 700;
color: #ff3300;
}
.cg-title p {
color: var(--text-secondary);
font-size: 15px;
margin: 0;
}
.cg-btn {
margin-top: 28px;
}
.cg-btn a {
display: inline-block;
padding: 10px 22px;
background: var(--google-blue);
color: #fff;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: opacity .2s ease;
}
.cg-btn a:hover {
opacity: .85;
color: #fff;
}
/* Stats grid */
.company-growth-box {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 72px;
}
.company-growth-item {
width: calc(25% - 22.5px);
border-top: 1px solid var(--border-light);
padding-top: 24px;
}
.company-growth-item h2 {
font-size: 40px;
font-weight: 700;
color: #ff3300;
margin-bottom: 8px;
line-height: 1;
}
.company-growth-item h3 {
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
color: var(--text-primary);
margin-bottom: 8px;
}
.company-growth-item p {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
@media (max-width: 991px) {
.company-growth {
padding: 50px 20px;
}
.company-growth-image {
/* margin-bottom: 30px; */
}
.company-growth-image img {
aspect-ratio: 1 / 0.6;
}
.company-growth-content {
margin-left: 0;
}
.cg-title h2 {
max-width: 100%;
font-size: 28px;
}
.company-growth-box {
gap: 24px;
margin-top: 40px;
}
.company-growth-item {
width: calc(50% - 12px);
}
.company-growth-item h2 {
font-size: 34px;
}
}
@media (max-width: 575px) {
.company-growth-item {
width: 100%;
}
.company-growth-item h2 {
font-size: 28px;
}
.company-growth-item h3 {
font-size: 14px;
}
}
/* ════════════════════════════════════════════
OUR SERVICE SECTION
════════════════════════════════════════════ */
.our-service {
padding: 80px 40px;
background: #001a33 url('../img/service-bg-plane.svg') no-repeat left center;
background-size: auto;
}
.service-content {
position: sticky;
top: 100px;
margin-right: 30px;
}
.sv-title {
margin-bottom: 32px;
}
.sv-title h3 {
display: inline-block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: #ff3300;
margin-bottom: 12px;
}
.sv-title h2 {
font-size: 36px;
font-weight: 300;
line-height: 1.2;
color: #fff;
margin-bottom: 16px;
max-width: 520px;
}
.sv-title h2 span {
font-weight: 700;
color: #ff3300;
}
.sv-title p {
color: rgba(255, 255, 255, .7);
font-size: 15px;
margin: 0;
}
/* ══════════════════════════════════════════════════════════
SISTEMA DE BOTONES — sv-btn (wrapper pattern)
══════════════════════════════════════════════════════════ */
/* Base shared */
.sv-btn a,
.white-sv-btn a,
.sv-btn--blue a,
.sv-btn--green a,
.sv-btn--yellow a,
.sv-btn--cyan a,
.sv-btn--purple a,
.sv-btn--dark a,
.sv-btn--outline a,
.sv-btn--teal a {
display: inline-block;
padding: 10px 22px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: opacity .2s ease, background-color .2s ease;
border: 2px solid transparent;
}
/* Red — default */
.sv-btn a { background: var(--btn-red); color: #fff; }
.sv-btn a:hover { background: var(--btn-red-h); color: #fff; opacity: 1; }
/* White */
.white-sv-btn a { background: #fff; color: #000; }
.white-sv-btn a:hover { background: #e9ecef; color: #000; opacity: 1; }
/* Blue */
.sv-btn--blue a { background: var(--btn-blue); color: #fff; }
.sv-btn--blue a:hover { background: var(--btn-blue-h); color: #fff; opacity: 1; }
/* Green */
.sv-btn--green a { background: var(--btn-green); color: #fff; }
.sv-btn--green a:hover { background: var(--btn-green-h); color: #fff; opacity: 1; }
/* Teal */
.sv-btn--teal a { background: var(--text-link-teal); color: #fff; }
.sv-btn--teal a:hover { background: var(--text-link-teal); color: #fff; opacity: 0.85; }
/* Yellow */
.sv-btn--yellow a { background: var(--btn-yellow); color: #000; }
.sv-btn--yellow a:hover { background: var(--btn-yellow-h); color: #000; opacity: 1; }
/* Cyan */
.sv-btn--cyan a { background: var(--btn-cyan); color: #fff; }
.sv-btn--cyan a:hover { background: var(--btn-cyan-h); color: #fff; opacity: 1; }
/* Purple */
.sv-btn--purple a { background: var(--btn-purple); color: #fff; }
.sv-btn--purple a:hover { background: var(--btn-purple-h); color: #fff; opacity: 1; }
/* Dark */
.sv-btn--dark a { background: var(--btn-dark); color: #fff; }
.sv-btn--dark a:hover { background: var(--btn-dark-h); color: #fff; opacity: 1; }
/* Outline red */
.sv-btn--outline a { background: transparent; color: var(--btn-red); border-color: var(--btn-red); }
.sv-btn--outline a:hover { background: var(--btn-red); color: #fff; opacity: 1; }
/* Items grid */
.service-item-list {
border-bottom: 1px solid rgba(255, 255, 255, .15);
margin-bottom: 32px;
padding-bottom: 32px;
display: flex;
flex-wrap: wrap;
gap: 40px 30px;
}
.service-item {
width: calc(50% - 15px);
display: flex;
gap: 18px;
align-items: flex-start;
}
.service-item .icon-box {
background: #ff3300;
border-radius: 50%;
height: 70px;
width: 70px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-position .4s ease;
}
.service-item:hover .icon-box {
background: #cc2900;
}
.service-item .icon-box i {
font-size: 26px;
color: #fff;
}
.service-item-content h3 {
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
color: #fff;
margin-bottom: 8px;
}
.service-item-content p {
color: rgba(255, 255, 255, .7);
font-size: 14px;
margin: 0;
}
.service-footer p {
color: rgba(255, 255, 255, .8);
font-size: 15px;
margin: 0;
}
.service-footer p span {
font-weight: 700;
color: #ff3300;
margin-right: 8px;
}
.service-footer a {
font-weight: 700;
text-transform: capitalize;
text-decoration: underline;
color: #fff;
transition: color .3s ease;
}
.service-footer a:hover {
color: #ff3300;
}
/* ── Footer Principal (d-footer) ─────────────────────────── */
.d-footer {
/* margin-top: 48px; */
background: #1c1c1e;
color: #e8eaed;
font-family: var(--font-sans);
border-radius: var(--radius-lg);
overflow: hidden;
}
.d-footer__main {
padding: 32px 24px 28px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Tiers */
.d-footer__tier {
padding: 32px 24px 28px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.d-footer__tier--top {
border-bottom: 1px solid rgba(255,255,255,.08);
}
.d-footer__tier--content {
border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Brand */
.d-footer__brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.d-footer__site-name {
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 1.2;
}
.d-footer__tagline {
font-size: 11px;
color: #9aa0a6;
line-height: 1.3;
}
.d-footer__brand-desc {
font-size: 15px;
font-weight: 500;
color: #e8eaed;
line-height: 1.5;
margin: 16px 0 20px;
}
.d-footer__brand-desc strong {
color: #ff3300;
}
/* Grid 3 columnas de secciones */
.d-footer__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 12px;
}
.d-footer__feature {
display: flex;
align-items: flex-start;
gap: 10px;
text-decoration: none;
color: inherit;
padding: 8px;
border-radius: var(--radius-md);
transition: background var(--transition);
}
.d-footer__feature:hover {
background: rgba(255,255,255,.06);
color: #fff;
}
.d-footer__feature-icon {
font-size: 15px;
color: #9aa0a6;
margin-top: 1px;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.d-footer__feature-title {
font-size: 13px;
font-weight: 500;
color: #e8eaed;
line-height: 1.3;
}
.d-footer__feature-desc {
font-size: 11px;
color: #9aa0a6;
line-height: 1.3;
margin-top: 1px;
}
/* Nav columnas */
.d-footer__nav-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #9aa0a6;
margin-bottom: 12px;
}
.d-footer__nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.d-footer__nav a {
font-size: 13px;
color: #bdc1c6;
text-decoration: none;
transition: color var(--transition);
}
.d-footer__nav a:hover {
color: #fff;
}
/* CTA desc */
.d-footer__cta-desc {
font-size: 12px;
color: #9aa0a6;
line-height: 1.5;
margin-bottom: 12px;
}
/* Barra inferior */
.d-footer__bottom {
padding: 14px 24px;
background: #141416;
}
.d-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 12px 0;
}
.d-footer__copy {
font-size: 12px;
color: #9aa0a6;
}
.d-footer__legal {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.d-footer__legal span {
color: #444;
}
.d-footer__legal a {
color: #9aa0a6;
text-decoration: none;
transition: color var(--transition);
}
.d-footer__legal a:hover {
color: #fff;
}
.d-footer__social {
display: flex;
gap: 14px;
}
.d-footer__social a {
font-size: 16px;
color: #9aa0a6;
text-decoration: none;
transition: color var(--transition);
}
.d-footer__social a:hover { color: #fff; }
/* Contacto en brand */
.d-footer__contact {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.d-footer__contact a {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #bdc1c6;
text-decoration: none;
transition: color var(--transition);
}
.d-footer__contact a:hover { color: #fff; }
.d-footer__contact i { width: 14px; text-align: center; font-size: 13px; }
/* Banner PWA */
.d-footer__pwa {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
background: #242426;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
flex-wrap: wrap;
}
.d-footer__pwa-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
background: rgba(255,51,0,.12);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.d-footer__pwa-body { flex: 1; min-width: 200px; }
.d-footer__pwa-title {
font-size: 15px;
font-weight: 600;
color: #fff;
margin-bottom: 8px;
}
.d-footer__pwa-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.d-footer__pwa-chips span {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #bdc1c6;
background: rgba(255,255,255,.06);
border-radius: var(--radius-pill);
padding: 3px 10px;
}
.d-footer__pwa-chips i { font-size: 10px; color: #9aa0a6; }
.d-footer__pwa-sub {
font-size: 11px;
color: #9aa0a6;
line-height: 1.4;
}
.d-footer__pwa-cta {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.d-footer__pwa-note {
font-size: 10px;
color: #9aa0a6;
text-align: center;
}
/* Red de sitios Ziport */
.d-footer__network {
padding: 20px 24px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.d-footer__network-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #9aa0a6;
margin-bottom: 14px;
}
.d-footer__network-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
color: #bdc1c6;
font-size: 11px;
font-weight: 500;
padding: 8px 4px;
border-radius: var(--radius-md);
transition: color var(--transition), background var(--transition);
}
.d-footer__network-item:hover {
color: #fff;
background: rgba(255,255,255,.06);
}
.d-footer__network-item--active {
color: #fff;
}
.d-footer__network-item img {
border-radius: var(--radius-sm);
opacity: .85;
}
.d-footer__network-item:hover img,
.d-footer__network-item--active img {
opacity: 1;
}
.d-footer__network-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 13px;
border-radius: var(--radius-sm);
pointer-events: none;
}
@media (max-width: 767px) {
.d-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
.d-footer__bottom-inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (max-width: 991px) {
.our-service {
padding: 50px 20px;
}
.service-content {
position: static;
margin-right: 0;
margin-bottom: 30px;
}
.sv-title h2 {
max-width: 100%;
font-size: 28px;
}
.service-item-list {
gap: 30px;
}
}
@media (max-width: 575px) {
.fa-4x {
font-size: 3em;
}
.service-item {
width: 100%;
}
.service-item .icon-box {
height: 60px;
width: 60px;
}
.service-item .icon-box i {
font-size: 22px;
}
.service-item-content h3 {
font-size: 16px;
}
}
/* ── Medios: logo links ──────────────────────────────────────── */
a:has(img.rounded-circle.border.img-fluid.mx-auto.d-block.mb-1) {
text-decoration: none;
}
/* ── Modales: footer con el mismo padding (variable) que el header, botones centrados ── */
.modal {
--bs-modal-header-padding: .75rem;
}
.modal-footer {
padding: calc(var(--bs-modal-padding) - 0.75rem);
justify-content: center;
}
/* ── Modales: blur de fondo ──────────────────────────────────── */
body:has(.modal.show) main {
filter: blur(6px);
transition: filter 0.3s ease;
}
body:not(:has(.modal.show)) main {
filter: none;
transition: filter 0.3s ease;
}
/* ── Bottom Nav Bar (flotante) ───────────────────────────── */
.sk-bottombar {
/* Mismas propiedades que sk-topbar */
display: flex;
align-items: center;
gap: 8px;
/* Fondo degradado igual al hero */
background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radius-lg);
padding: 9px 16px;
min-height: 60px;
flex-wrap: wrap;
/* Posición flotante */
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%) translateY(calc(100% + 24px));
/* Ancho: sigue al .container de Bootstrap. Base (<576px) fluido con 12px de gap;
los breakpoints de abajo replican los max-width del container. */
width: calc(100vw - 24px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1050;
opacity: 0;
pointer-events: none;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Ancho del bottombar = ancho del .sk-topbar = (max-width del .container − 24px de
padding del container). Así sus bordes coinciden exactamente con el topbar. */
@media (min-width: 576px) { .sk-bottombar { width: 516px; } }
@media (min-width: 768px) { .sk-bottombar { width: 696px; } }
@media (min-width: 992px) { .sk-bottombar { width: 936px; } }
@media (min-width: 1200px) { .sk-bottombar { width: 1116px; } }
@media (min-width: 1400px) { .sk-bottombar { width: 1296px; } }
.sk-bottombar.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Texto/iconos en tono claro sobre el degradado del bottombar */
.sk-bottombar .sp-location-name { color: #fff; }
.sk-bottombar .sp-location-sub { color: rgba(255, 255, 255, .7); }
.sk-bottombar .sk-tab-top { color: rgba(255, 255, 255, .75); }
.sk-bottombar .sk-tab-top:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sk-bottombar .sk-tab-top.active { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.sk-bottombar .sk-action-btn { color: rgba(255, 255, 255, .85); }
.sk-bottombar .sk-action-btn:hover { background: rgba(255, 255, 255, .12); }
.sk-bottombar .g-topbar__icon-btn { color: #fff; }
.sk-bottombar .g-topbar__icon-btn:hover { background: rgba(255, 255, 255, .12); }
.sk-bottombar .sk-quick-item { color: rgba(255, 255, 255, .8); }
.sk-bottombar .sk-quick-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sk-bottombar .sk-quick-item i { color: #fff; }
.sk-bottombar .mobile-nav-inner--bottom { border-top-color: rgba(255, 255, 255, .18); }
/* Accesos rápidos del bottombar: grid de 6 columnas, icono + nombre debajo */
.sk-bottombar__quick {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
width: 100%;
padding: 2px 0 6px;
}
.sk-quick-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 2px;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-secondary);
font-size: 11px;
line-height: 1.1;
text-align: center;
}
.sk-quick-item i {
font-size: 18px;
}
.sk-quick-item:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
/* Padding al body para que el sk-bottombar no tape el footer */
body {
padding-bottom: 92px;
}