/* Diseño web · secciones editoriales y de decisión de servicio. */
.web-design-page .design-service-hero {
  background:
    radial-gradient(ellipse at 80% 18%, rgb(76 137 216 / 24%), transparent 38%),
    linear-gradient(145deg, #091321 0%, #0d1d32 62%, #0a1422 100%);
}
.web-design-page .design-service-hero .service-hero-inner { padding-bottom: 42px; }
.web-design-page .design-service-hero .service-hero-grid { align-items: center; }
.web-design-page .design-service-hero .service-hero-copy h1 { max-width: 720px; }
.web-design-page .design-service-hero .service-hero-lede { max-width: 600px; }
.design-hero-location { margin: 23px 0 0; display: flex; align-items: center; gap: 9px; color: #58708d; font-size: 12px; font-weight: 650; }
.design-hero-location span { width: 7px; height: 7px; border-radius: 50%; background: #4fc4b1; box-shadow: 0 0 0 5px rgb(79 196 177 / 12%); }
.web-design-page .design-proof-row { margin-top: 42px; }

.design-trust-section { padding: 36px 0 42px; color: #172a42; background: #fff; }
.design-trust-inner { text-align: center; }
.design-trust-inner .service-section-kicker { margin-bottom: 8px; }
.design-trust-inner h2 { margin: 0 0 24px; color: #172a42; font: 750 clamp(20px, 2.4vw, 29px)/1.2 Manrope, sans-serif; letter-spacing: -.045em; }
.design-trust-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.design-trust-logos > div { min-height: 78px; padding: 15px 20px; display: grid; place-items: center; border: 1px solid #e3eaf3; border-radius: 13px; background: #fbfdff; }
.design-trust-logos img { display: block; max-width: 100%; max-height: 43px; object-fit: contain; filter: saturate(.9); }
.design-text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #3975c2; font-size: 12px; font-weight: 750; text-decoration: none; }
.design-text-link span { transition: transform 180ms ease; }
.design-text-link:hover span { transform: translate(3px, -2px); }
.design-text-link:focus-visible,
.design-work-card:focus-visible,
.design-related-card:focus-visible,
.design-guidance-card a:focus-visible { outline: 3px solid #63cdbd; outline-offset: 4px; }

.web-design-page .design-definition-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(300px, .97fr); gap: clamp(38px, 8vw, 110px); align-items: center; }
.design-definition-copy { max-width: 660px; }
.design-definition-copy h2 { margin: 13px 0 20px; color: #eef4fc; font: 760 clamp(32px, 4vw, 54px)/1.04 Manrope, sans-serif; letter-spacing: -.06em; }
.design-definition-copy h2 span { color: #8ab7f4; }
.design-definition-copy > p:not(.service-section-kicker) { max-width: 60ch; color: #b1c0d2; font-size: 14px; line-height: 1.8; }
.design-definition-aside { position: relative; min-height: 365px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(140 179 228 / 20%); border-radius: 24px; background: radial-gradient(circle at 50% 48%, rgb(75 138 213 / 24%), transparent 35%), linear-gradient(145deg, #132943, #0e1c2f); }
.design-aside-orbit { position: absolute; width: 280px; height: 280px; border: 1px solid rgb(129 181 245 / 30%); border-radius: 50%; transform: rotate(-28deg) scaleY(.46); }
.design-aside-orbit-one { box-shadow: 0 0 40px rgb(88 153 238 / 10%); }
.design-aside-orbit-two { width: 340px; height: 340px; border-color: rgb(93 202 190 / 27%); transform: rotate(45deg) scaleY(.48); }
.design-aside-center { position: relative; z-index: 1; width: 205px; min-height: 205px; padding: 28px; display: grid; align-content: center; gap: 12px; border: 1px solid rgb(172 204 242 / 35%); border-radius: 50%; text-align: center; background: linear-gradient(145deg, rgb(29 57 89 / 94%), rgb(15 34 57 / 94%)); box-shadow: 0 25px 65px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 8%); }
.design-aside-center span { color: #8dd6cd; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.design-aside-center strong { color: #f3f7fd; font: 700 17px/1.35 Manrope, sans-serif; }
.design-aside-note { position: absolute; z-index: 2; max-width: 205px; padding: 11px 14px; border: 1px solid rgb(168 196 229 / 19%); border-radius: 10px; color: #d9e5f4; background: rgb(11 25 42 / 91%); box-shadow: 0 14px 32px rgb(0 0 0 / 19%); font-size: 10px; line-height: 1.45; }
.design-aside-note span { margin-right: 7px; color: #89b8fa; font-weight: 800; }
.design-aside-note-top { top: 14%; left: 8%; }
.design-aside-note-bottom { right: 7%; bottom: 12%; }

.design-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-value-card { position: relative; min-height: 235px; padding: 25px; overflow: hidden; border: 1px solid rgb(147 179 220 / 17%); border-radius: 18px; background: linear-gradient(145deg, rgb(17 34 55 / 97%), rgb(12 25 42 / 98%)); transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.design-value-card::after { position: absolute; right: -52px; bottom: -78px; width: 170px; height: 170px; border: 1px solid rgb(128 181 244 / 18%); border-radius: 50%; content: ""; transition: transform 350ms ease; }
.design-value-card:hover { transform: translateY(-5px); border-color: rgb(125 179 246 / 42%); box-shadow: 0 20px 42px rgb(0 0 0 / 18%); }
.design-value-card:hover::after { transform: scale(1.17); }
.design-value-card > span { color: #8bbaf5; font: 700 11px Manrope, sans-serif; letter-spacing: .08em; }
.design-value-card h3 { position: relative; z-index: 1; max-width: 270px; margin: 39px 0 10px; color: #f1f5fb; font: 700 20px/1.18 Manrope, sans-serif; letter-spacing: -.035em; }
.web-design-page .design-value-card p { position: relative; z-index: 1; max-width: 40ch; margin: 0; color: #a8bbd2; font-size: 13px; line-height: 1.7; }
.web-design-page .design-includes-grid .service-card { min-height: 270px; }

.design-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-work-card { min-width: 0; min-height: 116px; padding: 16px; display: grid; grid-template-columns: 86px minmax(0, 1fr) 24px; align-items: center; gap: 16px; border: 1px solid #dce6f1; border-radius: 16px; color: #1a2e47; text-decoration: none; background: linear-gradient(145deg, #fff, #f5f8fc); transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.design-work-card:hover { transform: translateY(-4px); border-color: #a9c6e8; box-shadow: 0 16px 32px rgb(29 56 88 / 9%); }
.design-work-logo { height: 72px; padding: 9px; display: grid; place-items: center; border-radius: 10px; background: #fff; }
.design-work-logo img { display: block; max-width: 100%; max-height: 52px; object-fit: contain; }
.design-work-card small { display: block; margin-bottom: 7px; color: #72859d; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.design-work-card strong { display: block; color: #1b3049; font: 700 15px/1.3 Manrope, sans-serif; }
.design-work-arrow { align-self: start; color: #3975c2; font-size: 17px; }

.design-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-guidance-card { min-height: 252px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgb(142 176 219 / 18%); border-radius: 18px; background: linear-gradient(145deg, #12243b, #0e1b2c); transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.design-guidance-card:hover { transform: translateY(-4px); border-color: rgb(129 181 245 / 42%); box-shadow: 0 18px 40px rgb(0 0 0 / 17%); }
.design-guidance-card > span,.design-scope-card > span,.design-related-card > span { color: #8ebaf2; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.design-guidance-card h3 { margin: 27px 0 10px; color: #f0f4fa; font: 700 19px/1.2 Manrope, sans-serif; letter-spacing: -.035em; }
.web-design-page .design-guidance-card p { margin: 0 0 20px; color: #a9bbd0; font-size: 12px; line-height: 1.7; }
.design-guidance-card a { margin-top: auto; color: #a8ccff; font-size: 11px; font-weight: 750; text-decoration: none; }

.design-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-scope-card { min-height: 330px; padding: 25px; border: 1px solid #dfe7f1; border-radius: 18px; background: linear-gradient(150deg, #fff, #f5f8fc); }
.design-scope-card h3 { margin: 24px 0 9px; color: #1a2e47; font: 750 23px/1.15 Manrope, sans-serif; letter-spacing: -.045em; }
.web-design-page .design-scope-card p { min-height: 66px; margin: 0; color: #5f728a; font-size: 13px; line-height: 1.65; }
.design-scope-card ul { margin: 18px 0 0; padding: 15px 0 0; display: grid; gap: 9px; border-top: 1px solid #e0e8f1; list-style: none; }
.design-scope-card li { position: relative; padding-left: 18px; color: #415873; font-size: 11px; line-height: 1.5; }
.design-scope-card li::before { position: absolute; top: 0; left: 0; color: #3c86c8; content: "✓"; font-weight: 800; }
.design-scope-featured { border-color: #9dbfe8; background: radial-gradient(ellipse at 95% 0%, rgb(116 170 235 / 12%), transparent 42%), linear-gradient(150deg, #f8fbff, #edf4fc); box-shadow: 0 15px 36px rgb(46 89 139 / 8%); }
.design-investment-note { margin: 17px 0 0; color: #71839a; font-size: 12px; line-height: 1.7; }
.design-investment-note a { color: #326eb4; font-weight: 750; }
.design-comparison-wrap { margin-top: 54px; }
.design-comparison-wrap h3 { margin: 0 0 17px; color: #1a2e47; font: 750 clamp(21px, 2.6vw, 29px)/1.2 Manrope, sans-serif; letter-spacing: -.045em; }
.design-comparison-scroll { overflow-x: auto; border: 1px solid #dfe7f1; border-radius: 14px; background: #fff; scrollbar-color: #9bb8da #f0f4f8; }
.design-comparison-scroll:focus-visible { outline: 3px solid #3982c8; outline-offset: 3px; }
.design-comparison-table { width: 100%; min-width: 690px; border-collapse: collapse; color: #455c77; text-align: left; }
.design-comparison-table th,.design-comparison-table td { padding: 15px 17px; border-bottom: 1px solid #e7edf4; font-size: 11px; line-height: 1.5; }
.design-comparison-table thead th { color: #1f3a5a; background: #f3f7fc; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.design-comparison-table tbody th { color: #304a68; font-weight: 750; }
.design-comparison-table tr:last-child th,.design-comparison-table tr:last-child td { border-bottom: 0; }

.design-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-related-card { min-height: 250px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dce6f1; border-radius: 18px; color: inherit; text-decoration: none; background: linear-gradient(145deg, #fff, #f5f8fc); transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.design-related-card:hover { transform: translateY(-5px); border-color: #abc7e8; box-shadow: 0 18px 35px rgb(31 58 88 / 9%); }
.design-related-card h3 { margin: 34px 0 10px; color: #1c3048; font: 700 19px/1.2 Manrope, sans-serif; letter-spacing: -.035em; }
.web-design-page .design-related-card p { margin: 0 0 20px; color: #687b92; font-size: 12px; line-height: 1.7; }
.design-related-card b { margin-top: auto; color: #3672b9; font-size: 11px; }
.design-faq-more { margin: 18px 0 0; color: #a7b8cb; font-size: 12px; }
.design-faq-more a { color: #9dc5ff; font-weight: 750; }
.web-design-page .design-contact-section { background: radial-gradient(ellipse at 15% 50%, rgb(92 153 237 / 19%), transparent 40%), linear-gradient(135deg, #122a45, #0d1b2c); }

@media (max-width: 960px) {
  .design-trust-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web-design-page .design-definition-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 36px; }
  .design-work-grid,.design-guidance-grid,.design-scope-grid,.design-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-work-card:last-child,.design-guidance-card:last-child,.design-scope-card:last-child,.design-related-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .web-design-page .design-service-hero .service-hero-inner { padding-bottom: 28px; }
  .web-design-page .design-proof-row { margin-top: 28px; }
  .design-trust-section { padding: 28px 0 32px; }
  .design-trust-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .design-trust-logos > div { min-height: 68px; padding: 12px; }
  .design-trust-logos img { max-height: 38px; }
  .web-design-page .design-definition-grid { grid-template-columns: 1fr; gap: 26px; }
  .design-definition-copy h2 { font-size: clamp(31px, 9vw, 43px); }
  .design-definition-aside { min-height: 300px; }
  .design-aside-center { width: 175px; min-height: 175px; }
  .design-aside-orbit { width: 235px; height: 235px; }
  .design-aside-orbit-two { width: 280px; height: 280px; }
  .design-aside-note { max-width: 165px; padding: 9px 10px; font-size: 9px; }
  .design-aside-note-top { left: 4%; }
  .design-aside-note-bottom { right: 3%; }
  .design-value-grid,.design-work-grid,.design-guidance-grid,.design-scope-grid,.design-related-grid { grid-template-columns: 1fr; gap: 11px; }
  .design-value-card { min-height: 195px; padding: 21px; }
  .design-value-card h3 { margin-top: 27px; }
  .design-work-card:last-child,.design-guidance-card:last-child,.design-scope-card:last-child,.design-related-card:last-child { grid-column: auto; }
  .design-work-card { min-height: 100px; grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 12px; padding: 12px; }
  .design-work-logo { height: 64px; }
  .design-guidance-card { min-height: 215px; padding: 21px; }
  .design-guidance-card h3 { margin-top: 22px; }
  .design-scope-card { min-height: 0; padding: 22px; }
  .web-design-page .design-scope-card p { min-height: 0; }
  .design-comparison-wrap { margin-top: 38px; }
  .design-comparison-table th,.design-comparison-table td { padding: 12px; }
  .design-related-card { min-height: 215px; padding: 21px; }
  .design-related-card h3 { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .design-text-link span,.design-value-card,.design-value-card::after,.design-work-card,.design-guidance-card,.design-related-card { transition: none; }
}