/* CNI - Imagen de producto a todo el ancho para las páginas de servicio (BORRADOR)
   Hereda los tokens de cni-servicio.css. */
.svc-shot { position: relative; margin: 0; background: var(--bg-dark); overflow: hidden; }
.svc-shot img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); }
.svc-shot figcaption { position: relative; margin: -34px auto 0; padding: 0 20px 8px; max-width: 760px; text-align: center; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); }
.svc-shot figcaption strong { display: block; color: var(--text-white); font-size: 1.05rem; margin-bottom: 2px; }
@media (min-width: 961px) { .svc-shot + .content-section { padding-top: 40px; } }
@media (max-width: 640px) { .svc-shot img { max-height: none; } .svc-shot figcaption { margin-top: -18px; } }

/* ---------- Escenario: imagen grande fija que cambia al leer (páginas de servicio) ---------- */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/fira-sans-800-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/fira-sans-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.svc-stage { --svc-display: "Fira Sans", var(--font-sans); --svc-ease: cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: clip; padding: 96px 0 56px; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
  background: radial-gradient(52% 60% at 78% 50%, rgba(138,52,82, 0.46), transparent 72%), radial-gradient(44% 40% at 6% 86%, rgba(230,207,162, 0.14), transparent 72%), radial-gradient(40% 40% at 48% 10%, rgba(138,52,82, 0.3), transparent 70%), var(--bg-dark-alt); }
.svc-stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: start; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.svc-stage-step { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.svc-stage-step:first-child { min-height: 72vh; }
.svc-stage-step:last-child { min-height: 90vh; }
.svc-stage-step h2, .svc-stage-step h3 { font-family: var(--svc-display); font-weight: 800; letter-spacing: -0.01em; color: var(--text-white); text-wrap: balance; }
.svc-stage-step h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; margin-bottom: 20px; }
.svc-stage-step h3 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; margin-bottom: 18px; }
.svc-stage-step p { font-size: 1.15rem; line-height: 1.7; color: #D9C9B8; max-width: 54ch; margin-bottom: 14px; }
.svc-stage-step a.inline-link { color: var(--orange-primary); text-decoration: underline; text-underline-offset: 3px; }
.svc-stage-n { width: 58px; height: 64px; display: grid; place-items: center; margin-bottom: 20px; background: var(--orange-primary); color: var(--on-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-family: var(--svc-display); font-weight: 800; font-size: 1.6rem; }
.svc-stage-cta { margin-top: 22px; }
.svc-stage .btn { transition: transform 160ms ease-out, background 0.2s ease, border-color 0.2s ease; }
.svc-stage .btn:active { transform: scale(0.97); }
.svc-stage-inline { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 28px; border-radius: 28px; box-shadow: 0 28px 50px -20px rgba(0, 0, 0, 0.8); }
.svc-stage-side { display: none; }
.svc-stage-note { max-width: 1140px; margin: 8px auto 0; padding: 0 20px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
@media (min-width: 961px) {
  .svc-stage { background-attachment: fixed; }
  .svc-js .svc-stage-side { display: grid; justify-items: center; gap: 22px; position: sticky; top: clamp(70px, calc(50vh - 330px), 150px); }
  .svc-js .svc-stage-frame { position: relative; display: block; width: 480px; aspect-ratio: 1122 / 1402; background: #1E0811; border-radius: 28px; box-shadow: 0 44px 80px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .svc-js .svc-stage-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; opacity: 0; filter: blur(4px); transform: translateY(26px) scale(0.955) rotate(1.4deg); transition: opacity 0.25s ease-out, filter 0.25s ease-out, transform 0.6s var(--svc-ease); }
  .svc-js .svc-stage-frame img.past { transform: translateY(-26px) scale(0.955) rotate(-1.4deg); }
  .svc-js .svc-stage-frame img.on { opacity: 1; filter: none; transform: none; transition: opacity 0.55s ease-out 0.08s, filter 0.55s ease-out 0.08s, transform 0.7s var(--svc-ease) 0.08s; }
  .svc-js .svc-stage-inline { display: none; }
  .svc-js .svc-stage-step > :not(.svc-stage-cta):not(.svc-stage-inline) { opacity: 0.6; transition: opacity 0.3s ease-out; }
  .svc-js .svc-stage-step.on > :not(.svc-stage-cta):not(.svc-stage-inline) { opacity: 1; }
}
.svc-stage-dots { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }
.svc-stage-dots li { width: 14px; height: 16px; background: rgba(255, 255, 255, 0.2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background 0.25s ease-out, transform 0.25s var(--svc-ease); }
.svc-stage-dots li.on { background: var(--orange-primary); transform: scale(1.3); }
@keyframes svc-rise { from { opacity: 0; transform: translateY(36px) scale(0.94) rotate(1.2deg); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
    .svc-stage-inline { animation: svc-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@media (max-width: 960px) {
  .svc-stage { padding: 56px 0 40px; }
  .svc-stage-grid { grid-template-columns: 1fr; gap: 0; }
  .svc-stage-step, .svc-stage-step:first-child, .svc-stage-step:last-child { min-height: 0; padding: 28px 0 44px; }
  .svc-stage-step p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-js .svc-stage-frame img, .svc-js .svc-stage-frame img.past, .svc-js .svc-stage-frame img.on { transition: opacity 0.2s linear; transform: none; filter: none; }
  .svc-stage-dots li.on { transform: none; }
  .svc-stage .btn:active { transform: none; }
}

/* ---------- Cabecera con cartel y geometría de la marca (páginas de servicio) ---------- */
:root { --svc-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --svc-panal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ff6600' stroke-opacity='.11'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23ff6600' stroke-opacity='.11'/%3E%3C/svg%3E"); }
.svc-hero2 .svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.svc-hero2 .svc-hero-text .answer-box { max-width: 640px; }
.svc-hero-poster { margin: 0; }
.svc-hero-poster img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 40px 70px -26px rgba(0, 0, 0, 0.85); transform: rotate(1.6deg); }
@keyframes svc-hero-in { from { opacity: 0; transform: translateY(28px) scale(0.96) rotate(3deg); } to { opacity: 1; transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: no-preference) { .svc-hero-poster img { animation: svc-hero-in 0.8s var(--svc-ease, cubic-bezier(0.23, 1, 0.32, 1)) both; } }
@media (max-width: 960px) { .svc-hero2 .svc-hero-grid { grid-template-columns: 1fr; gap: 40px; } .svc-hero-poster { max-width: 420px; margin: 0 auto; } }
.svc-hex .check-list li { padding-left: 34px; }
.svc-hex .check-list li::before { content: ""; width: 18px; height: 20px; top: 3px; background: var(--gold-accent); clip-path: var(--svc-hex); }
.svc-hex .limit-list li::before { background: #7A5260; }
.svc-hex .step-list li { padding-left: 76px; }
.svc-hex .step-list li::before { content: counter(paso); left: 20px; top: 16px; width: 36px; height: 40px; display: grid; place-items: center; background: var(--orange-primary); color: var(--on-accent); clip-path: var(--svc-hex); font-family: var(--svc-display, "Fira Sans", var(--font-sans)); font-weight: 800; font-size: 1rem; }
.svc-hex .cta-final { background: var(--bg-dark-alt) var(--svc-panal); }
.svc-hex .btn { transition: transform 160ms ease-out, background 0.2s ease, border-color 0.2s ease; }
.svc-hex .btn:active { transform: scale(0.97); }
.svc-hex .faq-item, .svc-hex .related-card, .svc-hex .option-card { transition: border-color 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .svc-hex .btn:active { transform: none; } }