/* ============================================
   SASINKA METAL - Estilos principales
   Tailwind CSS v4 + Fuentes Geist
   ============================================ */

/* --- Fuentes Geist (modificadas para rutas locales) --- */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/8a480f0b521d4e75-s.06d3mdzz5bre_.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/7178b3e590c64307-s.11.cyxs5p-0z~.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Fallback';
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/4fa387ec64143e14-s.0q3udbd2bu5yp.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/bbc41e54d2fcbd21-s.0gw~uztddq1df.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/797e433ab948586e-s.p.0.q-h669a_dqa.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono Fallback';
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

/* --- Variables de fuente --- */
:root {
  --font-geist-sans: 'Geist', 'Geist Fallback';
  --font-geist-mono: 'Geist Mono', 'Geist Mono Fallback';
}

/* --- Tailwind v4 - Propiedades personalizadas --- */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

/* --- Tema: Colores y espaciados --- */
@layer theme {
  :root,
  :host {
    --color-red-600: #e40014;
    --color-red-700: #bf000f;
    --color-red-900: #82181a;
    --color-blue-300: #90c5ff;
    --color-blue-400: #54a2ff;
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-400: #9f9fa9;
    --color-zinc-500: #71717b;
    --color-zinc-600: #52525c;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-widest: 0.1em;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --animate-bounce: bounce 1s infinite;
    --blur-md: 12px;
    --blur-xl: 24px;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-geist-sans);
    --default-mono-font-family: var(--font-geist-mono);
  }

  /* Variantes de color en espacio Lab */
  @supports (color: lab(0% 0 0)) {
    :root,
    :host {
      --color-red-600: lab(48.4493% 77.4328 61.5452);
      --color-red-700: lab(40.4273% 67.2623 53.7441);
      --color-red-900: lab(28.5139% 44.5539 29.0463);
      --color-blue-300: lab(77.5052% -6.4629 -36.42);
      --color-blue-400: lab(65.0361% -1.42062 -56.9803);
      --color-zinc-50: lab(98.26% 0 0);
      --color-zinc-100: lab(96.1634% 0.0993013 -0.364029);
      --color-zinc-200: lab(90.6853% 0.399202 -1.45452);
      --color-zinc-400: lab(65.6464% 1.53494 -5.42429);
      --color-zinc-500: lab(47.8878% 1.65477 -5.77283);
      --color-zinc-600: lab(35.1166% 1.7821 -6.1173);
      --color-zinc-800: lab(15.7305% 0.613749 -2.16959);
      --color-zinc-900: lab(8.30603% 0.618212 -2.16573);
      --color-zinc-950: lab(2.51107% 0.242703 -0.886115);
    }
  }
}

/* --- Reset / Base --- */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji'
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      'Liberation Mono',
      'Courier New',
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not (-webkit-appearance: -apple-pay-button)) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,
  input:where([type='button'], [type='reset'], [type='submit']) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}

/* --- Navbar auto-ocultable --- */
.nav--hidden {
  transform: translateY(-100%);
}

/* ============================================
   MENÚ HAMBURGUESA
   ============================================ */

/* --- Botón hamburguesa --- */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.2s ease;
  position: relative;
  z-index: 110;
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-zinc-100);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  flex-shrink: 0;
}

/* Animación a X cuando está activo */
.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Tema claro */
[data-theme="light"] .hamburger-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .hamburger-line {
  background: var(--color-zinc-800);
}

/* --- Theme toggle button (siempre visible) --- */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
  font-size: 1.25rem;
  position: relative;
  z-index: 110;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: scale(1.1);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

.theme-icon {
  display: block;
  line-height: 1;
  transition: transform 0.3s ease;
}

.theme-toggle-btn:hover .theme-icon {
  transform: rotate(15deg);
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* --- Overlay del menú --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Panel del menú hamburguesa --- */
.nav-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 360px);
  height: 100vh;
  height: 100dvh;
  background: var(--color-zinc-900);
  border-left: 1px solid var(--color-zinc-800);
  z-index: 105;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}

.nav-menu-panel.open {
  transform: translateX(0);
}

/* Contenido del menú */
.nav-menu-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  flex: 1;
}

/* Botones del menú */
.nav-menu-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: var(--color-zinc-400);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  min-height: 56px;
}

.nav-menu-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.nav-menu-btn:hover {
  background: rgba(191, 0, 15, 0.1);
  border-color: rgba(191, 0, 15, 0.2);
  color: var(--color-red-700);
}

.nav-menu-btn:hover svg {
  opacity: 1;
}

.nav-menu-btn:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

.nav-menu-btn:active {
  transform: scale(0.98);
}

/* --- Separador del menú --- */
.nav-menu-divider {
  width: 100%;
  height: 1px;
  background: var(--color-zinc-800);
  margin: 0.5rem 0;
  flex-shrink: 0;
}

/* --- Botón Admin (estilo especial) --- */
.nav-menu-btn--admin {
  margin-top: auto;
  border-color: transparent;
  opacity: 0.7;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
}

.nav-menu-btn--admin:hover {
  opacity: 1;
  background: rgba(191, 0, 15, 0.08);
  border-color: rgba(191, 0, 15, 0.15);
  color: var(--color-red-700);
}

.nav-menu-btn--admin svg {
  opacity: 0.5;
}

.nav-menu-btn--admin:hover svg {
  opacity: 1;
}

/* Tema claro */
[data-theme="light"] .nav-menu-divider {
  background: var(--color-zinc-200);
}

[data-theme="light"] .nav-menu-btn--admin:hover {
  background: rgba(191, 0, 15, 0.05);
  border-color: rgba(191, 0, 15, 0.12);
  color: var(--color-red-600);
}

