/* Página /servicios · estilos específicos */

/* ===== 1. HERO CLARO (override del dark hero global) ===== */
.page-servicios .zw-hero-dark {
    background-color: var(--zander-white-soft);
    background-image:
        radial-gradient(circle at center, transparent 0%, var(--zander-white-soft) 85%),
        linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: cover, 40px 40px, 40px 40px;
    background-repeat: no-repeat, repeat, repeat;
    color: var(--zander-black);
}

.page-servicios .zw-hero-dark__overlay {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(252, 198, 28, .08), transparent 60%),
        rgba(251, 251, 251, .10);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.55) 60%, transparent 95%);
            mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.55) 60%, transparent 95%);
}

.page-servicios .zw-hero-dark__title {
    color: var(--zander-black);
}

.page-servicios .zw-hero-dark__subtitle {
    color: rgba(29, 29, 27, .65);
}

.page-servicios .zw-hero-tag {
    background: rgba(29, 29, 27, .06);
    color: #7a5e00;
    border-color: rgba(29, 29, 27, .15);
}

/* ===== 1b. HERO (fondo claro) — clase original, mantener por compatibilidad ===== */
.zw-page-hero {
    position: relative;
    background-color: var(--zander-white-soft);
    background-image:
        radial-gradient(circle at center, transparent 0%, var(--zander-white-soft) 85%),
        linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
    background-size: cover, 40px 40px, 40px 40px;
    background-repeat: no-repeat, repeat, repeat;
    background-position: center center;
    height: 100dvh;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
}

.zw-page-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.zw-page-hero__title {
    font-size: clamp(3rem, 9vw, 8.35rem);
    line-height: clamp(4.75rem, 10vw, 10rem);
    font-weight: 500;
    color: var(--zander-black);
    text-align: left;
    margin-bottom: 32px;
}

.zw-page-hero__btns {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Servicios: header transparente sobre su hero CLARO (excepción al header
   opaco negro global; en servicios el hero es claro). */
.page-servicios .site-header--transparent {
    background-color: transparent;
}
/* Header transparente → texto negro sobre hero claro */
.page-servicios .site-header--transparent .site-nav__link {
    color: var(--zander-black);
}
.page-servicios .site-header--transparent .site-nav__link::after {
    background: var(--zander-black);
}
.page-servicios .site-header--transparent .site-nav__link.is-active::after {
    background: var(--zander-yellow);
}
/* Activo siempre en amarillo, incluso sobre hero claro */
.page-servicios .site-header--transparent .site-nav__link.is-active,
.page-servicios .site-header--scrolled .site-nav__link.is-active {
    color: var(--zander-yellow) !important;
}
.page-servicios .site-header--transparent .ham .line {
    stroke: var(--zander-black);
}
.page-servicios .site-header--transparent .site-header__burger span {
    background: var(--zander-black);
}

/* Header scrolled en servicios → fondo blanco + texto negro */
.page-servicios .site-header--scrolled {
    background-color: var(--zander-white-soft) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
.page-servicios .site-header--scrolled .site-nav__link {
    color: var(--zander-black) !important;
}
.page-servicios .site-header--scrolled .ham .line {
    stroke: var(--zander-black) !important;
}
.page-servicios .site-header--scrolled .site-header__burger span {
    background: var(--zander-black) !important;
}

/* Offcanvas (modal lateral) solo en servicios: el primer enlace quedaba
   cortado bajo el header transparente → bajamos el contenido unos px. */
.page-servicios .site-offcanvas {
    padding-top: 48px;
}

/* Mobile hero */
@media (max-width: 999.98px) {
    .zw-page-hero {
        align-content: center;
        align-items: center;
        text-align: center;
    }
    .zw-page-hero__btns { justify-content: center; }
}

@media (max-width: 689.98px) {
    .zw-page-hero { height: 70vh; }
    .zw-page-hero__btns--desktop { display: none; }
    .zw-page-hero__btns--mobile { display: flex; justify-content: center; }
}

@media (min-width: 690px) {
    .zw-page-hero__btns--desktop { display: flex; }
    .zw-page-hero__btns--mobile { display: none; }
}

/* ===== 2. SECTORES ===== */
.zw-sectores {
    background-color: var(--zander-white-soft);
    background-image:
        linear-gradient(rgba(29, 29, 27, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 29, 27, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    padding: 100px 0;
}

.zw-sectores__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.zw-sectores__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zander-black);
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.1;
}

.zw-sectores__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.zw-sector-card {
    background-color: var(--zander-white-soft);
    border: 1px solid rgba(29, 29, 27, 0.3);
    border-radius: 30px;
    overflow: hidden;
    padding: 40px 36px;
}

.zw-sector-card h2 {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--zander-black);
    margin-bottom: 16px;
    line-height: 1.2;
}

.zw-sector-card p {
    font-size: var(--fs-body);
    color: var(--zander-black);
    line-height: 1.6;
    margin-bottom: 24px;
}

.zw-sector-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zw-sector-card ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-body);
    color: var(--zander-black);
}

