/* Basic body styling to apply the Inter font */
    body {
      font-family: 'Inter', sans-serif;
    }

    /* --- Keyframe Animations for Panel Sliding --- */
    /*
     * These keyframes define the animation for panels sliding in and out from different directions.
     * Each animation starts from a transformed state (e.g., translateX(100%) for right)
     * and ends at its original position (translateX(0)).
     */
    @keyframes slideInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes slideOutToRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
    @keyframes slideInFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    @keyframes slideOutToLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    @keyframes slideInFromTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
    @keyframes slideOutToTop { from { transform: translateY(0); } to { transform: translateY(-100%); } }
    @keyframes slideInFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes slideOutToBottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
    /* Keyframe animation for content fading in with a slight upward translation */
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* --- Panel Base Styling --- */
    /*
     * Base styles for all panel elements.
     * They are fixed position, have a background, shadow, and a high z-index.
     * Initially, panels are hidden using `visibility: hidden;`.
     */
    .panel {
      position: fixed;
      background-color: #000000;
      box-shadow: 0 0 30px rgba(0,0,0,0.2);
      z-index: 1000;
      visibility: hidden; /* Hidden by default */
    }

    /* When a panel has the 'is-open' class, it becomes visible */
    .panel.is-open { visibility: visible; }
    /*
     * Apply fadeIn animation to direct children of .panel-content when the panel is open.
     * This creates a staggered fade-in effect for the panel's internal content.
     */
    .panel.is-open .panel-content > * { animation: fadeIn 0.5s both; }
    .panel.is-open .panel-content > *:nth-child(1) { animation-delay: 0.3s; }
    .panel.is-open .panel-content > *:nth-child(2) { animation-delay: 0.4s; }
    .panel.is-open .panel-content > *:nth-child(3) { animation-delay: 0.5s; }
    .panel.is-open .panel-content > *:nth-child(4) { animation-delay: 0.6s; }
    .panel.is-open .panel-content > *:nth-child(5) { animation-delay: 0.7s; }

    /* --- Overlay Styling --- */
    /*
     * Styles for the semi-transparent overlay that appears when a panel is open.
     * It covers the entire screen, has a lower z-index than panels, and transitions
     * its opacity and visibility for a smooth fade effect.
     */
    .overlay {
      position: fixed;
      inset: 0; /* Shorthand for top: 0; right: 0; bottom: 0; left: 0; */
      background-color: rgba(0,0,0,0.6); /* Semi-transparent black */
      z-index: 999; /* Below panels */
      opacity: 0; /* Hidden by default */
      visibility: hidden; /* Hidden by default */
      transition: opacity 0.4s ease-out, visibility 0.4s ease-out; /* Smooth transition */
    }

    /* When the overlay has the 'is-open' class, it becomes visible and opaque */
    .overlay.is-open {
      opacity: 1;
      visibility: visible;
    }
	.telacheia {
	width: 100%;
	height: 100%;
	}
	.titulo {
  height: 31px;
  position: absolute;
  top: 2px;
  right: 2px;
  background: #222;
  font-family: verdana;
  font-weight: bolder;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px 14px 0 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);

  border-radius: 4px;
	z-index: 2010;
}	
	.btn_fechar {
  height: 31px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #222;
  font-family: verdana;
  font-weight: bolder;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px 14px 0 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);

  border-radius: 4px;
	z-index: 2025;
}

    /* --- Panel Animation Classes --- */
    /*
     * These classes apply the specific slide-in/out animations to panels.
     * `forwards` ensures the animation retains its end state.
     * `ease-out` provides a smooth deceleration; `ease-in` provides a smooth acceleration.
     */
    .panel.animate-in-right { animation: slideInFromRight 0.4s forwards ease-out; }
    .panel.animate-out-right { animation: slideOutToRight 0.3s forwards ease-in; }
    .panel.animate-in-left { animation: slideInFromLeft 0.4s forwards ease-out; }
    .panel.animate-out-left { animation: slideOutToLeft 0.3s forwards ease-in; }
    .panel.animate-in-top { animation: slideInFromTop 0.4s forwards ease-out; }
    .panel.animate-out-top { animation: slideOutToTop 0.3s forwards ease-in; }
    .panel.animate-in-bottom { animation: slideInFromBottom 0.4s forwards ease-out; }
    .panel.animate-out-bottom { animation: slideOutToBottom 0.3s forwards ease-in; }