/* ============================================================
   PÁGINA — COMUNICACIÓN (FORZADO DE ESTILOS Y MAQUETACIÓN)
============================================================ */

/* Evita el scroll horizontal residual que puede aparecer al usar 100vw
   en el breakout de las secciones (100vw no descuenta el ancho de la
   barra de scroll vertical en algunos navegadores). */
html body { overflow-x: hidden; }

html body .da-crumb {
  box-sizing: border-box;
  width: 100%;
}

/* FULL-BLEED: rompe el ancho "boxed" del contenedor de Elementor para
   que el fondo de cada sección llegue de verdad al borde del viewport.
   El .wrap de dentro sigue centrando y limitando el contenido normalmente. */
html body .da-hero,
html body .da-problema,
html body .da-desglose,
html body .da-proceso,
html body .da-resultado,
html body .da-cruce-wrap,
html body .da-cta-final {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* El .wrap del tema puede depender del ancho "boxed" original para su
   propio hueco lateral; al liberar la sección a 100vw hay que darle
   aquí su propio max-width y padding, para que el fondo llegue al
   borde pero el contenido siga con el mismo margen de siempre. */
html body .da-hero > .wrap,
html body .da-problema > .wrap,
html body .da-desglose > .wrap,
html body .da-proceso > .wrap,
html body .da-resultado > .wrap,
html body .da-cruce-wrap > .wrap,
html body .da-cta-final > .wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 600px) {
  html body .da-hero > .wrap,
  html body .da-problema > .wrap,
  html body .da-desglose > .wrap,
  html body .da-proceso > .wrap,
  html body .da-resultado > .wrap,
  html body .da-cruce-wrap > .wrap,
  html body .da-cta-final > .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}
html body .da-hero *,
html body .da-problema *,
html body .da-desglose *,
html body .da-proceso *,
html body .da-resultado *,
html body .da-cruce-wrap *,
html body .da-cta-final * {
  box-sizing: border-box;
}

/* 00 — BREADCRUMB */
html body .da-crumb {
  padding: 20px 0 0 !important;
  font-size: 13px;
  color: #6B7570;
}
html body .da-crumb a {
  color: #1F5C4E;
  text-decoration: none;
}
html body .da-crumb a:hover { text-decoration: underline; }

