/* ==========================================================================
   1. Variables y Estilos Base
   ========================================================================== */

   :root {
    --color-primary: #122E5D;
    --color-secondary: #FD5902;
    --color-accent: #485696;
    --color-text: #333;
    --color-light: #fff;
    --color-background: #f5f5f5;
    --color-border: #ccc;
    --font-main: "Quicksand", sans-serif;
    /* Conversión base: 1rem = 16px */
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: var(--font-main);
    background-color: var(--color-background);
    color: var(--color-text);
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.6;
  }
  
  img {
    max-width: 100%;
    display: block;
  }
  
  /* ==========================================================================
     2. Header y Navegación
     ========================================================================== */
  
  header {
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 1.25rem 1rem; /* 20px 16px */
    text-align: center;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  }
  
  header img {
    width: 6.25rem; /* 100px */
    height: auto;
    margin: 0 auto 0.625rem; /* 10px */
  }
  
  header h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem); 
    letter-spacing: 0.125rem; /* 2px */
  }
  
  nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem; 
    margin: 1.25rem 0; 
  }
  
  nav ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem; 
    background: var(--color-primary);
    color: var(--color-light);
    border-radius: 0.3125rem; 
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  nav ul li a:hover {
    background: var(--color-secondary);
    color: var(--color-light);
  }
  
  nav ul li a img {
    width: 1.5rem; 
    height: 1.5rem; 
    transition: filter 0.3s ease;
  }
  
  nav ul li a:hover img {
    filter: brightness(0) invert(1);
  }
  
  .home-link {
    min-width: 3rem; 
  }
  
  .home-link img {
    transform: translateY(0.1rem); 
  }
  

/* ==========================================================================
   3. Contenedor Principal y Espaciado
   ========================================================================== */


#quienes-somos,
.mission-vision-container,
.nuestros-valores,
.convenios {
  max-width: 68.75rem; 
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;   
  padding-right: 1.5rem; 
  
  /* Mantenemos el padding vertical y otros estilos que ya tenías */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}


header, footer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* ==========================================================================
   3.1 Títulos de Sección (h2)
   ========================================================================== */
   
/* Estilo para los títulos principales de cada sección con la línea inferior */
#quienes-somos h2,h3
.mission-vision-container h3, 
.convenios h2, h3{ 
  color: var(--color-primary);
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem; 
  border-bottom: 3px solid var(--color-secondary);
  display: inline-block; 
  text-align: center;
}
  
  /* ==========================================================================
     4. Sección de Valores (Flip Cards)
     ========================================================================== */
  
  .nuestros-valores {
    background-color: var(--color-accent);
    padding: 3rem 1.25rem;
    max-width: 62.5rem; 
    margin: 2.5rem auto;
    border-radius: 0.625rem;
  }
  
  .nuestros-valores h3 {
    color: var(--color-light);
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); 
    gap: 1.5rem; 
    /*justify-content: center;*/
    justify-items: center;
  }
  
  /* Centra el último elemento si es impar */
  .valores-grid > .flip-card:last-child:nth-child(odd) {
    /*grid-column: span 2;*/
    grid-column: span 1;
    justify-self: center;
  }

  /*
  @media (min-width: 768px) {
    .valores-grid > .flip-card:nth-child(7):nth-last-child(1) {
      grid-column: 2 / 3;
    }
  }*/
  
  .flip-card {
    /*background-color: transparent;*/
    width: 100%;
    /*spect-ratio: 1 / 1;*/
    aspect-ratio: 16/10; 
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .flip-card:hover{
    transform: translateY(-5px);
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    /*-webkit-backface-visibility: hidden;*/
    backface-visibility: hidden;
    border-radius: 1rem; /* 15px */
    padding: 1.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
    /*background-color:var(--color-light);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*padding: 1rem;*/
    text-align: center;
  }
  
  .flip-card-front {
    background-color: var(--color-light);
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .flip-card-back {
    background-color: var(--color-light);
    color: var(--color-secondary);
    transform: rotateY(180deg);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
  }
  
  /* ==========================================================================
     5. Convenios y Footer
     ========================================================================== */
  
  .convenios {
    max-width: 63.75rem; 
    margin: 3.75rem auto; 
    padding: 2rem 1.25rem;
    background-color: var(--color-light);
    border-radius: 0.75rem; 
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    text-align: center;
  }
  
  .convenios-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 8vw, 5rem); 
    margin-top: 2rem;
  }
  
  .logo-box {
    width: 8.75rem; 
    padding: 0.625rem; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .logo-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.2);
  }
  
  footer {
    text-align: center;
    padding: 1.25rem;
    background: var(--color-primary);
    color: var(--color-light);
    font-size: 1rem;
    margin-top: 2rem;
  }
  
  /* ==========================================================================
     6. Media Queries para Responsividad
     ========================================================================== */
  
  @media (max-width: 768px) {
    body {
      line-height: 1.5;
    }
    
    .content-section, .convenios, .mission-vision-container {
      padding: 2rem 1rem;
      margin: 2rem auto;
    }
  
    .valores-grid {
      grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
      gap: 1rem;
    }
  }
  /*
  @media (max-width: 500px) {
   
    .flip-card:hover .flip-card-inner {
      transform: none; 
    }
  
    .flip-card-inner {
      transform-style: flat;
    }
    
    .flip-card-front {
      font-size: 1.1rem;
    }
  
    .flip-card-back {
      transform: none; 
      margin-top: 0.5rem;
      position: relative; 
      box-shadow: none;
      border: 1px solid #ddd;
      font-size: 0.9rem;
    }
    
    .flip-card {
      aspect-ratio: auto; 
    }
  }*/