/* ── Capacidades: tres pilares. Lista de definición, no tarjetas. ─────── */
.pillars{display:grid;gap:1px;margin-top:38px;background:var(--hair)}
@media (min-width:820px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px}
/* 44px de alto: los iconos suben ~50% para que se lean como parte del
   mensaje de la tarjeta y no como una viñeta. Al crecer, el trazo de 1.5
   se veía pesado, así que baja a 1.35 y mantiene el peso óptico.        */
.pillar .ico{width:44px;height:44px;stroke:var(--teal);fill:none;stroke-width:1.35}
.pillar p{color:var(--ink-dim);font-size:15.5px}

/* ── Soluciones: dos bloques con peso, sí son "cards" ─────────────────── */
.solutions{display:grid;gap:20px;margin-top:38px}
@media (min-width:860px){.solutions{grid-template-columns:1fr 1fr}}
.solution{
  border:1px solid rgba(15,110,92,.18);border-radius:18px;
  background:linear-gradient(168deg,var(--paper-2),var(--paper) 74%);
  padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:16px;
}
.solution .tag{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.solution p{color:var(--ink-dim)}
/* Donde antes iban los chips va ahora un icono que dibuja el concepto de
   la tarjeta. `margin-top:auto` lo empuja al pie, así las dos tarjetas
   alinean el icono aunque sus párrafos midan distinto.                   */
.solution .ico{
  width:100%;max-width:196px;height:auto;margin-top:auto;
  stroke:var(--teal);fill:none;stroke-width:1.5;opacity:.9;
}

/* ── Redes: los dos esquemas, uno al lado del otro ────────────────────── */
/* Van en rejilla pareja a propósito: el punto de la sección es que Red
   Cerrada y Red Abierta se lean como dos opciones del mismo rango, no
   como una principal y una nota al pie.                                  */
.networks{display:grid;gap:20px;margin-top:38px}
@media (min-width:860px){.networks{grid-template-columns:1fr 1fr}}
.network{
  position:relative;overflow:hidden;
  border:1px solid rgba(15,110,92,.18);border-radius:18px;background:var(--paper-2);
  padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:row;align-items:center;gap:clamp(16px,2.2vw,28px);
}
/* El contenido va por encima de los adornos de fondo (::before/::after). */
.network > *{position:relative;z-index:1}
.network h3{font-size:clamp(19px,1.8vw,23px)}
.network p{color:var(--ink-dim);font-size:15.5px}

/* Medallón: disco tenue que aísla el icono del fondo de la tarjeta y le
   da el mismo peso en las dos, aunque uno sea verde y el otro blanco.   */
.network__medalla{
  flex:none;width:clamp(94px,10.5vw,128px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(43,181,150,.20),rgba(43,181,150,.07) 70%);
  display:grid;place-items:center;
}
.network__ico{width:76%;height:auto}
/* El filete vertical hace de eje del texto: separa icono y discurso sin
   necesidad de una caja más.                                            */
.network__texto{
  display:flex;flex-direction:column;gap:10px;
  border-left:2px solid var(--teal-mid);padding-left:clamp(16px,1.8vw,24px);
}
/* Bajo ~520px el par icono + texto ya no cabe en línea; se apila y el
   filete pasa a horizontal para no dejar un borde suelto.               */
@media (max-width:520px){
  .network{flex-direction:column;align-items:flex-start}
  .network__texto{border-left:0;padding-left:0;border-top:2px solid var(--teal-mid);padding-top:16px}
}

/* Red Cerrada: fondo teñido y un disco muy tenue en la esquina. Red
   Abierta: papel blanco con una retícula de puntos. Distinguen los dos
   esquemas de un vistazo sin cambiar la jerarquía entre ellos.          */
.network--acento{background:linear-gradient(150deg,#EAF6F1,#F5FBF9 72%)}
.network--acento::before{
  content:"";position:absolute;left:-78px;bottom:-96px;width:230px;height:230px;
  border-radius:50%;background:rgba(43,181,150,.09);
}
.network--plano{background:var(--paper)}
.network--plano::after{
  content:"";position:absolute;right:20px;bottom:18px;width:112px;height:62px;
  background-image:radial-gradient(rgba(15,110,92,.22) 1.6px,transparent 1.7px);
  background-size:11px 11px;opacity:.55;
}

/* Estado de espera. El borde discontinuo dice "aquí falta algo" sin
   necesidad de leerlo, y distingue el hueco de una tarjeta terminada.
   Se retira junto con el marcador cuando llegue el texto definitivo.    */
.network.is-pendiente{border-style:dashed;background:transparent}
/* Sin justificar ni partir palabras: el justificado global está pensado
   para columnas de texto corrido, y en mono a este ancho abre ríos. El
   punto se alinea a la primera línea, no al centro del bloque.          */
.pendiente-nota{
  font:400 14px/1.5 var(--f-mono);color:var(--ink-dim);
  text-align:left;hyphens:none;
  display:flex;align-items:flex-start;gap:9px;
}
.pendiente-nota::before{
  content:"";width:7px;height:7px;flex:none;border-radius:50%;
  margin-top:.45em;background:var(--teal-bright);
}

/* ── Seguridad: dos afirmaciones, tratamiento sobrio ──────────────────── */
.secure{display:grid;gap:20px;margin-top:34px}
@media (min-width:760px){.secure{grid-template-columns:1fr 1fr}}
.claim{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:var(--rule)}
.claim svg{width:26px;height:26px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.5;margin-top:2px}
.claim p{color:var(--ink-dim);font-size:15.5px;margin-top:6px}

/* ── Casos de uso: mismo tratamiento que Redes (medallón + filete). Eran
      tres columnas para cinco sectores; con dos tarjetas la tercera
      quedaba vacía y el bloque no llegaba al margen. En rejilla pareja
      las dos ocupan el ancho completo de la página.                       */
.cases{display:grid;gap:20px;margin-top:34px}
@media (min-width:860px){.cases{grid-template-columns:1fr 1fr}}
.case{
  position:relative;overflow:hidden;
  border:1px solid rgba(15,110,92,.18);border-radius:18px;background:var(--paper-2);
  padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:row;align-items:center;gap:clamp(16px,2.2vw,28px);
}
.case > *{position:relative;z-index:1}
.case__medalla{
  flex:none;width:clamp(94px,10.5vw,128px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(43,181,150,.20),rgba(43,181,150,.07) 70%);
  display:grid;place-items:center;
}
/* Icono de trazo, no de relleno: a este tamaño 1.35 mantiene el peso
   óptico de los medallones de Redes sin engordar la línea.              */
.case__ico{width:46%;height:auto;stroke:var(--teal);fill:none;stroke-width:1.35}
.case__texto{
  display:flex;flex-direction:column;gap:10px;
  border-left:2px solid var(--teal-mid);padding-left:clamp(16px,1.8vw,24px);
}
@media (max-width:520px){
  .case{flex-direction:column;align-items:flex-start}
  .case__texto{border-left:0;padding-left:0;border-top:2px solid var(--teal-mid);padding-top:16px}
}
.case--acento{background:linear-gradient(150deg,#EAF6F1,#F5FBF9 72%)}
.case--acento::before{
  content:"";position:absolute;left:-78px;bottom:-96px;width:230px;height:230px;
  border-radius:50%;background:rgba(43,181,150,.09);
}
.case--plano{background:var(--paper)}
.case--plano::after{
  content:"";position:absolute;right:20px;bottom:18px;width:112px;height:62px;
  background-image:radial-gradient(rgba(15,110,92,.22) 1.6px,transparent 1.7px);
  background-size:11px 11px;opacity:.55;
}
.case h3{font-size:clamp(18px,1.6vw,21px)}
.case p{color:var(--ink-dim);font-size:15.5px;line-height:1.58}

/* ── Sistema: casilla de verificación, no secuencia numerada ──────────── */
.system{display:grid;gap:var(--gap);align-items:start;margin-top:34px}
@media (min-width:900px){.system{grid-template-columns:.85fr 1.15fr}}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair)}
.checks li{background:var(--paper);display:flex;gap:14px;align-items:baseline;padding:16px 4px 16px 0;font-size:15.5px}
.checks li::before{
  content:"";width:8px;height:8px;flex:none;border-radius:2px;
  background:var(--teal-bright);transform:translateY(-2px);margin-left:2px;
}

/* ── Cadenas de confianza: carrusel continuo. Los bordes se desvanecen
      con una máscara para que los logos no aparezcan cortados en seco.   */
.marquee{
  margin-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;gap:14px;width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.chip-logo{
  flex:0 0 auto;width:clamp(168px,20vw,212px);
  background:var(--paper);border:1px solid rgba(15,110,92,.16);border-radius:14px;
  min-height:104px;display:grid;place-items:center;padding:20px 22px;
}
.chip-logo img{width:auto;max-width:100%}
.chip-logo img.l-aki{height:48px}
.chip-logo img.l-willys{height:50px}
.chip-logo img.l-soriana{height:34px}
.chip-logo img.l-chedraui{height:62px}
/* Sin movimiento: los cuatro logos visibles a la vez, nada que perseguir */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:100%;flex-wrap:wrap}
  .marquee-track [aria-hidden="true"]{display:none}
  .chip-logo{flex:1 1 150px}
}
.chains-note{margin-top:16px;font:400 13px/1.7 var(--f-body);color:var(--ink-dim);max-width:var(--measure)}

/* ── Preguntas frecuentes: acordeón nativo, operable con teclado ──────── */
.faq{margin-top:30px;border-top:var(--rule)}
.faq details{border-bottom:var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:18px;align-items:center;justify-content:space-between;
  padding:22px 2px;font:600 clamp(16px,1.2vw,18.5px)/1.4 var(--f-display);
  letter-spacing:-.01em;color:var(--ink);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq summary:hover{color:var(--teal)}
.faq .answer{padding:0 2px 24px;color:var(--ink-dim);max-width:var(--measure);line-height:1.75}