/*
  glass.css — Sistema glassmorphism de MYAN
  Paleta: vidrio claro y delicado sobre playa difusa

  La sensación es: estás mirando a través de un vidrio translúcido
  en un día de playa sereno. Todo cálido, blanco, suave.
*/

/* ─────────────────────────────────────────
   Variables del sistema glass
───────────────────────────────────────── */
:root {
  /* Superficie glass — blanco cálido traslúcido */
  --glass-bg:           rgba(255, 252, 248, 0.22);
  --glass-bg-hover:     rgba(255, 252, 248, 0.34);
  --glass-bg-pressed:   rgba(255, 252, 248, 0.42);
  --glass-bg-header:    rgba(255, 252, 248, 0.55);
  --glass-bg-overlay:   rgba(255, 252, 248, 0.70);

  /* Blur */
  --glass-blur:         16px;
  --glass-blur-fuerte:  24px;
  --glass-blur-leve:    8px;

  /* Bordes — blancos, bien visibles para el efecto cristal */
  --glass-border:       1px solid rgba(255, 255, 255, 0.52);
  --glass-border-sutil: 1px solid rgba(255, 255, 255, 0.30);
  --glass-border-sand:  1px solid rgba(200, 168, 120, 0.20);

  /* Sombras cálidas, no negras frías */
  --glass-shadow:        0 4px 24px rgba(100, 75, 40, 0.10);
  --glass-shadow-media:  0 8px 32px rgba(100, 75, 40, 0.13);
  --glass-shadow-alta:   0 16px 48px rgba(100, 75, 40, 0.18);

  /* Radios */
  --glass-radius:        20px;
  --glass-radius-chico:  12px;
  --glass-radius-grande: 28px;
  --glass-radius-pill:   100px;

  /* Colores de texto — tono cálido oscuro (no negro puro) */
  --texto-primario:    rgba(52, 38, 28, 0.90);
  --texto-secundario:  rgba(52, 38, 28, 0.58);
  --texto-muted:       rgba(52, 38, 28, 0.35);
  --texto-sobre-claro: rgba(52, 38, 28, 0.78);

  /* Transición estándar */
  --trans: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-rapida: 0.15s ease;
}

/* ─────────────────────────────────────────
   .glass-card — superficie principal
───────────────────────────────────────── */
.glass-card {
  background:            var(--glass-bg);
  backdrop-filter:       blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border:                var(--glass-border);
  border-radius:         var(--glass-radius);
  box-shadow:            var(--glass-shadow-media);
  color:                 var(--texto-primario);

  transition:
    transform       var(--trans),
    background      var(--trans),
    box-shadow      var(--trans);
}

/* Elevación al hover — sutil, no agresiva */
.glass-card:hover {
  transform:   translateY(-3px);
  background:  var(--glass-bg-hover);
  box-shadow:  var(--glass-shadow-alta);
}

/* Presionado */
.glass-card:active {
  transform:         scale(0.98);
  transition-duration: 0.10s;
}

/* ─────────────────────────────────────────
   .glass-btn — botón translúcido
───────────────────────────────────────── */
.glass-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;

  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:          var(--glass-border);
  border-radius:   var(--glass-radius-pill);
  box-shadow:      var(--glass-shadow);

  color:       var(--texto-primario);
  font-family: inherit;
  font-size:   15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor:      pointer;
  padding:     13px 36px;

  transition:
    transform    var(--trans),
    background   var(--trans),
    box-shadow   var(--trans);
}

.glass-btn:hover {
  transform:  translateY(-2px);
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-alta);
}

.glass-btn:active {
  transform:           scale(0.97);
  transition-duration: 0.10s;
}

/* Variante principal — borde más prominente */
.glass-btn--principal {
  border:    1px solid rgba(255, 255, 255, 0.65);
  padding:   15px 52px;
  font-size: 16px;
  box-shadow: var(--glass-shadow-media);
}

/* ─────────────────────────────────────────
   .glass-header — barra sticky
───────────────────────────────────────── */
.glass-header {
  background:      var(--glass-bg-header);
  backdrop-filter: blur(var(--glass-blur-fuerte)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur-fuerte)) saturate(1.6);
  border-bottom:   var(--glass-border-sutil);
}

/* ─────────────────────────────────────────
   Focus accesible — visible pero delicado
───────────────────────────────────────── */
.glass-card:focus-visible,
.glass-btn:focus-visible {
  outline:        2px solid rgba(120, 152, 172, 0.70);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────
   Movimiento reducido
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-btn {
    transition: none;
  }
  .glass-card:hover,
  .glass-btn:hover {
    transform: none;
  }
}