/* =========================================================
   OPEN VISION
   PROCEDURE.CSS COMPLETO
   PÁGINAS INDIVIDUALES DE PROCEDIMIENTOS
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --cyan: #2099cc;
    --blue: #2879c6;
    --indigo: #3154b9;
    --violet: #3925a8;

    --dark: #25217d;
    --deep: #18165c;

    --text: #252c54;
    --muted: #707895;

    --white: #ffffff;

    --bg: #f7f9ff;
    --bg-blue: #f1f7fd;
    --bg-violet: #f5f3ff;

    --border:
        rgba(49, 84, 185, 0.14);

    --shadow:
        0 25px 70px
        rgba(49, 84, 185, 0.14);

    --shadow-soft:
        0 14px 40px
        rgba(49, 84, 185, 0.08);

    --gradient:
        linear-gradient(
            120deg,
            #2099cc 0%,
            #2879c6 35%,
            #3154b9 68%,
            #3925a8 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #3154b9 0%,
            #3925a8 58%,
            #25217d 100%
        );

    --container: 1240px;

}



/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 100px;

}


body {

    font-family:
        "DM Sans",
        sans-serif;

    color: var(--text);

    background: white;

    line-height: 1.65;

    overflow-x: hidden;

}


h1,
h2,
h3,
h4 {

    font-family:
        "Manrope",
        sans-serif;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font: inherit;

}


img {

    display: block;

    max-width: 100%;

}


.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;

}


::selection {

    color: var(--violet);

    background:
        rgba(32, 153, 204, 0.20);

}



/* =========================================================
   BOTONES
========================================================= */

.btn {

    min-height: 48px;

    padding:
        13px 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 999px;

    font-size: 0.88rem;

    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    color: white;

    background:
        var(--gradient);

    box-shadow:
        0 15px 35px
        rgba(49, 84, 185, 0.23);

}


.btn-primary:hover {

    box-shadow:
        0 20px 45px
        rgba(57, 37, 168, 0.28);

}


.btn-light {

    color: var(--indigo);

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid
        var(--border);

}



/* =========================================================
   HEADER
========================================================= */

.procedure-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid
        rgba(49, 84, 185, 0.08);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.procedure-header.scrolled {

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 10px 35px
        rgba(49, 84, 185, 0.08);

}


.procedure-header-inner {

    min-height: 88px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

}


.procedure-logo {

    flex-shrink: 0;

}


.procedure-logo img {

    width: 185px;

}


.procedure-header-actions {

    display: flex;

    align-items: center;

    gap: 22px;

}


.back-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--indigo);

    font-size: 0.8rem;

    font-weight: 700;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.back-link:hover {

    color: var(--violet);

    transform:
        translateX(-3px);

}



/* =========================================================
   HERO
========================================================= */

.procedure-hero {

    position: relative;

    min-height: 880px;

    padding:
        180px 0
        105px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 82% 23%,
            rgba(32, 153, 204, 0.15),
            transparent 30%
        ),

        radial-gradient(
            circle at 77% 85%,
            rgba(57, 37, 168, 0.09),
            transparent 31%
        ),

        linear-gradient(
            180deg,
            #ffffff,
            #f4f6ff
        );

}


.procedure-watermark {

    position: absolute;

    width: 760px;

    top: 55px;
    right: -225px;

    opacity: 0.035;

    transform:
        rotate(-7deg);

    pointer-events: none;

}


.procedure-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 70px;

    align-items: center;

}


.procedure-eyebrow {

    margin-bottom: 17px;

    color: var(--indigo);

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing: 0.17em;

}


.procedure-hero h1 {

    max-width: 760px;

    color: var(--text);

    font-size:
        clamp(
            4rem,
            7vw,
            6.8rem
        );

    line-height: 0.96;

    letter-spacing: -0.06em;

}


