/* ============================================================
   Destino World — « Rejoindre le Collectif fondateur »
   Todo scopeado bajo .dw-cooperative: default.hbs carga los 6
   CSS de página en TODAS las páginas, así que sin scope las
   clases genéricas chocarían con technologie/methodologie/labo.
   1rem = 10px (html{font-size:10px} global).
   ============================================================ */

.dw-cooperative {
  /* Colores muestreados del diseño en content/themes/docs/ */
  --co-ink: #1B2228;
  --co-ink-soft: #232b33;
  --co-title: #1B2228;     /* h2 de sección */
  --co-heading: #4B4B4B;   /* h3 / subtítulos en negrita */
  --co-body: #777777;
  --co-muted: #C0C0C0;
  --co-line: #E3E1E3;       /* bordes suaves: filas, notas, stats */
  --co-line-strong: #000000; /* borde marcado: tarjetas outline de sec.3 */
  --co-bg: #F8F8F8;
  --co-bg-grey: #E2E2E4;
  --co-card-soft: #E6E4E6;
  --co-white: #FFFFFF;
  --co-red: #E40D1C;
  --co-radius: 22px;
  --co-radius-lg: 32px;
  --co-maxw: 1314px;   /* 87.9% de 1494 medido en el diseño */

  font-family: 'Montserrat', sans-serif;
  color: var(--co-body);
  background: var(--co-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.dw-cooperative *,
.dw-cooperative *::before,
.dw-cooperative *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dw-cooperative img { max-width: 100%; display: block; }
.dw-cooperative strong { font-weight: 700; color: var(--co-heading); }
.dw-cooperative .muted { color: var(--co-muted); }

/* ── Scroll reveal ── */
.dw-cooperative .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.215,.61,.355,1),
              transform 1s cubic-bezier(.215,.61,.355,1);
  will-change: transform, opacity;
}
.dw-cooperative .reveal.active { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .dw-cooperative .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Estructura común ── */
/* El padding lateral va en la sección, pero el ancho útil se fija en el
   wrap: si el padding se restara del viewport, --co-maxw nunca se
   alcanzaría y todo el contenido quedaría un ~5% pequeño. */
.dw-cooperative .coop-sec { padding: 10rem 0; }
.dw-cooperative .coop-wrap {
  width: 91.95%;
  max-width: var(--co-maxw);
  margin: 0 auto;
}

.dw-cooperative .coop-h2 {
  font-size: clamp(4.6rem, 6.4vw, 8rem);
  font-weight: 800;
  line-height: 1.19;    /* 137px de paso sobre glifos de ~74px */
  letter-spacing: -0.02em;
  color: var(--co-title);
  margin-bottom: 5rem;
}
.dw-cooperative .coop-h2-light { color: var(--co-white); }

.dw-cooperative .coop-intro {
  /* altura-x 16px medida en el diseño -> ~34.6px con Montserrat */
  font-size: 2.5rem;
  line-height: 1.5;
  max-width: 78ch;
  margin-bottom: 2.5rem;
}
.dw-cooperative .coop-intro-strong { font-weight: 700; color: var(--co-body); }

.dw-cooperative .coop-outro {
  font-size: 2.5rem;
  line-height: 1.55;
  margin-top: 5rem;
}

/* ── Tarjetas base ── */
.dw-cooperative .coop-card-dark {
  container-type: inline-size;   /* habilita las unidades cqw del interior */
  background: var(--co-ink);
  border-radius: var(--co-radius-lg);
  padding: 3.5rem;
  color: var(--co-body);     /* #777777 medido en el diseño */
}
.dw-cooperative .coop-card-dark h3 { color: #F8F8F8; }
.dw-cooperative .coop-card-dark strong { color: var(--co-white); }

.dw-cooperative .coop-card-soft {
  background: var(--co-card-soft);
  border-radius: var(--co-radius-lg);
  padding: 3.5rem;
}

.dw-cooperative .coop-card-outline {
  background: transparent;
  border: 3px solid var(--co-line-strong);
  border-radius: var(--co-radius);
  padding: 3rem 2.5rem;
}

.dw-cooperative .coop-card-dark h3,
.dw-cooperative .coop-card-soft h3,
.dw-cooperative .coop-card-outline h3 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--co-heading);
  margin-bottom: 1.4rem;
}
.dw-cooperative .coop-card-dark h3 { color: #F8F8F8; }

.dw-cooperative .coop-card-dark p,
.dw-cooperative .coop-card-soft p,
.dw-cooperative .coop-card-outline p {
  font-size: 2rem;
  line-height: 1.55;
}
.dw-cooperative .coop-card-dark p + p { margin-top: 1.8rem; }
.dw-cooperative .coop-card-soft p + p { margin-top: 1.8rem; }

/* ── Botones ── */
.dw-cooperative .coop-btn-ghost {
  display: inline-block;
  padding: 1.5rem 3rem;
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  color: var(--co-white);
  font-size: 1.5rem;
  text-decoration: none;
  transition: background .25s ease;
}
.dw-cooperative .coop-btn-ghost:hover { background: rgba(255,255,255,.28); }

.dw-cooperative .coop-pill {
  display: inline-block;
  padding: 1.8rem 3.5rem;
  border-radius: 100px;
  background: var(--co-ink);
  border: 2px solid var(--co-red);
  color: #b9bfc7;
  font-size: 1.6rem;
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.dw-cooperative .coop-pill:hover { background: var(--co-ink-soft); color: var(--co-white); }

/* ── Diana (SVG-en-CSS, reproduce docs/icon ball.png) ── */
.dw-cooperative .coop-target {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--co-white);
  position: relative;
  flex: none;
}
.dw-cooperative .coop-target::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--co-ink);
}
.dw-cooperative .coop-target::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 32%;      /* squircle, no círculo — como el original */
  background: var(--co-red);
}
.dw-cooperative .coop-target-lg { width: 17rem; height: 17rem; }

