:root {
    --service-ink: #0c1519;
    --service-deep: #071116;
    --service-cream: #f2ede3;
    --service-paper: #fffaf0;
    --service-koi: #eb6b35;
    --service-koi-paper: #a63f2c;
    --service-red: #b93b2d;
    --service-sakura: #d97889;
    --service-line: rgba(17, 27, 31, .15);
    --service-dark-line: rgba(255, 247, 235, .13);
}

.service-page { color: var(--service-ink); background: var(--service-cream); }
.service-page main { overflow: clip; }
.service-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.service-section { position: relative; padding-block: clamp(72px, 8vw, 118px); }
.service-kicker { display: inline-block; color: var(--service-koi); font: 700 .7rem/1.4 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.service-index { color: #765043; font: 700 .64rem/1.4 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }

.service-overview .service-kicker,
.service-deliverables .service-kicker,
.service-principles .service-kicker,
.service-notes .service-kicker,
.service-faq .service-kicker,
.service-other .service-kicker,
.service-final-cta .service-kicker,
.services-hub-grid-section .service-kicker {
    color: var(--service-koi-paper);
}

.service-hero { position: relative; display: grid; align-items: end; min-height: min(820px, 92vh); isolation: isolate; color: #fff; }
.service-hero-media, .service-hero-shade { position: absolute; inset: 0; }
.service-hero-media { z-index: -2; overflow: hidden; background: #071012; }
.service-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); }
.service-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(4, 10, 13, .95) 0%, rgba(4, 10, 13, .78) 43%, rgba(4, 10, 13, .2) 82%), linear-gradient(0deg, rgba(4, 10, 13, .9), transparent 48%); }
.service-hero-inner { padding-block: 148px 72px; }
.service-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); color: rgba(255, 255, 255, .63); font: 600 .67rem/1.4 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.service-breadcrumb a { color: inherit; transition: color .2s ease; }
.service-breadcrumb a:hover { color: #fff; }
.service-hero h1 { max-width: 930px; margin: 14px 0 22px; color: #fff; font: 700 clamp(2.8rem, 6.2vw, 6rem)/.98 'Sora', sans-serif; letter-spacing: -.058em; text-wrap: balance; }
.service-hero > .service-hero-inner > p:not(.service-hero-promise) { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .8); font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.72; }
.service-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.service-text-link { color: #fff; font-weight: 650; }
.service-text-link span { color: var(--service-koi); }
.service-hero-promise { display: flex; align-items: center; gap: 10px; margin: 34px 0 0; color: rgba(255,255,255,.65); font: 600 .68rem/1.5 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.service-hero-promise span { width: 7px; height: 7px; background: var(--service-koi); border-radius: 50%; box-shadow: 0 0 0 5px rgba(235,107,53,.12); }

.service-section-heading { display: grid; grid-template-columns: minmax(160px, .42fr) minmax(0, 1.58fr); align-items: start; gap: clamp(28px, 5vw, 72px); margin-bottom: clamp(38px, 5vw, 62px); }
.service-section-heading h2, .service-overview h2, .service-related-heading h2, .service-other h2, .service-final-cta h2, .service-faq h2 { max-width: 900px; margin: 0; color: var(--service-ink); font: 650 clamp(2.1rem, 4.2vw, 4rem)/1.04 'Sora', sans-serif; letter-spacing: -.048em; text-wrap: balance; }
.service-section-heading--dark h2 { color: #fffaf0; }

.service-overview { background: var(--service-paper); }
.service-overview-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr); align-items: start; gap: clamp(48px, 8vw, 112px); }
.service-overview-copy h2 { margin: 14px 0 24px; }
.service-overview-copy > p { max-width: 760px; margin: 0; color: #536065; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.82; }
.service-fit { padding: 30px; background: #eee5d8; border: 1px solid var(--service-line); border-radius: 4px 26px 4px 4px; box-shadow: 0 24px 55px rgba(43, 36, 28, .08); }
.service-fit h3 { margin: 11px 0 22px; font: 650 1.35rem/1.25 'Sora', sans-serif; }
.service-fit ul, .service-scope-list ul, .services-hub-card ul { margin: 0; padding: 0; list-style: none; }
.service-fit li { position: relative; padding: 13px 0 13px 22px; color: #4f5a5e; border-top: 1px solid rgba(17,27,31,.11); line-height: 1.52; }
.service-fit li::before { content: ''; position: absolute; top: 20px; left: 0; width: 7px; height: 7px; background: var(--service-koi); border-radius: 50% 50% 50% 0; rotate: -45deg; }

.service-problems, .service-method { color: #fffaf0; background: radial-gradient(circle at 86% 10%, rgba(188,63,42,.14), transparent 28rem), linear-gradient(145deg, #071116, #0b1a20 70%, #061015); }
.service-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--service-dark-line); }
.service-problem-grid article { min-width: 0; padding: 32px 26px 36px 0; }
.service-problem-grid article + article { padding-left: 26px; border-left: 1px solid var(--service-dark-line); }
.service-number { color: var(--service-koi); font: 700 .68rem/1 'JetBrains Mono', monospace; }
.service-problem-grid h3, .service-deliverables h3, .service-principle-grid h3 { margin: 24px 0 12px; font: 650 1.12rem/1.3 'Sora', sans-serif; }
.service-problem-grid p { margin: 0; color: rgba(255,250,240,.62); line-height: 1.62; }

.service-deliverables { background: var(--service-paper); }
.service-deliverables-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--service-line); }
.service-deliverables-grid article { min-width: 0; padding: 32px 25px 36px 0; }
.service-deliverables-grid article + article { padding-left: 25px; border-left: 1px solid var(--service-line); }
.service-deliverables-grid p, .service-principle-grid p { margin: 0; color: #566267; line-height: 1.64; }
.service-scope-list { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr); gap: 34px; margin-top: 44px; padding: 27px 30px; background: #eee5d8; border-radius: 4px 20px 4px 4px; }
.service-scope-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.service-scope-list li { position: relative; padding-left: 17px; color: #465359; line-height: 1.5; }
.service-scope-list li::before { content: ''; position: absolute; top: .65em; left: 0; width: 6px; height: 6px; background: var(--service-koi); border-radius: 50%; }

.service-process-detailed { margin: 0; padding: 0; list-style: none; }
.service-process-detailed > li { display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(330px, .9fr); gap: clamp(24px, 4vw, 60px); align-items: start; padding: 30px 0; border-top: 1px solid var(--service-dark-line); }
.service-process-detailed > li:last-child { border-bottom: 1px solid var(--service-dark-line); }
.service-process-index { display: grid; place-items: center; width: 48px; height: 48px; color: #ffb078; border: 1px solid rgba(255,176,120,.35); border-radius: 50%; font: 700 .68rem/1 'JetBrains Mono', monospace; }
.service-process-detailed h3 { margin: 4px 0 10px; color: #fffaf0; font: 650 clamp(1.25rem, 2vw, 1.75rem)/1.2 'Sora', sans-serif; }
.service-process-detailed p { max-width: 630px; margin: 0; color: rgba(255,250,240,.64); line-height: 1.62; }
.service-process-detailed dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.service-process-detailed dl div { padding: 14px; background: rgba(255,250,240,.035); border: 1px solid rgba(255,250,240,.08); border-radius: 4px 13px 4px 4px; }
.service-process-detailed dt { margin-bottom: 6px; color: #df8a5d; font: 700 .59rem/1.3 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.service-process-detailed dd { margin: 0; color: rgba(255,250,240,.78); font-size: .82rem; line-height: 1.45; }

.service-principles { background: #eee5d8; }
.service-principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-principle-grid article { padding: clamp(24px, 3vw, 38px); background: rgba(255,250,240,.72); border: 1px solid var(--service-line); border-radius: 4px 22px 4px 4px; }
.service-principle-grid h3 { margin-top: 0; }

.service-related { padding-block: clamp(72px, 8vw, 112px); }
.service-projects { color: #fff; background: #0a1418; }
.service-notes { background: var(--service-cream); }
.service-related-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 42px; }
.service-related-heading h2 { margin-top: 9px; font-size: clamp(2rem, 3.8vw, 3.55rem); }
.service-projects .service-related-heading h2 { color: #fff; }
.service-related-heading > a { flex: 0 0 auto; padding-bottom: 7px; color: inherit; font-weight: 650; }
.service-related-heading > a span { color: var(--service-koi); }
.service-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-project-card { overflow: hidden; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 4px 20px 4px 4px; transition: transform .3s ease, border-color .3s ease; }
.service-project-card:hover { transform: translateY(-5px); border-color: rgba(235,107,53,.55); }
.service-project-media { display: grid; place-items: center; aspect-ratio: 16/10; overflow: hidden; color: rgba(255,255,255,.4); background: #172226; font: 700 .65rem 'JetBrains Mono', monospace; }
.service-project-media img, .service-note-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-project-card:hover img, .service-note-list article:hover img { transform: scale(1.035); }
.service-project-card > div { padding: 24px; }
.service-card-label { color: var(--service-koi); font: 700 .63rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.service-project-card h3 { margin: 10px 0 12px; color: #fff; font: 650 1.28rem 'Sora', sans-serif; }
.service-project-card p { min-height: 4.7em; margin: 0 0 20px; color: rgba(255,255,255,.62); line-height: 1.58; }
.service-card-link { color: #fff; font-weight: 650; }
.service-note-list { border-top: 1px solid var(--service-line); }
.service-note-list article { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--service-line); }
.service-note-media { display: grid; place-items: center; aspect-ratio: 16/9; overflow: hidden; color: #74685c; background: #d8cfc0; font: 700 .65rem 'JetBrains Mono', monospace; }
.service-note-list time { color: #8b7b6b; font: 600 .65rem 'JetBrains Mono', monospace; }
.service-note-list h3 { margin: 8px 0; font: 650 clamp(1.2rem, 2vw, 1.7rem) 'Sora', sans-serif; }
.service-note-list p { margin: 0; color: #596366; line-height: 1.55; }
.service-empty { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 30px; border: 1px solid currentColor; border-radius: 4px 18px 4px 4px; opacity: .72; }
.service-empty p { max-width: 720px; margin: 0; line-height: 1.65; }
.service-empty a { flex: 0 0 auto; color: inherit; font-weight: 700; }

.service-faq { background: var(--service-paper); }
.service-faq-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 8vw, 108px); align-items: start; }
.service-faq h2 { margin: 12px 0 18px; }
.service-faq-grid > div:first-child > p { max-width: 410px; color: #5c676b; line-height: 1.65; }
.service-faq-list { border-top: 1px solid var(--service-line); }
.service-faq-list details { border-bottom: 1px solid var(--service-line); }
.service-faq-list summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; color: #192328; font: 650 clamp(1rem, 1.4vw, 1.18rem)/1.4 'Sora', sans-serif; list-style: none; }
.service-faq-list summary::-webkit-details-marker { display: none; }
.service-faq-list summary span { color: var(--service-koi); font-size: 1.35rem; transition: transform .2s ease; }
.service-faq-list details[open] summary span { transform: rotate(45deg); }
.service-faq-list details p { max-width: 760px; margin: -4px 42px 22px 0; color: #596468; line-height: 1.68; }

.service-other { padding-block: clamp(66px, 7vw, 92px); background: #e8dfd1; }
.service-other h2 { margin: 10px 0 30px; font-size: clamp(2rem, 3.8vw, 3.5rem); }
.service-other-links { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--service-line); }
.service-other-links a { display: flex; justify-content: space-between; gap: 20px; padding: 26px 18px 26px 0; color: var(--service-ink); font: 600 clamp(1rem, 2vw, 1.25rem) 'Sora', sans-serif; }
.service-other-links a + a { padding-left: 26px; border-left: 1px solid var(--service-line); }
.service-other-links a span:last-child { color: var(--service-koi); }
.service-final-cta { padding-block: clamp(82px, 10vw, 138px); text-align: center; background: var(--service-paper); }
.service-final-cta h2 { max-width: 920px; margin: 13px auto 20px; }
.service-final-cta p { max-width: 650px; margin: 0 auto 30px; color: #596468; line-height: 1.65; }

/* Los textos administrables deben adaptarse incluso con palabras o URLs largas. */
.service-breadcrumb,
.service-breadcrumb > *,
.service-hero h1,
.service-section-heading h2,
.service-overview h2,
.service-related-heading h2,
.service-other h2,
.service-final-cta h2,
.service-faq h2,
.service-problem-grid h3,
.service-deliverables h3,
.service-principle-grid h3,
.service-process-detailed :is(h3, dt, dd),
.service-project-card :is(h3, p, a),
.service-note-list :is(h3, p),
.service-other-links a,
.services-hub-hero h1,
.services-hub-card :is(h3, p, li, a),
.services-hub-method :is(h3, p) {
    overflow-wrap: anywhere;
    word-break: normal;
}

.service-project-card > div,
.service-note-list article > div,
.services-hub-card > div,
.service-process-detailed dl,
.service-process-detailed dl div { min-width: 0; }

.service-accent-sakura { --service-koi: #d85f73; }
.service-accent-midnight { --service-koi: #e27b40; }

/* Hub */
.services-hub-hero { position: relative; display: grid; align-items: end; min-height: min(720px, 84vh); padding-block: 155px 82px; color: #fffaf0; background: radial-gradient(circle at 82% 20%, rgba(215,88,50,.2), transparent 28rem), linear-gradient(145deg, #061015, #0b1a20 68%, #071116); overflow: hidden; }
.services-hub-hero::after { content: 'SERVICES / 01—03'; position: absolute; right: 3vw; bottom: 2vw; color: rgba(255,250,240,.055); font: 700 clamp(3rem, 10vw, 9rem)/1 'Sora', sans-serif; letter-spacing: -.06em; white-space: nowrap; pointer-events: none; }
.services-hub-hero h1 { max-width: 950px; margin: 14px 0 24px; color: #fffaf0; font: 700 clamp(3rem, 7vw, 6.5rem)/.97 'Sora', sans-serif; letter-spacing: -.06em; text-wrap: balance; }
.services-hub-hero p { max-width: 700px; margin: 0 0 32px; color: rgba(255,250,240,.72); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.72; }
.services-hub-grid-section { background: var(--service-paper); }
.services-hub-grid { display: grid; gap: 26px; }
.services-hub-card { display: grid; grid-template-columns: minmax(350px, .86fr) minmax(0, 1.14fr); min-height: 430px; overflow: hidden; background: #eee6da; border: 1px solid var(--service-line); border-radius: 5px 30px 5px 5px; }
.services-hub-card:nth-child(even) { grid-template-columns: minmax(0, 1.14fr) minmax(350px, .86fr); }
.services-hub-card:nth-child(even) .services-hub-card-media { order: 2; }
.services-hub-card-media { position: relative; display: block; min-height: 100%; overflow: hidden; }
.services-hub-card-media picture, .services-hub-card-media img { display: block; width: 100%; height: 100%; }
.services-hub-card-media img { object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.services-hub-card:hover .services-hub-card-media img { transform: scale(1.025); }
.services-hub-card-media > span { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: rgba(4,12,16,.58); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 .65rem 'JetBrains Mono', monospace; }
.services-hub-card > div { align-self: center; padding: clamp(30px, 5vw, 66px); }
.services-hub-card h3 { margin: 12px 0 17px; color: var(--service-ink); font: 650 clamp(1.8rem, 3.2vw, 3.2rem)/1.05 'Sora', sans-serif; letter-spacing: -.045em; }
.services-hub-card p { max-width: 650px; margin: 0 0 22px; color: #536065; line-height: 1.66; }
.services-hub-card li { position: relative; padding: 6px 0 6px 17px; color: #455258; font-size: .88rem; }
.services-hub-card li::before { content: ''; position: absolute; top: 13px; left: 0; width: 6px; height: 6px; background: var(--service-koi); border-radius: 50%; }
.services-hub-card > div > a { display: inline-flex; gap: 7px; margin-top: 23px; color: #9f3f2c; font-weight: 700; }
.services-hub-method { color: #fffaf0; background: #081318; }
.services-hub-method ol { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-block: 1px solid var(--service-dark-line); list-style: none; }
.services-hub-method li { padding: 28px 22px 32px 0; }
.services-hub-method li + li { padding-left: 22px; border-left: 1px solid var(--service-dark-line); }
.services-hub-method li > span { color: var(--service-koi); font: 700 .65rem 'JetBrains Mono', monospace; }
.services-hub-method h3 { margin: 20px 0 9px; color: #fffaf0; font: 650 1.08rem 'Sora', sans-serif; }
.services-hub-method p { margin: 0; color: rgba(255,250,240,.6); font-size: .87rem; line-height: 1.55; }

@media (max-width: 980px) {
    .service-overview-grid, .service-faq-grid { grid-template-columns: 1fr; }
    .service-fit { max-width: 720px; }
    .service-problem-grid, .service-deliverables-grid { grid-template-columns: repeat(2, 1fr); }
    .service-problem-grid article:nth-child(n + 3), .service-deliverables-grid article:nth-child(n + 3) { border-top: 1px solid var(--service-dark-line); }
    .service-problem-grid article:nth-child(3), .service-deliverables-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
    .service-deliverables-grid article:nth-child(n + 3) { border-top-color: var(--service-line); }
    .service-process-detailed > li { grid-template-columns: 58px 1fr; }
    .service-process-detailed dl { grid-column: 2; }
    .services-hub-card { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); }
    .services-hub-card:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); }
    .services-hub-method ol { grid-template-columns: repeat(3, 1fr); }
    .services-hub-method li:nth-child(4) { padding-left: 0; border-left: 0; }
    .services-hub-method li:nth-child(n + 4) { border-top: 1px solid var(--service-dark-line); }
}

@media (max-width: 860px) {
    .services-hub-card,
    .services-hub-card:nth-child(even) {
        display: block;
        min-height: 0;
    }

    .services-hub-card:nth-child(even) .services-hub-card-media { order: initial; }
    .services-hub-card-media { min-height: 0; aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
    .service-shell { width: min(100% - 30px, 1180px); }
    .service-section { padding-block: 62px; }
    .service-hero { min-height: 100vh; min-height: 100svh; }
    .service-hero-inner { padding-block: 126px 54px; }
    .service-hero-shade { background: linear-gradient(0deg, rgba(4,10,13,.97), rgba(4,10,13,.67) 72%, rgba(4,10,13,.35)); }
    .service-hero h1 { font-size: clamp(2.45rem, 12.5vw, 4rem); }
    .service-hero-promise { align-items: flex-start; }
    .service-section-heading { grid-template-columns: 1fr; gap: 13px; }
    .service-problem-grid, .service-deliverables-grid, .service-principle-grid { grid-template-columns: 1fr; }
    .service-problem-grid article, .service-problem-grid article + article, .service-deliverables-grid article, .service-deliverables-grid article + article { padding: 25px 0; border-left: 0; border-top: 1px solid var(--service-line); }
    .service-problem-grid article, .service-problem-grid article + article { border-top-color: var(--service-dark-line); }
    .service-problem-grid article:first-child, .service-deliverables-grid article:first-child { border-top: 0; }
    .service-scope-list { grid-template-columns: 1fr; gap: 16px; padding: 23px; }
    .service-scope-list ul { grid-template-columns: 1fr; }
    .service-process-detailed > li { grid-template-columns: 45px 1fr; gap: 17px; padding: 25px 0; }
    .service-process-index { width: 38px; height: 38px; }
    .service-process-detailed dl { grid-column: 1 / -1; grid-template-columns: 1fr; margin-left: 62px; }
    .service-related-heading, .service-empty { align-items: flex-start; flex-direction: column; }
    .service-card-grid { grid-template-columns: 1fr; }
    .service-note-list article { grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
    .service-note-list p { display: none; }
    .service-faq-list details p { margin-right: 0; }
    .service-other-links { grid-template-columns: 1fr; }
    .service-other-links a + a { padding-left: 0; border-top: 1px solid var(--service-line); border-left: 0; }
    .services-hub-hero { min-height: 680px; padding-block: 130px 64px; }
    .services-hub-hero h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
    .services-hub-card, .services-hub-card:nth-child(even) { display: block; min-height: 0; }
    .services-hub-card:nth-child(even) .services-hub-card-media { order: initial; }
    .services-hub-card-media { aspect-ratio: 16/10; }
    .services-hub-card > div { padding: 28px 22px 32px; }
    .services-hub-method ol { grid-template-columns: 1fr; }
    .services-hub-method li, .services-hub-method li + li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--service-dark-line); }
    .services-hub-method li:first-child { border-top: 0; }
}

@media (max-width: 420px) {
    .service-hero h1 { font-size: clamp(2.1rem, 11.5vw, 3rem); }
    .service-note-list article { grid-template-columns: 1fr; }
    .service-note-media { width: 100%; max-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .service-project-card, .service-project-media img, .service-note-media img, .services-hub-card-media img, .service-faq-list summary span { transition: none; }
}

/* ========================================================================
   SERVICIOS V6 · más compactos, sin óvalos superpuestos y con contraste real
   ======================================================================== */
.services-hub-grid-section {
    padding-top: clamp(44px, 5vw, 72px);
    background:
        linear-gradient(90deg, rgba(250,246,237,.9), rgba(250,246,237,.78) 50%, rgba(250,246,237,.94)),
        url('../assets/services-crescent-v7.webp') left top / clamp(330px, 34vw, 540px) auto no-repeat,
        #f7f1e7;
}
.services-hub-heading {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .64fr);
    margin-bottom: clamp(25px, 3.5vw, 46px);
    padding: clamp(23px, 3vw, 38px);
}
.services-hub-heading__cta {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    gap: 9px;
    margin-top: 18px;
    color: #963c2b;
    font-weight: 780;
    text-decoration: underline;
    text-decoration-color: rgba(150,60,43,.3);
    text-underline-offset: 5px;
}
.services-hub-heading__botanical {
    right: 18px;
    bottom: auto;
    top: 18px;
    width: 138px;
    height: 76px;
    aspect-ratio: auto;
    border-radius: 0;
    opacity: .16;
    background-size: contain;
    background-position: right top;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
    mask-image: linear-gradient(90deg, transparent, #000 42%);
}
.services-hub-card { min-height: clamp(400px, 35vw, 520px); }
.services-hub-card-media::after { content: none !important; display: none !important; }
.services-hub-card:hover,
.services-hub-card:focus-within { transform: translateY(-4px); }
.services-hub-card:hover .services-hub-card-media img,
.services-hub-card:focus-within .services-hub-card-media img { transform: scale(1.018); }

.services-hub-method {
    padding-top: clamp(60px, 7vw, 92px);
    background: linear-gradient(180deg, #f7f1e7 0, #e9e0d2 10%, #081216 10.1%, #081216 100%);
}
.services-hub-method-intro { position: relative; z-index: 2; }
.services-hub-method-intro .service-kicker { color: #ef8955; }
.services-hub-method-intro h2 { color: #fff8ea; text-shadow: 0 2px 22px rgba(0,0,0,.22); }
.services-hub-method-intro > p { color: #bdc9ca; }
.services-hub-method-intro .service-text-link--ink { color: #fff3de; }

/* Las landings dejan atrás el dragón de tinta repetido: cada método conserva
   el contexto de su propio servicio, oscurecido como una escena editorial. */
.service-method::before {
    background-image: var(--service-context-art);
    background-position: 76% center;
    background-size: cover;
    opacity: .24;
    filter: saturate(.72) contrast(1.06);
}
.service-method::after {
    background: linear-gradient(90deg, rgba(5,14,19,.98), rgba(5,14,19,.88) 53%, rgba(5,14,19,.62));
}
.service-process-detailed { padding-inline: clamp(20px, 3vw, 42px); }
.service-process-detailed > li {
    grid-template-columns: 82px minmax(0, 1.1fr) minmax(310px, .9fr);
    gap: clamp(30px, 4vw, 68px);
    padding: 29px 14px;
    border-radius: 3px 17px 3px 3px;
}
body[data-service='apps'] .service-method { --service-method-tone: rgba(205, 89, 50, .25); }
.service-deliverables::before,
.service-principles::before {
    opacity: .24;
    mix-blend-mode: multiply;
    filter: saturate(.72) contrast(.98);
}

@media (max-width: 980px) {
    .services-hub-heading__cta { grid-column: 1; }
    .service-process-detailed > li { grid-template-columns: 64px minmax(0,1fr); }
    .service-process-detailed dl { grid-column: 2; }
}
@media (max-width: 680px) {
    .services-hub-grid-section { background-size: 340px auto; }
    .services-hub-heading__botanical { display: none; }
    .services-hub-card { min-height: 0; }
    .services-hub-method { background: #081216; }
    .service-process-detailed { padding-inline: 0; }
    .service-process-detailed > li { grid-template-columns: 48px minmax(0,1fr); gap: 18px; padding-inline: 10px; }
    .service-process-detailed dl { grid-column: 1 / -1; margin-left: 66px; }
}

/* ================================================================
   V2 · RELATO VISUAL NEO-JAPÓN
   Las imágenes acompañan la lectura sin competir con el contenido.
   ================================================================ */

.services-hub-hero {
    min-height: min(860px, 94svh);
    isolation: isolate;
    background: #061015;
}

.services-hub-hero-media,
.services-hub-hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.services-hub-hero-media {
    z-index: -2;
    overflow: hidden;
}

.services-hub-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    scale: 1.015;
}

.services-hub-hero-shade {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 10, 14, .97) 0%, rgba(4, 12, 16, .85) 40%, rgba(4, 12, 16, .3) 72%, rgba(4, 12, 16, .16) 100%),
        linear-gradient(0deg, rgba(3, 9, 12, .88), transparent 54%);
}

.services-hub-hero > .service-shell {
    position: relative;
    z-index: 1;
}

.services-hub-hero::after { content: none; }

.services-hub-grid-section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 6%, rgba(217, 120, 137, .1), transparent 26rem),
        var(--service-paper);
}

.services-hub-grid-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 3%;
    bottom: 2%;
    left: 0;
    width: min(39vw, 520px);
    background: url('../assets/services-crescent-v7.webp') top left / 100% auto no-repeat;
    opacity: .34;
    mask-image: radial-gradient(ellipse at 0 25%, #000 0 42%, rgba(0,0,0,.72) 58%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 0 25%, #000 0 42%, rgba(0,0,0,.72) 58%, transparent 80%);
    pointer-events: none;
}

.services-hub-grid-section::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: auto;
    bottom: 1%;
    left: 0;
    width: min(36vw, 500px);
    aspect-ratio: .86;
    background: url('../assets/services-crescent-v7.webp') bottom left / 100% auto no-repeat;
    opacity: .2;
    transform: scaleY(-1);
    mask-image: radial-gradient(ellipse at 0 72%, #000 0 38%, rgba(0,0,0,.7) 56%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 0 72%, #000 0 38%, rgba(0,0,0,.7) 56%, transparent 80%);
    pointer-events: none;
}

.services-hub-grid-section > .service-shell,
.services-hub-method > .service-shell,
.service-hub-page .service-final-cta > .service-shell {
    position: relative;
    z-index: 1;
}

.services-hub-card {
    background: rgba(238, 230, 218, .94);
    box-shadow: 0 26px 70px rgba(51, 42, 32, .08);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.services-hub-method {
    isolation: isolate;
    overflow: hidden;
    background: #071116;
}

.services-hub-method::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url('../assets/services-method-ink-v1.webp') center / cover no-repeat;
    opacity: .54;
    pointer-events: none;
}

.services-hub-method::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 14, 19, .95), rgba(5, 14, 19, .83) 48%, rgba(5, 14, 19, .48)),
        linear-gradient(0deg, rgba(5, 14, 19, .82), transparent 48%, rgba(5, 14, 19, .32));
    pointer-events: none;
}

.services-hub-method ol {
    background: rgba(5, 14, 19, .4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.service-hub-page .service-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgba(217, 120, 137, .11), transparent 20rem),
        var(--service-paper);
}

.service-hub-page .service-final-cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -18% -3% -22% auto;
    width: min(42vw, 560px);
    background: url('../assets/services-crescent-v7.webp') center / cover no-repeat;
    opacity: .27;
    transform: scaleX(-1);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    pointer-events: none;
}

/* Cada landing mantiene su fotografía principal y la reutiliza como una
   huella contextual muy ligera en el punto de partida. */
.service-page[data-service='webs'] { --service-context-art: url('../assets/service-corporate-v7.webp'); }
.service-page[data-service='tiendas'] { --service-context-art: url('../assets/service-commerce-v7.webp'); }
.service-page[data-service='apps'] { --service-context-art: url('../assets/service-automation-v8.webp'); }

.service-overview,
.service-problems,
.service-deliverables,
.service-method,
.service-principles,
.service-page:not(.service-hub-page) .service-final-cta {
    isolation: isolate;
    overflow: hidden;
}

.service-overview::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: min(43vw, 650px);
    background: var(--service-context-art) center / cover no-repeat;
    opacity: .09;
    filter: saturate(.7);
    mask-image: linear-gradient(90deg, transparent, #000 58%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
    pointer-events: none;
}

.service-problems::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--service-context-art) 92% center / min(58vw, 860px) auto no-repeat;
    opacity: .16;
    filter: grayscale(.28) saturate(.7);
    mask-image: linear-gradient(90deg, transparent 14%, #000 68%);
    -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 68%);
    pointer-events: none;
}

.service-problems::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 17, 22, .98) 0 38%, rgba(7, 17, 22, .76));
    pointer-events: none;
}

.service-deliverables::before,
.service-principles::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3%;
    right: -2%;
    width: min(38vw, 540px);
    aspect-ratio: 1.4;
    background: url('../assets/portfolio-sakura-branch-v4.webp') top right / contain no-repeat;
    opacity: .42;
    transform: scaleX(-1);
    mask-image: radial-gradient(ellipse at 78% 18%, #000 0 34%, rgba(0,0,0,.72) 52%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 78% 18%, #000 0 34%, rgba(0,0,0,.72) 52%, transparent 78%);
    pointer-events: none;
}

.service-principles::before {
    top: auto;
    right: auto;
    bottom: -5%;
    left: -2%;
    transform: none;
    mask-image: radial-gradient(ellipse at 22% 82%, #000 0 34%, rgba(0,0,0,.72) 52%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 22% 82%, #000 0 34%, rgba(0,0,0,.72) 52%, transparent 78%);
}

.service-method::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url('../assets/services-method-ink-v1.webp') center / cover no-repeat;
    opacity: .48;
    pointer-events: none;
}

.service-method::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 14, 19, .97), rgba(5, 14, 19, .84) 55%, rgba(5, 14, 19, .55));
    pointer-events: none;
}

.service-process-detailed {
    padding-inline: clamp(16px, 2vw, 28px);
    background: rgba(4, 12, 16, .34);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.service-page:not(.service-hub-page) .service-final-cta {
    position: relative;
    background:
        radial-gradient(circle at 16% 88%, rgba(235, 107, 53, .1), transparent 24rem),
        var(--service-paper);
}

.service-page:not(.service-hub-page) .service-final-cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto -2% -38% auto;
    width: min(41vw, 540px);
    aspect-ratio: .82;
    background: url('../assets/services-crescent-v7.webp') bottom right / contain no-repeat;
    opacity: .23;
    transform: scaleX(-1);
    mask-image: linear-gradient(90deg, transparent, #000 46%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%);
    pointer-events: none;
}

.service-page:not(.service-hub-page) .service-final-cta > .service-shell,
.service-overview > .service-shell,
.service-problems > .service-shell,
.service-deliverables > .service-shell,
.service-method > .service-shell,
.service-principles > .service-shell {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .services-hub-hero { min-height: 100vh; min-height: 100svh; }
    .services-hub-hero-media img { object-position: 68% center; }
    .services-hub-hero-shade {
        background: linear-gradient(0deg, rgba(3, 10, 14, .98) 0%, rgba(3, 10, 14, .82) 66%, rgba(3, 10, 14, .48));
    }
    .services-hub-grid-section::before { width: 78vw; opacity: .18; }
    .services-hub-grid-section::after { width: 72vw; opacity: .12; }
    .services-hub-card { background: rgba(238, 230, 218, .97); }
    .services-hub-method::before,
    .service-method::before { background-position: 72% center; opacity: .32; }
    .service-hub-page .service-final-cta::before,
    .service-page:not(.service-hub-page) .service-final-cta::before { width: 82vw; opacity: .16; }
    .service-overview::before { width: 92vw; opacity: .055; }
    .service-problems::before { background-position: 74% center; background-size: cover; opacity: .1; }
    .service-deliverables::before,
    .service-principles::before { width: 78vw; opacity: .27; }
    .service-process-detailed { padding-inline: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .services-hub-hero-media img { scale: 1; }
}

/* ================================================================
   V3 · SERVICIOS COMO RELATO CONTINUO
   Fondos a sangre, contenido en cristal cálido y transiciones suaves.
   ================================================================ */

.service-hub-page main > *,
.service-page:not(.service-hub-page) main > * {
    margin-block: 0;
}

.services-hub-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: clamp(138px, 15vh, 178px) clamp(64px, 9vh, 92px);
}

.services-hub-hero-media img {
    scale: 1;
    transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.services-hub-hero:hover .services-hub-hero-media img {
    transform: scale(1.018);
}

/* Las tres especialidades comparten un mismo jardín de fondo. Cada fotografía
   ocupa toda su tarjeta y el texto descansa sobre un panel translúcido. */
.services-hub-grid-section {
    padding-block: clamp(78px, 8vw, 116px);
    background: #eee7da;
}

.services-hub-grid-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    width: auto;
    opacity: 1;
    background:
        linear-gradient(90deg, rgba(255, 250, 240, .1), rgba(255, 250, 240, .72) 48%, rgba(255, 250, 240, .88)),
        url('../assets/services-crescent-v7.webp') left center / cover no-repeat;
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: none;
}

.services-hub-grid-section::after {
    content: none;
}

.services-hub-grid-section .service-section-heading {
    padding: clamp(22px, 3vw, 38px);
    background: rgba(255, 250, 240, .72);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px 8px 28px 8px;
    box-shadow: 0 24px 70px rgba(41, 34, 25, .08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
}

.services-hub-grid {
    gap: clamp(26px, 4vw, 46px);
}

.services-hub-card,
.services-hub-card:nth-child(even) {
    position: relative;
    isolation: isolate;
    display: flex;
    grid-template-columns: none;
    justify-content: flex-end;
    align-items: stretch;
    min-height: clamp(500px, 54vw, 620px);
    overflow: hidden;
    background: #0a151a;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 8px 36px 8px 36px;
    box-shadow: 0 28px 78px rgba(31, 27, 22, .18);
    transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s ease, border-color .45s ease;
}

.services-hub-card:nth-child(even) {
    justify-content: flex-start;
    border-radius: 36px 8px 36px 8px;
}

.services-hub-card:hover,
.services-hub-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(235, 107, 53, .62);
    box-shadow: 0 38px 92px rgba(31, 27, 22, .25);
}

.services-hub-card-media,
.services-hub-card:nth-child(even) .services-hub-card-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    order: initial;
    min-height: 0;
    aspect-ratio: auto;
}

.services-hub-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 12, 16, .12), rgba(4, 12, 16, .02) 46%, rgba(4, 12, 16, .24)),
        linear-gradient(0deg, rgba(4, 12, 16, .54), transparent 54%);
    pointer-events: none;
}

.services-hub-card-media img {
    transform: scale(1.01);
    transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.services-hub-card:hover .services-hub-card-media img,
.services-hub-card:focus-within .services-hub-card-media img {
    transform: scale(1.055);
    filter: saturate(1.06) contrast(1.02);
}

.services-hub-card-media > span {
    z-index: 2;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-color: rgba(255, 176, 120, .44);
    background: rgba(5, 14, 19, .62);
    box-shadow: 0 10px 28px rgba(3, 9, 12, .22);
}

.services-hub-card > .services-hub-card-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(58%, 650px);
    margin: clamp(18px, 3vw, 34px);
    padding: clamp(30px, 4.5vw, 58px);
    background: rgba(255, 250, 240, .82);
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 6px 28px 6px 28px;
    box-shadow: 0 24px 60px rgba(4, 12, 16, .2);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    backdrop-filter: blur(20px) saturate(1.12);
}

.services-hub-card:nth-child(even) > .services-hub-card-copy {
    border-radius: 28px 6px 28px 6px;
}

.services-hub-card > .services-hub-card-copy > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #943b2c;
    font-weight: 750;
}

.services-hub-card > .services-hub-card-copy > a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    background: var(--service-koi);
    transform: scaleX(.18);
    transform-origin: left;
    transition: transform .35s ease;
}

.services-hub-card > .services-hub-card-copy > a:hover::after,
.services-hub-card > .services-hub-card-copy > a:focus-visible::after {
    transform: scaleX(1);
}

/* El método deja aire blanco en la izquierda y concentra la escena ilustrada
   en una columna redondeada a la derecha. */
.services-hub-method {
    color: var(--service-ink);
    background:
        radial-gradient(circle at 8% 16%, rgba(217, 120, 137, .09), transparent 22rem),
        var(--service-paper);
}

.services-hub-method::before,
.services-hub-method::after {
    content: none;
}

.services-hub-method-layout {
    display: grid;
    grid-template-columns: minmax(280px, .76fr) minmax(520px, 1.24fr);
    gap: clamp(34px, 6vw, 82px);
    align-items: center;
}

.services-hub-method-intro {
    padding: clamp(10px, 3vw, 36px) 0;
}

.services-hub-method-intro h2 {
    max-width: 560px;
    margin: 13px 0 22px;
    color: var(--service-ink);
    font: 650 clamp(2.2rem, 4.4vw, 4.2rem)/1.03 'Sora', sans-serif;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.services-hub-method-intro > p {
    max-width: 510px;
    margin: 0;
    color: #536065;
    line-height: 1.75;
}

.services-hub-method-actions,
.service-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.service-text-link--ink {
    color: #263137;
}

.service-text-link--ink:hover,
.service-text-link--ink:focus-visible {
    color: #8f392b;
}

.services-hub-method-scene {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    overflow: hidden;
    background: #071116 url('../assets/services-method-ink-v1.webp') 66% center / cover no-repeat;
    border: 1px solid rgba(20, 31, 36, .12);
    border-radius: 38px 8px 38px 8px;
    box-shadow: 0 32px 86px rgba(27, 24, 21, .18);
}

.services-hub-method-scene::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 12, 16, .96), rgba(4, 12, 16, .78) 58%, rgba(4, 12, 16, .38)),
        linear-gradient(0deg, rgba(4, 12, 16, .82), transparent 46%);
}

.services-hub-method-scene ol {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: clamp(28px, 4vw, 52px);
    background: transparent;
    border: 0;
    list-style: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.services-hub-method-scene li,
.services-hub-method-scene li + li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    background: rgba(5, 14, 19, .62);
    border: 1px solid rgba(255, 250, 240, .11);
    border-radius: 5px 18px 5px 18px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform .35s cubic-bezier(.2, .75, .2, 1), background-color .35s ease, border-color .35s ease;
}

.services-hub-method-scene li:hover {
    transform: translateX(-8px);
    background: rgba(9, 23, 29, .82);
    border-color: rgba(235, 107, 53, .48);
}

.services-hub-method-scene li > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #ffb078;
    border: 1px solid rgba(255, 176, 120, .42);
    border-radius: 50%;
}

.services-hub-method-scene h3 {
    margin: 0 0 5px;
    color: #fffaf0;
    font-size: 1.05rem;
}

.services-hub-method-scene p {
    margin: 0;
    color: rgba(255, 250, 240, .68);
    font-size: .88rem;
    line-height: 1.55;
}

/* CTA compacto: la rama y los pétalos aportan contexto sin competir con la
   conversión. Se comparte entre el hub y las landings individuales. */
.service-final-cta {
    padding-block: clamp(38px, 5vw, 72px);
    text-align: left;
    background: var(--service-paper);
}

.service-hub-page .service-final-cta::before,
.service-page:not(.service-hub-page) .service-final-cta::before {
    content: none;
}

.service-final-cta-card {
    position: relative;
    isolation: isolate;
    min-height: 320px;
    overflow: hidden;
    padding: clamp(40px, 6vw, 72px);
    background:
        linear-gradient(90deg, rgba(255, 250, 240, .96), rgba(255, 250, 240, .87) 62%, rgba(255, 250, 240, .72)),
        url('../assets/portfolio-sakura-branch-v4.webp') center / cover no-repeat,
        #eee5d8;
    border: 1px solid rgba(113, 91, 71, .16);
    border-radius: 8px 34px 8px 34px;
    box-shadow: 0 28px 72px rgba(44, 36, 28, .11);
}

.service-final-cta-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .45;
    background:
        url('../assets/sakura-petal-v4.webp') 8% 78% / 18px auto no-repeat,
        url('../assets/sakura-petal-v4.webp') 26% 18% / 13px auto no-repeat,
        url('../assets/sakura-petal-v4.webp') 76% 72% / 26px auto no-repeat,
        url('../assets/sakura-petal-v4.webp') 91% 23% / 17px auto no-repeat;
    animation: service-petal-breathe 7s ease-in-out infinite alternate;
    pointer-events: none;
}

.service-final-cta-card > * {
    position: relative;
    z-index: 1;
}

.service-final-cta-card h2 {
    max-width: 880px;
    margin: 13px 0 18px;
    font-size: clamp(2rem, 3.8vw, 3.55rem);
}

.service-final-cta-card p {
    max-width: 650px;
    margin: 0;
}

@keyframes service-petal-breathe {
    from { transform: translate3d(0, -3px, 0) rotate(-1deg); }
    to { transform: translate3d(8px, 7px, 0) rotate(2deg); }
}

/* Las páginas de detalle usan la fotografía del servicio como hilo ambiental.
   Los fondos de lectura siguen siendo sólidos de forma suficiente para no
   perjudicar contraste ni legibilidad. */
.service-page:not(.service-hub-page) main {
    background:
        linear-gradient(rgba(242, 237, 227, .9), rgba(242, 237, 227, .94)),
        var(--service-context-art) center 82svh / max(100vw, 1500px) auto no-repeat,
        var(--service-cream);
}

.service-page:not(.service-hub-page) :is(.service-overview, .service-deliverables, .service-faq) {
    background: rgba(255, 250, 240, .9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.service-page:not(.service-hub-page) .service-principles {
    background: rgba(238, 229, 216, .9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.service-page:not(.service-hub-page) :is(.service-notes, .service-other) {
    background: rgba(242, 237, 227, .92);
}

.service-fit,
.service-scope-list,
.service-principle-grid article {
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
}

.service-problem-grid,
.service-deliverables-grid {
    gap: 12px;
    border-block: 0;
}

.service-problem-grid article,
.service-problem-grid article + article,
.service-deliverables-grid article,
.service-deliverables-grid article + article {
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--service-line);
    border-radius: 5px 20px 5px 20px;
    transition: transform .32s ease, border-color .32s ease, background-color .32s ease;
}

.service-problem-grid article,
.service-problem-grid article + article {
    background: rgba(4, 12, 16, .48);
    border-color: rgba(255, 250, 240, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.service-deliverables-grid article,
.service-deliverables-grid article + article {
    background: rgba(255, 250, 240, .58);
}

.service-problem-grid article:hover,
.service-deliverables-grid article:hover,
.service-principle-grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(235, 107, 53, .46);
}

.service-process-detailed > li {
    transition: transform .32s ease, background-color .32s ease;
}

.service-process-detailed > li:hover {
    transform: translateX(6px);
    background: rgba(255, 250, 240, .035);
}

@media (max-width: 980px) {
    .services-hub-card > .services-hub-card-copy {
        width: min(64%, 610px);
    }

    .services-hub-method-layout {
        grid-template-columns: minmax(250px, .68fr) minmax(450px, 1.32fr);
        gap: 36px;
    }

    .services-hub-method-scene {
        min-height: 610px;
    }
}

@media (max-width: 860px) {
    .services-hub-card,
    .services-hub-card:nth-child(even) {
        display: flex;
        justify-content: stretch;
        align-items: flex-end;
        min-height: 610px;
    }

    .services-hub-card > .services-hub-card-copy {
        width: calc(100% - 32px);
        margin: 16px;
        background: rgba(255, 250, 240, .88);
    }

    .services-hub-method-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .services-hub-method-intro {
        max-width: 680px;
        padding-bottom: 0;
    }

    .services-hub-method-scene {
        min-height: 0;
        background-position: 72% center;
    }
}

@media (max-width: 720px) {
    .services-hub-hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-block: 124px 54px;
    }

    .services-hub-hero:hover .services-hub-hero-media img {
        transform: none;
    }

    .services-hub-grid-section {
        padding-block: 64px;
    }

    .services-hub-grid-section::before {
        background:
            linear-gradient(rgba(255, 250, 240, .64), rgba(255, 250, 240, .88)),
            url('../assets/services-crescent-v7.webp') 20% center / cover no-repeat;
    }

    .services-hub-grid-section .service-section-heading {
        margin-bottom: 30px;
        padding: 24px 20px;
        border-radius: 22px 6px 22px 6px;
    }

    .services-hub-card,
    .services-hub-card:nth-child(even) {
        min-height: 570px;
        border-radius: 6px 26px 6px 26px;
    }

    .services-hub-card > .services-hub-card-copy,
    .services-hub-card:nth-child(even) > .services-hub-card-copy {
        width: calc(100% - 24px);
        margin: 12px;
        padding: 27px 22px 30px;
        border-radius: 5px 20px 5px 20px;
    }

    .services-hub-card-media > span {
        top: 16px;
        left: 16px;
        width: 42px;
        height: 42px;
    }

    .services-hub-method-intro h2 {
        font-size: clamp(2.2rem, 10vw, 3.6rem);
    }

    .services-hub-method-scene {
        border-radius: 26px 6px 26px 6px;
    }

    .services-hub-method-scene ol {
        gap: 8px;
        padding: 18px;
    }

    .services-hub-method-scene li,
    .services-hub-method-scene li + li {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 13px;
        padding: 15px;
        border-radius: 4px 14px 4px 14px;
    }

    .services-hub-method-scene li > span {
        width: 36px;
        height: 36px;
    }

    .services-hub-method-scene li:hover {
        transform: none;
    }

    .service-final-cta {
        padding-block: 30px 52px;
    }

    .service-final-cta-card {
        min-height: 0;
        padding: 38px 24px 42px;
        border-radius: 6px 24px 6px 24px;
        background:
            linear-gradient(rgba(255, 250, 240, .91), rgba(255, 250, 240, .93)),
            url('../assets/portfolio-sakura-branch-v4.webp') 32% center / cover no-repeat,
            #eee5d8;
    }

    .service-final-cta-actions,
    .services-hub-method-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-page:not(.service-hub-page) main {
        background:
            linear-gradient(rgba(242, 237, 227, .94), rgba(242, 237, 227, .96)),
            var(--service-context-art) 64% 88svh / auto 900px no-repeat,
            var(--service-cream);
    }

    .service-problem-grid,
    .service-deliverables-grid {
        gap: 10px;
    }

    .service-problem-grid article,
    .service-problem-grid article + article,
    .service-deliverables-grid article,
    .service-deliverables-grid article + article {
        padding: 24px 20px;
        border: 1px solid var(--service-line);
    }

    .service-problem-grid article,
    .service-problem-grid article + article {
        border-color: rgba(255, 250, 240, .1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-hub-hero-media img,
    .services-hub-card,
    .services-hub-card-media img,
    .services-hub-card > .services-hub-card-copy > a::after,
    .services-hub-method-scene li,
    .service-problem-grid article,
    .service-deliverables-grid article,
    .service-principle-grid article,
    .service-process-detailed > li {
        transition: none;
    }

    .services-hub-card:hover,
    .services-hub-card:focus-within,
    .services-hub-card:hover .services-hub-card-media img,
    .services-hub-card:focus-within .services-hub-card-media img,
    .services-hub-method-scene li:hover,
    .service-problem-grid article:hover,
    .service-deliverables-grid article:hover,
    .service-principle-grid article:hover,
    .service-process-detailed > li:hover {
        transform: none;
    }

    .service-final-cta-card::after {
        animation: none;
    }
}

/* ================================================================
   V4 · CIERRE DE INTERACCIÓN Y ACCESIBILIDAD
   Esta capa sustituye los últimos efectos decorativos heredados.
   ================================================================ */

#servicios-disponibles,
#alcance,
#casos { scroll-margin-top: 118px; }

.service-method.service-section { padding-block: clamp(66px, 7vw, 96px); }
.service-method::before { opacity: .38; }
.service-process-detailed > li { padding-block: 25px; }

.services-hub-method-scene {
    min-height: clamp(510px, 47vw, 590px);
    background-position: 62% center;
}

.services-hub-method-scene::before {
    background:
        linear-gradient(90deg, rgba(4, 12, 16, .97), rgba(4, 12, 16, .79) 62%, rgba(4, 12, 16, .48)),
        linear-gradient(0deg, rgba(4, 12, 16, .82), transparent 48%);
}

.services-hub-method-scene ol {
    align-content: center;
    min-height: inherit;
    padding: clamp(24px, 3.2vw, 42px);
}

.services-hub-method-scene li,
.services-hub-method-scene li + li {
    padding-block: 15px;
    background: rgba(5, 14, 19, .56);
}

.services-hub-card:focus-within,
.service-project-card:focus-within,
.service-note-list article:focus-within,
.service-problem-grid article:focus-within,
.service-deliverables-grid article:focus-within,
.service-principle-grid article:focus-within {
    transform: translateY(-5px);
    border-color: rgba(235, 107, 53, .52);
}

.service-project-card:focus-within img,
.service-note-list article:focus-within img { transform: scale(1.035); }

.service-page :is(a, button, summary):focus-visible {
    outline: 3px solid rgba(235, 107, 53, .42);
    outline-offset: 4px;
}

.service-faq-list summary:focus-visible {
    border-radius: 4px;
    background: rgba(235, 107, 53, .055);
}

.service-final-cta-card::after { content: none; }

.service-petals {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.service-petals i {
    --petal-x: 8%;
    --petal-drift: 54px;
    --petal-size: 19px;
    --petal-duration: 10s;
    --petal-delay: -2s;
    position: absolute;
    top: -48px;
    left: var(--petal-x);
    width: var(--petal-size);
    aspect-ratio: 1;
    opacity: 0;
    background: url('../assets/sakura-petal-v4.webp') center / contain no-repeat;
    filter: drop-shadow(0 6px 8px rgba(91, 49, 40, .18));
    animation: service-petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
    animation-play-state: paused;
    will-change: auto;
}

.service-petals.is-in-view i {
    animation-play-state: running;
    will-change: transform, opacity;
}
.service-petals i:nth-child(2) { --petal-x: 19%; --petal-drift: -42px; --petal-size: 14px; --petal-duration: 12.4s; --petal-delay: -7s; }
.service-petals i:nth-child(3) { --petal-x: 31%; --petal-drift: 72px; --petal-size: 23px; --petal-duration: 13.1s; --petal-delay: -4s; }
.service-petals i:nth-child(4) { --petal-x: 45%; --petal-drift: -68px; --petal-size: 17px; --petal-duration: 9.7s; --petal-delay: -8s; }
.service-petals i:nth-child(5) { --petal-x: 58%; --petal-drift: 38px; --petal-size: 13px; --petal-duration: 11.2s; --petal-delay: -3s; }
.service-petals i:nth-child(6) { --petal-x: 69%; --petal-drift: -55px; --petal-size: 21px; --petal-duration: 13.8s; --petal-delay: -10s; }
.service-petals i:nth-child(7) { --petal-x: 79%; --petal-drift: 66px; --petal-size: 15px; --petal-duration: 10.8s; --petal-delay: -5s; }
.service-petals i:nth-child(8) { --petal-x: 88%; --petal-drift: -37px; --petal-size: 24px; --petal-duration: 14.2s; --petal-delay: -11s; }
.service-petals i:nth-child(9) { --petal-x: 96%; --petal-drift: -82px; --petal-size: 16px; --petal-duration: 12s; --petal-delay: -6s; }

@keyframes service-petal-fall {
    0% { opacity: 0; transform: translate3d(0, -24px, 0) rotate(-24deg); }
    12% { opacity: .64; }
    78% { opacity: .48; }
    100% { opacity: 0; transform: translate3d(var(--petal-drift), 430px, 0) rotate(330deg); }
}

@media (max-width: 860px) {
    .services-hub-method-scene { min-height: 0; }
    .services-hub-method-scene ol { min-height: 0; }
}

@media (max-width: 720px) {
    #servicios-disponibles,
    #alcance,
    #casos { scroll-margin-top: 92px; }

    .service-method::before { opacity: .27; }
    .service-petals i:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .service-petals i {
        animation: none;
        opacity: .22;
        transform: translate3d(0, calc(80px + var(--petal-size)), 0) rotate(20deg);
    }

    .service-petals i:nth-child(n + 5) { display: none; }

    .services-hub-card:focus-within,
    .service-project-card:focus-within,
    .service-note-list article:focus-within,
    .service-problem-grid article:focus-within,
    .service-deliverables-grid article:focus-within,
    .service-principle-grid article:focus-within { transform: none; }
}

/* ========================================================================
   SERVICIOS V5 · NARRATIVA DIFERENCIADA Y CONTINUIDAD VISUAL
   ======================================================================== */
.services-hub-grid-section {
    position: relative;
    overflow: clip;
    padding-top: clamp(62px, 7vw, 94px);
    background:
        linear-gradient(90deg, rgba(250, 246, 237, .96), rgba(250, 246, 237, .82) 48%, rgba(250, 246, 237, .95)),
        url('../assets/services-crescent-v7.webp') left center / min(42vw, 760px) auto no-repeat,
        #f7f1e7;
}

.services-hub-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    column-gap: clamp(30px, 7vw, 110px);
    align-items: end;
    min-height: 0;
    margin-bottom: clamp(34px, 5vw, 68px);
    padding: clamp(28px, 4vw, 54px);
    border-left: 2px solid #d35c37;
    background: rgba(255, 252, 246, .64);
    backdrop-filter: blur(12px);
}

.services-hub-heading .service-kicker { grid-column: 1 / -1; }
.services-hub-heading h2 { margin: 13px 0 0; }
.services-hub-heading h2 span { color: #9d402d; }
.services-hub-heading > p { max-width: 46ch; margin: 0; color: #596264; line-height: 1.7; }

.services-hub-heading__botanical {
    position: absolute;
    right: -2%;
    bottom: -26px;
    width: clamp(110px, 13vw, 210px);
    aspect-ratio: 1;
    opacity: .32;
    background: url('../assets/portfolio-sakura-branch-v4.webp') 76% center / cover no-repeat;
    border-radius: 50%;
    mask-image: radial-gradient(circle, #000 0 48%, transparent 72%);
    pointer-events: none;
}

.services-hub-card {
    transition: transform .65s cubic-bezier(.16, 1, .3, 1), box-shadow .65s ease, border-color .4s ease;
}

.services-hub-card:hover,
.services-hub-card:focus-within { transform: translateY(-8px); }

.services-hub-card-media::after {
    content: 'Explorar';
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    padding: 9px 13px;
    color: #fff7e9;
    font-size: .62rem;
    font-weight: 760;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 245, 226, .42);
    border-radius: 999px;
    background: rgba(3, 11, 14, .6);
    backdrop-filter: blur(9px);
    transform: translateY(8px);
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease;
}

.services-hub-card:hover .services-hub-card-media::after,
.services-hub-card:focus-within .services-hub-card-media::after { transform: none; opacity: 1; }

.services-hub-method {
    position: relative;
    margin-top: -1px;
    background: linear-gradient(180deg, #f7f1e7 0, #e9e0d2 18%, #081216 18.1%, #081216 100%);
}

.services-hub-method-layout { align-items: center; }

.services-hub-method-scene {
    min-height: clamp(570px, 49vw, 690px);
    overflow: hidden;
    border: 1px solid rgba(235, 125, 73, .38);
    border-radius: 7px 38px 7px 38px;
    background: url('../assets/services-method-studio-v1.webp') center / cover no-repeat;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .38);
}

.services-hub-method-scene::before {
    background: linear-gradient(90deg, rgba(3, 10, 13, .96), rgba(3, 10, 13, .8) 68%, rgba(3, 10, 13, .26));
}

.services-hub-method-scene ol { max-width: 760px; gap: 7px; }
.services-hub-method-scene li,
.services-hub-method-scene li + li {
    align-items: start;
    padding: 14px 16px;
    border: 1px solid rgba(255, 244, 224, .08);
    background: rgba(4, 13, 17, .68);
    backdrop-filter: blur(9px);
}
.services-hub-method-scene li:hover { transform: translateX(7px); border-color: rgba(234, 126, 77, .52); background: rgba(12, 24, 27, .9); }
.services-hub-method-scene h3 { font-size: clamp(.9rem, 1vw, 1.06rem); }
.services-hub-method-scene p { max-width: 62ch; font-size: .78rem; line-height: 1.48; }

.service-faq { position: relative; background: linear-gradient(180deg, #f1eadf, #fbf7ef); }
.service-faq-list details { transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.service-faq-list details:hover { transform: translateX(5px); border-color: rgba(207, 86, 48, .34); background: rgba(255, 252, 246, .86); }

.service-final-cta { margin-top: -1px; background: linear-gradient(180deg, #fbf7ef, #eee5d8); }
.service-final-cta-card {
    background:
        linear-gradient(90deg, rgba(255, 250, 240, .95), rgba(255, 250, 240, .83)),
        url('../assets/portfolio-sakura-branch-v4.webp') right 42% / cover no-repeat,
        #f2eadc;
}

/* Las secciones individuales dejan de repetir dos parrillas idénticas. */
.service-section-heading > p {
    max-width: 66ch;
    margin: 18px 0 0;
    color: inherit;
    opacity: .72;
    font-size: 1rem;
    line-height: 1.72;
}

.service-diagnostic {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #071116 0%, #0d1d21 58%, #111a1b 100%);
}

.service-diagnostic::after {
    content: '';
    position: absolute;
    right: -7%;
    bottom: -12%;
    width: min(43vw, 700px);
    aspect-ratio: 1.2;
    opacity: .2;
    pointer-events: none;
    background: var(--service-context-art) center / cover no-repeat;
    mask-image: radial-gradient(ellipse, #000, transparent 70%);
}

.service-diagnostic-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: clamp(38px, 5vw, 70px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 245, 226, .15);
}

.service-diagnostic-list li {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 8px;
    gap: clamp(17px, 2.5vw, 32px);
    min-height: 210px;
    padding: clamp(28px, 4vw, 48px);
    color: #f6eee1;
    border-right: 1px solid rgba(255, 245, 226, .12);
    border-bottom: 1px solid rgba(255, 245, 226, .12);
    transition: background .4s ease;
}

.service-diagnostic-list li:nth-child(2n) { border-right: 0; }
.service-diagnostic-list li:hover { background: rgba(235, 112, 61, .08); }
.service-diagnostic-list h3 { margin: 0 0 12px; font-size: clamp(1.18rem, 1.6vw, 1.5rem); }
.service-diagnostic-list p { margin: 0; color: #aebabb; line-height: 1.68; }
.service-diagnostic-list i { width: 3px; height: 40%; background: #db6c43; transform: scaleY(.14); transform-origin: top; transition: transform .45s ease; }
.service-diagnostic-list li:hover i { transform: scaleY(1); }

.service-deliverables { overflow: hidden; background: linear-gradient(180deg, #f3ede3, #faf6ee); }

.service-deliverable-ledger {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(36px, 5vw, 66px);
    border-block: 1px solid var(--service-line);
}

.service-deliverable-ledger article {
    position: relative;
    min-height: 330px;
    padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 34px);
    border-right: 1px solid var(--service-line);
    background: rgba(255, 253, 248, .48);
    transition: background .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.service-deliverable-ledger article:last-child { border-right: 0; }
.service-deliverable-ledger article:hover { z-index: 1; transform: translateY(-8px); background: #fffaf1; box-shadow: 0 24px 64px rgba(71, 47, 32, .13); }
.service-deliverable-ledger h3 { margin: 70px 0 14px; font-size: clamp(1.15rem, 1.55vw, 1.48rem); }
.service-deliverable-ledger p { margin: 0; color: #596466; line-height: 1.7; }

/* Cada servicio recibe una cadencia visual propia. */
body[data-service='webs'] .service-deliverable-ledger article:nth-child(odd) { background: rgba(241, 230, 213, .7); }
body[data-service='tiendas'] .service-deliverable-ledger { border-radius: 36px 6px 36px 6px; overflow: hidden; border: 1px solid rgba(164, 94, 100, .24); }
body[data-service='tiendas'] .service-deliverable-ledger article:nth-child(even) { background: rgba(238, 211, 216, .28); }
body[data-service='apps'] .service-deliverable-ledger { gap: 13px; border: 0; }
body[data-service='apps'] .service-deliverable-ledger article { min-height: 300px; border: 1px solid rgba(26, 50, 55, .16); border-radius: 5px 24px 5px 24px; background: linear-gradient(155deg, #fffaf0, #e4ece8); }

.service-method { position: relative; overflow: hidden; }
.service-method::after { content: ''; position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(180deg, rgba(248, 245, 238, .16), transparent); pointer-events: none; }
body[data-service='webs'] .service-method { --service-method-tone: rgba(206, 93, 50, .28); }
body[data-service='tiendas'] .service-method { --service-method-tone: rgba(204, 123, 135, .24); }
body[data-service='apps'] .service-method { --service-method-tone: rgba(53, 117, 123, .26); }
.service-process-detailed > li:hover { background: linear-gradient(90deg, var(--service-method-tone), rgba(255,255,255,.025)); }

@media (max-width: 980px) {
    .services-hub-heading { grid-template-columns: 1fr; }
    .services-hub-heading > p { margin-top: 18px; }
    .service-deliverable-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-deliverable-ledger article:nth-child(2) { border-right: 0; }
    .service-deliverable-ledger article { min-height: 280px; border-bottom: 1px solid var(--service-line); }
}

@media (max-width: 680px) {
    .services-hub-heading { padding: 26px 20px; }
    .services-hub-heading h2 br { display: none; }
    .services-hub-card-media::after { opacity: 1; transform: none; }
    .services-hub-method-scene { min-height: 0; background-image: url('../assets/services-method-studio-mobile-v1.webp'); }
    .services-hub-method-scene li,
    .services-hub-method-scene li + li { padding: 14px; }
    .service-diagnostic-list,
    .service-deliverable-ledger { grid-template-columns: 1fr; }
    .service-diagnostic-list li { min-height: 0; grid-template-columns: 44px minmax(0, 1fr) 5px; padding: 26px 18px; border-right: 0; }
    .service-deliverable-ledger article { min-height: 0; padding: 27px 21px; border-right: 0; }
    .service-deliverable-ledger h3 { margin-top: 42px; }
    body[data-service='apps'] .service-deliverable-ledger { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .services-hub-card,
    .services-hub-card-media::after,
    .services-hub-method-scene li,
    .service-faq-list details,
    .service-diagnostic-list i,
    .service-deliverable-ledger article { transition: none; }
}