/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/

/*<-- ------------------------------------------------------------------------------------------------------------
      ------------------------------------- INICIO ITred Spa sobre_nosotros .CSS ---------------------------------
      ------------------------------------------------------------------------------------------------------------ -->*\

/* TITULO SECCION SOBRE NOSOTROS */

  /* clase contenido cuadricula */
  .contenido_cuadricula {
    display: grid; /* Usa grid layout para organizar las tarjetas */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Crea columnas flexibles que se adaptan al ancho disponible */
    gap: 4rem; /* Espacio entre cada tarjeta */
    padding: 4rem 4rem 1.5rem 4rem; /* Crea un espacio al rededor (arriba, derecha, abajo, izquierda) */
    justify-items: center; /* Centra cada tarjeta dentro de su celda */
    background-color: #000000;  /* Agregamos un fondo negro en la seccion */
  }


/* TITULO TARJETA GRANDE */

  /* clase tarjeta grande */
  .tarjeta_grande {
    aspect-ratio: 1 / 1; /* Mantiene proporción cuadrada */
    height: 320px;  /* Hacemos mas pequeña la altura de la tarjeta */
    width: 100%;  /* Ponemos al 100% el ancho */
    position: relative; /* lo mantenemos en su seccion pero moviendose con; top etc */
    border-radius: 12px;  /* Borde al rededor de la tarjeta */
    background-image: url(../imagenes/sobre_nosotros/Tarjeta.webp);
    background-size: cover; /* La imagen sigue a la tarjeta */
    background-position: center;  /* Se centra la imagen */
    background-repeat: no-repeat; /* Por si la imagen se llegara a repetir en el fondo */
  }


  /* clase tarjeta grande Fondo con pseudo-elemento */
  .tarjeta_grande::before {
    content: ""; /* Crea un fondo adicional detrás del contenido */
    position: absolute; /* Se posiciona dentro de la tarjeta */
    inset: 0; /* Ocupa todo el espacio del contenedor */
    border-radius: 12px; /* Bordes redondeados */
    z-index: 0; /* Se ubica detrás del contenido */
    transition: background 0.5s ease; /* Transición suave al hacer hover */
  }

  /* Hover sobre tarjeta grande: cambia el fondo */
  .tarjeta_grande:hover::before {
    background: linear-gradient(135deg, #b6b6b6, #8b8787); /* Fondo degradado al hacer hover */
  }

  /* Hover sobre imagen busto */
  .tarjeta_grande:hover .busto_img {
    transform: translateX(-50%) translateY(-20px) scale(1.05); /* Sube y agranda la imagen */
    filter: brightness(1.1); /* Aumenta el brillo */
  }

  /* Hover sobre botón ícono */
  .tarjeta_grande:hover .ícono_Boton {
    background: #fff; /* Cambia el fondo del botón */
    transform: translateY(-5px); /* Sube ligeramente el botón */
  }


/* TITULO IMAGEN PRINCIPAL */

  /* clase busto_img es la estatua */
  .busto_img {
    width: 80%; /* Mantiene proporción dentro de la tarjeta */
    position: absolute; /* Podemos hacer que se mueva libremente */
    top: 50%;  /* Parte desde el centro vertical del contenedor */
    left: 50%;  /* Centrado en su contenedor */
    transform: translateX(-50%) translateY(-60%); /* Centrado perfecto con ligera elevación */
    transition: transform 0.5s ease, filter 0.5s ease;
  }

  /* Un posicionamiento con el hover  */
  .tarjeta_grande:hover .busto_img {
    transform: translateX(-50%) translateY(-110%) scale(1.05); /* Eleva más la imagen y la agranda ligeramente */
    filter: brightness(1.1);  /* Aumenta el brillo para destacar la imagen */
  }

  /* clase Botón con ícono "+" */
  .ícono_Boton {
    position: absolute; /* Posiciona el botón dentro de la tarjeta */
    right: 1rem; /* Lo ubica a la derecha */
    bottom: 1rem; /* Lo ubica abajo */
    background: #a8f0c6; /* Color de fondo verde claro */
    border-radius: 50%; /* Botón circular */
    width: 48px; /* Ancho del botón */
    height: 48px; /* Alto del botón */
    display: flex; /* Usa flexbox para centrar el ícono */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor tipo mano */
    transition: transform 0.3s ease, background 0.3s ease; /* Animaciones suaves */
    z-index: 3; /* Se ubica por encima de todo */

  }

  /* clase imagen dentro del botón */
  .ícono_Boton img {
    width: 24px; /* Tamaño del ícono */
    height: 24px; /* Tamaño del ícono */
  }

/* TITULO TARJETA CHICA */

  /* clase tarjeta chica */
  .tarjeta_chica {
    text-align: center; /* Centra el texto */
    margin-bottom: 3rem; /* Espacio entre tarjetas chicas */
  }

  /* clase tarjeta chica de texto h3 */
  .tarjeta_chica h3 {
    font-size: 1.6rem; /* Tamaño del título */
    color: #fff; /* Color blanco */
  }

/* RESPONSIVO SOBRE NOSOTROS */


  /* 🔹 pantalla de teléfono -- pantallas pequeñas (máximo 767 px de ancho) */
  @media only screen and (max-width: 767px) {

  /* Contenedor principal de las tarjetas */
  .contenido_cuadricula {
    display: flex !important;           /* Se usa flexbox para controlar el orden de los elementos */
    flex-direction: column !important;  /* Las tarjetas se apilan verticalmente en una sola columna */
    gap: 2rem !important;               /* Se deja un espacio de 2rem entre cada tarjeta */
  }

  /* Efecto hover sobre la imagen del busto */
  .tarjeta_grande:hover .busto_img {
    transform: translateY(-50%) scale(1.05); /* Eleva y agranda ligeramente la imagen */
    filter: brightness(1.1);                 /* Aumenta el brillo para destacar */
  }

  /* Imagen del busto dentro de la tarjeta grande */
  /* 1 telefono chico */
  .busto_img {
    position: absolute;                     /* Posicionamiento absoluto respecto a la tarjeta */
    top: -40px;                             /* La imagen sobresale 40px por encima del borde superior */
    left: 50%;                              /* Centra horizontalmente respecto al contenedor */
    transform: translateY(-50%);            /* Ajusta la posición vertical para centrar mejor */
    max-width: 200px;                       /* Limita el ancho máximo de la imagen */
    transition: transform 0.5s ease, filter 0.5s ease; /* Animación suave al hacer hover */
    z-index: 2;                             /* Se asegura de que esté por encima de otros elementos */
    pointer-events: none;                   /* Evita que la imagen intercepte clics o eventos */
  }

  /* Botón con ícono en versión móvil */
  .ícono_Boton {
    width: 32px;        /* Tamaño reducido para adaptarse a pantallas pequeñas */
    height: 32px;       /* Mantiene proporción cuadrada */
  }

  /* Imagen dentro del botón */
  .ícono_Boton img {
    width: 16px;        /* Ícono más pequeño para mejor visualización en móviles */
    height: 16px;       /* Mantiene proporción cuadrada */
  }

  /* Título dentro de tarjeta chica */
  .tarjeta_chica h3 {
    font-size: 1.1rem;  /* Tamaño de fuente reducido para mejor adaptación */
  }
}
  
  /* 🔹 Teléfonos medianos (481px–767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

  /* Tarjetas chicas (textos) */
  .tarjeta_chica {
    margin-bottom: 3.5rem;         /* Espacio inferior entre tarjetas chicas para separar visualmente los bloques de texto */
  }

  /* Imagen del busto dentro de la tarjeta grande */
  .busto_img {
    position: relative; /* Se posiciona de forma relativa dentro del contenedor */
    top: auto; /* Se elimina cualquier desplazamiento vertical anterior */
    left: auto; /* Se elimina cualquier desplazamiento horizontal anterior */
    transform: none; /* Se elimina cualquier transformación previa (como translate o scale) */
    margin: 0 auto; /* Se centra horizontalmente */
  }

  /* Botón con ícono en teléfonos medianos */
  .ícono_Boton {
    width: 36px;  /* Tamaño intermedio del botón (más grande que en móviles pequeños) */
    height: 36px;  /* Mantiene proporción cuadrada */
  }

  /* Imagen dentro del botón */
  .ícono_Boton img {
    width: 18px; /* Ícono también en tamaño intermedio */
    height: 18px;  /* Mantiene proporción cuadrada */
  }

  /* Título dentro de tarjeta chica */
  .tarjeta_chica h3 {
    font-size: 1.2rem; /* Título ligeramente más grande para mejorar legibilidad en pantallas medianas */
  }
}

  /* 🔹 Tablets verticales (768px–1024px) */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {

  /* 🔹 Contenedor principal de las tarjetas */
  .contenido_cuadricula {
    display: grid;  /* Se usa grid layout en lugar de flex para mayor control */
    gap: 2rem;  /* Espacio entre las tarjetas (horizontal y vertical) */
    padding: 4rem 2rem; /* Espaciado interno: 4rem arriba/abajo y 2rem a los lados */
  }

  /* 🔹 Tarjeta grande (imagen principal) */
  .tarjeta_grande {
    overflow: visible; /* Permite que elementos hijos sobresalgan del contenedor */
    max-width: 320px; /* Limita el ancho máximo a 320px */
    margin: 0 auto 2rem auto; /* Centra horizontalmente y deja espacio inferior */
  }

  /* 🔹 Animación vertical al hacer hover sobre la tarjeta grande */
  .tarjeta_grande:hover .busto_img {
    transform: translateY(-30%) scale(1.05); /* Eleva la imagen y la agranda ligeramente */
    filter: brightness(1.1);                 /* Aumenta el brillo para destacar la imagen */
  }

  /* 🔹 Imagen del busto dentro de la tarjeta grande */
  .busto_img {
    max-width: 200px; /* Limita el ancho máximo a 200px */
    height: 200px; /* Altura fija para mantener proporción */
    object-fit: contain; /* Ajusta la imagen sin recortarla ni deformarla */
    top: auto; /* Elimina cualquier desplazamiento vertical anterior */
    left: auto; /* Elimina cualquier desplazamiento horizontal anterior */
    transform: none; /* Elimina transformaciones previas (como translate o scale) */
  }

  /* 🔹 Botón con ícono dentro de la tarjeta */
  .ícono_Boton {
    width: 42px; /* Tamaño del botón adaptado para tablets */
    height: 42px;  /* Mantiene proporción cuadrada */
    position: absolute; /* Posicionamiento absoluto dentro de la tarjeta */
    bottom: 1rem; /* Se ubica 1rem desde el borde inferior */
    right: 1rem; /* Se ubica 1rem desde el borde derecho */
    z-index: 3; /* Se asegura de estar por encima de la imagen */
  }

  /* 🔹 Imagen dentro del botón */
  .ícono_Boton img {
    width: 20px; /* Ícono ligeramente más grande que en móviles */
    height: 20px; /* Mantiene proporción cuadrada */
  }

  /* 🔹 Título dentro de tarjeta chica */
  .tarjeta_chica h3 {
    font-size: 1.2rem;  /* Título más grande para mejor legibilidad en tablets */
  }

}

  /* 🔹 Pantallas medianas (hasta 1024px) */  
  @media screen and (max-width: 1024px) {

  /* 🔹 Estilos para la tarjeta grande */
  .tarjeta_grande {
    display: flex; /* Usa flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
  }

  /* Posicionamos la imagen en el centro */
  .busto_img {
    position: relative; /* Se posiciona de forma relativa dentro del contenedor */
    top: auto; /* Elimina cualquier desplazamiento vertical anterior */
    left: auto; /* Elimina cualquier desplazamiento horizontal anterior */
    transform: none; /* Elimina transformaciones previas (como translate o scale) */
    margin: auto; /* Centra horizontalmente */
  }
}

  /* 🔹 Tablets horizontales o laptops pequeños (1025px–1280px) */
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {

  /* 🔹 Tarjetas chicas (bloques de texto) */
  .tarjeta_chica {
    margin-bottom: 3rem;  /* Espacio inferior entre tarjetas chicas para separar visualmente los bloques */
  }

  /* 🔹 Imagen del busto dentro de la tarjeta grande */
  .busto_img {
    position: relative; /* Se posiciona de forma relativa dentro del contenedor */
    display: block; /* Se comporta como un bloque para poder centrar con margin */
    margin: auto; /* Centra horizontalmente */
    aspect-ratio: 1 / 1;  /* Mantiene proporción cuadrada */
  }

  /* 🔹 Botón con ícono en pantallas grandes */
  .ícono_Boton {
    width: 48px;  /* Botón más grande para pantallas amplias */
    height: 48px; /* Alto igual al ancho para mantener forma circular */
  }

  /* 🔹 Imagen dentro del botón */
  .ícono_Boton img {
    width: 24px;  /* Ícono más grande para mejor visibilidad */
    height: 24px; /* Mantiene proporción cuadrada */
  }

  /* 🔹 Título dentro de tarjeta chica */
  .tarjeta_chica h3 {
    font-size: 1.5rem;  /* Título más grande para jerarquía visual clara en pantallas amplias */
  }

}

/*<-- ----------------------------------------------------------------------------------------------------------
      ----------------------------------- FIN ITred Spa sobre_nosotros .CSS ------------------------------------
      ---------------------------------------------------------------------------------------------------------- -->*\


/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/