/*======================================================================
   1 — HERO
======================================================================*/
.dw-cooperative .coop-hero {
  position: relative;
  height: 100vh;
  min-height: 550px;
  display: flex;
  align-items: center;
  background: var(--co-ink);
  overflow: hidden;
}
.dw-cooperative .coop-hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.dw-cooperative .coop-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,20,25,.88) 0%, rgba(15,20,25,.55) 55%, rgba(15,20,25,.25) 100%);
  z-index: 1;
}
.dw-cooperative .coop-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--co-maxw);
  margin: 0 auto;
  padding: 8rem 6%;
}
.dw-cooperative .coop-hero-title {
  font-size: clamp(5.6rem, 6.2vw, 8.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--co-white);
  margin-bottom: 3rem;
  max-width: 15ch;
}
.dw-cooperative .coop-hero-sub {
  font-size: 2.6rem;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  max-width: 62ch;
  margin-bottom: 4rem;
}

/*======================================================================
   2 — LE CONSTAT
======================================================================*/
.dw-cooperative .coop-constat .coop-h2 { margin-bottom: 9rem; }
.dw-cooperative .constat-grid {
  /* Medido en el diseño: columna de texto 653px, tarjeta 597px,
     sobre un contenido de 1314px. La tarjeta arranca 55px por encima
     de la primera línea de texto (así alinean en el diseño). */
  display: grid;
  grid-template-columns: 49.7% 45.4%;
  justify-content: space-between;
  gap: 4.9%;
  align-items: center;
}
/* La columna de texto es más alta que la tarjeta, así que align-items
   no la desplaza: este padding es lo que iguala los centros de ambas. */
.dw-cooperative .constat-block + .constat-block { margin-top: 4.9rem; }
.dw-cooperative .constat-block h3 {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--co-heading);
  margin-bottom: 1.6rem;
}
.dw-cooperative .constat-block p {
  font-size: 2.2rem;
  line-height: 1.9;      /* paso de 36px medido en el diseño */
}

/* Medidas tomadas del diseño (tarjeta de 596px de ancho):
   diana 109px · título en y1420 · cuerpo 4 líneas de paso 36px
   con ancho máx. 506px (~85%) · pie en cursiva a 63px del cuerpo. */
