/* =============================================
   pages/servicios-cards.css
   Servicios, parte 2/2: layout editorial por categoria (imagen +
   lista numerada, alternando lados) y transicion de pagina de
   Servicios. Reemplaza el bento de tarjetas repetidas por bloques
   tipo "split" con tipografia grande, inspirado en paginas de
   servicios editoriales (mucho whitespace, sin cajas repetidas).
   Viene de pages/servicios-hero.css.
   ============================================= */

.services-category {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.services-category-visual {
    order: 2;
    position: relative;
}

.services-category-content {
    order: 1;
    position: relative;
}

.services-category--reverse .services-category-visual {
    order: 1;
}

.services-category--reverse .services-category-content {
    order: 2;
}

/* Marco de imagen con relacion de aspecto fija y anillo degradado de marca
   (gradiente + padding en vez de un simple border), para que la foto se
   sienta como pieza editorial y no como thumbnail de card. */
.services-category-visual-frame {
    position: relative;
    aspect-ratio: 4 / 3.2;
    border-radius: 22px;
    overflow: hidden;
    padding: 3px;
    background: linear-gradient(135deg, var(--brand-cyan, var(--cyan-glow)), #1d4ed8);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.services-category-visual-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 19px;
    transition: transform 0.6s var(--ease-out);
}

.services-category:hover .services-category-visual-frame img {
    transform: scale(1.035);
}

/* Insignia con el icono de la categoria, flotando sobre la esquina del
   marco en vez de encimarse a la imagen como el chip pequeno anterior. */
.services-category-badge {
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elevated, #0b1420);
    border: 1px solid var(--glass-border);
    color: var(--brand-cyan, var(--cyan-glow));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.services-category--reverse .services-category-badge {
    left: auto;
    right: -18px;
}

.services-category-badge i {
    width: 26px;
    height: 26px;
}

/* Numero fantasma gigante detras del titulo -- guino tipografico editorial
   que marca "capitulo 01 / 02 / 03" sin agregar otro elemento grafico. */
.services-category-ghost-num {
    position: absolute;
    top: -18px;
    right: 0;
    z-index: 0;
    font-size: clamp(3.5rem, 9vw, 6.5rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--brand-cyan) 45%, transparent);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.services-category--reverse .services-category-ghost-num {
    right: auto;
    left: 0;
}

.services-category-eyebrow,
.services-category-content h2,
.services-category-summary,
.services-list {
    position: relative;
    z-index: 1;
}

.services-category-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-cyan, var(--cyan-glow));
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.services-category-eyebrow i {
    width: 15px;
    height: 15px;
}

.services-category-content h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.15;
    margin-bottom: 12px;
}

.services-category-summary {
    color: var(--soft-text);
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: 28px;
}

/* Lista numerada: cada servicio es una fila con divisor, sin fondo ni
   borde propio -- el espacio en blanco y la tipografia hacen el trabajo
   que antes hacian las cards. */
.services-list {
    list-style: none;
    border-top: 1px solid var(--glass-border);
}

.services-list-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: padding-left var(--duration-base, 0.25s) var(--ease-out),
                background var(--duration-base, 0.25s) var(--ease-out);
}

[data-reveal] .services-list-item {
    opacity: 0;
    transform: translateY(24px);
}

[data-reveal].is-visible .services-list-item {
    animation: services-row-in 0.6s var(--ease-out) both;
    animation-delay: calc(var(--stagger, 0) * 90ms);
}

@keyframes services-row-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] .services-list-item {
        opacity: 1;
        transform: none;
    }

    [data-reveal].is-visible .services-list-item {
        animation: none;
    }
}

.services-list-item:hover {
    padding-left: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-cyan) 8%, transparent), transparent);
}

.services-list-num {
    flex: 0 0 auto;
    width: 28px;
    padding-top: 3px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--brand-cyan, var(--cyan-glow));
}

.services-list-body {
    flex: 1 1 auto;
    min-width: 0;
}

.services-list-body h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.services-list-body p {
    color: var(--soft-text);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* CTA circular de WhatsApp por fila: unico elemento con fondo solido de la
   seccion, para que la accion resalte sobre el resto (texto plano). */
.services-list-cta {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    color: var(--brand-cyan, var(--cyan-glow));
    text-decoration: none;
    opacity: 0.75;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.services-list-cta i {
    width: 18px;
    height: 18px;
}

.services-list-item:hover .services-list-cta,
.services-list-cta:hover,
.services-list-cta:focus-visible {
    opacity: 1;
    color: #04121c;
    background: linear-gradient(135deg, #1d4ed8, #06b6d4);
    border-color: transparent;
    transform: scale(1.06);
    box-shadow: 0 8px 18px rgba(6, 182, 212, 0.35);
}

@media (max-width: 860px) {
    .services-category {
        grid-template-columns: 1fr;
    }

    .services-category-visual {
        order: 1;
    }

    .services-category-content {
        order: 2;
    }

    .services-category--reverse .services-category-visual,
    .services-category--reverse .services-category-content {
        order: initial;
    }

    .services-category-visual-frame {
        aspect-ratio: 16 / 10;
    }

    .services-category-ghost-num {
        right: 0;
        left: auto;
    }
}

@media (max-width: 480px) {
    .services-list-item {
        gap: 12px;
    }

    .services-list-body p {
        font-size: 0.88rem;
    }
}

/* =========================================================
   PAGE TRANSITION (llegada) — Servicios mira "hacia adelante"
   (negocio, avance): entra deslizando desde la derecha + fade.
   Ver components/page-transitions.css.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: pt-servicios-exit var(--duration-base) var(--ease-out);
    }

    ::view-transition-new(root) {
        animation: pt-servicios-enter var(--duration-slow) var(--ease-out);
    }

    @keyframes pt-servicios-exit {
        to { opacity: 0; transform: translateX(16px); }
    }

    @keyframes pt-servicios-enter {
        from { opacity: 0; transform: translateX(24px); }
    }
}

/* =========================================================
   Light theme
   ========================================================= */
body.light-theme .services-category-badge {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-theme .services-list-item {
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-theme .services-list-body p {
    color: #334155;
}

body.light-theme .services-list-cta {
    border-color: rgba(15, 23, 42, 0.16);
}