/* =========================================================
   FORSÉNTICO
   NOSOTROS — ESTILOS ESPECÍFICOS
   ========================================================= */


/* =========================================================
   HERO — NOSOTROS
   ========================================================= */

.page-internal .hero-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 64px;
}

.page-internal .hero-text h1 {
    font-size: clamp(2.6rem, 3.15vw, 3.75rem);
    line-height: 1.04;
    max-width: 680px;
}

.page-internal .hero-text p {
    max-width: 600px;
    line-height: 1.6;
}

.page-internal .hero-visual {
    height: auto;
}

.page-internal .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   METODOLOGÍA A → T
   ========================================================= */

.at-section {
    padding: 110px 0 120px;
    background: #ffffff;
    overflow: hidden;
}

.at-heading {
    max-width: 860px;
    margin-bottom: 72px;
}

.at-heading h2 {
    margin: 18px 0 24px;
    color: #061956;
    font-size: clamp(2.5rem, 4.6vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.at-heading h2 span {
    display: block;
    color: #275DE1;
}

.at-heading > p {
    max-width: 720px;
    margin: 0;
    color: #4f5870;
    font-size: 1.08rem;
    line-height: 1.75;
}


/* Recorrido A → T */

.at-journey {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        110px
        minmax(0, 1fr)
        110px
        minmax(0, 1fr);

    gap: 24px;
    align-items: center;
}


/* Etapas */

.at-stage {
    min-width: 0;
    text-align: center;
}

.at-symbol {
    width: min(100%, 220px);
    aspect-ratio: 1;
    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.at-symbol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.at-number {
    display: block;
    margin-bottom: 8px;

    color: #275DE1;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.at-content h3 {
    margin: 0 0 12px;

    color: #061956;
    font-size: clamp(1.7rem, 2.3vw, 2.25rem);
    line-height: 1.1;
}

.at-content p {
    max-width: 300px;
    margin: 0 auto;

    color: #4f5870;
    font-size: 1rem;
    line-height: 1.65;
}


/* Conectores */

.at-connector {
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-connector img {
    display: block;
    width: 100%;
    max-width: 105px;
    height: auto;
}


/* Ritual */

.at-manifesto {
    margin: 72px auto 0;
    text-align: center;

    color: #061956;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.4;
}

.at-manifesto strong {
    color: #275DE1;
}


/* =========================================================
   ANIMACIÓN A → T
   ========================================================= */

.at-reveal {
    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.at-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.at-journey .at-reveal:nth-child(1) {
    transition-delay: 0s;
}

.at-journey .at-reveal:nth-child(2) {
    transition-delay: 0.12s;
}

.at-journey .at-reveal:nth-child(3) {
    transition-delay: 0.24s;
}

.at-journey .at-reveal:nth-child(4) {
    transition-delay: 0.36s;
}

.at-journey .at-reveal:nth-child(5) {
    transition-delay: 0.48s;
}


/* =========================================================
   CÓMO LO HACEMOS
   Del reto a la acción
   ========================================================= */

.process-section {
    padding: 110px 0;

    background: #061956;
    color: #ffffff;
}

.process-heading {
    max-width: 980px;
    margin-bottom: 70px;
}

.process-section .section-label {
    color: #7fb1ff;
    border-color: rgba(127, 177, 255, 0.35);
}

.process-heading h2 {
    margin: 22px 0 0;
    max-width: 950px;

    color: #ffffff;

    font-size: clamp(2.2rem, 3.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.process-heading h2 span {
    color: #7fb1ff;
}


/* Recorrido */

.process-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 28px;
}


/* Línea de avance */

.process-grid::before {
    content: "";

    position: absolute;
    top: 19px;
    left: 20px;
    right: 20px;

    height: 2px;

    background: linear-gradient(
        90deg,
        #275DE1 0%,
        #7FB1FF 100%
    );

    opacity: 0.55;
}


/* Etapa */

.process-step {
    position: relative;
    z-index: 1;

    padding-top: 62px;
}


/* Punto */

.process-step::before {
    content: "";

    position: absolute;
    top: 10px;
    left: 0;

    width: 20px;
    height: 20px;

    border: 5px solid #061956;
    border-radius: 50%;

    background: #7FB1FF;

    box-shadow:
        0 0 0 2px rgba(127, 177, 255, 0.45);
}


/* Número */

.process-number {
    display: block;
    margin-bottom: 12px;

    color: #7FB1FF;

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}


/* Nombre */

.process-step h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 1.45rem;
    line-height: 1.15;
}


/* Pregunta */

.process-step p {
    margin: 0;
    max-width: 240px;

    color: rgba(255, 255, 255, 0.74);

    font-size: 1rem;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 950px) {

    .at-section {
        padding: 90px 0;
    }

    .at-heading {
        margin-bottom: 56px;
    }

    .at-journey {
        grid-template-columns: 1fr;
        gap: 28px;

        max-width: 520px;
        margin: 0 auto;
    }

    .at-symbol {
        width: 190px;
        margin-bottom: 20px;
    }

    .at-connector {
        width: 72px;
        margin: 0 auto;

        transform: rotate(90deg);
    }

    .at-content p {
        max-width: 360px;
    }

    .at-manifesto {
        margin-top: 56px;
    }
}


/* =========================================================
   RESPONSIVE — 900px
   ========================================================= */

@media (max-width: 900px) {

    /* Hero */

    .page-internal .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-internal .hero-text h1 {
        font-size: clamp(2.4rem, 8vw, 3.5rem);
        line-height: 1;
    }


    /* Cómo lo hacemos */

    .process-section {
        padding: 80px 0;
    }

    .process-heading {
        margin-bottom: 55px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 0;

        padding-left: 34px;
    }

    .process-grid::before {
        top: 8px;
        bottom: 8px;
        left: 9px;
        right: auto;

        width: 2px;
        height: auto;
    }

    .process-step {
        padding:
            0
            0
            42px
            28px;
    }

    .process-step:last-child {
        padding-bottom: 0;
    }

    .process-step::before {
        top: 2px;
        left: -34px;
    }

    .process-step p {
        max-width: 560px;
    }
}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .at-section {
        padding: 70px 0 76px;
    }
    .page-internal .starting-point-section {
    padding-bottom: 35px;
    }

    .page-internal .at-section {
    padding-top: 35px;
    }
    .at-heading {
        margin-bottom: 48px;
    }

    .at-heading h2 {
        font-size: clamp(2.15rem, 10vw, 3.2rem);
        line-height: 1.05;
    }

    .at-heading > p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .at-symbol {
        width: 165px;
    }

    .at-journey {
        gap: 24px;
    }

    .at-manifesto {
        font-size: 1.25rem;
    }

    .process-heading h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}


/* =========================================================
   ACCESIBILIDAD
   Reduce motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .at-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* =========================================================
   IMPACTO
   Personas → Equipos → Organización
   ========================================================= */

.impact-section {
    padding: 105px 0 115px;
    background: #f5f7fb;
    overflow: hidden;
}

.impact-heading {
    max-width: 1050px;
    margin-bottom: 70px;
}

.impact-heading h2 {
    max-width: 1000px;
    margin: 20px 0 22px;

    color: #061956;
    font-size: clamp(2.5rem, 3.25vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.impact-heading h2 span {
    display: block;
    color: #275DE1;
}

.impact-heading > p {
    max-width: 820px;
    margin: 0;

    color: #4f5870;
    font-size: 1.08rem;
    line-height: 1.7;
}


/* Composición */

.impact-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 72px;
    align-items: center;
}


/* Gráfico de expansión */

.impact-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.impact-visual img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
}


/* Personas → Equipos → Organización */

.impact-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.impact-level {
    min-width: 0;
    padding: 22px 28px;

    border-left: 1px solid rgba(6, 25, 86, 0.14);
}

.impact-level:first-child {
    border-left: 3px solid #275DE1;
}

.impact-number {
    display: block;
    margin-bottom: 14px;

    color: #275DE1;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.impact-level h3 {
    margin: 0 0 12px;

    color: #061956;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.1;
}

.impact-level p {
    margin: 0;

    color: #4f5870;
    font-size: 0.98rem;
    line-height: 1.6;
}


/* =========================================================
   IMPACTO — RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .impact-layout {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .impact-visual img {
        max-width: 330px;
    }

    .impact-levels {
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .impact-section {
        padding: 75px 0 85px;
    }

    .impact-heading {
        margin-bottom: 48px;
    }

    .impact-heading h2 {
        font-size: clamp(2.1rem, 9vw, 3.2rem);
    }

    .impact-layout {
        gap: 40px;
    }

    .impact-visual img {
        max-width: 260px;
    }

    .impact-levels {
        grid-template-columns: 1fr;
    }

    .impact-level {
        padding: 20px 0 20px 24px;
        border-left: 2px solid rgba(39, 93, 225, 0.2);
    }

    .impact-level:first-child {
        border-left: 3px solid #275DE1;
    }
}
/* =========================================================
   EVIDENCIA Y RESPALDO
   ========================================================= */

.evidence-section {
    padding: 105px 0;
    background: #ffffff;
}

.evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 90px;
    align-items: center;
}

.evidence-heading h2 {
    max-width: 800px;
    margin: 20px 0 0;

    color: #061956;
    font-size: clamp(2.3rem, 3.2vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.evidence-heading h2 span {
    display: block;
    color: #275DE1;
}

.evidence-content > p {
    margin: 0 0 34px;
    max-width: 560px;

    color: #4f5870;
    font-size: 1.05rem;
    line-height: 1.75;
}

.evidence-brand {
    padding: 28px 30px;

    border-left: 4px solid #275DE1;
    background: #f5f7fb;
}

.evidence-brand span {
    display: block;
    margin-bottom: 10px;

    color: #275DE1;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.evidence-brand strong {
    display: block;

    color: #061956;
    font-size: 1.2rem;
    line-height: 1.5;
}

@media (max-width: 900px) {

    .evidence-section {
        padding: 80px 0;
    }

    .evidence-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .evidence-content > p {
        max-width: 680px;
    }
}
/* =========================================================
   FORMACIÓN + CONSULTORÍA
   El reto determina cómo acompañamos
   ========================================================= */

.accompaniment-section {
    padding: 110px 0 120px;
    background: #f5f7fb;
}

.accompaniment-heading {
    max-width: 900px;
    margin-bottom: 60px;
}

.accompaniment-heading h2 {
    margin: 20px 0 22px;
    max-width: 820px;

    color: #061956;
    font-size: clamp(2.5rem, 3.8vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.accompaniment-heading h2 span {
    display: block;
    color: #275DE1;
}

.accompaniment-heading > p {
    max-width: 760px;
    margin: 0;

    color: #4f5870;
    font-size: 1.05rem;
    line-height: 1.7;
}


/* Tarjetas */

.accompaniment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.accompaniment-card {
    display: flex;
    flex-direction: column;

    min-height: 360px;
    padding: 38px;

    text-decoration: none;

    background: #ffffff;
    border: 1px solid rgba(6, 25, 86, 0.08);
    border-radius: 24px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.accompaniment-card:hover {
    transform: translateY(-6px);

    border-color: rgba(39, 93, 225, 0.26);

    box-shadow:
        0 18px 40px rgba(6, 25, 86, 0.09);
}

.accompaniment-kicker {
    display: block;
    margin-bottom: 24px;

    color: #275DE1;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.accompaniment-card h3 {
    margin: 0 0 18px;

    max-width: 520px;

    color: #061956;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    line-height: 1.08;
}

.accompaniment-card p {
    margin: 0 0 32px;

    max-width: 520px;

    color: #4f5870;
    font-size: 1rem;
    line-height: 1.65;
}

.accompaniment-link {
    margin-top: auto;

    color: #275DE1;
    font-weight: 700;
    font-size: 0.95rem;
}


/* Responsive */

@media (max-width: 800px) {

    .accompaniment-section {
        padding: 80px 0 90px;
    }

    .accompaniment-grid {
        grid-template-columns: 1fr;
    }

    .accompaniment-card {
        min-height: auto;
    }
}
/* =========================================================
   AJUSTE DE TRANSICIÓN
   Acompañamiento → Clientes
   ========================================================= */

.page-internal .accompaniment-section {
    padding-bottom: 70px;
}

.page-internal .clients-section {
    padding-top: 70px;
}
/* =========================================================
   CTA FINAL
   Pongamos el reto sobre la mesa
   ========================================================= */

.challenge-cta {
    padding: 105px 0;
    background: #061956;
    color: #ffffff;
}

.challenge-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 90px;
    align-items: center;
}

.challenge-cta .section-label {
    color: #7FB1FF;
    border-color: rgba(127, 177, 255, 0.35);
}

.challenge-cta-heading h2 {
    margin: 20px 0 0;

    color: #ffffff;
    font-size: clamp(2.7rem, 4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.challenge-cta-heading h2 span {
    display: block;
    color: #7FB1FF;
}

.challenge-cta-content p {
    margin: 0 0 30px;
    max-width: 560px;

    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.75;
}

.challenge-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0 30px;

    border-radius: 999px;

    background: #ffffff;
    color: #061956;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.challenge-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

@media (max-width: 900px) {

    .challenge-cta {
        padding: 80px 0;
    }

    .challenge-cta-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .challenge-cta-content p {
        max-width: 680px;
    }
}
/* =========================================================
   METODOLOGÍA A → T
   ANIMACIÓN INTERNA DE SVG
   ========================================================= */

.at-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------------------------------------------------------
   ARO GENERAL
   --------------------------------------------------------- */

.at-svg-ring {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* ---------------------------------------------------------
   ESTADO INICIAL — APRENDER
   --------------------------------------------------------- */

.at-learn-person {
    opacity: 0;
    transform: scale(0.65);
    transform-box: fill-box;
    transform-origin: center;
}

.at-learn-pages {
    opacity: 0;
    transform: translateY(18px);
}

.at-learn-book {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
    transform-box: fill-box;
    transform-origin: center bottom;
}

/* ---------------------------------------------------------
   ESTADO INICIAL — APLICAR
   --------------------------------------------------------- */

.at-apply-ring-arrow {
    opacity: 0;
    transform: scale(0.7);
    transform-box: fill-box;
    transform-origin: center;
}

.at-apply-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.at-apply-main-arrow {
    opacity: 0;
    transform: translateX(-28px);
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------------------------------------------------------
   ESTADO INICIAL — TRANSFORMAR
   --------------------------------------------------------- */

.at-transform-bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: center bottom;
}

.at-transform-growth {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.at-transform-arrow {
    opacity: 0;
    transform: translate(-12px, 12px) scale(0.75);
    transform-box: fill-box;
    transform-origin: center;
}

.at-transform-dot {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
}


/* =========================================================
   ACTIVACIÓN
   El .is-visible ya lo añade nuestro sistema at-reveal
   ========================================================= */

/* Aro común */

.at-stage.is-visible .at-svg-ring {
    animation: at-draw 1.15s cubic-bezier(.4, 0, .2, 1) forwards;
}


/* ---------------------------------------------------------
   APRENDER
   --------------------------------------------------------- */

.at-stage.is-visible .at-learn-person {
    animation: at-pop 0.45s ease-out 0.55s forwards;
}

.at-stage.is-visible .at-learn-pages {
    animation: at-rise 0.55s ease-out 0.78s forwards;
}

.at-stage.is-visible .at-learn-book {
    animation: at-book-open 0.7s cubic-bezier(.2, .8, .2, 1) 0.92s forwards;
}


/* ---------------------------------------------------------
   APLICAR
   --------------------------------------------------------- */

.at-stage.is-visible .at-apply-ring-arrow {
    animation: at-pop 0.4s ease-out 0.75s forwards;
}

.at-stage.is-visible .at-apply-line--1 {
    animation: at-draw 0.38s ease-out 0.52s forwards;
}

.at-stage.is-visible .at-apply-line--2 {
    animation: at-draw 0.42s ease-out 0.66s forwards;
}

.at-stage.is-visible .at-apply-line--3 {
    animation: at-draw 0.46s ease-out 0.80s forwards;
}

.at-stage.is-visible .at-apply-main-arrow {
    animation: at-move-right 0.7s cubic-bezier(.2, .8, .2, 1) 0.95s forwards;
}


/* ---------------------------------------------------------
   TRANSFORMAR
   --------------------------------------------------------- */

.at-stage.is-visible .at-transform-dot {
    animation: at-pop 0.32s ease-out 0.48s forwards;
}

.at-stage.is-visible .at-transform-bar--1 {
    animation: at-grow-bar 0.48s ease-out 0.62s forwards;
}

.at-stage.is-visible .at-transform-bar--2 {
    animation: at-grow-bar 0.52s ease-out 0.76s forwards;
}

.at-stage.is-visible .at-transform-bar--3 {
    animation: at-grow-bar 0.56s ease-out 0.90s forwards;
}

.at-stage.is-visible .at-transform-growth {
    animation: at-draw 0.9s cubic-bezier(.4, 0, .2, 1) 1.02s forwards;
}

.at-stage.is-visible .at-transform-arrow {
    animation: at-growth-arrow 0.42s ease-out 1.72s forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes at-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes at-pop {
    from {
        opacity: 0;
        transform: scale(0.65);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes at-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes at-book-open {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes at-move-right {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes at-grow-bar {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes at-growth-arrow {
    from {
        opacity: 0;
        transform: translate(-12px, 12px) scale(0.75);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .at-svg-ring,
    .at-apply-line,
    .at-transform-growth {
        stroke-dashoffset: 0;
    }

    .at-learn-person,
    .at-learn-pages,
    .at-learn-book,
    .at-apply-ring-arrow,
    .at-apply-main-arrow,
    .at-transform-bar,
    .at-transform-arrow,
    .at-transform-dot {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .at-stage.is-visible .at-svg * {
        animation: none;
    }
}