/* Interior medido sobre la tarjeta del diseño (598x499px).
   Todo en % del ANCHO de la tarjeta, para que escale con ella.
   Altura-x medida: cuerpo y título 14px (mismo tamaño; el título
   sólo destaca por ser negrita y blanco), pie 10px.
   Con Montserrat (altura-x ~0.517em) eso da 27px y 19px. */
.dw-cooperative .constat-card {
  text-align: center;
  padding: 6.35% 7.53% 7.19%;
}
.dw-cooperative .constat-card .coop-target {
  width: 18.23%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 6.5%;
}
.dw-cooperative .constat-card h3 {
  font-size: 5cqw;
  line-height: 1.33;
  margin-bottom: 5.9%;
}
.dw-cooperative .constat-card p {
  /* Montserrat es más ancha que la Akzidenz del diseño: a la altura-x
     exacta del original (14px) el texto rompería en 5 líneas. Se baja
     el cuerpo hasta que caben las 4 líneas del diseño. */
  font-size: 3.95cqw;
  line-height: 1.45;
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
}
.dw-cooperative .constat-card p.constat-card-foot {
  margin-top: 8.5%;
  font-style: italic;
  /* una sola línea, como en el diseño */
  font-size: 3cqw;
  max-width: 100%;
  line-height: 1.33;
  color: #E8EAEB;
}

/*======================================================================
   3 — L'OBJECTIF
======================================================================*/
.dw-cooperative .objectif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 5rem;
  text-align: center;
}
.dw-cooperative .objectif-grid h3 { font-size: 2.2rem; }
.dw-cooperative .objectif-grid p { font-size: 1.8rem; }

/*======================================================================
   4 — POURQUOI UNE COOPÉRATIVE
======================================================================*/
/* Altura-x medida en el diseño: título y cuerpo 14px (~30px con Montserrat).
   La fila va al 73% en vez del 58.8% del diseño: Montserrat es más ancha y
   a ese tamaño el cuerpo rompería en dos líneas dentro de la caja original. */
.dw-cooperative .pourquoi-list { margin-top: 5rem; }
.dw-cooperative .pourquoi-row {
  border: 3px solid var(--co-line);
  border-radius: var(--co-radius);
  padding: 3.2rem 4rem;
  max-width: 73%;
}
.dw-cooperative .pourquoi-row + .pourquoi-row { margin-top: 2.6rem; }
.dw-cooperative .pourquoi-row h3 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--co-heading);
  margin-bottom: 1.2rem;
}
.dw-cooperative .pourquoi-row p { font-size: 2.4rem; line-height: 1.45; }

/*======================================================================
   5 — ALLIANCE INTERNATIONALE
======================================================================*/
.dw-cooperative .alliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;   /* mismo alto: en el diseño acaban a la vez */
  max-width: 86%;         /* más estrechas */
  margin: 0 auto;         /* centradas en la página */
}
.dw-cooperative .alliance-note {
  margin-top: 3rem;
  padding: 2.2rem 2.6rem;
  border: 1px solid #CFCECF;
  border-radius: 3rem;     /* esquinas muy redondeadas, como el diseño */
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--co-muted);
}
.dw-cooperative .alliance-sub + .alliance-sub { margin-top: 2.2rem; }
.dw-cooperative .alliance-sub h4 {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: .5rem;
}
.dw-cooperative .alliance-sub p { font-size: 1.9rem; line-height: 1.55; }

