/* Responsive Fix CSS - CreativeCR
 * Prevención de overflow y mejoras de responsividad
 */

/* Box-sizing global */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevenir overflow horizontal */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}

/* Imágenes responsive */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Videos e iframes responsive */
video,
iframe,
embed,
object {
    max-width: 100% !important;
    height: auto !important;
}

/* Tablas responsive */
table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Texto responsive */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Containers responsive */
.container {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}

/* Secciones y divs */
section,
div,
header,
footer,
main,
article,
aside,
nav {
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* Formularios responsive */
input,
textarea,
select,
button {
    max-width: 100%;
    font-size: 16px; /* Previene zoom en iOS */
}

/* Grids responsive */
.grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
}

/* Flex containers */
.flex {
    flex-wrap: wrap;
}

/* Cards responsive */
.card,
.project-card,
.portfolio-card {
    max-width: 100% !important;
    width: 100% !important;
}

/* Media queries para diferentes tamaños */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h1 {
        font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    }
    
    h2 {
        font-size: clamp(1.25rem, 6vw, 2rem) !important;
    }
    
    h3 {
        font-size: clamp(1.125rem, 5vw, 1.5rem) !important;
    }
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #f5aa5f;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e69a4f;
}