/* /home/tcorp/public_html/assets/css/tudela.css */

:root {
    --td-black: #050505;
    --td-text: #111111;
    --td-muted: #6f6f6f;
    --td-line: #e9e9e9;
    --td-soft: #f7f8fa;
    --td-white: #ffffff;
    --td-ease: cubic-bezier(.22, 1, .36, 1);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;
    color: var(--td-text);
    background: var(--td-white);
}

a {
    color: inherit;
}

.tudela-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

/* Hero */

.tudela-hero {
    position: relative;
    min-height: 64vh;
    display: grid;
    place-items: center;
    padding: 88px 24px 40px;
}

.brand {
    position: relative;
    z-index: 5;
    text-align: center;
    animation: fadeInSoft .65s var(--td-ease) both;
}

/* Isotipo — acceso discreto a superadmin (reducido 40%) */
.brand__isotipo {
    display: inline-block;
    line-height: 0;
    border-radius: 50%;
    text-decoration: none;
    transition:
        transform .3s var(--td-ease),
        filter .3s var(--td-ease);
}

.brand__isotipo img {
    width: min(58px, 13.2vw);
    height: auto;
    display: block;
}

.brand__isotipo:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 18px rgba(17, 17, 17, .12));
}

.brand__isotipo:focus-visible {
    outline: 2px solid rgba(17, 17, 17, .22);
    outline-offset: 6px;
}

.brand__wordmark {
    width: min(300px, 62vw);
    height: auto;
    display: block;
    margin: 18px auto 0;
}

.brand__headline {
    max-width: 620px;
    margin: 40px auto 0;
    font-size: clamp(17px, 1.55vw, 21px);
    line-height: 1.35;
    letter-spacing: -.03em;
    font-weight: 400;
    color: rgba(17, 17, 17, .78);
}

.brand__text {
    max-width: 780px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--td-muted);
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
}


/* ============================================================
   Botón Ingresar — Liquid Glass (reflejo + resplandor final)
   ============================================================ */

.enter-wrap {
    position: relative;
    width: max-content;
    margin: 40px auto 0;
    display: grid;
    place-items: center;
}

/* Halo detrás: respira suave, refuerza el barrido temprano */
.enter__glow {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 260%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(closest-side,
            rgba(255, 255, 255, .95),
            rgba(255, 255, 255, .38) 54%,
            transparent 78%);
    filter: blur(26px);
    opacity: .5;
    animation: enterGlow 4.2s var(--td-ease) infinite;
}

@keyframes enterGlow {
    0%, 100% { opacity: .5;  transform: translate(-50%, -50%) scale(1); }
    12%      { opacity: .82; transform: translate(-50%, -50%) scale(1.06); }
    50%      { opacity: .56; transform: translate(-50%, -50%) scale(1.02); }
}

.enter {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 60px;
    padding: 17px 46px;
    border-radius: 999px;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .92) 0%,
            rgba(233, 239, 245, .70) 46%,
            rgba(240, 244, 249, .86) 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        0 16px 30px rgba(60, 72, 86, .16),
        0 4px 10px rgba(60, 72, 86, .10),
        inset 0 2px 3px rgba(255, 255, 255, 1),
        inset 0 -7px 14px rgba(120, 135, 150, .13);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    transition:
        transform .32s var(--td-ease),
        box-shadow .32s var(--td-ease);
}

/* Barniz superior: brillo convexo del vidrio (sin subrayado) */
.enter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, 0) 42%);
}

.enter__text {
    position: relative;
    z-index: 4;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: rgba(44, 52, 60, .74);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
}

/* Reflejo: barrido de luz que cruza y sale por la derecha */
.enter__sheen {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
}

.enter__sheen::before {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 55%;
    background: linear-gradient(100deg,
            transparent 0%,
            rgba(255, 255, 255, .10) 26%,
            rgba(255, 255, 255, .92) 50%,
            rgba(255, 255, 255, .10) 74%,
            transparent 100%);
    filter: blur(3px);
    transform: translateX(-220%) skewX(-10deg);
    animation: enterSheen 4.2s var(--td-ease) infinite;
}

@keyframes enterSheen {
    0%       { transform: translateX(-220%) skewX(-10deg); opacity: 0; }
    4%       { opacity: 1; }
    26%      { transform: translateX(300%) skewX(-10deg); opacity: 1; }
    30%, 100%{ transform: translateX(300%) skewX(-10deg); opacity: 0; }
}

