/* Los saltos a anclas (#precios) no quedan bajo el navbar fijo */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (max-width: 900px) { html { scroll-padding-top: 110px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── PÁGINAS DE SERVICIO ──────────────────
   Mobile-first: estilos base para celular,
   media queries amplían a tablet y desktop. */

.page-servicio {
    background-color: var(--bg-light);
    color: var(--text-light);
}

.srv-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

.srv-section {
    padding: 56px 0;
}

.srv-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.srv-h2 {
    font-size: clamp(26px, 6vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.srv-lead {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.75;
    max-width: 640px;
    margin: 0;
}

/* Breadcrumb */
.srv-breadcrumb {
    font-size: 13px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.srv-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.srv-breadcrumb li + li::before {
    content: '/';
    margin-right: 6px;
}

.srv-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.srv-breadcrumb a:hover { text-decoration: underline; }

/* Hero (navbar en móvil ocupa 2 filas → más espacio arriba) */
.srv-hero {
    padding: 150px 0 56px;
}

.srv-hero h1 {
    font-size: clamp(34px, 9vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 900;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.srv-hero h1 span { color: var(--primary-dark); }

.srv-hero .srv-lead { font-size: 17px; }

.srv-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.srv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.srv-btn i { font-size: 20px; }

.srv-btn-primary {
    background-color: var(--primary-dark);
    color: #fff;
}

.srv-btn-primary:hover { transform: translateY(-2px); }

.srv-btn-ghost {
    border: 1.5px solid currentColor;
    color: var(--text-light);
}

.srv-btn-ghost:hover {
    background-color: var(--text-light);
    color: var(--bg-light);
}

.srv-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.srv-highlights li {
    padding: 14px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.1);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.srv-highlights i {
    color: var(--primary-dark);
    font-size: 20px;
    flex: none;
}

/* Grid de características */
.srv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
}

.srv-card {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.srv-card:hover {
    border-color: var(--primary-dark);
    transform: translateY(-3px);
}

.srv-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: rgba(7, 86, 242, 0.12);
    color: var(--primary-dark);
    font-size: 22px;
    margin-bottom: 14px;
}

.srv-card h3 {
    font-size: 18px;
    margin: 0 0 6px;
}

.srv-card p {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.34;
    margin: 0;
}

/* Ideal para */
.srv-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.srv-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.srv-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.08);
    font-size: 15px;
    line-height: 1.5;
}

.srv-checklist i {
    color: var(--primary-dark);
    font-size: 22px;
    flex: none;
}

/* Proceso */
.srv-steps {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    counter-reset: paso;
}

.srv-steps li {
    counter-increment: paso;
    padding: 20px;
    border-radius: 14px;
    background-color: rgba(128, 128, 128, 0.08);
}

.srv-steps li::before {
    content: counter(paso, decimal-leading-zero);
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.srv-steps h3 { font-size: 17px; margin: 0 0 6px; }
.srv-steps p { font-size: 14px; line-height: 1.55; opacity: 0.72; margin: 0; }

/* Proceso con fechas al costado */
.srv-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.srv-timeline li {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 16px;
    position: relative;
    padding-bottom: 28px;
}

/* línea vertical que une los pasos */
.srv-timeline li::before {
    content: '';
    position: absolute;
    left: 91px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background-color: rgba(128, 128, 128, 0.25);
}

.srv-timeline li:last-child::before { display: none; }

.srv-timeline-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    text-align: right;
    padding-top: 2px;
}

.srv-timeline-body {
    position: relative;
    padding-left: 24px;
}

/* punto sobre la línea */
.srv-timeline-body::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--primary-dark);
    box-shadow: 0 0 0 4px rgba(7, 86, 242, 0.2);
}

.srv-timeline-num {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.5;
}

.srv-timeline h3 { font-size: 19px; margin: 2px 0 6px; }
.srv-timeline p { font-size: 15px; line-height: 1.55; opacity: 0.72; margin: 0; }

/* FAQ (mismo diseño que el home) */
.srv-faq-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.srv-faq-head h2 {
    font-size: clamp(38px, 9vw, 64px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.srv-faq-head p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    opacity: 0.65;
    margin: 0 0 24px;
    max-width: 520px;
}

.srv-faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background-color: var(--text-light);
    color: var(--bg-light);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.srv-faq-btn:hover { transform: translateY(-2px); }

.srv-faq details {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.srv-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 24px 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.srv-faq summary::-webkit-details-marker { display: none; }
.srv-faq summary:hover { opacity: 0.7; }

.srv-faq summary i {
    font-size: 20px;
    flex: none;
    transition: transform 0.25s ease;
}

.srv-faq details[open] summary i { transform: rotate(180deg); }

.srv-faq details p {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.65;
    opacity: 0.75;
}

/* CTA final */
.srv-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    padding: 32px 20px;
    background: #090c13 url('img/nadvok-banner-space-bg.png') center / cover no-repeat;
    color: #fff;
    text-align: center;
}

.srv-cta::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 9, 15, 0.42), rgba(6, 9, 15, 0.08));
}

.srv-cta-content { position: relative; z-index: 3; max-width: 650px; margin: 0 auto; }
.srv-cta .srv-h2 { color: #fff; }
.srv-cta p { opacity: 0.85; margin: 0 auto 24px; max-width: 520px; line-height: 1.6; }

.srv-cta .srv-btn {
    background-color: #fff;
    color: #000;
    width: 100%;
}

.srv-cta-alien {
    display: none;
    position: absolute;
    z-index: 2;
    width: clamp(250px, 27vw, 370px);
    height: auto;
    right: clamp(-45px, -2.5vw, -16px);
    bottom: clamp(-105px, -7vw, -65px);
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

/* Otros servicios (enlazado interno) */
.srv-others {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
}

.srv-others a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    color: var(--text-light);
    text-decoration: none;
    font-weight: 700;
    transition: border-color 0.2s ease;
}

.srv-others a:hover { border-color: var(--primary-dark); }
.srv-others a i:first-child { font-size: 22px; color: var(--primary-dark); }
.srv-others a i:last-child { margin-left: auto; font-size: 20px; }

/* Link activo del mega menú */
.mega-item[aria-current="page"] .mega-icon {
    background-color: var(--primary-dark);
    color: #fff;
}

/* Carrusel de clientes (en el home está oculto; aquí se muestra) */
.page-servicio .clients {
    display: block;
    background: rgba(128, 128, 128, 0.035);
    padding: 36px 0 40px;
}

.page-servicio .clients-label {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    margin-bottom: 24px;
}

/* Precios */
.srv-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
    align-items: stretch;
}

