.service-page { background: #07110f; color: #eef8f4; }
.service-page .site-header { position: absolute; }
.service-page .site-header nav a { color: #9eb3ab; }
.service-page .site-header nav a:hover { color: #fff; }

.service-hero { position: relative; min-height: 100svh; padding: 150px clamp(24px, 6vw, 96px) 80px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); align-items: center; gap: clamp(50px, 8vw, 130px); overflow: hidden; }
.service-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(95,255,206,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(95,255,206,.15) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.service-grid::after { content: ""; position: absolute; width: 54vw; height: 54vw; right: -22vw; top: -20vw; border: 1px solid rgba(54,241,189,.22); border-radius: 50%; box-shadow: 0 0 120px rgba(54,241,189,.08); }
.service-hero-copy, .service-signal { position: relative; z-index: 1; }
.service-hero h1 { max-width: 850px; margin: 22px 0 28px; font-size: clamp(3.2rem, 6.4vw, 7.4rem); line-height: .94; letter-spacing: -.065em; }
.service-lead { max-width: 670px; color: #a9bbb4; font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.65; }
.service-signal { border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.service-signal > p { margin: 0; padding: 17px 0; color: #56e3ba; font: 500 .68rem "DM Mono", monospace; letter-spacing: .12em; }
.service-signal ol { margin: 0; padding: 0; list-style: none; }
.service-signal li { min-height: 88px; display: grid; grid-template-columns: 45px 1fr auto; gap: 18px; align-items: center; border-top: 1px solid rgba(255,255,255,.09); }
.service-signal li span { color: #6c8179; font: .7rem "DM Mono", monospace; }
.service-signal li strong { font-size: 1rem; font-weight: 600; }
.service-signal li em { color: #8ea49b; font: normal .62rem "DM Mono", monospace; text-transform: uppercase; }
.service-signal li:nth-child(-n+2) em, .service-signal li:last-child em { color: #56e3ba; }

.service-intent { background: #edf4f0; color: #0b1714; }
.service-intent > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr); gap: clamp(50px, 9vw, 150px); align-items: start; }
.service-intent h2, .scope-heading h2, .method-intro h2, .service-fit h2, .contact-intro h2 { margin: 0; font-size: clamp(2.6rem, 5.2vw, 6rem); line-height: .98; letter-spacing: -.055em; }
.service-intent h2 span, .scope-heading h2 span, .method-intro h2 span, .service-fit h2 span, .contact-intro h2 span { color: #168f72; }
.intent-copy { padding-top: 8px; color: #455a52; font-size: 1.02rem; line-height: 1.75; }
.intent-copy p { margin: 0 0 24px; }

.service-scope { background: #0a1714; }
.scope-heading { max-width: 980px; margin-bottom: 80px; }
.scope-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.scope-lines li { min-height: 150px; padding: 30px 0; display: grid; grid-template-columns: 70px minmax(0,1fr) 190px; gap: clamp(24px, 4vw, 70px); align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); }
.scope-lines > li > span { color: #56e3ba; font: .7rem "DM Mono", monospace; }
.scope-lines h3 { margin: 0 0 9px; font-size: clamp(1.35rem, 2vw, 2rem); }
.scope-lines p { max-width: 720px; margin: 0; color: #91a59d; line-height: 1.65; }
.scope-lines em { color: #6f887e; font: normal .65rem "DM Mono", monospace; letter-spacing: .07em; text-align: right; }

.service-method { display: grid; grid-template-columns: minmax(300px, .66fr) minmax(0, 1.15fr); gap: clamp(60px, 10vw, 160px); background: #e5eee9; color: #0c1815; }
.method-intro > p:last-child { max-width: 510px; margin-top: 30px; color: #53665f; line-height: 1.7; }
.method-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(12,45,36,.18); }
.method-steps li { min-height: 135px; padding: 28px 0; display: grid; grid-template-columns: 55px 180px 1fr; gap: 22px; align-items: baseline; border-bottom: 1px solid rgba(12,45,36,.18); }
.method-steps b { color: #168f72; font: 500 .7rem "DM Mono", monospace; }
.method-steps h3 { margin: 0; font-size: 1.35rem; }
.method-steps p { margin: 0; color: #52655e; line-height: 1.6; }

.service-fit { background: #f6faf8; color: #0c1815; }
.fit-columns { margin-top: 80px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(12,45,36,.18); border-top: 1px solid rgba(12,45,36,.18); border-bottom: 1px solid rgba(12,45,36,.18); }
.fit-columns > div { padding: 42px clamp(24px, 4vw, 60px); background: #f6faf8; }
.fit-columns h3 { margin: 0 0 28px; font-size: 1.4rem; }
.fit-columns ul { margin: 0; padding: 0; list-style: none; }
.fit-columns li { position: relative; padding: 14px 0 14px 25px; color: #4a5f57; line-height: 1.55; border-top: 1px solid rgba(12,45,36,.11); }
.fit-columns li::before { content: ""; position: absolute; left: 1px; top: 24px; width: 6px; height: 6px; border: 1px solid #168f72; border-radius: 50%; }

.service-faq { display: grid; grid-template-columns: minmax(280px,.62fr) minmax(0,1.18fr); align-items: start; gap: clamp(60px,10vw,160px); background: #0a1714; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { margin: 28px 0 0; font-size: clamp(2.8rem,5.2vw,6rem); line-height: .96; letter-spacing: -.055em; }
.faq-lines { margin: 0; border-top: 1px solid rgba(255,255,255,.18); counter-reset: faq; }
.faq-lines > div { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 20px; padding: 30px 0 32px; border-bottom: 1px solid rgba(255,255,255,.14); counter-increment: faq; }
.faq-lines > div::before { content: "0" counter(faq); grid-column: 1; grid-row: 1 / span 2; padding-top: 4px; color: #35e5b7; font: 500 .67rem var(--mono); letter-spacing: .08em; }
.faq-lines dt { grid-column: 2; color: #eff8f5; font-size: clamp(1.08rem,1.45vw,1.35rem); font-weight: 650; line-height: 1.35; }
.faq-lines dd { grid-column: 2; max-width: 720px; margin: 12px 0 0; color: #91a59d; font-size: .98rem; line-height: 1.7; }

.seo-contact { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(480px, .78fr); gap: clamp(60px, 10vw, 160px); background: #07110f; }
.contact-intro > p:not(.section-index):not(.direct-contact) { max-width: 570px; margin-top: 28px; color: #96aaa2; line-height: 1.7; }
.direct-contact { margin-top: 34px; color: #6f887e; font-size: .9rem; }
.direct-contact a { color: #56e3ba; }
.seo-lead-form { display: grid; gap: 22px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.seo-lead-form label { display: grid; gap: 9px; color: #b3c2bc; font-size: .78rem; }
.seo-lead-form label small { color: #6f887e; }
.seo-lead-form input, .seo-lead-form select, .seo-lead-form textarea { width: 100%; min-height: 50px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 0; background: rgba(255,255,255,.04); color: #eff8f5; font: inherit; }
.seo-lead-form select option { color: #10201b; }
.seo-lead-form textarea { resize: vertical; line-height: 1.5; }
.seo-lead-form input:focus, .seo-lead-form select:focus, .seo-lead-form textarea:focus { outline: 2px solid rgba(54,241,189,.55); outline-offset: 2px; border-color: #36f1bd; }
.seo-lead-form .consent { grid-template-columns: 20px 1fr; align-items: start; gap: 12px; color: #8fa39b; line-height: 1.5; }
.seo-lead-form .consent input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: #36f1bd; }
.seo-lead-form .consent a { color: #b8ccc4; text-decoration: underline; }
.seo-lead-form .button { justify-self: start; }
.honeypot { position: absolute !important; left: -9999px !important; }
.form-status { min-height: 24px; margin: -8px 0 0; color: #96aaa2; font-size: .8rem; line-height: 1.5; }
.form-status.is-success { color: #56e3ba; }
.form-status.is-error { color: #ff9187; }
.service-reveal { animation: service-enter .7s cubic-bezier(.2,.7,.2,1) both; }
.service-reveal:nth-child(2) { animation-delay: .08s; }.service-reveal:nth-child(3) { animation-delay: .16s; }.service-reveal:nth-child(4) { animation-delay: .24s; }
@keyframes service-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .service-hero { grid-template-columns: 1fr; padding-top: 145px; }
  .service-signal { max-width: 680px; }
  .service-intent > div, .service-method, .service-faq, .seo-contact { grid-template-columns: 1fr; }
  .service-method, .service-faq, .seo-contact { gap: 70px; }
  .faq-intro { position: static; }
}
@media (max-width: 700px) {
  .service-page .site-header nav { display: none; }
  .service-hero { min-height: auto; padding: 125px 22px 70px; gap: 55px; }
  .service-hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .scope-lines li { grid-template-columns: 42px 1fr; gap: 14px; }
  .scope-lines em { grid-column: 2; text-align: left; }
  .method-steps li { grid-template-columns: 42px 1fr; }
  .faq-lines > div { grid-template-columns: 34px minmax(0,1fr); column-gap: 14px; padding: 25px 0 27px; }
  .faq-lines dd { font-size: .94rem; line-height: 1.65; }
  .method-steps p { grid-column: 2; }
  .fit-columns, .form-pair { grid-template-columns: 1fr; }
  .fit-columns { gap: 0; }
  .fit-columns > div + div { border-top: 1px solid rgba(12,45,36,.18); }
  .seo-contact { grid-template-columns: 1fr; }
  .seo-service-page .hero h1 { font-size: clamp(42px, 11.8vw, 64px); line-height: .94; }
}
@media (prefers-reduced-motion: reduce) { .service-reveal { animation: none; } }

/* La página SEO reutiliza la composición principal de NextQA.
   Estas reglas solo adaptan el formulario entrante al cierre de la landing. */
.seo-service-page .site-header { position: absolute; }
.seo-contact-aligned { min-height: 920px; align-items: start; padding-top: clamp(110px, 10vw, 170px); padding-bottom: clamp(90px, 9vw, 150px); }
.seo-contact-heading, .seo-contact-aligned .contact-copy { position: relative; z-index: 2; }
.seo-contact-heading > p:not(.section-index) { max-width: 620px; margin: 28px 0 24px; color: #9fb0aa; font-size: 18px; line-height: 1.7; }
.seo-contact-heading .contact-email { display: inline-block; margin-top: 8px; }
.seo-contact-aligned .contact-copy { width: 100%; }
.seo-contact-aligned .seo-lead-form { max-width: 760px; margin-left: auto; }

@media (max-width: 980px) {
  .seo-contact-aligned { min-height: auto; gap: 70px; }
  .seo-contact-aligned .seo-lead-form { max-width: none; margin-left: 0; }
}