/*======================================================================
   6 — LA SCIC
======================================================================*/
.dw-cooperative .scic-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 5rem;
  text-align: center;
}
.dw-cooperative .scic-stat {
  background: var(--co-white);
  border: 1.5px solid var(--co-line);
  border-radius: var(--co-radius);
  padding: 3rem 2rem;
}
.dw-cooperative .scic-stat-dark {
  background: var(--co-ink);
  border-color: var(--co-ink);
}
.dw-cooperative .scic-num {
  display: block;
  font-size: clamp(3.4rem, 5vw, 7rem);
  font-weight: 800;
  color: var(--co-heading);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.dw-cooperative .scic-stat-dark .scic-num { color: var(--co-white); }
.dw-cooperative .scic-stat p { font-size: 1.8rem; line-height: 1.5; }
.dw-cooperative .scic-stat-dark p { color: #b9bfc7; }

/*======================================================================
   7 — QUATRE COLLÈGES
======================================================================*/
.dw-cooperative .colleges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 5rem;
  text-align: center;
}
.dw-cooperative .college-card {
  border: 1.5px solid var(--co-line);
  border-radius: var(--co-radius-lg);
  padding: 3.5rem 2rem;
}
.dw-cooperative .college-card-dark {
  background: var(--co-ink);
  border-color: var(--co-ink);
}
.dw-cooperative .college-pct {
  display: block;
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--co-muted);
  margin-bottom: 2.5rem;
}
.dw-cooperative .college-card-dark .college-pct { color: var(--co-white); }
.dw-cooperative .college-card h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-heading);
  margin-bottom: 2.5rem;
}
.dw-cooperative .college-card-dark h3 { color: var(--co-white); }
.dw-cooperative .college-card p { font-size: 1.8rem; line-height: 1.55; }
.dw-cooperative .college-card-dark p { color: #c9ced5; }
.dw-cooperative .college-card-dark strong { color: var(--co-white); }

/*======================================================================
   8 — COLLECTIF & GOUVERNANCE
======================================================================*/
.dw-cooperative .gouv-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 86%;      /* menos anchas */
  margin: 0 auto;      /* centradas en la página */
}
.dw-cooperative .gouv-card p { font-size: 2rem; line-height: 1.65; }
.dw-cooperative .gouv-role + .gouv-role { margin-top: 1.8rem; }
.dw-cooperative .gouv-role {
  border-width: 3px;
  border-color: var(--co-ink);
  padding: 2.2rem 2.6rem;
}
.dw-cooperative .gouv-role h3 { font-size: 2rem; margin-bottom: .6rem; }
.dw-cooperative .gouv-role p { font-size: 1.9rem; line-height: 1.55; }

/*======================================================================
   9 — CE QUE ÇA CHANGE  (banda oscura)
======================================================================*/
.dw-cooperative .coop-change { background: var(--co-ink); }
.dw-cooperative .change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 86%;          /* menos anchas */
  margin: 5rem auto 0;     /* centradas en la página */
}
.dw-cooperative .change-card { padding: 3rem 3.2rem; }
.dw-cooperative .change-card h3 { font-size: 2.3rem; margin-bottom: 1.2rem; }
.dw-cooperative .change-card p { font-size: 1.9rem; line-height: 1.6; }