.procedure-hero h1 span {

    display: block;

    margin-top: 10px;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.procedure-lead {

    max-width: 625px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 1.05rem;

}


.procedure-actions {

    margin-top: 31px;

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

}



/* =========================================================
   HERO VISUAL
========================================================= */

.procedure-visual {

    position: relative;

    min-width: 0;

    height: 540px;

    display: flex;

    align-items: center;
    justify-content: center;

}


.procedure-orbit {

    position: relative;

    width:
        min(
            450px,
            100%
        );

    aspect-ratio: 1;

    display: flex;

    align-items: center;
    justify-content: center;

}


.procedure-orbit::before,
.procedure-orbit::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(49, 84, 185, 0.16);

}


.procedure-orbit::before {

    width: 100%;
    height: 100%;

    animation:
        procedureSpin
        28s
        linear
        infinite;

}


.procedure-orbit::after {

    width: 76%;
    height: 76%;

    border-style: dashed;

    animation:
        procedureSpinReverse
        24s
        linear
        infinite;

}


.procedure-orbit img {

    position: relative;

    z-index: 2;

    width: 68%;

    max-width: 315px;

    filter:
        drop-shadow(
            0 25px 45px
            rgba(49, 84, 185, 0.20)
        );

    animation:
        procedureFloat
        6s
        ease-in-out
        infinite;

}


.procedure-floating {

    position: absolute;

    z-index: 5;

    right: 0;
    bottom: 55px;

    max-width: 245px;

    padding: 20px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.90);

    border:
        1px solid
        rgba(49, 84, 185, 0.10);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

}


.procedure-floating span {

    display: block;

    color: var(--cyan);

    font-size: 0.59rem;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.procedure-floating strong {

    display: block;

    margin-top: 6px;

    color: var(--indigo);

    font-size: 0.88rem;

    line-height: 1.35;

}



/* =========================================================
   INTRO
========================================================= */

.procedure-intro {

    padding:
        120px 0;

    background: white;

}


.procedure-intro-grid {

    display: grid;

    grid-template-columns:
        0.72fr 1.28fr;

    gap: 90px;

    align-items: start;

}


.section-number {

    display: block;

    margin-bottom: 14px;

    color: var(--cyan);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.procedure-intro h2,
.content-heading h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.8rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.procedure-intro h2 span,
.content-heading h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.intro-copy {

    padding-top: 30px;

    color: var(--muted);

    font-size: 1rem;

}


.intro-copy p + p {

    margin-top: 18px;

}


.intro-copy strong {

    color: var(--indigo);

}



/* =========================================================
   PROCEDURE CONTENT
========================================================= */

.procedure-content {

    padding:
        120px 0;

    background:

        radial-gradient(
            circle at 92% 10%,
            rgba(32, 153, 204, 0.06),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            #f8faff,
            #f2f5fd
        );

}


.content-heading {

    max-width: 850px;

    margin-bottom: 58px;

}



/* =========================================================
   INFO CARDS
========================================================= */

.info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;

}


.info-card {

    min-width: 0;

    min-height: 315px;

    padding: 29px;

    display: flex;

    flex-direction: column;

    border-radius: 28px;

    background: white;

    border:
        1px solid
        var(--border);

    box-shadow:
        0 8px 30px
        rgba(49, 84, 185, 0.04);

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

}


.info-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(49, 84, 185, 0.23);

    box-shadow:
        var(--shadow);

}


.info-index {

    display: block;

    margin-bottom: auto;

    color: var(--cyan);

    font-size: 0.63rem;

    font-weight: 800;

    letter-spacing: 0.10em;

}


.info-card h3 {

    margin-top: 60px;

    color: var(--text);

    font-size: 1.45rem;

    line-height: 1.2;

}


.info-card p {

    margin-top: 11px;

    color: var(--muted);

    font-size: 0.86rem;

}



/* =========================================================
   AVISO MÉDICO
========================================================= */

.medical-disclaimer {

    max-width: 850px;

    margin:
        48px auto
        0;

    padding:
        19px 23px;

    border-radius: 18px;

    color: var(--muted);

    background:
        rgba(49, 84, 185, 0.055);

    border:
        1px solid
        var(--border);

    font-size: 0.78rem;

    line-height: 1.6;

    text-align: center;

}