/* Tema claro para menú */
[data-theme="light"] .nav-menu-panel {
  background: var(--color-zinc-50);
  border-left-color: var(--color-zinc-200);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-menu-btn {
  color: var(--color-zinc-600);
}

[data-theme="light"] .nav-menu-btn:hover {
  background: rgba(191, 0, 15, 0.06);
  border-color: rgba(191, 0, 15, 0.15);
  color: var(--color-red-600);
}

[data-theme="light"] .nav-overlay {
  background: rgba(255, 255, 255, 0.4);
}

/* --- Body scroll lock --- */
body.nav-open {
  overflow: hidden;
}

/* --- Responsive: Ajustes del menú en pantallas grandes --- */
@media (min-width: 1024px) {
  .nav-menu-panel {
    width: min(40vw, 400px);
  }
  .nav-menu-content {
    padding: 2rem;
  }
  .nav-menu-btn {
    font-size: 1.125rem;
    padding: 1.25rem 1.5rem;
  }
}

@media (min-width: 1536px) {
  .nav-menu-panel {
    width: min(30vw, 440px);
  }
}

/* --- prefers-reduced-motion para menú --- */
@media (prefers-reduced-motion: reduce) {
  .hamburger-line {
    transition: none;
  }
  .nav-overlay {
    transition: none;
  }
  .nav-menu-panel {
    transition: none;
  }
  .nav-menu-btn {
    transition: none;
  }
  .nav-menu-btn:active {
    transform: none;
  }
  .theme-toggle-btn {
    transition: none;
  }
  .theme-icon {
    transition: none;
  }
}

/* --- Botones flotantes --- */
.btn-float {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 8vw, 3.75rem);
  height: clamp(2.75rem, 8vw, 3.75rem);
  border-radius: 999px;
  border: 3px solid var(--color-zinc-950);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.btn-float:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 3px;
}

.btn-float svg {
  width: clamp(1.25rem, 4vw, 1.75rem);
  height: clamp(1.25rem, 4vw, 1.75rem);
}

/* Tema claro */
[data-theme="light"] .btn-float {
  border-color: var(--color-zinc-200);
}

@media (prefers-reduced-motion: reduce) {
  .btn-float {
    transition: none;
  }
  .btn-float:hover {
    transform: none !important;
  }
}

/* --- Componentes: Tarjetas de materiales --- */
@layer components {
  .material-card {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-zinc-800);
    background-color: var(--color-zinc-900);
  }

  .material-card:hover {
    transform: scale(1.03);
    border-color: var(--color-red-700);
    box-shadow: 0 0 30px rgba(191, 0, 15, 0.15);
  }

  .material-card:focus-visible {
    outline: 2px solid var(--color-red-600);
    outline-offset: 4px;
  }

  .material-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .material-card:hover .material-card__image {
    transform: scale(1.1);
  }

  .material-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );
    transition: opacity 0.4s ease;
  }

  .material-card:hover .material-card__overlay {
    opacity: 0.9;
  }

  .material-card__content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    width: 100%;
  }

  .material-card__title {
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .material-card__badge {
    display: inline-block;
    font-size: clamp(0.85rem, 3.5vw, 1.35rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-zinc-400);
    background: rgba(122, 121, 121, 0.08);
    backdrop-filter: blur(25px);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.2;
  }

  .material-card:hover .material-card__badge {
    color: var(--color-red-600);
    border-color: var(--color-red-700);
    background: rgba(191, 0, 15, 0.15);
  }

  /* Tema claro */
  [data-theme="light"] .material-card {
    border-color: var(--color-zinc-200);
    background-color: var(--color-zinc-100);
  }

  [data-theme="light"] .material-card:hover {
    border-color: var(--color-red-600);
  }

  [data-theme="light"] .material-card__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.05) 100%
    );
  }

  @media (prefers-reduced-motion: reduce) {
    .material-card,
    .material-card__image,
    .material-card__overlay {
      transition: none;
    }
    .material-card:hover {
      transform: none;
    }
    .material-card:hover .material-card__image {
      transform: none;
    }
  }

  /* Ajustes para pantallas muy pequeñas (260px - 399px) */
  @media (min-width: 260px) and (max-width: 24.99rem) {
    .material-card {
      aspect-ratio: 16 / 9;
      border-radius: 1.25rem;
    }
    .material-card__title {
      font-size: 1.1rem;
    }
    .material-card__badge {
      font-size: clamp(0.7rem, 3vw, 0.9rem);
      font-weight: 900;
      padding: 0.25rem 0.7rem;
    }
    .material-card__content {
      padding: 0.75rem;
    }
  }

  /* Ajustes para pantallas muy grandes (1536px+) */
  @media (min-width: 96rem) {
    .material-card {
      aspect-ratio: 3 / 2;
      border-radius: 2.5rem;
    }
    .material-card__title {
      font-size: 1.75rem;
    }
  }
}

/* --- Flip Card (Acero) --- */
.flip-card {
  perspective: 1000px;
  overflow: visible;
}

.flip-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 2rem;
  aspect-ratio: 4 / 3;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:focus-visible .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2rem;
  overflow: hidden;
}

.flip-card-front {
  z-index: 2;
}

.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 1px solid var(--color-zinc-800);
  overflow: hidden;
}

[data-theme="light"] .flip-card-back {
  background: #000000;
  border-color: var(--color-zinc-200);
}

/* --- Contenido del reverso de la flip card (Acero) --- */
.flip-card-back__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
}