/*======================================================================
   10 — L'INVESTISSEMENT
======================================================================*/
.dw-cooperative .invest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;    /* mismo alto aunque una tenga menos contenido */
  max-width: 86%;          /* menos anchas */
  margin: 5rem auto 0;     /* centradas en la página */
}
.dw-cooperative .invest-card h3 { font-size: 2.4rem; margin-bottom: 2.5rem; }
.dw-cooperative .invest-figures {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.dw-cooperative .invest-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: .4rem;
}
.dw-cooperative .invest-unit { font-size: 1.7rem; color: #9aa2ac; }

/*======================================================================
   11 — FACE À UN GROUPEMENT CLASSIQUE
======================================================================*/
.dw-cooperative .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 86%;          /* menos anchas */
  margin: 5rem auto 0;     /* centradas en la página */
}
.dw-cooperative .compare-head {
  background: var(--co-ink);
  color: var(--co-white);
  border-radius: var(--co-radius);   /* misma forma que las celdas */
  padding: 2.2rem 2.6rem;
  text-align: center;
  font-size: 2.0rem;
  font-weight: 700;
  margin-bottom: 2rem;
  /* mismo alto que las celdas: borde de 3px incluido, que aquí no existe */
  min-height: 11rem;
  border: 3px solid var(--co-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-cooperative .compare-cell {
  border: 3px solid var(--co-line);
  border-radius: var(--co-radius);
  padding: 2.2rem 2.6rem;
  font-size: 2.0rem;
  line-height: 1.55;
  color: #1b2228;
  min-height: 11rem;
  display: flex;
  align-items: center;
}
.dw-cooperative .compare-cell + .compare-cell { margin-top: 2rem; }

/* Columna destacada: borde marcado + texto en negrita */
.dw-cooperative .compare-col-strong .compare-cell {
  border-width: 3px;
  border-color: var(--co-ink);
  font-weight: 700;
  color: var(--co-heading);
}

/*======================================================================
   12 — PREMIÈRE MISSION
======================================================================*/
.dw-cooperative .mission-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  list-style: none;
  align-items: stretch;
  max-width: 86%;          /* menos anchas */
  margin: 5rem auto 0;     /* centradas en la página */
}
.dw-cooperative .mission-step {
  position: relative;
  border: 1.5px solid var(--co-line);
  border-radius: var(--co-radius-lg);
  padding: 3rem 2.2rem;
  text-align: center;
}
.dw-cooperative .mission-step-dark {
  background: var(--co-ink);
  border-color: var(--co-ink);
}
/* chevron entre pasos — decorativo, no en el DOM */
.dw-cooperative .mission-step + .mission-step::before {
  content: "›";
  position: absolute;
  left: -1.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.4rem;
  color: var(--co-ink);
  line-height: 1;
}
.dw-cooperative .mission-num {
  display: block;
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--co-line);
  text-align: left;
  margin-bottom: 2.5rem;
}
.dw-cooperative .mission-step-dark .mission-num { color: #4a5560; }
.dw-cooperative .mission-step h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-heading);
  margin-bottom: 2rem;
}
.dw-cooperative .mission-step-dark h3 { color: var(--co-white); }
.dw-cooperative .mission-step p { font-size: 1.9rem; line-height: 1.55; }
.dw-cooperative .mission-step-dark p { color: #c9ced5; }

/*======================================================================
   13 — CTA REJOINDRE  (banda oscura)
======================================================================*/
/* El fondo (flecha + diana sobre #1B2228) viene de docs/other image.png,
   convertido a AVIF. El texto va encima en HTML. La imagen conserva su
   proporción y se ancla arriba: la diana llega justo al borde inferior
   del archivo original. */
.dw-cooperative .coop-cta {
  position: relative;
  background: var(--co-ink);
  padding: 0;
  overflow: hidden;
}
.dw-cooperative .cta-bg {
  display: block;
  width: 100%;
  height: auto;
}
.dw-cooperative .coop-cta .coop-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  padding: 8% 0;
}
.dw-cooperative .coop-cta .coop-h2 {
  /* sin max-width: el <br> del markup ya marca las dos líneas, y un
     ancho máximo partía "fondateur" a una tercera.
     z-index para pasar POR ENCIMA de la flecha, como en el diseño. */
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  align-self: start;
}
.dw-cooperative .cta-text {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--co-white);
  margin-left: 65%;
  max-width: 31ch;
  align-self: end;
}

/*======================================================================
   14 — QUI SOMMES-NOUS  (banda gris)
======================================================================*/
.dw-cooperative .coop-qui {
  background: var(--co-bg-grey);
  text-align: center;
}
.dw-cooperative .coop-qui .coop-h2 { margin-bottom: 4rem; }

/*======================================================================
   15 — CIERRE  (banda oscura)
======================================================================*/
.dw-cooperative .coop-closing {
  background: var(--co-ink);
  text-align: center;
  padding: 8rem 6%;
}

/*======================================================================
   RESPONSIVE — el escritorio queda intacto; todo vive aquí.
======================================================================*/

