/**
 * SORTIX — Tema "Archivo" para la landing pública.
 * El theme vendor (iLanding) ya centraliza color/tipografía en variables
 * CSS (--heading-color, --accent-color, --nav-*, --heading-font). Las
 * sobrescribimos aquí en vez de pelear clase por clase: recolorea casi
 * todo el sitio hacia la identidad institucional "tinta + papel + sello".
 */

:root {
  --heading-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --heading-color: #16263f;      /* tinta marina, antes azul SaaS #2d465e */
  --accent-color: #8a2a35;       /* sello burdeo, antes azul brillante #0d83fd */
  --background-color: #ffffff;
  --surface-color: #faf7f0;      /* papel */
}

:root {
  --nav-color: #16263f;
  --nav-hover-color: #8a2a35;
  --nav-dropdown-hover-color: #8a2a35;
}

.light-background {
  --background-color: #faf7f0;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #16263f;   /* antes azul brillante, ahora tinta marina */
  --default-color: #f3ecdd;
  --heading-color: #f3ecdd;
  --surface-color: #1f3a5f;
  --contrast-color: #ffffff;
}

/* Header / navbar propio de home.html */
#header {
  background: rgba(250, 247, 240, 0.95) !important;
}
#header .sitename {
  font-family: var(--heading-font);
  color: var(--heading-color);
}
.navmenu a, .navmenu a:focus {
  color: var(--nav-color) !important;
}
.navmenu a:hover, .navmenu a.active {
  color: var(--accent-color) !important;
}

/* Botones: esquinas casi rectas (documento/sello), no "pill" SaaS */
.btn-primary, .btn-success, .btn-cta, .btn-outline-primary {
  border-radius: 4px !important;
}
.btn-primary {
  background: var(--heading-color) !important;
  border-color: var(--heading-color) !important;
}
.btn-primary:hover {
  background: #0e1a2c !important;
  border-color: #0e1a2c !important;
}
.btn-success {
  background: #3f6b4e !important;
  border-color: #3f6b4e !important;
}
.btn-cta {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
.btn-cta:hover {
  background: #6f1f28 !important;
}

/* Insignia "company-badge" del hero: de cápsula azul a sello dorado/burdeo */
.hero .company-badge {
  background: rgba(138, 42, 53, 0.08) !important;
  color: #8a2a35 !important;
  border: 1px solid rgba(138, 42, 53, 0.25);
  border-radius: 4px;
}

.hero .accent-text {
  color: var(--accent-color) !important;
}

/* Iconos de feature-box / service-card: paleta institucional en vez de
   naranjo/azul/verde/rojo genéricos de SaaS */
.feature-box.orange i, .feature-box.blue i, .feature-box.green i, .feature-box.red i,
.service-card .icon i {
  color: var(--accent-color) !important;
}
.feature-box.orange, .feature-box.blue, .feature-box.green, .feature-box.red {
  border-top: 3px solid var(--accent-color) !important;
}

/* Section titles con tipografía serif institucional */
.section-title h2, .about-title, .faq-title, .bloque-title {
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.bloque-card .bloque-icon i {
  color: var(--accent-color) !important;
}

/* Carrusel de fotografías reales del archivo (Wikimedia Commons CC) */
.archivos-carousel .swiper-slide {
  width: 360px;
  height: auto;
}
.archivo-slide {
  margin: 0;
  background: var(--surface-color, #fff);
  border: 1px solid #e3d9c4;
  border-radius: 8px;
  overflow: hidden;
}
.archivo-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px 8px 0 0 !important;
  display: block;
}
.archivo-slide figcaption {
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: #6b6357;
  line-height: 1.4;
}
.archivo-slide figcaption a {
  color: var(--accent-color);
}
.archivos-carousel .swiper-pagination {
  position: relative;
  margin-top: 1.25rem;
}
.archivos-carousel .swiper-pagination-bullet-active {
  background: var(--accent-color) !important;
}

.hero .customers-badge .avatar.avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-color);
  color: var(--accent-color);
  font-size: 1rem;
}

/* Landing comercial 2026: producto visible, ritmo editorial y profundidad */
.hero {
  min-height: 780px;
  padding-top: 150px !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(169, 128, 47, 0.13), transparent 28%),
    radial-gradient(circle at 12% 68%, rgba(138, 42, 53, 0.08), transparent 32%),
    #faf7f0 !important;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(3.5rem, 6.2vw, 6.5rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em;
}

.hero .hero-content > p {
  max-width: 630px;
  font-size: 1.15rem;
  line-height: 1.75;
  color: #465064;
}

.hero .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero .hero-buttons .btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.35rem;
  font-weight: 700;
}

.hero .btn-outline-primary {
  color: var(--heading-color);
  border-color: rgba(22, 38, 63, 0.3);
  background: rgba(255, 255, 255, 0.45);
}

.hero .btn-outline-primary:hover {
  color: #fff;
  border-color: var(--heading-color);
  background: var(--heading-color);
}

.hero-note {
  color: #5f685f !important;
  font-size: 0.88rem !important;
  font-weight: 600;
}

