/* =========================================================
   Mizunara Studio Design System
   base.css
   Versión: 1.1

   Glass Performance Pass
========================================================= */


/* =========================================================
   BODY
========================================================= */

body {
  background:
    var(--ms-color-bg);

  color:
    var(--ms-color-text);

  font-family:
    var(--ms-font-body);

  font-size:
    var(--ms-text-base);

  line-height:
    var(--ms-line-normal);

  letter-spacing:
    0;

  overflow-x:
    hidden;

  min-height:
    100vh;

  position:
    relative;

  transition:
    background
      var(--ms-transition-slow),
    color
      var(--ms-transition-normal);
}


/* =========================================================
   FONDO GENERAL
========================================================= */

body::before {
  content:
    "";

  position:
    fixed;

  inset:
    0;

  background:
    var(--ms-gradient-brand);

  z-index:
    var(--ms-z-bg);

  pointer-events:
    none;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    var(--ms-font-title);

  color:
    var(--ms-color-text);

  line-height:
    var(--ms-line-tight);

  font-weight:
    600;
}


h1 {
  font-size:
    clamp(
      2.8rem,
      6vw,
      5rem
    );
}


h2 {
  font-size:
    clamp(
      2.2rem,
      5vw,
      4rem
    );
}


h3 {
  font-size:
    clamp(
      1.8rem,
      4vw,
      3rem
    );
}


h4 {
  font-size:
    clamp(
      1.5rem,
      3vw,
      2.2rem
    );
}


h5 {
  font-size:
    1.25rem;
}


h6 {
  font-size:
    1rem;
}


p {
  color:
    var(--ms-color-muted);

  line-height:
    var(--ms-line-loose);

  font-size:
    var(--ms-text-base);
}


small {
  font-size:
    var(--ms-text-sm);

  color:
    var(--ms-color-muted);
}


strong {
  color:
    var(--ms-color-text);

  font-weight:
    600;
}


/* =========================================================
   SCRIPT FONT
========================================================= */

.ms-script {
  font-family:
    var(--ms-font-script);

  font-weight:
    400;
}


/* =========================================================
   LINKS
========================================================= */

a {
  transition:
    color
      var(--ms-transition-fast),
    opacity
      var(--ms-transition-fast),
    transform
      var(--ms-transition-fast);
}


a:hover {
  color:
    var(--ms-color-primary);
}


/* =========================================================
   IMAGES
========================================================= */

img {
  user-select:
    none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   SECTIONS
========================================================= */

section {
  position:
    relative;

  padding-block:
    var(--ms-section-padding);
}


section.compact {
  padding-block:
    var(--ms-section-padding-sm);
}


/* =========================================================
   CONTAINERS
========================================================= */

.container {
  width:
    min(
      92%,
      var(--ms-container-lg)
    );

  margin-inline:
    auto;
}


.container-md {
  width:
    min(
      92%,
      var(--ms-container-md)
    );

  margin-inline:
    auto;
}


.container-sm {
  width:
    min(
      92%,
      var(--ms-container-sm)
    );

  margin-inline:
    auto;
}


/* =========================================================
   BUTTONS
========================================================= */

.ms-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.7rem;

  height:
    var(--ms-button-height);

  padding:
    var(--ms-button-padding);

  border-radius:
    var(--ms-button-radius);

  font-size:
    var(--ms-button-font-size);

  letter-spacing:
    var(--ms-button-letter);

  text-transform:
    uppercase;

  font-weight:
    600;

  cursor:
    pointer;

  user-select:
    none;

  transition:
    transform
      0.35s ease,
    box-shadow
      0.35s ease,
    background-color
      0.35s ease,
    border-color
      0.35s ease,
    color
      0.35s ease,
    opacity
      0.35s ease;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.ms-btn-primary {
  background:
    var(--ms-gradient-gold);

  color:
    white;

  box-shadow:
    var(--ms-shadow-gold);
}


.ms-btn-primary:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--ms-shadow-lg);
}


/* =========================================================
   GLASS BUTTON
   Performance optimized

   Importante:
   Conserva apariencia glass,
   pero SIN backdrop-filter real.
========================================================= */

.ms-btn-glass {
  background:
    var(--ms-glass-bg);

  border:
    var(--ms-border-soft);

  color:
    var(--ms-color-text);

  box-shadow:
    0 8px 24px
      rgba(
        36,
        28,
        20,
        0.06
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.48
      );

  /*
    No usar backdrop-filter aquí.

    Los botones aparecen muchas veces
    y pueden crear demasiadas capas GPU.
  */
}


.ms-btn-glass:hover {
  background:
    var(--ms-glass-bg-strong);
}


/* =========================================================
   TRUE GLASS CARD
   Blur real reservado para componentes importantes
========================================================= */

