/* ==========================================
   ECOLADRILLOS ORGÁNICOS - MODELO CANVAS
   Paleta Eco-Friendly y Diseño Moderno
   ========================================== */

:root {
    /* Colores Principales */
    --verde-oscuro: #2D5016;
    --verde-medio: #4A7C2E;
    --verde-claro: #7CB342;
    --verde-suave: #A5D6A7;
    
    /* Colores Tierra */
    --tierra-oscuro: #5D4037;
    --tierra-medio: #8D6E63;
    --tierra-claro: #A1887F;
    
    /* Neutrales */
    --blanco: #FFFFFF;
    --gris-muy-claro: #F5F5F5;
    --gris-claro: #E0E0E0;
    --gris-medio: #9E9E9E;
    --gris-oscuro: #424242;
    --negro: #212121;
    
    /* Colores de Acento */
    --azul-info: #1976D2;
    --amarillo-warning: #FFA000;
    --rojo-error: #D32F2F;
    
    /* Colores de Impacto */
    --ambiental: #388E3C;
    --social: #0288D1;
    --economico: #F57C00;
    
    /* Tipografía */
    --font-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.16);
    --shadow-xl: 0 12px 24px rgba(0,0,0,0.20);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================
   RESET Y BASE
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-principal);
    font-size: 16px;
    line-height: 1.6;
    color: var(--negro);
    background-color: var(--gris-muy-claro);
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================
   HEADER
   ========================================== */

.header {
    background: linear-gradient(135deg, var(--verde-oscuro) 0%, var(--verde-medio) 100%);
    color: var(--blanco);
    padding: 20px 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.logo-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
}

.logo i {
    font-size: 32px;
    color: var(--verde-suave);
}

.tagline {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    padding-left: 44px;
}

.certification-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.badge {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-fast);
}

.badge:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
    background: linear-gradient(135deg, var(--tierra-medio) 0%, var(--tierra-claro) 100%);
    color: var(--blanco);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.hero-description {
    font-size: 20px;
    font-weight: 300;
    max-width: 900px;
    margin: 0 auto 40px;
    line-height: 1.7;
    opacity: 0.95;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 24px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition-normal);
}

.stat-item:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--verde-suave);
}

.stat-label {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
}

/* ==========================================
   MARKET TOGGLE
   ========================================== */

.market-toggle {
    background-color: var(--blanco);
    padding: 20px 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 80px;
    z-index: 999;
}

.toggle-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.toggle-btn {
    background-color: var(--gris-muy-claro);
    border: 2px solid var(--gris-claro);
    color: var(--gris-oscuro);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.toggle-btn:hover {
    background-color: var(--gris-claro);
    transform: translateY(-2px);
}

.toggle-btn.active {
    background-color: var(--verde-medio);
    color: var(--blanco);
    border-color: var(--verde-medio);
    box-shadow: var(--shadow-md);
}

.toggle-btn i {
    font-size: 18px;
}

/* ==========================================
   CANVAS GRID
   ========================================== */

.canvas {
    padding: 60px 0;
}

.canvas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    margin-top: 30px;
}

/* Layout del Canvas clásico */
.socios {
    grid-column: 1;
    grid-row: 1 / 3;
}

.actividades {
    grid-column: 2;
    grid-row: 1;
}

.recursos {
    grid-column: 2;
    grid-row: 2;
}

.propuesta {
    grid-column: 3;
    grid-row: 1 / 3;
    background: linear-gradient(135deg, var(--verde-medio) 0%, var(--verde-claro) 100%);
    color: var(--blanco);
}

.propuesta .block-header {
    background-color: rgba(255, 255, 255, 0.15);
}

.relaciones {
    grid-column: 4;
    grid-row: 1;
}

.canales {
    grid-column: 4;
    grid-row: 2;
}

.segmentos {
    grid-column: 5;
    grid-row: 1 / 3;
}

.costos {
    grid-column: 1 / 4;
    grid-row: 3;
}

.ingresos {
    grid-column: 4 / 6;
    grid-row: 3;
}

/* ==========================================
   CANVAS BLOCKS
   ========================================== */

.canvas-block {
    background-color: var(--blanco);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.canvas-block:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.block-header {
    background-color: var(--gris-muy-claro);
    padding: 16px 20px;
    border-bottom: 3px solid var(--verde-medio);
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-header i {
    font-size: 24px;
    color: var(--verde-medio);
}

.block-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gris-oscuro);
}

.propuesta .block-header h3 {
    color: var(--blanco);
}

.propuesta .block-header i {
    color: var(--blanco);
}

.block-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
}

.block-content::-webkit-scrollbar {
    width: 6px;
}

