/* ===========================
   ABOUT US (index integrado) — VERSION DEFINITIVA
   - No pisa body, ni menú, ni resets globales
   - Full-bleed (sin padding lateral de .section) + contenido con padding controlado
   - Testimonios + Equipo + Cierre (como la captura)
   - Vídeos en B/N + blur
   - CTA centrado
   - LinkedIn en B/N y fuera de la foto (visible siempre)
=========================== */

/* Full-bleed SOLO para esta sección (anula padding-inline global de .section) */
.section--aboutus.section{
  padding-inline: 0 !important; 
  position: relative;
}
/* Bloques internos */
.section--aboutus .aboutus__block{
  position: relative;
  padding-block: clamp(72px, 9vw, 120px);
}

/* Contenedor base (recupera padding para el contenido) */
.section--aboutus .aboutus__container{
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(24px, 6vw, 120px);
}

/* Overlay de bloques con vídeo (look claro/grisáceo) */
.section--aboutus .bg__overlay{
  background: var(--overlay-white);
  backdrop-filter: blur(2px);
}

/* Vídeo: blanco y negro + blur (solo AboutUs) */
.section--aboutus .bg__video{
  filter: grayscale(100%) blur(1.5px) brightness(1.12) contrast(0.92);
  transform: scale(1.03); /* evita bordes con blur */
}

/* ===========================
   TITULOS / TIPOGRAFIA
=========================== */

.section--aboutus .aboutus__title{
  font-family: var(--font-display);
  font-size: 6.5rem;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 1.8rem;
  color: var(--text-soft);
}

.section--aboutus .aboutus__title1{
  font-family: var(--font-display);
  font-size: 6.5rem;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 1.8rem;
  color: white;
  max-width: 100%;           /* <-- AÑADE ESTO */
  word-wrap: break-word;     /* <-- AÑADE ESTO */
  overflow-wrap: break-word; /* <-- AÑADE ESTO */
}
/* CTA centrado (vale para “SABER MÁS”, “CONTACTAR”, etc.) */
.section--aboutus .aboutus__cta{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 18px auto 0;
}

/* Por si en AboutUs usas botones alternativos */
.section--aboutus .btn-card,
.section--aboutus .contact-btn{
  display: inline-flex;
  margin-inline: auto;
}

/* =========================================================
   BLOQUE 1: TESTIMONIOS (con vídeo)
========================================================= */

.section--aboutus .aboutus__testimonials .aboutus__container{
  max-width: 1400px; /* 3 columnas cómodas */
}

.section--aboutus .aboutus__testimonials .aboutus__title{
  text-align: left;
}

/* Grid de cards */
.section--aboutus .aboutus__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 26px;
}

/* Card “glass” — MÁS PADDING (ajuste pedido) */
.section--aboutus .aboutus__card{
  background: rgba(255, 255, 255, 0.10);
  border: 2px solid rgba(255,255,255,0.85);
  padding: 42px 38px; /* + aire */
  text-align: left;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section--aboutus .aboutus__card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}

/* Textos internos */
.section--aboutus .aboutus__quote{
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 15px;
  font-style: italic;
  color: rgba(255,255,255,0.98);
}

.section--aboutus .aboutus__meta{
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 15px;
  color: rgba(255,255,255,0.92);
}

.section--aboutus .aboutus__author{
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.90);
}

.section--aboutus .aboutus__name{
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: auto;
  color: rgba(255,255,255,0.95);
}

/* Botón centrado debajo de las cards */
.section--aboutus .aboutus__testimonials .aboutus__cta{
  margin-inline: auto;
}

/* =========================================================
   BLOQUE 2: EQUIPO (claro, en medio)
========================================================= */

.section--aboutus .aboutus__team{
  background: #f8f8f8;
  color: #222;
}

.section--aboutus .aboutus__team .aboutus__title{
  color: #97928d;
  text-align: left;
  margin-bottom: 1.2rem;
}

.section--aboutus .aboutus__intro{
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
  margin: 0 0 60px;
  text-align: justify;
}

.section--aboutus .team__grid{
  display: flex;
  gap: 50px;
  justify-content: center;
  flex-wrap: nowrap; /* CAMBIO: evita que bajen a segunda fila */
  align-items: flex-start;
}

/* Ajusta el tamaño de cada miembro para que quepan 3 en una fila */
.section--aboutus .team__member{
  flex: 0 1 280px; /* CAMBIO: reduce de 320px a 280px */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Foto circular */
.section--aboutus .team__photo{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}

.section--aboutus .team__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.section--aboutus .team__photo:hover img{
  transform: scale(1.05);
}

/* LinkedIn: FUERA de la foto (debajo), visible y B/N */
.section--aboutus .team__linkedin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.25);
  margin: 10px 0 12px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.section--aboutus .team__linkedin:hover{
  transform: scale(1.12);
  background: rgba(0,0,0,0.04);
}