.ms-glass {
  background:
    var(--ms-glass-bg);

  backdrop-filter:
    var(--ms-glass-blur);

  -webkit-backdrop-filter:
    var(--ms-glass-blur);

  border:
    var(--ms-border-soft);

  border-radius:
    var(--ms-radius-lg);

  box-shadow:
    var(--ms-shadow-md);
}


/* =========================================================
   STANDARD CARD
   Performance optimized

   Mantiene profundidad visual,
   pero ya NO crea una capa de blur.
========================================================= */

.ms-card {
  background:
    var(--ms-card-bg);

  border:
    var(--ms-card-border);

  border-radius:
    var(--ms-card-radius);

  padding:
    var(--ms-card-padding);

  box-shadow:
    var(--ms-card-shadow);

  /*
    Eliminado:
    backdrop-filter: var(--ms-glass-blur);

    Las tarjetas normales pueden existir
    muchas veces en la página.
  */
}


/* =========================================================
   DIVIDER
========================================================= */

.ms-divider {
  width:
    120px;

  height:
    2px;

  background:
    var(--ms-gradient-gold);

  margin:
    2rem
    auto;

  border-radius:
    999px;
}


/* =========================================================
   BADGES
========================================================= */

.ms-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0.45rem
    1rem;

  border-radius:
    999px;

  background:
    rgba(
      200,
      164,
      107,
      0.15
    );

  color:
    var(--ms-color-primary-dark);

  font-size:
    0.85rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   UTILITIES
========================================================= */

.text-center {
  text-align:
    center;
}


.text-left {
  text-align:
    left;
}


.text-right {
  text-align:
    right;
}


.hidden {
  display:
    none !important;
}


.rounded {
  border-radius:
    var(--ms-radius-lg);
}


.shadow {
  box-shadow:
    var(--ms-shadow-md);
}


/* =========================================================
   LIGHT GLASS UTILITY
   Sin backdrop-filter

   Para componentes secundarios.
========================================================= */

.glass {
  background:
    var(--ms-glass-bg);

  border:
    var(--ms-border-soft);

  box-shadow:
    0 8px 24px
      rgba(
        36,
        28,
        20,
        0.05
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.42
      );

  /*
    Esta utilidad ya no usa blur real.

    Si un componente necesita auténtico
    glassmorphism debe utilizar .ms-glass
    o declararlo expresamente en su CSS.
  */
}


.gold {
  color:
    var(--ms-color-primary);
}


.upper {
  text-transform:
    uppercase;
}


.w-100 {
  width:
    100%;
}


/* =========================================================
   ANIMACIONES BASE
========================================================= */

.fade-up {
  opacity:
    0;

  transform:
    translateY(30px);
}


.fade {
  opacity:
    0;
}


.scale {
  opacity:
    0;

  transform:
    scale(0.95);
}


/* =========================================================
   FOCUS
========================================================= */

:focus-visible {
  outline:
    2px solid
    var(--ms-color-primary);

  outline-offset:
    4px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
  background:
    rgba(
      200,
      164,
      107,
      0.25
    );

  color:
    var(--ms-color-text);
}


/* =========================================================
   EXPERIENCIA TÁCTIL
   Evitar selección accidental
========================================================= */

.ms-page,
.ms-welcome {
  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-touch-callout:
    none;
}


/*
  Los controles de formulario mantienen
  comportamiento normal.
*/

.ms-page input,
.ms-page textarea,
.ms-page select {
  user-select:
    text;

  -webkit-user-select:
    text;

  -webkit-touch-callout:
    default;
}


/*
  Imágenes no arrastrables visualmente.
*/

.ms-page img,
.ms-welcome img {
  -webkit-user-drag:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;
}


/* =========================================================
   EXPERIENCIA TÁCTIL GLOBAL
   Eliminar highlight azul del navegador
========================================================= */

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.ms-btn,
.ms-scroll-indicator {
  -webkit-tap-highlight-color:
    transparent;

  -webkit-touch-callout:
    none;
}


/* =========================================================
   BOTONES
========================================================= */

button,
.ms-btn {
  -webkit-appearance:
    none;

  appearance:
    none;
}


/* =========================================================
   FOCUS ACCESIBLE
========================================================= */

/*
  Eliminamos el focus táctil/nativo únicamente
  cuando el navegador no está usando navegación
  por teclado.
*/

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.ms-btn:focus:not(:focus-visible),
.ms-scroll-indicator:focus:not(:focus-visible) {
  outline:
    none;
}


/*
  Conservamos una señal elegante para usuarios
  que navegan mediante teclado.
*/

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.ms-btn:focus-visible,
.ms-scroll-indicator:focus-visible {
  outline:
    2px solid
    rgba(
      200,
      164,
      107,
      0.55
    );

  outline-offset:
    3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .ms-btn,
  a {
    transition:
      none;
  }

}