.block-content::-webkit-scrollbar-track {
    background: var(--gris-claro);
    border-radius: 3px;
}

.block-content::-webkit-scrollbar-thumb {
    background: var(--verde-medio);
    border-radius: 3px;
}

.block-content::-webkit-scrollbar-thumb:hover {
    background: var(--verde-oscuro);
}

/* ==========================================
   CONTENIDO SECTIONS
   ========================================== */

.content-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--verde-oscuro);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--verde-suave);
}

.propuesta .content-section h4 {
    color: var(--blanco);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.content-section ul {
    list-style: none;
    padding-left: 0;
}

.content-section li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}

.content-section li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--verde-medio);
    font-weight: 700;
}

.propuesta .content-section li::before {
    color: var(--blanco);
}

.content-section li strong {
    color: var(--verde-oscuro);
    font-weight: 600;
}

.propuesta .content-section li strong {
    color: var(--blanco);
}

/* Country Blocks */
.country-block,
.country-value,
.country-relation,
.country-channel {
    background-color: var(--gris-muy-claro);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid var(--verde-medio);
}

.propuesta .country-value {
    background-color: rgba(255, 255, 255, 0.15);
    border-left-color: var(--blanco);
}

.country-block h5,
.country-value h5,
.country-relation h5,
.country-channel h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--gris-oscuro);
}

.propuesta .country-value h5 {
    color: var(--blanco);
}

.country-block p,
.country-value p,
.country-relation p,
.country-channel p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Resource Categories */
.resource-category {
    margin-bottom: 16px;
}

.resource-category h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--verde-medio);
    margin-bottom: 6px;
}

.resource-category p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gris-oscuro);
}

/* Value Segments */
.value-segment {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.value-segment h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 8px;
}

.value-segment p {
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

/* Channel Types */
.channel-type {
    margin-bottom: 16px;
}

.channel-type h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--verde-medio);
    margin-bottom: 6px;
}

.channel-type p {
    font-size: 13px;
    line-height: 1.5;
}

/* Segments */
.segment-item {
    margin-bottom: 20px;
}

.segment-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-oscuro);
    margin-bottom: 6px;
}

.segment-bar {
    background-color: var(--gris-claro);
    height: 28px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 6px;
}

.segment-fill {
    background: linear-gradient(90deg, var(--verde-medio) 0%, var(--verde-claro) 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    transition: width var(--transition-slow);
}

.segment-fill span {
    color: var(--blanco);
    font-weight: 700;
    font-size: 13px;
}

.segment-detail {
    font-size: 12px;
    color: var(--gris-medio);
    font-style: italic;
}

/* International Segments */
.international-segment {
    background-color: var(--gris-muy-claro);
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    border-left: 4px solid var(--azul-info);
}

.international-segment h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gris-oscuro);
    margin-bottom: 8px;
}

.international-segment p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Cost Categories */
.cost-category {
    margin-bottom: 20px;
}

.cost-category h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--verde-oscuro);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--verde-suave);
}

.cost-category ul {
    list-style: none;
    padding-left: 0;
}

.cost-category li {
    font-size: 13px;
    padding: 6px 0 6px 20px;
    position: relative;
}

.cost-category li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--tierra-medio);
    font-weight: 700;
    font-size: 16px;
}

.cost-summary {
    background-color: var(--amarillo-warning);
    color: var(--blanco);
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 16px;
    font-weight: 500;
}

.cost-consolidado {
    background: linear-gradient(135deg, var(--economico) 0%, var(--amarillo-warning) 100%);
    color: var(--blanco);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.cost-consolidado h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

.cost-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 14px;
}

.cost-row.total {
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: 700;
    font-size: 15px;
}

.cost-row.highlight {
    background-color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
}

/* Revenue Streams */
.revenue-stream {
    margin-bottom: 20px;
}

.revenue-stream h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--verde-oscuro);
    margin-bottom: 10px;
}

.revenue-stream ul {
    list-style: none;
    padding-left: 0;
}

.revenue-stream li {
    font-size: 13px;
    padding: 6px 0 6px 20px;
    position: relative;
}

.revenue-stream li::before {
    content: '💰';
    position: absolute;
    left: 0;
    font-size: 14px;
}

.revenue-international {
    background-color: var(--gris-muy-claro);
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    border-left: 4px solid var(--economico);
}

.revenue-international h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gris-oscuro);
    margin-bottom: 8px;
}

.revenue-international p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.revenue-total {
    background: linear-gradient(135deg, var(--economico) 0%, var(--amarillo-warning) 100%);
    color: var(--blanco);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.revenue-total h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

.revenue-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 14px;
}