.flip-card-back__text {
  font-size: clamp(0.9rem, 4vw, 1.4rem);
  font-weight: 900;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.flip-card-back__price {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 900;
  color: #ef4444;
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (min-width: 260px) and (max-width: 24.99rem) {
  .flip-card-back__text {
    font-size: clamp(0.75rem, 3.5vw, 0.9rem);
  }
  .flip-card-back__price {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }
  .flip-card-back__content {
    padding: 0.75rem;
    gap: 0.3rem;
  }
}

/* Ajuste para pantallas pequeñas */
@media (min-width: 260px) and (max-width: 24.99rem) {
  .flip-card .flip-card-inner {
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
  }
  .flip-card-front,
  .flip-card-back {
    border-radius: 1.25rem;
  }
}

@media (min-width: 96rem) {
  .flip-card .flip-card-inner {
    aspect-ratio: 3 / 2;
    border-radius: 2.5rem;
  }
  .flip-card-front,
  .flip-card-back {
    border-radius: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-card-inner {
    transition: none;
  }
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
}

/* --- Utilities: Clases utilitarias de Tailwind v4 --- */
@layer utilities {
  /* Positioning */
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[200\] {
    z-index: 200;
  }

  /* Margin */
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mr-auto {
    margin-right: auto;
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .mb-24 {
    margin-bottom: calc(var(--spacing) * 24);
  }
  .mb-40 {
    margin-bottom: calc(var(--spacing) * 40);
  }
  .ml-auto {
    margin-left: auto;
  }

  /* Display */
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }

  /* Sizing */
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-\[500px\] {
    height: 500px;
  }
  .h-full {
    height: 100%;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[85\%\] {
    max-width: 85%;
  }
  .max-w-\[1400px\] {
    max-width: 1400px;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }

  /* Transforms */
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
      var(--tw-skew-x) var(--tw-skew-y);
  }

  /* Animation */
  .animate-bounce {
    animation: var(--animate-bounce);
  }

  /* Interaction */
  .cursor-pointer {
    cursor: pointer;
  }
  .resize-none {
    resize: none;
  }

  /* Grid */
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* Flexbox */
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }

  /* Gap */
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-20 {
    gap: calc(var(--spacing) * 20);
  }

  /* Space */
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
    );
  }

  /* Overflow */
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }

  /* Border Radius */
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-\[3rem\] {
    border-radius: 3rem;
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  /* Border */
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-transparent {
    border-color: #0000;
  }
  .border-zinc-100 {
    border-color: var(--color-zinc-100);
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .border-zinc-800 {
    border-color: var(--color-zinc-800);
  }
  .border-zinc-900 {
    border-color: var(--color-zinc-900);
  }
  .border-zinc-950 {
    border-color: var(--color-zinc-950);
  }

  /* Background */
  .bg-\[\#25D366\] {
    background-color: #25d366;
  }
  .bg-red-700 {
    background-color: var(--color-red-700);
  }
  .bg-red-900\/20 {
    background-color: #82181a33;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-900\/20 {
      background-color: color-mix(
        in oklab,
        var(--color-red-900) 20%,
        transparent
      );
    }
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/80 {
    background-color: #fffc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/80 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 80%,
        transparent
      );
    }
  }
  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }
  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }
  .bg-zinc-200 {
    background-color: var(--color-zinc-200);
  }
  .bg-zinc-800 {
    background-color: var(--color-zinc-800);
  }
  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }
  .bg-zinc-900\/80 {
    background-color: #18181bcc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-zinc-900\/80 {
      background-color: color-mix(
        in oklab,
        var(--color-zinc-900) 80%,
        transparent
      );
    }
  }
  .bg-zinc-950 {
    background-color: var(--color-zinc-950);
  }
  .bg-zinc-950\/90 {
    background-color: #09090be6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-zinc-950\/90 {
      background-color: color-mix(
        in oklab,
        var(--color-zinc-950) 90%,
        transparent
      );
    }
  }

  /* Object fit */
  .object-cover {
    object-fit: cover;
  }

  /* Padding */
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  /* Text alignment */
  .text-center {
    text-align: center;
  }

  /* Font size */
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }

  /* Line height */
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  /* Font weight */
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  /* Letter spacing */
  .tracking-\[0\.4em\] {
    --tw-tracking: 0.4em;
    letter-spacing: 0.4em;
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  /* Word break */
  .break-all {
    word-break: break-all;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  /* Text color */
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-zinc-400 {
    color: var(--color-zinc-400);
  }
  .text-zinc-500 {
    color: var(--color-zinc-500);
  }
  .text-zinc-600 {
    color: var(--color-zinc-600);
  }
  .text-zinc-900 {
    color: var(--color-zinc-900);
  }

  /* Text transform / style */
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }

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

  /* Opacity */
  .opacity-40 {
    opacity: 0.4;
  }
  .opacity-90 {
    opacity: 0.9;
  }

  /* Shadows */
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a),
      0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-zinc-200\/50 {
    --tw-shadow-color: #e4e4e780;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-zinc-200\/50 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-zinc-200) 50%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }

  /* Filters */
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
      var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
      var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
      var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
      var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
      var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
      var(--tw-backdrop-sepia);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
      var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
      var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
      var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
      var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
      var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
      var(--tw-backdrop-sepia);
  }

  /* Transitions */
  .transition {
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
      filter, -webkit-backdrop-filter, backdrop-filter, display,
      content-visibility, overlay, pointer-events;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color,
      text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
      --tw-gradient-to;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .duration-500 {
    --tw-duration: 0.5s;
    transition-duration: 0.5s;
  }

  /* Outline */
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  /* Hover states */
  @media (hover: hover) {
    .group-hover\:grayscale-0:is(:where(.group):hover *) {
      --tw-grayscale: grayscale(0%);
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
        var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
        var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }
    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }
    .hover\:text-blue-300:hover {
      color: var(--color-blue-300);
    }
    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  /* Focus */
  .focus\:border-red-600:focus {
    border-color: var(--color-red-600);
  }

  /* Responsive: desde 260px hasta pantallas ultra-wide */

  /* 260px - Mínimo: 1 columna (por defecto) */

  /* 400px: 2 columnas */
  @media (min-width: 25rem) {
    .xs\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* 640px: 3 columnas */
  @media (min-width: 40rem) {
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* 768px: 3 columnas (mantiene) */
  @media (min-width: 48rem) {
    .md\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* 1024px: 4 columnas */
  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* 1280px: 5 columnas */
  @media (min-width: 80rem) {
    .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  /* 1536px+: 6 columnas */
  @media (min-width: 96rem) {
    .\32xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
}

/* --- Estilos globales del tema --- */
:root {
  --background: #fff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* --- @property declarations para Tailwind --- */
@property --tw-rotate-x {
  syntax: '*';
  inherits: false;
}
@property --tw-rotate-y {
  syntax: '*';
  inherits: false;
}
@property --tw-rotate-z {
  syntax: '*';
  inherits: false;
}
@property --tw-skew-x {
  syntax: '*';
  inherits: false;
}
@property --tw-skew-y {
  syntax: '*';
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: '*';
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: '*';
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: '*';
  inherits: false;
}
@property --tw-font-weight {
  syntax: '*';
  inherits: false;
}
@property --tw-tracking {
  syntax: '*';
  inherits: false;
}
@property --tw-shadow {
  syntax: '*';
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: '*';
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: '*';
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: '*';
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: '*';
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: '*';
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: '*';
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: '*';
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: '*';
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: '*';
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: '*';
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: '*';
  inherits: false;
}
@property --tw-brightness {
  syntax: '*';
  inherits: false;
}
@property --tw-contrast {
  syntax: '*';
  inherits: false;
}
@property --tw-grayscale {
  syntax: '*';
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: '*';
  inherits: false;
}
@property --tw-invert {
  syntax: '*';
  inherits: false;
}
@property --tw-opacity {
  syntax: '*';
  inherits: false;
}
@property --tw-saturate {
  syntax: '*';
  inherits: false;
}
@property --tw-sepia {
  syntax: '*';
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: '*';
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: '*';
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: '*';
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: '*';
  inherits: false;
}
@property --tw-duration {
  syntax: '*';
  inherits: false;
}
@property --tw-scale-x {
  syntax: '*';
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: '*';
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: '*';
  inherits: false;
  initial-value: 1;
}

/* ============================================
   MEJORAS RESPONSIVAS - v2.0
   Tipografía clamp, touch targets, @container,
   prefers-reduced-motion, breakpoints completos
   ============================================ */

/* --- Clamp Typography --- */
.hero-title {
  font-size: clamp(2.5rem, 10vw, 5rem) !important;
}

/* --- Hero Section Background --- */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-image: url('../assets/img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1;
  pointer-events: none;
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

/* Tema claro: overlay igual de opaco */
[data-theme="light"] .hero-section::before {
  background: rgba(0, 0, 0, 0.82);
}

/* --- Lista de precios debajo del hero --- */
.price-list-section {
  padding: 2rem 1rem 3rem;
}

.price-list {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.price-row:last-child {
  border-bottom: none;
}

.price-material {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e4e4e7;
  white-space: nowrap;
}

.price-divider {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15) 0px,
    rgba(255, 255, 255, 0.15) 4px,
    transparent 4px,
    transparent 8px
  );
}

.price-value {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  font-weight: 800;
  color: #ef4444;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .price-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .price-material {
  color: #27272a;
}

[data-theme="light"] .price-divider {
  background: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* --- Animación de fade-in para el hero --- */
.animate-fade-in {
  animation: heroFadeIn 1s ease forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.section-title {
  font-size: clamp(2rem, 6vw, 3rem) !important;
}

.material-card__title {
  font-size: clamp(1rem, 4vw, 1.5rem) !important;
}

/* --- Hero subtitle responsive --- */
.hero-subtitle {
  font-size: 8px;
  letter-spacing: 0.2em;
}

/* --- Screen Reader Only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Touch Targets Mínimos 44x44px (Accesibilidad) --- */
button,
[role="button"],
.btn-float,
input,
textarea,
select,
a[aria-label] {
  min-height: 44px;
  min-width: 44px;
}

/* Excluir elementos inline pequeños cuando navbar oculto */
.nav--hidden button,
.nav--hidden [role="button"] {
  min-height: auto;
  min-width: auto;
}

/* --- Scroll Top: oculto hasta hacer scroll --- */
#scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Overflow-X: prevenir scroll horizontal en móvil (<640px) --- */
@media (max-width: 639px) {
  body,
  .bg-zinc-950,
  main,
  #navbar,
  section {
    overflow-x: hidden;
  }

  main {
    width: 100%;
    max-width: 100vw;
  }

  .max-w-\[1400px\] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* --- Container Queries para tarjetas --- */
#materials-grid {
  container-type: inline-size;
  container-name: materials;
}

@container materials (max-width: 280px) {
  .material-card {
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
  }
  .material-card__title {
    font-size: 0.9rem !important;
  }
  .material-card__badge {
    font-size: clamp(0.65rem, 2.8vw, 0.85rem);
    font-weight: 900;
    padding: 0.2rem 0.6rem;
  }
  .material-card__content {
    padding: 0.75rem;
  }
}

/* --- Orientación: Landscape en móvil ajusta columnas --- */
@media (orientation: landscape) and (max-width: 767px) {
  #materials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (orientation: portrait) and (max-width: 399px) {
  #materials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Responsive: 290px - 399px (móvil muy pequeño) --- */
@media (min-width: 290px) and (max-width: 24.99rem) {
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
  }
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .material-card {
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
  }
  .material-card__content {
    padding: 0.75rem;
  }
  .material-card__badge {
    font-size: clamp(0.65rem, 3vw, 0.9rem);
    font-weight: 900;
    padding: 0.25rem 0.7rem;
  }
}

/* --- Contacto: inputs 16px mínimo (evita zoom iOS) --- */
input,
textarea,
select,
button {
  font-size: 16px !important;
}

/* Contact form inputs - color de texto según tema */
#contact-name,
#contact-message {
  color: var(--color-zinc-100);
}

#contact-name::placeholder,
#contact-message::placeholder {
  color: var(--color-zinc-500);
}

[data-theme="light"] #contact-name,
[data-theme="light"] #contact-message {
  color: var(--color-zinc-900);
  background: var(--color-zinc-100);
}

[data-theme="light"] #contact-name::placeholder,
[data-theme="light"] #contact-message::placeholder {
  color: var(--color-zinc-400);
}

[data-theme="light"] #contact-name:focus,
[data-theme="light"] #contact-message:focus {
  background: #ffffff;
  border-color: var(--color-red-600);
}

/* --- Botones flotantes: clamp responsivo --- */
.btn-float {
  width: clamp(40px, 10vw, 56px) !important;
  height: clamp(40px, 10vw, 56px) !important;
  min-width: 44px;
  min-height: 44px;
}

.btn-float svg {
  width: clamp(18px, 4vw, 28px) !important;
  height: clamp(18px, 4vw, 28px) !important;
}

/* ============================================
   BREAKPOINT: 640px+ (Tablet)
   ============================================ */
@media (min-width: 640px) {
  /* Navbar */
  .navbar {
    padding: 1.5rem 1.5rem !important;    /* py-6 px-6 */
  }
  .navbar-logo {
    font-size: 1.25rem !important;         /* text-xl */
    gap: 0.75rem !important;               /* gap-3 */
  }
  /* Espaciado entre botones en la derecha del navbar */
  .navbar .flex.items-center {
    gap: 0.5rem !important;
  }

  /* Main */
  main.max-w-\[1400px\] {
    padding-left: 1.5rem !important;       /* sm:px-6 */
    padding-right: 1.5rem !important;
    padding-top: 8rem !important;          /* sm:pt-32 */
  }

  /* Hero */
  .hero-section {
    padding-top: 7rem !important;          /* sm:pt-28 */
    padding-bottom: 5rem !important;       /* sm:pb-20 */
  }
  .hero-title {
    margin-bottom: 2.5rem !important;      /* sm:mb-10 */
  }
  .hero-subtitle {
    font-size: 12px !important;            /* sm:text-xs */
    letter-spacing: 0.4em !important;
    margin-bottom: 5rem !important;        /* sm:mb-20 */
  }

  /* Materiales */
  #materiales {
    margin-bottom: 10rem !important;       /* sm:mb-40 */
  }
  #materiales .section-title {
    margin-bottom: 2.5rem !important;      /* sm:mb-10 */
  }
  #materials-grid {
    gap: 1rem !important;                  /* sm:gap-4 */
  }

  /* Contacto */
  .contact-section {
    gap: 3rem !important;                  /* sm:gap-12 */
    padding-top: 5rem !important;          /* sm:py-20 */
    padding-bottom: 5rem !important;
  }
  .contact-form {
    padding: 2rem !important;              /* sm:p-8 */
    border-radius: 3rem !important;        /* sm:rounded-[3rem] */
  }
  .contact-form h3 {
    font-size: 1.25rem !important;         /* sm:text-xl */
  }
  .location-address {
    font-size: 1.5rem !important;          /* sm:text-2xl */
  }
  .submit-btn {
    padding-top: 1rem !important;          /* sm:py-4 */
    padding-bottom: 1rem !important;
  }

  /* Floating buttons */
  .float-btns {
    bottom: 1.5rem !important;             /* sm:bottom-6 */
    right: 1.5rem !important;              /* sm:right-6 */
  }
  #scroll-top span {
    font-size: 1.5rem !important;          /* sm:text-2xl */
  }
}