/* =========================================================
   SECCIÓN AZUL / DISEÑO VISUAL OSCURA
========================================================= */

.visual-philosophy {

    padding:
        120px 0;

    color: white;

    background:

        radial-gradient(
            circle at 85% 18%,
            rgba(32, 153, 204, 0.25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #294bac,
            #3528a5 52%,
            #21166c
        );

}


.visual-philosophy
.content-heading h2 {

    color: white;

}


.visual-philosophy-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

}


.visual-philosophy h2 {

    color: white;

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.7rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.visual-philosophy h2 span {

    display: block;

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

}


.visual-philosophy-copy {

    padding: 31px;

    border-radius: 27px;

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    backdrop-filter:
        blur(14px);

}


.visual-philosophy-copy p {

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

}


.visual-philosophy-copy p + p {

    margin-top: 16px;

}



/* =========================================================
   PASO A PASO
========================================================= */

.procedure-steps {

    margin-top: 58px;

    display: grid;

    gap: 16px;

}


.procedure-step {

    min-height: 270px;

    padding: 30px;

    display: grid;

    grid-template-columns:
        60px 210px 1fr;

    gap: 30px;

    align-items: center;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    transition:
        transform 0.35s ease,
        background 0.35s ease;

}


.procedure-step:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255, 255, 255, 0.13);

}


.step-number {

    color: #83e8f5;

    font-size: 0.7rem;

    font-weight: 800;

}


.step-visual {

    min-height: 190px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

}


.step-visual img {

    width: 130px;

    opacity: 0.70;

    filter:
        brightness(0)
        invert(1);

}


.step-label {

    color: #83e8f5 !important;

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.14em;

}


.step-copy h3 {

    margin-top: 8px;

    color: white;

    font-size: 1.5rem;

    line-height: 1.25;

}


.step-copy
> p:last-child {

    margin-top: 12px;

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

}



/* =========================================================
   COMPARACIÓN
========================================================= */

.procedure-comparison {

    padding:
        120px 0;

    background: white;

}


.comparison-heading {

    max-width: 850px;

}


.comparison-heading h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.8rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.comparison-heading h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.comparison-heading
> p:last-child {

    max-width: 640px;

    margin-top: 20px;

    color: var(--muted);

}


.comparison-grid {

    margin-top: 55px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;

}


.comparison-card {

    min-width: 0;

    min-height: 290px;

    padding: 29px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border-radius: 28px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(32, 153, 204, 0.08),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #f6faff,
            #f5f1ff
        );

    border:
        1px solid
        var(--border);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.comparison-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow);

}


.comparison-card
> span {

    margin-bottom: auto;

    color: var(--cyan);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.comparison-card h3 {

    color: var(--text);

    font-size: 1.45rem;

}


.comparison-card p {

    margin-top: 10px;

    color: var(--muted);

}



/* =========================================================
   RECUPERACIÓN
========================================================= */

.recovery-section {

    padding:
        120px 0;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(32, 153, 204, 0.08),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #f6f8ff,
            #f3f4ff
        );

}


.recovery-grid {

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 80px;

    align-items: center;

}


.recovery-copy h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.5vw,
            4.5rem
        );

    line-height: 1.05;

    letter-spacing: -0.05em;

}


.recovery-copy h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.recovery-copy
> p:not(.procedure-eyebrow) {

    margin-top: 18px;

    color: var(--muted);

}


.recovery-timeline {

    display: grid;

    gap: 13px;

}