/* SVG: forzamos gris (esto evita el fill inline azul) */
.section--aboutus .team__linkedin svg{
  width: 20px;
  height: 20px;
  display: block;
  filter: grayscale(100%);
  opacity: 0.85;
}

.section--aboutus .team__linkedin svg path{
  fill: #555 !important;
}

.section--aboutus .team__linkedin:hover svg path{
  fill: #111 !important;
}

/* Nombre y descripción */
.section--aboutus .team__name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: #222;
  margin: 6px 0 10px;
}

.section--aboutus .team__desc{
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  max-width: 320px;
  margin: 0;
}

/* =========================================================
   BLOQUE 3: CIERRE (con vídeo)
========================================================= */

.section--aboutus .aboutus__closing .aboutus__container{
  max-width: 1400px;
}

/* Frase final: más legible (ajuste pedido) */
.section--aboutus .aboutus__closingText{
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 1.15;          /* + aire */
  max-width: 1100px;          /* evita líneas eternas */
  margin: 0 auto 1.6rem;
  padding-inline: 24px;       /* aire lateral */
  color: rgba(80,80,80,0.85);
  text-shadow: 0 2px 10px rgba(255,255,255,0.25);
  text-align: center;
}

/* Botón centrado debajo de la frase */
.section--aboutus .aboutus__closing .aboutus__cta{
  margin-inline: auto;
}

/* ===========================
   RESPONSIVE (alineado a tu proyecto)
=========================== */

@media (max-width: 1200px){
  .section--aboutus .aboutus__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section--aboutus .aboutus__title{
    font-size: 3.5rem;
  }

  .section--aboutus .aboutus__closingText{
    font-size: 3.2rem;
    line-height: 1.22;
    padding-inline: 18px;
  }
}
/* Asegura que en tablets sí bajen a columna */
@media (max-width: 968px){
  .section--aboutus .team__grid{
    flex-wrap: wrap; /* En tablets permite wrap */
  }
}

@media (max-width: 968px){
  .section--aboutus .aboutus__intro{
    font-size: 1rem;
  }

  .section--aboutus .team__grid{
    gap: 40px;
  }

  .section--aboutus .team__photo{
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 768px){
  /* suaviza un pelín el filtro en móvil */
  .section--aboutus .bg__video{
    filter: grayscale(100%) blur(1.1px) brightness(1.10) contrast(0.93);
    transform: scale(1.02);
  }

  
  @media (max-width: 768px){
  .section--aboutus .aboutus__title,
  .section--aboutus .aboutus__title1{
    font-size: 2.7rem;  /* <-- Asegúrate que esté aquí */
  }
}

@media (max-width: 480px){
  .section--aboutus .aboutus__title,
  .section--aboutus .aboutus__title1{
    font-size: 2.2rem;  /* <-- Y aquí también */
  }
}

  .section--aboutus .aboutus__closingText{
    font-size: 2.6rem;
  }

  /* padding de cards en móvil */
  .section--aboutus .aboutus__card{
    padding: 32px 26px;
  }
}

@media (max-width: 600px){
  /* “un poquito de margen” en móvil sin perder full-bleed del fondo */
  .section--aboutus .aboutus__container{
    padding-inline: 22px;
  }
}

@media (max-width: 480px){
  .section--aboutus .aboutus__title{
    font-size: 2.2rem;
  }

  .section--aboutus .team__photo{
    width: 150px;
    height: 150px;
  }

  .section--aboutus .aboutus__closingText{
    font-size: 2.1rem;
    padding-inline: 16px;
  }

  .section--aboutus .aboutus__intro{
    text-align: left;
    font-size: 0.95rem;
  }

  .section--aboutus .aboutus__container{
    padding-inline: 18px;
  }
}
/* ===========================
   FIXES: mobile padding + 3 cards en desktop
=========================== */

/* 1) Asegura margen lateral en móvil (no full edge para el contenido) */
.section--aboutus .aboutus__container{
  /* por si algún CSS lo pisa */
  padding-inline: clamp(68px, 5vw, 160px) !important;
}

/* 2) El bloque de testimonios necesita ancho REAL para 3 cards */
.section--aboutus .aboutus__testimonials .aboutus__container{
  max-width: 1400px !important;
}

/* 3) Fuerza 3 columnas en pantallas grandes */
@media (min-width: 1100px){
  .section--aboutus .aboutus__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 4) Ajuste fino del gap para que entren mejor sin “saltos” */
.section--aboutus .aboutus__grid{
  gap: 26px !important;
}

/* 5) Solo baja a 1 columna cuando de verdad es tablet/móvil */
@media (max-width: 1099px){
  .section--aboutus .aboutus__grid{
    grid-template-columns: 1fr !important;
  }
}

/* 6) Si tu .bg__content limita ancho (a veces pasa), lo abrimos en AboutUs */
.section--aboutus .bg__content{
  width: 100%;
}