/* ============================================
   BREAKPOINT: 768px+ (Tablet landscape / small desktop)
   ============================================ */
@media (min-width: 768px) {
  .hero-section {
    padding-top: 9rem !important;          /* md:pt-36 */
  }
  #contact-message {
    height: 8rem !important;               /* md:h-32 */
  }
}

/* ============================================
   BREAKPOINT: 1024px+ (Desktop)
   ============================================ */
@media (min-width: 1024px) {
  /* Main */
  main.max-w-\[1400px\] {
    padding-left: 2rem !important;         /* lg:px-8 */
    padding-right: 2rem !important;
  }

  /* Contacto: grid de 2 columnas */
  .contact-section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5rem !important;                  /* lg:gap-20 */
  }

  .contact-form {
    padding: 2.5rem !important;            /* lg:p-10 */
  }

  /* Grid gap */
  #materials-grid {
    gap: 1.5rem !important;                /* lg:gap-6 */
  }
}

/* ============================================
   BREAKPOINT: 1280px+ (Large desktop)
   ============================================ */
@media (min-width: 1280px) {
  /* Nothing extra needed - grid is handled by xl:grid-cols-5 */
}

/* ============================================
   BREAKPOINT: 1536px+ (Ultra-wide / 4K)
   ============================================ */
@media (min-width: 1536px) {
  /* Nothing extra needed - grid is handled by 2xl:grid-cols-6 */
}