/* Chispa: estrella de 4 puntas en la esquina superior derecha, titila 2x */
.enter__sparkle {
    position: absolute;
    z-index: 6;
    top: 2px;
    right: -10px;
    width: 56px;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transform: scale(.2);
    background:
        radial-gradient(circle, rgba(255,255,255,1) 0 4%, transparent 18%),
        linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.98) 49% 51%, transparent 54% 100%),
        linear-gradient(0deg,  transparent 0 46%, rgba(255,255,255,.98) 49% 51%, transparent 54% 100%);
    filter: drop-shadow(0 0 10px rgba(255,255,255,.95));
    animation: enterStar 4.2s var(--td-ease) infinite;
}

.enter__sparkle::before {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.5), transparent 62%);
    filter: blur(5px);
}

@keyframes enterStar {
    0%, 3%   { opacity: 0;   transform: scale(.2); }
    8%       { opacity: 1;   transform: scale(1); }
    16%      { opacity: .25; transform: scale(.55); }
    46%      { opacity: 0;   transform: scale(.2); }
    54%      { opacity: 1;   transform: scale(.92); }
    62%      { opacity: .2;  transform: scale(.5); }
    70%, 100%{ opacity: 0;   transform: scale(.2); }
}

.enter:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 38px rgba(60, 72, 86, .20),
        0 6px 14px rgba(60, 72, 86, .12),
        inset 0 2px 3px rgba(255, 255, 255, 1),
        inset 0 -7px 14px rgba(120, 135, 150, .16);
}

.enter:active {
    transform: translateY(0) scale(.985);
}

.enter-wrap:hover .enter__glow,
.enter-wrap:hover .enter__sheen,
.enter-wrap:hover .enter__sheen::before,
.enter-wrap:hover .enter__sparkle {
    animation-duration: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
    .enter__glow,
    .enter__sheen,
    .enter__sheen::before,
    .enter__sparkle { animation: none; }
    .enter__glow { opacity: .55; }
}


/* Services */

.services {
    position: relative;
    z-index: 6;
    width: min(1120px, calc(100% - 54px));
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    text-align: center;
    padding-bottom: 70px;
    animation: fadeInSoft .75s var(--td-ease) .08s both;
}

.service {
    position: relative;
    min-height: 184px;
    padding: 26px 16px 24px;
    color: var(--td-text);
    text-decoration: none;
    border-radius: 28px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--td-line);
    box-shadow: 0 18px 48px rgba(17, 17, 17, .045);
    transition:
        transform .28s var(--td-ease),
        box-shadow .28s var(--td-ease),
        border-color .28s var(--td-ease),
        background .28s var(--td-ease);
}

.service:hover {
    transform: translateY(-5px);
    background: #ffffff;
    border-color: #dcdcdc;
    box-shadow: 0 24px 58px rgba(17, 17, 17, .075);
}

.service__icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto 24px;
    transition: transform .28s var(--td-ease);
}

.service:hover .service__icon {
    transform: scale(1.035);
}

.service__description {
    max-width: 210px;
    min-height: 66px;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--td-muted);
    text-align: center;
}


/* Animations */

@keyframes fadeInSoft {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* Responsive */

@media (max-width: 980px) {
    .tudela-hero {
        min-height: 58vh;
    }

    .services {
        grid-template-columns: repeat(2, 1fr);
        max-width: 680px;
        gap: 18px;
        margin-top: 18px;
    }

    .service--finance {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .tudela-hero {
        min-height: auto;
        padding: 72px 24px 40px;
    }

    .brand__isotipo img {
        width: min(50px, 14.4vw);
    }

    .brand__wordmark {
        width: min(240px, 66vw);
    }

    .brand__headline {
        margin-top: 34px;
        font-size: 18px;
    }

    .brand__text {
        font-size: 14px;
    }

    .enter {
        min-width: 220px;
        padding: 16px 38px;
        font-size: 16px;
    }

    .services {
        width: min(380px, calc(100% - 40px));
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
        padding-bottom: 56px;
    }

    .service {
        min-height: auto;
        padding: 24px 16px 26px;
    }

    .service__icon {
        width: 90px;
        height: 90px;
        margin-bottom: 20px;
    }

    .service__description {
        min-height: auto;
    }

    .service--finance {
        grid-column: auto;
    }
}