/* ============================================
   ORLANDI S.A. V3 — Custom CSS
   Dark/Light mode, micro-interactions, parallax
   ============================================ */

/* ===== THEME TRANSITION ===== */
html { scroll-behavior: smooth; overflow-x: clip; }
html.transitioning, html.transitioning *, html.transitioning *::before, html.transitioning *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* ===== PREVENT FLASH ON LOAD ===== */
[data-cloak] { display: none !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D6D3CD; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #A8A29E; }
.dark ::-webkit-scrollbar-thumb { background: #44403C; }
.dark ::-webkit-scrollbar-thumb:hover { background: #57534E; }

/* ===== FONT STACKS ===== */
body { font-family: 'Manrope', sans-serif; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Urbanist', sans-serif; }

/* ===== PAGE TRANSITION ===== */
body {
  transition: opacity 0.35s ease;
}
body.loading {
  opacity: 0 !important;
  pointer-events: none;
}

/* ===== HERO SLIDER ===== */
.hero-slide .hero-content { z-index: 2; }
.hero-slide .hero-content h1 {
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ===== SWIPER PAGINATION ===== */
.swiper-pagination-bullet { background: rgba(255,255,255,0.4) !important; opacity: 1 !important; width: 8px !important; height: 8px !important; transition: all 0.3s ease !important; }
.swiper-pagination-bullet-active { background: #F26522 !important; width: 32px !important; border-radius: 9999px !important; }

/* ===== NOISE OVERLAY ===== */
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ===== BRAND CAROUSEL ===== */
.brand-logo { filter: grayscale(1); opacity: 0.4; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.brand-logo:hover { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

/* ===== PRODUCT CARD MICRO-INTERACTIONS ===== */
.product-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(242, 101, 34, 0.1), 0 8px 16px -8px rgba(0,0,0,0.08);
}

/* ===== CATEGORY CARD PARALLAX ===== */
.category-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.category-card:hover { transform: scale(1.02); }
.category-card img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.category-card:hover img { transform: scale(1.12); opacity: 0.5 !important; }
.category-card .cat-content {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card:hover .cat-content { transform: translateY(-4px); }

/* ===== CINEMATIC CATEGORY CARDS ===== */
.cat-cinema-card {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.cat-cinema-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(242, 101, 34, 0.2), 0 0 0 1px rgba(242, 101, 34, 0.08);
}
.categories-swiper { overflow: visible !important; }
.categories-swiper .swiper-wrapper { align-items: stretch; }

/* ===== SLIDE-IN MENU PANEL ===== */
.menu-panel, .menu-subpanel {
  will-change: transform;
}
/* Subpanel de subcategorías.
   Mobile: overlay a pantalla completa, por encima del panel principal (z-10).
   Desktop: columna lateral a la derecha del panel, por debajo de él para que,
   cuando está oculto (translate-x-full) y se solapa con las categorías, el panel
   lo tape y no intercepte el hover (evita el parpadeo abrir/cerrar). */
@media (max-width: 1023px) {
  .menu-subpanel { width: 97%; z-index: 20; }
}
@media (min-width: 1024px) {
  .menu-subpanel { width: 32%; z-index: 9; }
}
.menu-cat-item {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-cat-item:hover, .menu-cat-item.is-active {
  padding-left: 1.5rem;
}
.menu-subcat-enter {
  animation: subcatIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes subcatIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.menu-subcat-enter {
  animation: subcatIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes subcatIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== BUTTON MICRO-INTERACTIONS ===== */
.btn-hover {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.btn-hover:active { transform: scale(0.97); }
.btn-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-hover:hover::after { transform: translateX(100%); }

/* ===== SURFACE ITEM ===== */
.surface-item { animation: slideIn 0.3s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ===== FOCUS RING ===== */
:focus-visible {
  outline: 2px solid #F26522;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== LINE CLAMP ===== */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== PRINT ===== */
@media print {
  header, footer, .no-print, [aria-label="Contactar por WhatsApp"] { display: none !important; }
  main { padding: 0 !important; }
  body { font-size: 12px; color: #000; }
}

/* ===== DARK MODE OVERRIDES ===== */
.dark body,
.dark .bg-neutral-50 { background-color: #0F0E0D !important; }
.dark .bg-white { background-color: #1C1917 !important; }
.dark .bg-white\/95 { background-color: rgba(28,25,23,0.95) !important; }
.dark .bg-brand-50 { background-color: rgba(242,101,34,0.1) !important; }

.dark .text-neutral-900 { color: #FAFAF9 !important; }
.dark .text-neutral-800 { color: #E7E5E1 !important; }
.dark .text-neutral-700 { color: #D6D3CD !important; }
.dark .text-neutral-600 { color: #A8A29E !important; }
.dark .text-neutral-500 { color: #78716C !important; }
.dark .text-neutral-400 { color: #57534E !important; }

.dark .border-neutral-100 { border-color: #292524 !important; }
.dark .border-neutral-200 { border-color: #44403C !important; }
.dark .border-b.border-neutral-100 { border-color: #292524 !important; }

.dark .bg-neutral-100 { background-color: #292524 !important; }
.dark .bg-neutral-50\/50 { background-color: rgba(15,14,13,0.5) !important; }
.dark .hover\:bg-neutral-50:hover { background-color: #292524 !important; }
.dark .bg-neutral-900 { background-color: #0F0E0D !important; }

.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4) !important; }

.dark .border-brand-100\/50 { border-color: rgba(242,101,34,0.15) !important; }
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }

.dark .product-card:hover {
  box-shadow: 0 20px 40px -12px rgba(242, 101, 34, 0.15), 0 8px 16px -8px rgba(0,0,0,0.3);
}
.dark .brand-logo { opacity: 0.3; }
.dark .brand-logo:hover { opacity: 0.9; }

/* Dark mode specific components */
.dark nav.sticky { border-bottom-color: #292524 !important; }
.dark footer { background-color: #0A0908 !important; }
.dark .swiper-pagination-bullet { background: rgba(255,255,255,0.2) !important; }

/* Dark menu panel */

.dark .menu-panel { background-color: #1C1917 !important; }
.dark .menu-panel .border-neutral-100 { border-color: #292524 !important; }
.dark .menu-subpanel { background-color: #141211 !important; }
.dark .menu-subpanel .border-neutral-200 { border-color: #292524 !important; }

/* ===== EMPRESA B PAGE ===== */
.empresa-b-page {
  --empresa-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.22);
}

.empresa-b-page h1,
.empresa-b-page h2,
.empresa-b-page h3 {
  text-wrap: balance;
}

.empresa-b-page p {
  text-wrap: pretty;
}

.empresa-b-page .empresa-hero-grid,
.empresa-b-page .empresa-two-col,
.empresa-b-page .empresa-program-grid,
.empresa-b-page .empresa-pillars-grid,
.empresa-b-page .empresa-hero-stack {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.empresa-b-page .empresa-hero-grid > *,
.empresa-b-page .empresa-two-col > *,
.empresa-b-page .empresa-program-grid > *,
.empresa-b-page .empresa-pillars-grid > *,
.empresa-b-page .empresa-hero-stack > * {
  min-width: 0;
}

.empresa-b-page .empresa-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.empresa-b-page .empresa-cta,
.empresa-b-page .empresa-final-cta a {
  min-height: 3.25rem;
}

.empresa-b-page .empresa-chip-row,
.empresa-b-page .empresa-jumpbar-inner {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.empresa-b-page .empresa-chip-row::-webkit-scrollbar,
.empresa-b-page .empresa-jumpbar-inner::-webkit-scrollbar {
  display: none;
}

.empresa-b-page .empresa-chip {
  white-space: nowrap;
  padding: 0.65rem 0.95rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: #E7E5E1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.empresa-b-page .empresa-surface {
  height: 100%;
  box-shadow: var(--empresa-shadow);
}

.empresa-b-page .empresa-stat-card strong {
  line-height: 0.95;
}

.empresa-b-page .empresa-jumpbar {
  position: relative;
  z-index: 5;
  margin-top: -1.5rem;
}

.empresa-b-page .empresa-jumpbar-inner {
  padding: 0.55rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(229, 229, 229, 0.9);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.35);
}

.empresa-b-page .empresa-jumplink {
  white-space: nowrap;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  color: #404040;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.empresa-b-page .empresa-jumplink:hover {
  background: #fff7f2;
  color: #F26522;
  transform: translateY(-1px);
}

.empresa-b-page .empresa-inline-link {
  padding: 0.85rem 1rem;
  border-radius: 9999px;
  background: #fff7f2;
  border: 1px solid rgba(242,101,34,0.14);
}

.empresa-b-page .empresa-principle-card,
.empresa-b-page .empresa-pillar-card {
  height: 100%;
}

.empresa-b-page .empresa-roadmap-card {
  position: relative;
  overflow: hidden;
}

.empresa-b-page .empresa-roadmap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(242,101,34,0.7), transparent);
}

@media (max-width: 767px) {
  .empresa-b-page .empresa-jumpbar {
    margin-top: -1rem;
  }

  .empresa-b-page .empresa-cta-group a,
  .empresa-b-page .empresa-final-cta a,
  .empresa-b-page .empresa-inline-link {
    width: 100%;
    justify-content: center;
  }

  .empresa-b-page .empresa-chip {
    font-size: 0.68rem;
  }

  .empresa-b-page .empresa-surface,
  .empresa-b-page .empresa-roadmap-card {
    border-radius: 1.5rem;
  }
}

@media (max-width: 639px) {
  .empresa-b-page .empresa-hero-grid,
  .empresa-b-page .empresa-two-col,
  .empresa-b-page .empresa-program-grid {
    gap: 1rem;
  }

  .empresa-b-page .empresa-jumplink {
    padding: 0.75rem 0.95rem;
    font-size: 0.8rem;
  }
}

.dark .empresa-b-page .empresa-chip {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
}

.dark .empresa-b-page .empresa-surface {
  box-shadow: 0 18px 42px -24px rgba(0,0,0,0.45);
}

.dark .empresa-b-page .empresa-jumpbar-inner {
  background: rgba(28,25,23,0.92);
  border-color: #292524;
  box-shadow: 0 16px 40px -30px rgba(0,0,0,0.65);
}

.dark .empresa-b-page .empresa-jumplink {
  color: #D6D3CD;
}

.dark .empresa-b-page .empresa-jumplink:hover {
  background: rgba(242,101,34,0.12);
  color: #F8A06B;
}

.dark .empresa-b-page .empresa-inline-link {
  background: rgba(242,101,34,0.1);
  border-color: rgba(242,101,34,0.18);
}

/* Theme toggle animation */
.theme-toggle-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.theme-toggle:hover .theme-toggle-icon { transform: rotate(30deg); }