/* ============================================================
   pilot.cr — pages.css
   Estilos específicos por tipo de página (templates 1-9).
   ============================================================ */

/* ============================================================
   HOME (template 1)
   ============================================================ */

/* ------------------------------------------------------------
   Hero — núcleo orquestador con el LOGO de Pilot (v2, criterio C6).
   El núcleo verde muestra la marca de Pilot. Anillos punteados
   girando alrededor (sin nodos de herramientas externas). El JS
   de animaciones usa [data-animate] en la <section> contenedora;
   estos elementos son puramente decorativos.
   ------------------------------------------------------------ */
.hero__visual--orchestra {
  /* Anula el contenedor tipo "imagen" del hero genérico */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orchestra {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
}
.orchestra__glow {
  /* Difuminado verde eliminado: solo quedan los anillos claros y los chips. */
  display: none;
}
.orchestra__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px dashed rgba(52, 169, 83, 0.28);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.orchestra__ring--inner { width: 64%; height: 64%; animation: orchestra-spin 32s linear infinite; }
.orchestra__ring--outer { width: 100%; height: 100%; animation: orchestra-spin 52s linear infinite reverse; }
@keyframes orchestra-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.orchestra__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 168px; height: 168px;
  border-radius: 36px;
  z-index: 3;
  /* Núcleo claro para que la marca multicolor de Pilot se luzca */
  background: #ffffff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(52, 169, 83, 0.22), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.orchestra__core img,
.orchestra__core svg {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* La marca conserva su color original (multicolor) */
}

/* Chips flotantes con las áreas que orquesta Pilot */
.orchestra__chip {
  position: absolute;
  z-index: 4;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(20, 33, 26, 0.10);
  animation: orchestra-float 6s ease-in-out infinite;
}
.orchestra__chip::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  vertical-align: middle;
}
.orchestra__chip--1 { top: 4%;  left: 30%; animation-delay: 0s; }
.orchestra__chip--2 { top: 16%; right: -4%; animation-delay: .5s; }
.orchestra__chip--3 { top: 45%; right: -8%; animation-delay: 1s; }
.orchestra__chip--4 { bottom: 14%; right: -2%; animation-delay: 1.5s; }
.orchestra__chip--5 { bottom: -2%; left: 38%; animation-delay: 2s; }
.orchestra__chip--6 { bottom: 16%; left: -6%; animation-delay: 2.5s; }
.orchestra__chip--7 { top: 42%; left: -10%; animation-delay: 3s; }
@keyframes orchestra-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .orchestra__ring { animation: none !important; }
  .orchestra__chip { animation: none !important; }
}

.home-propuesta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 1023px) {
  .home-propuesta { grid-template-columns: 1fr; }
}
.home-propuesta > div:first-child h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  margin: 0 0 var(--space-3);
}
.home-propuesta .lead {
  font-weight: 800;
  color: var(--green-deep);
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-4);
}
.home-propuesta > div:first-child p:not(.lead) {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.home-propuesta__highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
/* Tarjetas de highlight (HTML emite .home-highlight). Estilo "hcard"
   del prototipo v2: tarjeta blanca con barra de acento verde que crece
   en hover y leve desplazamiento. */
.home-highlight {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.home-highlight::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.home-highlight:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
}
.home-highlight:hover::before { transform: scaleY(1); }
.home-highlight h3 {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.home-highlight p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* Compat: estilo legacy de highlight como item con ícono */
.home-propuesta__highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
}
.home-propuesta__highlight-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.home-section__title {
  text-align: center;
  margin-bottom: var(--space-3);
}
.home-section__lead {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-width: 680px;
  margin: 0 auto var(--space-10);
}

/* ------------------------------------------------------------
   Pilares de la home — cards grandes con hover lift.
   El HTML emite <a class="module-card module-card--pillar">; esta
   variante agranda el card respecto al module-card base para que
   matchee el .pillar del prototipo v2 (tarjeta amplia, título grande,
   levantamiento al pasar el mouse, halo verde sutil).
   ------------------------------------------------------------ */
/* 6 áreas en 3 columnas parejas (3×2) como el prototipo v2.
   Sobrescribe el auto-fill de components.css para evitar columnas
   desiguales a 1440px. responsive.css baja a 2 y 1 columnas. */
.pillar-grid {
  grid-template-columns: repeat(3, 1fr);
}
.pillar-grid .module-card--pillar {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}
.module-card--pillar .module-card__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}
.module-card--pillar .module-card__desc {
  font-size: var(--font-size-md);
}
.module-card--pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-tint-2);
}
/* Halo verde decorativo en hover (no usa emoji ni imagen) */
.module-card--pillar::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--green-tint);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.module-card--pillar:hover::after { opacity: 1; }
.module-card--pillar > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Tarjetas de logo de integración (home → integraciones-destacadas).
   El HTML emite <a class="logo-card"> con <img> + <span class="logo-card__name">.
   La grilla viene de .logos-grid (components.css). Acá estilamos la card.
   ------------------------------------------------------------ */