.rev-item.total {
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: 700;
    font-size: 16px;
}

/* Expand Button */
.expand-btn {
    width: 100%;
    background-color: var(--verde-medio);
    color: var(--blanco);
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.expand-btn:hover {
    background-color: var(--verde-oscuro);
}

.expand-btn i {
    transition: transform var(--transition-fast);
}

.canvas-block.expanded .expand-btn i {
    transform: rotate(180deg);
}

/* ==========================================
   TIMELINE
   ========================================== */

.timeline {
    background-color: var(--blanco);
    padding: 60px 0;
}

.timeline h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--verde-oscuro);
    margin-bottom: 50px;
}

.timeline-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline-item {
    background: linear-gradient(135deg, var(--azul-info) 0%, #0277BD 100%);
    color: var(--blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-normal);
}

.timeline-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.timeline-year {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.timeline-content {
    padding: 24px;
}

.timeline-content h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 16px;
}

.timeline-content li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
}

.timeline-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 18px;
}

.timeline-goal {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    backdrop-filter: blur(10px);
}

/* ==========================================
   TRIPLE IMPACTO
   ========================================== */

.triple-impacto {
    background: linear-gradient(135deg, var(--gris-muy-claro) 0%, var(--blanco) 100%);
    padding: 60px 0;
}

.triple-impacto h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--verde-oscuro);
    margin-bottom: 50px;
}

.impacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.impacto-card {
    background-color: var(--blanco);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-normal);
    border-top: 5px solid;
}

.impacto-card.ambiental {
    border-top-color: var(--ambiental);
}

.impacto-card.social {
    border-top-color: var(--social);
}

.impacto-card.economico {
    border-top-color: var(--economico);
}

.impacto-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.impacto-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.impacto-card h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--gris-oscuro);
}

.impacto-metrics {
    display: grid;
    gap: 16px;
}

.metric {
    background-color: var(--gris-muy-claro);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.metric-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}

.ambiental .metric-value {
    color: var(--ambiental);
}

.social .metric-value {
    color: var(--social);
}

.economico .metric-value {
    color: var(--economico);
}

.metric-label {
    font-size: 13px;
    color: var(--gris-medio);
    line-height: 1.4;
}

/* ==========================================
   VENTAJAS COMPETITIVAS
   ========================================== */

.ventajas {
    background-color: var(--blanco);
    padding: 60px 0;
}

.ventajas h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--verde-oscuro);
    margin-bottom: 50px;
}

.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.ventaja-item {
    background: linear-gradient(135deg, var(--verde-medio) 0%, var(--verde-claro) 100%);
    color: var(--blanco);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.ventaja-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.ventaja-item i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.ventaja-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.ventaja-item p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    background: linear-gradient(135deg, var(--gris-oscuro) 0%, var(--negro) 100%);
    color: var(--blanco);
    padding: 40px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--verde-suave);
}

.footer-section p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.9;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    opacity: 0.7;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1200px) {
    .canvas-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
    }
    
    .socios,
    .actividades,
    .recursos,
    .propuesta,
    .relaciones,
    .canales,
    .segmentos {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    .costos {
        grid-column: 1 / 4 !important;
    }
    
    .ingresos {
        grid-column: 1 / 4 !important;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 32px;
    }
    
    .hero-description {
        font-size: 16px;
    }
    
    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .canvas-grid {
        grid-template-columns: 1fr;
    }
    
    .costos,
    .ingresos {
        grid-column: 1 !important;
    }
    
    .block-content {
        max-height: 400px;
    }
    
    .timeline-container,
    .impacto-grid,
    .ventajas-grid {
        grid-template-columns: 1fr;
    }
    
    .toggle-buttons {
        flex-direction: column;
    }
    
    .toggle-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .certification-badges {
        width: 100%;
    }
    
    .badge {
        flex: 1;
        text-align: center;
    }
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.canvas-block {
    animation: fadeInUp 0.6s ease backwards;
}

.canvas-block:nth-child(1) { animation-delay: 0.1s; }
.canvas-block:nth-child(2) { animation-delay: 0.15s; }
.canvas-block:nth-child(3) { animation-delay: 0.2s; }
.canvas-block:nth-child(4) { animation-delay: 0.25s; }
.canvas-block:nth-child(5) { animation-delay: 0.3s; }
.canvas-block:nth-child(6) { animation-delay: 0.35s; }
.canvas-block:nth-child(7) { animation-delay: 0.4s; }
.canvas-block:nth-child(8) { animation-delay: 0.45s; }
.canvas-block:nth-child(9) { animation-delay: 0.5s; }

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }