/* Content-Type: text/css  - CSS styles Document */
@charset "utf-8";

html {
  box-sizing: border-box; /* Keep this here - good practice */
  /* border: 1px solid aliceblue; <-- Moved to .body */
  /* border-radius: 10px; <-- Moved to .body */
  min-width: 530px; /* Initial minimum width */
}

/* Applied the border/radius here instead of html */
.body {
  display: grid;
  grid-template-areas:
      "header"
      "container"
      "footer";
  margin: 20px;
  padding: 10px;
  width: calc(100% - 40px); /* Adjust width considering margin */
  max-width: 1200px; /* Optional: Add max-width for very large screens */
  margin-left: auto; /* Center the body element */
  margin-right: auto;
  height: auto;
  border: 1px solid aliceblue; /* Border from html */
  border-radius: 10px; /* Radius from html */
  min-width: 500px; /* Minimum width for the body content */
  box-sizing: border-box; /* Include padding/border in width */
}

.header {
  display: grid;
  grid-template-columns: 300px auto; /* Logo fixed width, nav takes rest */
  grid-template-areas: "logo navegar";
  gap: 10px;
  margin: 5px;
  padding: 5px; /* Added some padding */
  height: auto;
  border: 1px solid aliceblue;
  border-radius: 7px;
  min-width: 500px; /* Keep min-width consistent */
  box-sizing: border-box;
}

.logo {
  grid-area: logo; /* Assign to grid area */
  display: flex; /* Use flex for simple alignment */
  align-items: center; /* Vertically center logo image if needed */
  /* grid-template-columns: 1fr; <-- Removed */
}

.navegar {
  grid-area: navegar; /* Assign to grid area */
  display: flex; /* Use flexbox for alignment */
  justify-content: flex-end; /* Align menu to the right */
  align-items: center; /* Vertically center menu items */
  padding-bottom: 20px;
  padding-right: 20px;
  /* grid-template-columns: 3fr; <-- Removed */
  /* justify-items: end; <-- Removed (use justify-content in flex) */
}

.ads {
  /* display: grid; <-- Removed unless grid is needed for internal ad layout */
  gap: 10px; /* Only effective if display: grid is restored */
  margin: 5px;
  padding: 10px; /* Added padding */
  height: auto;
  border: 1px solid aliceblue;
  border-radius: 7px;
  color: aliceblue;
  text-align: center; /* Example: Center text if it's simple */
  box-sizing: border-box;
}

.container {
  display: grid; /* Keep grid if container content needs it, otherwise 'block' is fine */
  gap: 10px; /* Space between grid items *inside* container */
  margin: 5px;
  padding: 15px; /* Added padding */
  height: auto;
  min-height: 500px;
  border: 1px solid aliceblue;
  border-radius: 7px;
  min-width: 500px; /* Keep min-width consistent */
  box-sizing: border-box;
}

.footer {
  display: grid;
  grid-template-columns: 1fr; /* Single column for stacking items */
  justify-items: center; /* Center-align items horizontally by default */
  gap: 15px; /* Vertical gap between items */
  margin: 5px;
  padding: 15px;
  height: auto;
  border: 1px solid aliceblue;
  border-radius: 7px;
  background: #bcccea;
  box-sizing: border-box;
  /* min-height: 100px; -- Generally not needed with auto height */
}

/* .social styling is in visual.css - ensure it has 'justify-self: start;' */
/* to override the footer's 'justify-items: center;' */

.powerby {
  justify-self: center; /* Explicitly center (though default now) */
  text-align: center; /* Center the text inside */
  width: auto;
  font-style: italic;
  color: #3a67bb;
  /* border: 1px transparent; <-- Removed, transparent border is invisible */
  padding: 0 15px; /* Adjusted padding */
  /* grid-column/row removed - correct */
}

.contactbottom {
  display: grid; /* Keep grid for alignment within the button itself if needed */
  min-width: 200px;
  height: 50px;
  justify-self: center; /* Explicitly center horizontally */
  align-items: center; /* Vertically center content (text) */
  /* align-content: center; <-- Removed, align-items is usually sufficient */
  position: relative;
  text-align: center;
  font: bold 1em/3em Arial, Helvetica; /* Adjust line-height if needed */
  text-decoration: none !important; /* Keep important if necessary */
  border-radius: 5px;
  background: #bcccea;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 0 15px;
  /* grid-column/row removed - correct */
}

/* --- Animations for .contactbottom --- */
.contactbottom:hover {
  background: #8faadc;
  color: white;
}

.contactbottom::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 50%;
  /* background: rgba(255, 255, 255, 0.05); Example subtle effect */
}

.contactbottom span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b1b4ba, #3a67bb);
  animation: animated1 2s linear infinite;
}

@keyframes animated1 {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100%);
  }
}

.contactbottom span:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #b1b4ba, #3a67bb);
  animation: animated2 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animated2 {
  0% {
      transform: translateY(-100%);
  }
  100% {
      transform: translateY(100%);
  }
}

.contactbottom span:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, #b1b4ba, #3a67bb);
  animation: animated3 2s linear infinite;
}

@keyframes animated3 {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}

.contactbottom span:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, #b1b4ba, #3a67bb);
  animation: animated4 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animated4 {
  0% {
      transform: translateY(100%);
  }
  100% {
      transform: translateY(-100%);
  }
}

/* --- Basic Responsiveness --- */

/* Adjustments for tablets and smaller desktops */
@media (max-width: 850px) {
  .header {
      grid-template-columns: 200px auto; /* Reduce logo space */
  }
}


/* Adjustments for smaller tablets and large phones */
@media (max-width: 768px) {
  .body {
      margin: 10px; /* Reduce margin */
      width: calc(100% - 20px);
  }
  .header {
      grid-template-columns: 1fr; /* Stack logo and nav */
      grid-template-areas:
          "logo"
          "navegar";
      justify-items: center; /* Center logo */
      min-width: 0; /* Allow header to shrink */
  }

  .logo {
      justify-content: center; /* Center logo content */
      padding: 10px 0;
  }

  .navegar {
      justify-content: center; /* Center nav */
      padding: 10px 0; /* Adjust padding */
  }

  .container {
      min-width: 0; /* Allow container to shrink */
      padding: 10px;
  }

  .footer {
      padding: 10px;
  }
}

/* Adjustments for mobile phones */
@media (max-width: 600px) {
  html {
      min-width: 0; /* Allow shrinking below initial min-width */
  }
  .body {
      min-width: 0; /* Allow body to shrink */
      margin: 5px;
      width: calc(100% - 10px);
      padding: 5px;
  }

  .header {
     padding: 5px;
  }

  .logo img { /* Example: Control logo image size */
      max-width: 180px;
      height: auto;
  }

  .contactbottom {
      min-width: 150px; /* Allow button to shrink */
      padding: 0 10px;
      font-size: 0.9em; /* Slightly smaller text */
  }

   .powerby {
      font-size: 0.9em; /* Slightly smaller text */
  }
}