/* =========================================================
QUIÉNES SOMQUIÉNES SOMOS — ESTILO EDITORIAL (B2B PREMIUM)
========================================================= */

/* -------------------------
BLOQUE 1 — INTRO EDITORIAL
------------------------- */

.qs-intro{
  padding: 6rem 0 5rem;
}

.qs-intro__inner{
  max-width: 760px;
}

.qs-intro__title{
  margin-top: 1rem;
  line-height: 1.15;
}

.qs-intro__lead{
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 68ch;
  color: var(--muted);
}


/* -----------------------------------------------
BLOQUE 2 — IMAGEN CONTEXTUAL + TEXTO TÉCNICO
------------------------------------------------ */

.qs-context{
  padding: 5.5rem 0 5.5rem;
}

.qs-context__inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.qs-context__title{
  margin-bottom: 1rem;
  line-height: 1.2;
}

.qs-context__text p{
  margin-top: 1rem;
  max-width: 60ch;
}

.qs-context__image img{
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(2,6,23,.22);
}


/* -------------------------------
BLOQUE 3 — MÉTODO DE TRABAJO
-------------------------------- */

.qs-method{
  padding: 6rem 0 5.5rem;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    var(--surface-2) 100%
  );
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.qs-method__title{
  max-width: 520px;
  margin-bottom: 3rem;
}

.qs-method__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.5rem;
}

.qs-method__list h3{
  margin-bottom: .35rem;
  line-height: 1.25;
}

.qs-method__list p{
  max-width: 64ch;
  margin: 0;
}


/* -----------------------------------
BLOQUE 4 — QUÉ NOS DIFERENCIA
------------------------------------ */

.qs-difference{
  padding: 5.5rem 0 4.5rem;
}

.qs-difference__title{
  margin-bottom: 2rem;
}

.qs-difference__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  max-width: 540px;
}

.qs-difference__list li{
  position: relative;
  padding-left: 1.6rem;
}

.qs-difference__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--gold),
    rgba(201,164,76,.25)
  );
}


/* -----------------------------
BLOQUE 5 — CIERRE SERENO
------------------------------ */

.qs-close{
  padding: 5rem 0 6rem;
}

.qs-close__inner{
  max-width: 720px;
}

