/* Estilos adicionales */
#divAzul {
  background: linear-gradient(to right, #00A9E0, #004176); 
  min-height: 100vh; 
  color: #ffffff; 
  padding: 20px; 
  }
  
  #divRojo {
  /* background-color: red; */
  min-height: 100vh; 
  position: relative; 
  }
  
  #imagenRoja {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  }
  
  .h1SomosPositivos, .h1SomosPositivos2 {
  margin: 0; 
  }
  
  .h1SomosPositivos{
  font-size: 50px;
  position: relative;
  left: 27px;
  top: 24px;
  }
  
  .h1SomosPositivos2{
  font-size: 45px;
  position: relative;
  top: 21px;
  left: 27px;
  }
  
  .p1TextoGeneral {
  position: relative;
  text-align: start;
  line-height: 1.8;    
  font-size: 25px;
  padding-top: 10px;
  top: 55;
  }

  @media screen and (max-width: 850px) {
    .containerDiv {
      flex-direction: column; /* Cambia la dirección del contenedor a columna */
    }
    
    .text-sectionDiv {
      order: 2; /* Cambia el orden del texto para que aparezca después de la imagen */
    }
    
    .imagen-sectionDiv {
      order: 1; /* Cambia el orden de la imagen para que aparezca primero */
    }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }
      
      
      
      main {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:gainsboro;
      height: 100vh;;
      }
      
      main .container {
      display: flex;
      flex-direction: column ;
      align-items: center;
      background-color: white;
      width: auto;
      padding: 5rem;
      gap: 3rem;
      border-radius: 1rem;
      }
      
      main .container > p {
      font-size: 2.5rem;
      font-family: Verlag-Light;
      color: #0178d4;
      margin-bottom: 2.5rem;
      }
      
      main .container .values-container{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      }
      
      /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
      .flip-card {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      width: 260px;
      height: 240px;
      perspective: 1000px; /* Remove this if you don't want the 3D effect */
      border-radius: 1rem;
      
      }
      
      /* This container is needed to position the front and back side */
      .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      }
      
      /* Do an horizontal flip when you move the mouse over the flip box container */
      .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
      }
      
      /* Position the front and back side */
      .flip-card-front, .flip-card-back {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
      border-radius: 1.5rem;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      }
      
      
      /* Style the front side (fallback if image is missing) */
      .flip-card-front {
      background-color: #bbb;
      color: black;
      }
      
      .values-container .flip-card:nth-child(1) .flip-card-front,
      .values-container .flip-card:nth-child(2) .flip-card-front,
      .values-container .flip-card:nth-child(3) .flip-card-front {
      background: linear-gradient(90deg, rgb(13 158 205) 42%, rgb(25 82 159) 100%)
      }
      
      /* Style the back side */
      .flip-card-back {
      background-color: white;
      color: #233b8e;
      font-family: Verlag-Book;
      font-size: 1.4rem;
      transform: rotateY(180deg);
      }

      /* ===== Timeline "Nuestra Historia" — Humano Seguros =====
   Subir este archivo a la Style Library (por ejemplo /Style Library/humano/timeline.css)
   y referenciarlo con un <link rel="stylesheet"> dentro de un Script Editor Web Part
   en la misma sección de la página (el campo de contenido normal de SharePoint
   elimina las etiquetas <style> y <link> al guardar, por eso debe ir separado).

   Diseño estructural en grid: cada tarjeta se posiciona sola, sin márgenes
   negativos calculados a mano. Insertar un año nuevo arriba de la lista ya no
   desplaza ni desalinea los años existentes. */

#historia .hh-timeline,
#historia .hh-timeline * {
  box-sizing: border-box;
}

#historia .hh-timeline {
  position: relative;
  margin-top: 60px;
  padding: 10px 0 30px;
}

#historia .hh-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #888b8c;
  z-index: 0;
}

#historia .hh-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: start;
  margin-bottom: 34px;
}

#historia .hh-timeline-item:last-child {
  margin-bottom: 0;
}

#historia .hh-timeline-dot {
  grid-column: 2;
  justify-self: center;
  width: 22px;
  height: 22px;
  margin-top: 10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1c3f6e;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 3px #fff;
}

#historia .hh-timeline-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #1c3f6e;
}

#historia .hh-timeline-card {
  grid-column: 1;
  justify-self: end;
  width: 100%;
  min-width: 0;
  max-width: 440px;
  text-align: right;
}

#historia .hh-timeline-item.hh-right .hh-timeline-card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

#historia .hh-timeline-card-media {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

#historia .hh-timeline-card-media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

#historia .hh-timeline-card ul {
  margin: 0;
  padding-left: 18px;
}

#historia .hh-timeline-card ul li {
  margin-bottom: 2px;
}

@media (max-width: 767px) {
  #historia .hh-timeline::before {
    left: 20px;
    margin-left: 0;
  }
  #historia .hh-timeline-item {
    grid-template-columns: 40px 1fr;
  }
  #historia .hh-timeline-dot {
    grid-column: 1;
    margin-top: 10px;
  }
  #historia .hh-timeline-card {
    grid-column: 2 !important;
    justify-self: stretch !important;
    max-width: none;
    text-align: left !important;
  }
}