.srv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    border-radius: 16px;
    border: 1px solid rgba(128, 128, 128, 0.25);
}

.srv-plan.is-featured {
    border: 2px solid var(--primary-dark);
    background-color: rgba(7, 86, 242, 0.06);
}

.srv-plan-badge {
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--primary-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.srv-plan h3 { font-size: 20px; margin: 0 0 6px; }

.srv-plan-desc {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
    margin: 0 0 18px;
}

.srv-plan-price {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    line-height: 1;
}

.srv-plan-price small {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.6;
    margin-bottom: 6px;
}

.srv-plan ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 10px;
    flex: 1;
}

.srv-plan li {
    display: flex;
    gap: 8px;
    font-size: 15px;
    line-height: 1.4;
}

.srv-plan li i { color: var(--primary-dark); font-size: 20px; flex: none; }
.srv-plan .srv-btn { width: 100%; }

.srv-plan-price.is-quote { font-size: 30px; }

/* Proyectos */
.srv-projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}

.srv-project {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.2);
    color: var(--text-light);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.srv-project:hover { border-color: var(--primary-dark); transform: translateY(-3px); }

.srv-project-img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: rgba(128, 128, 128, 0.1);
}

.srv-project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.srv-project:hover .srv-project-img img { transform: scale(1.04); }

.srv-project-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    flex: 1;
}

.srv-project-body small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--primary-dark);
}

.srv-project-body strong { font-size: 22px; letter-spacing: -0.01em; }
.srv-project-body > span { font-size: 14px; line-height: 1.5; opacity: 0.7; flex: 1; }

.srv-project-body em {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

@media (min-width: 600px) {
    .srv-projects { grid-template-columns: repeat(2, 1fr); }
    .page-servicio .clients-track img { height: 76px; width: 180px; }
}

@media (min-width: 760px) {
    .srv-cta-alien { display: block; }
}

@media (min-width: 901px) {
    .srv-pricing { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .srv-plan { padding: 32px 28px; }
    .srv-plan.is-featured { transform: translateY(-8px); }
    .srv-plan.is-featured:hover { transform: translateY(-14px); }
    .srv-projects { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}


/* ── PÁGINA /proyectos ─────────────────── */
.srv-hero-compact { padding-bottom: 40px; }

.srv-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 24px;
    padding: 0 16px 4px;
}

.srv-filters::-webkit-scrollbar { display: none; }

.srv-filter {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.srv-filter span {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(128, 128, 128, 0.15);
}

.srv-filter:hover { border-color: var(--primary-dark); }

.srv-filter.is-active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.srv-filter.is-active span { background-color: rgba(255, 255, 255, 0.2); }

.srv-projects-full { margin-top: 0; }
.srv-project[hidden] { display: none; }
.srv-projects-full .srv-project-body strong { font-size: 24px; }

@media (min-width: 600px) {
    .srv-filters { flex-wrap: wrap; overflow: visible; margin: 0 0 32px; padding: 0; }
    /* el primero (más reciente) ocupa todo el ancho */
    .srv-projects-full:not(.is-filtered) .srv-project.is-featured { grid-column: 1 / -1; }
    .srv-projects-full:not(.is-filtered) .is-featured .srv-project-img { aspect-ratio: 21 / 9; }
}

@media (min-width: 901px) {
    .srv-projects-full:not(.is-filtered) .srv-project.is-featured {
        flex-direction: row;
    }
    .srv-projects-full:not(.is-filtered) .is-featured .srv-project-img {
        flex: 1.6;
        aspect-ratio: 16 / 9;
    }
    .srv-projects-full:not(.is-filtered) .is-featured .srv-project-body {
        flex: 1;
        justify-content: center;
        padding: 40px;
    }
    .srv-projects-full:not(.is-filtered) .is-featured .srv-project-body strong { font-size: 34px; }
    .srv-others.srv-others-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── HOVERS ───────────────────────────── */

/* Línea del proceso: GSAP anima --line de 0 a 1 */
.srv-timeline li::before {
    transform: scaleY(var(--line, 1));
    transform-origin: top;
}

/* Botones: brillo que cruza + flecha/ícono que se mueve */
.srv-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.srv-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.srv-btn:hover::after { transform: translateX(120%); }
.srv-btn-primary:hover { box-shadow: 0 10px 30px rgba(7, 86, 242, 0.35); }
.srv-btn i { transition: transform 0.3s ease; }
.srv-btn:hover i { transform: scale(1.15) rotate(-8deg); }

/* Datos clave del hero */
.srv-highlights li { transition: background-color 0.25s ease, transform 0.25s ease; }
.srv-highlights li:hover { background-color: rgba(7, 86, 242, 0.12); transform: translateY(-2px); }
.srv-highlights li i { transition: transform 0.3s ease; }
.srv-highlights li:hover i { transform: scale(1.2); }

/* Logos de clientes */
.page-servicio .clients-track img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.page-servicio .clients-marquee:hover img { opacity: 0.45; }
.page-servicio .clients-marquee img:hover { opacity: 1; transform: scale(1.1); }

/* Proceso */
.srv-timeline-body::before { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.srv-timeline li:hover .srv-timeline-body::before {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(7, 86, 242, 0.25);
}
.srv-timeline h3 { transition: color 0.25s ease, transform 0.25s ease; }
.srv-timeline li:hover h3 { color: var(--primary-dark); transform: translateX(4px); }

/* Planes */
.srv-plan { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.srv-plan:hover {
    border-color: var(--primary-dark);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    transform: translateY(-6px);
}
.srv-plan li i { transition: transform 0.25s ease; }
.srv-plan:hover li i { transform: scale(1.15); }

/* Proyectos */
.srv-project:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }
.srv-project-body em i { transition: transform 0.25s ease; }
.srv-project:hover .srv-project-body em i { transform: translateX(5px); }
.srv-project-body strong { transition: color 0.25s ease; }
.srv-project:hover .srv-project-body strong { color: var(--primary-dark); }

/* FAQ */
.srv-faq summary { transition: opacity 0.2s ease, padding-left 0.25s ease; }
.srv-faq summary:hover { opacity: 1; padding-left: 8px; color: var(--primary-dark); }
.srv-faq-btn i { transition: transform 0.25s ease; }
.srv-faq-btn:hover i { transform: translateX(5px); }

/* Otros servicios */
.srv-others a i { transition: transform 0.25s ease; }
.srv-others a:hover i:last-child { transform: translateX(5px); }
.srv-others a:hover i:first-child { transform: scale(1.15); }

/* Solo en dispositivos con mouse: en celular no se "pega" el hover */
@media (hover: none) {
    .srv-plan:hover, .srv-project:hover, .srv-highlights li:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-servicio *, .page-servicio *::before, .page-servicio *::after { transition: none !important; }
}

/* ── PORTAFOLIO /proyectos ────────────────
   Una composición propia para el trabajo de la agencia. Se mantiene aislada
   para no alterar las páginas de servicios. */
.page-proyectos {
    --portfolio-bg: #f4f7fc;
    --portfolio-surface: #ffffff;
    --portfolio-surface-muted: #e9effb;
    --portfolio-ink: #10192b;
    --portfolio-muted: #536078;
    --portfolio-line: rgba(19, 42, 82, 0.14);
    --portfolio-shadow: 0 24px 70px rgba(16, 35, 68, 0.12);
    background: var(--portfolio-bg);
    color: var(--portfolio-ink);
}

.page-proyectos.dark {
    --portfolio-bg: #080d17;
    --portfolio-surface: #111a2a;
    --portfolio-surface-muted: #142039;
    --portfolio-ink: #f2f6ff;
    --portfolio-muted: #b1bdd1;
    --portfolio-line: rgba(192, 213, 255, 0.16);
    --portfolio-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.page-proyectos .portfolio-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 0 66px;
    background:
        radial-gradient(circle at 80% 26%, rgba(7, 86, 242, 0.2), transparent 30%),
        linear-gradient(145deg, var(--portfolio-bg), var(--portfolio-surface-muted));
}

/* Fondo visual estático y ligero. */
.page-proyectos .portfolio-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(circle at 78% 18%, rgba(101, 221, 255, 0.22), transparent 31%),
        radial-gradient(circle at 22% 76%, rgba(46, 108, 255, 0.14), transparent 39%),
        linear-gradient(135deg, rgba(10, 45, 133, 0.1), transparent 62%);
    transform: translate3d(0, var(--project-banner-y, 0px), 0) scale(var(--project-banner-scale, 1));
    transform-origin: center center;
    opacity: var(--project-banner-opacity, 0.72);
    will-change: transform, opacity;
}

.page-proyectos .portfolio-hero::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -280px;
    bottom: -290px;
    z-index: -1;
    border: 1px solid var(--portfolio-line);
    border-radius: 50%;
}

/* Lluvia de caracteres (proyectos-rain.js). Más tenue detrás del texto
   para no restar legibilidad. */
.page-proyectos .portfolio-rain {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 40%, #000 75%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 40%, #000 75%);
}

@media (max-width: 900px) {
    .page-proyectos .portfolio-rain {
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000);
    }
}

.page-proyectos .portfolio-hero-grid {
    display: grid;
    position: relative;
    z-index: 3;
    gap: 34px;
    align-items: center;
}


.page-proyectos .portfolio-hero-copy { max-width: 650px; }

.page-proyectos .portfolio-hero .srv-breadcrumb,
.page-proyectos .portfolio-hero .srv-lead,
.page-proyectos .portfolio-hero .srv-highlights { color: var(--portfolio-muted); opacity: 1; }

.page-proyectos .portfolio-hero h1 { color: var(--portfolio-ink); }
.page-proyectos .portfolio-hero h1 span { color: var(--primary-dark); }

.page-proyectos .portfolio-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 24px;
    color: var(--portfolio-ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid var(--primary-dark);
    padding-bottom: 5px;
    transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1), gap 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.page-proyectos .portfolio-hero-link i { color: var(--primary-dark); font-size: 19px; }

.page-proyectos .portfolio-hero .srv-highlights {
    margin-top: 30px;
    max-width: 580px;
}

.page-proyectos .portfolio-hero .srv-highlights li {
    background: transparent;
    border-color: var(--portfolio-line);
}

.page-proyectos .portfolio-hero-visual {
    width: min(100%, 312px);
    justify-self: center;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--portfolio-line);
    border-radius: 18px;
    background: var(--portfolio-surface);
    box-shadow: var(--portfolio-shadow);
}


.page-proyectos .consumer-preview {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    color: #071d38;
    box-shadow: 0 18px 40px rgba(0, 12, 31, 0.25);
}

.page-proyectos .consumer-preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 13px;
    background: #fff;
}