.timeline-item {

    padding: 24px;

    display: grid;

    grid-template-columns:
        50px 1fr;

    gap: 18px;

    align-items: start;

    border-radius: 22px;

    background: white;

    border:
        1px solid
        var(--border);

    box-shadow:
        0 7px 25px
        rgba(49, 84, 185, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.timeline-item:hover {

    transform:
        translateX(5px);

    box-shadow:
        var(--shadow-soft);

}


.timeline-item
> span {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        var(--gradient);

    font-size: 0.67rem;

    font-weight: 800;

}


.timeline-item h3 {

    color: var(--text);

    font-size: 1.1rem;

}


.timeline-item p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 0.84rem;

}



/* =========================================================
   BENEFICIOS Y CONSIDERACIONES
========================================================= */

.benefits-section {

    padding:
        120px 0;

    background: white;

}


.benefits-heading {

    max-width: 800px;

}


.benefits-heading h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.6vw,
            4.6rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.benefits-heading h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.benefits-grid {

    margin-top: 55px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 17px;

}


.benefit-panel {

    min-width: 0;

    min-height: 350px;

    padding: 36px;

    border-radius: 29px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(32, 153, 204, 0.08),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #f6f7ff,
            #eef8fd
        );

    border:
        1px solid
        var(--border);

}


.benefit-positive {

    color: white;

    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(32, 153, 204, 0.25),
            transparent 32%
        ),

        var(--gradient-dark);

}


.benefit-title {

    color: var(--indigo);

    font-size: 0.64rem;

    font-weight: 800;

    letter-spacing: 0.14em;

}


.benefit-positive
.benefit-title {

    color: #83e8f5;

}


.benefit-panel ul {

    margin-top: 28px;

    padding-left: 20px;

}


.benefit-panel li {

    margin-bottom: 18px;

    color: var(--muted);

}


.benefit-positive li {

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

}



/* =========================================================
   DISEÑO VISUAL PROCEDIMIENTO
========================================================= */

.procedure-design-visual {

    position: relative;

    padding:
        120px 0;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 90% 12%,
            rgba(57, 37, 168, 0.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #eefaff,
            #f4f0ff
        );

}


.design-watermark {

    position: absolute;

    width: 650px;

    right: -200px;
    top: -90px;

    opacity: 0.04;

    pointer-events: none;

}


.design-visual-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 80px;

    align-items: center;

}


.design-visual-grid h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.7vw,
            4.7rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.design-visual-grid h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.design-visual-card {

    padding: 34px;

    border-radius: 29px;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

}


.design-visual-card
> p {

    color: var(--muted);

}


.visual-distance-list {

    margin:
        25px 0;

    display: grid;

    gap: 10px;

}


.visual-distance-list div {

    padding: 15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-radius: 15px;

    background:
        rgba(49, 84, 185, 0.045);

    border:
        1px solid
        rgba(49, 84, 185, 0.07);

}


.visual-distance-list span {

    color: var(--cyan);

    font-size: 0.6rem;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.visual-distance-list strong {

    color: var(--indigo);

    font-size: 0.82rem;

}



/* =========================================================
   VIDEO EDUCATIVO
========================================================= */

.procedure-video-section {

    padding:
        120px 0;

    background: white;

}


.procedure-video-card {

    min-height: 500px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    overflow: hidden;

    border-radius: 32px;

    background:
        var(--gradient-dark);

    box-shadow:
        var(--shadow);

}


.procedure-video-preview {

    position: relative;

    min-height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle,
            rgba(32, 153, 204, 0.40),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            #2099cc,
            #3154b9 55%,
            #3925a8
        );

}


.procedure-video-preview img {

    position: absolute;

    width: 72%;

    opacity: 0.16;

}


.procedure-play {

    position: relative;

    z-index: 2;

    width: 82px;
    height: 82px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--violet);

    background: white;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.17);

    font-size: 1.4rem;

}


.procedure-video-preview
> span {

    position: absolute;

    left: 20px;
    bottom: 20px;

    padding:
        6px 10px;

    border-radius: 999px;

    color: white;

    background:
        rgba(255, 255, 255, 0.10);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.13em;

}