.hero-image {
  position: relative;
  padding: 16px;
}

.hero-product-image {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 36px 90px rgba(22, 38, 63, 0.22);
  border: 1px solid rgba(169, 128, 47, 0.25);
}

.hero .customers-badge {
  right: -10px !important;
  bottom: -16px !important;
  width: 300px !important;
  padding: 1rem 1.15rem !important;
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  background: rgba(250, 247, 240, 0.94) !important;
  border: 1px solid rgba(169, 128, 47, 0.28);
  box-shadow: 0 20px 55px rgba(22, 38, 63, 0.18) !important;
  backdrop-filter: blur(12px);
}

.product-badge-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent-color);
  border-radius: 50%;
}

.hero .customers-badge p {
  margin: 0 !important;
  text-align: left !important;
  font-size: 0.82rem !important;
  line-height: 1.4;
}

.hero .stats-row {
  padding: 1.1rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(22, 38, 63, 0.08);
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(10px);
}

.hero .stat-item {
  min-height: 86px;
}

.transformacion {
  padding: 110px 0;
  background: #16263f;
  color: #f3ecdd;
  overflow: hidden;
}

.transformacion h2 {
  color: #fff !important;
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.transformacion .section-meta {
  color: #d8bd7a;
}

.transformacion .lead {
  color: rgba(243, 236, 221, 0.76) !important;
  line-height: 1.7;
}

.editorial-image {
  position: relative;
  margin-right: 1.5rem;
}

.editorial-image img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.35);
}

.image-caption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  color: #16263f;
  background: rgba(250, 247, 240, 0.94);
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.outcome-list {
  margin-top: 2rem;
}

.outcome-list > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid rgba(243, 236, 221, 0.16);
}

.outcome-list span {
  color: #d8bd7a;
  font-family: var(--heading-font);
  font-size: 1.35rem;
}

.outcome-list p {
  margin: 0;
  color: rgba(243, 236, 221, 0.76);
}

.outcome-list strong {
  color: #fff;
}

#instituciones-publicas {
  padding: 110px 0;
}

#instituciones-publicas h2,
#saber-mas h2 {
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#instituciones-publicas .feature-box {
  min-height: 250px;
  padding: 2rem;
  border: 1px solid rgba(22, 38, 63, 0.08);
  border-top-width: 4px !important;
  box-shadow: 0 16px 45px rgba(22, 38, 63, 0.07);
}

#instituciones-publicas .feature-box i {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(138, 42, 53, 0.08);
}

.lifecycle-visual {
  overflow: hidden;
  padding: 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7decc;
  box-shadow: 0 28px 70px rgba(22, 38, 63, 0.12);
}

.lifecycle-visual img {
  width: 100%;
  border-radius: 8px;
}

.lifecycle-legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  padding: 0.9rem 0.25rem 0.1rem;
  color: #6b6357;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 991px) {
  .hero {
    min-height: auto;
    padding-top: 120px !important;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 12vw, 5.5rem) !important;
  }

  .hero-image {
    margin-top: 2.5rem;
  }

  .editorial-image {
    margin-right: 0;
  }
}

@media (max-width: 576px) {
  .hero .customers-badge {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: -12px;
  }

  .hero .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .lifecycle-legend {
    display: none;
  }
}

/* Landing profesional, aislada del theme vendor */
.professional-landing {
  margin: 0;
  color: #263247;
  background: #faf7f0;
  font-family: "Source Sans 3", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.professional-landing h1,
.professional-landing h2,
.professional-landing h3 {
  margin-top: 0;
  color: #16263f;
  font-family: "Source Serif 4", Georgia, serif;
}

.professional-landing a { text-decoration: none; }

.pro-header {
  position: fixed;
  z-index: 1000;
  top: 18px;
  right: 0;
  left: 0;
}

.pro-nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.65rem 0.8rem 0.65rem 1rem;
  border: 1px solid rgba(22, 38, 63, 0.07);
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.9);
  box-shadow: 0 14px 50px rgba(22, 38, 63, 0.1);
  backdrop-filter: blur(16px);
}

.pro-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pro-brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.pro-brand-logo--footer {
  height: 38px;
}

/* legacy — mantenido por si otros templates lo usan */
.pro-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: #8a2a35;
  font-size: 1.05rem;
}

.pro-links {
  display: flex;
  gap: 1.8rem;
  margin: 0 auto;
}

.pro-links a,
.pro-login {
  color: #445065;
  font-size: 0.92rem;
  font-weight: 600;
}

.pro-links a:hover,
.pro-login:hover { color: #8a2a35; }

.pro-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pro-demo,
.pro-primary,
.pro-secondary,
.pro-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.72rem 1.15rem;
  border-radius: 4px;
  font-weight: 700;
}

.pro-demo,
.pro-primary {
  color: #fff;
  background: #16263f;
}

.pro-demo:hover,
.pro-primary:hover {
  color: #fff;
  background: #8a2a35;
}