/* --- prefers-reduced-motion: respetar configuración --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-bounce {
    animation: none !important;
  }

  .material-card {
    transition: none !important;
  }
  .material-card:hover {
    transform: none !important;
  }
  .material-card__image {
    transition: none !important;
  }
  .material-card:hover .material-card__image {
    transform: none !important;
  }
  .material-card__overlay {
    transition: none !important;
  }

  .btn-float {
    transition: none !important;
  }
  .btn-float:hover {
    transform: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ============================================
   FOOTER - Limpio y alineado
   ============================================ */

/* --- Contenedor principal --- */
.footer-section {
  width: 100%;
  border-top: 1px solid rgba(39, 39, 42, 0.5);
  margin-top: 6rem;
}

/* --- Inner: mismo ancho y padding que el main --- */
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 0.75rem;
}

/* --- Fila flex: columna en mobile, fila en desktop --- */
.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* --- Cada columna --- */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* --- Textos copyright --- */
.footer-copy-line {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-zinc-500);
  text-align: center;
}

.footer-brand {
  color: var(--color-red-700);
}

.footer-rights-line {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-zinc-600);
  text-align: center;
}

/* --- Texto CTA --- */
.footer-cta-line {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-zinc-500);
  text-align: center;
  line-height: 1.625;
}

/* --- Enlace WhatsApp --- */
.footer-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-red-700);
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: -0.05em;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0;
  position: relative;
  transition: color 0.25s ease;
}

.footer-wa-link:hover {
  color: var(--color-red-600);
}

.footer-wa-link svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.footer-wa-link:hover svg {
  transform: scale(1.15);
}

.footer-wa-link:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.footer-wa-number {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(191, 0, 15, 0.3);
  transition: text-decoration-color 0.25s ease;
}

.footer-wa-link:hover .footer-wa-number {
  text-decoration-color: rgba(191, 0, 15, 0.7);
}

/* --- Desktop: ≥ 768px --- */
@media (min-width: 768px) {
  .footer-row {
    flex-direction: row;
    justify-content: center;
    gap: 5rem;
  }

  .footer-copyright {
    align-items: flex-start;
  }

  .footer-copy-line,
  .footer-rights-line {
    text-align: left;
  }

  .footer-contact {
    align-items: flex-start;
  }

  .footer-cta-line {
    text-align: left;
  }

  .footer-inner {
    padding: 3rem 1.5rem;
  }
}

/* --- Desktop grande: ≥ 1024px --- */
@media (min-width: 1024px) {
  .footer-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .footer-row {
    gap: 7rem;
  }
}

/* --- Tema claro --- */
[data-theme="light"] .footer-section {
  border-top-color: var(--color-zinc-200);
}

[data-theme="light"] .footer-wa-link {
  color: var(--color-red-600);
}

[data-theme="light"] .footer-wa-link:hover {
  color: var(--color-red-700);
}

[data-theme="light"] .footer-brand {
  color: var(--color-red-600);
}

[data-theme="light"] .footer-wa-number {
  text-decoration-color: rgba(228, 0, 20, 0.3);
}

[data-theme="light"] .footer-wa-link:hover .footer-wa-number {
  text-decoration-color: rgba(228, 0, 20, 0.7);
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .footer-wa-link,
  .footer-wa-link svg,
  .footer-wa-number {
    transition: none;
  }
  .footer-wa-link:hover svg {
    transform: none;
  }
}

/* ============================================
   MODAL ADMIN - Responsive (290px → ∞)
   ============================================ */

/* --- Overlay --- */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.admin-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Modal panel --- */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.admin-modal.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Container (card) --- */
.admin-modal__container {
  position: relative;
  width: 100%;
  max-width: min(90vw, 420px);
  max-height: 90dvh;
  background: var(--color-zinc-900);
  border: 1px solid var(--color-zinc-800);
  border-radius: 2rem;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-modal.open .admin-modal__container {
  transform: scale(1) translateY(0);
}

/* --- Close button --- */
.admin-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 12px;
  color: var(--color-zinc-500);
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 2;
}

.admin-modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-zinc-100);
}

.admin-modal__close:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Views --- */
.admin-modal__view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.admin-modal__view--hidden {
  display: none;
}

/* --- Icon --- */
.admin-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 14vw, 72px);
  height: clamp(56px, 14vw, 72px);
  border-radius: 50%;
  background: rgba(191, 0, 15, 0.12);
  color: var(--color-red-700);
  flex-shrink: 0;
}

.admin-modal__icon svg {
  width: clamp(28px, 7vw, 40px);
  height: clamp(28px, 7vw, 40px);
}