.zw-sector-card ul li svg {
    fill: var(--zander-yellow);
    flex-shrink: 0;
}

/* ===== 3. PROCESO / TIMELINE ===== */
.zander-method-section-final {
    background-color: var(--zander-white-soft);
    padding: 100px 0;
    overflow: hidden;
}

.ms-container-stalable {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.ms-header {
    text-align: left;
    margin-bottom: 80px;
}

.zw-pricing-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--zander-white-soft);
    margin-bottom: 0;
}
.zw-pricing-title .highlight-yellow { color: var(--zander-yellow); }

.ms-massive-title span {
    display: block;
    line-height: 1.1;
    font-size: var(--fs-h2);
    text-transform: uppercase;
}

.ms-color-black { color: var(--zander-black); }
.ms-color-yellow { color: var(--zander-yellow); }
.ms-weight-400 { font-weight: 400; }
.ms-weight-900 { font-weight: 700; }

.ms-timeline {
    position: relative;
    padding-left: 25px;
    margin-top: 40px;
}

.ms-timeline::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 100%;
    border-left: 1px dashed var(--zander-yellow);
}

.ms-progress-line {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 0%;
    border-left: 1px dashed var(--zander-black);
    z-index: 2;
    transition: height 0.1s linear;
}

.ms-step {
    position: relative;
    width: 100%;
    padding: 0 0 60px 30px;
}

.ms-step-number {
    display: block;
    color: var(--zander-yellow);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.ms-step-number.is-active {
    color: var(--zander-black);
}

.ms-step-content h3 {
    font-weight: 700;
    font-size: var(--fs-h3);
    margin: 0 0 12px;
    color: var(--zander-black);
    line-height: 1.1;
}

.ms-step-content p {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--zander-black);
    max-width: 500px;
    margin: 0;
}

.ms-footer {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .ms-header { text-align: center; }
    .ms-timeline { padding-left: 0; margin-top: 80px; }
    .ms-timeline::before,
    .ms-progress-line { left: 50%; transform: translateX(-50%); }

    .ms-step { width: 50%; padding: 40px 80px; box-sizing: border-box; }
    .ms-step:nth-child(odd)  { left: 50%; text-align: left; }
    .ms-step:nth-child(even) { left: 0;   text-align: right; }

    .ms-step:nth-child(even) .ms-step-content p { margin-left: auto; }

    .ms-step-number {
        position: absolute;
        top: 55px;
        background-color: transparent;
        margin-bottom: 0;
        width: 100%;
        line-height: 1;
    }
    .ms-step:nth-child(odd)  .ms-step-number { right: 100%; left: auto; text-align: right; padding-right: 80px; }
    .ms-step:nth-child(even) .ms-step-number { left: 100%;  right: auto; text-align: left;  padding-left: 80px; }
}

/* ===== 5. FIX CORTADO · Stack container → sectores ===== */
.page-servicios .zander-stack-container {
    margin-bottom: 0;
}
/* (Reglas previas eliminadas — interferían con el sticky scroll de las cards.
   El margen ahora lo define wpcode-snippets.css dentro del media query.) */

/* ===== 6. PRICING · botones adaptados al contexto ===== */

/* Botón CTA bar (Ver planes + Calcula tu presupuesto) */
.page-servicios .pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Ver planes: amarillo inicial → hover revela blanco */
.page-servicios .pricing-cta .wp-skew-btn--yellow-to-white {
    min-width: 200px !important;
}

