Preview de mixed.css
/* MIXED CSS PACK */
/* Template: capseguridadelectronica/index.html */
/* Template mtime: 2026-03-16 19:17:25 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
.service-card{
position: relative;
height: 100%;
background: #fff;
border-radius: 18px;
padding: 30px 24px;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
border-left: 5px solid #0286fe;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(2,134,254,.14);
border-left-color: #026fd1;
}
.service-icon{
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(2,134,254,.10);
color: #0286fe;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
margin-bottom: 18px;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.service-card:hover .service-icon{
transform: scale(1.08);
background: #0286fe;
color: #fff;
}
.service-card h3{
font-size: 1.25rem;
font-weight: 700;
color: #111;
margin-bottom: 12px;
}
.service-card p{
margin: 0;
color: #444;
line-height: 1.7;
font-size: .98rem;
}
@media (max-width: 767.98px){
.service-card{
padding: 24px 20px;
}
.service-icon{
width: 58px;
height: 58px;
font-size: 1.45rem;
margin-bottom: 14px;
}
.service-card h3{
font-size: 1.1rem;
}
.service-card p{
font-size: .95rem;
line-height: 1.65;
}
}
/* ========== VARIABLES Y RESET ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Paleta de colores principal (respetada y enriquecida) */
--accent: #0a2b4a; /* Azul profundo y corporativo */
--accent-soft: #1e3a5f; /* Versión más suave para gradientes/hovers */
--accent-light: #e6edf5; /* Fondo muy claro para secciones */
--bg: #ffffff;
--surface: #f9fbfe; /* Fondo sutil para tarjetas */
--text: #121212;
--text-muted: #4f5b68; /* Gris más legible que el anterior */
--border-light: #e9eef2;
--shadow-sm: 0 10px 30px -10px rgba(10, 43, 74, 0.08);
--shadow-md: 0 20px 40px -12px rgba(10, 43, 74, 0.15);
--shadow-lg: 0 30px 60px -15px rgba(10, 43, 74, 0.2);
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 32px;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body {
font-family: "Inter", sans-serif;
color: var(--text);
background-color: var(--bg);
line-height: 1.6;
overflow-x: hidden;
}
/* Tipografía refinada */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.section {
padding: 110px 0;
position: relative;
}
.container {
max-width: 1280px;
}
/* ========== COMPONENTES REUTILIZABLES ========== */
.eyebrow {
display: inline-block;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
background-color: rgba(10, 43, 74, 0.05);
padding: 6px 16px;
border-radius: 40px;
margin-bottom: 20px;
border: 1px solid r /* ...cortado... agregá ?full=1 para ver todo ... */
Manifest preview
{
"template": "capseguridadelectronica/index.html",
"template_mtime": 1773688645,
"template_mtime_human": "2026-03-16T19:17:25+00:00",
"css_links_found": [
"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
],
"css_links_external": [
"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
],
"css_links_embedded": [],
"inline_style_blocks": 2,
"inline_imports_external": [],
"inline_imports_embedded": [],
"missing_css_files": []
}