.procedure-video-copy {

    padding: 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.procedure-video-copy
.procedure-eyebrow {

    color: #83e8f5;

}


.procedure-video-copy h2 {

    color: white;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    line-height: 1.05;

    letter-spacing: -0.04em;

}


.procedure-video-copy h2 span {

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

}


.procedure-video-copy
> p:not(.procedure-eyebrow) {

    margin-top: 18px;

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

}


.coming-video {

    width: fit-content;

    margin-top: 25px;

    padding:
        7px 11px;

    border-radius: 999px;

    color: #83e8f5;

    background:
        rgba(131, 232, 245, 0.12);

    font-size: 0.7rem;

    font-weight: 700;

}



/* =========================================================
   TESTIMONIOS
========================================================= */

.procedure-testimonials {

    padding:
        120px 0;

    background:

        radial-gradient(
            circle at 92% 12%,
            rgba(32, 153, 204, 0.06),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #f7f9ff,
            #ffffff
        );

}


.testimonial-heading {

    display: grid;

    grid-template-columns:
        1fr 0.45fr;

    gap: 60px;

    align-items: end;

}


.testimonial-heading h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.6vw,
            4.6rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.testimonial-heading h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.testimonial-heading
> p {

    color: var(--muted);

}


.testimonial-placeholder {

    position: relative;

    margin-top: 55px;

    min-height: 280px;

    padding: 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    border-radius: 30px;

    border:
        1px dashed
        rgba(49, 84, 185, 0.25);

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(32, 153, 204, 0.08),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #f5faff,
            #f6f2ff
        );

}


.testimonial-placeholder
> span {

    color: var(--cyan);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.14em;

}


.testimonial-placeholder h3 {

    margin-top: 8px;

    color: var(--text);

    font-size: 2rem;

}


.testimonial-placeholder p {

    max-width: 520px;

    margin-top: 10px;

    color: var(--muted);

}



/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding:
        120px 0;

    background: white;

}


.faq-heading {

    max-width: 800px;

}


.faq-heading h2 {

    color: var(--text);

    font-size:
        clamp(
            2.8rem,
            4.6vw,
            4.6rem
        );

    line-height: 1.04;

    letter-spacing: -0.05em;

}


.faq-heading h2 span {

    display: block;

    background:
        var(--gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.faq-list {

    margin-top: 50px;

    border-top:
        1px solid
        var(--border);

}


.faq-item {

    padding:
        24px 0;

    border-bottom:
        1px solid
        var(--border);

}


.faq-item summary {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: var(--text);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.13rem;

    font-weight: 700;

    cursor: pointer;

    list-style: none;

}


.faq-item summary::-webkit-details-marker {

    display: none;

}


.faq-item summary span {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--violet);

    background:
        rgba(49, 84, 185, 0.06);

    font-size: 1.3rem;

}


.faq-item[open]
summary {

    color: var(--indigo);

}


.faq-item p {

    max-width: 780px;

    padding-top: 16px;

    color: var(--muted);

}



/* =========================================================
   CTA FINAL
========================================================= */

.procedure-cta {

    padding:
        120px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f6ff
        );

}


.procedure-cta-box {

    position: relative;

    min-height: 350px;

    padding: 60px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 55px;

    align-items: center;

    overflow: hidden;

    border-radius: 34px;

    color: white;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(32, 153, 204, 0.28),
            transparent 32%
        ),

        var(--gradient-dark);

    box-shadow:
        var(--shadow);

}


.procedure-cta-box::after {

    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

}


.procedure-cta h2 {

    max-width: 750px;

    color: white;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    line-height: 1.05;

    letter-spacing: -0.045em;

}


.procedure-cta p {

    max-width: 620px;

    margin-top: 15px;

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

}


.final-cta-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.final-cta-actions
.btn {

    min-width: 190px;

    white-space: nowrap;

    color: var(--indigo);

    background: white;

}


.final-cta-actions
.btn:hover {

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.15);

}



/* =========================================================
   FOOTER
========================================================= */

.procedure-footer {

    padding:
        60px 0
        28px;

    background:

        linear-gradient(
            180deg,
            #f7f8ff,
            #eef2ff
        );

}


.procedure-footer-main {

    padding-bottom: 40px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

}


.procedure-footer-main img {

    width: 225px;

}


