/* Diseño web Deltanet: estructura editorial y visual inspirada en agencias creativas. */
.web-design-page {
  --design-ink: #15283d;
  --design-muted: #65768a;
  --design-blue: #2369d8;
  --design-teal: #48bba9;
  color: var(--design-ink);
  background: #f5f7f9;
}

.web-design-page main { overflow: clip; background: #f5f7f9; }
.web-design-page .service-container,
.web-design-page .service-hero-inner { width: min(1240px, calc(100% - clamp(36px, 8vw, 128px))); }

/* Hero fotográfico con composición amplia, título protagonista y llamada a la acción. */
.web-design-page .design-service-hero {
  padding: clamp(38px, 5vw, 66px) 0 48px;
  color: var(--design-ink);
  background: linear-gradient(135deg, #f7f9fb 0%, #eef3f7 58%, #e9f0f6 100%);
}
.web-design-page .design-service-hero::after { right: -190px; bottom: -390px; border-color: rgb(35 105 216 / 9%); }
.web-design-page .service-crumbs { color: #718197; }
.web-design-page .service-crumbs a:hover { color: var(--design-blue); }
.web-design-page .design-service-hero .service-hero-grid { grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); gap: clamp(38px, 6vw, 82px); }
.web-design-page .design-service-hero .service-hero-copy h1 { max-width: 690px; color: #14283f; font-size: clamp(46px, 6vw, 78px); letter-spacing: -.075em; line-height: .98; }
.web-design-page .design-service-hero .service-hero-copy h1 span { color: #397bd1; }
.web-design-page .design-service-hero .service-eyebrow { color: #3474c2; }
.web-design-page .design-service-hero .service-hero-lede { color: #5d6f84; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.72; }
.web-design-page .design-service-hero .service-button { background: #2168d7; box-shadow: 0 12px 26px rgb(33 104 215 / 18%); }
.web-design-page .design-service-hero .service-button-secondary { border-color: #c7d4e2; color: #1b385a; background: rgb(255 255 255 / 68%); }
.web-design-page .design-service-hero .service-button-secondary:hover { background: #fff; }
.web-design-page .design-hero-location { color: #6c7e91; }
.web-design-page .design-service-hero .service-hero-visual { min-height: clamp(390px, 43vw, 550px); border: 1px solid rgb(255 255 255 / 76%); border-radius: 26px; background: #dbe5ef; box-shadow: 0 28px 70px rgb(22 46 74 / 16%); }
.web-design-page .design-service-hero .service-hero-visual > img { opacity: 1; filter: none; }
.web-design-page .design-service-hero .service-hero-visual::after { background: linear-gradient(180deg, rgb(8 22 39 / 0%) 48%, rgb(8 22 39 / 48%) 100%); }
.web-design-page .design-service-hero .service-visual-badge { top: 19px; left: 19px; border-color: rgb(255 255 255 / 54%); color: #fff; background: rgb(12 29 48 / 54%); backdrop-filter: blur(12px); }
.web-design-page .design-service-hero .web-design-mockup { right: 7%; bottom: 17%; width: min(56%, 320px); transform: rotate(-4deg); box-shadow: 0 22px 50px rgb(2 14 28 / 32%); }
.web-design-page .design-service-hero .service-visual-note { right: 17px; bottom: 17px; max-width: 230px; border-color: rgb(255 255 255 / 20%); background: rgb(9 24 42 / 76%); backdrop-filter: blur(12px); }
.web-design-page .design-service-hero .service-visual-note strong { color: #f7fbff; }
.web-design-page .design-proof-row { margin-top: 39px; border-color: #d9e1e9; }
.web-design-page .design-proof-row > div { color: #64768a; }
.web-design-page .design-proof-row strong { color: #1c3551; }

/* Logotipos de confianza como una banda ligera bajo el hero. */
.web-design-page .design-trust-section { padding: 29px 0 35px; border-bottom: 1px solid #e6ebef; background: #fff; }
.web-design-page .design-trust-inner h2 { color: #30445a; font-size: clamp(18px, 2vw, 24px); }
.web-design-page .design-trust-logos { gap: 12px; }
.web-design-page .design-trust-logos > div { min-height: 70px; border-color: #eef1f4; border-radius: 12px; background: #fff; }
.web-design-page .design-trust-logos img { max-height: 38px; filter: grayscale(.12); }

/* Alternancia de fondos blancos y grises claros para facilitar el recorrido. */
.web-design-page .service-content-section { padding: clamp(68px, 8vw, 106px) 0; }
.web-design-page .service-content-section.is-white { background: #fff; }
.web-design-page .service-content-section.is-blue { background: #f0f4f7; }
.web-design-page .service-section-kicker { color: #3475c2; }
.web-design-page .service-section-heading h2 { color: #172d44; font-size: clamp(32px, 4vw, 53px); letter-spacing: -.06em; }
.web-design-page .service-section-heading > p { color: #687a8f; font-size: 15px; line-height: 1.75; }
.web-design-page .design-definition-copy h2 { color: #172d44; }
.web-design-page .design-definition-copy h2 span { color: #4381ca; }
.web-design-page .design-definition-copy > p:not(.service-section-kicker) { color: #65768a; font-size: 15px; line-height: 1.8; }
.web-design-page .design-text-link { color: #246bc3; }
.web-design-page .design-definition-aside { min-height: 420px; border: 0; border-radius: 22px; background: #d9e3eb; box-shadow: 0 20px 48px rgb(28 54 80 / 12%); }
.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(8 23 39 / 0%) 46%, rgb(8 23 39 / 62%) 100%); }
.web-design-page .design-image-caption { position: absolute; z-index: 1; right: 24px; bottom: 24px; left: 24px; display: grid; gap: 7px; color: white; }
.web-design-page .design-image-caption span { color: #9ce2d7; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.web-design-page .design-image-caption strong { max-width: 360px; font: 700 clamp(20px, 2.3vw, 28px)/1.15 Manrope, sans-serif; letter-spacing: -.04em; }
.web-design-page .design-aside-note { border-color: rgb(255 255 255 / 32%); background: rgb(12 31 51 / 78%); backdrop-filter: blur(10px); }
.web-design-page .design-aside-note-top { top: 18px; left: 18px; }
.web-design-page .design-aside-note-bottom { right: 18px; bottom: 110px; }

/* Servicios con fotografía y movimiento sutil en las tarjetas. */
.web-design-page .design-value-card { min-height: 255px; border-color: #e2e8ee; border-radius: 17px; background: #fff; box-shadow: 0 12px 32px rgb(24 49 76 / 5%); }
.web-design-page .design-value-card > span { color: #3779c7; }
.web-design-page .design-value-card h3 { color: #1c344d; }
.web-design-page .design-value-card p { color: #66788d; }
.web-design-page .design-value-card::after { border-color: rgb(48 119 200 / 13%); }
.web-design-page .design-value-card:hover { border-color: #b8cfe6; box-shadow: 0 21px 42px rgb(24 49 76 / 10%); }
.web-design-page .design-includes-grid { gap: 17px; }
.web-design-page .design-includes-grid .service-card { min-height: 0; padding: 0 0 24px; border-color: #e3e9ef; border-radius: 16px; color: #152b43; background: #fff; box-shadow: 0 12px 30px rgb(24 49 76 / 5%); }
.web-design-page .design-includes-grid .service-card:hover { border-color: #b7cde2; box-shadow: 0 22px 38px rgb(24 49 76 / 11%); }
.web-design-page .design-service-photo { display: block; height: 150px; margin: 0 0 19px; border-radius: 15px 15px 0 0; background-color: #dce6ee; background-position: center; background-size: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 500ms ease; }
.web-design-page .design-includes-grid .service-card:hover .design-service-photo { filter: saturate(1.12); }
.web-design-page .design-service-photo-one { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-service-photo-two { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1559028012-481c04fa702d?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-service-photo-three { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1586717791821-3f44a563fa4c?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-service-photo-four { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-service-photo-five { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-service-photo-six { background-image: linear-gradient(0deg, rgb(13 37 62 / 10%), transparent), url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=82"); }
.web-design-page .design-includes-grid .service-card-number { margin: 0 24px 10px; color: #75899f; font-size: 9px; }
.web-design-page .design-includes-grid .service-card .service-card-icon { top: 163px; right: 20px; color: #286dc1; border-color: #d8e4ef; background: #f4f8fb; }
.web-design-page .design-includes-grid .service-card h3 { margin: 0 24px 9px; color: #1b344e; font-size: 19px; }
.web-design-page .design-includes-grid .service-card p { margin: 0 24px; color: #66788d; font-size: 13px; line-height: 1.7; }

/* Vídeo local en formato editorial, sin tapar el contenido de la pieza. */
.web-design-page .design-film-section { padding: clamp(68px, 8vw, 102px) 0; color: #edf5fc; background: linear-gradient(130deg, #10243a 0%, #142f49 56%, #173a52 100%); }
.web-design-page .design-film-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 7vw, 88px); align-items: center; }
.web-design-page .design-film-copy h2 { max-width: 510px; margin: 0 0 20px; color: #f4f8fc; font: 750 clamp(34px, 4.4vw, 56px)/1.04 Manrope, sans-serif; letter-spacing: -.065em; }
.web-design-page .design-film-copy > p:not(.service-section-kicker) { max-width: 48ch; color: #bfcede; font-size: 15px; line-height: 1.8; }
.web-design-page .design-film-copy .design-text-link { color: #a8d7e2; }
.web-design-page .design-film-frame { position: relative; min-height: 370px; margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 17%); border-radius: 20px; background: #0a1827; box-shadow: 0 24px 60px rgb(2 13 25 / 28%); }
.web-design-page .design-film-frame::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(180deg, transparent, rgb(5 18 31 / 72%)); 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: #a4dcd1; 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, proyectos y proceso conservan su contenido, con un acabado claro. */
.web-design-page .design-tech-section .design-tech-filter { color: #40566f; border-color: #d9e2eb; background: #fff; }
.web-design-page .design-tech-section .design-tech-filter.is-active { color: #fff; border-color: #286fd0; background: #286fd0; }
.web-design-page .design-tech-section .design-tech-count { color: #687d93; }
.web-design-page .development-stack-card { border-color: #e0e7ee; background: #fff; box-shadow: 0 12px 30px rgb(24 49 76 / 5%); }
.web-design-page .development-stack-card h3 { color: #1d3853; }
.web-design-page .development-stack-card p { color: #687b90; }
.web-design-page .design-work-card { border-color: #e2e8ee; background: #fff; }
.web-design-page .design-work-card strong { color: #1b3049; }
.web-design-page .design-guidance-card { border-color: #e0e7ee; background: #fff; }
.web-design-page .design-guidance-card h3 { color: #1d344d; }
.web-design-page .design-guidance-card p { color: #66798e; }
.web-design-page .design-guidance-card a { color: #286dc1; }
.web-design-page .design-scope-card { border-color: #e1e8ef; box-shadow: 0 12px 30px rgb(24 49 76 / 5%); }
.web-design-page .design-related-card { border-color: #e1e8ef; box-shadow: 0 12px 30px rgb(24 49 76 / 5%); }
.web-design-page .design-related-card h3 { color: #1d344d; }
.web-design-page .design-related-card p { color: #687b90; }
.web-design-page .service-process { gap: 14px; 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 #e0e7ed; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px rgb(24 49 76 / 5%); }
.web-design-page .service-process-step span { color: #3677c2; }
.web-design-page .service-process-step h3 { color: #1d344d; }
.web-design-page .service-process-step p { color: #687b90; }
.web-design-page .service-process-step:hover,
.web-design-page .service-process-step:focus-within { transform: translateY(-5px); border-color: #b8cfe5; background: #fff; box-shadow: 0 22px 42px rgb(24 49 76 / 10%); }
.web-design-page .design-feature-band { border-color: #dce5ec; background: #fff; }
.web-design-page .design-feature-band h2 { color: #1b334d; }
.web-design-page .design-feature-band p { color: #65798e; }
.web-design-page .design-feature-list li { color: #40566f; }
.web-design-page .service-faq details { border-color: #e1e8ef; background: #fff; }
.web-design-page .service-faq summary { color: #1b344e; }
.web-design-page .service-faq details p { color: #64788d; }
.web-design-page .design-contact-section { background: linear-gradient(125deg, #122d49, #174566); }

@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; }
}
@media (max-width: 760px) {
  .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 #d9e1e9; }
  .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, 58px); }
  .web-design-page .design-service-hero .service-hero-visual { min-height: 310px; border-radius: 17px; }
  .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 { padding: 62px 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-includes-grid .service-card { padding-bottom: 21px; }
  .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: 15px; }
  .web-design-page .design-film-frame figcaption { right: 16px; bottom: 16px; left: 16px; align-items: start; flex-direction: column; }
  .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-photo,
  .web-design-page .design-value-card,
  .web-design-page .development-stack-card,
  .web-design-page .design-work-card { transition: none; }
}