/* EvovE Box - Utilitários Responsivos */

/* Mobile First Approach */
.mobile-only {
  display: block;
}

.tablet-up {
  display: none;
}

.desktop-up {
  display: none;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-up {
    display: block;
  }
  
  .tablet-only {
    display: block;
  }
  
  .desktop-up {
    display: none;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .tablet-only {
    display: none;
  }
  
  .desktop-up {
    display: block;
  }
  
  .desktop-only {
    display: block;
  }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .desktop-only {
    display: none;
  }
  
  .large-desktop-only {
    display: block;
  }
}

/* Container Responsivo */
.container-responsive {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container-responsive {
    max-width: 640px;
    padding: 0 1.5rem;
  }
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 768px;
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: 1024px;
    padding: 0 2.5rem;
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1280px;
    padding: 0 3rem;
  }
}

@media (min-width: 1536px) {
  .container-responsive {
    max-width: 1536px;
    padding: 0 4rem;
  }
}

/* Grid Responsivo */
.grid-responsive {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .grid-responsive {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}

/* Flexbox Responsivo */
.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .flex-responsive {
    flex-direction: row;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .flex-responsive {
    gap: 2rem;
  }
}

/* Typography Responsiva */
.text-responsive-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-responsive-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-responsive-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-responsive-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-responsive-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-responsive-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-responsive-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-responsive-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-responsive-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-responsive-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

@media (min-width: 640px) {
  .text-responsive-xs {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .text-responsive-sm {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  .text-responsive-base {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  
  .text-responsive-lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-responsive-xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .text-responsive-2xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-responsive-3xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  
  .text-responsive-4xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .text-responsive-5xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  
  .text-responsive-6xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .text-responsive-xs {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  .text-responsive-sm {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  
  .text-responsive-base {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-responsive-lg {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .text-responsive-xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-responsive-2xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  
  .text-responsive-3xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .text-responsive-4xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  
  .text-responsive-5xl {
    font-size: 4.5rem;
    line-height: 1;
  }
  
  .text-responsive-6xl {
    font-size: 6rem;
    line-height: 1;
  }
}

/* Spacing Responsivo */
.space-responsive-xs {
  margin: 0.5rem 0;
}

.space-responsive-sm {
  margin: 1rem 0;
}

.space-responsive-md {
  margin: 1.5rem 0;
}

.space-responsive-lg {
  margin: 2rem 0;
}

.space-responsive-xl {
  margin: 3rem 0;
}

.space-responsive-2xl {
  margin: 4rem 0;
}

@media (min-width: 768px) {
  .space-responsive-xs {
    margin: 0.75rem 0;
  }
  
  .space-responsive-sm {
    margin: 1.5rem 0;
  }
  
  .space-responsive-md {
    margin: 2rem 0;
  }
  
  .space-responsive-lg {
    margin: 3rem 0;
  }
  
  .space-responsive-xl {
    margin: 4rem 0;
  }
  
  .space-responsive-2xl {
    margin: 6rem 0;
  }
}

@media (min-width: 1024px) {
  .space-responsive-xs {
    margin: 1rem 0;
  }
  
  .space-responsive-sm {
    margin: 2rem 0;
  }
  
  .space-responsive-md {
    margin: 3rem 0;
  }
  
  .space-responsive-lg {
    margin: 4rem 0;
  }
  
  .space-responsive-xl {
    margin: 6rem 0;
  }
  
  .space-responsive-2xl {
    margin: 8rem 0;
  }
}

/* Padding Responsivo */
.padding-responsive-xs {
  padding: 0.5rem;
}

.padding-responsive-sm {
  padding: 1rem;
}

.padding-responsive-md {
  padding: 1.5rem;
}

.padding-responsive-lg {
  padding: 2rem;
}

.padding-responsive-xl {
  padding: 3rem;
}

.padding-responsive-2xl {
  padding: 4rem;
}

@media (min-width: 768px) {
  .padding-responsive-xs {
    padding: 0.75rem;
  }
  
  .padding-responsive-sm {
    padding: 1.5rem;
  }
  
  .padding-responsive-md {
    padding: 2rem;
  }
  
  .padding-responsive-lg {
    padding: 3rem;
  }
  
  .padding-responsive-xl {
    padding: 4rem;
  }
  
  .padding-responsive-2xl {
    padding: 6rem;
  }
}

@media (min-width: 1024px) {
  .padding-responsive-xs {
    padding: 1rem;
  }
  
  .padding-responsive-sm {
    padding: 2rem;
  }
  
  .padding-responsive-md {
    padding: 3rem;
  }
  
  .padding-responsive-lg {
    padding: 4rem;
  }
  
  .padding-responsive-xl {
    padding: 6rem;
  }
  
  .padding-responsive-2xl {
    padding: 8rem;
  }
}

/* Margin Responsivo */
.margin-responsive-xs {
  margin: 0.5rem;
}

.margin-responsive-sm {
  margin: 1rem;
}

.margin-responsive-md {
  margin: 1.5rem;
}

.margin-responsive-lg {
  margin: 2rem;
}

.margin-responsive-xl {
  margin: 3rem;
}

.margin-responsive-2xl {
  margin: 4rem;
}

@media (min-width: 768px) {
  .margin-responsive-xs {
    margin: 0.75rem;
  }
  
  .margin-responsive-sm {
    margin: 1.5rem;
  }
  
  .margin-responsive-md {
    margin: 2rem;
  }
  
  .margin-responsive-lg {
    margin: 3rem;
  }
  
  .margin-responsive-xl {
    margin: 4rem;
  }
  
  .margin-responsive-2xl {
    margin: 6rem;
  }
}

@media (min-width: 1024px) {
  .margin-responsive-xs {
    margin: 1rem;
  }
  
  .margin-responsive-sm {
    margin: 2rem;
  }
  
  .margin-responsive-md {
    margin: 3rem;
  }
  
  .margin-responsive-lg {
    margin: 4rem;
  }
  
  .margin-responsive-xl {
    margin: 6rem;
  }
  
  .margin-responsive-2xl {
    margin: 8rem;
  }
}

/* Width Responsivo */
.width-responsive-full {
  width: 100%;
}

.width-responsive-half {
  width: 100%;
}

.width-responsive-third {
  width: 100%;
}

.width-responsive-quarter {
  width: 100%;
}

@media (min-width: 640px) {
  .width-responsive-half {
    width: 50%;
  }
  
  .width-responsive-third {
    width: 33.333333%;
  }
  
  .width-responsive-quarter {
    width: 25%;
  }
}

@media (min-width: 1024px) {
  .width-responsive-third {
    width: 33.333333%;
  }
  
  .width-responsive-quarter {
    width: 25%;
  }
}

/* Height Responsivo */
.height-responsive-auto {
  height: auto;
}

.height-responsive-screen {
  height: 100vh;
}

.height-responsive-half {
  height: 50vh;
}

.height-responsive-quarter {
  height: 25vh;
}

@media (min-width: 768px) {
  .height-responsive-half {
    height: 60vh;
  }
  
  .height-responsive-quarter {
    height: 30vh;
  }
}

@media (min-width: 1024px) {
  .height-responsive-half {
    height: 70vh;
  }
  
  .height-responsive-quarter {
    height: 35vh;
  }
}

/* Position Responsivo */
.position-responsive-static {
  position: static;
}

.position-responsive-relative {
  position: relative;
}

.position-responsive-absolute {
  position: absolute;
}

.position-responsive-fixed {
  position: fixed;
}

.position-responsive-sticky {
  position: sticky;
}

@media (min-width: 768px) {
  .position-responsive-static {
    position: static;
  }
  
  .position-responsive-relative {
    position: relative;
  }
  
  .position-responsive-absolute {
    position: absolute;
  }
  
  .position-responsive-fixed {
    position: fixed;
  }
  
  .position-responsive-sticky {
    position: sticky;
  }
}

/* Overflow Responsivo */
.overflow-responsive-hidden {
  overflow: hidden;
}

.overflow-responsive-scroll {
  overflow: scroll;
}

.overflow-responsive-auto {
  overflow: auto;
}

.overflow-responsive-visible {
  overflow: visible;
}

@media (min-width: 768px) {
  .overflow-responsive-hidden {
    overflow: hidden;
  }
  
  .overflow-responsive-scroll {
    overflow: scroll;
  }
  
  .overflow-responsive-auto {
    overflow: auto;
  }
  
  .overflow-responsive-visible {
    overflow: visible;
  }
}

/* Visibility Responsivo */
.visibility-responsive-visible {
  visibility: visible;
}

.visibility-responsive-hidden {
  visibility: hidden;
}

.visibility-responsive-collapse {
  visibility: collapse;
}

@media (min-width: 768px) {
  .visibility-responsive-visible {
    visibility: visible;
  }
  
  .visibility-responsive-hidden {
    visibility: hidden;
  }
  
  .visibility-responsive-collapse {
    visibility: collapse;
  }
}

/* Opacity Responsivo */
.opacity-responsive-0 {
  opacity: 0;
}

.opacity-responsive-25 {
  opacity: 0.25;
}

.opacity-responsive-50 {
  opacity: 0.5;
}

.opacity-responsive-75 {
  opacity: 0.75;
}

.opacity-responsive-100 {
  opacity: 1;
}

@media (min-width: 768px) {
  .opacity-responsive-0 {
    opacity: 0;
  }
  
  .opacity-responsive-25 {
    opacity: 0.25;
  }
  
  .opacity-responsive-50 {
    opacity: 0.5;
  }
  
  .opacity-responsive-75 {
    opacity: 0.75;
  }
  
  .opacity-responsive-100 {
    opacity: 1;
  }
}

/* Transform Responsivo */
.transform-responsive-none {
  transform: none;
}

.transform-responsive-scale {
  transform: scale(1);
}

.transform-responsive-rotate {
  transform: rotate(0deg);
}

.transform-responsive-translate {
  transform: translate(0, 0);
}

@media (min-width: 768px) {
  .transform-responsive-none {
    transform: none;
  }
  
  .transform-responsive-scale {
    transform: scale(1.05);
  }
  
  .transform-responsive-rotate {
    transform: rotate(5deg);
  }
  
  .transform-responsive-translate {
    transform: translate(10px, 10px);
  }
}

/* Transition Responsivo */
.transition-responsive-none {
  transition: none;
}

.transition-responsive-all {
  transition: all 0.3s ease;
}

.transition-responsive-fast {
  transition: all 0.15s ease;
}

.transition-responsive-slow {
  transition: all 0.5s ease;
}

@media (min-width: 768px) {
  .transition-responsive-none {
    transition: none;
  }
  
  .transition-responsive-all {
    transition: all 0.3s ease;
  }
  
  .transition-responsive-fast {
    transition: all 0.15s ease;
  }
  
  .transition-responsive-slow {
    transition: all 0.5s ease;
  }
}

/* Z-Index Responsivo */
.z-responsive-auto {
  z-index: auto;
}

.z-responsive-0 {
  z-index: 0;
}

.z-responsive-10 {
  z-index: 10;
}

.z-responsive-20 {
  z-index: 20;
}

.z-responsive-30 {
  z-index: 30;
}

.z-responsive-40 {
  z-index: 40;
}

.z-responsive-50 {
  z-index: 50;
}

@media (min-width: 768px) {
  .z-responsive-auto {
    z-index: auto;
  }
  
  .z-responsive-0 {
    z-index: 0;
  }
  
  .z-responsive-10 {
    z-index: 10;
  }
  
  .z-responsive-20 {
    z-index: 20;
  }
  
  .z-responsive-30 {
    z-index: 30;
  }
  
  .z-responsive-40 {
    z-index: 40;
  }
  
  .z-responsive-50 {
    z-index: 50;
  }
}