/* COSMOTECH DIGITAL - Estilos base (Apple design) */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --text: #1d1d1f;
  --text-soft: #6e6e73;
  --accent: #0071e3;
  --accent-dark: #0059b3;
  --border: rgba(0, 0, 0, 0.08);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Helvetica Neue', 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.01em;
}

/* Barra de navegación estilo Apple: translucida y difuminada */
.nav-blur {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Botones estilo Apple */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 980px;
  transition: background .25s ease, transform .15s ease;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  color: var(--accent);
  border-radius: 980px;
  transition: opacity .2s ease;
}
.btn-ghost:hover { text-decoration: underline; }

/* Tarjetas */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform .35s cubic-bezier(0.2,0.8,0.2,1), box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.12);
}

/* Grandes titulares tipo Apple */
.headline {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Texto con degradado */
.text-gradient {
  background: linear-gradient(120deg, #0071e3 0%, #6d28d9 50%, #0071e3 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Tarjeta de cristal */
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.5);
}

/* Aparición suave al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(0.2,0.8,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fondo con degradado sutil */
.hero-gradient {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, #eaf2ff 0%, #ffffff 60%);
}

/* Blobs decorativos animados en el hero */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: 0;
  animation: float 14s ease-in-out infinite;
}
.blob-1 { width: 380px; height: 380px; background: #a5c8ff; top: -80px; left: -60px; }
.blob-2 { width: 320px; height: 320px; background: #d8b4fe; top: 40px; right: -80px; animation-delay: -5s; }
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(28px) scale(1.08); }
}

/* Botones con sombra suave */
.btn-primary { box-shadow: 0 8px 24px rgba(0,113,227,0.28); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(0,113,227,0.36); }

/* Chip / etiqueta */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 980px;
  background: rgba(0,113,227,0.08);
  color: #0071e3;
  font-size: .8rem;
  font-weight: 600;
}

/* Scrollbar minimalista */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* Menu movil */
.mobile-menu { transition: max-height .35s ease, opacity .3s ease; overflow: hidden; }