/**
 * Hoja de estilos ÚNICA para todo el sitio
 * Sian Ka'an Worldwide Logistics
 *
 * Sustituye a los bloques <style> que antes venían repetidos (y con
 * pequeñas diferencias) dentro de cada archivo .html. Cárgala en el
 * <head> de cada página, después del script de configuración de
 * Tailwind:
 *
 *   <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
 *   <script src="js/tailwind-config.js"></script>
 *   <link rel="stylesheet" href="css/site.css">
 */

/* =========================================================
   1. Variables de marca (referencia rápida; coinciden con
      js/tailwind-config.js)
   ========================================================= */
:root {
  --brand-yellow: #FDD000;
  --brand-yellow-hover: #E5BD00;
  --brand-gold: #D97706;
  --brand-ochre: #B45309;
  --brand-amber: #C25E00;
  --brand-dark: #0B0F14;
  --brand-slate: #1E293B;
  --surface-light: #FFF8F0;
  --surface-cream: #FCF3E0;
}

/* =========================================================
   2. Base del documento
   ========================================================= */
html {
  scroll-behavior: smooth;
  /* Header fijo de 80px (h-20): evita que los anclajes #... queden tapados */
  scroll-padding-top: 5rem;
}

body {
  background-color: var(--surface-light);
  color: var(--brand-slate);
  overscroll-behavior: none;
}

/* Página específica: terminos_y_condiciones.html y
   aviso_de_privacidad.html usan un fondo casi blanco propio
   (bg-[#FCF9F8] / bg-brand-surface) definido directo en su <body>;
   esta regla general no lo sobreescribe. */

main > :first-child { margin-top: 0; }
main > :last-child { margin-bottom: 0; }

::selection {
  background: var(--brand-yellow);
  color: #1F1B10;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tilt-card {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   3. Menú de navegación (mega menú "Servicios")
   ========================================================= */
.mega-panel {
  display: none;
}
.mega-wrap:hover .mega-panel,
.mega-wrap:focus-within .mega-panel {
  display: block;
}

/* =========================================================
   4. Marcos de esquina decorativos
   Unifica: .corner-frame, .corner-frame-light, .corner-frame-dark,
   .corner-bracket, .corner-bracket-container (aduanas, aereo,
   aviso, maritimo, preguntas, servicios, herramientas, terminos...)
   ========================================================= */
.corner-frame,
.corner-frame-light,
.corner-frame-dark,
.corner-bracket,
.corner-bracket-container {
  position: relative;
}

.corner-frame::before,
.corner-frame::after,
.corner-frame-light::before,
.corner-frame-light::after,
.corner-frame-dark::before,
.corner-frame-dark::after,
.corner-bracket::before,
.corner-bracket::after,
.corner-bracket-container::before,
.corner-bracket-container::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--brand-gold);
  opacity: 0.85;
  pointer-events: none;
}

/* Variante clara: acento dorado (index.html) */
.corner-frame-light::before,
.corner-frame-light::after {
  border-color: var(--brand-gold);
}

/* Variante oscura / sobre fondos oscuros: acento amarillo */
.corner-frame-dark::before,
.corner-frame-dark::after {
  border-color: var(--brand-yellow);
}

.corner-frame::before,
.corner-frame-light::before,
.corner-frame-dark::before,
.corner-bracket::before,
.corner-bracket-container::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.corner-frame::after,
.corner-frame-light::after,
.corner-frame-dark::after,
.corner-bracket::after,
.corner-bracket-container::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Marcos técnicos cuadrados más pequeños (servicios_especializados,
   terrestre) */
.tech-border-box {
  position: relative;
}
.tech-border-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #0F172A;
  border-left: 2px solid #0F172A;
  pointer-events: none;
}
.tech-border-box::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #0F172A;
  border-right: 2px solid #0F172A;
  pointer-events: none;
}

/* Esquinas tipo "blueprint" de terminos_y_condiciones.html */
.corner-bracket-tl::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--brand-yellow);
  border-left: 2px solid var(--brand-yellow);
}
.corner-bracket-br::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--brand-dark);
  border-right: 2px solid var(--brand-dark);
}
.corner-bracket-light-tl::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--brand-gold);
  border-left: 2px solid var(--brand-gold);
}
.corner-bracket-light-br::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid #4B5563;
  border-right: 2px solid #4B5563;
}

/* =========================================================
   5. Patrones de fondo (cuadrícula / puntos)
   ========================================================= */
.grid-pattern,
.bg-grid-pattern {
  background-image:
    linear-gradient(rgba(180, 83, 9, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 83, 9, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Variante sobre fondos oscuros: líneas blancas tenues */
.grid-line,
.grid-pattern-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* =========================================================
   6. Efectos de profundidad / parallax / tarjetas 3D
   ========================================================= */
.hero-parallax-wrapper {
  perspective: 1000px;
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.parallax-bg,
.hero-parallax-bg {
  /* Sin transition: el JS ya mueve el fondo en cada frame (rAF) y una
     transición añadiría retraso/efecto "gomoso". */
  will-change: transform;
}

.parallax-layer {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* =========================================================
   7. Componentes específicos de página
   ========================================================= */

/* --- preguntas.html: acordeón de preguntas frecuentes --- */
.faq-item.active .faq-content {
  max-height: 400px;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--brand-ochre);
}
.faq-item.active {
  border-color: var(--brand-yellow);
  box-shadow: 0 4px 20px rgba(253, 208, 0, 0.12);
}

/* --- aviso_de_privacidad.html: tarjetas --- */
.legal-card {
  transition: all 0.25s ease;
}
.legal-card:hover {
  border-color: var(--brand-yellow);
  box-shadow: 0 10px 25px -5px rgba(253, 208, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}

/* --- herramientas.html: texto de código y asistente paso a paso --- */
.font-mono-code {
  font-family: 'IBM Plex Mono', monospace;
}
.step-active {
  background-color: var(--brand-yellow) !important;
  color: #000000 !important;
  border-color: var(--brand-yellow) !important;
  font-weight: 700;
}
.step-completed {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}
.selectable-card.selected {
  border-color: #E5A800;
  background-color: #FFF8F0;
  box-shadow: 0 0 0 2px var(--brand-yellow);
}

/* =========================================================
   8. Impresión (terminos_y_condiciones.html)
   ========================================================= */
@media print {
  header,
  footer,
  #contact-banner,
  #hero-banner,
  .sticky-sidebar,
  #whatsapp-float {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .main-content-column {
    width: 100% !important;
  }
  .clause-card {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}