.page-proyectos .consumer-preview-topbar img {
    display: block;
    width: 132px;
    height: auto;
    max-height: 29px;
    object-fit: contain;
    object-position: left center;
}

.page-proyectos .consumer-preview-topbar button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #0b3159;
}

.page-proyectos .consumer-preview-topbar i { font-size: 22px; }

.page-proyectos .consumer-preview-hero {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 510px;
    overflow: hidden;
    padding: 30px 22px;
    background: #27333f url('media/consumer-trends-banner-poster.webp') center / cover no-repeat;
}

.page-proyectos .consumer-preview-hero video,
.page-proyectos .consumer-preview-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.page-proyectos .consumer-preview-hero video { object-fit: cover; }

.page-proyectos .consumer-preview-shade {
    background: linear-gradient(180deg, rgba(5, 21, 41, 0.08), rgba(5, 21, 41, 0.88) 84%);
}

.page-proyectos .consumer-preview-copy { position: relative; z-index: 1; }

.page-proyectos .consumer-preview-copy > span {
    display: block;
    margin-bottom: 10px;
    color: #6edbea;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.page-proyectos .consumer-preview-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.page-proyectos .consumer-preview-copy p {
    margin: 14px 0 18px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.45;
}

.page-proyectos .consumer-preview-actions {
    display: flex;
    gap: 8px;
}

.page-proyectos .consumer-preview-copy a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    flex: 1;
    justify-content: center;
    padding: 0 8px;
    border-radius: 5px;
    background: #fff;
    color: #092b50;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.page-proyectos .consumer-preview-copy a.is-secondary {
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: transparent;
    color: #fff;
}

.page-proyectos .portfolio-hero-visual figcaption {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 5px 3px;
    color: var(--portfolio-ink);
    font-size: 14px;
    font-weight: 800;
}

