/* =========================================================
   SOPORTE PBO
   SISTEMA VISUAL DE CRISTAL LÍQUIDO
========================================================= */


/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


:root {

    --background: #07130f;
    --background-secondary: #0d2119;

    --panel: rgba(25, 52, 41, .78);
    --panel-light: rgba(53, 91, 72, .48);
    --panel-hover: rgba(65, 113, 91, .62);

    --text: #f1f5f2;
    --muted: #aebdb5;

    --line: #d9d9d9;

    --cyan: #20e0c0;
    --cyan-light: #75ffe8;

    --border: rgba(255, 255, 255, .08);

    --shadow:
        0 20px 55px rgba(0, 0, 0, .22);

}


/* =========================================================
   HTML
========================================================= */

html {

    scroll-behavior: smooth;

}


/* =========================================================
   BODY
========================================================= */

body {

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 75% 15%,
            rgba(28, 126, 103, .25),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(17, 83, 65, .25),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #07130f,
            #102d22 50%,
            #07130f
        );

    background-attachment: fixed;

}


button,
input {

    font: inherit;

}


/* =========================================================
   APLICACIÓN
========================================================= */

.soporte-app {

    min-height: 100vh;

    padding:
        45px 5vw
        70px;

}


/* =========================================================
   ENCABEZADO
========================================================= */

.soporte-header {

    width: 100%;
    max-width: 1450px;

    margin:
        0 auto 55px;

    text-align: center;

}


.brand {

    color: var(--muted);

    font-size: .95rem;

    font-weight: 700;

    margin-bottom: 12px;

}


.soporte-header h1 {

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

    font-weight: 800;

    letter-spacing: -1.5px;

}


.soporte-header > p {

    color: var(--muted);

    margin-top: 10px;

    font-size: 1rem;

}


/* =========================================================
   VOLVER A INICIO
========================================================= */

.back-home {

    display: flex;

    width: fit-content;

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

    gap: 10px;

    margin:
        30px auto 0;

    padding:
        14px 24px;

    color: var(--text);

    text-decoration: none;

    font-weight: 700;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius: 25px;

    background:
        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .15);

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.back-home span:first-child {

    font-size: 1.4rem;

    line-height: 1;

}


.back-home:hover {

    background:
        rgba(32, 224, 192, .14);

    border-color:
        rgba(32, 224, 192, .45);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .25);

}


/* =========================================================
   ESTRUCTURA PRINCIPAL
========================================================= */

.soporte-layout {

    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    display: grid;

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

    gap: 70px;

    align-items: start;

}


/* =========================================================
   MENÚ
========================================================= */

.soporte-menu {

    display: flex;

    flex-direction: column;

    gap: 10px;

    position: relative;

    padding: 5px 0;

}


/* =========================================================
   OPCIONES DEL MENÚ
========================================================= */

.soporte-option {

    position: relative;

    width: 100%;
    min-height: 78px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    cursor: pointer;

    color: var(--text);

    text-align: left;

    border:
        1px solid
        transparent;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .025);

    backdrop-filter:
        blur(18px);

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

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.soporte-option:hover {

    background:
        rgba(255, 255, 255, .065);

    border-color:
        rgba(255, 255, 255, .08);

    transform:
        translateX(4px);

}


.soporte-option.active {

    background:
        rgba(65, 113, 91, .48);

    border-color:
        rgba(255, 255, 255, .10);

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .16);

}


/* =========================================================
   BARRA ACTIVA
========================================================= */

.option-bar {

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        var(--line);

    opacity: 0;

    z-index: 4;

    transition:
        opacity .25s ease;

}


.soporte-option.active .option-bar {

    opacity: 1;

}


/* =========================================================
   TEXTO DEL MENÚ
========================================================= */

.option-text {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding:
        16px 18px
        16px 24px;

}


.option-text strong {

    font-size: 1.05rem;

}


.option-text small {

    color: var(--muted);

    font-size: .85rem;

    line-height: 1.3;

}


/* =========================================================
   FLECHA
========================================================= */

