/* 
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 acerca_de_nosotros .CSS ------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* clase acerca de nosotros */
.acerca_nosotros {
  background-color: black;
  background-size: cover; /* La imagen de fondo se escala para cubrir todo el contenedor */
  background-position: center; /* Centra la imagen de fondo horizontal y verticalmente */
  background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
  position: relative; /* Permite posicionar elementos internos de forma absoluta si se necesita */
  padding: clamp(0px, 0vw, 120px) clamp(0px, 5vw, 40px); /* Espaciado interno fluido: vertical y horizontal */
  padding-bottom: clamp(20px, 13vw, 80px);  /* Le damos un espacio mas abajo para que quede simetrico con las demas secciones */
  color: #ffffff; /* Color de texto negro para asegurar contraste con el fondo */
}


/* TITULO CONTENIDO ACERCA DE NOSOTROS */

/* clase contenido acerca de nosotros */
  .contenido_nosotros {
    position: relative; /* Lo utilizamos para poder usar ligeramente top etc */
    display: flex; /* hace que el texto aparezca al lado derecho de la imagen */
    align-items: center; /* hace que la imagen y el texto esten alineado */
    justify-content: space-between; /* hace que la imagen y el texto separados */
    gap: 80px;          /* aumenta el espacio entre imagen y texto */
    max-width: 1200px;  /* hace que el texto este mas largo  */
    margin: 0 auto;     /* hace que la imagen y el texto esten centrados  */
  }

/* TITULO IMAGEN */

/* clase imagen de acerca de nosotros */
.imagen_nosotros img {
  border-radius: 27px; /* Bordes redondeados para dar estilo moderno a la imagen */
  width: clamp(200px, 80vw, 550px); /* Ancho fluido que se adapta al tamaño de pantalla */
  height: auto; /* Mantiene la proporción original de la imagen */
  display: block; /* Elimina espacios fantasmas debajo de la imagen */
}


/* TITULO TEXTO ACERCA DE NOSOTROS */

  /* clase Texto h2 de acerca de nosotros */
  .texto_nosotros h2{
  margin: 0 0 28px; /* margen inferior */
  font-size: clamp(20px, 2.6vw, 32px);  /* tamaño fluido adaptable */
  font-weight: 800;  /* peso grueso */
  text-align: center; /* Texto centrado en el contenido */
  }

/* clase Texto p de acerca de nosotros */
.texto_nosotros p {
  font-size: clamp(19px, 1.12rem, 13px); /* Tamaño de texto fluido */
  line-height: 1.8; /* Espaciado entre líneas para mejor lectura */
}

/* clase contenedor de texto */
.texto_nosotros {
  flex: 1 1 320px; /* El texto puede crecer y ocupar espacio disponible */
  min-width: 280px; /* Ancho mínimo del bloque de texto */
  font-size: 30px; /* Tamaño base del texto (puede sobrescribirse por p) */
}

/* TITULO ACORDEÓN */


/* sin estilo  */



/* - TITULO  RESPONSIVO -*/

 /* Teléfonos pequeños (iPhone SE, Android compactos) */
@media only screen and (max-width: 480px) {

  /* El contenido lo posicionamos y le damos la estetica */
  .contenido_nosotros {
    flex-direction: column; /* La imagen y contenido textual esta en modo columna */
    gap: 40px;  /* Separacion de las columnas */
  }

  /* Modificamos tamaño imagen */
  .imagen_nosotros img {
    width: 90vw;  /* Mas pequeña la imagen */
  }

  /* El contenido textual lo ajustamos */
  .texto_nosotros {
    text-align: center; /* Centramos el texto entero */
  }
  
  /* El contenido textual lo modificamos aspecto */
  .texto_nosotros p {
    font-size: clamp(16px, 1.12rem, 13px); /* Tamaño de texto fluido */
    line-height: 1.8; /* Espaciado entre líneas para mejor lectura */
  }
}


/* Teléfonos medianos (iPhone estándar, Android promedio) */
@media only screen and (min-width: 481px) and (max-width: 767px) {

  /* El contenido lo posicionamos y le damos la estetica */
  .contenido_nosotros {
    flex-direction: column; /* La imagen y contenido textual esta en modo columna */
    gap: 50px;  /* Separacion de las columnas */
  }


  /* Modificamos tamaño imagen */
  .imagen_nosotros img {
    width: 85vw;  /* Mas pequeña la imagen */
  }

  /* El contenido textual lo ajustamos */
  .texto_nosotros {
    text-align: center; /* Centramos el texto entero */
  }

  /* El contenido textual lo modificamos aspecto */
  .texto_nosotros p {
    font-size: clamp(16px, 1.12rem, 13px); /* Tamaño de texto fluido */
    line-height: 1.8; /* Espaciado entre líneas para mejor lectura */
  }
}


/* Tablets (iPad vertical, Android tablets) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  /* Contenedor general acerca nosotros */
  .contenido_nosotros {
    gap: 60px;  /* Separamos texto y imagen */
  }

  /* Ajustamos el tamaño del texto */
  .texto_nosotros p {
    font-size: clamp(17px, 1.12rem, 13px); /* Tamaño mas chico del contenido*/
  }

}

/* iPad horizontal o tablets grandes (laptops pequeños) */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {


  /* Contenedor general acerca nosotros */
  .contenido_nosotros {
    gap: 0px;  /* Separamos texto y imagen */
  }

  /* Ajustamos el tamaño de la imagen */
  .imagen_nosotros img {
    width: 50vw;  /* Mas chica el tamaño */
  }

  /* Ajustamos el texto en aspecto */
  .texto_nosotros p {
    font-size: clamp(14px, 1rem, 19px); /* Tamaño de texto fluido */
  }
}

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa acerca_de_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 
*/