/* Agregamos un espacio adicional para compensar la barra fija */

/* Ajuste específico para el título */
h2 {
   font-family: 'New Amsterdam', sans-serif;
   font-size: clamp(1.8rem, 5vw, 3.5rem);
   font-weight: bold;
   margin-bottom: 20px;
   animation: slideIn 1.2s ease-in-out;
   padding-top: 100px; /* Aumentamos el padding superior */
   padding-bottom: 80px;
   padding-left: 5%;
   padding-right: 5%;
   text-align: center;
   background: linear-gradient(rgba(42, 67, 148, 0.75), rgba(0,0,0,0.85)), 
                    url('../assets/calidad.avif') no-repeat center/cover;
   overflow-x: hidden;
   color: white;
}

/* Ajuste específico para dispositivos iOS */
@supports (-webkit-touch-callout: none) {
   h2 {
      padding-top: 120px; /* Padding extra para iOS */
   }
}

.tarifario-container,
.faq-container {
   background: white;
   padding: 20px;
   margin: 20px auto 80px auto;
   width: 90%;
   max-width: 1200px;
   border-radius: 5px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 20px;
   overflow-x: auto;
   display: block;
}

@media (min-width: 768px) {
   table {
      display: table;
   }
}

table,
th,
td {
   border: 1px solid #ddd;
}

th,
td {
   padding: 8px 12px;
   text-align: left;
}

@media (max-width: 767px) {
   th, td {
      padding: 6px 8px;
      font-size: 0.9rem;
   }
}

th {
   background-color: #0073e6;
   color: white;
}

button {
   display: block;
   width: 100%;
   padding: 10px;
   background-color: #0073e6;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 1rem;
   margin-top: 20px;
   max-width: 400px;
   margin-left: auto;
   margin-right: auto;
}

@media (max-width: 480px) {
   button {
      padding: 8px;
      font-size: 0.9rem;
   }
}

button:hover {
   background-color: #005bb5;
}

.faq-container details {
   background: #f9f9f9;
   margin: 10px 0;
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
}

.faq-container summary {
   font-weight: bold;
   color: #0073e6;
   cursor: pointer;
   padding: 8px 0;
}

@media (max-width: 992px) {
   .tarifario-container,
   .faq-container {
      width: 95%;
      padding: 15px;
   }
   
   h2 {
      padding-top: 100px;
      padding-bottom: 60px;
      padding-left: 3%;
      padding-right: 3%;
   }
}

@media (max-width: 576px) {
   .tarifario-container,
   .faq-container {
      width: 100%;
      padding: 15px 10px;
      margin: 15px auto 60px auto;
   }
   
   h2 {
      padding-top: 80px;
      padding-bottom: 40px;
      padding-left: 2%;
      padding-right: 2%;
      margin-bottom: 15px;
   }
   
   .faq-container details {
      padding: 8px;
   }
}

/* Ajustes específicos para iPhone */
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
   body {
      padding-top: 70px; /* Valor ligeramente mayor para iPhone */
   }
   
   h2 {
      padding-top: 100px; /* Más padding para iPhone */
   }
}