.pro-hero {
  padding: 150px 0 50px;
  background:
    radial-gradient(circle at 82% 15%, rgba(169, 128, 47, 0.15), transparent 27%),
    radial-gradient(circle at 8% 68%, rgba(138, 42, 53, 0.08), transparent 30%),
    #faf7f0;
}

.pro-eyebrow,
.pro-kicker {
  margin-bottom: 1.1rem;
  color: #8a2a35;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pro-eyebrow {
  width: fit-content;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(138, 42, 53, 0.2);
  border-radius: 4px;
  background: rgba(138, 42, 53, 0.06);
}

.pro-hero h1 {
  margin-bottom: 1.7rem;
  /* Antes clamp(3.5rem,5.5vw,6rem): con una columna de ~580px (col-lg-6)
     incluso frases cortas se partían en 4-5 líneas. Reducido para que
     el titular quepa en 2 líneas legibles sin perder el peso visual. */
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Centrado: las 2 líneas quedaban de ancho muy dispar alineadas a
     la izquierda, se veía desbalanceado. */
  text-align: center;
  /* Salvaguarda: si algún breakpoint futuro vuelve a pasarse de
     tamaño, la palabra larga se parte en vez de desbordar el h1 fuera
     del viewport (ver fix de "Transformación" en el breakpoint de
     576px más abajo). */
  overflow-wrap: break-word;
}

.pro-hero h1 span { color: #8a2a35; }

/* Centrado de todo el bloque de texto del hero (antes solo el h1
   estaba centrado, el resto quedaba a la izquierda -- inconsistente). */
.pro-hero-col-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pro-hero-col-text .pro-hero-copy { margin-left: auto; margin-right: auto; }
.pro-hero-col-text .pro-hero-actions,
.pro-hero-col-text .pro-proof { justify-content: center; }

.pro-hero-copy {
  max-width: 620px;
  margin-bottom: 2rem;
  color: #4c5668;
  font-size: 1.18rem;
  line-height: 1.72;
}

.pro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Conecta explícitamente el demo con la asesoría/mentoría detrás --
   feedback de producto 2026-07-28: el demo es el "gancho" pero la
   landing no dejaba claro que hay acompañamiento experto detrás. */
.pro-hero-microcopy {
  margin: 0.9rem 0 0;
  max-width: 480px;
  color: #6c7684;
  font-size: 0.85rem;
  font-style: italic;
}

.pro-secondary {
  color: #16263f;
  border: 1px solid rgba(22, 38, 63, 0.22);
  background: rgba(255,255,255,0.45);
}

.pro-secondary:hover {
  color: #fff;
  background: #16263f;
}

.pro-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1.5rem;
  color: #505a5c; /* era #6b746c — fix contraste WCAG AA */
  font-size: 0.78rem;
  font-weight: 600;
}

.pro-proof i { color: #8a2a35; }
.pro-proof > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pro-proof-mp {
  background: #fff;
  border: 1px solid #e3d9c4;
  border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.4rem;
  gap: 0.55rem !important;
  box-shadow: 0 3px 10px rgba(22, 38, 63, 0.07);
}
.pro-proof-logo { height: 26px; width: auto; display: block; }
.pro-proof-mp-text { color: #16263f; }

.pro-hero-visual {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: 0.75rem;
}

.pro-hero-visual-media {
  position: relative;
}

.pro-hero-visual-media > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(169, 128, 47, 0.25);
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(22, 38, 63, 0.2);
}

.pro-photo-credit {
  position: absolute;
  left: clamp(0.6rem, 2vw, 1.2rem);
  bottom: 0.6rem;
  max-width: calc(100% - 1.2rem);
  font-size: clamp(0.58rem, 1.4vw, 0.65rem);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(22, 38, 63, 0.55);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  line-height: 1.3;
}

.pro-floating-card {
  position: absolute;
  right: clamp(-8px, 1vw, 8px);
  bottom: -18px;
  width: min(300px, calc(100% - 1.5rem));
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(169, 128, 47, 0.24);
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.95);
  box-shadow: 0 22px 60px rgba(22, 38, 63, 0.2);
  font-size: clamp(0.74rem, 1.6vw, 0.8rem);
  line-height: 1.35;
  backdrop-filter: blur(12px);
}