.option-arrow {

    position: relative;

    z-index: 3;

    margin-left: auto;
    margin-right: 20px;

    font-size: 2rem;

    font-weight: 300;

    opacity: .65;

    transition:
        transform .25s ease;

}


.soporte-option:hover .option-arrow {

    transform:
        translateX(5px);

}


/* =========================================================
   RIPPLE
========================================================= */

.ripple {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        rgba(32, 224, 192, .55);

    transform:
        translate(-50%, -50%)
        scale(0);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

}


.ripple.animate {

    animation:
        rippleEffect
        .7s
        ease-out;

}


@keyframes rippleEffect {

    0% {

        transform:
            translate(-50%, -50%)
            scale(0);

        opacity: .85;

    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(35);

        opacity: 0;

    }

}


/* =========================================================
   CONTENIDO
========================================================= */

.soporte-content {

    min-width: 0;

    max-width: 950px;

    position: relative;

    overflow: hidden;

}


/* =========================================================
   SECCIONES
========================================================= */

.soporte-section {

    display: none;

}


.soporte-section.active {

    display: block;

    animation:
        sectionIn
        .45s
        cubic-bezier(.2, .8, .2, 1);

}


.soporte-section.slide-out {

    animation:
        sectionOut
        .4s
        cubic-bezier(.2, .8, .2, 1);

}


@keyframes sectionIn {

    from {

        opacity: 0;

        transform:
            translateY(80px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes sectionOut {

    from {

        opacity: 1;

        transform:
            translateY(0);

    }

    to {

        opacity: 0;

        transform:
            translateY(-80px);

    }

}


/* =========================================================
   ENCABEZADO DE SECCIÓN
========================================================= */

.section-header {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

}


.section-bar {

    width: 4px;

    min-height: 65px;

    flex-shrink: 0;

    background:
        var(--line);

}


.section-header h2 {

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

    margin-bottom: 8px;

}


.section-header p {

    color: var(--muted);

    line-height: 1.55;

    max-width: 720px;

}


/* =========================================================
   TARJETAS DE INFORMACIÓN
========================================================= */

.information-card {

    position: relative;

    overflow: hidden;

    padding: 34px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        ),
        var(--panel);

    backdrop-filter:
        blur(22px);

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

    box-shadow:
        var(--shadow);

    isolation: isolate;

}


.information-card::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -160px;
    right: -120px;

    border-radius: 50%;

    background:
        rgba(32, 224, 192, .08);

    filter:
        blur(25px);

    pointer-events: none;

}


.information-card h3 {

    position: relative;

    font-size: 1.5rem;

    margin-bottom: 18px;

}


.information-card p {

    position: relative;

    color: var(--muted);

    line-height: 1.7;

    margin-bottom: 15px;

}


/* =========================================================
   INFORMACIÓN GENERAL
========================================================= */

.information-grid {

    margin-top: 30px;

    display: grid;

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

    gap: 12px;

}


.information-grid div {

    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 16px;

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(10px);

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

}


.information-grid span {

    display: block;

    color: var(--muted);

    font-size: .8rem;

    margin-bottom: 7px;

}


.information-grid strong {

    display: block;

    font-size: .95rem;

}


/* =========================================================
   CORREO
========================================================= */

.correo-box {

    margin-top: 25px;

    padding: 22px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 17px;

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(12px);

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

}


.correo-box span {

    display: block;

    color: var(--muted);

    font-size: .8rem;

    margin-bottom: 9px;

}


.correo-box a {

    color:
        var(--cyan-light);

    text-decoration: none;

    font-weight: 700;

    word-break: break-word;

}


.correo-box a:hover {

    text-decoration: underline;

}


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

.faq-card {

    padding: 0;

}


.faq-card details {

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.faq-card details:last-child {

    border-bottom: 0;

}


.faq-card summary {

    list-style: none;

    cursor: pointer;

    padding:
        24px 27px;

    display: flex;

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

    gap: 20px;

    font-weight: 700;

}


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

    display: none;

}


.faq-card summary::after {

    content: "＋";

    flex-shrink: 0;

    font-size: 1.4rem;

    font-weight: 300;

    transition:
        transform .25s ease;

}


.faq-card details[open]
summary::after {

    transform:
        rotate(45deg);

}


.faq-card details p {

    padding:
        0 27px
        25px;

    margin: 0;

}


/* =========================================================
   VENTANA EMERGENTE
========================================================= */

.detail-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 30px;

    background:
        rgba(2, 10, 7, .72);

    backdrop-filter:
        blur(18px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.detail-screen.open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.detail-panel {

    width: min(900px, 100%);

    max-height: 88vh;

    overflow-y: auto;

    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            rgba(53,91,72,.78),
            rgba(20,42,33,.88)
        );

    backdrop-filter:
        blur(30px);

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

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.45);

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);

}


