/* Wood Forge - Estilos custom para efectos Over J */

/* Contenido editable: preservar saltos de línea y espacios */
[data-content-key] {
  white-space: pre-wrap;
}

/* Elementos deshabilitados: cursor normal y sin efectos hover (pointer-events evita que se dispare hover) */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[disabled] {
  cursor: default !important;
  pointer-events: none !important;
}

/* Diferenciación por capacidad táctil: (pointer: coarse) = touch, (pointer: fine) = mouse/trackpad */

/* Dispositivos táctiles: menú hamburguesa, sin efectos hover, padding amplio */
@media (pointer: coarse) {
  section:not(.hero) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .max-w-7xl, .max-w-6xl, .max-w-5xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Ocultar nav links, mostrar hamburguesa */
  .header-nav-links,
  ul.header-nav-links.md\:flex {
    display: none !important;
  }
  #mobile-menu-btn {
    display: flex !important;
  }
  #mobile-menu {
    display: block !important;
  }

  /* Desactivar efectos hover en touch */
  .industria-card img, 
  .caso-card img,
  .intro-image-group *,
  .main-image,
  .main-image-container,
  .stat-item {
    transform: none !important;
    transition: none !important;
  }
  .industria-card:hover img,
  .caso-card:hover img,
  .intro-image-group:hover * {
    transform: none !important;
  }
  .intro-image-group:hover .deco-circle {
    opacity: 0.6 !important;
  }
  .nav-link:hover, 
  .nav-link-active:hover,
  .header-actions button:not(.theme-btn-active):hover,
  .footer a:hover,
  .footer button:hover {
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
  }
  .bg-timber-500:hover, 
  .bg-timber-800:hover,
  #accessibility-btn:hover {
    background-color: inherit !important;
    color: inherit !important;
  }
  [class*="hover:"]:hover,
  .group:hover [class*="group-hover:"],
  .group:hover [class*="group-hover\/"] {
    transform: none !important;
    transition: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
  }
  .stat-item:hover {
    transform: none !important;
    transition: none !important;
  }
  .group:hover .absolute.border-2 {
    top: -1.5rem !important;
    left: -1.5rem !important;
    transform: none !important;
    scale: 1 !important;
  }
  .group:hover .absolute.border-8 {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    scale: 1 !important;
  }
  .group:hover .relative.z-10,
  .group:hover .overflow-hidden,
  .group:hover img,
  .industria-card:hover img,
  .caso-card:hover img {
    transform: none !important;
    scale: 1 !important;
    top: 0 !important;
    left: 0 !important;
  }
  [class*="group-hover\/stat"] {
    transform: none !important;
    scale: 1 !important;
  }
}

/* Dispositivos con puntero preciso (mouse/trackpad): nav links visibles, hamburguesa oculto */
@media (pointer: fine) {
  .header-nav-links {
    display: flex !important;
  }
  #mobile-menu-btn,
  #mobile-menu {
    display: none !important;
  }
}

/* Blogs: layout desktop vs acordeón según dispositivo */
@media (pointer: fine) {
  #blogs-desktop-layout { display: grid !important; }
  #blogs-accordion-layout { display: none !important; }
}
@media (pointer: coarse) {
  #blogs-desktop-layout { display: none !important; }
  #blogs-accordion-layout { display: block !important; }
}

