/* =========================================================
   ESTRALIA · PLANTILLA MAESTRA DE SERVICIOS NIVEL 2
   Archivo común para las ocho landings de servicio.
   Namespace exclusivo: sd-
   ========================================================= */

.page-servicio-detalle {
  --sd-ink: #10212b;
  --sd-muted: #52616b;
  --sd-blue: #006699;
  --sd-blue-dark: #004f78;
  --sd-soft: #f3f6f8;
  --sd-line: #dce4e8;
  --sd-dark: #111d24;
  --sd-white: #ffffff;
  --sd-shadow: 0 18px 44px rgba(16, 33, 43, .10);
  color: var(--sd-ink);
  background: var(--sd-white);
}

.page-servicio-detalle .site-main { overflow: hidden; }
.page-servicio-detalle .sd-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.page-servicio-detalle .sd-section { padding: clamp(72px, 8vw, 116px) 0; }
.page-servicio-detalle .sd-section--soft { background: var(--sd-soft); }
.page-servicio-detalle .sd-section--dark { background: var(--sd-dark); color: var(--sd-white); }
.page-servicio-detalle .sd-eyebrow { margin: 0 0 14px; color: var(--sd-blue); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.page-servicio-detalle .sd-section--dark .sd-eyebrow { color: #7dc7e8; }
.page-servicio-detalle .sd-section h2,
.page-servicio-detalle .sd-answer h2,
.page-servicio-detalle .sd-final h2 { margin: 0; font-size: clamp(1.85rem, 3vw, 3.15rem); line-height: 1.13; letter-spacing: -.04em; }
.page-servicio-detalle .sd-section h3 { line-height: 1.25; }
.page-servicio-detalle .sd-section p,
.page-servicio-detalle .sd-answer p { color: var(--sd-muted); }
.page-servicio-detalle .sd-section--dark p { color: rgba(255,255,255,.78); }
.page-servicio-detalle .sd-section a:not(.sd-btn) { color: var(--sd-blue); }
.page-servicio-detalle .sd-section--dark a:not(.sd-btn) { color: #8ed1ee; }

/* Hero */
.page-servicio-detalle .sd-hero { position: relative; min-height: min(760px, 88vh); display: grid; align-items: end; isolation: isolate; color: var(--sd-white); background: #0d1920; }
.page-servicio-detalle .sd-hero__media,
.page-servicio-detalle .sd-hero__overlay { position: absolute; inset: 0; }
.page-servicio-detalle .sd-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.7) contrast(1.04); }
.page-servicio-detalle .sd-hero__overlay { background: linear-gradient(90deg, rgba(4,16,23,.94) 0%, rgba(4,16,23,.79) 48%, rgba(4,16,23,.32) 100%), linear-gradient(0deg, rgba(4,16,23,.88) 0%, transparent 55%); }
.page-servicio-detalle .sd-hero__inner { position: relative; z-index: 1; padding-top: 150px; padding-bottom: clamp(70px, 8vw, 110px); }
.page-servicio-detalle .sd-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: clamp(40px, 6vw, 72px); font-size: .82rem; color: rgba(255,255,255,.7); }
.page-servicio-detalle .sd-breadcrumb a { color: inherit; text-decoration: none; }
.page-servicio-detalle .sd-breadcrumb a:hover { color: #fff; }
.page-servicio-detalle .sd-hero__content { max-width: 850px; }
.page-servicio-detalle .sd-hero .sd-eyebrow { color: #88d0ef; }
.page-servicio-detalle .sd-hero h1 { max-width: 820px; margin: 0; font-size: clamp(2.55rem, 6vw, 5.35rem); line-height: .99; letter-spacing: -.055em; text-wrap: balance; }
.page-servicio-detalle .sd-hero__lead { max-width: 780px; margin: 28px 0 0; font-size: clamp(1.05rem, 1.65vw, 1.34rem); line-height: 1.62; color: rgba(255,255,255,.88); }
.page-servicio-detalle .sd-hero__trust { margin: 18px 0 0; font-size: .9rem; color: rgba(255,255,255,.67); }

/* Buttons */
.page-servicio-detalle .sd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.page-servicio-detalle .sd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 24px; border: 1px solid transparent; border-radius: 3px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.page-servicio-detalle .sd-btn:hover { transform: translateY(-2px); }
.page-servicio-detalle .sd-btn:focus-visible { outline: 3px solid #ffd65a; outline-offset: 3px; }
.page-servicio-detalle .sd-btn--primary { background: var(--sd-blue); color: #fff; }
.page-servicio-detalle .sd-btn--primary:hover { background: var(--sd-blue-dark); }
.page-servicio-detalle .sd-btn--secondary { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.page-servicio-detalle .sd-btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* Direct answer */
.page-servicio-detalle .sd-answer { padding: clamp(70px, 8vw, 112px) 0; border-bottom: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-answer__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(44px, 8vw, 110px); align-items: start; }
.page-servicio-detalle .sd-answer__copy { padding-left: 30px; border-left: 4px solid var(--sd-blue); }
.page-servicio-detalle .sd-answer__copy p { margin: 0 0 18px; }
.page-servicio-detalle .sd-answer__copy p:last-child { margin-bottom: 0; }
.page-servicio-detalle .sd-lead { font-size: 1.18rem; font-weight: 600; line-height: 1.65; color: var(--sd-ink) !important; }

/* Section heads */
.page-servicio-detalle .sd-section__head { max-width: 800px; margin-bottom: 44px; }
.page-servicio-detalle .sd-section__head > p:last-child { margin: 20px 0 0; font-size: 1.02rem; line-height: 1.75; }
.page-servicio-detalle .sd-section__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 8vw, 110px); align-items: end; }
.page-servicio-detalle .sd-section__head--split > p { margin: 0; }

/* Phase cards */
.page-servicio-detalle .sd-card-grid { display: grid; gap: 18px; }
.page-servicio-detalle .sd-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-servicio-detalle .sd-card { position: relative; min-height: 255px; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--sd-line); box-shadow: 0 10px 28px rgba(16,33,43,.05); }
.page-servicio-detalle .sd-card__num { display: block; margin-bottom: 52px; color: var(--sd-blue); font-weight: 700; font-size: .8rem; letter-spacing: .12em; }
.page-servicio-detalle .sd-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.page-servicio-detalle .sd-card p { margin: 0; font-size: .91rem; line-height: 1.65; }

/* Two-column technical blocks */
.page-servicio-detalle .sd-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
.page-servicio-detalle .sd-split--reverse { grid-template-columns: minmax(380px, .95fr) minmax(0, 1.05fr); }
.page-servicio-detalle .sd-split__copy > p { line-height: 1.75; }
.page-servicio-detalle .sd-check-list { display: grid; gap: 12px; margin: 28px 0; padding: 0; list-style: none; }
.page-servicio-detalle .sd-check-list li { position: relative; padding-left: 28px; line-height: 1.55; }
.page-servicio-detalle .sd-check-list li::before { content: ""; position: absolute; left: 0; top: .63em; width: 12px; height: 3px; background: var(--sd-blue); }
.page-servicio-detalle .sd-schematic { padding: 28px; color: var(--sd-blue); background: linear-gradient(145deg, #eaf1f5, #fff); border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow); }
.page-servicio-detalle .sd-schematic svg { display: block; width: 100%; height: auto; }
.page-servicio-detalle .sd-media-caption { margin: 12px 0 0 !important; font-size: .78rem; color: var(--sd-muted) !important; }
.page-servicio-detalle .sd-photo-frame { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.page-servicio-detalle .sd-photo-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.page-servicio-detalle .sd-photo-frame img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; filter: saturate(.78) contrast(1.04); }
.page-servicio-detalle .sd-system-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0; }
.page-servicio-detalle .sd-system-list span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.22); font-size: .8rem; color: rgba(255,255,255,.9); }

/* Documentation */
.page-servicio-detalle .sd-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.page-servicio-detalle .sd-info-card { padding: 30px; border: 1px solid var(--sd-line); background: #fff; }
.page-servicio-detalle .sd-info-card h3 { margin: 0 0 18px; font-size: 1.15rem; }
.page-servicio-detalle .sd-info-card ul { margin: 0; padding-left: 20px; color: var(--sd-muted); }
.page-servicio-detalle .sd-info-card li + li { margin-top: 9px; }

/* Deliverables */
.page-servicio-detalle .sd-deliverables { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(44px, 8vw, 100px); }
.page-servicio-detalle .sd-deliverables__intro p { line-height: 1.75; }
.page-servicio-detalle .sd-deliverables__list { display: grid; }
.page-servicio-detalle .sd-deliverables__list > div { display: grid; grid-template-columns: 50px minmax(160px, .7fr) 1.3fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-deliverables__list > div:first-child { border-top: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-deliverables__list span { color: var(--sd-blue); font-weight: 700; font-size: .78rem; letter-spacing: .1em; }
.page-servicio-detalle .sd-deliverables__list strong { font-size: .98rem; }
.page-servicio-detalle .sd-deliverables__list p { margin: 0; font-size: .9rem; line-height: 1.6; }
.page-servicio-detalle .sd-note { grid-column: 1 / -1; margin: 8px 0 0; padding: 18px 20px; border-left: 4px solid var(--sd-blue); background: #fff; }

/* Process */
.page-servicio-detalle .sd-process { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sd-line); border-left: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-process li { min-height: 225px; padding: 28px; border-right: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); background: #fff; }
.page-servicio-detalle .sd-process li > span { display: block; margin-bottom: 42px; color: var(--sd-blue); font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.page-servicio-detalle .sd-process h3 { margin: 0 0 10px; font-size: 1.03rem; }
.page-servicio-detalle .sd-process p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* Issues */
.page-servicio-detalle .sd-issues { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 110px); }
.page-servicio-detalle .sd-issues__intro p { line-height: 1.75; }
.page-servicio-detalle .sd-issues__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.page-servicio-detalle .sd-issues__grid article { min-height: 220px; padding: 28px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.page-servicio-detalle .sd-issues__grid h3 { margin: 0 0 12px; font-size: 1.03rem; color: #fff; }
.page-servicio-detalle .sd-issues__grid p { margin: 0; font-size: .9rem; line-height: 1.65; }

/* Scope */
.page-servicio-detalle .sd-scope { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(48px, 8vw, 105px); align-items: start; }
.page-servicio-detalle .sd-scope__included p { line-height: 1.75; }
.page-servicio-detalle .sd-scope__excluded { padding: 32px; background: var(--sd-soft); border-left: 5px solid var(--sd-blue); }
.page-servicio-detalle .sd-scope__excluded h3 { margin: 0 0 20px; font-size: 1.05rem; }
.page-servicio-detalle .sd-scope__excluded ul { margin: 0; padding-left: 20px; color: var(--sd-muted); }
.page-servicio-detalle .sd-scope__excluded li + li { margin-top: 10px; }

/* Related services */
.page-servicio-detalle .sd-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.page-servicio-detalle .sd-related-grid a { display: flex; min-height: 245px; flex-direction: column; padding: 26px; color: var(--sd-ink) !important; background: #fff; border: 1px solid var(--sd-line); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.page-servicio-detalle .sd-related-grid a:hover { transform: translateY(-4px); border-color: #b7c9d2; box-shadow: 0 16px 34px rgba(16,33,43,.09); }
.page-servicio-detalle .sd-related-grid strong { font-size: 1rem; line-height: 1.4; }
.page-servicio-detalle .sd-related-grid span { margin-top: 14px; color: var(--sd-muted); font-size: .9rem; line-height: 1.6; }
.page-servicio-detalle .sd-related-grid em { margin-top: auto; padding-top: 26px; color: var(--sd-blue); font-size: .8rem; font-style: normal; font-weight: 700; }

/* FAQ */
.page-servicio-detalle .sd-faq { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: clamp(46px, 8vw, 110px); align-items: start; }
.page-servicio-detalle .sd-faq__intro { position: sticky; top: 110px; }
.page-servicio-detalle .sd-faq__intro p { line-height: 1.75; }
.page-servicio-detalle .sd-faq__item { border-top: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-faq__item:last-child { border-bottom: 1px solid var(--sd-line); }
.page-servicio-detalle .sd-faq__item summary { position: relative; padding: 24px 48px 24px 0; cursor: pointer; list-style: none; font-weight: 600; line-height: 1.5; }
.page-servicio-detalle .sd-faq__item summary::-webkit-details-marker { display: none; }
.page-servicio-detalle .sd-faq__item summary::before,
.page-servicio-detalle .sd-faq__item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 18px; height: 2px; background: var(--sd-blue); transition: transform .2s ease; }
.page-servicio-detalle .sd-faq__item summary::after { transform: rotate(90deg); }
.page-servicio-detalle .sd-faq__item[open] summary::after { transform: rotate(0); }
.page-servicio-detalle .sd-faq__item summary:focus-visible { outline: 3px solid #ffd65a; outline-offset: 4px; }
.page-servicio-detalle .sd-faq__answer { padding: 0 52px 24px 0; }
.page-servicio-detalle .sd-faq__answer p { margin: 0; line-height: 1.75; }

/* Final CTA */
.page-servicio-detalle .sd-final { padding: clamp(70px, 8vw, 112px) 0; background: #dfeaf0; }
.page-servicio-detalle .sd-final__box { max-width: 950px; text-align: center; }
.page-servicio-detalle .sd-final__box p:not(.sd-eyebrow) { max-width: 720px; margin: 22px auto 30px; color: var(--sd-muted); font-size: 1.04rem; line-height: 1.75; }

@media (max-width: 1060px) {
  .page-servicio-detalle .sd-card-grid--four,
  .page-servicio-detalle .sd-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-servicio-detalle .sd-split,
  .page-servicio-detalle .sd-split--reverse { grid-template-columns: 1fr 1fr; gap: 42px; }
  .page-servicio-detalle .sd-deliverables,
  .page-servicio-detalle .sd-issues,
  .page-servicio-detalle .sd-faq { grid-template-columns: 1fr; }
  .page-servicio-detalle .sd-faq__intro { position: static; max-width: 760px; }
}

@media (max-width: 780px) {
  .page-servicio-detalle .sd-wrap { width: min(100% - 30px, 1180px); }
  .page-servicio-detalle .sd-hero { min-height: 760px; }
  .page-servicio-detalle .sd-hero__overlay { background: linear-gradient(0deg, rgba(4,16,23,.96) 0%, rgba(4,16,23,.7) 70%, rgba(4,16,23,.48) 100%); }
  .page-servicio-detalle .sd-hero__inner { padding-top: 145px; }
  .page-servicio-detalle .sd-hero h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
  .page-servicio-detalle .sd-answer__grid,
  .page-servicio-detalle .sd-section__head--split,
  .page-servicio-detalle .sd-split,
  .page-servicio-detalle .sd-split--reverse,
  .page-servicio-detalle .sd-scope { grid-template-columns: 1fr; }
  .page-servicio-detalle .sd-answer__copy { padding-left: 20px; }
  .page-servicio-detalle .sd-split__media { order: 2; }
  .page-servicio-detalle .sd-split--reverse .sd-split__media { order: 2; }
  .page-servicio-detalle .sd-photo-frame,
  .page-servicio-detalle .sd-photo-frame img { min-height: 380px; }
  .page-servicio-detalle .sd-info-grid,
  .page-servicio-detalle .sd-process,
  .page-servicio-detalle .sd-issues__grid { grid-template-columns: 1fr; }
  .page-servicio-detalle .sd-deliverables__list > div { grid-template-columns: 42px 1fr; }
  .page-servicio-detalle .sd-deliverables__list p { grid-column: 2; }
}

@media (max-width: 540px) {
  .page-servicio-detalle .sd-actions { flex-direction: column; }
  .page-servicio-detalle .sd-btn { width: 100%; }
  .page-servicio-detalle .sd-card-grid--four,
  .page-servicio-detalle .sd-related-grid { grid-template-columns: 1fr; }
  .page-servicio-detalle .sd-card { min-height: 0; }
  .page-servicio-detalle .sd-card__num { margin-bottom: 32px; }
  .page-servicio-detalle .sd-section { padding: 66px 0; }
  .page-servicio-detalle .sd-schematic { padding: 15px; }
  .page-servicio-detalle .sd-photo-frame,
  .page-servicio-detalle .sd-photo-frame img { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-servicio-detalle .sd-btn,
  .page-servicio-detalle .sd-related-grid a,
  .page-servicio-detalle .sd-faq__item summary::after { transition: none; }
}

/* =========================================================
   SERVICIOS NIVEL 2 · v2
   Ajustes comunes de hero, medias verticales y relacionados.
   + corrección específica de documentación en cálculo estructural.
   ========================================================= */

/* 1 · Hero a pantalla completa, siguiendo el patrón del sitio */
.page-servicio-detalle .sd-hero {
  min-height: 100svh;
}

/* 2–3 · Medias principales en formato editorial vertical */
.page-servicio-detalle .sd-split__media {
  width: min(100%, 460px);
  justify-self: end;
}

.page-servicio-detalle .sd-split--reverse .sd-split__media {
  justify-self: start;
}

.page-servicio-detalle .sd-photo-frame {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.page-servicio-detalle .sd-photo-frame img {
  height: 100%;
  min-height: 0;
}

/* Los esquemas SVG de cada landing se adaptan a un lienzo vertical
   en el propio HTML, manteniendo este ancho común de la plantilla. */
.page-servicio-detalle .sd-schematic {
  width: min(100%, 460px);
}

/* 4 · Corrección específica: documentación de cálculo estructural */
.page-calculo-estructural .sd-docs-intro {
  align-self: end;
}

.page-calculo-estructural .sd-quote {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--sd-blue);
}

.page-calculo-estructural .sd-quote p {
  margin: 0;
  color: var(--sd-ink);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.72;
}

.page-calculo-estructural .sd-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--sd-muted);
  font-size: .86rem;
  font-style: normal;
  font-weight: 500;
}

.page-calculo-estructural .sd-docs-intro > p {
  margin: 24px 0 0;
  color: var(--sd-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* 5 · Servicios relacionados: algo más contenidos */
.page-servicio-detalle .sd-related-grid {
  width: min(100%, 1080px);
  margin-inline: auto;
}

/* Preparación de futura imagen de fondo.
   Cuando se seleccione la imagen:
   1) sustituir --sd-related-bg-image: none por url("../img/ARCHIVO.webp")
   2) cambiar --sd-related-overlay-opacity: 0 por 1
   La capa prevista es gris clara y semitransparente para mantener
   la legibilidad del encabezado y de las tarjetas blancas. */
.page-servicio-detalle .sd-section[aria-labelledby="sd-related-title"] {
  --sd-related-bg-image: none;
  --sd-related-overlay-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sd-soft);
  background-image: var(--sd-related-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-servicio-detalle .sd-section[aria-labelledby="sd-related-title"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(224, 228, 231, .78);
  opacity: var(--sd-related-overlay-opacity);
  pointer-events: none;
}

.page-servicio-detalle .sd-section[aria-labelledby="sd-related-title"] > .sd-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 780px) {
  .page-servicio-detalle .sd-hero {
    min-height: max(760px, 100svh);
  }

  .page-servicio-detalle .sd-split__media,
  .page-servicio-detalle .sd-split--reverse .sd-split__media,
  .page-servicio-detalle .sd-schematic {
    width: min(100%, 460px);
    justify-self: center;
  }

  .page-servicio-detalle .sd-photo-frame,
  .page-servicio-detalle .sd-photo-frame img {
    min-height: 0;
  }
}


/* =========================================================
   SERVICIOS NIVEL 2 · CORRECCIÓN CANÓNICA
   Medias principales a altura completa SIN alterar texto/sección.
   + velo de relacionados aprobado
   + CTA compacto aprobado
   ========================================================= */

@media (min-width: 1061px) {
  /* La plantilla conserva EXACTAMENTE sus columnas originales.
     Solo cambiamos el comportamiento interno de la media. */
  .page-servicio-detalle .sd-split,
  .page-servicio-detalle .sd-split--reverse {
    align-items: stretch;
    --sd-media-bleed-y: clamp(72px, 8vw, 116px);
  }

  /* El marco permanece como un grid-item normal en SU columna,
     pero ya no aporta altura intrínseca al grid.
     La fila la determina exclusivamente la columna de texto. */
  .page-servicio-detalle .sd-split > .sd-photo-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    align-self: stretch;
    justify-self: stretch;
    overflow: visible;
    border: 0;
  }

  /* La imagen se saca únicamente del flujo INTERNO del marco.
     El marco sigue ocupando su columna; por eso el grid no se desorganiza.
     Se extiende exactamente hasta los límites verticales de la sección
     y conserva 4:5 sin deformación. */
  .page-servicio-detalle .sd-split > .sd-photo-frame img {
    position: absolute;
    top: calc(0px - var(--sd-media-bleed-y));
    bottom: calc(0px - var(--sd-media-bleed-y));
    width: auto;
    height: calc(100% + var(--sd-media-bleed-y) + var(--sd-media-bleed-y));
    max-width: none;
    min-height: 0;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.15);
  }

  /* Texto a la izquierda / imagen a la derecha:
     la imagen empieza en su columna y crece SOLO hacia fuera (derecha). */
  .page-servicio-detalle .sd-split:not(.sd-split--reverse) > .sd-photo-frame img {
    left: 0;
    right: auto;
  }

  /* Imagen a la izquierda / texto a la derecha:
     la imagen termina en su columna y crece SOLO hacia fuera (izquierda). */
  .page-servicio-detalle .sd-split--reverse > .sd-photo-frame img {
    right: 0;
    left: auto;
  }

  /* El pseudo-marco antiguo coincide con el grid-item, no con la imagen
     full-height. Se desactiva solo en escritorio para evitar un borde falso.
     En tablet/móvil queda exactamente como en el canónico. */
  .page-servicio-detalle .sd-split > .sd-photo-frame::after {
    display: none;
  }
}

/* Servicios relacionados: imagen menos protagonista. */
.page-servicio-detalle .sd-section[aria-labelledby="sd-related-title"]::before {
  background: rgba(255, 255, 255, .86);
}

/* CTA final: altura compacta ya aprobada. */
.page-servicio-detalle .sd-final {
  padding: clamp(48px, 5vw, 72px) 0;
}

/* =========================================================
   SERVICIOS NIVEL 2 · v6
   Balance visual de la imagen en la sección oscura de coordinación.
   Común a todas las landings que usan esta plantilla.
   ========================================================= */

@media (min-width: 1061px) {
  /* Imagen 3 / coordinación:
     mantiene toda la altura visual de la sección, pero pierde protagonismo
     al limitar su ancho visible. La columna de texto no se toca. */
  .page-servicio-detalle
  .sd-section--dark
  .sd-split--reverse
  > .sd-photo-frame
  img {
    width: clamp(520px, 41vw, 740px);
    max-width: none;
    border: 0;
    filter: saturate(.70) contrast(.98) brightness(.82);
  }

  /* Velo con el MISMO tono del fondo oscuro de la sección:
     desaparece a la izquierda y termina en #111d24 a la derecha,
     fundiendo la fotografía con el bloque de texto. */
  .page-servicio-detalle
  .sd-section--dark
  .sd-split--reverse
  > .sd-photo-frame::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(0px - var(--sd-media-bleed-y));
    bottom: calc(0px - var(--sd-media-bleed-y));
    right: 0;
    left: auto;
    width: clamp(520px, 41vw, 740px);
    height: auto;
    z-index: 1;
    border: 0;
    box-shadow: none;
    background: linear-gradient(
      90deg,
      rgba(17, 29, 36, 0) 0%,
      rgba(17, 29, 36, .08) 42%,
      rgba(17, 29, 36, .40) 76%,
      #111d24 100%
    );
    pointer-events: none;
  }
}

/* =========================================================
   SERVICIOS NIVEL 2 · v7
   Ajustes comunes:
   1) imágenes derechas ligeramente más próximas al contenido;
   2) formato común de citas en Información de partida.
   ========================================================= */

/* 1 · Imagen de las secciones normales: corrección horizontal común.
   No cambia columnas, gap, altura ni anchura del texto.
   Solo desplaza la imagen hacia la izquierda dentro del espacio disponible. */
@media (min-width: 1061px) {
  .page-servicio-detalle
  .sd-split:not(.sd-split--reverse)
  > .sd-photo-frame
  img {
    left: clamp(-44px, -2.2vw, -24px);
    right: auto;
  }
}

/* 2 · Cita editorial común para las landings de Servicios Nivel 2.
   Replica el formato ya validado en Cálculo estructural para arquitectos. */
.page-servicio-detalle .sd-docs-intro {
  align-self: end;
}

.page-servicio-detalle .sd-quote {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--sd-blue);
}

.page-servicio-detalle .sd-quote p {
  margin: 0;
  color: var(--sd-ink);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.72;
}

.page-servicio-detalle .sd-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--sd-muted);
  font-size: .86rem;
  font-style: normal;
  font-weight: 500;
}

.page-servicio-detalle .sd-docs-intro > p {
  margin: 24px 0 0;
  color: var(--sd-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* =========================================================
   SERVICIOS NIVEL 2 · v8
   Información de partida: alineación superior común.
   ========================================================= */

@media (min-width: 781px) {
  /* El encabezado y el bloque derecho comienzan en la misma cota vertical.
     No altera columnas, gap, anchuras ni el comportamiento en móvil. */
  .page-servicio-detalle
  .sd-section[aria-labelledby="sd-docs-title"]
  .sd-section__head--split {
    align-items: start;
  }

  /* v7 alineaba el bloque editorial al pie de su celda.
     Se neutraliza únicamente dentro de Información de partida. */
  .page-servicio-detalle
  .sd-section[aria-labelledby="sd-docs-title"]
  .sd-docs-intro {
    align-self: start;
  }
}