.procedure-footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    color: var(--muted);

    font-size: 0.8rem;

}


.procedure-footer-links a {

    transition:
        color 0.25s ease;

}


.procedure-footer-links a:hover {

    color: var(--violet);

}


.procedure-footer-bottom {

    padding-top: 22px;

    color: var(--muted);

    border-top:
        1px solid
        var(--border);

    font-size: 0.72rem;

}



/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */

.procedure-whatsapp {

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        var(--gradient);

    box-shadow:
        0 18px 45px
        rgba(49, 84, 185, 0.30);

    font-size: 0.72rem;

    font-weight: 800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.procedure-whatsapp:hover {

    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 22px 52px
        rgba(57, 37, 168, 0.34);

}



/* =========================================================
   ANIMACIONES DE SCROLL
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(32px);

    transition:

        opacity
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* =========================================================
   ANIMACIONES HERO
========================================================= */

@keyframes procedureFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


@keyframes procedureSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes procedureSpinReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}



/* =========================================================
   TABLET GRANDE
========================================================= */

@media
(max-width: 1050px) {

    .procedure-header-actions
    .btn {

        display: none;

    }


    .procedure-hero-grid {

        grid-template-columns:
            1fr 0.85fr;

        gap: 40px;

    }


    .info-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .comparison-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}