/* 01 — HERO DE SERVICIO */
html body .da-hero {
  padding: 36px 0 84px !important;
  border-bottom: 1px solid #C7C2AE;
  background: linear-gradient(180deg, #F9FAF6 0%, #F0F2EA 100%);
}
html body .da-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 56px !important;
  align-items: center !important;
  margin-top: 28px !important;
}
html body .da-hero h1 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #123A31;
  margin: 0 0 22px !important;
  max-width: 520px;
}
html body .da-hero p.da-lead {
  font-size: 18px;
  color: #3C4A44;
  max-width: 460px;
  line-height: 1.55;
  margin: 0 0 32px !important;
}
html body .da-cta-row {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap;
}
html body .da-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 26px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html body .da-btn-primary { background: #123A31 !important; color: #F9FAF6 !important; }
html body .da-btn-primary:hover { background: #1F5C4E !important; }
html body .da-btn-ghost { border-color: #123A31 !important; color: #123A31 !important; }
html body .da-btn-ghost:hover { background: #123A31 !important; color: #F9FAF6 !important; }

html body .da-marquee-panel {
  position: relative;
  border: 1px solid #C7C2AE;
  background: #F0F2EA;
  border-radius: 4px;
  padding: 38px 0 !important;
  overflow: hidden;
  transform: rotate(-2.5deg);
}
html body .da-marquee-track {
  display: flex !important;
  white-space: nowrap;
  animation: da-marquee 26s linear infinite;
  width: max-content;
}
html body .da-marquee-track span {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #123A31;
  padding: 0 26px;
  position: relative;
}
html body .da-marquee-track span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C99A2E;
}
@keyframes da-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  html body .da-marquee-track { animation: none; }
}

/* 02 — EL PROBLEMA REAL */
html body .da-problema { padding: 80px 0 !important; background: #E6E9DE !important; }
html body .da-problema-grid {
  display: grid !important;
  grid-template-columns: 0.85fr 1.15fr !important;
  gap: 60px !important;
}
html body .da-problema h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  color: #16231F;
  margin: 0 !important;
  max-width: 360px;
}
html body .da-problema-list { border-top: 1px solid #C7C2AE; }
html body .da-problema-row {
  display: flex !important;
  gap: 20px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid #C7C2AE;
  align-items: flex-start;
}
html body .da-problema-row .da-bar {
  width: 3px;
  align-self: stretch;
  background: #C99A2E;
  flex-shrink: 0;
  min-height: 22px;
}
html body .da-problema-row p {
  margin: 0 !important;
  font-size: 16px;
  color: #16231F;
  line-height: 1.5;
}

/* 03 — QUÉ INCLUYE (ÍNDICE EDITORIAL) */
html body .da-desglose { padding: 92px 0 !important; background: #F0F2EA !important; }
html body .da-desglose-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 24px;
  margin-bottom: 44px !important;
}
html body .da-desglose-head h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 32px;
  margin: 0;
  color: #123A31;
}
html body .da-desglose-head p {
  font-size: 15px;
  color: #3C4A44;
  max-width: 320px;
  margin: 0;
  line-height: 1.5;
}
html body .da-desglose-list { border-top: 1px solid #C7C2AE; }
html body .da-desglose-row {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 32px !important;
  padding: 34px 0 !important;
  border-bottom: 1px solid #C7C2AE;
  align-items: baseline;
  transition: padding-left .2s ease;
}
html body .da-desglose-row:hover { padding-left: 12px !important; }
html body .da-desglose-num {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px #1F5C4E;
  transition: color .2s ease;
}
html body .da-desglose-row:hover .da-desglose-num { color: #E6E9DE; }
html body .da-desglose-row h3 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: #16231F;
  margin: 0 0 8px 0 !important;
}
html body .da-desglose-row p {
  font-size: 15.5px;
  color: #3C4A44;
  line-height: 1.6;
  margin: 0 !important;
  max-width: 560px;
}

/* 04 — CÓMO TRABAJAMOS (LÍNEA DE TIEMPO) */
html body .da-proceso { padding: 92px 0 !important; background: #E6E9DE !important; }
html body .da-proceso h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 32px;
  margin: 0 0 8px 0 !important;
  color: #123A31;
}
html body .da-proceso-intro {
  font-size: 15px;
  color: #3C4A44;
  max-width: 420px;
  margin: 0 0 56px 0 !important;
}
html body .da-proceso-track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  position: relative;
}
html body .da-proceso-track::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 1px;
  background: #C7C2AE;
}
html body .da-proceso-step { padding-right: 24px; }
html body .da-proceso-node {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #123A31;
  color: #F0F2EA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
html body .da-proceso-step h3 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #16231F;
  margin: 0 0 8px 0;
}
html body .da-proceso-step p { font-size: 14px; color: #3C4A44; line-height: 1.55; margin: 0; }

/* 05 — RESULTADO REAL (BLOQUE OSCURO) */
html body .da-resultado {
  padding: 100px 0 !important;
  background: #123A31 !important;
  color: #F0F2EA !important;
  position: relative;
  overflow: hidden;
}
html body .da-resultado-glyph {
  font-family: Georgia, serif;
  position: absolute;
  top: -40px;
  left: -10px;
  font-size: 260px;
  line-height: 1;
  color: rgba(240, 242, 234, 0.06);
  pointer-events: none;
}
html body .da-resultado-box { max-width: 760px; position: relative; }
html body .da-resultado-eyebrow { font-size: 13px; color: #C99A2E; margin: 0 0 20px 0; font-weight: 600; }
html body .da-resultado-quote {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 28px 0;
}
html body .da-resultado-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
html body .da-resultado-name { font-weight: 600; font-size: 15px; }
html body .da-resultado-pill {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12px;
  background: rgba(240, 242, 234, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(240, 242, 234, 0.25);
}

/* 06 — CRUCE RESCATE KIT DIGITAL */
html body .da-cruce-wrap { padding: 64px 0 !important; background: #F0F2EA !important; }
html body .da-cruce {
  background: #E6E9DE !important;
  border: 1px solid #C7C2AE;
  border-radius: 4px;
  padding: 32px 40px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  flex-wrap: wrap;
}
html body .da-cruce p {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  color: #16231F;
}

/* 07 — CTA FINAL */
html body .da-cta-final { padding: 96px 0 110px !important; background: #F9FAF6 !important; }
html body .da-cta-final h2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 34px;
  max-width: 640px;
  color: #123A31;
  margin: 0 0 16px 0 !important;
}
html body .da-cta-final p {
  font-size: 16px;
  color: #3C4A44;
  max-width: 520px;
  margin: 0 0 32px 0 !important;
}

/* ADAPTACIÓN MÓVIL */
@media (max-width: 900px) {
  html body .da-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  html body .da-hero h1 { font-size: 36px; }
  html body .da-problema-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  html body .da-proceso-track { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; }
  html body .da-proceso-track::before { display: none; }
  html body .da-desglose-row { grid-template-columns: 64px 1fr !important; }
  html body .da-desglose-num { font-size: 34px; }
  html body .da-desglose-head { flex-direction: column !important; align-items: flex-start !important; }
  html body .da-desglose-head p { max-width: 100%; }
  html body .da-cruce { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 560px) {
  html body .da-proceso-track { grid-template-columns: 1fr !important; }
}