/* ── Tablet ── */
@media (max-width: 992px) {
  .dw-cooperative .coop-sec { padding: 7rem 6%; }
  .dw-cooperative .coop-h2 { margin-bottom: 3rem; }

  .dw-cooperative .coop-hero { height: 78vh; }
  .dw-cooperative .coop-hero-inner { padding: 6rem 6%; }
  .dw-cooperative .coop-hero::before {
    background: linear-gradient(90deg, rgba(15,20,25,.90) 0%, rgba(15,20,25,.70) 100%);
  }

  .dw-cooperative .constat-grid,
  .dw-cooperative .alliance-grid,
  .dw-cooperative .gouv-grid,
  .dw-cooperative .invest-grid { grid-template-columns: 1fr; gap: 3rem; }
  /* apiladas ya no hay nada con lo que alinear */
  /* misma separación hacia el bloque oscuro que entre los dos párrafos */
  .dw-cooperative .constat-grid { gap: 4.9rem; }
  /* Apilada ocupaba todo el ancho. Se usa width (no max-width): el
     interior de la tarjeta va en % y cqw, y encadenar max-width en
     porcentaje colapsaba el contenido. */
  .dw-cooperative .constat-card {
    width: 72%;
    margin-left: auto;
    margin-right: auto;
  }

  .dw-cooperative .objectif-grid,
  .dw-cooperative .colleges-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  .dw-cooperative .scic-stats {
    grid-template-columns: 1fr;
    max-width: 62%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Las dos columnas son bloques independientes en el DOM, así que cada
     celda se dimensionaba por su propio texto y las filas no cuadraban.
     Con display:contents las celdas pasan a ser hijas del grid y cada
     fila iguala su altura; grid-auto-flow:column mantiene el orden
     (una columna entera, luego la otra) con 5 filas: cabecera + 4. */
  .dw-cooperative .compare-grid {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: stretch;
  }
  .dw-cooperative .compare-col { display: contents; }
  .dw-cooperative .compare-cell { font-size: 1.7rem; margin: 0 !important; height: 100%; }
  .dw-cooperative .compare-col-strong .compare-cell { font-size: 1.6rem; }
  .dw-cooperative .compare-head { margin-bottom: 0; }
  .dw-cooperative .pourquoi-row { max-width: 100%; }
  /* 2.35rem: a 2.6rem "(ESS) :" saltaba a una línea suelta */
  .dw-cooperative .coop-intro { font-size: 2.35rem; }
  .dw-cooperative .coop-outro { font-size: 2.4rem; }
  .dw-cooperative .pourquoi-row h3,
  .dw-cooperative .pourquoi-row p { font-size: 2.1rem; }

  .dw-cooperative .mission-steps { grid-template-columns: repeat(2, 1fr); }
  /* con 2 columnas el chevron solo cabe entre las parejas de cada fila */
  .dw-cooperative .mission-step + .mission-step::before { display: none; }
  .dw-cooperative .cta-text { font-size: 1.6rem; }

  /* En tablet la imagen de fondo se queda pequeña y el texto, calculado
     al 52% para PC, caía sobre la flecha. El fondo pasa a cubrir toda la
     sección y el contenido vuelve al flujo normal. */
  /* El fondo mantiene su proporción, como en PC. Lo único que cambia es
     el texto: al 52% la columna quedaba demasiado estrecha en tablet. */
  .dw-cooperative .coop-cta { padding: 0; }
  .dw-cooperative .cta-bg {
    position: static;
    width: 100%;
    height: auto;
    object-fit: fill;
  }
  .dw-cooperative .coop-cta .coop-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: center;
    padding: 6% 0;
  }
  .dw-cooperative .cta-text {
    /* debajo de la flecha y a la derecha de la bola */
    margin-left: 52%;
    margin-bottom: 6%;
    max-width: none;
    font-size: 1.5rem;
  }
}

