/* Nueva dirección visual para Diseño Web: oscuro editorial, fotografía amplia y ritmo de agencia. */
.web-design-page {
  --design-ink: #f3f5f7;
  --design-muted: #a9b3be;
  --design-blue: #80aaff;
  --design-teal: #5ed0bf;
  color: var(--design-ink);
  background: #090c0f;
}
.web-design-page main { background: #090c0f; }
.web-design-page .service-container,
.web-design-page .service-hero-inner { width: min(1280px, calc(100% - clamp(36px, 8vw, 132px))); }

/* Apertura con tipografía amplia, tonos de Deltanet y fotografía como punto focal. */
.web-design-page .design-service-hero {
  min-height: min(850px, calc(100svh - 105px));
  padding: clamp(32px, 4vw, 56px) 0 48px;
  color: #f3f5f7;
  background: radial-gradient(ellipse at 78% 35%, rgb(48 106 169 / 22%), transparent 38%), linear-gradient(135deg, #090c0f 0%, #0b1118 55%, #101923 100%);
}
.web-design-page .design-service-hero::after { right: -165px; bottom: -330px; border-color: rgb(127 171 221 / 12%); }
.web-design-page .service-crumbs { color: #9ca9b8; }
.web-design-page .service-crumbs a:hover { color: #9dbdff; }
.web-design-page .design-service-hero .service-hero-grid { grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); gap: clamp(38px, 6vw, 88px); }
.web-design-page .design-service-hero .service-hero-copy h1 { max-width: 720px; color: #f3f5f7; font-size: clamp(48px, 6.3vw, 84px); letter-spacing: -.078em; line-height: .96; }
.web-design-page .design-service-hero .service-hero-copy h1 span { color: #9bbcff; }
.web-design-page .design-service-hero .service-eyebrow { color: #91aff3; }
.web-design-page .design-service-hero .service-hero-lede { color: #c0cad5; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.75; }
.web-design-page .design-service-hero .service-button { color: #06111b; background: #a8c2ff; box-shadow: 0 12px 30px rgb(75 119 221 / 24%); }
.web-design-page .design-service-hero .service-button:hover { background: #c0d2ff; }
.web-design-page .design-service-hero .service-button-secondary { color: #edf2f7; border-color: rgb(204 220 239 / 34%); background: rgb(255 255 255 / 5%); }
.web-design-page .design-service-hero .service-button-secondary:hover { background: rgb(255 255 255 / 11%); }
.web-design-page .design-hero-location { color: #aab7c5; }
.web-design-page .design-service-hero .service-hero-visual { min-height: clamp(410px, 45vw, 570px); border: 1px solid rgb(224 237 251 / 14%); border-radius: 20px; background: #172432; box-shadow: 0 30px 95px rgb(0 0 0 / 38%); }
.web-design-page .design-service-hero .service-hero-visual > img { opacity: .91; filter: saturate(.82) contrast(1.04); animation: design-hero-drift 20s ease-in-out infinite alternate; }
.web-design-page .design-service-hero .service-hero-visual::after { background: linear-gradient(180deg, rgb(5 10 16 / 0%) 40%, rgb(5 10 16 / 62%) 100%); }
.web-design-page .design-service-hero .service-visual-badge { border-color: rgb(255 255 255 / 26%); color: #f4f7fb; background: rgb(8 16 25 / 62%); backdrop-filter: blur(12px); }
.web-design-page .design-service-hero .web-design-mockup { right: 7%; bottom: 17%; width: min(56%, 330px); transform: rotate(-4deg); box-shadow: 0 25px 58px rgb(0 0 0 / 45%); }
.web-design-page .design-service-hero .service-visual-note { right: 17px; bottom: 17px; max-width: 235px; border-color: rgb(255 255 255 / 17%); color: #acbac9; background: rgb(6 14 22 / 78%); backdrop-filter: blur(12px); }
.web-design-page .design-service-hero .service-visual-note strong { color: #f4f7fb; }
.web-design-page .design-proof-row { border-color: rgb(190 209 231 / 17%); }
.web-design-page .design-proof-row > div { color: #a7b4c1; }
.web-design-page .design-proof-row strong { color: #f0f4f8; }

/* Banda de referencias y secciones con cambios suaves de tono. */
.web-design-page .design-trust-section { padding: 28px 0 35px; border-block: 1px solid rgb(190 209 231 / 10%); color: #f3f5f7; background: #0c1014; }
.web-design-page .design-trust-inner h2 { color: #e6ebf0; font-size: clamp(19px, 2.2vw, 27px); }
.web-design-page .design-trust-logos { gap: 12px; }
.web-design-page .design-trust-logos > div { min-height: 70px; border-color: rgb(195 215 238 / 12%); border-radius: 10px; background: #111820; }
.web-design-page .design-trust-logos img { max-height: 38px; filter: grayscale(.18) brightness(1.08); }
.web-design-page .service-content-section { padding: clamp(75px, 8.5vw, 116px) 0; }
.web-design-page .service-content-section.is-white { background: #090c0f; }
.web-design-page .service-content-section.is-blue { background: #0e141a; }
.web-design-page .service-section-kicker { color: #9bbaff; }
.web-design-page .service-section-heading h2 { color: #f1f4f7; font-size: clamp(34px, 4.5vw, 58px); letter-spacing: -.068em; }
.web-design-page .service-section-heading > p { color: #aab5c0; font-size: 15px; line-height: 1.78; }
.web-design-page .design-definition-copy h2 { color: #f1f4f7; }
.web-design-page .design-definition-copy h2 span { color: #9bbaff; }
.web-design-page .design-definition-copy > p:not(.service-section-kicker) { color: #aab5c0; font-size: 15px; line-height: 1.85; }
.web-design-page .design-text-link { color: #a9c3ff; }
.web-design-page .design-definition-aside { min-height: 430px; border: 1px solid rgb(216 232 250 / 14%); border-radius: 17px; background: #151f2a; box-shadow: 0 25px 64px rgb(0 0 0 / 28%); }
.web-design-page .design-editorial-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.web-design-page .design-definition-aside::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgb(5 12 20 / 0%) 40%, rgb(5 12 20 / 74%) 100%); }
.web-design-page .design-image-caption { position: absolute; z-index: 1; right: 24px; bottom: 24px; left: 24px; display: grid; gap: 8px; color: #fff; }
.web-design-page .design-image-caption span { color: #89d8c9; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.web-design-page .design-image-caption strong { max-width: 360px; font: 700 clamp(20px, 2.5vw, 30px)/1.14 Manrope, sans-serif; letter-spacing: -.045em; }
.web-design-page .design-aside-note { border-color: rgb(255 255 255 / 26%); color: #e6edf5; background: rgb(7 16 25 / 75%); backdrop-filter: blur(12px); }

/* Las capacidades se presentan como una colección visual, no una cuadrícula plana. */
.web-design-page .design-value-card { min-height: 250px; border-color: rgb(204 220 239 / 13%); border-radius: 13px; background: linear-gradient(145deg, #121a22, #0d1319); box-shadow: 0 14px 35px rgb(0 0 0 / 13%); }
.web-design-page .design-value-card > span { color: #9dbbff; }
.web-design-page .design-value-card h3 { color: #f0f4f8; }
.web-design-page .design-value-card p { color: #aab6c2; }
.web-design-page .design-value-card::after { border-color: rgb(146 183 255 / 16%); }
.web-design-page .design-value-card:hover { border-color: rgb(153 186 255 / 38%); box-shadow: 0 23px 50px rgb(0 0 0 / 28%); }
.web-design-page .design-includes-grid { gap: 15px; }
.web-design-page .design-includes-grid .service-card { min-height: 0; padding: 0 0 23px; border-color: rgb(206 224 243 / 13%); border-radius: 13px; color: #f1f4f7; background: #11171e; box-shadow: 0 15px 37px rgb(0 0 0 / 17%); }
.web-design-page .design-includes-grid .service-card:hover { border-color: rgb(148 184 246 / 45%); box-shadow: 0 25px 55px rgb(0 0 0 / 32%); }
.web-design-page .design-service-photo { display: block; height: 158px; margin: 0 0 20px; border-radius: 12px 12px 0 0; background-color: #17222e; background-position: center; background-size: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 500ms ease; }
.web-design-page .design-includes-grid .service-card:hover .design-service-photo { filter: saturate(1.15) brightness(1.08); }
.web-design-page .design-includes-grid .service-card-number { margin: 0 23px 11px; color: #8ea1b6; font-size: 9px; }
.web-design-page .design-includes-grid .service-card .service-card-icon { top: 171px; right: 19px; color: #a9c2ff; border-color: rgb(157 190 240 / 20%); background: #172330; }
.web-design-page .design-includes-grid .service-card h3 { margin: 0 23px 9px; color: #f2f5f8; font-size: 19px; }
.web-design-page .design-includes-grid .service-card p { margin: 0 23px; color: #a8b4c0; font-size: 13px; line-height: 1.72; }

/* Bloque cinematográfico con vídeo en loop de la biblioteca local. */
.web-design-page .design-film-section { padding: clamp(78px, 9vw, 120px) 0; color: #edf3f8; background: #0d141b; }
.web-design-page .design-film-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(38px, 7vw, 92px); align-items: center; }
.web-design-page .design-film-copy h2 { max-width: 510px; margin: 0 0 22px; color: #f1f4f7; font: 750 clamp(35px, 4.8vw, 61px)/1.02 Manrope, sans-serif; letter-spacing: -.07em; }
.web-design-page .design-film-copy > p:not(.service-section-kicker) { max-width: 48ch; color: #aab7c4; font-size: 15px; line-height: 1.82; }
.web-design-page .design-film-frame { position: relative; min-height: 390px; margin: 0; overflow: hidden; border: 1px solid rgb(221 235 250 / 13%); border-radius: 15px; background: #080d12; box-shadow: 0 28px 70px rgb(0 0 0 / 34%); }
.web-design-page .design-film-frame::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(180deg, transparent, rgb(4 10 16 / 78%)); pointer-events: none; }
.web-design-page .design-film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.web-design-page .design-film-frame figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; align-items: end; gap: 14px; color: #fff; }
.web-design-page .design-film-frame figcaption span { color: #8edbcb; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.web-design-page .design-film-frame figcaption strong { font: 700 20px Manrope, sans-serif; }

/* Tecnologías y etapas mantienen el foco en las herramientas reales de Deltanet. */
.web-design-page .design-tech-section .design-tech-filter { color: #d6e0eb; border-color: rgb(201 219 239 / 16%); background: #141c24; }
.web-design-page .design-tech-section .design-tech-filter:hover { border-color: #9dbaff; color: #fff; }
.web-design-page .design-tech-section .design-tech-filter.is-active { color: #091018; border-color: #a8c1ff; background: #a8c1ff; }
.web-design-page .design-tech-section .design-tech-count { color: #9daab8; }
.web-design-page .development-stack-card { border-color: rgb(205 222 241 / 14%); background: #121921; box-shadow: 0 15px 36px rgb(0 0 0 / 17%); }
.web-design-page .development-stack-card h3 { color: #edf2f7; }
.web-design-page .development-stack-card p { color: #a7b4c2; }
.web-design-page .development-stack-logo { border-color: #e1e7ed; background: #fff; }
.web-design-page .service-process { gap: 13px; border: 0; }
.web-design-page .service-process-step,
.web-design-page .service-process-step:not(:first-child) { min-height: 245px; padding: 24px 22px; border: 1px solid rgb(203 221 242 / 14%); border-radius: 13px; background: linear-gradient(145deg, #141c24, #10161d); box-shadow: 0 14px 36px rgb(0 0 0 / 18%); }
.web-design-page .service-process-step span { color: #91b2fa; }
.web-design-page .service-process-step h3 { color: #f1f4f7; }
.web-design-page .service-process-step p { color: #a8b4c0; }
.web-design-page .service-process-step:hover,
.web-design-page .service-process-step:focus-within { transform: translateY(-6px); border-color: rgb(155 186 255 / 45%); background: #17212b; box-shadow: 0 25px 48px rgb(0 0 0 / 30%); }

/* Proyectos con imágenes grandes, logotipos y transición de portada al pasar el cursor. */
.web-design-page .design-work-section { background: #090c0f; }
.web-design-page .design-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.web-design-page .design-work-card { min-width: 0; min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; gap: 0; border: 1px solid rgb(205 221 239 / 14%); border-radius: 14px; color: #f0f4f8; background: #111820; text-decoration: none; box-shadow: 0 16px 40px rgb(0 0 0 / 20%); transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.web-design-page .design-work-card:hover { transform: translateY(-7px); border-color: rgb(154 188 255 / 42%); box-shadow: 0 28px 58px rgb(0 0 0 / 34%); }
.web-design-page .design-project-image { display: block; position: relative; height: clamp(210px, 24vw, 310px); overflow: hidden; background: #162330; }
.web-design-page .design-project-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgb(8 15 22 / 0%) 38%, rgb(8 15 22 / 48%) 100%); }
.web-design-page .design-project-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 750ms cubic-bezier(.2,.75,.2,1), filter 500ms ease; }
.web-design-page .design-work-card:hover .design-project-image img { transform: scale(1.055); filter: saturate(1.08); }
.web-design-page .design-project-meta { min-height: 112px; width: 100%; padding: 17px 17px 18px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 22px; align-items: center; gap: 13px; }
.web-design-page .design-work-logo { width: 58px; height: 54px; padding: 7px; display: grid; place-items: center; border: 1px solid rgb(207 222 238 / 12%); border-radius: 8px; background: #f8fafc; }
.web-design-page .design-work-logo img { display: block; max-width: 100%; max-height: 40px; object-fit: contain; }
.web-design-page .design-project-meta small { display: block; margin-bottom: 6px; color: #93a3b5; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.web-design-page .design-project-meta strong { color: #f0f4f8; font: 700 17px/1.2 Manrope, sans-serif; }
.web-design-page .design-work-arrow { align-self: center; color: #9ebaff; font-size: 18px; transition: transform 220ms ease; }
.web-design-page .design-work-card:hover .design-work-arrow { transform: translate(3px, -3px); }

/* Ideas/insights, alcance, conexiones y preguntas frecuentes cierran la historia. */
.web-design-page .design-guidance-card,
.web-design-page .design-related-card { border-color: rgb(203 221 239 / 14%); color: #eef3f7; background: linear-gradient(145deg, #141c24, #10161d); box-shadow: 0 14px 35px rgb(0 0 0 / 16%); }
.web-design-page .design-guidance-card:hover,
.web-design-page .design-related-card:hover { border-color: rgb(155 186 255 / 42%); box-shadow: 0 24px 48px rgb(0 0 0 / 28%); }
.web-design-page .design-guidance-card h3,
.web-design-page .design-related-card h3 { color: #f1f4f7; }
.web-design-page .design-guidance-card p,
.web-design-page .design-related-card p { color: #a8b5c2; }
.web-design-page .design-guidance-card a,
.web-design-page .design-related-card b { color: #a9c2ff; }
.web-design-page .design-scope-card { border-color: rgb(203 221 239 / 14%); background: #121921; box-shadow: 0 14px 35px rgb(0 0 0 / 16%); }
.web-design-page .design-scope-card h3 { color: #eef3f7; }
.web-design-page .design-scope-card p,
.web-design-page .design-scope-card li { color: #aab6c2; }
.web-design-page .design-scope-card ul { border-color: rgb(204 221 239 / 14%); }
.web-design-page .design-scope-featured { border-color: rgb(154 186 255 / 42%); background: radial-gradient(ellipse at 92% 0%, rgb(119 160 236 / 13%), transparent 45%), #151f2a; }
.web-design-page .design-comparison-wrap h3 { color: #eff3f7; }
.web-design-page .design-comparison-scroll { border-color: rgb(205 222 241 / 14%); background: #121921; }
.web-design-page .design-comparison-table { color: #c0cbd7; }
.web-design-page .design-comparison-table th,
.web-design-page .design-comparison-table td { border-color: rgb(205 222 241 / 12%); }
.web-design-page .design-comparison-table thead th { color: #e9eff5; background: #18222c; }
.web-design-page .design-comparison-table tbody th { color: #dce5ee; }
.web-design-page .design-feature-band { border-color: rgb(205 222 241 / 14%); background: linear-gradient(135deg, #141d27, #10171f); }
.web-design-page .design-feature-band h2 { color: #f1f4f7; }
.web-design-page .design-feature-band p { color: #a9b6c3; }
.web-design-page .design-feature-list li { color: #d0dae4; }
.web-design-page .service-faq details { border-color: rgb(205 222 241 / 14%); background: #121921; }
.web-design-page .service-faq summary { color: #edf2f6; }
.web-design-page .service-faq details p { color: #a8b5c2; }
.web-design-page .design-faq-more { color: #a9b5c1; }
.web-design-page .design-faq-more a { color: #a8c2ff; }
.web-design-page .design-contact-section { background: radial-gradient(ellipse at 14% 50%, rgb(68 116 190 / 20%), transparent 42%), linear-gradient(125deg, #111e2a, #142d3d); }
.web-design-page .design-contact-section .service-eyebrow { color: #9ebaff; }
.web-design-page .design-contact-section .service-contact-inner h2 { color: #f1f5f8; }
.web-design-page .design-contact-section .service-contact-inner p { color: #b1beca; }
.web-design-page .design-contact-section .service-button { color: #06111b; background: #a8c2ff; }

@keyframes design-hero-drift { from { transform: scale(1.015) translate3d(0, 0, 0); } to { transform: scale(1.075) translate3d(-1%, 1%, 0); } }
@media (max-width: 960px) {
  .web-design-page .design-service-hero .service-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr); gap: 34px; }
  .web-design-page .design-film-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 34px; }
  .web-design-page .design-film-frame { min-height: 320px; }
  .web-design-page .design-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-design-page .design-work-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .web-design-page .design-service-hero { min-height: 0; }
  .web-design-page .design-service-hero .service-hero-grid,
  .web-design-page .design-film-grid { grid-template-columns: 1fr; }
  .web-design-page .design-service-hero .service-hero-visual { min-height: 390px; }
  .web-design-page .design-proof-row { grid-template-columns: 1fr; gap: 0; }
  .web-design-page .design-proof-row > div { padding: 15px 0; border-bottom: 1px solid rgb(190 209 231 / 14%); }
  .web-design-page .design-proof-row > div:last-child { border-bottom: 0; }
  .web-design-page .design-definition-aside { min-height: 340px; }
  .web-design-page .design-film-frame { min-height: 300px; }
  .web-design-page .service-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .web-design-page .service-container,
  .web-design-page .service-hero-inner { width: calc(100% - 36px); }
  .web-design-page .design-service-hero .service-hero-copy h1 { font-size: clamp(42px, 12vw, 60px); }
  .web-design-page .design-service-hero .service-hero-visual { min-height: 310px; border-radius: 14px; }
  .web-design-page .design-service-hero .web-design-mockup { width: 59%; right: 5%; bottom: 19%; }
  .web-design-page .design-service-hero .service-visual-note { max-width: 185px; }
  .web-design-page .design-proof-row { margin-top: 23px; }
  .web-design-page .service-content-section,
  .web-design-page .design-film-section { padding: 64px 0; }
  .web-design-page .design-definition-aside { min-height: 300px; }
  .web-design-page .design-aside-note { max-width: 155px; font-size: 9px; }
  .web-design-page .design-aside-note-bottom { bottom: 93px; }
  .web-design-page .design-service-photo { height: 145px; }
  .web-design-page .design-includes-grid .service-card .service-card-icon { top: 157px; }
  .web-design-page .design-film-frame { min-height: 240px; border-radius: 12px; }
  .web-design-page .design-film-frame figcaption { right: 16px; bottom: 16px; left: 16px; align-items: start; flex-direction: column; }
  .web-design-page .design-work-grid { grid-template-columns: 1fr; }
  .web-design-page .design-work-card:last-child { grid-column: auto; }
  .web-design-page .design-project-image { height: 240px; }
  .web-design-page .service-process { grid-template-columns: 1fr; gap: 11px; }
  .web-design-page .service-process-step,
  .web-design-page .service-process-step:not(:first-child) { min-height: 0; padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-design-page .design-service-hero .service-hero-visual > img { animation: none; }
  .web-design-page .design-service-photo,
  .web-design-page .design-value-card,
  .web-design-page .development-stack-card,
  .web-design-page .design-work-card,
  .web-design-page .design-project-image img { transition: none; }
}