html { scroll-behavior: smooth; font-size: 16px;}
body { font-family: 'Inter', sans-serif; }
section {margin-bottom: 3rem;}
h2 {font-size: 1.875rem; font-weight: bold; color: #111827; margin-bottom: 1.5rem;}
main {max-width: 56rem; margin: 0 auto; padding: 2rem 1rem;}


.floating-share { 
    position: fixed; left: 20px; 
    top: 50%; transform: translateY(-50%); z-index: 100; 
}

.floating-share__container {
    background-color: white;border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;display: flex;flex-direction: column;gap: 0.75rem;
}

.floating-share__item {display: block;cursor: pointer;font-size: 1.125rem;transition: color 0.2s ease;}
.floating-share__item--facebook {color: #2563eb;}
.floating-share__item--facebook:hover {color: #1d4ed8;}
.floating-share__item--twitter {color: #60a5fa;}
.floating-share__item--twitter:hover {color: #3b82f6;}
.floating-share__item--linkedin {color: #1d4ed8;}
.floating-share__item--linkedin:hover {color: #1e3a8a;}
.floating-share__item--whatsapp {color: #16a34a;}
.floating-share__item--whatsapp:hover { color: #15803d; }

/* Hero Section */
.hero {
    margin-bottom: 2rem;
}

.hero__image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.hero__content {
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.hero__meta {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.hero__category {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-right: 0.75rem;
}

.hero__meta-item {margin-right: 1rem;}
.hero__meta-item i{margin-right:0.25rem;}
.hero__update {background-color:rgba(34,197,94,0.2);padding:0.125rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;}
.hero__title{font-size:2.25rem;font-weight:bold;margin-bottom:1rem; color: white;}
.hero__description {font-size: 1.25rem;opacity: 0.9;}
.hero__footer {display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.hero__author {display:flex;align-items:center}
.hero__author-avatar {width:3rem;height:3rem;border-radius:50%;margin-right:1rem}
.hero__author-info {display:flex;flex-direction:column}
.hero__author-name {font-weight:600;color:#111827;margin:0}
.hero__author-title {color:#4b5563;font-size:0.875rem;margin:0}
.hero__actions {display:flex;gap:0.75rem}
.hero__btn {color:white;padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color 0.2s ease}
.hero__btn i{margin-right:.5rem}
.hero__btn--facebook {background-color:#2563eb}
.hero__btn--facebook:hover {background-color: #1d4ed8;}
.hero__btn--twitter {background-color: #60a5fa;}
.hero__btn--twitter:hover {background-color: #3b82f6;}

/* Table of Contents */
.toc{background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:1.5rem;position:sticky;top:2rem}
.toc__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.toc__title{font-size:1.125rem;font-weight:600;color:#111827}
.toc__toggle{color:#6b7280;background:none;border:none;cursor:pointer;transition:color 0.2s ease}
.toc__toggle:hover{color:#374151}
.toc__list{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.toc__link{display:block;color:#4b5563;cursor:pointer;transition:color 0.2s ease}
.toc__link:hover{color:#2563eb}
.toc-active { color: #3b82f6; font-weight: 600; }

/* Content Section */
.content{margin-bottom:3rem}
.content h2{font-size:1.875rem;font-weight:bold;color:#111827;margin-bottom:1.5rem}
.content__text{font-size:1.125rem;color:#374151;line-height:1.625;margin-bottom:1.5rem}

.content__insight{background-color:#eff6ff;border-left:4px solid #3b82f6;padding:1.5rem;margin:2rem 0}
.content__insight .wrapper{display:flex;align-items:flex-start}
.content__insight .icon{color:#3b82f6;font-size:1.25rem;margin-right:.75rem;margin-top:.25rem}
.content__insight .title{font-weight:600;color:#1e3a8a;margin-bottom:.5rem}
.content__insight .text{color:#1e40af}

.content__image-wrapper{margin:2rem 0}
.content__image-wrapper img{width:100%;height:16rem;object-fit:cover;border-radius:.75rem;cursor:pointer}
.content__image-wrapper p{font-size:.875rem;color:#6b7280;text-align:center;margin-top:.5rem}



/* List with Icons Component */
.list-with-icons{background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:2rem;margin-bottom:2rem}
.list-with-icons h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem}
.list-with-icons .list{display:flex;flex-direction:column;gap:1.5rem}
.list-with-icons .item{display:flex;align-items:flex-start}
.list-with-icons .icon{background-color:#dbeafe;border-radius:50%;padding:.75rem;margin-right:1rem;margin-top:.25rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center}
.list-with-icons .icon svg{width:1.25rem;height:1.25rem;fill:currentColor}
.list-with-icons .icon--blue{background-color:#dbeafe;color:#2563eb}
.list-with-icons .icon--green{background-color:#dcfce7;color:#16a34a}
.list-with-icons .icon--red{background-color:#fee2e2;color:#dc2626}
.list-with-icons .list-content{flex:1}
.list-with-icons .list-content .title{font-weight:600;color:#111827;font-size:1.125rem}
.list-with-icons .list-content .description{color:#4b5563;margin-bottom:.5rem}
.list-with-icons .list-content .tags{display:flex;gap:.5rem}
.list-with-icons .list-content .tags .tag{background-color:#dcfce7;color:#166534;padding:.125rem .5rem;border-radius:.25rem;font-size:.75rem}
.list-with-icons .list-content .tags .tag--blue{background-color:#dbeafe;color:#1e40af}
.list-with-icons .list-content .tags .tag--purple{background-color:#f3e8ff;color:#7c2d12}
.list-with-icons .list-content .tags .tag--red{background-color:#fee2e2;color:#991b1b}



/* Quote 1 Component */
.quote1{background:linear-gradient(to right,#faf5ff,#eff6ff);border:1px solid #c084fc;border-radius:.75rem;padding:1.5rem;margin:2rem 0}
.quote1 blockquote{font-size:1.5rem;font-style:italic;color:#581c87;font-weight:500;text-align:center;border:none}
.quote1 .author{text-align:center;color:#7c3aed;margin-top:.75rem}

/* Quote 2 Component */
.quote2{background:linear-gradient(to right,#f9fafb,#faf5ff);border-radius:.75rem;padding:1.5rem;margin:2rem 0}
.quote2 .wrapper{display:flex;align-items:flex-start}
.quote2 .icon{background-color:#f3e8ff;border-radius:50%;padding:.75rem;margin-right:1rem}
.quote2 .icon svg{width:1.25rem;height:1.25rem;fill:#9333ea}
.quote2 .quote-content{flex:1}
.quote2 .text{font-size:1.125rem;font-style:italic;color:#1f2937;margin-bottom:.75rem;border:none}
.quote2 .author{display:flex;align-items:center}
.quote2 .author .avatar{width:2rem;height:2rem;border-radius:50%;margin-right:.5rem}
.quote2 .author .info{display:flex;flex-direction:column}
.quote2 .author .name{font-weight:600;color:#111827;font-size:.875rem;margin:0}
.quote2 .author .title{color:#4b5563;font-size:.75rem;margin:0}

/* Pros List Component */
.pros-list{background-color:#f0fdf4;border-radius:.75rem;padding:1.5rem;border:1px solid #bbf7d0}
.pros-list .title{font-size:1.125rem;font-weight:600;color:#14532d;margin-bottom:1rem;display:flex;align-items:center}
.pros-list svg{color:green}
.pros-list .title .icon{color:#16a34a;margin-right:.5rem}
.pros-list ul{display:flex;flex-direction:column;gap:.75rem;color:#166534; padding-left: 0;}
.pros-list ul>li{display:flex;align-items:center}
.pros-list ul>li .icon{font-size:.75rem;margin-right:.75rem;background-color:#bbf7d0;border-radius:50%;padding:.25rem}

/* Cons List Component */
.cons-list{background-color:#fef2f2;border-radius:.75rem;padding:1.5rem;border:1px solid #fecaca}
.cons-list .title{font-size:1.125rem;font-weight:600;color:#991b1b;margin-bottom:1rem;display:flex;align-items:center}
.cons-list svg{color:red}
.cons-list .title .icon{color:#dc2626;margin-right:.5rem}
.cons-list ul{display:flex;flex-direction:column;gap:.75rem;color:#991b1b;padding-left:0}
.cons-list ul>li{display:flex;align-items:center}
.cons-list ul>li .icon{font-size:.75rem;margin-right:.75rem;background-color:#fecaca;border-radius:50%;padding:.25rem}

/* Step Guide 1 Component */
.step-guide-1{background:linear-gradient(to right,#f9fafb,#eff6ff);border-radius:.75rem;padding:2rem;margin-bottom:2rem;border:1px solid #bfdbfe}
.step-guide-1 .title{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center}
.step-guide-1 .title .icon{color:#2563eb;margin-right:.75rem}
.step-guide-1 .steps{display:flex;flex-direction:column;gap:0}
.step-guide-1 .step{display:flex;align-items:flex-start}
.step-guide-1 .step .number{background-color:#2563eb;color:white;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:1rem;margin-top:.25rem;font-size:.875rem;font-weight:bold;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.step-guide-1 .step .step-content{flex:1}
.step-guide-1 .step .title{font-weight:600;color:#111827;font-size:1.125rem;margin-bottom:.5rem}
.step-guide-1 .step .description{color:#4b5563}

/* Table with Header Component */
.table-with-header{overflow-x:auto;margin-bottom:2rem}
.table-with-header table{width:100%;background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);border:1px solid #e5e7eb}
.table-with-header thead{background:linear-gradient(to right,#f9fafb,#eff6ff)}
.table-with-header th{padding:1rem 1.5rem;text-align:left;font-size:.875rem;font-weight:600;color:#111827}
.table-with-header tbody{border-top:1px solid #e5e7eb}
.table-with-header tr{border-bottom:1px solid #e5e7eb;transition:background-color 0.2s ease}
.table-with-header tr:hover{background-color:#f9fafb}
.table-with-header td{padding:1rem 1.5rem}
.table-with-header .category{font-weight:500;color:#111827}
.table-with-header .options{color:#4b5563}
.table-with-header .use-case{color:#4b5563}
.table-with-header .badge{background-color:#fef3c7;color:#92400e;padding:.125rem .5rem;border-radius:.25rem;font-size:.75rem}
.table-with-header .badge--easy{background-color:#dcfce7;color:#166534}
.table-with-header .badge--medium{background-color:#fef3c7;color:#92400e}


/* Yellow Box Component */
.yellow-box{background-color:#fefce8;border:1px solid #fde047;border-radius:.75rem;padding:1.5rem;margin-bottom:2rem}
.yellow-box .wrapper{display:flex;align-items:flex-start}
.yellow-box .icon{color:#ca8a04;font-size:1.5rem;margin-right:1rem;margin-top:.25rem}
.yellow-box .yellow-box-content{flex:1}
.yellow-box .title{font-weight:600;color:#a16207;margin-bottom:.5rem}
.yellow-box .text{color:#a16207}


.three-columns{display:flex;flex-wrap:nowrap;gap:1.2rem;}
.three-columns .column{flex:1;}

/* Rounded Box Component */
.rounded-box{background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:1.5rem;border:1px solid #e5e7eb}
.rounded-box .content{text-align:center}
.rounded-box .icon-wrapper{background-color:#dbeafe;border-radius:50%;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.rounded-box .icon-wrapper--blue{background-color:#dbeafe}
.rounded-box .icon-wrapper--green{background-color:#dcfce7}
.rounded-box .icon-wrapper--purple{background-color:#f3e8ff}
.rounded-box .icon{color:#2563eb;font-size:1.5rem}
.rounded-box .icon--blue{color:#2563eb}
.rounded-box .icon--green{color:#16a34a}
.rounded-box .icon--purple{color:#9333ea}
.rounded-box .title{font-weight:600;color:#111827;margin-bottom:.5rem;font-size:1.125rem}
.rounded-box .description{color:#4b5563;font-size:.875rem}

/* Red Box Component */
.red-box{background-color:#fef2f2;border:1px solid #fecaca;border-radius:.75rem;padding:1.5rem;margin-bottom:2rem}
.red-box .wrapper{display:flex;align-items:flex-start}
.red-box .icon{color:#dc2626;font-size:1.5rem;margin-right:1rem;margin-top:.25rem}
.red-box .red-box-content{flex:1}
.red-box .title{font-weight:600;color:#991b1b;margin-bottom:.5rem}
.red-box .text{color:#991b1b}