/* ============================================================================== */
/* ESTILOS RESPONSIVOS */
/* ============================================================================== */

/* ============================================================================== */
/* BREAKPOINTS */
/* ============================================================================== */
/* 
  xs: 0px - 575px (móviles pequeños)
  sm: 576px - 767px (móviles grandes)
  md: 768px - 991px (tablets)
  lg: 992px - 1199px (laptops)
  xl: 1200px - 1399px (desktops)
  xxl: 1400px+ (pantallas grandes)
*/

/* ============================================================================== */
/* MÓVILES PEQUEÑOS (max-width: 575px) */
/* ============================================================================== */
@media (max-width: 575px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  /* Tipografía */
  .section__title {
    font-size: var(--font-size-2xl);
    line-height: 1.2;
  }
  
  .hero__title {
    font-size: var(--font-size-3xl);
    line-height: 1.1;
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  /* Navegación */
  .nav__logo-img {
    height: 35px;
    width: auto;
    object-fit: contain;
  }
  
  .nav__buttons {
    display: none; /* Ocultar en móvil - se moverán al menú */
  }
  
  /* Hero section */
  .hero__buttons {
    display: flex; /* Mostrar solo en móvil */
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--spacing-2xl);
  }
  
  .hero__buttons .btn {
    width: 100%;
    max-width: 250px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
  
  /* Mostrar texto de confianza en móvil */
  .hero__trust-text {
    display: flex; /* Mostrar solo en móvil */
    margin-bottom: var(--spacing-xl);
  }
  
  /* Ajustar contenido hero para evitar overlap con carrusel */
  .hero__content {
    margin-bottom: var(--spacing-3xl);
  }
  
  /* Tarjetas de sorteos */
  .giveaways__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .giveaway-card {
    margin: 0 var(--spacing-sm);
  }
  
  .countdown {
    gap: var(--spacing-xs);
  }
  
  .countdown__item {
    padding: var(--spacing-sm);
  }
  
  .countdown__number {
    font-size: var(--font-size-base);
  }
  
  .countdown__label {
    font-size: 0.625rem;
  }
  
  /* Pilares de confianza */
  .trust-pillars {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .pillar {
    padding: var(--spacing-xl);
  }
  
  .pillar__icon {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
  }
  
  /* Ganadores */
  .winners__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .winner-card {
    margin: 0 var(--spacing-sm);
  }
  
  /* Pasos */
  .step {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    text-align: center;
  }
  
  .step--reverse {
    grid-template-columns: 1fr;
  }
  
  .step--reverse .step__content,
  .step--reverse .step__number,
  .step--reverse .step__illustration {
    order: initial;
  }
  
  .step__number {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
    justify-self: center;
  }
  
  .step__title {
    font-size: var(--font-size-lg);
  }
  
  /* Creadores */
  .creators__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .creator-type {
    padding: var(--spacing-xl);
    margin: 0 var(--spacing-sm);
  }
  
  .creator-type__icon {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
  }
  
  /* CTA Final */
  .final-cta__wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    text-align: center;
  }
  
  .final-cta__content {
    text-align: center;
  }
  
  .final-cta__app-preview {
    order: -1; /* Mostrar la app arriba en móvil */
  }
  
  .app-preview__image {
    max-width: 200px;
  }
  
  /* Carrusel de premios en Hero - Mejorado */
  .hero__prizes-carousel {
    bottom: 20px;
    padding: 0 var(--spacing-sm);
  }
  
  .prizes-carousel__track {
    gap: var(--spacing-md);
  }
  
  .prize-card {
    width: 150px;
    padding: var(--spacing-sm);
  }
  
  .prize-card__image {
    height: 110px;
  }
  
  .prize-card__title {
    font-size: var(--font-size-xs);
  }
  
  .final-cta__buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .final-cta__buttons .btn {
    width: 100%;
    max-width: 250px;
  }
  
  .final-cta__trust {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  /* Footer */
  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    text-align: center;
  }
  
  .footer__social {
    justify-content: center;
  }
  
  /* Modal */
  .modal__content {
    margin: var(--spacing-md);
    max-width: calc(100vw - 2rem);
  }
  
  .modal__buttons {
    flex-direction: column;
  }
  
  .modal__buttons .btn {
    width: 100%;
  }
}

/* ============================================================================== */
/* MÓVILES GRANDES (576px - 767px) */
/* ============================================================================== */
@media (min-width: 576px) and (max-width: 767px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-md);
  }
  
  /* Navegación */
  .nav__buttons {
    flex-direction: row;
    gap: var(--spacing-sm);
  }
  
  /* Hero */
  .hero__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Tarjetas de sorteos */
  .giveaways__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  /* Pilares */
  .trust-pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
  
  /* Ganadores */
  .winners__grid {
    grid-template-columns: 1fr;
  }
  
  /* Creadores */
  .creators__grid {
    grid-template-columns: 1fr;
  }
  
  /* Footer */
  .footer__content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