.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100px;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.logo-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.logo-card img,
.logo-card svg {
  max-height: 30px;
  width: auto;
  filter: grayscale(40%);
  opacity: 0.8;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}
.logo-card:hover img,
.logo-card:hover svg {
  filter: grayscale(0%);
  opacity: 1;
}
.logo-card__name {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   Testimonial de la home (.home-testimonial). Cita grande centrada
   al estilo .quote del prototipo v2.
   ------------------------------------------------------------ */
.home-testimonial {
  max-width: 880px;
  margin: var(--space-6) auto 0;
  text-align: center;
}
.home-testimonial p {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.34;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
}
.home-testimonial p::before { content: "\201C"; }
.home-testimonial p::after { content: "\201D"; }
.home-testimonial footer {
  margin-top: var(--space-6);
  font-weight: 800;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

/* Agentes mensajería destacado en home — banda verde-bosque (v2) */
.home-agents {
  background: var(--green-forest);
  color: var(--color-text-inverse);
  border-radius: var(--radius-2xl);
  padding: var(--space-16);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.home-agents::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(52, 169, 83, 0.22), transparent 50%);
  pointer-events: none;
}
.home-agents > * { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  .home-agents { grid-template-columns: 1fr; padding: var(--space-10); }
}
.home-agents h2 { color: #ffffff; }
.home-agents p { color: #b9ccc0; }
.home-agents .chip--primary {
  background: rgba(255, 255, 255, 0.12);
  color: #bff3cf;
}
/* CTA del bloque agentes: botón claro sobre verde */
.home-agents .btn--primary {
  background: #ffffff;
  color: var(--green-deep);
  box-shadow: none;
}
.home-agents .btn--primary:hover {
  background: #ffffff;
  color: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------
   Mockup conversación WhatsApp (banda oscura de agentes).
   El HTML emite .whatsapp-mock con hijos .whatsapp-mock__bubble
   (modificadores --in / --out). Replica el chat del prototipo v2:
   contenedor tipo panel translúcido sobre el verde-bosque, burbuja
   entrante clara a la izquierda y saliente verde a la derecha.
   ------------------------------------------------------------ */
.whatsapp-mock {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xl);
}
.whatsapp-mock__bubble {
  max-width: 84%;
  padding: 13px 17px;
  border-radius: 18px;
  font-size: 0.96rem;
  line-height: 1.5;
  position: relative;
}
.whatsapp-mock__bubble--in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: #eaf3ee;
  border-bottom-left-radius: 5px;
}
.whatsapp-mock__bubble--out {
  align-self: flex-end;
  background: var(--green);
  color: #ffffff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px rgba(52, 169, 83, 0.4);
}

/* Compatibilidad: mockup en superficie clara (variante __msg legacy) */
.whatsapp-mock--light {
  background: #ECE5DD;
  border: none;
  backdrop-filter: none;
}
.whatsapp-mock__msg {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  font-size: var(--font-size-sm);
  color: #1e293b;
  position: relative;
  line-height: 1.4;
}
.whatsapp-mock__msg--out {
  align-self: flex-end;
  background: #DCF8C6;
  border-bottom-right-radius: 2px;
}
.whatsapp-mock__msg--in {
  align-self: flex-start;
  background: #ffffff;
  border-bottom-left-radius: 2px;
}
.whatsapp-mock__sender {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}

/* ============================================================
   PILLAR (template 2)
   ============================================================ */

.pillar-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.pillar-overview__stat {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pillar-overview__num {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--color-primary);
  display: block;
}
.pillar-overview__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Cluster narrative (cómo trabajan juntos los módulos) */
.cluster-narrative {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin: var(--space-12) 0;
  border: 1px solid var(--color-border);
}

/* ============================================================
   MÓDULO (template 3)
   ============================================================ */

.module-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.module-content {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-12);
  margin: var(--space-12) 0;
  align-items: start;
}
@media (max-width: 1023px) {
  .module-content { grid-template-columns: 1fr; }
}
.module-content__main {
  min-width: 0;
}
.module-content__aside {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.module-content__aside h4 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.module-content__aside ul {
  display: flex; flex-direction: column;
  gap: var(--space-1);
}
.module-content__aside a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}
.module-content__aside a:hover,
.module-content__aside a.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* "En 30 segundos" highlight */
.in-30-seconds {
  background: linear-gradient(135deg, var(--color-hero-tint) 0%, #ffffff 100%);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
}
.in-30-seconds__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  font-weight: 800;
  margin-bottom: var(--space-3);
}
.in-30-seconds ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}
.in-30-seconds li {
  position: relative;
  padding-left: var(--space-6);
  line-height: var(--line-height-relaxed);
}
/* Checkmark dibujado por CSS (sin emoji) */
.in-30-seconds li::before {
  content: '';
  position: absolute;
  left: 2px; top: 9px;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* ============================================================
   CASO DE USO (template 4)
   ============================================================ */

.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.case-stats__item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}
.case-stats__num {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--color-primary);
}
.case-stats__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   INDUSTRIA (template 5)
   ============================================================ */