/* Calcula tu presupuesto: botón negro */
.page-servicios .pricing-cta .wp-skew-btn--calc {
    min-width: 280px !important;
}

/* Tarjetas oscuras: botón outline → hover blanco */
.page-servicios .price-card:not(.featured) .wp-skew-btn--yellow-to-white::before {
    background-color: #fbfbfb !important;
}
.page-servicios .price-card:not(.featured) .wp-skew-btn--yellow-to-white::after {
    background-color: transparent !important;
    border: 2px solid rgba(252, 198, 28, 0.5);
    border-radius: 500px;
    box-sizing: border-box;
}
.page-servicios .price-card:not(.featured) .wp-skew-btn--yellow-to-white {
    color: var(--zander-white-soft) !important;
}
.page-servicios .price-card:not(.featured) .wp-skew-btn--yellow-to-white:hover span {
    color: var(--zander-black) !important;
}

/* ===== 7. FIX STICKY CARDS: bajar posición para que no se oculten bajo el header ===== */
/* Header en servicios mide ~110px (logo 70px + padding 20px×2). Original top era 80–180px. */
.page-servicios #card-1 { top: 125px; }
.page-servicios #card-2 { top: 145px; }
.page-servicios #card-3 { top: 165px; }
.page-servicios #card-4 { top: 185px; }
.page-servicios #card-5 { top: 205px; }
.page-servicios #card-6 { top: 225px; }
.page-servicios #card-7 { top: 245px; z-index: 70; }
.page-servicios #card-8 { top: 265px; z-index: 80; }
.page-servicios #card-9 { top: 285px; z-index: 90; }
/* 3 servicios nuevos (Diseño Gráfico / Creación Contenido / Ilustración).
   z 91-93: por encima de la 9 (90) pero por debajo de sectores (95) y header (100). */
.page-servicios #card-10 { top: 305px; z-index: 91; }
.page-servicios #card-11 { top: 325px; z-index: 92; }
.page-servicios #card-12 { top: 345px; z-index: 93; }

/* Mobile: z-index para nuevas tarjetas (mayor especificidad → gana a #card-m-* de wpcode) */
.page-servicios #card-m-7 { z-index: 70; }
.page-servicios #card-m-8 { z-index: 80; }
.page-servicios #card-m-9 { z-index: 90; }
.page-servicios #card-m-10 { z-index: 91; }
.page-servicios #card-m-11 { z-index: 92; }
.page-servicios #card-m-12 { z-index: 93; }

/* ===== 7b. STICKY CARDS · anti-parpadeo + atenuar la tapada =====
   PARPADEO (se veía el contenido de OTRAS tarjetas a través de la actual al
   scrollear): la causa real era backdrop-filter:blur() en las ilustraciones de
   Tienda Online, SEO Local y Plan Activo. backdrop-filter muestrea lo que hay
   DETRÁS del elemento; como overflow:hidden NO crea backdrop-root, el blur
   muestreaba el backdrop de toda la página cruzando los límites de las cards
   sticky apiladas → durante el scroll el compositor desincroniza y pinta otras
   cards a través. Solución: eliminado el backdrop-filter de esas ilustraciones
   (sustituido por fondo sólido). Aquí, isolation:isolate convierte cada card en
   un grupo de compositing aislado y backdrop-root propio → barrera definitiva
   contra cualquier sangrado entre tarjetas. NO usar transform/will-change:
   promueve a capa GPU y reintroduce desincronización de oclusión. */
.page-servicios .zander-card,
.page-servicios .zander-card-m {
    isolation: isolate;
}
/* Velo de atenuación: aparece cuando la siguiente card se monta encima (clase
   .is-covered la pone JS). z-index 20 > z-index interno máx de ilustraciones (10);
   queda aislado dentro de la card → no afecta el orden entre tarjetas.
   Aplica a desktop (.zander-card) y a móvil/tablet (.zander-card-m). */
.page-servicios .zander-card::after,
.page-servicios .zander-card-m::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #1D1D1B;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 20;
}
.page-servicios .zander-card.is-covered::after,
.page-servicios .zander-card-m.is-covered::after {
    opacity: .35;
}

