/* ===== CÓMO TRABAJAMOS =====
   Mismo lenguaje visual que Servicios / Por qué elegirnos,
   en fondo azul oscuro para variar el ritmo de la página. */

.how-we-work {
    padding: 5.5rem 0 5rem;
    background-color: #111111;
    position: relative;
    overflow: hidden;
}

.how-we-work-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* ── Encabezado ── */
.how-we-work .section-header {
    text-align: left;
    margin-bottom: 3rem;
}

.how-badge {
    display: inline-block;
    background: var(--azul-principal);
    color: var(--blanco);
    font-family: 'Barlow Condensed', var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 1.1rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.how-we-work .section-title {
    font-family: 'Barlow Condensed', var(--font-display);
    font-size: clamp(2.8rem, 7vw, 4.2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0;
    color: var(--blanco);
}

/* ── Pasos ── */
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.how-step {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 1.5rem;
}

.how-step-number {
    display: block;
    font-family: 'Barlow Condensed', var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--azul-acento);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.how-step-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--blanco);
    line-height: 1.25;
    margin-bottom: 0.55rem;
}

.how-step-description {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .how-steps {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

@media (max-width: 640px) {
    .how-we-work { padding: 4rem 0 3.5rem; }
}

/* ===== CÓMO TRABAJAMOS — versión sobria: numerales en serifa, líneas finas, mucho aire ===== */
.ct-section { background: #F7F4EE; padding: 5.5rem 0 5rem; }
.ct-inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid #111111; margin-bottom: 0; }
.ct-title { font-family: "Times New Roman", Times, "Liberation Serif", serif; font-weight: 400; font-size: clamp(2.05rem, 4.7vw, 4.4rem); line-height: 1.05; letter-spacing: -0.01em; color: #111111; margin: 0; }
.ct-sub { font-family: "Host Grotesk", system-ui, sans-serif; color: #6B6B6B; font-size: 1.05rem; margin: 0; }
.ct-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ct-step { padding: 3rem 2.5rem 3.25rem 0; border-right: 1px solid #E1DBD1; }
.ct-step + .ct-step { padding-left: 2.5rem; }
.ct-step:last-child { border-right: 0; padding-right: 0; }
.ct-num { display: block; font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.15rem; color: #9A9A9A; letter-spacing: .08em; margin-bottom: 2.4rem; }
.ct-step-title { font-family: "Times New Roman", Times, "Liberation Serif", serif; font-weight: 400; font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.01em; color: #111111; margin: 0 0 .8rem; text-wrap: balance; }
.ct-step-text { font-family: "Host Grotesk", system-ui, sans-serif; color: #6B6B6B; font-size: 1rem; line-height: 1.65; margin: 0; max-width: 32ch; }
.ct-foot { border-top: 1px solid #111111; padding-top: 2.25rem; }
.ct-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: #8FDCCB; color: #0B2F29; font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; padding: 1rem 2.4rem; border-radius: 100px; text-decoration: none; transition: background .2s ease; }
.ct-cta:hover { background: #6FCDB8; color: #0B2F29; }
@media (max-width: 900px) {
    .ct-section { padding: 3.5rem 0 3rem; }
    .ct-head { flex-direction: column; gap: .5rem; padding-bottom: 1.5rem; }
    .ct-steps { grid-template-columns: 1fr; }
    .ct-step, .ct-step + .ct-step { padding: 2rem 0; border-right: 0; border-bottom: 1px solid #E1DBD1; }
    .ct-step:last-child { border-bottom: 0; }
    .ct-num { margin-bottom: 1.1rem; }
    .ct-step-title { font-size: 1.7rem; }
    .ct-foot { padding-top: 1.75rem; }
    .ct-cta { width: 100%; }
}
@media (max-width: 600px) { .ct-inner { padding: 0 1.25rem; } }

/* ===== Recorrido: línea continua con un punto por paso; el último punto es verde agua (llegada) ===== */
.ct-steps { position: relative; padding-top: 2.75rem; }
.ct-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #111111; }
.ct-step { position: relative; border-right: 0 !important; }
.ct-step::before { content: ""; position: absolute; top: -2.75rem; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #111111; transform: translateY(-5px); }
.ct-step:last-child::before { background: #8FDCCB; box-shadow: 0 0 0 4px rgba(143,220,203,.35); }
.ct-num { display: inline-flex; align-items: center; gap: .6rem; }
.ct-step:not(:last-child) .ct-num::after { content: "→"; font-style: normal; color: #C9BFB0; font-size: 1.1rem; }
.ct-step:last-child .ct-num { color: #2BAA95; }
.ct-head { border-bottom: 0; padding-bottom: 1.75rem; }
@media (max-width: 900px) {
    .ct-steps { padding-top: 0; padding-left: 2rem; }
    .ct-steps::before { left: 5px; right: auto; top: .6rem; bottom: 1.4rem; width: 1px; height: auto; }
    .ct-step, .ct-step + .ct-step { border-bottom: 0 !important; padding: 0 0 2.4rem; }
    .ct-step::before { top: .45rem; left: -2rem; transform: none; }
    .ct-step:last-child { padding-bottom: .5rem; }
}
.ct-section { background: #FFFFFF; }

/* Sin líneas: el recorrido lo marcan solo los numerales con flecha */
.ct-steps::before, .ct-step::before { display: none !important; }
.ct-steps { padding-top: 1rem; }
.ct-foot { border-top: 0; padding-top: 1rem; }
.ct-head { border-bottom: 0; }
.ct-step, .ct-step + .ct-step { border: 0 !important; }
@media (max-width: 900px) { .ct-steps { padding-left: 0; } }

/* ===== Íconos: círculo de trazo fino, ícono liviano; el último en verde agua ===== */
.ct-icon { width: 64px; height: 64px; border: 1px solid #111111; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; color: #111111; background: #FFFFFF; transition: background .25s ease, color .25s ease, transform .25s ease; }
.ct-icon i { font-size: 1.35rem; }
.ct-step:hover .ct-icon { background: #111111; color: #FFFFFF; transform: translateY(-2px); }
.ct-step:last-child .ct-icon { border-color: #8FDCCB; background: #8FDCCB; color: #0B2F29; }
.ct-step:last-child:hover .ct-icon { background: #6FCDB8; color: #0B2F29; }
.ct-num { margin-bottom: 1.2rem; }
@media (max-width: 900px) { .ct-icon { width: 56px; height: 56px; margin-bottom: 1rem; } .ct-icon i { font-size: 1.2rem; } .ct-num { margin-bottom: .8rem; } }

/* ===== Sin flecha en el numeral; línea de progreso a la izquierda (solo celular) ===== */
.ct-step:not(:last-child) .ct-num::after { display: none !important; content: none !important; }
.ct-line { display: none; }
@media (max-width: 900px) {
    .ct-steps { position: relative; padding-left: 1.75rem; }
    .ct-line { display: block; position: absolute; left: 0; top: .5rem; bottom: 1rem; width: 2px; background: #EDE7DD; border-radius: 2px; overflow: hidden; }
    .ct-line-fill { display: block; width: 100%; height: 0; background: #111111; transition: height .12s linear; }
}

/* Íconos PNG (línea negra sobre transparente) dentro del círculo; se invierten al pasar el mouse */
.ct-icon img { width: 32px; height: 32px; display: block; transition: filter .25s ease; }
.ct-step:hover .ct-icon img { filter: invert(1); }
.ct-step:last-child .ct-icon img, .ct-step:last-child:hover .ct-icon img { filter: none; }
@media (max-width: 900px) { .ct-icon img { width: 28px; height: 28px; } }
/* Íconos y círculo más grandes */
.ct-icon { width: 84px; height: 84px; margin-bottom: 1.6rem; }
.ct-icon img { width: 42px; height: 42px; }
@media (max-width: 900px) { .ct-icon { width: 72px; height: 72px; margin-bottom: 1.2rem; } .ct-icon img { width: 36px; height: 36px; } }
/* Sin hover en los íconos */
.ct-step:hover .ct-icon { background: #FFFFFF; color: #111111; transform: none; }
.ct-step:hover .ct-icon img { filter: none; }
.ct-step:last-child:hover .ct-icon { background: #8FDCCB; }
.ct-icon { transition: none; }

/* Paso 3: en celular arranca blanco y se pone verde agua cuando la línea llega al final */
.ct-icon { transition: background .35s ease, border-color .35s ease; }
@media (max-width: 900px) {
    .ct-step:last-child .ct-icon, .ct-step:last-child:hover .ct-icon { background: #FFFFFF; border-color: #111111; }
    .ct-step:last-child.is-done .ct-icon { background: #8FDCCB; border-color: #8FDCCB; }
}