.industry-challenges {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-8) 0;
  border-left: 4px solid var(--color-soft-warning-border);
}
.industry-challenges h3 {
  margin-top: 0;
  color: var(--color-soft-warning-text);
}

/* ============================================================
   INTEGRACIÓN (template 6)
   ============================================================ */

.integration-hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}
.integration-hero__logo {
  width: 96px; height: 96px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.integration-hero__logo img,
.integration-hero__logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.integration-hero__plus {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-weight: 300;
}

/* ============================================================
   AGENTE (template 7)
   ============================================================ */

.agent-capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.agent-capability {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.agent-capability__example {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background: var(--color-soft-neutral-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  margin-top: var(--space-2);
  border-left: 3px solid var(--color-primary);
}

/* ============================================================
   ESTÁTICA / LEGAL (template 8 + 9)
   ============================================================ */

.page-header {
  padding: calc(var(--nav-height) + var(--space-12)) 0 var(--space-8);
  background: linear-gradient(180deg, var(--color-hero-tint) 0%, transparent 100%);
}
.page-header__title { margin: 0 0 var(--space-3); }
.page-header__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 720px;
}

.legal-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex; gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ============================================================
   404 / Thank-you
   ============================================================ */

.empty-state {
  padding: var(--space-24) var(--space-6);
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}
.empty-state__code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.empty-state h1 { margin-bottom: var(--space-3); }
.empty-state p {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ============================================================
   Componentes editoriales v2 (de index-v2.html)
   Aditivos: disponibles para el contenido que el generador
   produzca en E2/E3. No alteran páginas existentes.
   ============================================================ */

/* Banda oscura genérica (verde-bosque) — reusable en cualquier sección */
.section--dark {
  background: var(--green-forest);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(52, 169, 83, 0.22), transparent 50%);
  pointer-events: none;
}
.section--dark .container { position: relative; z-index: 1; }
.section--dark h2 { color: #ffffff; }
.section--dark p { color: #b9ccc0; }
.section--dark .eyebrow,
.section--dark .eyebrow::before { color: #6fe095; }
.section--dark .eyebrow::before { background: #6fe095; }

/* Superficie alterna clara (paper-2) */
.section--alt { background: var(--color-bg-alt); }

/* --- Dos caminos (.duo) --- */
.duo__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-10);
}
.duo__head .home-section__lead { margin-top: var(--space-3); }
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } }
.duo-card {
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.duo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.duo-card--filled {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: transparent;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.duo-card--filled::after {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}
.duo-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  background: var(--green-tint);
  color: var(--green-deep);
}
.duo-card--filled .duo-card__tag { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.duo-card h3 { font-size: 1.65rem; margin: var(--space-4) 0 var(--space-2); }
.duo-card--filled h3 { color: #ffffff; }
.duo-card > p { font-size: 1.02rem; color: var(--color-text-muted); }
.duo-card--filled > p { color: rgba(255, 255, 255, 0.92); }
.duo-list { margin-top: var(--space-6); display: grid; gap: 13px; position: relative; z-index: 1; }
.duo-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-weight: 700; font-size: 0.98rem; color: var(--color-text);
}
.duo-list svg { flex-shrink: 0; width: 21px; height: 21px; margin-top: 1px; color: var(--color-primary); }
.duo-card--filled .duo-list li { color: #eaf3ee; }
.duo-card--filled .duo-list svg { color: #bff3cf; }

/* --- Pilar standalone (.pillar) — variante numerada con hover lift --- */
.pillar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--color-text);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-tint-2); }
.pillar__num { font-size: 0.95rem; color: var(--color-primary); font-weight: 600; }
.pillar h3 { font-size: 1.5rem; font-weight: 800; margin: var(--space-3) 0 var(--space-2); }
.pillar p { font-size: 0.96rem; color: var(--color-text-muted); }
.pillar__go {
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 0.9rem; color: var(--color-primary);
}

/* --- Industrias (.ind) --- */
.ind {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), border-color 0.26s var(--ease);
  text-decoration: none;
  color: var(--color-text);
}
.ind:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ind__ic {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--green-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ind__ic img, .ind__ic svg { width: 26px; height: 26px; }
.ind h3 { font-size: 1.08rem; font-weight: 800; margin: 0; }
.ind p { font-size: 0.85rem; color: var(--color-text-light); margin: 2px 0 0; }

/* --- Testimonial (.quote) --- */
.quote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.32;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
}
.quote footer {
  margin-top: var(--space-6);
  font-weight: 800;
  color: var(--color-primary);
  font-size: 0.95rem;
}