/* --- Typography --- */
.admin-modal__title {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-zinc-100);
  text-align: center;
  line-height: 1.2;
}

.admin-modal__subtitle {
  font-size: clamp(0.75rem, 2.5vw, 0.875rem);
  color: var(--color-zinc-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 0.25rem;
}

/* --- Form --- */
.admin-modal__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.admin-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-modal__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-zinc-400);
  padding-left: 0.25rem;
}

.admin-modal__input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--color-zinc-800);
  border: 1px solid transparent;
  border-radius: 1rem;
  color: var(--color-zinc-100);
  font-size: 1rem !important;
  outline: none;
  transition: all 0.25s ease;
}

.admin-modal__input::placeholder {
  color: var(--color-zinc-600);
}

.admin-modal__input:focus {
  border-color: var(--color-red-700);
  box-shadow: 0 0 0 3px rgba(191, 0, 15, 0.15);
  background: var(--color-zinc-800);
}

.admin-modal__input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* --- Submit button --- */
.admin-modal__btn {
  position: relative;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--color-red-700);
  border: none;
  border-radius: 1rem;
  color: #fff;
  font-weight: 900;
  font-size: clamp(0.875rem, 3vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.admin-modal__btn:hover:not(:disabled) {
  background: var(--color-red-600);
  transform: scale(1.02);
}

.admin-modal__btn:active:not(:disabled) {
  transform: scale(0.98);
}

.admin-modal__btn:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

.admin-modal__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- Button spinner (loading state) --- */
.admin-modal__btn--loading .admin-modal__btn-text {
  opacity: 0;
}

.admin-modal__btn--loading .admin-modal__btn-spinner {
  opacity: 1;
}

.admin-modal__btn-text {
  transition: opacity 0.2s ease;
}

.admin-modal__btn-spinner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: adminSpinner 0.6s linear infinite;
}

/* --- Link button (recovery) --- */
.admin-modal__link {
  background: none;
  border: none;
  color: var(--color-zinc-500);
  font-size: clamp(0.7rem, 2.5vw, 0.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.5rem;
  min-height: 44px;
  transition: color 0.25s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.08);
}

.admin-modal__link:hover {
  color: var(--color-red-700);
  text-decoration-color: rgba(191, 0, 15, 0.4);
}

.admin-modal__link:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Error / Success messages --- */
.admin-modal__error {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
  text-align: center;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.admin-modal__success {
  font-size: 0.75rem;
  font-weight: 700;
  color: #22c55e;
  text-align: center;
  padding: 0.5rem;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 0.75rem;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

/* --- Light theme --- */
[data-theme="light"] .admin-modal__container {
  background: var(--color-zinc-50);
  border-color: var(--color-zinc-200);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .admin-modal__title {
  color: var(--color-zinc-900);
}

[data-theme="light"] .admin-modal__input {
  background: var(--color-zinc-100);
  color: var(--color-zinc-900);
}

[data-theme="light"] .admin-modal__input::placeholder {
  color: var(--color-zinc-400);
}

[data-theme="light"] .admin-modal__input:focus {
  border-color: var(--color-red-600);
  background: #fff;
}

[data-theme="light"] .admin-modal__label {
  color: var(--color-zinc-600);
}

[data-theme="light"] .admin-modal__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-zinc-800);
}

[data-theme="light"] .admin-modal__icon {
  background: rgba(228, 0, 20, 0.08);
}

[data-theme="light"] .admin-modal__link {
  color: var(--color-zinc-500);
  text-decoration-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .admin-modal__link:hover {
  color: var(--color-red-600);
  text-decoration-color: rgba(228, 0, 20, 0.3);
}

/* --- Responsive: 290px - 399px (móvil muy pequeño) --- */
@media (min-width: 290px) and (max-width: 24.99rem) {
  .admin-modal__container {
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 1.5rem;
  }
  .admin-modal__input {
    padding: 0.75rem;
    border-radius: 0.75rem;
  }
  .admin-modal__btn {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    min-height: 48px;
  }
  .admin-modal__close {
    top: 0.5rem;
    right: 0.5rem;
  }
  .admin-modal {
    padding: 0.5rem;
  }
  .admin-modal__form {
    gap: 0.5rem;
  }
  .admin-modal__view {
    gap: 0.5rem;
  }
}

/* --- Responsive: 400px - 639px --- */
@media (min-width: 25rem) and (max-width: 39.99rem) {
  .admin-modal__container {
    padding: 2rem 1.25rem 1.5rem;
  }
}

/* --- Responsive: 640px+ (tablet) --- */
@media (min-width: 640px) {
  .admin-modal__container {
    max-width: 440px;
    padding: 2.5rem 2rem 1.75rem;
    border-radius: 2.5rem;
  }
  .admin-modal__title {
    font-size: 1.5rem;
  }
}

/* --- Responsive: 1024px+ (desktop) --- */
@media (min-width: 1024px) {
  .admin-modal__container {
    max-width: 460px;
  }
  .admin-modal__input {
    padding: 1rem 1.25rem;
  }
  .admin-modal__btn {
    padding: 1rem;
    min-height: 56px;
  }
}

/* --- Responsive: 1536px+ (ultra-wide) --- */
@media (min-width: 1536px) {
  .admin-modal__container {
    max-width: 480px;
  }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .admin-modal-overlay,
  .admin-modal,
  .admin-modal__container,
  .admin-modal__close,
  .admin-modal__input,
  .admin-modal__btn,
  .admin-modal__link {
    transition: none !important;
  }
  .admin-modal__container {
    transform: none !important;
  }
  .admin-modal__btn-spinner {
    animation: none !important;
  }
  .admin-modal__btn:hover:not(:disabled) {
    transform: none !important;
  }
  .admin-modal__btn:active:not(:disabled) {
    transform: none !important;
  }
}

/* ============================================
   PANEL CMS ADMIN - Responsive (290px → ∞)
   ============================================ */

/* --- Overlay --- */
.admin-cms-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.admin-cms-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Panel --- */
.admin-cms {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.admin-cms.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Container --- */
.admin-cms__container {
  position: relative;
  width: 100%;
  max-width: min(94vw, 680px);
  max-height: 90dvh;
  background: var(--color-zinc-900);
  border: 1px solid var(--color-zinc-800);
  border-radius: 2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-cms.open .admin-cms__container {
  transform: scale(1) translateY(0);
}

/* --- Header --- */
.admin-cms__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-zinc-800);
  flex-shrink: 0;
}

.admin-cms__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-cms__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: rgba(191, 0, 15, 0.12);
  color: var(--color-red-700);
}

.admin-cms__header-icon svg {
  width: 22px;
  height: 22px;
}

.admin-cms__title {
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-zinc-100);
  line-height: 1.2;
}

