/* ===== Sección 2: ¿Qué es? ===== */
.section-que-es{
  position: relative;
  /*padding: clamp(56px, 8vw, 96px) 0;*/
  padding: clamp(56px, 7vw, 88px) 0 6vh;
  background: url("../../images/misc/fondo-2.webp") center/cover no-repeat;
  --floor: 50px;
  overflow: hidden;
}

/* Grid 2 columnas */
.que-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start; /* la imagen ocupa la misma altura que el texto */
}

/* Cada columna se alinea al inicio, sin estirar la fila */
.que-left,
.que-right{
  align-self: start;
}

/* ----- Columna izquierda ----- */
.que-title{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.que-logo-inline{
  height: 1em;         /* mismo alto que el texto */
  transform: translateY(2px);
}

.que-text {
  max-width: 56ch;
  margin: 5% 40px 22px 0;
  opacity: 1;
  font-size: 22px;
}

.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;           /* fila / columna */
  align-items: flex-start;
}

.glass-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: nowrap;      /* ajusta al texto */
  background: linear-gradient(103.53deg,
              rgba(27,148,214,0.20) 1.86%,
              rgba(88,73,144,0.20) 50%,
              rgba(206,97,116,0.20) 98.14%);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px) saturate(1.05);
}

.chip-icon{ width: 18px; height: 18px; opacity: .95; }

/* el separador ocupa una “columna” completa y fuerza salto */
.chip-break{
  flex-basis: 100%;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* ----- Columna derecha (imagen) ----- */
.que-right{
  display: flex;
  justify-content: flex-end;
  align-self: start;
}

.que-media{
  position: relative;
  height: auto;
  max-width: 72vh;
  margin-right: calc((100vw - var(--container)) / -2.25); /* sangra hasta el borde */
  overflow: hidden;
  border-radius: 14px 0 0 14px; /* suaviza la unión al contenido */
}
.que-media img{
  opacity: 0;
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  max-height: inherit; 
  object-fit: cover;
  object-position: center right;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.45));
}

.separator {display: none;}

/* ===== Tablet (<=1024px) ===== */
@media (min-width: 721px) and (max-width: 1200px){
  .section-que-es{  
    position: relative; padding-top: 52px; 
    padding-bottom: 58px;
    background: url("../../images/misc/fondo-2.webp");
    background-position: center bottom;
    background-size: 145% auto; /* <-- Aquí ajustas el ancho al 100% */
    background-repeat: no-repeat;
    background-color: linear-gradient(61.22deg, #201647 -6.14%, #010007 63.98%);
  }

  .que-title{ font-size: clamp(26px, 7.4vw, 34px); }
  .que-text {
    font-size: 20px;
    line-height: 155%;
    margin: 5% 25px 22px 0;
  }

  /* En mobile: solo título, texto e imagen */
  .chips{ display: none; }

  .separator {
    display: none;
  }

  .que-media{
    height: clamp(220px, 46vh, 520px);
    margin-right: calc((100vw - 92vw) / -1); /* “pega” a la derecha dentro del 92vw */
    margin-bottom: var(--floor);
    border-radius: 10px 0 0 10px;
  }

  .que-media img{
    width: 130%;
    height: 100%;
    object-position: 80% center;   /* se prioriza el lado derecho */
  }

  /* Mostrar chips y convertirlos en lista vertical */
  .chips {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      margin-top: 20px;
      position: relative;
      z-index: 3;
      padding-top: 0;
      margin-bottom: -45vh;
    }

  .chip-break {
    display: none;
  }

  /* Pill full-width visual (sin ocupar de borde a borde) */
  .glass-chip{
    width: fit-content;     /* deja 6px por lado */
    padding: 12px 16px 12px 14px; /* un pelín más altos */
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(1.15);
    background: linear-gradient(103.53deg,
                rgba(27,148,214,0.60) 1.86%,
                rgba(88,73,144,0.60) 50%,
                rgba(206,97,116,0.60) 98.14%);
    box-shadow:
      0 8px 26px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.25);
    gap: 10px;
  }

  /* Ícono dentro de burbuja circular con glow */
  .glass-chip .chip-icon{
    width: 30px; height: 30px;
    padding: 1px;                /* crea la “burbuja” */
    border-radius: 999px;
    opacity: 1;
  }

  /* Texto del chip un poco más fuerte como en el mock */
  .glass-chip span{
    font-weight: 400;
    letter-spacing: .2px;
    font-size: 20px;
  }

  /* La imagen: un poco más alta para que conviva con los chips */
  .que-media{
    height: clamp(260px, 50vh, 540px);
    margin-right: calc((100vw - 92vw) / -1); /* pegada a la derecha */
  }

  /* Ajustes de respiración generales de la sección */
  .section-que-es{
    padding-top: 52px;
    padding-bottom: 58px;
  }

  .que-title-xl .que-logo-inline {
    height: 0.75em;
    width: auto;
    transform: translateY(0.04em);
  }

  .que-title-xl .qmark {
    font-weight: 700;
    line-height: 1;
    transform: translateY(0.02em);
    font-size: 70px;
  } 

  .que-grid {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }
}

