/* =========================
   BASE
   ========================= */

#sobre-isara {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  color: #141414;
  line-height: 1.6;
}

.about-section {
  padding: 5rem 1.5rem;
}

.about-section p {
  max-width: 65ch;
  color: #555;
}

/* =========================
   INTRO
   ========================= */

.about-intro {
  display: grid;
  gap: 3rem;
}

.about-intro h1 {
  font-size: clamp(2.4rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
}

.about-intro p {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.about-image {
  display: none;
}

/* =========================
   TEXTO GENERAL
   ========================= */

.purpose-grid{
    display: flex;
    text-align: center;
    flex-direction: column;
}
.purpose-block{
    width: 80vw;
    margin: 1rem;
    text-align: left;
    background-color: #eeeeeed8;
    padding: 2rem;
    border-radius: 2rem;
}
.purpose-block div {
    position: relative;
    display: flex;
    align-items: center;
}

.purpose-img{
    width:  3rem;
    height: 3rem;
    position: absolute;
    right: 0;
}
.about-text h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.about-text p {
  margin-bottom: 1.25rem;
}

/* =========================
   SECCIÓN PENSAMIENTO
   ========================= */

.about-thinking {
  background: #fafafa;
}

/* =========================
   ANÁLISIS / IMAGEN + TEXTO
   ========================= */

.about-analysis {
  display: grid;
  gap: 3rem;
}

.about-analysis ul {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
}

.about-analysis li {
  margin-bottom: 0.5rem;
}

/* =========================
   HACEMOS / NO HACEMOS
   ========================= */

.about-scope {
  background: #f5f5f5;
}

.about-columns {
  display: grid;
  gap: 3rem;
}

.about-column h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.about-column ul {
  list-style: none;
  padding: 0;
}

.about-column li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: #555;
}

.about-column li::before {
  content: "–";
  position: absolute;
  left: 0;
}

/* =========================
   PROCESO
   ========================= */

.about-process {
  max-width: 900px;
  margin: 0 auto;
}

.process-block {
  border-left: 2px solid #e5e7eb;
  padding-left: 1.5rem;
  margin-top: 2rem;
}

.process-block h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* =========================
   CIERRE
   ========================= */

.about-close {
  text-align: center;
  background: #fafafa;
}

.about-close p {
  font-size: 1.1rem;
  margin: 0 auto;
}

/* =========================
   RESPONSIVE DESKTOP
   ========================= */

@media (min-width: 900px) {
  
.purpose-grid{
    display: flex;
    text-align: center;
}
.purpose-block{
    width: 45vw;
    margin: 1rem;
    text-align: left;
    background-color: #eeeeeed8;
    padding: 2rem;
    border-radius: 2rem;
}
.purpose-block div {
    position: relative;
    display: flex;
    align-items: center;
}

.purpose-img{
    width:  3rem;
    height: 3rem;
    position: absolute;
    right: 0;
}
.about-image {
    display: block;
  width: 100%;
  min-height: 260px;
  border-radius: 12px;
}

  .about-section {
    padding: 7rem 2rem;
  }

  .about-intro {
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }

  .about-thinking,
  .about-process {
    max-width: 900px;
    margin: 0 auto;
  }

  .about-analysis {
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }

  .about-columns {
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
  }

  .about-close {
    padding: 6rem 2rem;
  }
}