.page-proyectos .portfolio-hero-visual figcaption span {
    color: var(--portfolio-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.page-proyectos .clients {
    background: var(--portfolio-bg);
}
.page-proyectos .clients-label { color: var(--portfolio-muted); }

.page-proyectos .srv-portfolio {
    padding-top: 74px;
    background: var(--portfolio-bg);
}

.page-proyectos .portfolio-heading { max-width: 680px; margin-bottom: 28px; }
.page-proyectos .portfolio-heading .srv-h2 { color: var(--portfolio-ink); margin-bottom: 10px; }
.page-proyectos .portfolio-heading p { margin: 0; color: var(--portfolio-muted); line-height: 1.55; }

.page-proyectos .srv-filters {
    gap: 10px;
    margin-bottom: 30px;
}

.page-proyectos .srv-filter {
    border-color: var(--portfolio-line);
    background: transparent;
    color: var(--portfolio-ink);
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.page-proyectos .srv-filter span { background: var(--portfolio-surface-muted); }
.page-proyectos .srv-filter.is-active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.page-proyectos .srv-projects-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.page-proyectos .srv-project {
    border-color: var(--portfolio-line);
    border-radius: 18px;
    background: var(--portfolio-surface);
    color: var(--portfolio-ink);
    box-shadow: none;
    transition: border-color 220ms ease, box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.page-proyectos .srv-project-img { background: var(--portfolio-surface-muted); }
.page-proyectos .srv-project-img img { transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.page-proyectos .srv-project-body { gap: 8px; padding: 20px; }
.page-proyectos .srv-project-body small { color: var(--primary-dark); }
.page-proyectos .srv-project-body strong { color: var(--portfolio-ink); }
.page-proyectos .srv-project-body > span { color: var(--portfolio-muted); opacity: 1; }
.page-proyectos .srv-project-body em { color: var(--portfolio-ink); }

@media (hover: hover) and (pointer: fine) {
    .page-proyectos .portfolio-hero-link:hover { color: var(--primary-dark); gap: 12px; }
    .page-proyectos .srv-filter:hover { border-color: var(--primary-dark); transform: translateY(-2px); }
    .page-proyectos .srv-project:hover {
        border-color: rgba(7, 86, 242, 0.65);
        box-shadow: var(--portfolio-shadow);
        transform: translateY(-5px);
    }
    .page-proyectos .srv-project:hover .srv-project-img img { transform: scale(1.035); }
    .page-proyectos .srv-project:hover .srv-project-body strong { color: var(--primary-dark); }
}

.page-proyectos .srv-filter:active,
.page-proyectos .srv-project:active,
.page-proyectos .portfolio-hero-link:active { transform: scale(0.98); }

.page-proyectos .srv-filter:focus-visible,
.page-proyectos .portfolio-hero-link:focus-visible,
.page-proyectos .srv-project:focus-visible {
    outline: 3px solid rgba(7, 86, 242, 0.5);
    outline-offset: 4px;
}

@media (min-width: 700px) {
    .page-proyectos .portfolio-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 48px; }
    .page-proyectos .portfolio-hero { padding: 136px 0 78px; }
    .page-proyectos .portfolio-hero-visual { justify-self: end; }
    .page-proyectos .portfolio-hero h1 { font-size: clamp(48px, 5.3vw, 76px); }
    .page-proyectos .srv-projects-full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project.is-featured { grid-column: 1 / -1; }
}

@media (min-width: 980px) {
    .page-proyectos .srv-projects-full { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
    .page-proyectos .srv-projects-full .srv-project { grid-column: span 4; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project.is-featured {
        grid-column: span 7;
        grid-row: span 2;
        min-height: 570px;
    }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project.is-featured .srv-project-img {
        flex: 1;
        aspect-ratio: auto;
    }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(2),
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(3) { grid-column: span 5; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(4) { grid-column: span 5; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(5) { grid-column: span 7; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(6) { grid-column: span 4; }
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(7),
    .page-proyectos .srv-projects-full:not(.is-filtered) .srv-project:nth-child(8) { grid-column: span 4; }
    .page-proyectos .srv-projects-full.is-filtered .srv-project { grid-column: span 6; grid-row: auto; min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .page-proyectos .portfolio-hero-copy { animation: portfolio-enter 520ms cubic-bezier(0.23, 1, 0.32, 1) both; }
    .page-proyectos .portfolio-hero-visual { animation: portfolio-enter 580ms 80ms cubic-bezier(0.23, 1, 0.32, 1) both; }
}

@keyframes portfolio-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Galería física de proyectos: cada sitio se presenta como una impresión
   conectada a una misma línea de trabajo. */
.page-proyectos .portfolio-showcase { overflow: hidden; }

.page-proyectos .project-line-carousel {
    --line-card-width: min(70vw, 290px);
    position: relative;
    height: 500px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--portfolio-ink);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.page-proyectos .project-line-carousel.is-dragging { cursor: grabbing; }
.page-proyectos .project-line-carousel:focus-visible { outline: 3px solid rgba(7, 86, 242, 0.5); outline-offset: 4px; }

.page-proyectos .project-line-string {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.page-proyectos .project-line-string path {
    fill: none;
    stroke: var(--portfolio-muted);
    stroke-linecap: round;
    stroke-width: 1.5;
    opacity: 0.65;
}

.page-proyectos .project-line-card {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--line-card-width);
    transform-origin: 50% 0;
    will-change: transform;
}

.page-proyectos .project-line-print {
    display: block;
    margin-top: 12px;
    padding: 10px 10px 0;
    overflow: hidden;
    border-radius: 4px;
    background: #f8fafc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 22px 36px -18px rgba(0, 0, 0, 0.55);
    color: #13203a;
    text-decoration: none;
    transition: filter 250ms ease, transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.page-proyectos .project-line-card:not(.is-active) .project-line-print { filter: saturate(0.74) brightness(0.93); }

.page-proyectos .project-line-image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #d8e0ef;
}

.page-proyectos .project-line-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.page-proyectos .project-line-note {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-proyectos .project-line-peg {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 10px;
    height: 27px;
    margin-left: -5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8d9cb4, #e4ebf5 48%, #71819d);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
}

.page-proyectos .project-line-peg::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 4px;
    width: 2px;
    height: 8px;
    border-radius: 1px;
    background: rgba(15, 28, 49, 0.35);
}

.page-proyectos .project-line-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.page-proyectos .project-line-caption { flex: 1; min-width: 0; }
.page-proyectos .project-line-caption strong,
.page-proyectos .project-line-caption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-proyectos .project-line-caption strong { font-size: 16px; }
.page-proyectos .project-line-caption span { margin-top: 3px; color: var(--portfolio-muted); font-size: 12px; font-weight: 700; }
.page-proyectos .project-line-count { color: var(--portfolio-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; }
.page-proyectos .project-line-count b { color: var(--portfolio-ink); }

.page-proyectos .project-line-button {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--portfolio-line);
    border-radius: 50%;
    background: var(--portfolio-surface);
    color: var(--portfolio-ink);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease;
}

.page-proyectos .project-line-button i { font-size: 18px; }

@media (hover: hover) and (pointer: fine) {
    .page-proyectos .project-line-card.is-active .project-line-print:hover { transform: translateY(-4px) rotate(0.01deg); }
    .page-proyectos .project-line-button:hover { background: var(--portfolio-ink); color: var(--portfolio-surface); transform: translateY(-2px); }
}

.page-proyectos .project-line-button:active { transform: scale(0.96); }

@media (min-width: 700px) {
    .page-proyectos .project-line-carousel { --line-card-width: 350px; height: 600px; }
    .page-proyectos .project-line-controls { right: 32px; bottom: 28px; left: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-proyectos .project-line-card,
    .page-proyectos .project-line-print,
    .page-proyectos .project-line-button { transition: none; }
}

/* ── Tablet ── */
@media (min-width: 600px) {
    .srv-container { padding: 0 24px; }
    .srv-actions { flex-direction: row; flex-wrap: wrap; }
    .srv-grid { grid-template-columns: repeat(2, 1fr); }
    .srv-steps { grid-template-columns: repeat(2, 1fr); }
    .srv-others { grid-template-columns: repeat(2, 1fr); }
    .srv-cta { padding: 48px 32px; }
    .srv-cta .srv-btn { width: auto; }
}

/* ── Desktop (navbar vuelve a una sola fila) ── */
@media (min-width: 901px) {
    .srv-container { padding: 0 40px; }
    .srv-section { padding: 88px 0; }
    .srv-hero { padding: 170px 0 80px; }
    .srv-highlights { grid-template-columns: repeat(4, 1fr); }
    .srv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .srv-split { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
    .srv-sticky { position: sticky; top: 120px; }
    .srv-faq-wrap { grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
    .srv-timeline li { grid-template-columns: 110px 1fr; gap: 24px; padding-bottom: 40px; }
    .srv-timeline li::before { left: 133px; }
    .srv-timeline-date { font-size: 15px; }
    .srv-steps { grid-template-columns: repeat(4, 1fr); }
    .srv-others { grid-template-columns: repeat(4, 1fr); }
    .srv-cta { min-height: 315px; padding: 64px 48px; }
    .srv-cta-content { width: min(100%, 650px); margin: 0 auto; }
    .srv-cta .srv-btn { width: auto; }
    .srv-cta-alien { display: block; }
}

/* ── Hero de /proyectos estilo "RainingLetters" (21st.dev) ──
   Fondo negro y paleta del componente original. Las variables se
   redefinen solo dentro del hero; el resto de la página no cambia. */
.page-proyectos .portfolio-hero,
.page-proyectos.dark .portfolio-hero {
    --portfolio-bg: #000000;
    --portfolio-surface: #0d0d0d;
    --portfolio-surface-muted: #000000;
    --portfolio-ink: #ffffff;
    --portfolio-muted: #a1a1aa;
    --portfolio-line: rgba(255, 255, 255, 0.14);
    background: #000;
}

.page-proyectos .portfolio-hero::before,
.page-proyectos .portfolio-hero::after { display: none; }

.page-proyectos .portfolio-hero .srv-highlights li { background: rgba(0, 0, 0, 0.55); }

.page-proyectos .portfolio-rain {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 40%, #000 70%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 40%, #000 70%);
}

/* Scramble del título (proyectos-rain.js): blanco, y los caracteres que
   se están revolviendo en verde, como en RainingLetters. */
.page-proyectos .portfolio-hero h1,
.page-proyectos .portfolio-hero h1 span { color: #ffffff; }
.page-proyectos .portfolio-hero h1 .scramble-char { color: #16b31e; }


/* /proyectos: sobre el hero negro, el navbar transparente usa texto blanco */
.page-proyectos .navbar:not(.is-scrolled):not(:has(.has-mega.open)) .nav-link { color: #ffffff; }

/* ── INICIO (index.html generado por build.js) ── */
.page-home .home-hero h1 { font-size: clamp(38px, 10vw, 84px); }
.page-home .home-hero .srv-lead { max-width: 720px; }

/* Tarjetas de servicios con precio "desde" */
.home-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
}

.home-service {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 22px;
    border-radius: 16px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    color: var(--text-light);
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.home-service h3 { font-size: 20px; margin: 4px 0 0; }
.home-service p { font-size: 14px; line-height: 1.5; opacity: 0.72; margin: 0; flex: 1; }

.home-service-price {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin-top: 10px;
}

.home-service-price small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.6;
}

.home-service em {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.home-service em i { transition: transform 0.25s ease; }
.home-service:hover { border-color: var(--primary-dark); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16); }
.home-service:hover em i { transform: translateX(5px); }
.home-service:hover .srv-card-icon { background-color: var(--primary-dark); color: #fff; }
.home-service .srv-card-icon { transition: background-color 0.25s ease, color 0.25s ease; }

/* Encabezado de sección con botón a la derecha */
.home-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.home-section-head .srv-h2 { margin-bottom: 0; }

@media (hover: none) {
    .home-service:hover { transform: none; box-shadow: none; }
}

@media (min-width: 600px) {
    .home-services { grid-template-columns: repeat(2, 1fr); }
    .home-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

@media (min-width: 901px) {
    .page-home .home-hero { padding: 180px 0 90px; }
    .home-services { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .home-why { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1180px) {
    .home-services { grid-template-columns: repeat(5, 1fr); }
}

/* Testimonios (pieza del home anterior) alineados al ancho de las demás secciones */
.page-home .testimonials-container { max-width: 1180px; padding: 0 16px; }
@media (min-width: 600px) { .page-home .testimonials-container { padding: 0 24px; } }
@media (min-width: 901px) { .page-home .testimonials-container { padding: 0 40px; } }

/* Hero del inicio con fondo "Digital Loom" (inicio-loom.js): hilos de luz
   sobre fondo oscuro; los textos del hero pasan a claro. */
.page-home .home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000;
    color: #f2f4f8;
}

.page-home .home-loom {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* degradado suave detrás del texto para que se lea sobre los hilos */
.page-home .home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 7, 13, 0.75) 0%, rgba(5, 7, 13, 0.35) 55%, rgba(5, 7, 13, 0) 100%);
}

.page-home .home-hero .srv-container { position: relative; z-index: 1; }
.page-home .home-hero h1 { color: #ffffff; }
.page-home .home-hero .srv-lead { color: #c3c9d6; opacity: 1; }
.page-home .home-hero .srv-btn-ghost { color: #ffffff; }
.page-home .home-hero .srv-btn-ghost:hover { background-color: #ffffff; color: #05070d; }
.page-home .home-hero .srv-highlights li { background-color: rgba(255, 255, 255, 0.07); color: #f2f4f8; }

/* navbar transparente sobre el hero oscuro: links en blanco */
.page-home .navbar:not(.is-scrolled):not(:has(.has-mega.open)) .nav-link { color: #ffffff; }

@media (max-width: 900px) {
    .page-home .home-hero::after {
        background: linear-gradient(180deg, rgba(5, 7, 13, 0.7) 0%, rgba(5, 7, 13, 0.45) 100%);
    }
}

/* Digital Loom: como el original, sin degradado detrás del texto */
.page-home .home-hero::after { display: none; }

/* ── Hero del inicio: ajustes de UI (taste-skill + emil-design-eng) ──
   Un solo acento: el azul de marca aclarado para fondo oscuro (#5B8CFF),
   el mismo de los hilos. Texto con contraste AA y velo solo detrás del copy. */
.page-home .home-hero {
    --hero-accent: #5b8cff;
    display: flex;
    align-items: center;
    min-height: min(100dvh, 860px);
    padding: 120px 0 96px;
}

/* velo radial detrás de la columna de texto: los hilos siguen visibles a la derecha */
.page-home .home-hero::after {
    display: block;
    background: radial-gradient(ellipse 70% 75% at 22% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 80%);
}

.page-home .home-hero-copy { max-width: 1180px; width: 100%; position: relative; z-index: 2; }

.page-home .home-hero-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.68);
}

.page-home .home-hero h1 {
    font-size: clamp(40px, 7.4vw, 76px);
    line-height: 1;
    max-width: 21ch;
    color: #ffffff;
}

.page-home .home-hero h1 span { color: var(--hero-accent); }

.page-home .home-hero .srv-lead {
    max-width: 46ch;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 4px;
}

.page-home .home-hero .srv-actions { margin-top: 32px; }

/* botones: respuesta táctil al presionar y transición corta */
.page-home .home-hero .srv-btn {
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.page-home .home-hero .srv-btn:active { transform: scale(0.97); }

.page-home .home-hero .srv-btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.page-home .home-hero .srv-btn-ghost:hover { background-color: #ffffff; color: #000000; border-color: #ffffff; }

@media (max-width: 900px) {
    .page-home .home-hero { padding: 140px 0 110px; min-height: auto; }
    .page-home .home-hero::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.4) 100%);
    }
}

/* ── Banner de servicios con fondo ASCII (servicios-ascii.js) ──
   Misma paleta que el hero del inicio: negro, texto claro y un solo
   acento (#5B8CFF, el azul de marca aclarado para fondo oscuro). */
.srv-hero.srv-hero-ascii {
    --hero-accent: #5b8cff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000;
    color: #f2f4f8;
}

.srv-hero-ascii .srv-ascii {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

/* velo detrás del texto para que los caracteres no compitan con él */
.srv-hero-ascii::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 75% at 25% 50%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 80%);
}

.srv-hero-ascii .srv-container { position: relative; z-index: 2; }
.srv-hero-ascii .srv-breadcrumb { color: rgba(255, 255, 255, 0.6); opacity: 1; }
.srv-hero-ascii .srv-kicker { color: rgba(255, 255, 255, 0.68); }
.srv-hero-ascii h1 { color: #ffffff; }
.srv-hero-ascii h1 span { color: var(--hero-accent); }
.srv-hero-ascii .srv-lead { color: rgba(255, 255, 255, 0.78); opacity: 1; }

.srv-hero-ascii .srv-btn { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.srv-hero-ascii .srv-btn:active { transform: scale(0.97); }
.srv-hero-ascii .srv-btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
}
.srv-hero-ascii .srv-btn-ghost:hover { background-color: #ffffff; color: #000000; border-color: #ffffff; }

.srv-hero-ascii .srv-highlights li {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f2f4f8;
}
.srv-hero-ascii .srv-highlights i { color: var(--hero-accent); }

/* navbar transparente sobre el banner oscuro: links en blanco */
.page-servicio:has(.srv-hero-ascii) .navbar:not(.is-scrolled):not(:has(.has-mega.open)) .nav-link { color: #ffffff; }

@media (max-width: 900px) {
    .srv-hero-ascii::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.55) 100%);
    }
}

/* Figura del Hombre de Vitruvio (Da Vinci, dominio público) en líneas blancas,
   como en "Hero ASCII" de 21st.dev. A la derecha en desktop; tenue de fondo en móvil. */
.srv-hero-ascii .srv-hero-figura {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    width: min(150vw, 560px);
    height: auto;
    top: 50%;
    right: -40%;
    transform: translateY(-50%);
    opacity: 0.16;
}

@media (min-width: 901px) {
    .srv-hero-ascii .srv-hero-figura {
        width: min(36vw, 470px);
        right: max(32px, calc((100vw - 1180px) / 2));
        opacity: 0.85;
        animation: figura-respira 14s ease-in-out infinite;
    }
    /* columna de texto a la izquierda para no encimarse con la figura */
    .srv-hero-ascii .srv-container > * { max-width: min(640px, 52vw); }
    .srv-hero-ascii h1 { font-size: clamp(36px, 3.9vw, 54px); }
    .srv-hero-ascii .srv-highlights { grid-template-columns: repeat(2, 1fr); }
    .srv-hero-ascii::after {
        background: radial-gradient(ellipse 55% 80% at 22% 50%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 80%);
    }
}

/* giro muy lento, como el círculo de la referencia */
@keyframes figura-respira {
    0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
    50% { transform: translateY(-50%) rotate(3deg) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
    .srv-hero-ascii .srv-hero-figura { animation: none; }
}

/* ── Precios del inicio (inspirado en "Pricing Section" de 21st.dev / Dub.co) ──
   Fondo de cuadrícula con máscara radial, pestañas con píldora deslizante y
   una tarjeta por servicio; la destacada va en oscuro con insignia. */
.home-pricing { position: relative; isolation: isolate; overflow: hidden; }

.home-pricing-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(128, 128, 128, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.14) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
}

.home-pricing-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.home-pricing-head .srv-h2 { margin: 0; }
.home-pricing-head .srv-lead { margin: 0 auto; }

.home-pricing-tabs {
    position: relative;
    display: inline-flex;
    padding: 4px;
    margin-top: 10px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    background-color: rgba(128, 128, 128, 0.08);
}

.home-pricing-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease;
}

.home-pricing-tab span {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background-color: rgba(7, 86, 242, 0.12);
    color: var(--primary-dark);
}

.home-pricing-tab.is-active { color: #fff; }
.home-pricing-tab.is-active span { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
.home-pricing-tab:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }

/* píldora que se desliza detrás de la pestaña activa (la mueve inicio.js) */
.home-pricing-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background-color: var(--primary-dark);
    transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), width 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Tarjetas */
.home-pricing .home-services { margin-top: 40px; align-items: stretch; }

.home-pricing .home-service {
    position: relative;
    gap: 8px;
    background-color: var(--bg-light);
}
.home-pricing .home-service p { flex: 0 0 auto; }

.home-pricing .home-service-price { margin: 8px 0 4px; }
.home-pricing .home-service-price b { font-weight: 900; font-variant-numeric: tabular-nums; }

.home-service-features {
    list-style: none;
    margin: 6px 0 18px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    display: grid;
    gap: 9px;
    flex: 1;
    align-content: start;
}
.home-service-features[hidden] { display: none; }

.home-service-features li {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}
.home-service-features i { color: var(--primary-dark); font-size: 18px; flex: none; }

.home-pricing .home-service .srv-btn { width: 100%; }
.home-pricing .home-service .srv-btn:active { transform: scale(0.97); }

/* Tarjeta destacada en oscuro */
.home-pricing .home-service.is-highlighted {
    background-color: #0b0d12;
    color: #f2f4f8;
    border-color: #0b0d12;
    box-shadow: 0 24px 60px rgba(7, 86, 242, 0.22);
}
.home-pricing .home-service.is-highlighted p { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.home-pricing .home-service.is-highlighted .home-service-features { border-top-color: rgba(255, 255, 255, 0.12); }
.home-pricing .home-service.is-highlighted .home-service-features i { color: #5b8cff; }
.home-pricing .home-service.is-highlighted .srv-card-icon { background-color: rgba(91, 140, 255, 0.16); color: #5b8cff; }

.home-service-badge {
    position: absolute;
    top: -11px;
    right: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: var(--primary-dark);
}

/* hover de la tarjeta (ya no es un link): solo el borde */
.home-pricing .home-service:hover { transform: translateY(-4px); }
.home-pricing .home-service.is-highlighted:hover { border-color: #5b8cff; }

/* 5 tarjetas: 3 arriba y 2 centradas abajo (5 columnas quedaban muy angostas) */
@media (min-width: 901px) {
    .home-pricing .home-services { grid-template-columns: repeat(6, 1fr); gap: 20px; }
    .home-pricing .home-service { grid-column: span 2; }
    .home-pricing .home-service:nth-child(4) { grid-column: 2 / span 2; }
    .home-pricing .home-service:nth-child(5) { grid-column: 4 / span 2; }
}

/* ── Carrusel en abanico de proyectos (inicio-fan.js) ──
   Inspirado en "Card Fan Carousel" de 21st.dev. Las tarjetas se apilan en el
   centro y el script las rota/desplaza alrededor de un pivote bajo (arco). */
.fan {
    --fan-card-w: clamp(220px, 30vw, 380px);
    outline: none;
    margin-top: 8px;
}

.fan:focus-visible .fan-card.is-active { outline: 2px solid var(--primary-dark); outline-offset: 4px; }

.fan-stage {
    position: relative;
    height: calc(var(--fan-card-w) * 0.8 + 70px);
    touch-action: pan-y;
}

.fan-card {
    position: absolute;
    left: 50%;
    top: 10px;
    width: var(--fan-card-w);
    aspect-ratio: 4 / 3;
    margin-left: calc(var(--fan-card-w) / -2);
    border-radius: 16px;
    overflow: hidden;
    background-color: #0b0d12;
    border: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18);
    transform-origin: 50% 120%;
    will-change: transform;
    transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms ease, box-shadow 200ms ease;
    cursor: pointer;
}

.fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    pointer-events: none;
    user-select: none;
}

.fan-card.is-active { box-shadow: 0 28px 60px rgba(7, 86, 242, 0.28); }

.fan-info {
    text-align: center;
    max-width: 560px;
    margin: 12px auto 0;
    min-height: 96px;
}

.fan-tipo {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--primary-dark);
}

.fan-nombre { display: block; font-size: clamp(22px, 2.6vw, 30px); margin: 4px 0 6px; }
.fan-desc { margin: 0; font-size: 15px; line-height: 1.55; opacity: 0.72; }

.fan-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.fan-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.35);
    background: transparent;
    color: var(--text-light);
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.fan-btn:hover { background-color: var(--text-light); color: var(--bg-light); }
.fan-btn:active { transform: scale(0.95); }

.fan-count { font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.7; min-width: 64px; text-align: center; }
.fan-count b { opacity: 1; }

@media (max-width: 600px) {
    .fan { --fan-card-w: 64vw; }
    .fan-visitar { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fan-card { transition: none; }
}
.fan-gsap .fan-card { transition: box-shadow 200ms ease; }

/* ── Fondo "Floating Paths" del portafolio del inicio (canvas de inicio-paths.js) ── */
.home-portfolio { position: relative; isolation: isolate; overflow: hidden; }

.floating-paths {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* velo del color de la página detrás del texto del proyecto activo */
.home-portfolio .fan-info {
    position: relative;
    padding: 8px 24px;
    background: radial-gradient(ellipse at center, var(--bg-light) 45%, transparent 75%);
}

/* ── Fondo topográfico de la cinta de logos (clientes-terreno.js) ──
   Inspirado en "Terrain Erosion Carve" de 21st.dev. El canvas lo crea el
   script dentro de cada .clients; los logos quedan por encima. */
.clients { position: relative; isolation: isolate; overflow: hidden; }

.clients-terreno {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.clients > :not(.clients-terreno) { position: relative; z-index: 1; }

/* ── Border Trail (ibelick / 21st.dev) en "Por qué NadVok" y "Nuestro proceso" ──
   La máscara deja visible solo el anillo del borde; dentro, una luz azul
   recorre el contorno con offset-path. CSS puro, sin JavaScript. */
.border-trail { display: none; }

.page-home .srv-card,
.page-home .srv-steps li { position: relative; }
.page-home .srv-steps li { border: 1px solid rgba(128, 128, 128, 0.16); }

.page-home .border-trail {
    --trail-size: 90px;
    display: block;
    position: absolute;
    inset: -1px;                        /* encima del borde de 1px del contenedor */
    padding: 1.5px;                     /* grosor del trazo de luz */
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.page-home .border-trail > span {
    position: absolute;
    width: var(--trail-size);
    aspect-ratio: 1;
    background: radial-gradient(circle, #5b8cff 0%, rgba(7, 86, 242, 0.65) 35%, rgba(7, 86, 242, 0) 70%);
    offset-path: rect(0 auto auto 0 round var(--trail-size));
    animation: border-trail 8s linear infinite;
    animation-delay: var(--trail-delay, 0s);
}

@keyframes border-trail {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

/* sin soporte de offset-path rect(): no se muestra (queda el borde normal) */
@supports not (offset-path: rect(0 auto auto 0)) {
    .page-home .border-trail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .border-trail { display: none; }
}

/* ── Fondo ASMR (inspirado en "ASMR background" de 21st.dev) detrás de
   "Por qué NadVok" y "Nuestro proceso"; lo dibuja inicio-asmr.js.
   Solo es el fondo de la sección: tarjetas y pasos llevan fondo sólido. */
.home-asmr-zona {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.home-asmr {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home-asmr-zona .srv-card,
.home-asmr-zona .srv-steps li { background-color: var(--bg-light); }

/* Fondo ASMR: espacio negro con estrellas; el cursor es un agujero negro.
   Solo el fondo de la sección es negro; tarjetas y pasos mantienen su fondo claro. */
.home-asmr-zona { background-color: #000; }
.home-asmr-zona .srv-section > .srv-container > .srv-kicker { color: rgba(255, 255, 255, 0.6); }
.home-asmr-zona .srv-section > .srv-container > .srv-h2 { color: #ffffff; }
.home-asmr-zona .srv-card,
.home-asmr-zona .srv-steps li { border-color: rgba(255, 255, 255, 0.12); }

/* Bordes más visibles sobre el fondo negro del ASMR:
   borde fijo azul translúcido + luz del Border Trail más gruesa y brillante,
   con un resplandor que sale un poco por fuera del contenedor. */
.home-asmr-zona .srv-card,
.home-asmr-zona .srv-steps li {
    border: 1px solid rgba(91, 140, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.12), 0 0 24px rgba(91, 140, 255, 0.12);
}

.page-home .home-asmr-zona .border-trail {
    --trail-size: 120px;
    inset: -3px;
    padding: 3px;
    filter: drop-shadow(0 0 6px rgba(120, 165, 255, 0.9));
}

.page-home .home-asmr-zona .border-trail > span {
    background: radial-gradient(circle, #ffffff 0%, #8fb2ff 22%, rgba(91, 140, 255, 0.85) 42%, rgba(91, 140, 255, 0) 70%);
}

/* Testimonios del inicio: fondo negro con "Neon Dither" (testimonios-neon.js).
   Las tarjetas siguen blancas. */
.page-home .testimonials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #000;
    border-top: 0;
}
.page-home .testimonials .testimonials-title { color: #ffffff; }
.page-home .testimonials .testimonials-subtitle { color: rgba(255, 255, 255, 0.7); }
.page-home .testimonials .testimonials-accent { color: #ffffff; }

.testi-neon {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;      /* la trama del dither se ve nítida al escalar */
}
/* velo oscuro detrás del título de testimonios para que se lea sobre el dither */
.page-home .testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 45% at 20% 18%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
}

/* "Resolvemos tus dudas" con "ASCII Fluid" (inicio-fluido.js): el cursor deja
   tinta ASCII de fondo; las preguntas llevan fondo sólido para leerse bien. */
.home-faq { position: relative; isolation: isolate; overflow: hidden; }
.home-faq .faq-fluido {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.home-faq .srv-faq details { background-color: var(--bg-light); padding: 0 16px; border-radius: 10px; }

/* ── Mini cotizador (cotizar.js): planes sin precio ── */
.cotizar-modal {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--bg-light);
    color: var(--text-light);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.cotizar-modal::backdrop { background: rgba(5, 8, 15, 0.6); backdrop-filter: blur(3px); }
.cotizar-modal[open] { animation: cotizar-entra 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes cotizar-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.cotizar-form { position: relative; display: grid; gap: 16px; padding: 28px 24px 22px; }
.cotizar-form h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.cotizar-sub { margin: -10px 0 0; font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.cotizar-cerrar {
    position: absolute; top: 14px; right: 14px;
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; background: rgba(128, 128, 128, 0.12); color: inherit;
    font-size: 22px; display: grid; place-items: center; cursor: pointer;
}
.cotizar-campo { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.cotizar-campo > span, .cotizar-campo legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 6px; }
.cotizar-campo input[type="text"], .cotizar-campo textarea {
    font: inherit; font-size: 16px; color: var(--text-light);
    background: #fff; border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 10px; padding: 11px 13px; resize: vertical;
}
.cotizar-campo input:focus, .cotizar-campo textarea:focus { outline: none; border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(7, 86, 242, 0.18); }
.cotizar-campo [aria-invalid="true"] { border-color: #c62828; }
.cotizar-error { color: #c62828; font-size: 12.5px; min-height: 1em; }
.cotizar-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cotizar-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.cotizar-opcion span {
    display: inline-block; padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.35); font-size: 14px; cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.cotizar-opcion input:checked + span { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.cotizar-opcion input:focus-visible + span { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.cotizar-enviar { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cotizar-nota { margin: -6px 0 0; text-align: center; font-size: 12.5px; opacity: 0.65; }

/* tarjetas del inicio: botón Cotizar + link a la página del servicio */
.home-pricing .home-service .srv-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.home-pricing .home-service .srv-btn-ghost { border: 1.5px solid currentColor; }
.home-service-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 10px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--primary-dark);
}
.home-pricing .home-service.is-highlighted .home-service-link { color: #8fb2ff; }
.srv-plan .srv-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.srv-plan .srv-btn-ghost { border: 1.5px solid currentColor; }