/* ===================================================================
TOTIWORKS - ULTRA STYLESHEET (Black & Turquoise Theme)
-------------------------------------------------------------------
1. Variables & Global Styles
2. Animated Background
3. Helper Classes & Effects (Gradients, Glass, Buttons)
4. Enter Screen (Refined)
5. Navbar (Glass)
6. Hero Section (Impactful)
7. Features Section (Glass Cards)
8. CTA Section (Visual)
9. Footer Section (Elegant Dark)
10. Animations & Transitions
11. Responsive Adjustments
=================================================================== */

/* ===================================================================
1. Variables & Global Styles
=================================================================== */
:root {
    /* --- Black & Turquoise Palette --- */
    --primary-color: #00C896; /* Verde Turquesa Principal */
    --secondary-color: #00876A; /* Verde Turquesa más oscuro (para gradientes/fondos) */
    --accent-color: #66F9D4; /* Verde Turquesa claro (para highlights/hovers) */

    /* --- RGB Versions (for rgba usage) --- */
    --rgb-primary: 0, 200, 150;
    --rgb-secondary: 0, 135, 106;
    --rgb-accent: 102, 249, 212;

    /* --- Blacks & Greys --- */
    --bg-dark: #0A0A0A; /* Casi negro */
    --bg-dark-secondary: #141414; /* Gris muy oscuro */
    --heading-color: #FFFFFF; /* Blanco puro para títulos */
    --text-color: #E5E5E5;   /* Blanco ligeramente apagado para texto */
    --text-muted: #A0A0A0;  /* Gris medio para texto secundario */

    /* --- Glass Effect --- */
    /* Base glass con ligero tinte turquesa muy sutil */
    --bg-glass: rgba(var(--rgb-primary), 0.03);
    --border-glass: rgba(var(--rgb-primary), 0.1);

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Layout & Effects */
    --border-radius: 0.75rem;
    --border-radius-pill: 50rem;
    --box-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra más oscura */
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.4);
    --box-shadow-hard: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-snap: 0.3s ease-out;
    --transition-enter: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Override Bootstrap default */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--rgb-primary);
    --bs-link-color: var(--primary-color); /* Links por defecto usan el turquesa */
    --bs-link-hover-color: var(--accent-color); /* Links hover usan turquesa claro */
}

/* Global Styles */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-dark); /* Fondo base oscuro */
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

body { padding-top: 85px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.fw-bolder { font-weight: 800 !important; }

p { margin-bottom: 1.2rem; }

a {
    /* Usar variables Bootstrap para consistencia */
    /* color: var(--bs-link-color); */
    text-decoration: none;
    transition: color var(--transition-snap);
}
/* a:hover { color: var(--bs-link-hover-color); } */

.lead {
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.features-section { background-color: transparent; }
/* CTA Section con nuevo gradiente (Turquesa oscuro a Negro) */
.cta-section { background: linear-gradient(135deg, var(--secondary-color), var(--bg-dark-secondary)); }


/* ===================================================================
2. Animated Background
=================================================================== */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /* Gradiente con Negro y Turquesas */
    background: linear-gradient(160deg, var(--bg-dark), var(--bg-dark-secondary), var(--secondary-color), var(--primary-color));
    background-size: 300% 300%;
    animation: gradientBG 35s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Textura de grano más sutil sobre fondo oscuro */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
    opacity: 0.4; /* Aumentar opacidad para que sea visible */
    pointer-events: none;
}

/* ===================================================================
3. Helper Classes & Effects (Gradients, Glass, Buttons)
=================================================================== */
/* Text Gradient (Turquesa Claro a Principal) */
.gradient-text {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* Icon Gradient (Mismo gradiente) */
.gradient-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.8rem;
    transition: transform var(--transition-smooth); /* Añadido para hover en cards */
}

/* Button Gradient (Turquesa Principal a Oscuro) */
.btn-gradient {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: var(--bg-dark); /* Texto oscuro para contraste con turquesa */
    font-weight: 600; /* Hacer texto del botón más visible */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
.btn-gradient span { position: relative; z-index: 2; }
.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transition: left var(--transition-smooth);
    z-index: 1;
}
.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--rgb-primary), 0.3); /* Sombra turquesa */
}
.btn-gradient:hover::before {
    left: 100%;
}

/* --- NUEVO: Botón Outline Accent --- */
.btn-outline-accent {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
    transition: all var(--transition-snap);
    font-weight: 500;
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
    background-color: var(--primary-color);
    color: var(--bg-dark); /* Texto oscuro sobre fondo turquesa */
    box-shadow: 0 4px 15px rgba(var(--rgb-primary), 0.2);
    transform: translateY(-2px);
}
/* --- FIN NUEVO --- */