.admin-cms__subtitle {
  font-size: clamp(0.6rem, 2vw, 0.7rem);
  color: var(--color-zinc-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.1rem;
}

.admin-cms__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 12px;
  color: var(--color-zinc-500);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.admin-cms__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-zinc-100);
}

.admin-cms__close:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Body (scrollable) --- */
.admin-cms__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Sections --- */
.admin-cms__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-cms__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-zinc-300);
}

.admin-cms__section-title svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* --- Count badge --- */
.admin-cms__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 900;
  border-radius: 999px;
  background: var(--color-red-700);
  color: #fff;
  margin-left: auto;
}

/* --- Form --- */
.admin-cms__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-cms__form-row {
  width: 100%;
}

.admin-cms__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-cms__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-zinc-400);
  padding-left: 0.25rem;
}

.admin-cms__input,
.admin-cms__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-zinc-800);
  border: 1px solid transparent;
  border-radius: 0.875rem;
  color: var(--color-zinc-100);
  font-size: 1rem !important;
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
}

.admin-cms__textarea {
  resize: vertical;
  min-height: 60px;
}

.admin-cms__input::placeholder,
.admin-cms__textarea::placeholder {
  color: var(--color-zinc-600);
}

.admin-cms__input:focus,
.admin-cms__textarea:focus {
  border-color: var(--color-red-700);
  box-shadow: 0 0 0 3px rgba(191, 0, 15, 0.15);
  background: var(--color-zinc-800);
}

.admin-cms__input.error,
.admin-cms__textarea.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* --- Form error --- */
.admin-cms__error {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ef4444;
  text-align: center;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* --- Form actions --- */
.admin-cms__form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- Buttons --- */
.admin-cms__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 0.875rem;
  font-weight: 700;
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 44px;
  white-space: nowrap;
}

.admin-cms__btn svg {
  flex-shrink: 0;
}

.admin-cms__btn--primary {
  background: var(--color-red-700);
  color: #fff;
}

.admin-cms__btn--primary:hover {
  background: var(--color-red-600);
  transform: scale(1.02);
}

.admin-cms__btn--primary:active {
  transform: scale(0.98);
}

.admin-cms__btn--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.admin-cms__btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.admin-cms__btn--small {
  padding: 0.4rem 0.75rem;
  min-height: 36px;
  font-size: 0.7rem;
  border-radius: 0.65rem;
}

.admin-cms__btn:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Empty state --- */
.admin-cms__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-zinc-500);
  border: 1px dashed var(--color-zinc-800);
  border-radius: 1.25rem;
}

.admin-cms__empty svg {
  opacity: 0.4;
}

.admin-cms__empty p {
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 280px;
  line-height: 1.5;
}

/* --- List (cards) --- */
.admin-cms__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Item card --- */
.admin-cms__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--color-zinc-800);
  border: 1px solid var(--color-zinc-700);
  border-radius: 1rem;
  transition: all 0.25s ease;
  position: relative;
}

.admin-cms__item:hover {
  border-color: var(--color-zinc-600);
}

.admin-cms__item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-cms__item-question {
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  font-weight: 700;
  color: var(--color-zinc-200);
  line-height: 1.4;
  flex: 1;
}

.admin-cms__item-answer {
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  color: var(--color-zinc-400);
  line-height: 1.6;
  padding-right: 0.25rem;
}

.admin-cms__item-answer::before {
  content: '→ ';
  color: var(--color-red-700);
  font-weight: 700;
}

.admin-cms__item-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--color-zinc-500);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.admin-cms__item-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.admin-cms__item-delete:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Footer --- */
.admin-cms__footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-zinc-800);
  flex-shrink: 0;
}

.admin-cms__footer-text {
  font-size: 0.6rem;
  color: var(--color-zinc-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

/* --- Light theme --- */
[data-theme="light"] .admin-cms__container {
  background: var(--color-zinc-50);
  border-color: var(--color-zinc-200);
}

[data-theme="light"] .admin-cms__header {
  border-bottom-color: var(--color-zinc-200);
}

[data-theme="light"] .admin-cms__title {
  color: var(--color-zinc-900);
}

[data-theme="light"] .admin-cms__input,
[data-theme="light"] .admin-cms__textarea {
  background: var(--color-zinc-100);
  color: var(--color-zinc-900);
}

[data-theme="light"] .admin-cms__input::placeholder,
[data-theme="light"] .admin-cms__textarea::placeholder {
  color: var(--color-zinc-400);
}

[data-theme="light"] .admin-cms__input:focus,
[data-theme="light"] .admin-cms__textarea:focus {
  background: #fff;
  border-color: var(--color-red-600);
}

[data-theme="light"] .admin-cms__section-title {
  color: var(--color-zinc-700);
}

[data-theme="light"] .admin-cms__label {
  color: var(--color-zinc-600);
}

[data-theme="light"] .admin-cms__empty {
  border-color: var(--color-zinc-200);
  color: var(--color-zinc-400);
}

[data-theme="light"] .admin-cms__item {
  background: var(--color-zinc-100);
  border-color: var(--color-zinc-200);
}

[data-theme="light"] .admin-cms__item:hover {
  border-color: var(--color-zinc-300);
}

[data-theme="light"] .admin-cms__item-question {
  color: var(--color-zinc-800);
}

[data-theme="light"] .admin-cms__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-zinc-800);
}

[data-theme="light"] .admin-cms__footer {
  border-top-color: var(--color-zinc-200);
}

/* --- Responsive CMS: 290px - 399px --- */
@media (min-width: 290px) and (max-width: 24.99rem) {
  .admin-cms {
    padding: 0.5rem;
  }
  .admin-cms__container {
    border-radius: 1.25rem;
  }
  .admin-cms__header {
    padding: 0.75rem 1rem;
  }
  .admin-cms__body {
    padding: 1rem;
    gap: 1rem;
  }
  .admin-cms__input,
  .admin-cms__textarea {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
  }
  .admin-cms__item {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
  }
  .admin-cms__footer {
    padding: 0.5rem 1rem;
  }
}

/* --- Responsive CMS: 640px+ --- */
@media (min-width: 640px) {
  .admin-cms__container {
    max-width: 720px;
    border-radius: 2.5rem;
  }
  .admin-cms__header {
    padding: 1.5rem 2rem;
  }
  .admin-cms__body {
    padding: 2rem;
    gap: 2rem;
  }
  .admin-cms__form-row {
    max-width: 100%;
  }
}