@media (max-width: 767px) {
  .px-6 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Evitar layout shift when scrollbar disappears (solo desktop ancho: en móvil los scrollbars son overlay y el gutter desplaza el contenido) */
html {
  scrollbar-gutter: stable;
}
@media (pointer: coarse), (max-width: 767px) {
  html {
    scrollbar-gutter: auto !important;
  }
}

/* Permitir scroll nativo y overlay del menú hamburguesa en dispositivos táctiles */
@media (pointer: coarse) {
  html:not(.menu-open) {
    overflow-y: auto !important;
    height: auto !important;
  }
  body:not(.menu-open) {
    overflow-y: auto !important;
    min-height: 100% !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html.menu-open, body.menu-open {
    overflow: hidden !important;
  }

  /* Overlay para oscurecer y desenfocar el fondo cuando el menú móvil está abierto */
  body.menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 40;
    animation: menu-overlay-fade 0.4s ease forwards;
    pointer-events: auto;
  }

  .menu-open main, 
  .menu-open footer {
    filter: blur(4px);
    transition: filter 0.4s ease;
  }

  @keyframes menu-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

html.loading, body.loading {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ===== Logo en Negro (Modo Claro) ===== */
.logo-img {
  filter: brightness(0); /* Convierte el logo a negro puro */
  transition: all 0.3s ease;
}

.dark .logo-img {
  filter: none; /* Recupera su color original en modo oscuro */
}

/* En la Home, cuando está arriba sobre el Hero oscuro, el logo de la navbar se ve normal */
.home-page .header:not(.scrolled) .logo-img {
  filter: none !important;
}

/* El Hero actúa como contenedor, solo el fondo se desliza */
.hero {
  position: relative;
  z-index: 10;
  background-color: transparent; /* Dejar ver el logo al inicio */
  min-height: 100vh;
  min-height: 100dvh; /* Altura dinámica para móviles */
  width: 100%;
  transform: none !important; /* El contenedor no se mueve */
  margin: 0;
  padding: 0;
}

/* Tablet y móvil: usar svh para que el marquee sea visible en la primera carga (por encima de la barra del navegador) */
@media (max-width: 1024px) {
  .hero {
    min-height: 100svh !important;
  }
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fcf8f4; /* Fondo sólido que baja con la cortina */
  z-index: 5; /* Por encima del preloader (z-1) para el efecto cortina */
  will-change: transform;
}

.home-page .hero-bg {
  transform: translateY(-100%); /* Solo en la Home empieza arriba */
}

.dark .hero-bg {
  background-color: #161616;
}

.home-page .hero-content {
  opacity: 0; /* Invisible hasta que el fondo baje */
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
}

/* Capa de oscurecimiento del Hero */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0.6), rgba(22, 22, 22, 0.4), rgba(22, 22, 22, 0.8));
  transition: background 0.5s ease;
}

.dark .hero-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}

/* El navbar se mantiene oculto inicialmente solo en Home para evitar el flash de contenido */
.header {
  z-index: 50 !important;
  height: 70px !important; /* Altura compacta por defecto (móvil) */
  display: flex !important;
  align-items: center !important;
  transition: background-color 0.3s ease, height 0.3s ease;
}

@media (min-width: 768px) {
  .header {
    height: 80px !important; /* Altura estándar en desktop */
  }
}

/* En tamaños de letra grandes, permitimos un poco más de altura pero con un límite estricto */
html[data-font-size="3"] .header {
  height: 95px !important;
}

.header nav {
  height: 100% !important;
  align-items: center !important;
}

/* Forzar que los links y botones se mantengan en el eje central */
.header-nav-links,
.header-actions,
.header-logo-container {
  display: flex !important;
  align-items: center !important;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 1200px;
  max-width: 90%;
  height: 100%;
  z-index: -1;
  background: #fcf8f4; /* timber-50 */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.dark .header::before {
  background: #161616; /* iron-900 */
}

/* La sombra solo aparece cuando se activa la clase .scrolled (al empezar el scroll) */
.header.scrolled::before {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.dark .header.scrolled::before {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}

/* Solo en la Home ocultamos el fondo inicialmente */
.home-page .header:not(.scrolled)::before {
  transform: translateX(-50%) translateY(-100%);
}

.home-page .header {
  opacity: 0;
}

/* El preloader solo es visible en el index o en páginas internas mientras carga */
.preloader {
  display: none;
}

/* El preloader solo es visible en el index */
.preloader {
  display: none;
}

.home-page .preloader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcf8f4;
  z-index: 1; /* Bajo el hero (z-10) para que el fondo deslice sobre él */
}

.dark .home-page .preloader {
  background-color: #161616;
}

/* Bloqueo de scroll */
body.loading {
  overflow: hidden !important;
  height: 100vh;
}

/* ===== Smooth scroll (Lenis) ===== */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ===== Marquee infinito ===== */
.marquee-section {
  width: 100%;
}

@media (max-width: 1024px) {
  .marquee-section {
    padding: 4rem 0 !important; /* El doble de altura para tablet */
  }
}

@media (max-width: 767px) {
  .marquee-section {
    padding: 2rem 0 !important; /* El doble de altura para móvil (era 1rem) */
  }
  .marquee-content span {
    font-size: 1rem !important; /* Texto más pequeño en móvil */
  }
}

.marquee-track {
  animation: marquee 40s linear infinite; /* Un poco más lento para mejor lectura */
  width: max-content;
}
.marquee-content {
  padding-right: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.marquee-content span {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); } /* Movemos solo un bloque de los 4 */
}