/* Glass Effect Base */
.glass-effect {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    box-shadow: var(--box-shadow-soft);
}

/* ===================================================================
4. Enter Screen (Split Transition)
=================================================================== */
.enter-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060;
    background-color: transparent;
    overflow: hidden;
    display: flex;
}

.enter-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--bg-dark); /* Fondo negro sólido */
    transition: transform var(--transition-enter);
    /* Sutil gradiente para que no sea totalmente plano */
    background-image: linear-gradient(to bottom, var(--bg-dark), var(--bg-dark-secondary));
}

.enter-panel-left { left: 0; }
.enter-panel-right { right: 0; }

.enter-screen.split .enter-panel-left { transform: translateX(-100%); }
.enter-screen.split .enter-panel-right { transform: translateX(100%); }

.enter-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1061;
    opacity: 1;
    transition: opacity 0.5s ease-out calc(var(--transition-enter) - 0.5s);
    /* Asegurar que el logo sea visible sobre fondo oscuro */
    filter: brightness(1.5) contrast(1.1); /* Ajustar si el logo es oscuro */
}

.enter-screen.split .enter-logo-overlay { opacity: 0; }

.enter-screen.hidden {
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s 1s, opacity 0.5s ease-out 0.5s;
}

.main-content {
    transition: opacity 0.6s ease-in;
}


/* ===================================================================
5. Navbar (Glass)
=================================================================== */
.glass-navbar {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth);
    /* Glass Effect sobre fondo oscuro */
    background: rgba(10, 10, 10, 0.75); /* Negro semi-transparente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-glass); /* Borde sutil con tinte turquesa */
    box-shadow: var(--box-shadow-soft);
}
.navbar-brand img {
    filter: brightness(1.2); /* Ajustar brillo si es necesario */
}

.navbar .nav-link {
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin: 0 0.3rem;
    border-radius: var(--border-radius-pill);
    transition: color var(--transition-snap), background-color var(--transition-snap);
    position: relative;
}
.navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background-color: var(--primary-color); /* Subrayado turquesa */
    transition: width var(--transition-snap);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--heading-color); /* Blanco al pasar el ratón o activo */
}
.navbar .nav-link:hover::before,
.navbar .nav-link.active::before {
    width: 30%;
}

.navbar .navbar-toggler { border: none; }
.navbar .navbar-toggler:focus { box-shadow: none; }
.navbar .navbar-toggler i { font-size: 1.5rem; color: var(--text-muted); }
.navbar .navbar-toggler:hover i { color: var(--heading-color); }


/* ===================================================================
6. Hero Section (Impactful)
=================================================================== */
.hero-section {
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: calc(95vh - 85px);
    display: flex;
    align-items: center;
}
.hero-headline {
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada */
}
.hero-subheadline { max-width: 600px; color: var(--text-muted); } /* Usar text-muted */

.hero-buttons .btn {
    font-size: 1rem;
    font-weight: 600;
}
.hero-buttons .btn-gradient:hover {
     box-shadow: 0 8px 25px rgba(var(--rgb-primary), 0.4); /* Sombra turquesa */
}

/* Removido .glass-button (reemplazado por btn-outline-accent) */

.hero-image-wrapper { position: relative; }
.hero-image {
    box-shadow: var(--box-shadow-medium);
    transform: scale(0.98);
    opacity: 0.90; /* Ligeramente menos opaco */
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), box-shadow var(--transition-smooth);
    border: 1px solid var(--border-glass); /* Borde sutil glass */
}
.hero-image-wrapper:hover .hero-image {
     transform: scale(1);
     opacity: 1;
     box-shadow: var(--box-shadow-hard); /* Sombra más fuerte al hover */
}


/* ===================================================================
7. Features Section (Glass Cards)
=================================================================== */
.features-section .section-title { margin-bottom: 1rem; }
.features-section .section-subtitle { color: var(--text-muted); }

.glass-card {
    background: linear-gradient(135deg, var(--bg-glass), rgba(var(--rgb-primary), 0.01)); /* Fondo glass con tinte */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Sombra más oscura */
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}
.glass-card::before { /* Borde brillante sutil con color primario */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--rgb-primary),0.3), rgba(var(--rgb-primary),0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
}

.glass-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(var(--rgb-primary), 0.08), rgba(var(--rgb-primary), 0.02)); /* Fondo ligeramente más intenso */
}