.detail-screen.open .detail-panel {

    transform:
        translateY(0)
        scale(1);

}


.detail-back {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 17px;

    margin-bottom: 30px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 15px;

    background:
        rgba(255,255,255,.055);

    color: var(--text);

    cursor: pointer;

    font-weight: 700;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;

}


.detail-back span {

    font-size: 1.2rem;

}


.detail-back:hover {

    background:
        rgba(32,224,192,.13);

    border-color:
        rgba(32,224,192,.35);

    transform:
        translateX(-2px);

}


.detail-label {

    display: inline-flex;

    padding:
        7px 13px;

    margin-bottom: 14px;

    border:
        1px solid
        rgba(32,224,192,.18);

    border-radius: 999px;

    background:
        rgba(32,224,192,.08);

    color:
        var(--cyan-light);

    font-size: .78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.detail-content h2 {

    margin-bottom: 22px;

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

}


.detail-text {

    color: var(--muted);

    line-height: 1.75;

    font-size: 1rem;

}


.detail-text p {

    margin-bottom: 17px;

}


.detail-text p:last-child {

    margin-bottom: 0;

}


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

@media (max-width: 900px) {

    .soporte-app {

        padding:
            35px 25px
            65px;

    }


    .soporte-layout {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .soporte-menu {

        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: none;

    }


    .soporte-menu::-webkit-scrollbar {

        display: none;

    }


    .soporte-option {

        flex:
            0 0 260px;

    }


    .soporte-content {

        max-width: none;

    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .soporte-app {

        padding:
            25px 15px
            110px;

    }


    .soporte-header {

        margin-bottom: 30px;

    }


    .soporte-header h1 {

        font-size: 2.3rem;

    }


    .soporte-header > p {

        font-size: .9rem;

    }


    .back-home {

        padding:
            12px 19px;

        border-radius: 16px;

        font-size: .9rem;

    }


    .soporte-option {

        min-height: 72px;

        flex-basis: 235px;

        border-radius: 17px;

    }


    .option-text {

        padding:
            13px 15px
            13px 19px;

    }


    .option-text strong {

        font-size: .95rem;

    }


    .option-text small {

        font-size: .78rem;

    }


    .option-arrow {

        margin-right: 13px;

    }


    .section-header {

        gap: 13px;

    }


    .section-header h2 {

        font-size: 1.8rem;

    }


    .information-card {

        padding: 24px;

        border-radius: 20px;

    }


    .information-grid {

        grid-template-columns: 1fr;

    }


    .correo-box a {

        font-size: .9rem;

    }


    .faq-card summary {

        padding:
            21px;

    }


    .faq-card details p {

        padding:
            0 21px
            21px;

    }


    .detail-screen {

        padding: 15px;

    }


    .detail-panel {

        max-height: 92vh;

        padding: 22px;

        border-radius: 22px;

    }


    .detail-back {

        margin-bottom: 24px;

    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 430px) {

    .soporte-header h1 {

        font-size: 2rem;

    }


    .soporte-option {

        flex-basis: 215px;

    }


    .information-card {

        padding: 20px;

    }


    .detail-panel {

        padding: 19px;

    }


    .detail-content h2 {

        font-size: 1.7rem;

    }

}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}