.qs-close__text{
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.qs-close__link a{
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(201,164,76,.6);
  text-underline-offset: 4px;
}


/* -----------------------------
RESPONSIVE
------------------------------ */

@media (max-width: 900px){
  .qs-context__inner{
    grid-template-columns: 1fr;
  }

  .qs-context__image{
    order: -1;
  }
}

@media (max-width: 768px){
  .qs-intro{
    padding: 4.5rem 0 4rem;
  }

  .qs-method{
    padding: 4.5rem 0;
  }

  .qs-close{
    padding: 4.5rem 0;
  }
}

/* =========================================================/*-bottom: 5.5rem;
}

/* Cierre sereno con separación visual */
.qs-close{
  border-top: 1px solid var(--border);
  background: linear-gradient(#ffffff, #f9fafb);
}


/* =========================================================
QUIÉNES SOMOS — NUESTRA FORMA DE TRABAJAR (CHECKLIST TÉCNICO)
========================================================= */

/* Contenedor general */
.qs-method{
  padding: 6.5rem 0 6.5rem;
  background: #ffffff;
}

.qs-method__inner{
  max-width: 860px;
}

/* Encabezado editorial */
.qs-method__header{
  max-width: 720px;
  margin-bottom: 3.5rem;
}

.qs-method__title{
  margin-top: .75rem;
  line-height: 1.15;
}

.qs-method__lead{
  margin-top: 1.15rem;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Lista */
.qs-method__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.75rem;
}

/* Ítem */
.qs-method__item{
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 1.25rem;
  align-items: flex-start;
}

/* Check técnico */
.qs-method__check{
  font-size: .9rem;
  line-height: 1.4;
  color: #6f7a86;
  margin-top: .25rem;
}

/* Contenido */
.qs-method__content{
  max-width: 640px;
}

.qs-method__item-title{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.qs-method__item-text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px){
  .qs-method{
    padding: 5rem 0 5rem;
  }

  .qs-method__header{
    margin-bottom: 3rem;
  }

  .qs-method__list{
    gap: 2.25rem;
  }
}

/* =========================================================
QUIÉNES SOMOS — AJUSTE PREMIUM NUESTRA FORMA DE TRABAJAR
========================================================= */

/* 1) Limpieza: ocultar cualquier residuo visual no deseado */
.qs-method__header span:not(.section-eyebrow){
  display: none;
}

/* 2) Encabezado más editorial y contenido */
.qs-method__header{
  padding-bottom: 1.5rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* 3) Título con más presencia */
.qs-method__title{
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

/* 4) Lead más elegante */
.qs-method__lead{
  font-size: 1.02rem;
  color: rgba(15,23,42,.65);
}

/* 5) Checklist: mejor alineación óptica */
.qs-method__list{
  margin-top: 0;
  padding-left: .25rem;
}

/* 6) Ítems con ritmo más profesional */
.qs-method__item{
  column-gap: 1.4rem;
}

/* 7) Check más técnico y fino */
.qs-method__check{
  font-size: .85rem;
  color: rgba(15,23,42,.55);
  position: relative;
  top: .15rem;
}

/* 8) Títulos de ítems más sólidos */
.qs-method__item-title{
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

/* 9) Texto ligeramente más legible */
.qs-method__item-text{
  font-size: .97rem;
  color: rgba(15,23,42,.7);
}

/* =========================================================
QUIÉNES SOMOS — NUESTRA FORMA DE TRABAJAR (PREMIUM REAL)
========================================================= */

/* Bloque con identidad propia */
.qs-method{
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f9fafb 100%
  );
  padding: 7.5rem 0;
}

/* Encabezado editorial más fuerte */
.qs-method__header{
  max-width: 760px;
  margin-bottom: 5rem;
  position: relative;
}

/* Línea editorial sutil */
.qs-method__header::before{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(201,164,76,.9),
    rgba(201,164,76,.3)
  );
  margin-bottom: 1.25rem;
}

/* Título con presencia */
.qs-method__title{
  font-size: clamp(2.2rem, 3vw, 2.6rem);
  letter-spacing: -0.025em;
}

/* Lead más autoritario */
.qs-method__lead{
  margin-top: 1.4rem;
  font-size: 1.05rem;
  color: rgba(15,23,42,.7);
}

/* Lista como “fichas técnicas” */
.qs-method__list{
  border-left: 2px solid rgba(15,23,42,.08);
  padding-left: 3rem;
}

/* Cada ítem = etapa clara */
.qs-method__item{
  position: relative;
  padding-left: .5rem;
}

/* Check alineado y con peso */
.qs-method__check{
  color: rgba(15,23,42,.55);
  font-size: .9rem;
}

/* Títulos de etapa */
.qs-method__item-title{
  font-size: 1.12rem;
  font-weight: 900;
}

/* Texto más legible */
.qs-method__item-text{
  font-size: .97rem;
  line-height: 1.65;
}

/* Más separación entre etapas */
.qs-method__item + .qs-method__item{
  margin-top: 2.75rem;
}

/* Responsive */
@media (max-width: 768px){
  .qs-method{
    padding: 5.5rem 0;
  }

  .qs-method__list{
    padding-left: 1.75rem;
  }
}

/* =========================================================
QUIÉNES SOMOS — NUESTRA FORMA padding: 6.5rem 0 6.5rem;QUIÉNES SOMOS — NUESTRA FORMA DE TRABAJAR (MARCO DORADO)
  background: #ffffff;
  position: relative;
}

/* Contenedor MÁS estrecho para sensación premium */
.qs-method__inner{
  max-width: 760px;
  position: relative;
  padding-left: 2.25rem;
}

/* Marco dorado técnico (parcial, elegante) */
.qs-method__inner::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(201,164,76,.9),
    rgba(201,164,76,.25)
  );
}

/* Encabezado editorial */
.qs-method__header{
  margin-bottom: 3.75rem;
}

.qs-method__title{
  font-size: clamp(2rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}

.qs-method__lead{
  margin-top: 1.25rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(15,23,42,.7);
  max-width: 64ch;
}

/* Lista alineada con el marco */
.qs-method__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}

/* Ficha técnica contenida */
.qs-method__item{
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 1.15rem;
  align-items: flex-start;

  background: #ffffff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
}

/* Check sobrio */
.qs-method__check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: .75rem;
  line-height: 1;
  color: rgba(15,23,42,.75);

  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.12);
}

/* Textos */
.qs-method__item-title{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.qs-method__item-text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Separación con la siguiente sección */
.qs-method{
  margin-bottom: 6.5rem;
}

/* Mobile */
@media (max-width: 768px){
  .qs-method{
    padding: 5rem 0;
  }

  .qs-method__inner{
    padding-left: 1.5rem;
  }

  .qs-method__item{
    padding: 1.2rem 1.25rem;
  }
}
/* =========================================================
QS — METODOLOGÍA PREMIUM (MARCOIDO)
Soluciona: cards anchas + montaje con sección siguiente
========================================================= */

/* 1) Sección con aire y cierre claro */
.qs-method{
  position: relative;
  padding: 6.5rem 0 7rem;
  background: #ffffff;
}

/* 2) Ancho contenido DEFINITIVO (funciona incluso si cambia el wrapper) */
.qs-method .container{
  max-width: 760px;
}

/* 3) Marco dorado parcial (guía editorial) */
.qs-method .container{
  position: relative;
  padding-left: 2.25rem;
}

.qs-method .container::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(201,164,76,.95),
    rgba(201,164,76,.28)
  );
}