/* ============================================================================== */
/* TABLETS (768px - 991px) */
/* ============================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  /* Navegación móvil */
  .nav__menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--spacing-3xl);
    transition: left var(--transition-normal);
    z-index: var(--z-dropdown);
  }
  
  .nav__menu.active {
    left: 0;
  }
  
  .nav__list {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  
  /* Mostrar botones móviles en el menú */
  .nav__mobile-buttons {
    display: flex;
  }
  
  .nav__link {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) 0;
  }
  
  .nav__buttons {
    margin-top: var(--spacing-3xl);
    flex-direction: column;
    gap: var(--spacing-md);
    width: 200px;
  }
  
  .nav__toggle {
    display: block;
    font-size: var(--font-size-xl);
  }
  
  /* Hero */
  .hero__title {
    font-size: var(--font-size-4xl);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-lg);
  }
  
  /* Tarjetas de sorteos */
  .giveaways__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
  
  /* Pilares */
  .trust-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Ganadores */
  .winners__grid {
    grid-template-columns: 1fr;
  }
  
  /* Pasos */
  .step {
    grid-template-columns: 80px 1fr 150px;
    gap: var(--spacing-xl);
  }
  
  .step--reverse {
    grid-template-columns: 150px 1fr 80px;
  }
  
  .step__illustration img {
    max-width: 150px;
  }
  
  /* Creadores */
  .creators__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  /* Footer */
  .footer__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================== */
/* LAPTOPS (992px - 1199px) */
/* ============================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Navegación normal */
  .nav__toggle {
    display: none;
  }
  
  .nav__menu {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    flex-direction: row;
    padding: 0;
  }
  
  .nav__list {
    flex-direction: row;
    gap: var(--spacing-lg);
  }
  
  .nav__buttons {
    flex-direction: row;
    margin-top: 0;
    width: auto;
  }
  
  /* Tarjetas de sorteos */
  .giveaways__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }
  
  /* Pilares */
  .trust-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Ganadores */
  .winners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Creadores */
  .creators__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  /* CTA Final en tablet */
  .final-cta__wrapper {
    grid-template-columns: 1fr auto;
    gap: var(--spacing-3xl);
  }
  
  .final-cta__content {
    text-align: left;
  }
  
  .app-preview__image {
    max-width: 250px;
  }
  
  /* Footer */
  .footer__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================== */
/* DESKTOPS (1200px - 1399px) */
/* ============================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
  /* Tarjetas de sorteos */
  .giveaways__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Pilares */
  .trust-pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================================== */
/* PANTALLAS GRANDES (1400px+) */
/* ============================================================================== */
@media (min-width: 1400px) {
  /* Container más grande */
  .container {
    max-width: 1400px;
  }
  
  /* Espaciado aumentado */
  .section {
    padding: var(--spacing-4xl) 0;
  }
  
  /* Tipografía más grande */
  .hero__title {
    font-size: var(--font-size-6xl);
  }
  
  .section__title {
    font-size: var(--font-size-5xl);
  }
}

/* ============================================================================== */
/* ORIENTACIÓN DE PANTALLA */
/* ============================================================================== */