/* ===== 8. FIX SECTORES: z-index > sticky cards (max 93) pero < header (100) ===== */
.page-servicios .zw-sectores {
    position: relative;
    z-index: 95;
}

/* ===== 9. GRID BACKGROUND en el stack container ===== */
.page-servicios .zander-stack-container {
    background-image:
        linear-gradient(rgba(29, 29, 27, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 29, 27, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ===== 10. Tarjetas desktop: responsive a anchos intermedios =====
   La card desktop tiene altura fija (65vh / min 550px) + overflow:hidden.
   Entre 1025–1400px el texto no cabía y se recortaba (sobre todo la 1, con el
   texto más largo). Escalamos texto, márgenes y padding con el ancho (clamp)
   para que quepa siempre. En PC ancho los clamp topan en los valores originales
   → queda igual que antes. Aplica a TODAS las cards. */
.page-servicios .zander-card .card-text {
    padding: clamp(28px, 4.5vw, 60px) clamp(32px, 5.5vw, 80px);
}
.page-servicios .zander-card .card-explanation p {
    font-size: clamp(13px, 1.2vw, 18px);
    line-height: 1.5;
    margin-bottom: clamp(16px, 2.5vw, 40px);
}
/* Pills: un solo grupo que envuelve (no filas fijas). Al ancho perfecto caben
   en menos filas; al estrechar pasan solas a más, en vez de salirse.
   display:contents disuelve los .__row → las pills fluyen como un solo set. */
.page-servicios .zander-card .v2-card-pills {
    flex-direction: row;
    flex-wrap: wrap;
}
.page-servicios .zander-card .v2-card-pills__row {
    display: contents;
}
.page-servicios .zander-card .v2-card-pill {
    font-size: clamp(13px, 1.05vw, 16px);
}

/* ===== 11. Cards MÓVIL: imagen más pequeña → más texto, y tipografía/padding
   fluidos para adaptarse a cada móvil. Aplica a TODAS las cards móviles. ===== */
@media (max-width: 1024px) {
    .page-servicios .zander-card-m .card-text-m {
        flex: 0 0 60%;
        padding: clamp(22px, 6vw, 35px) clamp(20px, 6vw, 30px);
    }
    .page-servicios .zander-card-m .card-bg-image {
        flex: 0 0 40%;
    }
    .page-servicios .zander-card-m .card-text-m h2 {
        font-size: clamp(24px, 6.5vw, 32px);
        margin: 6px 0 10px;
    }
    .page-servicios .zander-card-m .card-text-m p {
        font-size: clamp(13px, 3.8vw, 17px);
        line-height: 1.45;
        margin-bottom: 16px;
    }
    /* Pills en las cards móviles: envuelven, fuente reducida para que quepan. */
    .page-servicios .zander-card-m .v2-pills-m {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }
    .page-servicios .zander-card-m .v2-pills-m .v2-card-pill {
        font-size: clamp(11px, 3vw, 14px);
        padding: 5px 12px;
    }
}

/* ===== 10. PRICING HEADER: h2 coherente con el resto de la página ===== */
.page-servicios .pricing-header .massive-title {
    font-size: var(--fs-h2) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    line-height: 1.15 !important;
    color: var(--zander-white-soft) !important;
}
.page-servicios .pricing-header .massive-title span {
    display: inline !important;
}
.page-servicios .pricing-header .massive-title .highlight-yellow {
    color: var(--zander-yellow) !important;
    display: inline !important;
}

/* Quitar margen de botón de las price-features ya que no hay botón */
.page-servicios .price-features {
    margin-bottom: 0 !important;
}


/* ===== Pills dentro de las cards de servicios ===== */
.v2-card-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 32px;
}

.v2-card-pills__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.v2-card-pill {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(252, 198, 28, .08);
    color: var(--zander-yellow);
    border: 1px solid rgba(252, 198, 28, .25);
}

/* ===== 4. RESPONSIVE ===== */
@media (max-width: 999.98px) {
    .zw-sectores__grid   { grid-template-columns: 1fr; }
    .zw-sectores         { padding: 80px 0; }
}