.feature-icon-wrapper {
    width: 80px; height: 80px; border-radius: 50%;
    display: inline-flex; justify-content: center; align-items: center;
    margin-left: auto; margin-right: auto;
    transition: background-color var(--transition-snap), box-shadow var(--transition-snap);
}
.bg-glass-soft { /* Wrapper icono con color primario */
    background: rgba(var(--rgb-primary), 0.1);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(var(--rgb-primary), 0.2);
}
.glass-card:hover .feature-icon-wrapper {
    background: rgba(var(--rgb-primary), 0.15);
    box-shadow: 0 0 15px rgba(var(--rgb-primary), 0.2);
}
.glass-card:hover .gradient-icon {
     transform: scale(1.15);
}

.feature-card .card-title { font-weight: 600; font-size: 1.3rem; }
.feature-card .card-text { font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); } /* Usar text-muted */
.text-white { color: var(--heading-color) !important; }
.text-white-75 { color: rgba(255, 255, 255, 0.75) !important; } /* Mantener si se necesita específicamente */


/* ===================================================================
8. CTA Section (Visual)
=================================================================== */
.cta-background-shape {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    /* Radial gradient con color primario */
    background: radial-gradient(circle, rgba(var(--rgb-primary), 0.10) 0%, rgba(var(--rgb-primary), 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulse 6s infinite ease-in-out; /* Animación un poco más lenta */
}
@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
}

.cta-section .section-title { text-shadow: 0 2px 5px rgba(0,0,0,0.4); }
.cta-section .lead { color: var(--text-color); opacity: 0.8; } /* Texto lead más claro aquí */

/* Botón CTA: Claro sobre fondo oscuro/turquesa */
.cta-button {
    transition: all var(--transition-snap);
    font-weight: 600;
    background-color: #fff; /* Fondo blanco */
    color: var(--bg-dark); /* Texto oscuro */
}
.cta-button:hover {
    background-color: var(--accent-color); /* Fondo turquesa claro al hover */
    color: var(--bg-dark);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; /* Sombra más oscura */
}

/* ===================================================================
9. Footer Section (Elegant Dark)
=================================================================== */
.footer-section {
    background-color: var(--bg-dark-secondary); /* Fondo gris muy oscuro */
    color: var(--text-muted);
    border-top: 1px solid var(--border-glass);
    padding-top: 60px; padding-bottom: 30px;
    z-index: 2;
    position: relative;
}
.footer-heading {
    font-size: 0.9rem; color: var(--heading-color); margin-bottom: 1rem;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
    opacity: 0.9;
}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
    color: var(--text-muted); font-size: 0.9rem;
    transition: color var(--transition-snap), padding-left var(--transition-snap);
}
.footer-links a:hover {
    color: var(--primary-color); /* Hover turquesa */
    padding-left: 5px;
}
.social-icon {
    display: inline-flex; justify-content: center; align-items: center;
    width: 35px; height: 35px; border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo más oscuro */
    color: var(--text-muted);
    margin-right: 0.7rem;
    transition: background-color var(--transition-snap), color var(--transition-snap), transform var(--transition-snap);
}
.social-icon:hover {
    background-color: var(--primary-color); /* Fondo turquesa al hover */
    color: var(--bg-dark); /* Icono oscuro */
    transform: scale(1.1);
}
.footer-section hr { border-color: rgba(255, 255, 255, 0.1) !important; }
.footer-section .small { font-size: 0.85em; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

/* Corazón con color primario */
.footer-section .fa-heart {
    color: var(--primary-color);
}

/* ===================================================================
10. Animations & Transitions
=================================================================== */
[data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
[data-aos="zoom-in-up"] { transition-duration: 0.7s; }


/* ===================================================================
11. Responsive Adjustments
=================================================================== */
@media (max-width: 991.98px) {
    body { padding-top: 80px; }
    .hero-section { text-align: center; padding: 60px 0; }
    .hero-image-wrapper { display: none; }
    .hero-headline { font-size: calc(1.5rem + 3vw); }
    .footer-section .col-lg-2, .footer-section .col-lg-3 { margin-bottom: 2rem; }
}

@media (max-width: 767.98px) {
    .section { padding: 60px 0; }
    .hero-section { min-height: auto; }
    .hero-headline { font-size: calc(1.4rem + 4vw); }
    .hero-buttons .btn { width: 100%; max-width: 350px; display: block; margin-left: auto; margin-right: auto; }
    /* Ajuste para que los botones no se peguen tanto */
    .hero-buttons .btn.me-3 { margin-right: auto !important; }
    .hero-buttons .btn + .btn { margin-top: 1rem; margin-left: auto !important; }
    .navbar .btn-gradient { width: 100%; margin-top: 1rem; text-align: center; }
    .navbar .ms-lg-3 { margin-left: 0 !important; }
    .feature-card { margin-bottom: 1.5rem; }
    .cta-button { width: 90%; max-width: 350px; }
    .footer-section .social-icons { text-align: center; } /* Centrar iconos en móvil */
}