.pro-floating-card strong { display: block; color: #16263f; }
.pro-floating-icon {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #8a2a35;
}

.pro-value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 3rem;
  padding: 1.4rem;
  border: 1px solid rgba(22, 38, 63, 0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 16px 50px rgba(22, 38, 63, 0.06);
}

.pro-value-strip > div {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.1rem;
  border-right: 1px solid rgba(22, 38, 63, 0.08);
}

.pro-value-strip > div:last-child { border-right: 0; }
.pro-value-strip i { color: #8a2a35; font-size: 1.3rem; }
.pro-value-strip span { color: #667084; font-size: 0.75rem; line-height: 1.35; }
.pro-value-strip strong { display: block; color: #16263f; font-family: "Source Serif 4", serif; font-size: 1rem; }

.pro-mini-features { padding: 50px 0; background: #faf3e6; border-top: 1px solid #e3d9c4; border-bottom: 1px solid #e3d9c4; }
.pro-mini-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.pro-mini-features-grid > div { display: flex; align-items: flex-start; gap: 0.9rem; }
.pro-mini-features-grid i { flex-shrink: 0; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: #a9802f; background: #fff; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(169,128,47,0.15); }
.pro-mini-features-grid strong { display: block; color: #16263f; font-family: "Source Serif 4", serif; font-size: 1rem; margin-bottom: 0.25rem; }
.pro-mini-features-grid span { color: #687286; font-size: 0.82rem; line-height: 1.45; }

.pro-problem,
.pro-product,
.pro-capabilities,
.pro-trust,
.pro-faq,
.pro-final-cta { padding: 110px 0; }

.pro-problem {
  color: #e9e3d7;
  background: #16263f;
}

.pro-problem h2,
.pro-trust h2,
.pro-final-cta h2 {
  color: #fff;
  font-size: clamp(2.7rem, 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.pro-problem p { color: rgba(233, 227, 215, 0.72); font-size: 1.05rem; line-height: 1.7; }
.pro-problem .pro-kicker { color: #d2b56b; }

.pro-photo { position: relative; }
.pro-photo img { width: 100%; border-radius: 10px; box-shadow: 0 32px 80px rgba(0,0,0,0.32); }
.pro-photo > span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  color: #16263f;
  background: rgba(250,247,240,0.94);
  font-size: 0.78rem;
  font-weight: 700;
}

.pro-outcomes > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.13);
}
.pro-outcomes b { color: #d2b56b; font-family: "Source Serif 4", serif; }
.pro-outcomes span { color: rgba(233,227,215,0.7); }
.pro-outcomes strong { color: #fff; }

.pro-proof-strip { background: #faf3e6; border-top: 1px solid #e3d9c4; border-bottom: 1px solid #e3d9c4; padding: 56px 0; }
.pro-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: center; }
.pro-proof-grid i { display: block; font-size: 1.7rem; color: #a9802f; margin-bottom: 0.6rem; }
.pro-proof-grid strong { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 2.6rem; color: #16263f; line-height: 1; margin-bottom: 0.5rem; }
.pro-proof-grid span { color: #596273; font-size: 0.92rem; line-height: 1.5; }
.pro-proof-note { margin: 2rem auto 0; max-width: 640px; text-align: center; color: #5e574e; font-size: 0.82rem; }

.pro-product { background: #fff; }
.pro-product h2,
.pro-section-heading h2,
.pro-faq h2 {
  font-size: clamp(2.7rem, 4vw, 4.3rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.pro-product p,
.pro-faq p { color: #687286; font-size: 1.05rem; line-height: 1.7; }
.pro-product ul { padding: 0; margin: 2rem 0 0; list-style: none; }
.pro-product li { padding: 0.72rem 0; border-bottom: 1px solid #ece7dc; color: #334057; font-weight: 600; }
.pro-product li i { margin-right: 0.7rem; color: #8a2a35; }

.pro-lifecycle {
  padding: 0.9rem;
  border: 1px solid #e7dfd0;
  border-radius: 12px;
  background: #faf7f0;
  box-shadow: 0 30px 80px rgba(22,38,63,0.12);
}
.pro-lifecycle img { width: 100%; border-radius: 7px; }
.pro-lifecycle > div { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0.8rem 0 0.1rem; color: #777064; font-size: 0.64rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }

.pro-capabilities { background: #f2ede3; }
.pro-section-heading { max-width: 730px; margin-bottom: 3.5rem; }
.pro-section-heading > p { color: #687286; font-size: 1.05rem; }
/* ── Capacidades — card featured ancho completo ── */
.pro-cap-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  min-height: 240px;
  background: #16263f;
}
.pro-cap-feat-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.pro-cap-feat-step {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.pro-cap-feat-num {
  font-family: "Source Serif 4", serif;
  font-size: 3rem;
  color: rgba(169,128,47,.28);
  line-height: 1;
  font-weight: 700;
}
.pro-cap-feat-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(210,181,107,.65);
}
.pro-cap-feat-content h3 {
  font-family: "Source Serif 4", serif;
  font-size: 2rem;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.pro-cap-feat-content p {
  color: rgba(233,227,215,.65);
  font-size: .93rem;
  line-height: 1.65;
}
.pro-cap-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border-radius: 6px;
  background: rgba(169,128,47,.18);
  color: #d2b56b;
  font-size: .84rem;
  font-weight: 700;
  width: fit-content;
}
.pro-cap-feat-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 75% 25%, rgba(169,128,47,.2), transparent 55%),
    radial-gradient(circle at 25% 75%, rgba(138,42,53,.18), transparent 45%),
    #1f3a5f;
}
.pro-cap-feat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .55;
  mix-blend-mode: luminosity;
}
.pro-cap-feat-watermark {
  position: absolute;
  bottom: -18px;
  right: -8px;
  font-family: "Source Serif 4", serif;
  font-size: 9rem;
  font-weight: 700;
  color: rgba(255,255,255,.04);
  line-height: 1;
  user-select: none;
}

/* ── Capacidades — fila de 3 cards ── */
.pro-cap-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pro-cap-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  border: 1px solid rgba(22,38,63,.07);
  box-shadow: 0 4px 16px rgba(22,38,63,.05);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pro-cap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(22,38,63,.13);
}
.pro-cap-watermark {
  position: absolute;
  top: -14px;
  right: -6px;
  font-family: "Source Serif 4", serif;
  font-size: 5.5rem;
  font-weight: 700;
  color: rgba(22,38,63,.04);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.pro-cap-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(138,42,53,.08);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: #8a2a35;
  flex-shrink: 0;
}
.pro-cap-card h3 {
  font-family: "Source Serif 4", serif;
  font-size: 1.3rem;
  color: #16263f;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.pro-cap-card p {
  color: #687286;
  font-size: .88rem;
  line-height: 1.65;
  flex: 1;
}
.pro-cap-benefit {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border-radius: 6px;
  background: rgba(138,42,53,.06);
  color: #8a2a35;
  font-size: .8rem;
  font-weight: 700;
  margin-top: auto;
}
.pro-cap-benefit::before { content: '→ '; }

.pro-pain { background: #faf3e6; }
/* grid-template-rows fija 3 pistas (problema / costura / solución)
   compartidas por las 3 tarjetas -- cada pista se dimensiona según el
   contenido más alto de esa fila entre las 3 tarjetas, así el corte
   entre problema y solución queda a la misma altura en las tres, sin
   importar cuánto texto tenga cada una. Cada .pro-pain-card es un
   subgrid de esas mismas pistas (ver más abajo) para heredarlas. */
.pro-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1.75rem;
  align-items: stretch;
}

/* Card contenedor */
.pro-pain-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e3d9c4;
  box-shadow: 0 4px 16px rgba(22,38,63,.05);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pro-pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(22,38,63,.12);
}

/* Número watermark */
.pro-pain-num {
  position: absolute;
  top: -10px;
  right: 10px;
  font-family: "Source Serif 4", serif;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(22,38,63,.05);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Zona problema — fondo blanco con borde izquierdo burdeo. Es una fila
   del subgrid de .pro-pain-card (ver .pro-pain-grid): su alto lo fija
   la tarjeta con el texto más largo entre las 3, así el corte con
   "solución" queda a la misma altura en las tres, no proporcional al
   propio texto de cada una. */
.pro-pain-problem {
  background: #fff;
  padding: 1.6rem 1.75rem 1.75rem;
  border-left: 4px solid rgba(138,42,53,.25);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.pro-pain-problem p { margin: 0; color: #596273; font-size: .9rem; line-height: 1.6; }

/* Costura entre problema y solución: una línea plana (sin degradé,
   que se veía como una mancha cuando el hueco de arriba variaba) con
   una insignia circular centrada encima, siempre en el mismo punto
   sin importar el alto de cada mitad. */
.pro-pain-arrow {
  position: relative;
  height: 0;
  border-top: 1px solid #e3d9c4;
  z-index: 2;
}
.pro-pain-arrow i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #a9802f;
  color: #fff;
  font-size: .8rem;
  box-shadow: 0 0 0 4px #faf3e6;
}

/* Zona solución — fondo cream con borde izquierdo gold */
.pro-pain-solution {
  background: #f0ebe0;
  padding: 1.75rem 1.75rem 1.75rem;
  border-left: 4px solid rgba(169,128,47,.4);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.pro-pain-solution p { margin: 0; color: #3d3529; font-size: .9rem; line-height: 1.6; }

/* Tags "El problema" / "La solución" */
.pro-pain-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a2a35;
}
.pro-pain-tag i { font-size: .85rem; }
.pro-pain-tag--sol { color: #5a6e3a; }
.pro-pain-tag--sol i { color: #5a6e3a; }

.pro-pain-cta { display: flex; justify-content: center; margin-top: 3rem; }

/* ── Quiénes somos ────────────────────────────────── */
.pro-about { padding: 70px 0; background: #fff; }
.pro-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: start; }
.pro-about-main h2 { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.9rem, 3vw, 2.8rem); color: #16263f; margin-bottom: 1.25rem; line-height: 1.2; }
.pro-about-main > p { color: #4a5568; font-size: 1.05rem; line-height: 1.7; margin-bottom: 1rem; }
.pro-about-values { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.pro-about-value { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 10px; }
.pro-about-value i { flex-shrink: 0; font-size: 1.25rem; color: #a9802f; margin-top: 2px; }
.pro-about-value strong { display: block; color: #16263f; font-family: "Source Serif 4", Georgia, serif; font-size: 0.98rem; margin-bottom: 0.2rem; }
.pro-about-value span { font-size: 0.88rem; color: #687286; line-height: 1.5; }
.pro-about-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.pro-about-card { padding: 1.5rem 1.75rem; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 12px; border-left: 4px solid #16263f; }
.pro-about-card--gold { border-left-color: #a9802f; }
.pro-about-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #16263f; color: #d2b56b; font-size: 1rem; margin-bottom: 0.85rem; }
.pro-about-card--gold .pro-about-card-icon { background: #a9802f; color: #fff; }
.pro-about-card h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.1rem; color: #16263f; margin-bottom: 0.5rem; }
.pro-about-card p { font-size: 0.92rem; color: #4a5568; line-height: 1.65; margin: 0; }
@media (max-width: 991px) { .pro-about-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 767px) { .pro-about { padding: 60px 0; } }

.pro-trust { background: #fff; }
.pro-trust-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; padding: 4rem; border-radius: 12px; background: #8a2a35; }
.pro-trust .pro-kicker { color: #e6c886; }
.pro-trust-panel h2 { font-size: clamp(2.4rem, 3.5vw, 3.8rem); }
.pro-trust-panel p { display: flex; gap: 0.9rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); }
.pro-trust-panel p i { color: #e6c886; font-size: 1.2rem; }
.pro-trust-panel strong { color: #fff; }

.pro-faq { background: #faf7f0; }
.pro-faq details { border-top: 1px solid #dcd4c5; }
.pro-faq details:last-child { border-bottom: 1px solid #dcd4c5; }
.pro-faq summary { padding: 1.35rem 2.2rem 1.35rem 0; color: #16263f; font-family: "Source Serif 4", serif; font-size: 1.22rem; font-weight: 700; cursor: pointer; }
.pro-faq details p { margin: 0 0 1.5rem; font-size: 0.95rem; }

.pro-final-cta { background: #faf7f0; }
.pro-final-panel { display: grid; grid-template-columns: 1.3fr 0.7fr; align-items: center; gap: 4rem; padding: 4rem; border-radius: 12px; background: #16263f; }
.pro-final-panel .pro-kicker { color: #d2b56b; }
.pro-final-panel h2 { margin: 0; font-size: clamp(2.6rem, 4vw, 4.3rem); }
.pro-final-panel > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.pro-light-button { color: #16263f; background: #faf7f0; }
.pro-light-button:hover { color: #fff; background: #8a2a35; }
.pro-final-panel > div:last-child > a:not(.pro-light-button) { color: #fff; font-weight: 700; }

/* Banda Mercado Público */
.pro-mercado-publico { padding: 56px 0; background: #16263f; }
.pro-mp-inner { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 2rem; padding: 2.5rem 3rem; border: 1px solid rgba(169,128,47,0.3); border-radius: 12px; background: rgba(255,255,255,0.04); }
.pro-mp-badge { width: 168px; height: 84px; display: grid; place-items: center; border-radius: 12px; background: #fff; padding: 0.75rem 1rem; flex-shrink: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.pro-mp-logo { width: 100%; height: auto; display: block; }
.pro-mp-inner strong { display: block; color: #fff; font-family: "Source Serif 4", serif; font-size: 1.3rem; margin-bottom: 0.4rem; }
.pro-mp-inner p { margin: 0; color: rgba(243,236,221,0.7); font-size: 0.92rem; line-height: 1.6; }
.pro-mp-cta { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; padding: 0.85rem 1.5rem; border-radius: 4px; background: #a9802f; color: #fff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.pro-mp-cta:hover { background: #8a6520; color: #fff; }
@media (max-width: 768px) {
  .pro-mp-inner { grid-template-columns: 1fr; text-align: center; }
  .pro-mp-badge { margin: 0 auto; }
  .pro-mp-cta { width: 100%; justify-content: center; }
}

/* Sección de roles por cargo */
.pro-roles { padding: 110px 0; background: #fff; }
.pro-roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.pro-roles-grid article { padding: 2rem; border: 1px solid #e3d9c4; border-radius: 12px; background: #faf7f0; display: flex; flex-direction: column; gap: 1rem; }
.pro-roles-grid article.pro-role-featured { border-color: #16263f; background: #16263f; color: #e9e3d7; }
.pro-roles-grid article > i { font-size: 1.8rem; color: #8a2a35; }
.pro-roles-grid article.pro-role-featured > i { color: #d2b56b; }
.pro-roles-grid h3 { margin: 0; font-size: 1.3rem; color: #16263f; }
.pro-roles-grid article.pro-role-featured h3 { color: #fff; }
.pro-roles-grid p { margin: 0; color: #596273; font-size: 0.92rem; line-height: 1.6; flex: 1; }
.pro-roles-grid article.pro-role-featured p { color: rgba(233,227,215,0.75); }
.pro-roles-grid a { display: inline-flex; align-items: center; gap: 0.5rem; color: #8a2a35; font-weight: 700; font-size: 0.88rem; }
.pro-roles-grid article.pro-role-featured a { color: #d2b56b; }
.pro-roles-grid a:hover { text-decoration: underline; }
.pro-pain-cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; }

.pro-footer { padding: 70px 0 25px; color: rgba(255,255,255,0.55); background: #16263f; }
.pro-footer > .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
.pro-footer p { max-width: 430px; color: rgba(255,255,255,0.5); }
.pro-footer .container > div:not(:first-child) { display: flex; flex-direction: column; gap: 0.65rem; }
.pro-footer strong { color: rgba(255,255,255,0.85); }
.pro-footer a:not(.pro-brand) { color: rgba(255,255,255,0.5); }
.pro-footer a:not(.pro-brand):hover { color: #d2b56b; }
.pro-copyright { color: rgba(255,255,255,0.3) !important; border-color: rgba(255,255,255,0.1) !important; }
.pro-copyright { max-width: none !important; margin: 50px 0 0; padding-top: 20px; border-top: 1px solid #dcd4c5; text-align: center; font-size: 0.78rem; }

@media (max-width: 991px) {
  .pro-header { top: 10px; }
  .pro-nav { min-height: 62px; gap: 1rem; position: relative; }
  .pro-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(250, 247, 240, 0.98);
    border: 1px solid rgba(22, 38, 63, 0.08);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 16px 48px rgba(22, 38, 63, 0.14);
    backdrop-filter: blur(16px);
    z-index: 999;
  }
  .pro-links.pro-links-open { display: flex; }
  .pro-links a {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
  }
  .pro-links a:hover { background: rgba(22, 38, 63, 0.04); }
  .pro-hamburger { display: flex; }
  .pro-actions { margin-left: auto; }
  .pro-login { display: none; }
  .pro-hero { min-height: auto; padding-top: 120px; }
  /* Antes clamp(3.6rem,12vw,5.8rem): a este ancho (768-991px) daba
     ~92px, casi el doble que en desktop (3.6rem=57.6px) y que en
     mobile (2.5rem=40px) -- quedaba un "salto" en tablet más grande
     que sus dos vecinos, ocupando 5 líneas completas de pantalla. */
  .pro-hero h1 { font-size: clamp(2.6rem, 7vw, 3.4rem); }
  .pro-value-strip { grid-template-columns: repeat(2, 1fr); }
  .pro-value-strip > div:nth-child(2) { border-right: 0; }
  .pro-value-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(22,38,63,0.08); }
  .pro-trust-panel,
  .pro-final-panel { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Skip link ── */
.pro-skip-link {
  position: absolute;
  top: -50px;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  border-radius: 0 0 6px 6px;
  background: #a9802f;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  transition: top 0.2s;
}
.pro-skip-link:focus { top: 0; color: #fff; }

/* ── Focus-visible global ── */
.pro-demo:focus-visible,
.pro-primary:focus-visible,
.pro-secondary:focus-visible,
.pro-light-button:focus-visible,
.pro-mp-cta:focus-visible,
.pro-outline-dark:focus-visible,
.pro-links a:focus-visible,
.pro-footer-cta a:focus-visible {
  outline: 2px solid #a9802f;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Hamburger button ── */
.pro-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 6px;
  background: none;
  border: 1px solid rgba(22, 38, 63, 0.15);
  border-radius: 6px;
  cursor: pointer;
}
.pro-hamburger span {
  display: block;
  height: 2px;
  background: #16263f;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.pro-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pro-hamburger.is-open span:nth-child(2) { opacity: 0; }
.pro-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Active nav link (scroll) ── */
.pro-links a.pro-link-active { color: #8a2a35; }

/* ── CTA en sección oscura #problema ── */
.pro-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.72rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: rgba(233, 227, 215, 0.9);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.pro-outline-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ── Footer CTA ── */
.pro-footer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  margin: 0 0 2rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.pro-footer-cta span { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.pro-footer-cta a {
  color: #d2b56b;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.pro-footer-cta a:hover { text-decoration: underline; color: #e8ce8a; }

/* ── Hover elevación en cards ── */
.pro-roles-grid article {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pro-roles-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(22, 38, 63, 0.12);
}

/* ── Breakpoints tablet para grids (768px) ── */
@media (max-width: 768px) {
  .pro-mini-features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .pro-pain-grid { grid-template-columns: repeat(2, 1fr); }
  .pro-roles-grid { grid-template-columns: repeat(2, 1fr); }
  .pro-cap-row { grid-template-columns: repeat(2, 1fr); }
  .pro-cap-feat-content h3 { font-size: 1.65rem; }
}

@media (max-width: 576px) {
  .pro-header { top: 8px; }
  .pro-nav {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.45rem 0.65rem;
    margin: 0 10px;
    padding: 0.55rem 0.65rem;
  }
  .pro-brand-logo { height: 28px; }
  .pro-brand-logo--footer { height: 32px; }
  .pro-actions {
    gap: 0.45rem;
    margin-left: 0;
  }
  .pro-login {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 0.45rem;
    font-size: 0.82rem;
  }
  .pro-demo {
    min-height: 38px;
    padding: 0.5rem 0.62rem;
    font-size: 0.8rem;
  }
  .pro-links.pro-links-open {
    order: 3;
    display: flex;
    width: 100%;
    gap: 0.9rem;
    overflow-x: auto;
    padding: 0.35rem 0 0.1rem;
    scrollbar-width: none;
  }
  .pro-links::-webkit-scrollbar { display: none; }
  .pro-links a {
    flex: 0 0 auto;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .pro-hero { padding-top: 142px; text-align: center; }
  .pro-hero h1 {
    margin-bottom: 1.1rem;
    /* Antes clamp(3rem,17vw,4.25rem): a 17vw, en un iPhone SE (375px)
       el texto quedaba en 63.75px -- "Transformación" no cabía en una
       línea ni con wrap, y el h1 terminaba más ancho que el viewport,
       bebiendo fuera de la pantalla por ambos lados. */
    font-size: clamp(1.9rem, 8vw, 2.5rem);
    line-height: 1.08;
  }
  .pro-eyebrow { margin-right: auto; margin-left: auto; }
  .pro-hero-copy {
    margin-bottom: 1.35rem;
    font-size: 1rem;
    line-height: 1.55;
  }
  .pro-hero-actions { flex-direction: column; }
  .pro-proof { justify-content: center; }
  .pro-hero-visual {
    max-width: min(420px, 100%);
    margin: 1.6rem auto 0;
    padding: 0.45rem;
  }
  .pro-hero-visual-media > img {
    border-radius: 12px;
    box-shadow: 0 24px 58px rgba(22, 38, 63, 0.18);
  }
  .pro-floating-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 0.9rem; text-align: left; }
  .pro-value-strip { grid-template-columns: 1fr; margin-top: 3rem; text-align: left; }
  .pro-value-strip > div { border-right: 0; border-bottom: 1px solid rgba(22,38,63,0.08); }
  .pro-value-strip > div:last-child { border-bottom: 0; }
  .pro-problem, .pro-product, .pro-capabilities, .pro-trust, .pro-faq, .pro-final-cta, .pro-pain { padding: 78px 0; }
  .pro-proof-strip { padding: 40px 0; }
  .pro-proof-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .pro-pain-grid { grid-template-columns: 1fr; }
  .pro-roles-grid { grid-template-columns: 1fr; }
  .pro-mini-features { padding: 36px 0; }
  .pro-mini-features-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pro-photo > span { right: 12px; bottom: 12px; left: 12px; }
  .pro-lifecycle > div { display: none; }
  .pro-cap-featured { grid-template-columns: 1fr; }
  .pro-cap-feat-visual { display: none; }
  .pro-cap-row { grid-template-columns: 1fr; }
  .pro-trust-panel, .pro-final-panel { padding: 2rem; }
  .pro-footer > .container { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Movimiento sutil ──────────────────────────────────────────────
   Dos mecanismos, ambos "fail-safe": si algo falla (JS no corre,
   reduced-motion, etc.) el contenido queda visible igual, nunca
   escondido -- la landing ya tuvo antes un bug real de contenido
   invisible por una librería de animación (AOS) que dependía de JS
   para revelar contenido con opacity:0 por defecto. Acá al revés: todo
   parte visible por CSS puro, y JS solo AGREGA el estado "por revelar"
   antes de animar -- si JS no corre, esa clase nunca se agrega y el
   contenido ya estaba visible desde el principio.

   1) Entrada del hero al cargar la página: keyframes puros, sin JS.
   2) Reveal al hacer scroll (tarjetas, títulos de sección, cifras):
      .reveal-on-scroll + .is-visible, activadas por IntersectionObserver
      en home_professional.html. */
@keyframes pro-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pro-hero .pro-eyebrow, .pro-hero h1, .pro-hero-copy, .pro-hero-actions, .pro-hero-microcopy, .pro-hero .pro-proof {
  animation: pro-fade-up .7s ease both;
}
.pro-hero h1          { animation-delay: .08s; }
.pro-hero-copy        { animation-delay: .16s; }
.pro-hero-actions     { animation-delay: .24s; }
.pro-hero-microcopy   { animation-delay: .3s; }
.pro-hero .pro-proof  { animation-delay: .34s; }

.reveal-on-scroll {
  opacity: 1;
  transform: none;
}
.reveal-on-scroll.reveal-pending {
  opacity: 0;
  transform: translateY(20px);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
/* Tarjetas en grilla: pequeño desfase por columna para que no
   aparezcan todas en el mismo instante -- se ve más natural. */
.pro-pain-grid .reveal-on-scroll:nth-child(2) { transition-delay: .08s; }
.pro-pain-grid .reveal-on-scroll:nth-child(3) { transition-delay: .16s; }
.pro-cap-row .reveal-on-scroll:nth-child(2) { transition-delay: .08s; }
.pro-cap-row .reveal-on-scroll:nth-child(3) { transition-delay: .16s; }
.pro-roles-grid .reveal-on-scroll:nth-child(2) { transition-delay: .08s; }
.pro-roles-grid .reveal-on-scroll:nth-child(3) { transition-delay: .16s; }

/* Accesibilidad: quien pidió menos movimiento en su SO no ve ninguna
   animación -- todo queda en su estado final de inmediato. */
@media (prefers-reduced-motion: reduce) {
  .pro-hero .pro-eyebrow, .pro-hero h1, .pro-hero-copy, .pro-hero-actions, .pro-hero-microcopy, .pro-hero .pro-proof {
    animation: none;
  }
  .reveal-on-scroll, .reveal-on-scroll.reveal-pending, .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pro-pain-card, .pro-cap-card, .pro-roles-grid article {
    transition: none;
  }
}