/* ── Móvil ── */
@media (max-width: 767px) {
  .dw-cooperative .coop-sec { padding: 6rem 6%; }
  .dw-cooperative .coop-intro { font-size: 2.1rem; }
  .dw-cooperative .coop-outro { font-size: 2rem; }
  .dw-cooperative .constat-block p { font-size: 1.9rem; }
  .dw-cooperative .coop-card-dark h3,
  .dw-cooperative .coop-card-soft h3,
  .dw-cooperative .coop-card-outline h3 { font-size: 1.9rem; }
  .dw-cooperative .coop-card-dark p,
  .dw-cooperative .coop-card-soft p,
  .dw-cooperative .coop-card-outline p { font-size: 1.8rem; }
  .dw-cooperative .pourquoi-row h3,
  .dw-cooperative .pourquoi-row p { font-size: 1.9rem; }
  .dw-cooperative .coop-hero-sub { font-size: 2rem; }

  /* En móvil el hero crece con su contenido: con altura fija el texto largo
     se desbordaría en pantallas bajas o en horizontal. */
  .dw-cooperative .coop-hero { height: auto; min-height: 88vh; }
  .dw-cooperative .coop-hero-inner { padding: 10rem 6% 6rem; }
  .dw-cooperative .coop-hero-title { font-size: clamp(4rem, 9vw, 5.6rem); max-width: none; }
  .dw-cooperative .coop-hero-sub { font-size: 1.6rem; margin-bottom: 3rem; }

  .dw-cooperative .coop-card-dark,
  .dw-cooperative .coop-card-soft { padding: 2.8rem 2.4rem; }
  .dw-cooperative .coop-card-outline { padding: 2.4rem 2.2rem; }

  /* En móvil las tarjetas usan todo el ancho: los porcentajes de tablet
     (72% la del constat, 62% las stats) las dejaban muy estrechas. */
  .dw-cooperative .scic-stats { max-width: 100%; }

  .dw-cooperative .constat-card {
    width: 100%;
    padding: 3.5rem 2.6rem;
  }
  .dw-cooperative .constat-card .coop-target { width: 8rem; margin-bottom: 2.5rem; }
  .dw-cooperative .constat-card h3 { font-size: 2rem; margin-bottom: 2rem; }
  .dw-cooperative .constat-card p {
    font-size: 1.8rem;
    line-height: 1.55;
    max-width: 100%;
  }
  .dw-cooperative .constat-card p.constat-card-foot {
    font-size: 1.6rem;
    margin-top: 2.5rem;
  }

  .dw-cooperative .objectif-grid,
  .dw-cooperative .colleges-grid,
  .dw-cooperative .change-grid,
  .dw-cooperative .mission-steps { grid-template-columns: 1fr; }

  .dw-cooperative .pourquoi-row { max-width: none; }

  /* La comparativa se queda en DOS columnas también en móvil: se reduce
     texto, padding y gap para que quepan. Mantiene el display:contents
     de tablet, así cada fila sigue emparejada. */
  .dw-cooperative .compare-grid {
    /* minmax(0,1fr): sin el minmax las columnas usan min-content y el
       texto en negrita de la derecha las desborda */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .dw-cooperative .compare-head {
    font-size: 1.25rem;
    padding: 1.4rem .8rem;
    min-height: 7rem;
    border-width: 2px;
  }
  .dw-cooperative .compare-cell {
    min-height: 8rem;
    font-size: 1.2rem;
    line-height: 1.4;
    padding: 1.2rem 1rem;
    border-width: 2px;
  }
  .dw-cooperative .compare-col-strong .compare-cell {
    font-size: 1.15rem;
    border-width: 2px;
  }

  .dw-cooperative .invest-figures { gap: 2.5rem; }

  /* El fondo del CTA se estrecha mucho: el texto pasa a flujo normal */
  .dw-cooperative .coop-cta .coop-wrap {
    position: static;
    padding: 6rem 0;
  }
  .dw-cooperative .cta-bg { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: .35; }
  .dw-cooperative .coop-cta { position: relative; }
  .dw-cooperative .cta-text { font-size: 1.6rem; margin-left: 0; margin-top: 3rem; }

  .dw-cooperative .coop-pill { padding: 1.6rem 2.6rem; font-size: 1.45rem; }
}

.dw-cooperative .coop-h2 { font-size: clamp(4.2rem, 6.4vw, 8rem); }

/* ── Móvil pequeño ── */
@media (max-width: 480px) {
  .dw-cooperative .coop-sec { padding: 5rem 5%; }
  .dw-cooperative .coop-hero-inner { padding: 8rem 5% 5rem; }
  .dw-cooperative .coop-btn-ghost { padding: 1.4rem 2.4rem; font-size: 1.4rem; }
  .dw-cooperative .invest-figures { flex-direction: column; gap: 2rem; }
  .dw-cooperative .coop-h2 { font-size: clamp(3.6rem, 6.4vw, 8rem); }
  
}