/* ===== Mobile (<=720px) ===== */
@media (max-width: 720px){
  .que-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }
  .section-que-es{  
    position: relative; padding-top: 52px; 
    padding-bottom: 58px;
    background: url("../../images/misc/fondo4\ \(3\).webp") !important;
    background-position: center bottom !important;
    background-size: 100% auto !important; /* <-- Aquí ajustas el ancho al 100% */
    background-repeat: no-repeat;
  }

  .que-title{ font-size: clamp(26px, 7.4vw, 34px); }
  .que-text {
    font-size: 20px;
    line-height: 155%;
    margin: 5% 25px 22px 0;
  }

  /* En mobile: solo título, texto e imagen */
  .chips{ display: none; }

  .separator {
    display: block;
    height: 20vh;
  }

  .que-media{
    height: clamp(220px, 46vh, 520px);
    margin-right: calc((100vw - 92vw) / -1); /* “pega” a la derecha dentro del 92vw */
    margin-bottom: var(--floor);
    border-radius: 10px 0 0 10px;
  }
  .que-media img{
    width: 130%;
    height: 100%;
    object-position: 80% center;   /* se prioriza el lado derecho */
  }
}

/* Accesibilidad (screen-reader only) */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Título en 2 líneas y 2.5x más grande (desktop) */
.que-title-xl{
  font-size: clamp(60px, 9vw, 100px);  /* 2.5x respecto a 48px */
  line-height: .92;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}
.que-title-xl .line-1,
.que-title-xl .line-2{ display:block; }

.que-title-xl .line-2{
  display:flex; align-items:center; gap: 8px;
}

/* El logo escala con el texto */
.que-title-xl .que-logo-inline{
  height: 0.8em;        /* igual al alto del texto de esta línea */
  width: auto; 
  transform: translateY(0.04em);
}

/* Ajuste del signo de interrogación */
.que-title-xl .qmark{
  font-weight: 700;
  line-height: 1;
  transform: translateY(0.04em);
  font-size: 120px;
}

/* ===== Mobile layout de ¿Qué es? (<= 640px) ===== */
@media (max-width: 720px){

  /* Mostrar chips y convertirlos en lista vertical */
  .chips {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-top: -18px;
      position: relative;
      z-index: 3;
      padding-top: 0;
      margin-bottom: -45vh;
    }

  .chip-break {
    display: none;
  }

  /* Pill full-width visual (sin ocupar de borde a borde) */
  .glass-chip{
    width: fit-content;     /* deja 6px por lado */
    padding: 12px 16px 12px 14px; /* un pelín más altos */
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(1.15);
    background: linear-gradient(103.53deg,
                rgba(27,148,214,0.20) 1.86%,
                rgba(88,73,144,0.20) 50%,
                rgba(206,97,116,0.20) 98.14%);
    box-shadow:
      0 8px 26px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.25);
    gap: 10px;
  }

  /* Ícono dentro de burbuja circular con glow */
  .glass-chip .chip-icon{
    width: 30px; height: 30px;
    padding: 1px;                /* crea la “burbuja” */
    border-radius: 999px;
    opacity: 1;
  }

  /* Texto del chip un poco más fuerte como en el mock */
  .glass-chip span{
    font-weight: 400;
    letter-spacing: .2px;
    font-size: 20px;
  }

  /* La imagen: un poco más alta para que conviva con los chips */
  .que-media{
    height: clamp(260px, 50vh, 540px);
    margin-right: calc((100vw - 92vw) / -1); /* pegada a la derecha */
  }

  /* Ajustes de respiración generales de la sección */
  .section-que-es{
    padding-top: 52px;
    padding-bottom: 58px;
  }

  .que-title-xl .que-logo-inline {
    height: 0.75em;
    width: auto;
    transform: translateY(0.04em);
  }

  .que-title-xl .qmark {
    font-weight: 700;
    line-height: 1;
    transform: translateY(0.02em);
    font-size: 70px;
  } 
}

/* Sección ¿Qué es? */
#section-que-es{
  padding-block-end: 5vh;
}