/* Móviles en modo landscape */
@media (max-width: 991px) and (orientation: landscape) {
  /* Reducir altura del hero en landscape */
  .hero {
    min-height: 70vh;
  }
  
  .hero__title {
    font-size: var(--font-size-3xl);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero__buttons {
    margin-bottom: var(--spacing-lg);
  }
  
  /* Navegación más compacta */
  .nav {
    height: 60px;
  }
  
  .nav__menu {
    top: 60px;
    height: calc(100vh - 60px);
  }
  
  /* Ajustar secciones */
  .section {
    padding: var(--spacing-2xl) 0;
  }
}

/* ============================================================================== */
/* CARACTERÍSTICAS ESPECÍFICAS DEL DISPOSITIVO */
/* ============================================================================== */

/* Dispositivos con notch */
@supports (padding: max(0px)) {
  .header {
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
  
  .hero__content {
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
}

/* Pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Imágenes más nítidas */
  .nav__logo-img,
  .creator__avatar,
  .winner-card__image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ============================================================================== */
/* MODO OSCURO APLICADO POR DEFECTO */
/* ============================================================================== */
/* Modo oscuro forzado - Ya aplicado en variables principales del style.css */

.header {
  background: rgba(18, 18, 18, 0.95);
}

.header.scrolled {
  background: rgba(18, 18, 18, 0.98);
}

/* ============================================================================== */
/* ACCESIBILIDAD */
/* ============================================================================== */

/* Reducir animaciones para usuarios con sensibilidad al movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero__video {
    display: none;
  }
  
  .floating-particles {
    display: none;
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #FF4500;
    --text-color: #000000;
    --text-light: #333333;
    --bg-color: #FFFFFF;
  }
  
  .btn--primary {
    border: 2px solid #000000;
  }
  
  .btn--secondary {
    border: 3px solid var(--primary-color);
  }
}

/* ============================================================================== */
/* IMPRESIÓN */
/* ============================================================================== */
@media print {
  /* Ocultar elementos no necesarios para impresión */
  .header,
  .nav,
  .hero__video,
  .floating-particles,
  .modal,
  .btn,
  .countdown,
  .giveaway-card__action {
    display: none !important;
  }
  
  /* Ajustar colores para impresión */
  * {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
  
  /* Ajustar tipografía */
  .section__title,
  .hero__title {
    color: #000000 !important;
    page-break-after: avoid;
  }
  
  /* Ajustar layout */
  .section {
    padding: 1rem 0;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  /* Evitar saltos de página en elementos importantes */
  .giveaway-card,
  .pillar,
  .winner-card,
  .step,
  .creator-type {
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
}

/* ============================================================================== */
/* OPTIMIZACIONES DE RENDIMIENTO */
/* ============================================================================== */

/* Reducir efectos complejos en dispositivos de bajo rendimiento */
@media (max-width: 768px) and (max-resolution: 1dppx) {
  .card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  
  .tilt-effect:hover {
    transform: none;
  }
  
  .parallax-element {
    transform: none !important;
  }
  
  .floating-particles {
    display: none;
  }
}

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

/* Mostrar/ocultar en diferentes tamaños */
.show-mobile {
  display: block;
}

.hide-mobile {
  display: none;
}

.show-tablet {
  display: none;
}

.show-desktop {
  display: none;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
  
  .hide-mobile {
    display: block;
  }
  
  .show-tablet {
    display: block;
  }
}

@media (min-width: 992px) {
  .show-tablet {
    display: none;
  }
  
  .show-desktop {
    display: block;
  }
}

/* Espaciado responsive */
.mb-mobile {
  margin-bottom: var(--spacing-md);
}

.mb-tablet {
  margin-bottom: 0;
}

.mb-desktop {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .mb-mobile {
    margin-bottom: 0;
  }
  
  .mb-tablet {
    margin-bottom: var(--spacing-lg);
  }
}

@media (min-width: 992px) {
  .mb-tablet {
    margin-bottom: 0;
  }
  
  .mb-desktop {
    margin-bottom: var(--spacing-xl);
  }
}

/* Texto responsive */
.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}

/* Flexbox responsive */
.flex-column-mobile {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex-column-mobile {
    flex-direction: row;
  }
}