/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {

    .procedure-hero {

        min-height: auto;

        padding:
            150px 0
            85px;

    }


    .procedure-hero-grid,
    .procedure-intro-grid,
    .visual-philosophy-grid,
    .recovery-grid,
    .design-visual-grid,
    .testimonial-heading {

        grid-template-columns:
            1fr;

    }


    .procedure-hero-grid {

        gap: 20px;

    }


    .procedure-visual {

        height: 470px;

    }


    .procedure-orbit {

        width:
            min(
                410px,
                85vw
            );

    }


    .procedure-floating {

        right: 8%;
    }


    .procedure-intro-grid {

        gap: 25px;

    }


    .intro-copy {

        padding-top: 0;

    }


    .info-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .procedure-step {

        grid-template-columns:
            50px 1fr;

        gap: 20px;

    }


    .step-number {

        grid-row:
            1 / span 2;

    }


    .step-visual {

        grid-column: 2;

    }


    .step-copy {

        grid-column: 2;

    }


    .comparison-grid {

        grid-template-columns:
            1fr;

    }


    .comparison-card {

        min-height: 240px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .procedure-video-card {

        grid-template-columns:
            1fr;

    }


    .procedure-video-preview {

        min-height: 350px;

    }


    .testimonial-heading {

        gap: 20px;

    }


    .procedure-cta-box {

        grid-template-columns:
            1fr;

        padding: 48px;

    }


    .final-cta-actions {

        flex-direction: row;

        flex-wrap: wrap;

    }


    .procedure-footer-main {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* =========================================================
   CELULAR
========================================================= */

@media
(max-width: 620px) {

    .container {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );

    }


    .procedure-header-inner {

        min-height: 74px;

        gap: 12px;

    }


    .procedure-logo img {

        width: 148px;

    }


    .back-link {

        width: 42px;
        height: 42px;

        justify-content: center;

        border-radius: 50%;

        background:
            rgba(49, 84, 185, 0.07);

    }


    .back-link span {

        display: none;

    }


    .procedure-hero {

        padding:
            120px 0
            68px;

    }


    .procedure-watermark {

        width: 470px;

        right: -280px;
        top: 95px;

    }


    .procedure-hero h1 {

        font-size:
            clamp(
                3.2rem,
                16vw,
                4.6rem
            );

    }


    .procedure-lead {

        font-size: 0.95rem;

    }


    .procedure-actions {

        flex-direction: column;

    }


    .procedure-actions
    .btn {

        width: 100%;

    }


    .procedure-visual {

        height: 350px;

        margin-top: 15px;

    }


    .procedure-orbit {

        width: 285px;

    }


    .procedure-orbit img {

        width: 205px;

    }


    .procedure-floating {

        right: -7px;
        bottom: 10px;

        max-width: 190px;

        padding: 15px;

    }


    .procedure-intro,
    .procedure-content,
    .visual-philosophy,
    .procedure-comparison,
    .recovery-section,
    .benefits-section,
    .procedure-design-visual,
    .procedure-video-section,
    .procedure-testimonials,
    .faq-section,
    .procedure-cta {

        padding:
            80px 0;

    }


    .procedure-intro h2,
    .content-heading h2,
    .visual-philosophy h2,
    .comparison-heading h2,
    .recovery-copy h2,
    .benefits-heading h2,
    .design-visual-grid h2,
    .testimonial-heading h2,
    .faq-heading h2,
    .procedure-cta h2 {

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.3rem
            );

    }


    .content-heading {

        margin-bottom: 40px;

    }


    .info-grid {

        grid-template-columns:
            1fr;

    }


    .info-card {

        min-height: 280px;

        padding: 25px;

    }


    .info-card h3 {

        margin-top: 45px;

    }


    .procedure-step {

        padding: 22px;

        grid-template-columns:
            1fr;

    }


    .step-number,
    .step-visual,
    .step-copy {

        grid-column: 1;

        grid-row: auto;

    }


    .step-visual {

        min-height: 150px;

    }


    .step-visual img {

        width: 105px;

    }


    .comparison-card {

        min-height: 220px;

        padding: 25px;

    }


    .recovery-grid {

        gap: 45px;

    }


    .timeline-item {

        padding: 20px;

    }


    .benefit-panel {

        min-height: auto;

        padding: 27px;

    }


    .design-visual-grid {

        gap: 42px;

    }


    .design-visual-card {

        padding: 25px;

    }


    .visual-distance-list div {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }


    .procedure-video-preview {

        min-height: 290px;

    }


    .procedure-video-copy {

        padding: 30px;

    }


    .procedure-play {

        width: 68px;
        height: 68px;

    }


    .testimonial-placeholder {

        min-height: 230px;

        padding: 30px;

    }


    .faq-item summary {

        font-size: 1rem;

    }


    .faq-item summary span {

        width: 34px;
        height: 34px;

    }


    .procedure-cta-box {

        min-height: auto;

        padding: 30px;

    }


    .final-cta-actions {

        width: 100%;

        flex-direction: column;

    }


    .final-cta-actions
    .btn {

        width: 100%;

    }


    .procedure-footer {

        padding:
            50px 0
            25px;

    }


    .procedure-footer-main img {

        width: 195px;

    }


    .procedure-footer-links {

        flex-direction: column;

        gap: 10px;

    }


    .procedure-whatsapp {

        right: 16px;
        bottom: 16px;

        width: 56px;
        height: 56px;

    }

}



/* =========================================================
   MENOS MOVIMIENTO
========================================================= */

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

    html {

        scroll-behavior: auto;

    }


    .reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }


    .procedure-orbit::before,
    .procedure-orbit::after,
    .procedure-orbit img {

        animation: none;

    }

}
/* =========================================================
   WHATSAPP FLOTANTE · ESTILO CONSISTENTE CON INDEX
========================================================= */
.procedure-whatsapp {
    width: auto;
    height: auto;
    min-height: 60px;
    padding: 8px 18px 8px 8px;
    gap: 10px;
    border-radius: 999px;
    font-size: inherit;
}
.procedure-whatsapp-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
}
.procedure-whatsapp-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.procedure-whatsapp-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}
.procedure-whatsapp-copy small {
    margin-bottom: 3px;
    color: rgba(255,255,255,0.73);
    font-size: 0.63rem;
    font-weight: 500;
}
.procedure-whatsapp-copy strong {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}
@media (max-width: 480px) {
    .procedure-whatsapp {
        right: 16px;
        bottom: 16px;
        min-height: 56px;
        padding: 7px 15px 7px 7px;
    }
    .procedure-whatsapp-icon {
        width: 41px;
        height: 41px;
    }
}