/* ===== Reveal items (GSAP ScrollTrigger) ===== */
/* Estado inicial oculto para evitar el flash de contenido antes de la animación */
.reveal-item, .industria-card, .caso-card {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* ===== Parallax en hero ===== */
.parallax-layer {
  will-change: transform;
}

/* El nav gestiona el centrado dinámico mediante spacers */
.header nav {
  width: 1200px;
  max-width: 90%; /* Igualamos al ancho del fondo (::before) */
  padding: 0 2rem; /* Eliminamos padding vertical, dejamos solo horizontal */
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .header nav {
    max-width: 92% !important; /* Más margen a los lados */
    padding: 0 1.5rem !important; /* Eliminamos padding vertical en móvil */
  }
}

/* Contenedores laterales con ancho equilibrado para centrado perfecto del menú */
.header-logo-container {
  width: 180px; /* Ajustado para dar espacio al logo y botones */
  flex-shrink: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-actions {
  width: 180px; /* Mismo ancho que el logo para equilibrio visual */
  display: flex;
  align-items: center !important; /* Centrado vertical absoluto */
  justify-content: flex-end;
  flex-shrink: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  .header-logo-container, .header-actions {
    width: auto !important;
  }
  .header-actions {
    margin-left: auto !important; /* Asegurar que se pegue a la derecha */
    gap: 0.5rem !important;
  }
}

/* Home Page - Arriba: El logo desaparece y el contenedor mantiene el equilibrio */
.home-page .header:not(.scrolled) .header-logo-container {
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
}
/* Deslizamiento del logo al aparecer (solo por scroll, no por cambio de tamaño de letra) */
.home-page .header:not(.header-no-transition) .header-logo-container {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-page .header.header-no-transition .header-logo-container {
  transition: none !important;
}

/* En touch: logo y hamburguesa hacen fade al hacer scroll (Home) */
@media (pointer: coarse) {
  .home-page .header:not(.scrolled) #mobile-menu-btn,
  .home-page .header:not(.scrolled) .header-logo-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* El espaciador derecho crece inicialmente para centrar el menú en desktop */
.header-spacer-right {
  flex-grow: 1;
}

/* Cuando hay scroll o en páginas internas, el logo aparece y el spacer derecho se encoge */
.header.scrolled .header-logo-container,
body:not(.home-page) .header .header-logo-container {
  opacity: 1;
  visibility: visible;
  transform: none; /* Aseguramos que no haya movimiento */
}

/* Puntero preciso + pantalla grande: links se mueven a la derecha al hacer scroll */
@media (pointer: fine) and (min-width: 1025px) {
  .header.scrolled .header-spacer-right,
  body:not(.home-page) .header .header-spacer-right {
    flex-grow: 0;
  }
}

.header-nav-links {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

/* Puntero preciso en tablet (768-1024px): menú centrado */
@media (pointer: fine) and (min-width: 768px) and (max-width: 1024px) {
  .header nav {
    max-width: 92% !important;
    padding: 0 2rem !important;
  }
  .header-nav-links {
    gap: 1.5rem !important;
  }
  .header-logo-container, .header-actions {
    width: 140px !important;
  }
  /* Forzamos que los espaciadores sean iguales para mantener el centro siempre */
  .header-spacer-left, .header-spacer-right {
    flex-grow: 1 !important;
  }
}

/* Botones con borde constante para evitar saltos y destellos */
#accessibility-btn {
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  /* Tamaño fijo para evitar que crezcan con el tamaño de letra */
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* En el index, sobre el fondo oscuro, aplicamos el borde sutil desde el inicio */
.home-page .header:not(.scrolled) #accessibility-btn {
  background-color: rgba(150, 150, 150, 0.2); /* Gris claro translúcido */
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark .home-page .header:not(.scrolled) #accessibility-btn {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Cuando hay scroll, el borde se vuelve invisible o cambia suavemente según el modo */
.header.scrolled #accessibility-btn {
  border-color: transparent;
}

.dark .header.scrolled #accessibility-btn {
  border-color: rgba(255, 255, 255, 0.05);
}

.home-page .header:not(.scrolled) #accessibility-btn:hover {
  background-color: rgba(66, 66, 66, 0.7);
}

/* En el index, deslizamiento de los links del navbar SOLO cuando el cambio es por scroll (no por tamaño de letra) */
.home-page .header:not(.header-no-transition) .header-spacer-right {
  transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-page .header.header-no-transition .header-spacer-right {
  transition: none !important;
}

/* Texto blanco cuando está sobre el Hero (sin scroll) en la Home */
/* Solo aplica si no tiene la clase .scrolled y estamos en tema claro */
.home-page .header:not(.scrolled) .nav-link,
.home-page .header:not(.scrolled) .nav-link-active {
  color: rgba(255, 255, 255, 0.8) !important;
}
.home-page .header:not(.scrolled) .nav-link:hover,
.home-page .header:not(.scrolled) .nav-link-active:hover {
  color: #fff !important;
}
.home-page .header:not(.scrolled) .nav-link-active {
  color: #fff !important;
}
.home-page .header:not(.scrolled) .font-display {
  color: #fff !important;
}

/* En modo oscuro, el texto siempre es claro, así que mantenemos consistencia */
.dark .header:not(.scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

/* Cuando se activa el scroll, volvemos a los colores oscuros (en tema claro) */
.header.scrolled .nav-link {
  color: rgb(83 67 45); /* timber-700 */
}
.header.scrolled .font-display {
  color: rgb(56 45 30); /* timber-800 */
}
.dark .header.scrolled .nav-link {
  color: rgb(197 177 154); /* timber-300 */
}
.dark .header.scrolled .font-display {
  color: rgb(217 204 188); /* timber-200 */
}

/* ===== Variables para paleta Wood Forge ===== */
:root {
  --timber-50: #fcf8f4;
  --timber-500: #E8B880;
  --timber-800: #5d4933;
  --forge-500: #B0B0B0;
  --forge-700: #6a6a6a;
  --font-primary: 'Sansation', sans-serif;
  --font-secondary: 'Sansation', sans-serif;
}
.dark {
  --timber-50: #2C2C2C; /* iron-800 para fondo oscuro real */
  --timber-500: #E8B880;
  --timber-800: #f9f1e9;
}

/* ===== Jerarquía de Tipografía (Opción A) ===== */
body {
  font-family: var(--font-secondary);
  font-weight: 400;
  line-height: 1.6;
}

main, footer {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

h1, h2, .font-display {
  font-family: var(--font-primary) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3, h4, .font-semibold {
  font-family: var(--font-primary) !important;
  font-weight: 700;
}

/* Regla de Oro: Interfaz y Navegación */
nav, 
.nav-link, 
.nav-link-active,
button, 
.btn, 
input, 
label, 
select, 
textarea, 
footer,
#footer-copyright,
footer p,
.marquee-content span {
  font-family: var(--font-primary) !important;
  text-align: center;
}

.nav-link-active {
  font-weight: 700 !important;
  font-size: 1.05rem !important; /* Aproximadamente 1pt más que el estándar 1rem */
  border: none !important;
  text-decoration: none !important;
  padding-bottom: 0 !important;
}

button, .btn {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* uppercase ligero */
}

p, li, span:not(.marquee-content span) {
  font-family: var(--font-secondary);
  line-height: 1.6;
}

/* Forzar que los span dentro de títulos hereden Sansation */
h1 span, h2 span, h3 span, h4 span {
  font-family: inherit !important;
}

/* Estilos para errores de formulario (reserva de espacio) */
.error-message {
  min-height: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.error-message.active {
  opacity: 1;
  visibility: visible;
}

/* Estilos para inputs y placeholders */
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

/* Evitar que el autocompletado cambie los colores de fondo y texto */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #161616 !important; /* Color iron-900 para modo claro */
  box-shadow: 0 0 0px 1000px #fcf8f4 inset !important; /* Fondo timber-50 forzado */
  transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill,
.dark textarea:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important; /* Blanco para modo oscuro */
  box-shadow: 0 0 0px 1000px #161616 inset !important; /* Fondo iron-900 forzado */
}

input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  /* Mantener los mismos estilos en hover/focus */
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== Efecto Hover Imagen Intro (Círculo, Cuadrado e Imagen) ===== */
.intro-image-group .deco-circle, .intro-image-group .deco-square {
  transform-origin: center !important; /* Asegurar que el crecimiento sea desde el centro */
}

.intro-image-group:hover .deco-circle {
  transform: scale(1.3); /* El círculo crece desde su centro */
  opacity: 0.8;
}

.intro-image-group:hover .deco-square {
  transform: scale(1.15); /* El cuadro crece desde su centro */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.intro-image-group:hover .main-image-container {
  transform: scale(0.95); /* La imagen se contrae un 5% */
}

.intro-image-group:hover .main-image {
  transform: scale(1.1); /* Un ligero zoom interno para que la imagen no se vea estática */
}

/* ===== Efecto Hover Estadísticas (Servicios) ===== */
.stat-item:hover {
  transform: scale(1.15); /* Agrandamos los números y el texto al pasar el ratón */
}

/* ===== Fondo sutil para el logo en modo claro ===== */
.logo-wrapper {
  background-color: rgba(0, 0, 0, 0.05); /* Oscuro transparente casi imperceptible */
  padding: 6px 12px;
  border-radius: 12px; /* Esquinas redondeadas */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dark .logo-wrapper {
  background-color: transparent; /* Desaparece en modo oscuro */
}

/* ===== Sistema de Accesibilidad ===== */
#accessibility-wrapper {
  z-index: 60;
}

html[data-font-size="1"] { font-size: 16px; }
html[data-font-size="2"] { font-size: 18px; }
html[data-font-size="3"] { font-size: 20px; }

/*
 * Bajo el breakpoint lg (< 1024px):
 *  - Grids lg:grid-cols-2 pierden su template y quedan con auto-sizing. Forzamos 1fr.
 *  - Hero flex con items-center posiciona asimétricamente el div interno cuando es más ancho
 *    que el área de contenido (Android zoom máximo). stretch lo fuerza a llenar el ancho.
 *  - Móvil + nivel 3 web: títulos, subtítulos y hero (ver applyMobileMaxFsTitleCap en main.js, 18/20).
 */
@media (max-width: 1023px) {
  main section > .grid,
  footer > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main section > .grid > *,
  footer > .grid > * {
    min-width: 0 !important;
  }
  main section.hero > div {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  main h1, main h2, main h3,
  footer h1, footer h2, footer h3 {
    max-width: 100%;
  }
}

/* Excluir elementos que no deben escalar o que deben escalar diferente */
[data-font-size] .logo-img {
  width: auto !important;
}

#accessibility-menu {
  font-family: 'Sansation', sans-serif !important;
  transform-origin: top right;
  /* Estado inicial (cerrado) */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  display: block !important; /* Siempre en el DOM para la animación */
}

#accessibility-menu.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

#accessibility-menu.accessibility-fading {
  opacity: 0.7 !important;
  transition: opacity 0.5s ease;
}

@keyframes menu-appear {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Custom Range Slider */
#font-size-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 5px;
  outline: none;
}

.dark #font-size-slider {
  background: #374151;
}

#font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #6a6a6a;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

#font-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

#font-size-down, #font-size-up {
  cursor: pointer;
  user-select: none;
}

.dark #font-size-slider::-webkit-slider-thumb {
  background: #B0B0B0;
  border-color: #2C2C2C;
}

/* Botones de tema activos */
.theme-btn-active {
  background-color: #E8B880 !important;
  color: #2f251a !important;
  border-color: #E8B880 !important;
}

/* Evitar parpadeos al cambiar de tema */
.no-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

  /* Accesibilidad y menú hamburguesa en dispositivos táctiles */
  @media (pointer: coarse) {
    #accessibility-wrapper {
      position: fixed !important;
      bottom: 30px !important;
      right: 20px !important;
      z-index: 10000 !important;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
    }

    body:not(.home-page) #accessibility-wrapper,
    body:not(.loading) #accessibility-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    #accessibility-btn {
      width: 56px !important;
      height: 56px !important;
      border-radius: 50% !important;
      background-color: #E8B880 !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
      border: none !important;
      opacity: 0.7 !important;
    }

    .dark #accessibility-btn {
      background-color: #E8B880 !important;
      opacity: 0.7 !important;
    }

    #accessibility-btn svg {
      width: 28px !important;
      height: 28px !important;
      color: #2f251a !important;
    }

    #accessibility-menu {
      bottom: 70px !important;
      top: auto !important;
      right: 0 !important;
      width: 280px !important;
      transform-origin: bottom right !important;
      transform: scale(0.95) translateY(10px);
    }

    #accessibility-menu.active {
      transform: scale(1) translateY(0) !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #accessibility-menu.active.accessibility-fading {
      opacity: 0.7 !important;
    }

    .dark #accessibility-menu {
      background-color: #161616 !important;
      border-color: #424242 !important;
    }

    /* Animación del menú móvil (deslizar desde arriba) */
    #mobile-menu {
      display: block !important;
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.5s;
      z-index: -2;
    }

    #mobile-menu.menu-active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

/* Efecto shimmer/shine mientras cargan las imágenes de PocketBase */
@keyframes pb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

img[data-pb-src] {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: pb-shimmer 1.5s ease-in-out infinite;
}

img[data-pb-src].pb-loaded {
  animation: none;
  background: none;
}

/* Switch Esp/Eng oculto temporalmente (bloque Idioma del menú de accesibilidad) */
#accessibility-menu .flex.flex-col.gap-6 > div:has(#lang-es-btn) {
  display: none !important;
}