/* 4) Encabezado: más editorial y con separación */
.qs-method__header{
  margin-bottom: 3.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(11,15,20,.08);
}

/* Si no tienes qs-method__header en tu HTML, no pasa nada: no rompe */
.qs-method__title{
  font-size: clamp(2.05rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* Lead elegante */
.qs-method__lead{
  margin-top: 1.25rem;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(11,15,20,.68);
}

/* 5) Lista: ritmo premium */
.qs-method__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.9rem;
}

/* 6) Fichas técnicas (NO full-width gigante) */
.qs-method__item{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(11,15,20,.10);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

/* 7) Checklist serio y pequeño (chip técnico) */
.qs-method__check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: 1;
  color: rgba(11,15,20,.72);
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.12);
}

/* 8) Tipografía de fichas */
.qs-method__item-title{
  margin: 0 0 .35rem 0;
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.qs-method__item-text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(11,15,20,.66);
  max-width: 66ch;
}

/* 9) Cierre definitivo para evitar “montaje” con la sección siguiente */
.qs-method{
  margin-bottom: 2.75rem;
}

/* 10) Responsive */
@media (max-width: 768px){
  .qs-method{
    padding: 5rem 0 5.5rem;
  }

  .qs-method .container{
    padding-left: 1.5rem;
  }

  .qs-method__item{
    padding: 1.2rem 1.25rem;
  }
}

/* =========================================================
METODOLOGÍA — MANIFIEST */METODOLOGÍA — MANIFIESTO PREMIUM MARCO DORADO + CONTENIDO

.qs-method--manifesto{
  position: relative;
  padding: 7.25rem 0 7.25rem;
  background:
    radial-gradient(900px 420px at 16% 18%, rgba(201,164,76,.12), transparent 60%),
    linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
  border-top: 1px solid rgba(11,15,20,.08);
  border-bottom: 1px solid rgba(11,15,20,.08);
}

/* Contención real (evita “cards gigantes”) */
.qs-method--manifesto .qs-method__inner{
  max-width: 780px;
  position: relative;
  padding-left: 2.25rem;
}

/* Marco dorado parcial (estructura, no decoración) */
.qs-method--manifesto .qs-method__inner::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(201,164,76,.95),
    rgba(201,164,76,.25)
  );
}

/* Encabezado: manifiesto editorial */
.qs-method--manifesto .qs-method__header{
  max-width: 720px;
  margin-bottom: 4.25rem;
  padding-bottom: 1.65rem;
  border-bottom: 1px solid rgba(11,15,20,.08);
}

.qs-method--manifesto .qs-method__title{
  font-size: clamp(2.15rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.qs-method--manifesto .qs-method__lead{
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(11,15,20,.68);
  max-width: 70ch;
}

/* Lista: ritmo premium */
.qs-method--manifesto .qs-method__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.85rem;
}

/* Fichas contenidas (no full width exagerado) */
.qs-method--manifesto .qs-method__item{
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 1.2rem;
  align-items: flex-start;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,15,20,.10);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

/* Check serio (chip técnico) */
.qs-method--manifesto .qs-method__check{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: .75rem;
  line-height: 1;
  color: rgba(11,15,20,.72);
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.12);
  margin-top: .2rem;
}

.qs-method--manifesto .qs-method__item-title{
  margin: 0 0 .35rem 0;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.qs-method--manifesto .qs-method__item-text{
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: rgba(11,15,20,.66);
  max-width: 66ch;
}

/* Hover premium solo desktop */
@media (hover:hover){
  .qs-method--manifesto .qs-method__item{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .qs-method--manifesto .qs-method__item:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 55px rgba(2,6,23,.10);
    border-color: rgba(201,164,76,.28);
  }
}

/* Evita “montaje” con la siguiente sección */
.qs-method--manifesto{
  margin-bottom: 2.75rem;
}

@media (max-width: 768px){
  .qs-method--manifesto{
    padding: 5.5rem 0 5.75rem;
  }
  .qs-method--manifesto .qs-method__inner{
    padding-left: 1.5rem;
  }
  .qs-method--manifesto .qs-method__item{
    padding: 1.2rem 1.25rem;
  }
}