/**
 * Nazario Code - www.nazariocode.com
 * Estilos personalizados (retoques sobre Tailwind)
 */

/* Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* Evitar saltos con scrollbar */
html {
  scrollbar-gutter: stable;
}

/* Scrollbar personalizada (opcional, solo en navegadores compatibles) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0f0f12;
}

::-webkit-scrollbar-thumb {
  background: #2a2a32;
  border-radius: 5px;
}

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

/* Focus visible para accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* Mejora de contraste en enlaces del nav al hacer hover */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ef4444;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Botones: ligera elevación al hover */
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.98);
}

/* Cards: todas las esquinas redondeadas como los de proyectos (rounded-2xl = 1rem) */
.service-card,
.portfolio-item,
.testimonial-slide,
.testimonial-card,
.testimonial-modal-content,
.rounded-2xl.bg-dark-card {
  border-radius: 1rem;
}
.portfolio-item > div:first-of-type {
  border-radius: 1rem 1rem 0 0;
}
.portfolio-item > div:last-of-type {
  border-radius: 0 0 1rem 1rem;
}

/* Cards de servicios: ligera elevación al hover */
.service-card:hover {
  transform: translateY(-4px);
}

/* Testimonios: comilla de cierre visual */
.testimonial-bubble {
  position: relative;
}
/* Más espacio entre el texto del testimonio y la foto/nombre */
.testimonial-card-footer {
  margin-top: 2rem;
}

/* Carrusel: contenedor con overflow; esquinas redondeadas; máscara para que el contenido (y el texto) se desvanezca en los bordes */
.testimonials-carousel .overflow-hidden {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: inset 220px 0 100px -60px #0f0f12, inset -220px 0 100px -60px #0f0f12;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 120px,
    black calc(100% - 120px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 120px,
    black calc(100% - 120px),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.testimonials-carousel .overflow-hidden .testimonials-track {
  position: relative;
  z-index: 1;
}

/* Fade lateral: suave, menos cantidad para ver más el contenido de las cards */
.testimonial-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  max-width: 38%;
  min-width: 120px;
  pointer-events: none;
  z-index: 10;
}
.testimonial-fade--left {
  background: #0f0f12;
  background: linear-gradient(
    to right,
    #0f0f12 0%,
    #0f0f12 28%,
    rgba(15, 15, 18, 0.85) 45%,
    rgba(15, 15, 18, 0.5) 62%,
    rgba(15, 15, 18, 0.2) 82%,
    transparent 100%
  );
}
.testimonial-fade--right {
  background: #0f0f12;
  background: linear-gradient(
    to left,
    #0f0f12 0%,
    #0f0f12 28%,
    rgba(15, 15, 18, 0.85) 45%,
    rgba(15, 15, 18, 0.5) 62%,
    rgba(15, 15, 18, 0.2) 82%,
    transparent 100%
  );
}

/* Carrusel: sin separación ni líneas entre slides */
.testimonials-track {
  gap: 0;
  column-gap: 0;
}

/* Card testimonios: fondo transparente, solo sombra al hover */
.testimonial-slide {
  position: relative;
  z-index: 1;
  border: none !important;
  outline: none;
}
.testimonial-card {
  background: transparent;
  border: none !important;
  outline: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  background: rgba(24, 24, 29, 0.88);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(239, 68, 68, 0.45);
  transform: scale(1.03);
}
.testimonial-slide--active .testimonial-card:hover {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  transform: scale(1.03);
}

/* Slide activo */
.testimonial-slide--active {
  z-index: 2;
}
.testimonial-slide--active .testimonial-card {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.testimonial-slide--active .testimonial-card p.text-gray-300 {
  font-size: 1.05rem;
}
@media (min-width: 640px) {
  .testimonial-slide--active .testimonial-card p.text-gray-300 {
    font-size: 1.2rem;
  }
}

/* Modal testimonio */
.testimonial-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.testimonial-modal.hidden {
  display: none !important;
}

/* ========== Tema claro ========== */
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="light"] body,
[data-theme="light"] .bg-dark {
  background-color: #f8fafc !important;
}
[data-theme="light"] .bg-dark-card,
[data-theme="light"] .bg-dark-card\/50 {
  background-color: #ffffff !important;
}
[data-theme="light"] #nav,
[data-theme="light"] #nav.bg-dark\/90 {
  background-color: rgba(248, 250, 252, 0.95) !important;
}
[data-theme="light"] #mobile-menu {
  background-color: #ffffff !important;
}
[data-theme="light"] .border-dark-border,
[data-theme="light"] .border-b.border-dark-border,
[data-theme="light"] .border-t.border-dark-border {
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .text-white {
  color: #0f172a !important;
}
[data-theme="light"] .text-gray-100 {
  color: #0f172a !important;
}
[data-theme="light"] .text-gray-300 {
  color: #475569 !important;
}
[data-theme="light"] .text-gray-400 {
  color: #64748b !important;
}
[data-theme="light"] .text-gray-500 {
  color: #64748b !important;
}
[data-theme="light"] .nav-link,
[data-theme="light"] #nav a:not(.text-accent) {
  color: #64748b;
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] #nav a:hover {
  color: #ef4444;
}
[data-theme="light"] #nav a.text-xl {
  color: #0f172a;
}
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .theme-toggle:hover.bg-dark-card\/80 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .btn-secondary {
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .btn-secondary:hover {
  border-color: #ef4444;
  color: #ef4444;
}
[data-theme="light"] input.bg-dark,
[data-theme="light"] textarea.bg-dark {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8;
}
[data-theme="light"] .service-card,
[data-theme="light"] .portfolio-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .service-card:hover,
[data-theme="light"] .portfolio-item:hover {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .testimonial-card:hover {
  background: rgba(241, 245, 249, 0.95);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  transform: scale(1.03);
}
[data-theme="light"] .testimonial-slide--active .testimonial-card {
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
[data-theme="light"] .testimonials-carousel .overflow-hidden {
  box-shadow: inset 220px 0 100px -60px #f8fafc, inset -220px 0 100px -60px #f8fafc;
}
[data-theme="light"] .testimonial-fade--left {
  background: #f8fafc;
  background: linear-gradient(to right, #f8fafc 0%, #f8fafc 28%, rgba(248, 250, 252, 0.85) 45%, rgba(248, 250, 252, 0.5) 62%, rgba(248, 250, 252, 0.2) 82%, transparent 100%);
}
[data-theme="light"] .testimonial-fade--right {
  background: #f8fafc;
  background: linear-gradient(to left, #f8fafc 0%, #f8fafc 28%, rgba(248, 250, 252, 0.85) 45%, rgba(248, 250, 252, 0.5) 62%, rgba(248, 250, 252, 0.2) 82%, transparent 100%);
}
[data-theme="light"] .testimonial-modal .testimonial-modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}
[data-theme="light"] .testimonial-modal-content {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] #testimonial-modal-close:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a;
}
[data-theme="light"] .testimonial-carousel-btn {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #ef4444;
}
[data-theme="light"] .testimonial-carousel-btn:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff;
}
[data-theme="light"] #menu-toggle:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}
[data-theme="light"] .rounded-2xl.bg-dark-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] section.bg-dark-card\/50 {
  background-color: #f1f5f9 !important;
}

/* Reducir movimiento para personas sensibles */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .service-card:hover,
  .portfolio-item img,
  .btn-primary:active,
  .btn-secondary:active {
    transform: none;
  }
  .testimonial-slide--active .testimonial-card,
  .testimonial-card:hover {
    transform: none;
  }
}