body {
  font-family: 'Roboto', sans-serif; color: #55585a;
  font-weight: 200;
}

.w3-btn {margin-bottom:40px; width:180px; }
.w3-border-red, .w3-hover-border-red:hover {
2px; border-color: #9d2148 !important;}
.w3-text-color {background-color: #9d2148;}
h3{color: #9d2148; margin-top: 5%; margin-bottom: 2%;}
h5{color: #55585a; font-size: 32px; font-weight: 700; !important;}
h4{color: #9d2148; font-size: 32px; font-weight: 700; !important;}
#iconos{width: 50%; margin-bottom: 2%; margin-top: 15%; float: right;}
i {color: #b28e5c; text-align: left; list-style: none;}
h1{color: #9d2148;}
th{color: #fff; text-align: center; background-color: #9d2148; font-size: 11px;}
td{color:#55585a; font-size: 11px;}
tr{}
.topnav .search-container {
  float: right;
a {text-decoration: none !important;}
div.tablecontainer {
  overflow-x: auto;
}

#overflowTest {
 overflow: scroll;
}
/* ---- REGLAS GENERALES RESPONSIVAS ---- */

/* --- CONTENEDOR PRINCIPAL DE LA ANIMACIÓN --- */
div.holder {
  position: relative;
  margin: 60px auto;
  width: 100px;
  height: 100px;
}

/* --- DOTS --- */
div.dot {
  background: #9d2148;
  border-radius: 100px;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
}

div.dot.top {
  z-index: 15;
}
div.dot.mid {
  z-index: 10;
}
div.dot.btm {
  z-index: 5;
}

/* Clases de animación */
div.dot1 {
  animation: pickup1 1.5s 1 forwards;
}
div.dot2 {
  animation: pickup2 1.5s 1 forwards;
}
div.dot3 {
  animation: pickup3 1.5s 1 forwards;
}

/* --- TITLES --- */
ul.titles {
  margin: 0;
  padding: 0;
  position: relative;
}

ul.titles li {
  height: 100px;
  font-size: 35px;
  line-height: 2em;
  list-style: none;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
   border: none;
  /*text-transform: uppercase; */
  left: 100px; /* Se pega a la animación */
}

/* Posiciones iniciales */
ul.titles li.title1 {
  transform: translateY(-125%);
}
ul.titles li.title2 {
  transform: translateY(0);
}
ul.titles li.title3 {
  transform: translateY(125%);
}

/* Animaciones de texto */
ul.titles li.title1.title-animate {
  animation: title1 1s 1 1.2s forwards;
}
ul.titles li.title2.title-animate {
  animation: title2 1.25s 1 1.4s forwards;
}
ul.titles li.title3.title-animate {
  animation: title3 1.5s 1 1.8s forwards;
}

/*--- BOTÓN RESET --- */
a.reset {
  background: #bfb7af;
  border-radius: 24px;
  color: #9d2148;
  display: block;
  text-align: center;
  width: 140px;
  margin: 40px auto;
  padding: 8px 0;
  position: relative;
  text-decoration: none; 
  transition: 0.15s ease-in;
}

a.reset:hover {
  background: #b28e5c;
  text-decoration: none;
}


/* --- KEYFRAMES --- */
@keyframes title1 {
  0% { opacity: 0; transform: translateY(-125%); }
  100% { opacity: 1; transform: translate(-75px, -125%); }
}
@keyframes title2 {
  0% { opacity: 0; transform: translateY(0); }
  100% { opacity: 1; transform: translate(-75px, 0); }
}
@keyframes title3 {
  0% { opacity: 0; transform: translateY(125%); }
  100% { opacity: 1; transform: translate(-75px, 125%); }
}

@keyframes pickup1 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(0,-150%) scale(1.3,0.9); }
  100% { transform: translate(-200%,-125%) scale(1); }
}

@keyframes pickup2 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(0,-100%) scale(1.15,0.9); }
  100% { transform: translate(-200%,0) scale(1); }
}

@keyframes pickup3 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(0,-50%) scale(1.075,0.9); }
  100% { transform: translate(-200%,125%) scale(1); }
}

.multi_bg_example {
  width: 100%;
  height: 1000px;
  background-image:
    url(bubbles.png),
    linear-gradient(to right, rgba(191, 183, 175, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
  background:
    -moz-linear-gradient(
      to right,
      rgba(191, 183, 175, 1),
      rgba(255, 255, 255, 0)
    ),
    -webkit-gradient(to right, rgba(191, 183, 175, 1), rgba(255, 255, 255, 0)),
    -ms-linear-gradient(to right, rgba(191, 183, 175, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(191, 183, 175, 1), rgba(255, 255, 255, 0));
}

/*** Botones responsivos ***/
.w3-bar button {
    margin: 5px 0;
    width: 100%;
    max-width: 350px;
}

/*** El contenedor de la tabla siempre debe tener scroll horizontal ***/
#overflowTest {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*** Ajustar tabla para pantallas pequeñas ***/
table {
    font-size: 14px;
    min-width: 900px; /* Evita que se deforme */
}

thead th {
    white-space: nowrap; /* Para que no salte línea en encabezados */
}

/*** Select responsivo ***/
#unidad {
    width: 100%;
    max-width: 400px;
    padding: 8px;
}

/*** Mejorar separación en móviles ***/
.heading-about {
    padding: 15px;
}

/*** RESPONSIVE BREAKPOINTS ***/

/* ---- Tablets (pantallas medianas) ---- */
@media (max-width: 992px) {
    h1 {
        font-size: 26px;
    }
}

/* ---- Celulares grandes ---- */
@media (max-width: 768px) {
    h1 {
        font-size: 22px;
    }
    h5 {
        font-size: 16px;
    }
    table {
        font-size: 12px;
    }
}

/* ---- Celulares pequeños ---- */
@media (max-width: 480px) {
    h1 {
        font-size: 20px;
        line-height: 1.3;
    }
    table {
        font-size: 11px;
    }
    .w3-bar button {
        font-size: 14px;
    }
}

/* ========================================================= */
/*                     RESPONSIVE DESIGN                     */
/* ========================================================= */

@media (max-width: 768px) {

  h1 { font-size: 22px; padding: 0 10px; }
  h2 { font-size: 18px; padding: 0 10px; }

  .holder { width: 70px; height: 70px; }
  .dot { width: 70px; height: 70px; }
  i.icono { font-size: 40px; }

  ul.titles li {
    font-size: 20px;
    left: 85px;
  }

  ul.titles li.title1 { transform: translateY(-110%); }
  ul.titles li.title2 { transform: translateY(0); }
  ul.titles li.title3 { transform: translateY(110%); }

  @keyframes title1 {
    100% { transform: translate(-45px, -110%); opacity: 1; }
  }
  @keyframes title2 {
    100% { transform: translate(-45px, 0); opacity: 1; }
  }
  @keyframes title3 {
    100% { transform: translate(-45px, 110%); opacity: 1; }
  }

  .multi_bg_example {
    height: auto;
    padding-bottom: 80px;
  }

  a.reset {
    width: 120px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {

  .holder { width: 55px; height: 55px; }
  .dot { width: 55px; height: 55px; }
  i.icono { font-size: 32px; }

  ul.titles li {
    left: 70px;
    font-size: 18px;
  }

  @keyframes title1 {
    100% { transform: translate(-35px, -100%); opacity: 1; }
  }
  @keyframes title2 {
    100% { transform: translate(-35px, 0); opacity: 1; }
  }
  @keyframes title3 {
    100% { transform: translate(-35px, 100%); opacity: 1; }
  }
}

/* Dropdown */
.dropdown-container {
  position: relative !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

.dropdown-btn {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 150px; /* aumenta para bajar el menú */
  left: 0; 
  background: #ffffffee;
  border-radius: 8px;
  padding: 10px 0;
  list-style: none;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 99999 !important;
}

.dropdown-menu li {
  padding: 8px 15px;
  white-space: nowrap;
}

.dropdown-menu li a {
  color: #9d2148;
  text-decoration: none;
  font-size: 20px;
}

.dropdown-menu li:hover {
  background: #f2e7eb;
}