/* Static build (sin framework) - basado en el proyecto Lovable exportado */
:root {
    --background: 210 20% 98%;
    --foreground: 220 20% 10%;

    --card: 0 0% 100%;
    --card-foreground: 220 20% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 10%;

    --primary: 180 70% 35%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 15% 95%;
    --secondary-foreground: 220 20% 15%;

    --muted: 210 15% 92%;
    --muted-foreground: 220 10% 45%;

    --accent: 175 80% 40%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 20% 88%;
    --input: 210 20% 88%;
    --ring: 180 70% 35%;

    --radius: 0.75rem;

    /* Custom tokens */
    --hero-gradient: linear-gradient(135deg, hsl(180 70% 35%) 0%, hsl(175 80% 40%) 50%, hsl(200 80% 45%) 100%);
    --card-shadow: 0 4px 20px -4px hsl(220 20% 10% / 0.08);
    --card-shadow-hover: 0 12px 40px -8px hsl(220 20% 10% / 0.15);
    --glass-bg: hsl(0 0% 100% / 0.8);
    --glass-border: hsl(210 20% 88% / 0.5);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 180 70% 35%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 15% 95%;
    --sidebar-accent-foreground: 220 20% 15%;
    --sidebar-border: 210 20% 88%;
    --sidebar-ring: 180 70% 35%;
  }

  .dark {
    --background: 220 25% 8%;
    --foreground: 210 20% 98%;

    --card: 220 20% 12%;
    --card-foreground: 210 20% 98%;

    --popover: 220 20% 12%;
    --popover-foreground: 210 20% 98%;

    --primary: 175 80% 45%;
    --primary-foreground: 220 25% 8%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 210 20% 98%;

    --muted: 220 15% 20%;
    --muted-foreground: 210 15% 60%;

    --accent: 180 70% 40%;
    --accent-foreground: 220 25% 8%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 20%;
    --input: 220 15% 20%;
    --ring: 175 80% 45%;

    --card-shadow: 0 4px 20px -4px hsl(0 0% 0% / 0.3);
    --card-shadow-hover: 0 12px 40px -8px hsl(0 0% 0% / 0.5);
    --glass-bg: hsl(220 20% 12% / 0.8);
    --glass-border: hsl(220 15% 20% / 0.5);

    --sidebar-background: 220 25% 10%;
    --sidebar-foreground: 210 20% 98%;
    --sidebar-primary: 175 80% 45%;
    --sidebar-primary-foreground: 220 25% 8%;
    --sidebar-accent: 220 15% 18%;
    --sidebar-accent-foreground: 210 20% 98%;
    --sidebar-border: 220 15% 20%;
    --sidebar-ring: 175 80% 45%;
  }


:root {
  --hero-gradient: linear-gradient(135deg, hsl(180 70% 35%) 0%, hsl(175 80% 40%) 50%, hsl(200 80% 45%) 100%);
  --glass-bg: linear-gradient(135deg, hsl(var(--card)) / 0.70, hsl(var(--card)) / 0.35);
  --glass-border: hsl(var(--border) / 0.45);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: hsl(var(--foreground));
  background: radial-gradient(1200px 700px at 15% -10%, hsl(var(--primary) / 0.18), transparent 60%),
              radial-gradient(900px 600px at 105% 10%, hsl(var(--accent) / 0.12), transparent 55%),
              hsl(var(--background));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
/* Helpers de estilo del proyecto */
.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--hero-gradient);
}
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}
.btn-gradient {
  background: var(--hero-gradient);
  color: hsl(var(--primary-foreground));
  box-shadow: 0 12px 35px -15px hsl(180 70% 35% / 0.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px -18px hsl(180 70% 35% / 0.60);
  filter: brightness(1.03);
}
.section-padding {
  padding: 4rem 1rem;
}
@media (min-width: 768px) {
  .section-padding { padding: 6rem 2rem; }
}
@media (min-width: 1024px) {
  .section-padding { padding: 8rem 4rem; }
}
.container-custom {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container-custom { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-custom { padding: 0 2rem; } }

.shadow-card {
  box-shadow: var(--card-shadow);
}
.shadow-card-hover:hover {
  box-shadow: var(--card-shadow-hover);
}
@keyframes pulseSlow {
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.animate-pulse-slow { animation: pulseSlow 4s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Carrusel simple */
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
}
.carousel-dots {
  display:flex;
  gap:.5rem;
  justify-content:center;
}
.carousel-dot {
  width: .6rem; height:.6rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border) / .6);
  background: hsl(var(--muted) / .5);
}
.carousel-dot[aria-current="true"] {
  background: var(--hero-gradient);
  border-color: transparent;
}
/* Evitar selección mientras haces swipe */
.noselect { user-select: none; -webkit-user-select:none; }

/* Ancla con offset por header sticky */
[id]{ scroll-margin-top: 96px; }

/* Botones transparentes en móviles -corrección-*/
/* --- FIX: botones con mejor contraste en móvil/Android --- */
a.border.border-border\/50.bg-card,
button.border.border-border\/50.bg-card {
  background: hsl(var(--card) / 0.92) !important;
  border-color: hsl(var(--border) / 0.85) !important;
}

.card-glass {
  background: hsl(var(--card) / 0.88) !important; /* más sólido */
  border-color: hsl(var(--border) / 0.70) !important;
}

/* Aumenta contraste del texto del nav */
header a, header button {
  color: hsl(var(--foreground)) !important;
}

/* Corregir carrusel desproporcionadamente alto en móviles */
/* --- FIX: carrusel con altura razonable en móvil --- */
/* --- Android/mobile: carruseles más compactos --- */
/* ===== FIX carrusel: móvil Android compacto y siempre visible ===== */
@media (max-width: 640px) {
  /* el carrusel no debe crecer infinito */
  .carousel { max-height: 520px; }
  .carousel { min-height: 260px; }
  .carousel-track { align-items: stretch; }

  /* permite scroll interno si el contenido es demasiado */
  .carousel { overflow: hidden; }
  .carousel-slide { padding: 14px !important; }
  .carousel-slide { min-height: 260px; }

  /* PORTAFOLIO: oculta métricas (son lo que infla la altura) */
  #portfolioTrack .grid.grid-cols-2 { display: none !important; }

  /* PORTAFOLIO: imagen con altura controlada */
  #portfolioTrack img {
    max-height: 210px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* RESEÑAS: recorta el texto para que no se alargue */
  #reviewsTrack p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}