/* --- Responsive CMS: 1024px+ --- */
@media (min-width: 1024px) {
  .admin-cms__container {
    max-width: 780px;
  }
}

/* ============================================
   CHAT ASISTENTE VIRTUAL - Responsive
   ============================================ */

/* --- Overlay --- */
.assistant-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.assistant-chat-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Chat panel --- */
.assistant-chat {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 310;
  width: 100%;
  max-width: min(100vw, 420px);
  height: 70dvh;
  max-height: 600px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(20px) scale(0.97);
  padding: 0;
}

.assistant-chat.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* --- Container --- */
.assistant-chat__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-zinc-900);
  border: 1px solid var(--color-zinc-800);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 0 0.75rem;
}

/* --- Header --- */
.assistant-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-zinc-800);
  flex-shrink: 0;
  background: var(--color-zinc-900);
}

.assistant-chat__header-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.assistant-chat__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(191, 0, 15, 0.15);
  color: var(--color-red-700);
}

.assistant-chat__avatar svg {
  width: 18px;
  height: 18px;
}

.assistant-chat__title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-zinc-100);
  line-height: 1.2;
}

.assistant-chat__status {
  font-size: 0.6rem;
  font-weight: 700;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.assistant-chat__status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 0.3rem;
  vertical-align: middle;
  animation: chatPulse 2s ease-in-out infinite;
}

.assistant-chat__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--color-zinc-500);
  cursor: pointer;
  transition: all 0.25s ease;
}

.assistant-chat__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-zinc-100);
}

.assistant-chat__close:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Messages area --- */
.assistant-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Chat bubbles --- */
.chat-bubble {
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  animation: chatBubbleIn 0.3s ease both;
  word-wrap: break-word;
}

/* --- WhatsApp link dentro del chat --- */
.chat-wa-link {
  color: #25D366;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(37, 211, 102, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
}

.chat-wa-link:hover {
  color: #22c55e;
  text-decoration-color: rgba(34, 197, 94, 0.7);
}

.chat-wa-link:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto del mensaje para separación */
.chat-bubble__text {
  display: block;
  line-height: 1.6;
}

.chat-bubble--bot {
  align-self: flex-start;
  background: var(--color-zinc-800);
  color: var(--color-zinc-200);
  border-bottom-left-radius: 0.25rem;
}

.chat-bubble--user {
  align-self: flex-end;
  background: var(--color-red-700);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.chat-bubble--typing {
  align-self: flex-start;
  background: var(--color-zinc-800);
  padding: 0.8rem 1.2rem;
  border-bottom-left-radius: 0.25rem;
}

.chat-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chat-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-zinc-500);
  animation: chatTyping 1.4s ease-in-out infinite;
}

.chat-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* --- Timestamp --- */
.chat-bubble__time {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 0.25rem;
  opacity: 0.5;
}

/* --- Input area --- */
.assistant-chat__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-zinc-800);
  flex-shrink: 0;
  background: var(--color-zinc-900);
}

.assistant-chat__input {
  flex: 1;
  padding: 0.65rem 1rem;
  background: var(--color-zinc-800);
  border: 1px solid transparent;
  border-radius: 1.5rem;
  color: var(--color-zinc-100);
  font-size: 0.9rem !important;
  outline: none;
  transition: all 0.25s ease;
  min-height: 40px;
}

.assistant-chat__input::placeholder {
  color: var(--color-zinc-500);
}

.assistant-chat__input:focus {
  border-color: var(--color-red-700);
  box-shadow: 0 0 0 3px rgba(191, 0, 15, 0.12);
}

.assistant-chat__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-red-700);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}

.assistant-chat__send:hover {
  background: var(--color-red-600);
  transform: scale(1.05);
}

.assistant-chat__send:active {
  transform: scale(0.95);
}

.assistant-chat__send:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

/* --- Light theme chat --- */
[data-theme="light"] .assistant-chat__container {
  background: var(--color-zinc-50);
  border-color: var(--color-zinc-200);
}

[data-theme="light"] .assistant-chat__header {
  background: var(--color-zinc-50);
  border-bottom-color: var(--color-zinc-200);
}

[data-theme="light"] .assistant-chat__title {
  color: var(--color-zinc-900);
}

[data-theme="light"] .chat-bubble--bot {
  background: var(--color-zinc-100);
  color: var(--color-zinc-800);
}

[data-theme="light"] .assistant-chat__input {
  background: var(--color-zinc-100);
  color: var(--color-zinc-900);
}

[data-theme="light"] .assistant-chat__form {
  background: var(--color-zinc-50);
  border-top-color: var(--color-zinc-200);
}

[data-theme="light"] .assistant-chat__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-zinc-800);
}

[data-theme="light"] .chat-wa-link {
  color: #1da84d;
}

/* --- Chat responsive: 290px - 399px --- */
@media (min-width: 290px) and (max-width: 24.99rem) {
  .assistant-chat {
    height: 80dvh;
    max-height: none;
  }
  .assistant-chat__container {
    margin: 0 0.25rem;
    border-radius: 1rem 1rem 0 0;
  }
  .assistant-chat__messages {
    padding: 0.75rem;
  }
  .chat-bubble {
    max-width: 90%;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
  }
  .assistant-chat__form {
    padding: 0.5rem 0.75rem;
  }
}

/* --- Chat responsive: 640px+ --- */
@media (min-width: 640px) {
  .assistant-chat {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 380px;
    height: 560px;
    max-height: 70dvh;
    border-radius: 1.5rem;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.35);
  }
  .assistant-chat__container {
    border-radius: 1.5rem;
    margin: 0;
  }
}

/* --- Chat responsive: 1024px+ --- */
@media (min-width: 1024px) {
  .assistant-chat {
    width: 400px;
    height: 580px;
  }
}

/* --- prefers-reduced-motion para chat --- */
@media (prefers-reduced-motion: reduce) {
  .assistant-chat,
  .assistant-chat-overlay,
  .admin-cms,
  .admin-cms-overlay,
  .admin-cms__container,
  .admin-cms__item,
  .admin-cms__btn,
  .assistant-chat__container,
  .assistant-chat__send,
  .chat-bubble {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .assistant-chat__status::before {
    animation: none !important;
  }
  .chat-typing-dots span {
    animation: none !important;
  }
}

/* --- Keyframes --- */
@keyframes bounce {
  0%,
  to {
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    transform: translateY(-25%);
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: none;
  }
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes adminSpinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes chatBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chatTyping {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes chatPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}