#cuerpo_arriba {
  position: relative;
  width: 1025px;
  height: 157px;
  margin: auto;
  border: 1px solid #666;
  border-bottom: none;
  background: #fff;
}

#cuerpo_abajo {
  position: relative;
  margin: auto;
  width: 1025px;
  height: auto;
  background: #fff;
  border: 1px solid #666;
  border-top: none;
  line-height: 1.5;
  /*padding:15px 0;*/
}

#contacto {
  margin: auto;
  padding: 5px 0 5px 0;
  width: 1025px;
  height: 55px;
  top: 5px;
  color: #666666;
  font-size: 11px;
  position: relative;
  /* -moz-border-radius: 10px; */
  background-color: #ffffff;
}

/*Bloque de texto general, separa el contenido del contenedor*/
#bloque_texto {
  position: relative;
  padding: 15px 15px 10px 25px; /*arriba derecha abajo izquierda*/
  width: auto;
  height: auto;
  background: #fff;
  border: none;
  font-size: 14px;
  color: #666666;
}

#texto_ah {
  font-size: 15px;
  color: #666666;
}

h1 /*Eetiqueta titulos*/ {
  color: #4c1b1b;
  font: helvetica;
  font-size: 24pt;
  overflow: hidden;
  vertical-align: middle;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #666666;
  background-color: #fff;
  margin-top: 20px;

  overflow-y: scroll;
}

.app-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 40px 10px;
}

.app-button {
  /* --- The "Square" Magic --- */
  width: 300px; /* Set a base width */
  aspect-ratio: 1 / 1; /* FORCES the height to match the width. 1:1 = square! */

  /* --- The "Button" Look --- */
  background-color: #dfdfdf; /* Using a dark red from your h1 style */
  color: #ff2400;
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* --- The "Choice" Text --- */
  display: flex; /* Using flex again to... */
  align-items: center; /* ...center the text vertically */
  justify-content: center; /* ...center the text horizontally */
  font-size: 2.5em; /* Big text */
  font-weight: bold;
  text-align: center;
  text-decoration: none; /* Removes the default link underline */

  /* --- The "Feel" --- */
  transition: all 0.2s ease-in-out;
}

.app-button:hover {
  transform: translateY(-5px); /* Lifts the button up slightly */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  background-color: #f3e9e9; /* A slightly lighter red */
}

/*
== Logo Container ==
(Desktop-first, horizontal layout)
*/
.logo-container {
  display: flex; /* Activates Flexbox */
  flex-wrap: wrap; /* Allows wrapping, just in case */
  justify-content: space-around; /* Spreads logos out evenly */
  align-items: center; /* Vertically centers them */
  padding: 20px 0; /* Gives them some top/bottom breathing room */
}

.logo-container a img {
  height: 70px; /* This is your original height, now in CSS */
  width: auto; /* Lets width adjust automatically */
  margin: 10px; /* Small buffer around each logo */
}

@media (max-width: 350px) {
  .app-button {
    width: 90%; /* Makes the button 90% of the screen width */
    font-size: 2em; /* Slightly smaller text to fit */
  }
}

/* This targets any screen 1025px or smaller */
@media (max-width: 1025px) {
  /* 1. Make the main layout boxes full-width */
  #cuerpo_arriba,
  #cuerpo_abajo,
  #contacto {
    width: 100%; /* Ditch the 1025px, use the whole screen */
    border-left: none; /* The side borders look weird on a phone */
    border-right: none;
  }

  /* 2. Make the header image scale down */
  #cuerpo_arriba img {
    max-width: 100%; /* Makes the image shrink to fit */
    height: auto; /* Keeps the aspect ratio */
  }

  /* 3. Fix the contact text */
  #contacto {
    height: auto; /* Let the height be automatic */
    padding: 10px;
  }

  /* 4. Fix the buttons (we already did this, but good to have) */
  .app-container {
    flex-direction: column; /* Stack buttons vertically */
  }

  .app-button {
    width: 90%; /* Make buttons 90% of the screen width */
  }
}

/*
============================================
== HAMBURGER MENU STYLES
============================================
*/

/* 1. STYLE THE HAMBURGER BUTTON */
.menu-toggle {
  display: none; /* Hide it on desktop by default */
  position: absolute;
  top: 40px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  width: 40px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000; /* Make sure it's on top */
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #4c1b1b; /* Your site's dark red */
  margin-bottom: 6px;
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* 2. ADD THE "X" ANIMATION (WHEN JS ADDS 'is-active') */
.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
  transform: scaleX(0); /* Fades out the middle bar */
}
.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/*
============================================
== RESPONSIVE MENU (INSIDE YOUR MEDIA QUERY)
============================================
*/
@media (max-width: 1025px) {
  /* 1. SHOW the hamburger button */
  .menu-toggle {
    display: block;
  }

  /* 2. HIDE the original horizontal menu */
  #nivelm-1 {
    display: none; /* Hide it... */

    /* ...and re-style it as a vertical dropdown panel */
    position: absolute;
    top: 157px; /* The height of your #cuerpo_arriba */
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #4c1b1b;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    padding: 0;
    z-index: 999; /* <-- ADD THIS LINE */
  }

  /* 3. SHOW the menu (when JS adds 'menu-open') */
  #nivelm-1.menu-open {
    display: block;
  }

  /* 4. Fix all the menu items to stack nicely */
  #nivelm-1 li {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* * This is our new, more specific rule.
   * Using '>' makes it override the old desktop styles.
   */
  #nivelm-1 > li > a {
    display: block;
    width: 100%;
    padding: 18px 25px; /* Increased padding */
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 1.15em; /* 15% bigger text */
    background: #ffffff; /* Forces a white background, killing the gray */
    color: #333; /* Ensures all links are the same color */
  }

  /* We also need to update the sub-menu links */
  #nivelm-1 ul.nivelm-version2 li a,
  #nivelm-1 ul.nivelm-2 li a {
    padding-left: 40px;
    background: #f9f9f9;
    font-size: 1em; /* Keep sub-links a bit smaller */
  }

  /* 5. CRITICAL: Fix your sub-menus */
  #nivelm-1 ul.nivelm-version2,
  #nivelm-1 ul.nivelm-2 {
    position: static; /* MUST override the desktop 'absolute' */
    display: block; /* Show them, just indented */
    width: 100%;
    border: none;
    box-shadow: none;
  }

  #nivelm-1 ul.nivelm-version2 li a,
  #nivelm-1 ul.nivelm-2 li a {
    padding-left: 40px; /* Indent sub-menu items */
    background: #f9f9f9; /* Give them a slight color */
  }
}