:root {
    color-scheme: light;

    --background: #f5f5f7;
    --surface: rgba(255, 255, 255, 0.84);
    --surface-solid: #ffffff;
    --surface-soft: #ededf2;

    --text: #111216;
    --text-secondary: #61646e;
    --text-muted: #888b96;

    --border: rgba(17, 18, 22, 0.1);
    --border-strong: rgba(17, 18, 22, 0.18);

    --accent: #7067ff;
    --accent-hover: #5750e6;
    --accent-soft: rgba(112, 103, 255, 0.13);

    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, 0.12);

    --focus: #372cf7;
    --focus-offset: #ffffff;

    --shadow-small: 0 12px 35px rgba(24, 25, 31, 0.05);
    --shadow-medium: 0 24px 70px rgba(24, 25, 31, 0.09);

    --radius-large: 34px;
    --radius-medium: 24px;
    --radius-small: 13px;

    --page-width: 1180px;
    --header-height: 78px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --background: #0d0e12;
    --surface: rgba(22, 23, 30, 0.84);
    --surface-solid: #17181e;
    --surface-soft: #212229;

    --text: #f4f5f8;
    --text-secondary: #b8bbc4;
    --text-muted: #9498a2;

    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);

    --accent: #a39eff;
    --accent-hover: #b6b2ff;
    --accent-soft: rgba(163, 158, 255, 0.14);

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.12);

    --focus: #c5c0ff;
    --focus-offset: #0d0e12;

    --shadow-small: 0 16px 42px rgba(0, 0, 0, 0.22);
    --shadow-medium: 0 32px 86px rgba(0, 0, 0, 0.32);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 22px);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;

    color: var(--text);
    background:
        radial-gradient(
            circle at 75% 8%,
            var(--accent-soft),
            transparent 24rem
        ),
        var(--background);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    transition:
        color 280ms ease,
        background-color 280ms ease;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

p,
h1,
h2,
h3,
ul {
    margin: 0;
}

ul {
    padding: 0;
}

::selection {
    color: #ffffff;
    background: var(--accent-hover);
}

:where(a, button):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--focus-offset);
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 5000;
    top: 12px;
    left: 12px;

    padding: 11px 15px;

    border-radius: 10px;

    color: #ffffff;
    background: #111216;

    font-weight: 700;

    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.theme-transition-overlay {
    position: fixed;
    z-index: 4500;
    inset: 0;

    opacity: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at var(--theme-x, 85%) var(--theme-y, 10%),
            rgba(255, 255, 255, 0.28),
            transparent 22%
        );
}

html[data-theme="dark"] .theme-transition-overlay {
    background:
        radial-gradient(
            circle at var(--theme-x, 85%) var(--theme-y, 10%),
            rgba(180, 175, 255, 0.18),
            transparent 22%
        );
}

body.theme-animating .theme-transition-overlay {
    animation: themePulse 620ms cubic-bezier(.22,1,.36,1);
}

@keyframes themePulse {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

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

    margin-inline: auto;
}

.section {
    padding-block: 82px;
}

.eyebrow {
    color: var(--accent);

    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 0.42fr);
    align-items: end;
    gap: 60px;

    margin-bottom: 42px;
}

.section-heading h2,
.contact-card h2 {
    margin-top: 10px;

    font-size: clamp(2.4rem, 5vw, 4.55rem);
    font-weight: 730;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.section-heading h2 span,
.contact-card h2 span {
    color: var(--accent);
}

.section-heading > p {
    max-width: 420px;

    color: var(--text-secondary);

    font-size: 0.91rem;
    line-height: 1.75;
}

.section-link {
    align-self: center;
    justify-self: end;

    color: var(--accent);

    font-size: 0.82rem;
    font-weight: 720;
}

.section-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.primary-button,
.secondary-button,
.light-button,
.dark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 49px;
    padding: 0 21px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    font-size: 0.84rem;
    font-weight: 720;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.primary-button {
    color: #ffffff;
    background: #111216;
}

html[data-theme="dark"] .primary-button {
    color: #111216;
    background: #f5f5f7;
}

.primary-button:hover {
    transform: translateY(-3px);

    color: #ffffff;
    background: var(--accent-hover);
}

.secondary-button {
    border-color: var(--border-strong);
    background: var(--surface);
}

.secondary-button:hover {
    transform: translateY(-3px);

    border-color: var(--accent);
    color: var(--accent);
}

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

.site-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;

    min-height: var(--header-height);
    padding-inline: 24px;
}

.site-header.scrolled {
    border-bottom: 1px solid var(--border);

    background: color-mix(
        in srgb,
        var(--background) 86%,
        transparent
    );

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

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    width: 100%;
    max-width: var(--page-width);
    min-height: var(--header-height);
    margin-inline: auto;
}

.logo {
    display: inline-grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex-shrink: 0;

    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.logo:hover {
    transform:
        translateY(-2px)
        scale(1.025);

    filter:
        drop-shadow(
            0 8px 16px
            rgba(20, 21, 28, 0.14)
        );
}

.logo-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

@media (max-width: 680px) {
    .logo {
        width: 39px;
        height: 39px;
    }
}

.desktop-nav {
    display: flex;
    justify-self: center;
    gap: 30px;
}

.desktop-nav a {
    min-height: 44px;
    padding: 11px 0;

    color: var(--text-secondary);

    font-size: 0.79rem;
    font-weight: 680;
}

.desktop-nav a:hover {
    color: var(--accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-button,
.menu-button {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--surface);

    cursor: pointer;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.theme-button:hover,
.menu-button:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.contact-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 19px;

    border-radius: 999px;

    color: #ffffff;
    background: #111216;

    font-size: 0.77rem;
    font-weight: 720;
    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

html[data-theme="dark"] .contact-pill {
    color: #111216;
    background: #f5f5f7;
}

.contact-pill:hover {
    transform: translateY(-2px);

    color: #ffffff;
    background: var(--accent-hover);
}

.menu-button {
    display: none;
    gap: 5px;

    border-radius: 12px;
}

.menu-button span {
    width: 17px;
    height: 1.5px;

    border-radius: 999px;
    background: var(--text);

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.menu-button.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 20px;
    left: 20px;

    display: grid;
    gap: 4px;

    padding: 14px;

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

    background: var(--surface-solid);
    box-shadow: var(--shadow-medium);
}

.mobile-nav[hidden] {
    display: none;
}

.mobile-nav a {
    padding: 12px 13px;

    border-radius: 11px;

    color: var(--text-secondary);

    font-weight: 680;
}

.mobile-nav a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

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

.hero-section {
    padding-top: calc(var(--header-height) + 64px);
    padding-bottom: 40px;
}

.hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
    align-items: center;
    gap: 82px;

    min-height: 660px;
    padding: clamp(38px, 6vw, 78px);

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

    background: var(--surface);
    box-shadow: var(--shadow-medium);

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

.availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 28px;
    padding: 8px 13px;

    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: 999px;

    color: var(--success);
    background: var(--success-soft);

    font-size: 0.74rem;
    font-weight: 730;
}

.availability-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.42);
    animation: pulseStatus 2s infinite;
}

@keyframes pulseStatus {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.42);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

.hero-copy h1 {
    margin: 12px 0 24px;

    font-size: clamp(3.8rem, 7vw, 6.9rem);
    font-weight: 750;
    line-height: 0.91;
    letter-spacing: -0.078em;
}

.hero-copy h1 span {
    display: block;
    color: var(--accent);
}

.hero-summary {
    max-width: 560px;

    color: var(--text-secondary);

    font-size: 1.03rem;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 31px;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 38px;
}

.quick-links a {
    color: var(--text-secondary);

    font-size: 0.76rem;
    font-weight: 700;
}

.quick-links a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.hero-placeholder {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 490px;
    overflow: hidden;

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

    background:
        linear-gradient(
            145deg,
            var(--surface-solid),
            var(--accent-soft)
        );
}

.hero-placeholder-glow {
    position: absolute;

    width: 270px;
    height: 270px;

    border-radius: 50%;
    background: var(--accent-soft);
    filter: blur(56px);
}

.hero-placeholder > span,
.hero-placeholder strong,
.hero-placeholder small {
    position: relative;
}

.hero-placeholder > span {
    margin-bottom: 14px;

    color: var(--accent);

    font-size: 4.6rem;
    font-weight: 800;
    letter-spacing: -0.13em;
}

.hero-placeholder small {
    color: var(--text-muted);
}

.hero-image {
    width: 100%;
    min-height: 490px;

    border-radius: 30px;
    object-fit: cover;
}

/* =========================================================
   PROJECTS
========================================================= */

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

.project-card {
    overflow: hidden;

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

    background: var(--surface);
    box-shadow: var(--shadow-small);

    transition:
        transform 210ms ease,
        border-color 210ms ease,
        box-shadow 210ms ease;
}

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

    border-color: var(--accent);
    box-shadow: var(--shadow-medium);
}

.project-image-placeholder {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    min-height: 250px;
    padding: 20px;
    overflow: hidden;

    background: var(--surface-soft);
}

.project-image-placeholder::after {
    position: absolute;
    inset: 0;

    content: "";
}

.project-style-one::after {
    background:
        radial-gradient(
            circle at 75% 18%,
            var(--accent-soft),
            transparent 42%
        );
}

.project-style-two::after {
    background:
        radial-gradient(
            circle at 25% 80%,
            rgba(80, 170, 255, 0.18),
            transparent 42%
        );
}

.project-style-three::after {
    background:
        radial-gradient(
            circle at 80% 70%,
            rgba(255, 146, 82, 0.18),
            transparent 42%
        );
}

.project-image-placeholder span,
.project-image-placeholder small {
    position: relative;
    z-index: 1;
}

.project-image-placeholder span {
    color: var(--accent);

    font-size: 1.65rem;
    font-weight: 780;
}

.project-image-placeholder small {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.project-content {
    padding: 24px;
}

.project-type {
    margin-bottom: 7px;

    color: var(--accent);

    font-size: 0.68rem;
    font-weight: 760;
    text-transform: uppercase;
}

.project-content h3 {
    margin-bottom: 8px;
    font-size: 1.18rem;
}

.project-content > p:not(.project-type) {
    min-height: 54px;

    color: var(--text-secondary);

    font-size: 0.82rem;
    line-height: 1.6;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 18px 0;

    list-style: none;
}

.tag-list li {
    padding: 6px 8px;

    border-radius: 999px;

    color: var(--text-secondary);
    background: var(--surface-soft);

    font-size: 0.65rem;
    font-weight: 650;
}

.project-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 45px;
    padding: 0 14px;

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

    background: transparent;

    font-size: 0.76rem;
    font-weight: 720;
    cursor: pointer;
}

.project-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =========================================================
   BADGES
========================================================= */

.badges-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.badge-card {
    display: flex;
    align-items: center;
    flex-direction: column;

    min-height: 295px;
    padding: 28px;

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

    background: var(--surface);
    box-shadow: var(--shadow-small);

    text-align: center;

    transition:
        transform 210ms ease,
        border-color 210ms ease;
}

.badge-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.badge-placeholder {
    display: grid;
    place-items: center;

    width: 112px;
    height: 112px;
    margin-bottom: 22px;

    border: 1px dashed var(--border-strong);
    border-radius: 50%;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 0.82rem;
    font-weight: 800;
}

.badge-card h3 {
    margin-bottom: 6px;
    font-size: 0.92rem;
}

.badge-card p {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.more-badge-card {
    justify-content: center;
}

.badge-more-icon {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;
    margin-bottom: 18px;

    border-radius: 50%;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 2rem;
    font-weight: 300;
}

/* =========================================================
   PROFILE
========================================================= */

.profile-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

.profile-main-card,
.info-card {
    border: 1px solid var(--border);
    border-radius: 26px;

    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.profile-main-card {
    grid-row: span 2;

    padding: 34px;
}

.profile-main-card h3 {
    margin: 10px 0 18px;

    font-size: 2.05rem;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.profile-main-card p:not(.eyebrow) {
    max-width: 620px;

    color: var(--text-secondary);

    font-size: 0.93rem;
    line-height: 1.8;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 28px;
}

.profile-meta span {
    padding: 7px 10px;

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

    color: var(--text-secondary);

    font-size: 0.68rem;
    font-weight: 670;
}

.info-card {
    padding: 24px;
}

.info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 20px;
}

.info-card-header > span {
    color: var(--text-secondary);

    font-size: 0.72rem;
    font-weight: 720;
}

.skill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-cloud span {
    padding: 7px 9px;

    border-radius: 999px;

    color: var(--text-secondary);
    background: var(--surface-soft);

    font-size: 0.68rem;
    font-weight: 650;
}

.event-list {
    display: grid;
    gap: 12px;

    list-style: none;
}

.event-list li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;

    padding-top: 12px;

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

.event-list li:first-child {
    padding-top: 0;
    border-top: none;
}

.event-list span {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.event-list strong {
    font-size: 0.77rem;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding-bottom: 86px;
}

.contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;

    padding: 42px;

    border-radius: var(--radius-large);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(112, 103, 255, 0.56),
            transparent 22rem
        ),
        #111216;

    box-shadow: var(--shadow-medium);
}

.contact-copy > p:not(.eyebrow) {
    max-width: 560px;
    margin-top: 18px;

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

    font-size: 0.92rem;
    line-height: 1.75;
}

.contact-actions {
    display: grid;
    gap: 10px;

    min-width: 200px;
}

.light-button {
    color: #111216;
    background: #ffffff;
}

.light-button:hover {
    transform: translateY(-3px);

    color: #ffffff;
    background: var(--accent-hover);
}

.dark-button {
    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.dark-button:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
}

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

.site-footer {
    padding: 0 0 36px;
}

.footer-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
}

.footer-inner p {
    justify-self: center;

    color: var(--text-muted);
    font-size: 0.69rem;
}

.footer-inner > a:last-child {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 680;
}

/* =========================================================
   DIALOG
========================================================= */

.project-dialog {
    width: min(calc(100% - 32px), 680px);
    max-height: min(86vh, 760px);
    padding: 0;
    overflow: auto;

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

    color: var(--text);
    background: var(--surface-solid);
    box-shadow: 0 35px 120px rgba(0, 0, 0, 0.32);
}

.project-dialog::backdrop {
    background: rgba(5, 6, 9, 0.62);
    backdrop-filter: blur(8px);
}

.dialog-layout {
    position: relative;
    padding: clamp(28px, 6vw, 54px);
}

.dialog-close {
    position: absolute;
    top: 18px;
    right: 18px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--surface-soft);

    font-size: 1.3rem;
    cursor: pointer;
}

.dialog-layout h2 {
    margin: 10px 0 13px;

    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.dialog-introduction {
    max-width: 520px;

    color: var(--text-secondary);
    font-size: 0.92rem;
}

.dialog-details {
    display: grid;
    gap: 17px;

    margin-top: 32px;
}

.dialog-details > div {
    padding-top: 17px;
    border-top: 1px solid var(--border);
}

.dialog-details strong {
    display: block;
    margin-bottom: 5px;

    font-size: 0.8rem;
}

.dialog-details p {
    color: var(--text-secondary);
    font-size: 0.79rem;
    line-height: 1.65;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 31px;
}

/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 620ms ease,
        transform 620ms ease;
}

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

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
    .desktop-nav,
    .contact-pill {
        display: none;
    }

    .menu-button {
        display: grid;
    }

    .hero-card {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hero-placeholder,
    .hero-image {
        min-height: 400px;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-link {
        justify-self: start;
    }

    .projects-grid,
    .badges-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .profile-main-card {
        grid-row: auto;
    }

    .contact-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    :root {
        --header-height: 70px;
    }

    .page-container {
        width: min(
            calc(100% - 28px),
            var(--page-width)
        );
    }

    .site-header {
        padding-inline: 14px;
    }

    .section {
        padding-block: 50px;
    }

    .hero-section {
        padding-top: calc(var(--header-height) + 30px);
    }

    .hero-card {
        min-height: auto;
        padding: 30px 21px;

        border-radius: 28px;
    }

    .hero-copy h1 {
        font-size: clamp(3.15rem, 15vw, 4.8rem);
    }

    .hero-summary {
        font-size: 0.92rem;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .primary-button,
    .secondary-button,
    .light-button,
    .dark-button {
        width: 100%;
    }

    .quick-links {
        gap: 14px;
    }

    .hero-placeholder,
    .hero-image {
        min-height: 310px;
        border-radius: 22px;
    }

    .section-heading h2,
    .contact-card h2 {
        font-size: clamp(2.4rem, 12vw, 3.5rem);
    }

    .projects-grid,
    .badges-grid {
        grid-template-columns: 1fr;
    }

    .project-image-placeholder {
        min-height: 215px;
    }

    .profile-main-card,
    .info-card {
        padding: 24px 21px;
    }

    .contact-card {
        gap: 30px;
        padding: 34px 22px;

        border-radius: 26px;
    }

    .contact-actions {
        width: 100%;
        min-width: 0;
    }

    .footer-inner {
        display: flex;
        align-items: center;
        flex-direction: column;

        text-align: center;
    }

    .dialog-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .availability-dot {
        animation: none;
    }
}


/* =========================================================
   ACTUALIZACIÓN: IDIOMA, NAVEGACIÓN ACTIVA Y CV
========================================================= */

.language-button {
    display: grid;
    place-items: center;

    min-width: 46px;
    height: 44px;
    padding: 0 11px;

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

    color: var(--text-secondary);
    background: var(--surface);

    font-size: 0.69rem;
    font-weight: 820;
    letter-spacing: 0.06em;

    cursor: pointer;

    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.language-button:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.language-button.switching span {
    animation: languageFlip 360ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes languageFlip {
    0% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }

    45% {
        opacity: 0;
        transform: translateY(-5px) rotateX(80deg);
    }

    55% {
        opacity: 0;
        transform: translateY(5px) rotateX(-80deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.desktop-nav a {
    position: relative;
}

.desktop-nav a::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;

    width: 0;
    height: 2px;
    margin-inline: auto;

    border-radius: 999px;
    background: var(--accent);

    content: "";

    transition: width 180ms ease;
}

.desktop-nav a.active {
    color: var(--text);
}

.desktop-nav a.active::after {
    width: 18px;
}

.mobile-nav a.active {
    color: var(--accent);
    background: var(--accent-soft);
}

.page-section {
    scroll-margin-top: calc(var(--header-height) + 22px);
}

.hero-title-main,
.hero-title-accent,
.heading-main,
.heading-accent,
.contact-heading-main {
    display: block;
}

.hero-copy h1 .hero-title-main,
.section-heading h2 .heading-main,
.contact-card h2 .contact-heading-main {
    color: inherit;
}

.hero-copy h1 .hero-title-accent,
.section-heading h2 .heading-accent {
    color: var(--accent);
}

.cv-section {
    position: relative;
}

.cv-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
    align-items: center;
    gap: 54px;

    padding: clamp(30px, 5vw, 58px);

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

    background:
        radial-gradient(
            circle at 82% 18%,
            var(--accent-soft),
            transparent 24rem
        ),
        var(--surface);

    box-shadow: var(--shadow-medium);
}

.cv-copy h3 {
    max-width: 480px;
    margin: 10px 0 18px;

    font-size: clamp(1.8rem, 3.5vw, 3.15rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.cv-copy > p:not(.eyebrow) {
    max-width: 470px;

    color: var(--text-secondary);

    font-size: 0.91rem;
    line-height: 1.78;
}

.cv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 28px;
}

.cv-preview-shell {
    overflow: hidden;

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

    background: var(--surface-solid);
    box-shadow: var(--shadow-small);
}

.cv-preview-toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;

    min-height: 48px;
    padding: 0 16px;

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

    color: var(--text-muted);
    background: var(--surface-soft);

    font-size: 0.69rem;
    font-weight: 700;
}

.cv-preview-dots {
    display: flex;
    gap: 6px;
}

.cv-preview-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--border-strong);
}

.cv-preview {
    display: block;

    width: 100%;
    height: 670px;

    border: 0;
    background: var(--surface-soft);
}

.cv-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 540px;
    padding: 34px;

    text-align: center;
}

.cv-fallback strong {
    max-width: 420px;
    margin-bottom: 8px;
}

.cv-fallback p {
    max-width: 420px;
    margin-bottom: 22px;

    color: var(--text-secondary);

    font-size: 0.82rem;
}

@media (max-width: 980px) {
    .cv-card {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .cv-copy {
        max-width: 680px;
    }

    .cv-preview {
        height: 620px;
    }
}

@media (max-width: 680px) {
    .language-button {
        min-width: 42px;
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .cv-card {
        padding: 25px 18px;
        border-radius: 25px;
    }

    .cv-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cv-preview {
        height: 520px;
    }

    .cv-preview-toolbar {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .language-button.switching span {
        animation: none;
    }
}

/* =========================================================
   REFINAMIENTO: IDIOMA, TEMA, NAVEGACIÓN Y CV
========================================================= */

/* El selector muestra el idioma ACTUAL, no el idioma de destino. */
.language-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width: 92px;
    height: 44px;
    padding: 3px;

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

    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.language-option {
    display: grid;
    place-items: center;

    min-width: 0;
    padding: 0;

    border: 0;
    border-radius: 999px;

    color: var(--text-muted);
    background: transparent;

    font-size: 0.66rem;
    font-weight: 820;
    letter-spacing: 0.045em;

    cursor: pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.language-option:hover:not(.active) {
    color: var(--accent);
}

.language-option.active {
    color: var(--text);
    background: var(--surface-solid);
    box-shadow: 0 5px 14px rgba(24, 25, 31, 0.1);
}

html[data-theme="dark"] .language-option.active {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

/* El ícono representa el modo ACTUAL: sol = claro, luna = oscuro. */
.theme-button {
    position: relative;
    overflow: hidden;
}

.theme-icon {
    position: absolute;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        opacity 240ms ease,
        transform 380ms cubic-bezier(.22, 1, .36, 1);
}

.theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-icon-moon {
    opacity: 0;
    transform: rotate(-35deg) scale(0.55);
}

html[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
    transform: rotate(65deg) scale(0.55);
}

html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Ancho estable para que la navegación no salte al cambiar de idioma. */
.desktop-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 76px;
    text-align: center;
}

.desktop-nav a:nth-child(2),
.desktop-nav a:nth-child(3) {
    min-width: 84px;
}

/* Alturas mínimas para reducir el reacomodo entre español e inglés. */
.hero-copy h1 {
    min-block-size: 1.82em;
    text-wrap: balance;
}

.hero-summary {
    min-block-size: 3.5em;
}

.section-heading h2 {
    min-block-size: 1.95em;
    text-wrap: balance;
}

.section-heading > p {
    min-block-size: 4.8em;
}

.project-type {
    min-block-size: 1.4em;
}

.project-content h3 {
    min-block-size: 1.5em;
}

.badge-card h3 {
    min-block-size: 2.8em;
}

/* Transición nativa y profesional para tema e idioma. */
::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}

html.theme-transition::view-transition-old(root),
html.theme-transition::view-transition-new(root) {
    animation: none;
}

html.theme-transition::view-transition-old(root) {
    z-index: 1;
}

html.theme-transition::view-transition-new(root) {
    z-index: 2;
}

html.language-transition::view-transition-old(root) {
    animation: languageViewOut 170ms ease both;
}

html.language-transition::view-transition-new(root) {
    animation: languageViewIn 270ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes languageViewOut {
    to {
        opacity: 0;
        transform: translateY(-3px);
        filter: blur(1px);
    }
}

@keyframes languageViewIn {
    from {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(1px);
    }

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

body.language-fading main,
body.language-fading .site-header,
body.language-fading .site-footer {
    opacity: 0.58;
    transform: translateY(2px);
}

main,
.site-header,
.site-footer {
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

/* Barra de herramientas funcional dentro de la previsualización del CV. */
.cv-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 58px;
    padding: 8px 11px 8px 16px;
}

.cv-preview-file {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.cv-preview-file > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-preview-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    flex-shrink: 0;
}

.cv-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 11px;

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

    color: var(--text-secondary);
    background: var(--surface-solid);

    font-size: 0.68rem;
    font-weight: 720;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.cv-toolbar-button:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.cv-toolbar-button svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Contacto contextual: aparece justo después de que el reclutador revisa el CV. */
.cv-contact-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;

    margin-top: 24px;
    padding: 16px;

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

    background: var(--surface-subtle, var(--surface-soft));
}

.cv-contact-box strong {
    display: block;
    margin-bottom: 3px;

    font-size: 0.79rem;
}

.cv-contact-box p {
    color: var(--text-secondary);

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

.cv-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 13px;

    border-radius: 11px;

    color: #ffffff;
    background: var(--accent-hover);

    font-size: 0.72rem;
    font-weight: 740;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.cv-contact-link:hover {
    transform: translateY(-2px);
    background: var(--accent);
}

@media (max-width: 1100px) {
    .desktop-nav {
        gap: 13px;
    }

    .desktop-nav a {
        min-width: 68px;
    }

    .desktop-nav a:nth-child(2),
    .desktop-nav a:nth-child(3) {
        min-width: 76px;
    }
}

@media (max-width: 680px) {
    .language-switch {
        width: 80px;
        height: 42px;
    }

    .language-option {
        font-size: 0.62rem;
    }

    .hero-copy h1,
    .hero-summary,
    .section-heading h2,
    .section-heading > p,
    .badge-card h3 {
        min-block-size: auto;
    }

    .cv-preview-toolbar {
        min-height: 54px;
        padding: 7px 8px 7px 12px;
    }

    .cv-preview-file > span:last-child {
        max-width: 116px;
    }

    .cv-toolbar-button {
        width: 38px;
        padding: 0;
    }

    .cv-toolbar-button span {
        position: absolute;

        width: 1px;
        height: 1px;
        overflow: hidden;

        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cv-contact-box {
        grid-template-columns: 1fr;
    }

    .cv-contact-link {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-icon,
    main,
    .site-header,
    .site-footer {
        transition: none;
    }
}


/* =========================================================
   AJUSTE PUNTUAL: CV COMPACTO Y CONTACTO SIN REDUNDANCIAS
   No modifica idioma, tema ni animaciones generales.
========================================================= */

.cv-card {
    grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1.42fr);
    gap: 44px;

    padding: clamp(28px, 4vw, 46px);
}

.cv-copy {
    align-self: center;
}

.cv-copy h3 {
    max-width: 430px;

    font-size: clamp(1.65rem, 3vw, 2.65rem);
}

.cv-copy > p:not(.eyebrow) {
    max-width: 430px;
}

.cv-summary-list {
    display: grid;
    gap: 10px;

    margin: 28px 0 0;
    padding: 0;

    list-style: none;
}

.cv-summary-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 13px;

    min-height: 54px;
    padding: 9px 13px;

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

    background: var(--surface-subtle, var(--surface-soft));
}

.cv-summary-list li > span {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 0.66rem;
    font-weight: 800;
}

.cv-summary-list strong {
    font-size: 0.76rem;
}

.cv-preview-shell {
    padding: 10px;

    border-radius: 24px;
}

.cv-preview-toolbar {
    margin-bottom: 10px;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.cv-preview-viewport {
    padding: 10px;
    overflow: hidden;

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

    background: var(--surface-soft);
}

.cv-preview {
    width: 100%;
    height: 500px;

    overflow: hidden;

    border: 0;
    border-radius: 10px;

    background: var(--surface-solid);
}

.cv-fallback {
    min-height: 430px;
}

/* El contacto queda dedicado exclusivamente a iniciar una conversación. */
.contact-card {
    align-items: stretch;
}

.contact-copy {
    align-self: center;
}

.contact-methods {
    display: grid;
    gap: 9px;

    width: min(100%, 340px);
}

.contact-method {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 16px;

    min-height: 76px;
    padding: 14px 17px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.065);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.contact-method:hover {
    transform: translateX(4px);

    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.11);
}

.contact-method-primary {
    color: #111216;
    background: #ffffff;
}

.contact-method-primary:hover {
    border-color: #ffffff;
    background: #f0efff;
}

.contact-method-label {
    grid-column: 1;

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

    font-size: 0.65rem;
    font-weight: 680;
}

.contact-method-primary .contact-method-label {
    color: #70727b;
}

.contact-method strong {
    grid-column: 1;

    font-size: 0.8rem;
}

.contact-method > span:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;

    font-size: 1rem;
}

@media (max-width: 980px) {
    .cv-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cv-copy {
        max-width: 720px;
    }

    .cv-summary-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cv-summary-list li {
        grid-template-columns: 1fr;
        align-content: start;
        min-height: 118px;
    }

    .cv-preview {
        height: 480px;
    }

    .contact-methods {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .cv-card {
        padding: 22px 16px;
    }

    .cv-summary-list {
        grid-template-columns: 1fr;
    }

    .cv-summary-list li {
        grid-template-columns: 38px 1fr;
        min-height: 54px;
    }

    .cv-preview-shell {
        padding: 7px;
        border-radius: 19px;
    }

    .cv-preview-toolbar {
        margin-bottom: 7px;
    }

    .cv-preview-viewport {
        padding: 6px;
        border-radius: 13px;
    }

    .cv-preview {
        height: 410px;
        border-radius: 8px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   REFINAMIENTO VISUAL EXCLUSIVO: CV Y CONTACTO
   El resto de la interfaz, idiomas, tema y animaciones no cambia.
========================================================= */

/* ---------- CV: visor tipo documento, no pantalla completa ---------- */

.cv-card {
    grid-template-columns: minmax(245px, 0.52fr) minmax(0, 1.48fr);
    align-items: center;
    gap: clamp(34px, 4vw, 56px);

    padding: clamp(30px, 4.5vw, 52px);
}

.cv-copy {
    align-self: center;
}

.cv-copy h3 {
    max-width: 390px;

    font-size: clamp(1.7rem, 3vw, 2.55rem);
    line-height: 1.04;
}

.cv-copy > p:not(.eyebrow) {
    max-width: 390px;
}

.cv-summary-list {
    max-width: 390px;
}

.cv-summary-list li {
    min-height: 50px;
    padding: 8px 12px;

    border-radius: 13px;
}

.cv-preview-shell {
    width: 100%;
    max-width: 690px;
    justify-self: center;

    padding: 10px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--surface-solid) 92%, var(--accent-soft)),
            var(--surface-solid)
        );
}

.cv-preview-toolbar {
    min-height: 52px;
    margin-bottom: 9px;
    padding: 0 12px 0 15px;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.cv-preview-viewport {
    display: grid;
    place-items: center;

    min-height: 555px;
    padding: 26px;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 50% 16%,
            var(--accent-soft),
            transparent 18rem
        ),
        color-mix(in srgb, var(--surface-soft) 88%, var(--surface-solid));
}

.cv-preview-stage {
    display: grid;
    place-items: center;

    width: 100%;
    min-height: 500px;
}

.cv-preview {
    display: block;

    width: min(100%, 430px);
    height: auto;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;

    border: 1px solid color-mix(in srgb, var(--border-strong) 82%, transparent);
    border-radius: 2px;

    background: #ffffff;
    box-shadow:
        0 22px 55px rgba(18, 19, 25, 0.14),
        0 4px 14px rgba(18, 19, 25, 0.08);

    clip-path: none;
}

/* El documento debe verse como una hoja limpia, no con las esquinas recortadas. */
.cv-preview[type="application/pdf"] {
    background: #ffffff;
}

html[data-theme="dark"] .cv-preview {
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.42),
        0 5px 16px rgba(0, 0, 0, 0.24);
}

.cv-fallback {
    width: 100%;
    min-height: 100%;
}

/* ---------- Contacto: CTA principal + accesos profesionales ---------- */

.contact-card {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(54px, 7vw, 104px);

    min-height: 455px;
    padding: clamp(46px, 6vw, 74px);
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 38px;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(119, 108, 255, 0.58),
            transparent 23rem
        ),
        radial-gradient(
            circle at 65% 115%,
            rgba(82, 70, 210, 0.3),
            transparent 26rem
        ),
        linear-gradient(118deg, #101116 0%, #12131a 54%, #25234f 100%);

    box-shadow:
        0 32px 85px rgba(20, 20, 31, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.contact-card::before {
    position: absolute;
    z-index: -1;
    top: -135px;
    right: -105px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    content: "";
}

.contact-card::after {
    position: absolute;
    z-index: -1;
    right: 18%;
    bottom: -170px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;

    content: "";
}

.contact-copy {
    align-self: center;
}

.contact-copy .eyebrow {
    color: #a9a3ff;
}

.contact-card h2 {
    max-width: 710px;

    font-size: clamp(3rem, 5.2vw, 5.25rem);
    line-height: 0.94;
}

.contact-copy > p:not(.eyebrow) {
    max-width: 610px;
    margin-top: 24px;

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

    font-size: 0.96rem;
    line-height: 1.78;
}

.contact-showcase {
    display: grid;
    gap: 13px;

    width: 100%;
    max-width: 430px;
    justify-self: end;
}

.contact-primary-card {
    position: relative;

    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 28px;

    min-height: 225px;
    padding: 24px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 25px;

    color: #111216;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(112, 103, 255, 0.16),
            transparent 11rem
        ),
        #ffffff;

    box-shadow:
        0 22px 48px rgba(4, 5, 10, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.contact-primary-card::after {
    position: absolute;
    right: -44px;
    bottom: -68px;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(112, 103, 255, 0.14);
    border-radius: 50%;

    content: "";
}

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

    box-shadow:
        0 30px 62px rgba(4, 5, 10, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.contact-primary-top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.contact-primary-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 15px;

    color: #ffffff;
    background: #111216;

    font-size: 1rem;
    font-weight: 800;
}

.contact-availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 10px;

    border: 1px solid rgba(22, 163, 74, 0.16);
    border-radius: 999px;

    color: #168653;
    background: rgba(22, 163, 74, 0.08);

    font-size: 0.65rem;
    font-weight: 740;
}

.contact-availability > span:first-child {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #18a85b;
    box-shadow: 0 0 0 5px rgba(24, 168, 91, 0.1);
}

.contact-primary-copy {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 5px;
}

.contact-primary-copy small {
    color: #70727b;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-primary-copy strong {
    max-width: calc(100% - 42px);

    font-size: clamp(1.12rem, 2vw, 1.42rem);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.contact-primary-arrow {
    position: absolute;
    z-index: 1;
    right: 25px;
    bottom: 24px;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border-radius: 50%;

    color: #ffffff;
    background: var(--accent-hover);

    font-size: 1rem;
}

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

.contact-social-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;

    min-height: 92px;
    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 19px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.065);

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

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background-color 200ms ease;
}

.contact-social-card:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
}

.contact-social-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

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

    font-size: 0.72rem;
    font-weight: 820;
}

.contact-social-card div {
    display: grid;
    gap: 2px;
}

.contact-social-card small {
    color: rgba(255, 255, 255, 0.5);

    font-size: 0.61rem;
    font-weight: 680;
}

.contact-social-card strong {
    font-size: 0.75rem;
}

.contact-social-card > span:last-child {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 980px) {
    .cv-card {
        grid-template-columns: 1fr;
    }

    .cv-copy,
    .cv-copy h3,
    .cv-copy > p:not(.eyebrow),
    .cv-summary-list {
        max-width: 720px;
    }

    .cv-preview-shell {
        max-width: 720px;
    }

    .cv-preview-viewport {
        min-height: 530px;
    }

    .contact-card {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .contact-showcase {
        max-width: none;
        justify-self: stretch;
    }

    .contact-primary-card {
        min-height: 205px;
    }
}

@media (max-width: 680px) {
    .cv-preview-toolbar {
        padding-inline: 10px;
    }

    .cv-preview-viewport {
        min-height: 445px;
        padding: 17px 12px;
    }

    .cv-preview-stage {
        min-height: 410px;
    }

    .cv-preview {
        width: min(100%, 335px);
    }

    .contact-card {
        min-height: auto;
        padding: 38px 22px;
        border-radius: 28px;
    }

    .contact-card h2 {
        font-size: clamp(2.75rem, 13vw, 4rem);
    }

    .contact-primary-card {
        min-height: 215px;
        padding: 20px;
        border-radius: 22px;
    }

    .contact-primary-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-primary-arrow {
        right: 20px;
        bottom: 20px;
    }

    .contact-social-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 680px) {
    .cv-preview {
        border-radius: 2px;
    }
}


/* =========================================================
   AJUSTE DEL BORDE DEL VISOR PDF
   Oculta el borde negro del lector nativo y usa los colores del sitio.
========================================================= */

.cv-document-frame {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 8.5 / 11;
    overflow: hidden;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 30%,
        var(--border)
    );
    border-radius: 5px;

    background: #ffffff;
    box-shadow:
        0 22px 55px rgba(18, 19, 25, 0.12),
        0 4px 14px rgba(18, 19, 25, 0.06);
}

/*
    El lector PDF de algunos navegadores dibuja su propio contorno negro.
    Se amplía dos píxeles y se recorta dentro del marco para ocultarlo.
*/
.cv-document-frame .cv-preview {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    aspect-ratio: auto;

    margin: -2px;

    border: 0;
    border-radius: 0;

    box-shadow: none;
    clip-path: none;
}

html[data-theme="dark"] .cv-document-frame {
    border-color: color-mix(
        in srgb,
        var(--accent) 42%,
        var(--border)
    );

    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.34),
        0 5px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 680px) {
    .cv-document-frame {
        width: min(100%, 360px);
        border-radius: 4px;
    }

    .cv-document-frame .cv-preview {
        border-radius: 0;
    }
}


/* =========================================================
   VISOR DE CV RENDERIZADO CON PDF.JS
   Sustituye el lector PDF nativo por un canvas totalmente estilizable.
========================================================= */

.cv-preview-viewport {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 540px;
    padding: 34px 26px;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 50% 18%,
            var(--accent-soft),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--surface-soft) 90%, var(--surface-solid)),
            var(--surface-soft)
        );
}

.cv-preview-viewport::before,
.cv-preview-viewport::after {
    position: absolute;

    border-radius: 50%;

    background: var(--accent-soft);
    filter: blur(2px);

    content: "";
    pointer-events: none;
}

.cv-preview-viewport::before {
    top: 11%;
    right: 7%;

    width: 54px;
    height: 54px;

    opacity: 0.65;
}

.cv-preview-viewport::after {
    bottom: 9%;
    left: 8%;

    width: 22px;
    height: 22px;

    opacity: 0.8;
}

.cv-document-preview {
    position: relative;
    z-index: 1;

    display: grid;
    justify-items: center;
    gap: 20px;

    width: min(100%, 420px);
    padding: 10px 8px 0;

    border-radius: 18px;

    transition:
        transform 240ms cubic-bezier(.22,1,.36,1);
}

.cv-document-preview:hover {
    transform: translateY(-5px);
}

.cv-paper-stack {
    position: relative;

    display: grid;
    place-items: center;

    width: min(100%, 360px);
}

.cv-paper-sheet {
    position: absolute;
    inset: 0;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 22%,
        var(--border)
    );
    border-radius: 5px;

    background: var(--surface-solid);
    box-shadow: var(--shadow-small);
}

.cv-paper-sheet-back {
    transform: translate(13px, 12px) rotate(2.1deg);
    opacity: 0.44;
}

.cv-paper-sheet-middle {
    transform: translate(7px, 6px) rotate(1deg);
    opacity: 0.72;
}

.cv-rendered-page {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 100%;
    overflow: hidden;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 15%,
        var(--border)
    );
    border-radius: 4px;

    background: #ffffff;
    box-shadow:
        0 28px 70px rgba(18, 19, 25, 0.15),
        0 8px 22px rgba(18, 19, 25, 0.08);
}

.cv-preview-canvas,
.cv-preview-fallback-image {
    display: block;

    max-width: 100%;
    height: auto;

    background: #ffffff;
}

.cv-preview-canvas {
    opacity: 0;

    transition: opacity 220ms ease;
}

.pdf-ready .cv-preview-canvas {
    opacity: 1;
}

.cv-preview-fallback-image[hidden] {
    display: none;
}

.cv-preview-loading {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: rgba(255, 255, 255, 0.9);
}

.cv-preview-loading[hidden] {
    display: none;
}

.cv-preview-loading span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    animation: cvLoadingPulse 1s infinite ease-in-out;
}

.cv-preview-loading span:nth-child(2) {
    animation-delay: 120ms;
}

.cv-preview-loading span:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes cvLoadingPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.cv-preview-caption {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;

    width: min(100%, 360px);
    min-height: 68px;
    padding: 12px 13px 12px 16px;

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

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 88%,
            transparent
        );
    box-shadow: var(--shadow-small);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cv-preview-caption div {
    display: grid;
    gap: 2px;
}

.cv-preview-caption div > span {
    color: var(--text-muted);

    font-size: 0.65rem;
    font-weight: 680;
}

.cv-preview-caption strong {
    font-size: 0.76rem;
}

.cv-preview-caption-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    color: #ffffff;
    background: var(--accent);

    font-size: 1rem;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.cv-document-preview:hover .cv-preview-caption-icon {
    transform: translate(2px, -2px);
    background: var(--accent-hover);
}

html[data-theme="dark"] .cv-rendered-page {
    box-shadow:
        0 30px 76px rgba(0, 0, 0, 0.42),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .cv-preview-loading {
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 980px) {
    .cv-preview-viewport {
        min-height: 520px;
    }
}

@media (max-width: 680px) {
    .cv-preview-viewport {
        min-height: 450px;
        padding: 24px 14px;
    }

    .cv-document-preview {
        width: min(100%, 340px);
    }

    .cv-paper-stack,
    .cv-preview-caption {
        width: min(100%, 300px);
    }

    .cv-preview-caption {
        min-height: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-preview-loading span {
        animation: none;
    }

    .cv-document-preview,
    .cv-preview-canvas,
    .cv-preview-caption-icon {
        transition: none;
    }
}


/* =========================================================
   CV COMPACTO + VISOR MODAL
   Sustituye la hoja enorme por una tarjeta de documento.
========================================================= */

.cv-compact-panel {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) minmax(210px, 1.28fr);
    align-items: center;
    gap: clamp(24px, 4vw, 42px);

    min-height: 390px;
    padding: clamp(24px, 4vw, 40px);

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

    background:
        radial-gradient(
            circle at 20% 18%,
            var(--accent-soft),
            transparent 15rem
        ),
        linear-gradient(
            145deg,
            var(--surface-solid),
            color-mix(
                in srgb,
                var(--surface-soft) 82%,
                var(--surface-solid)
            )
        );

    box-shadow: var(--shadow-small);
}

.cv-thumbnail-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 100%;
    padding: 14px;

    border: 0;
    border-radius: 22px;

    background: transparent;

    cursor: pointer;
}

.cv-thumbnail-frame {
    position: relative;

    display: grid;
    place-items: center;

    width: min(100%, 215px);
    aspect-ratio: 8.5 / 11;
    overflow: hidden;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 16%,
        var(--border)
    );
    border-radius: 5px;

    background: #ffffff;

    box-shadow:
        0 30px 65px rgba(22, 23, 30, 0.16),
        0 8px 20px rgba(22, 23, 30, 0.07);

    transform:
        perspective(1000px)
        rotateY(2deg)
        rotateX(1deg);

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease;
}

.cv-thumbnail-button:hover .cv-thumbnail-frame {
    transform:
        perspective(1000px)
        rotateY(0)
        rotateX(0)
        translateY(-6px);

    box-shadow:
        0 36px 76px rgba(22, 23, 30, 0.2),
        0 10px 24px rgba(22, 23, 30, 0.09);
}

.cv-thumbnail-frame::before {
    position: absolute;
    z-index: 2;
    inset: 0;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: inherit;

    content: "";
    pointer-events: none;
}

.cv-thumbnail-frame .cv-preview-canvas,
.cv-thumbnail-frame .cv-preview-fallback-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: top;

    background: #ffffff;
}

.cv-thumbnail-frame .cv-preview-canvas {
    opacity: 0;
    transition: opacity 180ms ease;
}

.pdf-ready .cv-thumbnail-frame .cv-preview-canvas {
    opacity: 1;
}

.cv-thumbnail-frame .cv-preview-fallback-image[hidden] {
    display: none;
}

.cv-thumbnail-frame .cv-preview-loading {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: rgba(255, 255, 255, 0.92);
}

.cv-thumbnail-frame .cv-preview-loading[hidden] {
    display: none;
}

.cv-thumbnail-hover {
    position: absolute;
    z-index: 4;
    inset: 0;

    display: grid;
    place-items: center;

    opacity: 0;

    background: rgba(17, 18, 22, 0.36);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition: opacity 180ms ease;
}

.cv-thumbnail-hover > span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    color: #111216;
    background: #ffffff;

    font-size: 1.05rem;

    transform: translateY(8px);
    transition: transform 180ms ease;
}

.cv-thumbnail-button:hover .cv-thumbnail-hover,
.cv-thumbnail-button:focus-visible .cv-thumbnail-hover {
    opacity: 1;
}

.cv-thumbnail-button:hover .cv-thumbnail-hover > span,
.cv-thumbnail-button:focus-visible .cv-thumbnail-hover > span {
    transform: translateY(0);
}

.cv-compact-information {
    display: grid;
    align-content: center;
    gap: 20px;
}

.cv-file-type {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 9px;

    width: max-content;
    padding: 7px 10px 7px 7px;

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

    background: var(--surface-subtle, var(--surface-soft));
}

.cv-file-type > span {
    display: grid;
    place-items: center;

    min-width: 40px;
    height: 28px;
    padding-inline: 8px;

    border-radius: 999px;

    color: #ffffff;
    background: var(--accent);

    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.cv-file-type small {
    color: var(--text-secondary);

    font-size: 0.67rem;
    font-weight: 680;
}

.cv-compact-kicker {
    margin-bottom: 5px;

    color: var(--accent);

    font-size: 0.68rem;
    font-weight: 760;
    text-transform: uppercase;
}

.cv-compact-information h4 {
    overflow-wrap: anywhere;

    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.cv-compact-description {
    max-width: 400px;
    margin-top: 9px;

    color: var(--text-secondary);

    font-size: 0.81rem;
    line-height: 1.66;
}

.cv-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-compact-meta span {
    padding: 6px 9px;

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

    color: var(--text-secondary);
    background: var(--surface-subtle, var(--surface-soft));

    font-size: 0.64rem;
    font-weight: 650;
}

.cv-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cv-compact-actions .primary-button,
.cv-compact-actions .secondary-button {
    width: auto;
}

/* ---------- Modal del CV ---------- */

body.cv-dialog-open {
    overflow: hidden;
}

.cv-viewer-dialog {
    width: min(calc(100% - 28px), 1100px);
    height: min(calc(100vh - 28px), 900px);
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;

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

    color: var(--text);
    background: var(--surface-solid);

    box-shadow:
        0 50px 150px rgba(0, 0, 0, 0.38);

    opacity: 0;
    transform: translateY(18px) scale(0.985);

    transition:
        opacity 220ms ease,
        transform 220ms cubic-bezier(.22,1,.36,1),
        overlay 220ms ease allow-discrete,
        display 220ms ease allow-discrete;
}

.cv-viewer-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    .cv-viewer-dialog[open] {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
}

.cv-viewer-dialog::backdrop {
    background: rgba(7, 8, 12, 0.66);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cv-viewer-shell {
    display: grid;
    grid-template-rows: auto 1fr;

    height: 100%;
}

.cv-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 78px;
    padding: 12px 14px 12px 18px;

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

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 90%,
            transparent
        );

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

.cv-viewer-title-group {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.cv-viewer-file-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    flex-shrink: 0;

    border-radius: 13px;

    color: #ffffff;
    background: var(--accent);

    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.cv-viewer-title-group > div {
    min-width: 0;
}

.cv-viewer-title-group span:not(.cv-viewer-file-icon) {
    display: block;

    color: var(--text-muted);

    font-size: 0.64rem;
    font-weight: 680;
}

.cv-viewer-title-group h2 {
    overflow: hidden;

    font-size: 0.91rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-viewer-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    flex-shrink: 0;
}

.cv-viewer-action,
.cv-viewer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 0 13px;

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

    color: var(--text-secondary);
    background: var(--surface-subtle, var(--surface-soft));

    font-size: 0.72rem;
    font-weight: 700;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.cv-viewer-action:hover,
.cv-viewer-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cv-viewer-close {
    width: 42px;
    padding: 0;

    font-size: 1.25rem;
    cursor: pointer;
}

.cv-viewer-content {
    position: relative;

    overflow: auto;
    overscroll-behavior: contain;

    padding: 34px;

    background:
        radial-gradient(
            circle at 50% 0%,
            var(--accent-soft),
            transparent 24rem
        ),
        var(--surface-soft);
}

.cv-viewer-pages {
    display: grid;
    justify-items: center;
    gap: 30px;

    min-height: 100%;
}

.cv-viewer-page {
    position: relative;

    width: max-content;
    max-width: 100%;
}

.cv-viewer-page-canvas {
    display: block;

    max-width: 100%;
    height: auto;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(18, 19, 25, 0.17),
        0 8px 24px rgba(18, 19, 25, 0.08);
}

.cv-viewer-page-number {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;

    display: grid;
    place-items: center;

    min-width: 30px;
    height: 30px;
    padding-inline: 8px;

    border-radius: 999px;

    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.88);

    box-shadow: 0 5px 16px rgba(18, 19, 25, 0.1);

    font-size: 0.67rem;
    font-weight: 760;
}

.cv-viewer-loading {
    position: absolute;
    z-index: 5;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: var(--surface-soft);
}

.cv-viewer-loading[hidden] {
    display: none;
}

.cv-viewer-loading span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--accent);

    animation: cvLoadingPulse 1s infinite ease-in-out;
}

.cv-viewer-loading span:nth-child(2) {
    animation-delay: 120ms;
}

.cv-viewer-loading span:nth-child(3) {
    animation-delay: 240ms;
}

@media (max-width: 980px) {
    .cv-compact-panel {
        grid-template-columns: minmax(150px, 0.62fr) minmax(210px, 1.38fr);
    }
}

@media (max-width: 680px) {
    .cv-compact-panel {
        grid-template-columns: 1fr;
        gap: 24px;

        min-height: auto;
        padding: 24px 18px;
    }

    .cv-thumbnail-frame {
        width: min(100%, 180px);
    }

    .cv-compact-information {
        justify-items: start;
    }

    .cv-compact-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .cv-compact-actions .primary-button,
    .cv-compact-actions .secondary-button {
        width: 100%;
    }

    .cv-viewer-dialog {
        width: calc(100% - 16px);
        height: calc(100vh - 16px);

        border-radius: 20px;
    }

    .cv-viewer-header {
        min-height: 68px;
        padding: 9px 9px 9px 12px;
    }

    .cv-viewer-file-icon {
        width: 40px;
        height: 40px;
    }

    .cv-viewer-header-actions {
        gap: 5px;
    }

    .cv-viewer-action {
        width: 42px;
        padding: 0;

        font-size: 0;
    }

    .cv-viewer-action > span:last-child {
        font-size: 0.88rem;
    }

    .cv-viewer-content {
        padding: 18px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-thumbnail-frame,
    .cv-thumbnail-hover,
    .cv-thumbnail-hover > span,
    .cv-viewer-dialog {
        transition: none;
    }

    .cv-viewer-loading span {
        animation: none;
    }
}


/* =========================================================
   CV FUNCIONAL SIN PDF.JS
   La miniatura y el modal cargan el PDF directamente.
========================================================= */

/* Oculta los elementos antiguos de carga si quedaron reglas previas. */
.cv-preview-canvas,
.cv-preview-fallback-image,
.cv-preview-loading,
.cv-viewer-loading,
.cv-viewer-pages {
    display: none !important;
}

/* Miniatura real del PDF. */
.cv-thumbnail-frame {
    isolation: isolate;
}

.cv-thumbnail-pdf {
    position: absolute;
    inset: -3px;

    width: calc(100% + 6px);
    height: calc(100% + 6px);

    border: 0;

    background: #ffffff;

    pointer-events: none;
}

/*
    El pequeño zoom evita que se vea el marco negro que algunos
    navegadores agregan alrededor del lector PDF.
*/
.cv-thumbnail-pdf {
    transform: scale(1.018);
    transform-origin: center;
}

/* Visor principal dentro del modal. */
.cv-viewer-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;

    padding: 16px;
    overflow: hidden;
}

.cv-viewer-pdf {
    display: block;

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

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

    background: #ffffff;
}

.cv-viewer-help {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding-top: 8px;

    color: var(--text-muted);

    font-size: 0.66rem;
    text-align: center;
}

html[data-theme="dark"] .cv-viewer-pdf {
    border-color: color-mix(
        in srgb,
        var(--accent) 26%,
        var(--border)
    );
}

@media (max-width: 680px) {
    .cv-viewer-content {
        padding: 9px;
    }

    .cv-viewer-pdf {
        border-radius: 11px;
    }

    .cv-viewer-help {
        font-size: 0.62rem;
    }
}


/* =========================================================
   PORTADA PROFESIONAL DEL CV
   Evita mostrar el lector PDF reducido antes de abrir el modal.
========================================================= */

.cv-thumbnail-pdf {
    display: none !important;
}

.cv-cover-preview {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;

    padding: 18px;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 20%,
        var(--border)
    );
    border-radius: 9px;

    background:
        radial-gradient(
            circle at 92% 5%,
            var(--accent-soft),
            transparent 42%
        ),
        #ffffff;

    color: #15161b;

    text-align: left;
}

.cv-cover-preview::before {
    border-color: rgba(255, 255, 255, 0.92);
    border-radius: inherit;
}

.cv-cover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cv-cover-mark {
    font-size: 0.72rem;
    font-weight: 880;
    letter-spacing: -0.07em;
}

.cv-cover-mark::first-letter {
    color: #15161b;
}

.cv-cover-document-type {
    display: grid;
    place-items: center;

    min-width: 34px;
    height: 24px;
    padding: 0 8px;

    border-radius: 999px;

    color: #ffffff;
    background: var(--accent);

    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.cv-cover-profile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 11px;

    margin-top: 26px;
}

.cv-cover-avatar {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 25%,
        transparent
    );
    border-radius: 50%;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 0.9rem;
    font-weight: 850;
}

.cv-cover-identity {
    display: grid;
    gap: 1px;

    min-width: 0;
}

.cv-cover-identity strong {
    overflow: hidden;

    font-size: 0.71rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-cover-identity small {
    overflow: hidden;

    color: #70737d;

    font-size: 0.49rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-cover-divider {
    width: 100%;
    height: 1px;
    margin: 18px 0;

    background: rgba(17, 18, 22, 0.09);
}

.cv-cover-content {
    display: grid;
    gap: 17px;
}

.cv-cover-section {
    display: grid;
    gap: 6px;
}

.cv-cover-section-label {
    width: 35%;
    height: 5px;

    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--accent) 58%,
        #ffffff
    );
}

.cv-cover-line {
    width: 78%;
    height: 4px;

    border-radius: 999px;
    background: #e5e6eb;
}

.cv-cover-line-long {
    width: 94%;
}

.cv-cover-line-medium {
    width: 84%;
}

.cv-cover-line-short {
    width: 61%;
}

.cv-cover-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: auto;
    padding-top: 18px;
}

.cv-cover-skills span {
    padding: 4px 6px;

    border: 1px solid rgba(17, 18, 22, 0.07);
    border-radius: 999px;

    color: #6a6d76;
    background: #f2f2f5;

    font-size: 0.45rem;
    font-weight: 700;
}

.cv-cover-preview .cv-thumbnail-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;

    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(17, 18, 22, 0.72),
            rgba(73, 65, 190, 0.7)
        );

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.cv-hover-action {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    color: #15161b;
    background: #ffffff;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.cv-thumbnail-hover > strong {
    font-size: 0.66rem;
    font-weight: 760;

    transform: translateY(6px);
    transition: transform 180ms ease;
}

.cv-thumbnail-button:hover .cv-thumbnail-hover > strong,
.cv-thumbnail-button:focus-visible .cv-thumbnail-hover > strong {
    transform: translateY(0);
}

html[data-theme="dark"] .cv-cover-preview {
    border-color: color-mix(
        in srgb,
        var(--accent) 28%,
        var(--border)
    );

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(112, 103, 255, 0.1),
            transparent 42%
        ),
        #ffffff;

    box-shadow:
        0 32px 72px rgba(0, 0, 0, 0.38),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 680px) {
    .cv-cover-preview {
        padding: 16px;
    }

    .cv-cover-profile {
        margin-top: 22px;
    }
}


/* =========================================================
   MINIATURA REAL DEL PDF
   Renderiza la primera página sin mostrar la interfaz del navegador.
========================================================= */

.cv-cover-preview {
    display: none !important;
}

.cv-live-preview {
    display: grid;
    place-items: center;

    padding: 0;
    overflow: hidden;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 18%,
        var(--border)
    );
    border-radius: 6px;

    background: #ffffff;
}

.cv-live-preview-canvas {
    display: block;

    max-width: 100%;
    max-height: 100%;

    opacity: 0;

    background: #ffffff;

    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(.22,1,.36,1);
}

.cv-preview-ready .cv-live-preview-canvas {
    opacity: 1;
}

.cv-thumbnail-button:hover .cv-live-preview-canvas {
    transform: scale(1.018);
}

.cv-live-preview-loading {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background:
        radial-gradient(
            circle at 50% 42%,
            var(--accent-soft),
            transparent 8rem
        ),
        #ffffff;
}

.cv-live-preview-loading[hidden] {
    display: none;
}

.cv-live-preview-loading > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    animation: cvThumbnailLoading 1s infinite ease-in-out;
}

.cv-live-preview-loading > span:nth-child(2) {
    animation-delay: 120ms;
}

.cv-live-preview-loading > span:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes cvThumbnailLoading {
    0%,
    100% {
        opacity: 0.28;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.cv-live-preview-error {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;

    padding: 18px;

    color: #555863;
    background: #ffffff;

    text-align: center;
}

.cv-live-preview-error[hidden] {
    display: none;
}

.cv-live-preview-error > span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    color: #ffffff;
    background: var(--accent);

    font-size: 0.64rem;
    font-weight: 850;
}

.cv-live-preview-error strong {
    max-width: 150px;

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

.cv-live-preview .cv-thumbnail-hover {
    z-index: 4;
}

html[data-theme="dark"] .cv-live-preview {
    border-color: color-mix(
        in srgb,
        var(--accent) 30%,
        var(--border)
    );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.38),
        0 8px 22px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .cv-live-preview-canvas,
    .cv-live-preview-loading > span {
        animation: none;
        transition: none;
    }
}


/* =========================================================
   FOTO PRINCIPAL REAL
========================================================= */

.hero-photo-frame {
    position: relative;

    min-height: 490px;
    overflow: hidden;

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

    background:
        linear-gradient(
            145deg,
            var(--surface-solid),
            var(--accent-soft)
        );
}

.hero-photo-frame .hero-image {
    position: absolute;
    z-index: 2;
    inset: 0;

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

    opacity: 0;

    border-radius: inherit;

    object-fit: cover;
    object-position: center;

    transition:
        opacity 320ms ease,
        transform 700ms cubic-bezier(.22,1,.36,1);
}

.hero-photo-frame.photo-loaded .hero-image {
    opacity: 1;
}

.hero-photo-frame.photo-loaded:hover .hero-image {
    transform: scale(1.025);
}

.hero-photo-fallback {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    overflow: hidden;

    text-align: center;
}

.hero-photo-fallback > span {
    position: relative;
    z-index: 1;

    margin-bottom: 14px;

    color: var(--accent);

    font-size: 4.6rem;
    font-weight: 800;
    letter-spacing: -0.13em;
}

.hero-photo-fallback strong,
.hero-photo-fallback small {
    position: relative;
    z-index: 1;
}

.hero-photo-fallback small {
    max-width: 240px;
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 0.7rem;
}

.hero-photo-accent {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 18px;

    width: 12px;
    height: 12px;

    border: 3px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;

    background: var(--accent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);

    opacity: 0;
    transition: opacity 220ms ease;
}

.hero-photo-frame.photo-loaded .hero-photo-accent {
    opacity: 1;
}


/* =========================================================
   CARRUSEL DE PROYECTOS
========================================================= */

.projects-carousel {
    position: relative;
}

.projects-carousel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 46px;
    margin-bottom: 16px;
}

.projects-counter {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--text-muted);

    font-size: 0.72rem;
    font-weight: 720;
}

.projects-counter span:first-child {
    color: var(--accent);
}

.projects-navigation {
    display: flex;
    gap: 8px;

    opacity: 0;
    pointer-events: none;

    transition: opacity 180ms ease;
}

.projects-carousel.has-overflow .projects-navigation {
    opacity: 1;
    pointer-events: auto;
}

.carousel-button,
.project-gallery-button {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    color: var(--text);
    background: var(--surface);

    font-size: 0.95rem;
    cursor: pointer;

    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.carousel-button:hover:not(:disabled),
.project-gallery-button:hover {
    transform: translateY(-2px);

    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.carousel-button:disabled {
    opacity: 0.34;
    cursor: default;
}

.projects-viewport {
    overflow-x: auto;
    overflow-y: hidden;

    padding: 1px 1px 24px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.projects-viewport::-webkit-scrollbar {
    display: none;
}

.projects-track {
    display: grid;
    grid-auto-columns: calc((100% - 36px) / 3);
    grid-auto-flow: column;
    gap: 18px;
}

.project-card-dynamic {
    min-width: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.project-card-media {
    position: relative;

    min-height: 250px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            var(--accent-soft),
            transparent 45%
        ),
        var(--surface-soft);
}

.project-card-media img {
    width: 100%;
    height: 250px;

    object-fit: cover;

    transition: transform 420ms cubic-bezier(.22,1,.36,1);
}

.project-card:hover .project-card-media img {
    transform: scale(1.035);
}

.project-card-index {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;

    display: grid;
    place-items: center;

    min-width: 42px;
    height: 32px;
    padding: 0 10px;

    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(17, 18, 22, 0.58);

    font-size: 0.67rem;
    font-weight: 780;

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

.project-card-media.image-missing,
.project-gallery-media.image-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;

    color: var(--text-muted);
}

.project-image-fallback-symbol {
    color: var(--accent);

    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.1em;
}

.project-card-media.image-missing small,
.project-gallery-media.image-missing small {
    font-size: 0.7rem;
}

.projects-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 20px;
}

.projects-pagination-dot,
.project-gallery-pagination-dot {
    width: 7px;
    height: 7px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: var(--border-strong);

    cursor: pointer;

    transition:
        width 180ms ease,
        background-color 180ms ease;
}

.projects-pagination-dot.active,
.project-gallery-pagination-dot.active {
    width: 24px;
    background: var(--accent);
}


/* =========================================================
   PROYECTO ABIERTO: TÍTULO, GALERÍA Y DESCRIPCIÓN
========================================================= */

body.project-dialog-open {
    overflow: hidden;
}

.project-showcase-dialog {
    width: min(calc(100% - 32px), 940px);
    max-height: min(92vh, 900px);
    padding: 0;
    overflow: auto;

    border-radius: 28px;
}

.project-showcase-layout {
    position: relative;

    display: grid;
    gap: 30px;

    padding: clamp(28px, 5vw, 52px);
}

.project-showcase-header {
    padding-right: 58px;
}

.project-showcase-header h2 {
    margin-top: 9px;

    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.project-gallery {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.project-gallery-viewport {
    overflow: hidden;

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

    background: var(--surface-soft);
    box-shadow: var(--shadow-small);
}

.project-gallery-track {
    display: flex;

    will-change: transform;
}

.project-gallery-slide {
    min-width: 100%;
    margin: 0;
}

.project-gallery-media {
    display: grid;
    place-items: center;

    min-height: 420px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            var(--accent-soft),
            transparent 24rem
        ),
        var(--surface-soft);
}

.project-gallery-media img {
    display: block;

    width: 100%;
    height: 420px;

    object-fit: contain;
}

.project-gallery-button {
    flex-shrink: 0;
}

.project-gallery.single-image .project-gallery-button,
.project-gallery.single-image .project-gallery-pagination {
    visibility: hidden;
}

.project-gallery-pagination {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;
    gap: 7px;

    min-height: 18px;
}

.project-showcase-description {
    display: grid;
    gap: 14px;

    max-width: 760px;
}

.project-showcase-description > p:not(.eyebrow) {
    color: var(--text-secondary);

    font-size: 0.95rem;
    line-height: 1.82;
}

.project-dialog-tags {
    margin: 6px 0 0;
}


/* =========================================================
   RESPONSIVE DE PROYECTOS
========================================================= */

@media (max-width: 980px) {
    .hero-photo-frame {
        min-height: 400px;
    }

    .projects-track {
        grid-auto-columns: calc((100% - 18px) / 2);
    }

    .project-gallery-media,
    .project-gallery-media img {
        height: 350px;
        min-height: 350px;
    }
}

@media (max-width: 680px) {
    .hero-photo-frame {
        min-height: 310px;
        border-radius: 22px;
    }

    .projects-carousel-toolbar {
        margin-bottom: 12px;
    }

    .projects-track {
        grid-auto-columns: 100%;
    }

    .projects-navigation {
        opacity: 1;
        pointer-events: auto;
    }

    .project-card-media,
    .project-card-media img {
        height: 215px;
        min-height: 215px;
    }

    .project-showcase-dialog {
        width: calc(100% - 16px);
        max-height: calc(100vh - 16px);

        border-radius: 22px;
    }

    .project-showcase-layout {
        gap: 23px;
        padding: 26px 18px;
    }

    .project-gallery {
        grid-template-columns: 1fr;
    }

    .project-gallery-button {
        position: absolute;
        z-index: 3;
        top: 50%;

        transform: translateY(-50%);

        color: #ffffff;
        background: rgba(17, 18, 22, 0.62);

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

    .project-gallery-button:hover {
        transform: translateY(-50%);
    }

    .project-gallery-previous {
        left: 10px;
    }

    .project-gallery-next {
        right: 10px;
    }

    .project-gallery-pagination {
        grid-column: 1;
    }

    .project-gallery-media,
    .project-gallery-media img {
        height: 250px;
        min-height: 250px;
    }

    .project-showcase-description > p:not(.eyebrow) {
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo-frame .hero-image,
    .project-card-media img,
    .project-gallery-track {
        transition: none !important;
    }
}


/* =========================================================
   REFINAMIENTO DEL CARRUSEL Y MODAL DE PROYECTOS
========================================================= */

/* El punto de la fotografía era decorativo y se elimina. */
.hero-photo-accent {
    display: none !important;
}

/* No mostrar contador ni espacios vacíos cuando no hay overflow. */
.projects-counter {
    display: none !important;
}

.projects-carousel-toolbar {
    justify-content: flex-end;

    min-height: auto;
    margin-bottom: 14px;
}

.projects-carousel-toolbar[hidden],
.projects-pagination[hidden] {
    display: none !important;
}

.projects-navigation {
    opacity: 1;
    pointer-events: auto;
}

.projects-pagination {
    margin-top: -7px;
}

/* ---------- Modal profesional sin barra visible ---------- */

.project-showcase-dialog {
    width: min(calc(100% - 32px), 1120px);
    height: min(86vh, 760px);
    max-height: none;
    padding: 0;
    overflow: hidden;

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

    background: var(--surface-solid);
    box-shadow:
        0 48px 140px rgba(0, 0, 0, 0.32);
}

.project-showcase-dialog::backdrop {
    background: rgba(8, 9, 13, 0.67);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.project-showcase-layout {
    position: relative;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 25px;

    width: 100%;
    height: 100%;
    padding: clamp(30px, 4vw, 44px);

    overflow: hidden;
}

.project-showcase-header {
    min-width: 0;
    padding-right: 64px;
}

.project-showcase-header h2 {
    max-width: 880px;
    margin-top: 8px;

    font-size: clamp(2.45rem, 5.5vw, 4.35rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.project-showcase-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(280px, 0.68fr);
    gap: 24px;

    min-height: 0;
}

.project-gallery {
    position: relative;

    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;

    min-width: 0;
    min-height: 0;
}

.project-gallery-viewport {
    position: relative;

    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 50% 15%,
            var(--accent-soft),
            transparent 24rem
        ),
        var(--surface-soft);

    box-shadow: var(--shadow-small);
}

.project-gallery-track,
.project-gallery-slide,
.project-gallery-media {
    height: 100%;
}

.project-gallery-slide {
    min-width: 100%;
    margin: 0;
}

.project-gallery-media {
    min-height: 0;
}

.project-gallery-media img {
    width: 100%;
    height: 100%;
    min-height: 0;

    object-fit: contain;
}

.project-gallery-button {
    position: absolute;
    z-index: 4;
    top: 50%;

    width: 44px;
    height: 44px;

    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(17, 18, 22, 0.58);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);

    transform: translateY(-50%);

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

.project-gallery-button:hover {
    transform: translateY(-50%);

    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.42);
    background: var(--accent);
}

.project-gallery-previous {
    left: 14px;
}

.project-gallery-next {
    right: 14px;
}

.project-gallery-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;

    min-height: 18px;
}

.project-gallery.single-image .project-gallery-button,
.project-gallery.single-image .project-gallery-pagination {
    display: none;
}

.project-showcase-description {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;
    padding: 28px;
    overflow-y: auto;
    overscroll-behavior: contain;

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

    background:
        linear-gradient(
            150deg,
            var(--surface-solid),
            color-mix(
                in srgb,
                var(--accent-soft) 36%,
                var(--surface-solid)
            )
        );

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

    scrollbar-width: none;
}

.project-showcase-description::-webkit-scrollbar {
    display: none;
}

.project-description-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 19px;
}

.project-description-heading .eyebrow {
    flex-shrink: 0;
}

.project-description-line {
    width: 100%;
    height: 1px;

    background: var(--border);
}

.project-showcase-description > p:not(.eyebrow) {
    color: var(--text-secondary);

    font-size: 0.9rem;
    line-height: 1.82;
}

.project-technologies-block {
    margin-top: auto;
    padding-top: 28px;
}

.project-technologies-label {
    display: block;
    margin-bottom: 11px;

    color: var(--text-muted);

    font-size: 0.66rem;
    font-weight: 720;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.project-dialog-tags {
    margin: 0;
}

.project-showcase-dialog .dialog-close {
    z-index: 10;
    top: 22px;
    right: 22px;

    background: var(--surface-soft);
    box-shadow: 0 8px 24px rgba(18, 19, 25, 0.08);
}

/* En modo oscuro la descripción conserva profundidad. */
html[data-theme="dark"] .project-showcase-description {
    background:
        linear-gradient(
            150deg,
            var(--surface-solid),
            color-mix(
                in srgb,
                var(--accent-soft) 42%,
                var(--surface-solid)
            )
        );
}

/* ---------- Tableta ---------- */

@media (max-width: 900px) {
    .project-showcase-dialog {
        height: min(92vh, 860px);
    }

    .project-showcase-content {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(320px, 1fr) auto;
    }

    .project-showcase-description {
        max-height: 235px;
    }
}

/* ---------- Teléfono ---------- */

@media (max-width: 680px) {
    .projects-carousel-toolbar {
        margin-bottom: 11px;
    }

    .projects-navigation {
        opacity: 1;
        pointer-events: auto;
    }

    .project-showcase-dialog {
        width: calc(100% - 12px);
        height: calc(100vh - 12px);
        max-height: none;

        border-radius: 22px;
    }

    .project-showcase-layout {
        display: block;

        height: 100%;
        padding: 24px 16px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: none;
    }

    .project-showcase-layout::-webkit-scrollbar {
        display: none;
    }

    .project-showcase-header {
        margin-bottom: 22px;
        padding-right: 48px;
    }

    .project-showcase-header h2 {
        font-size: clamp(2.45rem, 13vw, 3.65rem);
    }

    .project-showcase-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 18px;
    }

    .project-gallery {
        height: 310px;
    }

    .project-gallery-viewport {
        border-radius: 18px;
    }

    .project-gallery-button {
        width: 40px;
        height: 40px;
    }

    .project-gallery-previous {
        left: 9px;
    }

    .project-gallery-next {
        right: 9px;
    }

    .project-showcase-description {
        max-height: none;
        padding: 23px 20px;

        overflow: visible;

        border-radius: 18px;
    }

    .project-technologies-block {
        margin-top: 24px;
        padding-top: 0;
    }

    .project-showcase-dialog .dialog-close {
        top: 14px;
        right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-gallery-button {
        transition: none;
    }
}


/* =========================================================
   CORRECCIÓN PUNTUAL
   - La galería usa todo el espacio disponible.
   - Las tarjetas ya no se recortan durante el hover.
========================================================= */

/*
    La galería conservaba una cuadrícula anterior de tres columnas.
    Esto comprimía la imagen a la izquierda y producía el gran
    espacio vacío del centro.
*/
.project-showcase-content {
    grid-template-columns:
        minmax(0, 1.78fr)
        minmax(290px, 0.62fr);

    gap: 18px;
}

.project-gallery {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
}

.project-gallery-viewport {
    width: 100%;
}

.project-gallery-track,
.project-gallery-slide,
.project-gallery-media {
    width: 100%;
}

.project-showcase-description {
    width: 100%;
    padding: 26px;
}

/*
    La tarjeta sube 6px al hacer hover. Este espacio superior
    permite que la animación se vea completa sin recortarse.
*/
.projects-viewport {
    margin-top: -10px;
    padding-top: 11px;
}

/* Mantiene las tarjetas alineadas aunque exista el espacio de hover. */
.projects-track {
    align-items: stretch;
}

.project-card-dynamic {
    height: 100%;
}

/* Tableta: la galería vuelve a ocupar todo el ancho. */
@media (max-width: 900px) {
    .project-showcase-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

/* Teléfono: evita alterar el espaciado compacto existente. */
@media (max-width: 680px) {
    .projects-viewport {
        margin-top: -8px;
        padding-top: 9px;
    }

    .project-showcase-content {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =========================================================
   CV RETRABAJADO
   Solo modifica la presentación de la sección del currículum.
========================================================= */

.cv-compact-panel {
    grid-template-columns:
        minmax(185px, 0.78fr)
        minmax(270px, 1.22fr);
    gap: clamp(28px, 4vw, 46px);

    min-height: 400px;
    padding: clamp(26px, 4vw, 42px);
}

.cv-thumbnail-button {
    padding: 8px;
}

.cv-thumbnail-frame {
    width: min(100%, 225px);
}

.cv-compact-information {
    align-content: center;
    gap: 18px;

    min-width: 0;
}

.cv-profile-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.cv-profile-monogram {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    border: 1px solid color-mix(
        in srgb,
        var(--accent) 28%,
        var(--border)
    );
    border-radius: 16px;

    color: var(--accent);
    background:
        linear-gradient(
            145deg,
            var(--accent-soft),
            color-mix(
                in srgb,
                var(--surface-solid) 82%,
                var(--accent-soft)
            )
        );

    font-size: 0.76rem;
    font-weight: 860;
    letter-spacing: -0.04em;
}

.cv-profile-heading .cv-compact-kicker {
    margin: 0 0 3px;
}

.cv-profile-heading h4 {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    letter-spacing: -0.045em;
}

.cv-profile-role {
    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 0.76rem;
    font-weight: 680;
}

.cv-compact-description {
    max-width: 480px;
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.72;
}

.cv-profile-highlights {
    display: grid;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.cv-profile-highlights li {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    min-height: 35px;
    padding: 6px 0;

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

.cv-profile-highlights li:last-child {
    border-bottom: 0;
}

.cv-profile-highlights li > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-soft);
}

.cv-profile-highlights strong {
    color: var(--text-secondary);

    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1.45;
}

.cv-compact-actions {
    margin-top: 2px;
}

.cv-thumbnail-hover > strong {
    text-align: center;
}

.cv-viewer-file-icon {
    letter-spacing: 0.04em;
}

@media (max-width: 980px) {
    .cv-compact-panel {
        grid-template-columns:
            minmax(175px, 0.7fr)
            minmax(250px, 1.3fr);
    }
}

@media (max-width: 760px) {
    .cv-compact-panel {
        grid-template-columns: 1fr;
        gap: 25px;

        min-height: auto;
        padding: 25px 18px;
    }

    .cv-thumbnail-frame {
        width: min(100%, 205px);
    }

    .cv-compact-information {
        width: min(100%, 520px);
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .cv-profile-heading {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
    }

    .cv-profile-monogram {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .cv-profile-heading h4 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-profile-monogram,
    .cv-profile-highlights li {
        transition: none;
    }
}
/* =========================================================
   COLUMNA IZQUIERDA DEL CV SIMPLIFICADA
========================================================= */

.cv-section .cv-card {
    grid-template-columns:
        minmax(250px, 0.56fr)
        minmax(0, 1.44fr);

    gap: clamp(34px, 5vw, 72px);
}

.cv-copy-refined {
    align-self: center;

    width: 100%;
    max-width: 350px;
}

.cv-copy-refined h3 {
    max-width: 340px;
    margin: 14px 0 20px;

    font-size: clamp(2.15rem, 3.5vw, 3.35rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.cv-copy-refined > p:not(.eyebrow) {
    max-width: 345px;

    color: var(--text-secondary);

    font-size: 0.9rem;
    line-height: 1.8;
}

.cv-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 27px 0 0;
    padding: 0;

    list-style: none;
}

.cv-focus-list li {
    display: inline-flex;
    align-items: center;

    min-height: 34px;
    padding: 7px 12px;

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

    color: var(--text-secondary);
    background: var(--surface-soft);

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
}

.cv-focus-list li:last-child {
    color: var(--accent);

    border-color: color-mix(
        in srgb,
        var(--accent) 28%,
        var(--border)
    );

    background: var(--accent-soft);
}

@media (max-width: 900px) {
    .cv-section .cv-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cv-copy-refined {
        max-width: 620px;
    }

    .cv-copy-refined h3,
    .cv-copy-refined > p:not(.eyebrow) {
        max-width: 560px;
    }
}

@media (max-width: 600px) {
    .cv-copy-refined h3 {
        max-width: 320px;

        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .cv-focus-list {
        margin-top: 22px;
    }

    .cv-focus-list li {
        min-height: 32px;
        padding: 6px 10px;

        font-size: 0.64rem;
    }
}
/* =========================================================
   TARJETAS DE PROYECTO COMPLETAMENTE CLICABLES
========================================================= */

.project-card-dynamic {
    display: flex;
    flex-direction: column;

    cursor: pointer;
    user-select: none;
}

.project-card-dynamic .project-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.project-card-dynamic .tag-list {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 18px;
}

.project-card-dynamic:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 4px;

    border-color: var(--accent);

    box-shadow:
        0 0 0 2px var(--focus-offset),
        var(--shadow-medium);
}

.project-card-dynamic:active {
    transform: translateY(-2px) scale(0.995);
}

/*
    El botón anterior ya no se genera.
    Esta regla evita que aparezca si quedara alguno
    guardado por caché durante una recarga.
*/
.project-card-dynamic .project-button {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .project-card-dynamic:hover .project-content h3 {
        color: var(--accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card-dynamic:active {
        transform: none;
    }
}
/* =========================================================
   ESPACIADO UNIFICADO DE ENCABEZADOS
   Proyectos, Insignias, Perfil y CV
========================================================= */

.section-heading h2 {
    display: grid;
    gap: clamp(6px, 0.5vw, 10px);

    line-height: 1;
}

.section-heading h2 .heading-main,
.section-heading h2 .heading-accent {
    display: block;

    line-height: 1;
}

@media (max-width: 640px) {
    .section-heading h2 {
        gap: 9px;

        line-height: 1.02;
    }

    .section-heading h2 .heading-main,
    .section-heading h2 .heading-accent {
        line-height: 1.02;
    }
}
/* =========================================================
   IMÁGENES DE PROYECTOS SIN RECORTE NI ESPACIO MUERTO

   - Horizontales: el marco adopta la proporción real.
   - Verticales: permanecen completas, centradas y con fondo.
========================================================= */

.project-card-media,
.project-gallery-media {
    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;
    isolation: isolate;
}

/* ---------- Fondo para capturas verticales ---------- */

.project-card-media::before,
.project-gallery-media::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: -34px;

    background-image:
        var(--project-image-background);
    background-position: center;
    background-size: cover;

    filter: blur(28px) saturate(0.82);
    opacity: 0;

    transform: scale(1.1);

    transition: opacity 220ms ease;
}

.project-card-media::after,
.project-gallery-media::after {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 64%,
            transparent
        );

    opacity: 0;

    transition: opacity 220ms ease;
}

.project-card-media.project-image-portrait::before,
.project-gallery-media.project-image-portrait::before {
    opacity: 0.34;
}

.project-card-media.project-image-portrait::after,
.project-gallery-media.project-image-portrait::after {
    opacity: 0.78;
}

/* ---------- Imágenes generales ---------- */

.project-card-media img,
.project-gallery-media img {
    position: relative;
    z-index: 1;

    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    transform: none !important;
}

/* =========================================================
   PORTADAS DE LAS TARJETAS
========================================================= */

/*
    Las portadas horizontales definen la altura del marco
    mediante su proporción real. Ya no quedan franjas arriba
    o abajo.
*/

.project-card-media.project-image-landscape {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio:
        var(--project-image-ratio, 16 / 9);
}

.project-card-media.project-image-landscape img {
    width: 100%;
    height: 100% !important;

    object-fit: contain;
}

/*
    Las portadas verticales conservan una altura estable
    para evitar tarjetas excesivamente largas.
*/

.project-card-media.project-image-portrait {
    width: 100%;
    height: 250px;
    min-height: 250px;
}

.project-card-media.project-image-portrait img {
    width: auto !important;
    height: 100% !important;

    object-fit: contain;

    box-shadow:
        0 18px 48px rgba(8, 9, 13, 0.14);
}

.project-card:hover .project-card-media img {
    transform: none !important;
}

/* =========================================================
   GALERÍA DEL PROYECTO ABIERTO
========================================================= */

.project-showcase-content {
    align-items: start;
}

.project-gallery {
    align-self: start;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    grid-template-rows: auto auto;
}

/*
    Las capturas horizontales hacen que el visor adopte su
    proporción real. Así llenan exactamente el marco.
*/

.project-gallery-viewport.project-frame-landscape {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio:
        var(--project-image-ratio, 16 / 9);
}

/*
    Las capturas verticales mantienen un visor estable para
    que la ventana no se vuelva demasiado alta.
*/

.project-gallery-viewport.project-frame-portrait {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 16 / 10;
}

.project-gallery-track,
.project-gallery-slide,
.project-gallery-media {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
}

.project-gallery-media.project-image-landscape img {
    width: 100%;
    height: 100% !important;

    object-fit: contain;
}

.project-gallery-media.project-image-portrait img {
    width: auto !important;
    height: 100% !important;

    object-fit: contain;

    box-shadow:
        0 18px 48px rgba(8, 9, 13, 0.14);
}

/* La numeración continúa eliminada. */

.project-card-index {
    display: none !important;
}

@media (max-width: 680px) {
    .project-card-media.project-image-portrait {
        height: 220px;
        min-height: 220px;
    }

    .project-gallery-viewport.project-frame-portrait {
        aspect-ratio: 4 / 5;
        max-height: 68vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card-media::before,
    .project-card-media::after,
    .project-gallery-media::before,
    .project-gallery-media::after {
        transition: none;
    }
}

/* =========================================================
   ANIMACIÓN DE APERTURA Y CIERRE DEL PROYECTO

   No modifica el tamaño, contenido ni distribución del modal.
========================================================= */

.project-showcase-dialog {
    transform-origin: center;

    will-change:
        transform,
        opacity;
}

.project-showcase-dialog.is-opening {
    animation:
        projectDialogOpen
        280ms
        cubic-bezier(.22, 1, .36, 1)
        both;
}

.project-showcase-dialog.is-opening::backdrop {
    animation:
        projectDialogBackdropOpen
        280ms
        ease-out
        both;
}

.project-showcase-dialog.is-closing {
    pointer-events: none;

    animation:
        projectDialogClose
        220ms
        cubic-bezier(.4, 0, 1, 1)
        both;
}

.project-showcase-dialog.is-closing::backdrop {
    animation:
        projectDialogBackdropClose
        220ms
        ease-in
        both;
}

@keyframes projectDialogOpen {
    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes projectDialogClose {
    from {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.982);
    }
}

@keyframes projectDialogBackdropOpen {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes projectDialogBackdropClose {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-showcase-dialog.is-opening,
    .project-showcase-dialog.is-closing,
    .project-showcase-dialog.is-opening::backdrop,
    .project-showcase-dialog.is-closing::backdrop {
        animation: none !important;
    }
}

/* =========================================================
   NAVEGACIÓN PROFESIONAL DEL CARRUSEL DE PROYECTOS
========================================================= */

/*
    Reserva permanentemente el ancho de la barra de scroll.
    Así el contenido no se desplaza al abrir o cerrar el modal.
*/

html {
    scrollbar-gutter: stable;
}

/* ---------- Flechas laterales ---------- */

.projects-carousel {
    position: relative;

    overflow: visible;
}

.projects-carousel-toolbar {
    position: absolute;
    z-index: 30;
    inset: 0;

    display: block;

    min-height: 0;
    margin: 0;

    pointer-events: none;
}

.projects-carousel-toolbar[hidden] {
    display: none !important;
}

.projects-navigation {
    position: absolute;
    inset: 0;

    display: block;

    opacity: 1;
    pointer-events: none;
}

.projects-carousel .carousel-button {
    position: absolute;
    top: 50%;

    width: 50px;
    height: 50px;

    border-color:
        color-mix(
            in srgb,
            var(--border-strong) 76%,
            transparent
        );

    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 90%,
            transparent
        );

    box-shadow:
        0 16px 42px rgba(12, 13, 18, 0.13);

    opacity: 1;
    pointer-events: auto;

    transform: translateY(-50%);

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

    transition:
        transform 180ms cubic-bezier(.22, 1, .36, 1),
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

#projects-previous {
    left: -66px;
}

#projects-next {
    right: -66px;
}

.projects-carousel .carousel-button:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);

    box-shadow:
        0 18px 46px
        color-mix(
            in srgb,
            var(--accent) 25%,
            transparent
        );

    transform:
        translateY(-50%)
        scale(1.055);
}

.projects-carousel .carousel-button:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.97);
}

.projects-carousel .carousel-button[hidden] {
    display: none !important;
}

/* ---------- Sin puntos de navegación ---------- */

.projects-pagination {
    display: none !important;
}

/*
    Los indicadores se muestran únicamente dentro del proyecto
    abierto. La segunda fila solo aparece cuando hay más de una
    imagen.
*/

.project-gallery {
    grid-template-rows: auto auto !important;
    gap: 12px !important;
}

.project-gallery-pagination {
    grid-column: 1 / -1;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 18px;
}

.project-gallery-pagination[hidden],
.project-gallery.single-image
    .project-gallery-pagination {
    display: none !important;
}

.project-gallery-pagination-dot {
    width: 7px;
    height: 7px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: var(--border-strong);

    cursor: pointer;

    transition:
        width 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.project-gallery-pagination-dot:hover {
    background:
        color-mix(
            in srgb,
            var(--accent) 58%,
            var(--border-strong)
        );

    transform: scale(1.12);
}

.project-gallery-pagination-dot.active {
    width: 24px;

    background: var(--accent);
}

.projects-viewport {
    padding-bottom: 12px;
}

/* ---------- Ajustes responsivos ---------- */

@media (max-width: 1320px) {
    #projects-previous {
        left: -24px;
    }

    #projects-next {
        right: -24px;
    }
}

@media (max-width: 760px) {
    .projects-carousel .carousel-button {
        top: 46%;

        width: 44px;
        height: 44px;
    }

    #projects-previous {
        left: 10px;
    }

    #projects-next {
        right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-carousel .carousel-button {
        transition: none;
    }
}

/* =========================================================
   CORRECCIÓN: LAS FLECHAS NO BLOQUEAN LAS TARJETAS

   Una regla anterior activaba los eventos del contenedor
   transparente de navegación. Solo los botones laterales
   deben recibir clics.
========================================================= */

.projects-carousel.has-overflow .projects-navigation {
    pointer-events: none;
}

.projects-carousel.has-overflow .carousel-button {
    pointer-events: auto;
}

/* =========================================================
   FOOTER SIN EL LOGO DE TEXTO ANTIGUO
========================================================= */

.site-footer .footer-inner {
    grid-template-columns: 1fr auto;
}

.site-footer .footer-inner p {
    justify-self: start;
}

/* =========================================================
   RITMO VERTICAL MÁS COMPACTO ENTRE SECCIONES

   Reduce el espacio acumulado entre el final de una sección
   y el comienzo de la siguiente sin comprimir su contenido.
========================================================= */

.section {
    padding-block: clamp(38px, 3vw, 48px);
}

.section-heading {
    margin-bottom: clamp(28px, 2.4vw, 34px);
}

/* El inicio de Proyectos conserva un poco más de aire después del hero. */
#proyectos.section {
    padding-top: clamp(44px, 3.4vw, 56px);
}

/* Evita que la última sección deje demasiado espacio antes del footer. */
.contact-section {
    padding-bottom: clamp(48px, 4vw, 64px);
}

@media (max-width: 680px) {
    .section {
        padding-block: 34px;
    }

    .section-heading {
        margin-bottom: 26px;
    }

    #proyectos.section {
        padding-top: 38px;
    }
}


/* =========================================================
   PROFILE REWORK — PARCHE AISLADO

   Estas reglas utilizan nombres exclusivos profile-rework-*.
   Ningún selector de Proyectos, Insignias, CV o Contacto
   fue modificado.
========================================================= */

.profile-rework-layout {
    display: grid;
    grid-template-columns:
        minmax(285px, 0.78fr)
        minmax(0, 1.42fr);
    gap: 18px;
    align-items: stretch;
}

.profile-rework-about,
.profile-rework-details {
    border: 1px solid var(--border);
    border-radius: 28px;

    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.profile-rework-about {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 590px;
    padding: clamp(28px, 3vw, 38px);
    overflow: hidden;
}

.profile-rework-about::before {
    position: absolute;
    top: -165px;
    right: -155px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: var(--accent-soft);
    filter: blur(10px);

    content: "";
    pointer-events: none;
}

.profile-rework-about-top,
.profile-rework-identity,
.profile-rework-summary,
.profile-rework-facts,
.profile-rework-about .profile-meta {
    position: relative;
    z-index: 1;
}

.profile-rework-about-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.profile-rework-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    max-width: 170px;
    padding: 7px 10px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--success) 24%,
            transparent
        );
    border-radius: 999px;

    color: var(--success);
    background: var(--success-soft);

    font-size: 0.65rem;
    font-weight: 720;
    line-height: 1.25;
}

.profile-rework-status-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--success) 12%,
            transparent
        );
}

.profile-rework-identity {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-top: clamp(56px, 7vw, 88px);
}

.profile-rework-monogram {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;
    flex-shrink: 0;

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

    color: var(--accent);
    background: var(--surface-solid);

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

    font-size: 0.83rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.profile-rework-identity h3 {
    margin: 0 0 4px;

    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.profile-rework-identity div > span {
    color: var(--text-muted);

    font-size: 0.7rem;
    font-weight: 680;
}

.profile-rework-summary {
    margin-top: 26px;

    color: var(--text-secondary);

    font-size: 0.88rem;
    line-height: 1.75;
}

.profile-rework-facts {
    display: grid;

    margin: auto 0 0;
}

.profile-rework-facts > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;

    padding: 14px 0;

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

.profile-rework-facts dt {
    color: var(--text-muted);

    font-size: 0.62rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.profile-rework-facts dd {
    margin: 0;

    color: var(--text);

    font-size: 0.72rem;
    font-weight: 690;
    line-height: 1.5;
}

.profile-rework-about .profile-meta {
    margin-top: 20px;
}

.profile-rework-details {
    position: relative;

    min-width: 0;
    padding: 10px;
}

.profile-rework-radio {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.profile-rework-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;

    padding: 6px;

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

    background: var(--surface-soft);
}

.profile-rework-tabs label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: 14px;

    color: var(--text-secondary);

    font-size: 0.71rem;
    font-weight: 720;

    cursor: pointer;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.profile-rework-tabs label:hover {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 72%,
            transparent
        );
}

.profile-rework-tabs label > span:first-child {
    color: var(--accent);

    font-size: 0.59rem;
    font-weight: 830;
}

#profile-view-tools:focus-visible
    ~ .profile-rework-tabs
    label[for="profile-view-tools"],
#profile-view-languages:focus-visible
    ~ .profile-rework-tabs
    label[for="profile-view-languages"],
#profile-view-highlights:focus-visible
    ~ .profile-rework-tabs
    label[for="profile-view-highlights"] {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

#profile-view-tools:checked
    ~ .profile-rework-tabs
    label[for="profile-view-tools"],
#profile-view-languages:checked
    ~ .profile-rework-tabs
    label[for="profile-view-languages"],
#profile-view-highlights:checked
    ~ .profile-rework-tabs
    label[for="profile-view-highlights"] {
    color: var(--text);

    border-color: var(--border);

    background: var(--surface-solid);

    box-shadow:
        0 8px 24px
        rgba(20, 21, 28, 0.07);
}

.profile-rework-panels {
    min-height: 510px;
}

.profile-rework-panel {
    display: none;

    padding: clamp(28px, 4vw, 44px);

    animation:
        profileReworkPanelEnter
        280ms
        cubic-bezier(.22, 1, .36, 1)
        both;
}

#profile-view-tools:checked
    ~ .profile-rework-panels
    [data-profile-panel="tools"],
#profile-view-languages:checked
    ~ .profile-rework-panels
    [data-profile-panel="languages"],
#profile-view-highlights:checked
    ~ .profile-rework-panels
    [data-profile-panel="highlights"] {
    display: block;
}

@keyframes profileReworkPanelEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.profile-rework-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.profile-rework-panel-heading h4 {
    max-width: 610px;
    margin: 10px 0 0;

    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.profile-rework-panel-heading > span {
    display: grid;
    place-items: center;

    min-width: 44px;
    height: 44px;
    padding: 0 10px;

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

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 0.76rem;
    font-weight: 820;
}

.profile-rework-panel-copy {
    max-width: 690px;
    margin-top: 18px;

    color: var(--text-secondary);

    font-size: 0.82rem;
    line-height: 1.7;
}

.profile-rework-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-top: 28px;
}

.profile-rework-tool {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    padding: 13px;

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

    background: var(--surface-solid);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.profile-rework-tool:hover {
    transform: translateY(-3px);

    border-color: var(--accent);

    box-shadow: var(--shadow-small);
}

.profile-tool-mark {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    flex-shrink: 0;

    border-radius: 12px;

    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: -0.03em;
}

.mark-swift,
.mark-swiftui {
    background:
        linear-gradient(
            145deg,
            #ff824d,
            #ed3927
        );
}

.mark-flutter {
    background:
        linear-gradient(
            145deg,
            #65d3ff,
            #1674d1
        );
}

.mark-dart {
    background:
        linear-gradient(
            145deg,
            #1bc3cc,
            #0e75a6
        );
}

.mark-firebase {
    color: #22232a;

    background:
        linear-gradient(
            145deg,
            #ffd766,
            #ff9200
        );
}

.mark-javascript {
    color: #202124;
    background: #f7df1e;
}

.mark-java {
    background:
        linear-gradient(
            145deg,
            #e77900,
            #416eaa
        );
}

.mark-python {
    background:
        linear-gradient(
            145deg,
            #3776ab 0 50%,
            #ffd343 50% 100%
        );
}

.mark-sql {
    background:
        linear-gradient(
            145deg,
            #6579f8,
            #4236aa
        );
}

.mark-git {
    background: #f05032;
}

.mark-figma {
    background:
        linear-gradient(
            145deg,
            #f24e1e,
            #a259ff
        );
}

.mark-blender {
    background:
        linear-gradient(
            145deg,
            #ffa435,
            #e86b00
        );
}

.profile-rework-tool div {
    min-width: 0;
}

.profile-rework-tool strong,
.profile-rework-tool small {
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-rework-tool strong {
    color: var(--text);

    font-size: 0.73rem;
}

.profile-rework-tool small {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 0.58rem;
}

.profile-rework-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;

    margin-top: 30px;
}

.profile-rework-language {
    min-height: 265px;
    padding: 25px;

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

    background:
        linear-gradient(
            145deg,
            var(--surface-solid),
            var(--accent-soft)
        );
}

.profile-language-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.profile-language-heading > span {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    border-radius: 15px;

    color: #ffffff;
    background: var(--accent);

    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.profile-language-heading strong {
    padding: 7px 10px;

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

    color: var(--text-secondary);
    background: var(--surface);

    font-size: 0.61rem;
}

.profile-rework-language h5 {
    margin: 45px 0 8px;

    font-size: 1.32rem;
    letter-spacing: -0.04em;
}

.profile-rework-language p {
    min-height: 58px;

    color: var(--text-secondary);

    font-size: 0.72rem;
    line-height: 1.65;
}

.profile-language-level {
    height: 5px;
    margin-top: 25px;
    overflow: hidden;

    border-radius: 999px;

    background: var(--surface-soft);
}

.profile-language-level span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--accent);
}

.level-native span {
    width: 100%;
}

.level-english span {
    width: 76%;
}

.profile-rework-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;

    margin-top: 29px;
}

.profile-rework-highlight {
    min-height: 245px;
    padding: 22px;

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

    background: var(--surface-solid);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.profile-rework-highlight:hover {
    transform: translateY(-4px);

    border-color: var(--accent);

    box-shadow: var(--shadow-small);
}

.profile-rework-highlight > strong {
    display: block;

    min-height: 48px;
    margin-bottom: 31px;

    color: var(--accent);

    font-size: clamp(1.15rem, 2vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.profile-rework-highlight h5 {
    margin: 0 0 9px;

    font-size: 0.82rem;
}

.profile-rework-highlight p {
    color: var(--text-secondary);

    font-size: 0.68rem;
    line-height: 1.65;
}

@media (max-width: 980px) {
    .profile-rework-layout {
        grid-template-columns: 1fr;
    }

    .profile-rework-about {
        min-height: auto;
    }

    .profile-rework-facts {
        margin-top: 48px;
    }
}

@media (max-width: 720px) {
    .profile-rework-tabs {
        display: flex;

        overflow-x: auto;

        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .profile-rework-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-rework-tabs label {
        min-width: 150px;

        scroll-snap-align: start;
    }

    .profile-rework-tools-grid,
    .profile-rework-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .profile-rework-about,
    .profile-rework-details {
        border-radius: 23px;
    }

    .profile-rework-about {
        padding: 24px 21px;
    }

    .profile-rework-about-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-rework-identity {
        margin-top: 42px;
    }

    .profile-rework-facts > div {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .profile-rework-panel {
        padding: 27px 15px;
    }

    .profile-rework-panel-heading h4 {
        font-size: 1.85rem;
    }

    .profile-rework-tools-grid,
    .profile-rework-language-grid,
    .profile-rework-highlight-grid {
        grid-template-columns: 1fr;
    }

    .profile-rework-highlight,
    .profile-rework-language {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-panel {
        animation: none;
    }

    .profile-rework-tabs label,
    .profile-rework-tool,
    .profile-rework-highlight {
        transition: none;
    }
}

/* =========================================================
   PROFILE REWORK — AJUSTE SIMÉTRICO Y NAVEGACIÓN
   Solo afecta clases profile-rework-*.
========================================================= */

/* ---------- Sobre mí, sin estado, monograma ni subtítulo ---------- */

.profile-rework-about-heading {
    position: relative;
    z-index: 1;
}

.profile-rework-about-heading h3 {
    max-width: 330px;
    margin:
        clamp(82px, 7vw, 108px)
        0
        0;

    font-size: clamp(2.15rem, 4vw, 3.3rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.profile-rework-summary {
    margin-top: 30px;
}

/*
    Mantiene una distribución equilibrada entre el texto,
    los datos y las etiquetas inferiores.
*/

.profile-rework-facts {
    margin-top: auto;
}

/* ---------- Pestañas sin numeración ---------- */

.profile-rework-tabs label {
    gap: 0;

    font-size: 0.73rem;
}

.profile-rework-tabs label > span:first-child {
    color: inherit;

    font-size: inherit;
    font-weight: inherit;
}

/* ---------- Encabezados alineados sin símbolos ---------- */

.profile-rework-panel-heading {
    display: block;
}

.profile-rework-panel-heading > div {
    width: 100%;
}

.profile-rework-panel-heading h4 {
    max-width: 680px;
}

/* ---------- Carrusel de herramientas ---------- */

.profile-rework-tools-carousel {
    position: relative;

    margin-top: 28px;
}

.profile-rework-tools-viewport {
    min-width: 0;
    overflow: hidden;
}

.profile-rework-tools-grid {
    min-height: 286px;
    margin-top: 0;
}

.profile-rework-tool[hidden] {
    display: none !important;
}

.profile-rework-tools-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid var(--border-strong);
    border-radius: 50%;

    color: var(--text);
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 92%,
            transparent
        );

    box-shadow:
        0 14px 36px
        rgba(15, 16, 22, 0.13);

    cursor: pointer;

    transform: translateY(-50%);

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

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms
        cubic-bezier(.22, 1, .36, 1);
}

.profile-rework-tools-arrow:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);

    box-shadow:
        0 16px 40px
        color-mix(
            in srgb,
            var(--accent) 25%,
            transparent
        );

    transform:
        translateY(-50%)
        scale(1.06);
}

.profile-rework-tools-arrow:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.96);
}

.profile-rework-tools-arrow[hidden] {
    display: none !important;
}

.profile-rework-tools-previous {
    left: -25px;
}

.profile-rework-tools-next {
    right: -25px;
}

/* ---------- Tableta: dos columnas y ocho herramientas ---------- */

@media (max-width: 900px) {
    .profile-rework-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .profile-rework-tools-previous {
        left: -18px;
    }

    .profile-rework-tools-next {
        right: -18px;
    }
}

/* ---------- Móvil: una columna y cuatro herramientas ---------- */

@media (max-width: 560px) {
    .profile-rework-about-heading h3 {
        margin-top: 56px;
    }

    .profile-rework-tools-grid {
        grid-template-columns: 1fr;
        min-height: 262px;
    }

    .profile-rework-tools-previous {
        left: 4px;
    }

    .profile-rework-tools-next {
        right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-tools-arrow {
        transition: none;
    }
}

/* =========================================================
   PROFILE — COMPACTO, ICONOS LOCALES Y HOVER CORREGIDO

   Parche aislado. Solo afecta selectores profile-rework-*.
========================================================= */

/* ---------- Composición general sin alturas forzadas ---------- */

.profile-rework-layout {
    align-items: start;
}

.profile-rework-about {
    min-height: 0;
    align-self: start;

    padding:
        clamp(30px, 3vw, 38px)
        clamp(28px, 3vw, 38px);
}

.profile-rework-details {
    align-self: start;
}

.profile-rework-panels {
    min-height: 0;
}

.profile-rework-panel {
    padding:
        clamp(28px, 3.4vw, 40px)
        clamp(26px, 3.4vw, 40px)
        clamp(28px, 3.4vw, 36px);
}

/* ---------- Tarjeta Sobre mí más compacta ---------- */

.profile-rework-about-heading h3 {
    max-width: 330px;
    margin: 0;

    font-size: clamp(2.15rem, 4vw, 3.3rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.profile-rework-summary {
    margin-top: 26px;
}

.profile-rework-facts {
    margin-top: 28px;
}

.profile-rework-about .profile-meta {
    margin-top: 20px;
}

/* ---------- Menos espacio dentro de Herramientas ---------- */

.profile-rework-panel-copy {
    margin-top: 16px;
}

.profile-rework-tools-carousel {
    margin-top: 24px;
}

.profile-rework-tools-grid {
    min-height: 0;
}

/*
    El visor mantiene overflow oculto para la paginación.
    Por eso las tarjetas ya no se desplazan hacia arriba:
    solo cambian borde y sombra dentro de su propio espacio.
*/

.profile-rework-tool:hover {
    transform: none;

    border-color: var(--accent);

    box-shadow:
        0 9px 24px
        color-mix(
            in srgb,
            var(--accent) 11%,
            transparent
        );
}

/* ---------- Iconos preparados como imágenes locales ---------- */

.profile-tool-mark {
    position: relative;

    overflow: hidden;
}

.profile-tool-image {
    display: block;

    width: 23px;
    height: 23px;

    object-fit: contain;
}

/*
    Las rutas están en:
    assets/images/tools/

    Puedes reemplazar cualquier SVG conservando el mismo
    nombre de archivo, sin modificar index.html.
*/

/* ---------- Ajustes responsivos ---------- */

@media (max-width: 980px) {
    .profile-rework-layout {
        align-items: stretch;
    }

    .profile-rework-about,
    .profile-rework-details {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .profile-rework-about {
        padding: 26px 21px;
    }

    .profile-rework-about-heading h3 {
        margin: 0;
    }

    .profile-rework-facts {
        margin-top: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-tool:hover {
        transform: none;
    }
}

/* =========================================================
   PROFILE — ALTURAS IGUALES E ICONOS CENTRADOS

   Parche aislado. Solo afecta selectores profile-rework-*.
========================================================= */

/* ---------- Ambas tarjetas ocupan la misma altura ---------- */

.profile-rework-layout {
    align-items: stretch;
}

.profile-rework-about,
.profile-rework-details {
    align-self: stretch;
}

/*
    La columna izquierda ahora se estira hasta la altura real
    de la ventana de Herramientas / Idiomas / Logros.
*/

.profile-rework-about {
    height: 100%;
}

/* ---------- Imagen perfectamente centrada ---------- */

.profile-tool-mark {
    display: grid;
    place-items: center;

    padding: 0;
}

.profile-tool-image {
    display: block;

    width: 27px;
    height: 27px;
    margin: auto;

    object-fit: contain;
    object-position: center;
}

/* =========================================================
   COLORES DE FONDO DE LOS ICONOS

   Este es el bloque exacto que debes modificar cuando quieras
   cambiar el color de una herramienta.
========================================================= */

.mark-swift,
.mark-swiftui {
    background: #ff563f;
}

.mark-flutter {
    background: #2da6ed;
}

.mark-dart {
    background: #10a8bd;
}

.mark-firebase {
    background: #ffb321;
}

.mark-javascript {
    background: #f7df1e;
}

.mark-java {
    background:
        linear-gradient(
            145deg,
            #c57926,
            #5d7fa5
        );
}

.mark-python {
    background:
        linear-gradient(
            145deg,
            #3676ad 0 50%,
            #ffd343 50% 100%
        );
}

.mark-sql {
    background: #5853de;
}

.mark-git {
    background: #f14e32;
}

.mark-figma {
    background:
        linear-gradient(
            145deg,
            #eb4b32,
            #a84eda
        );
}

/*
    Blender usa un fondo oscuro para que su icono naranja
    tenga contraste y no se pierda.
*/

.mark-blender {
    background: #252a34;
}

/* ---------- En una sola columna no se fuerza altura común ---------- */

@media (max-width: 980px) {
    .profile-rework-about {
        height: auto;
    }
}

/* =========================================================
   HERRAMIENTAS FINALES — OCHO ICONOS DEL USUARIO

   Solo afecta la cuadrícula de Herramientas del Perfil.
========================================================= */

/*
    Cuatro columnas producen dos filas simétricas de
    cuatro herramientas en escritorio.
*/

.profile-rework-tools-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 11px;

    min-height: 0;
}

/*
    Fondo neutral. El color ya pertenece al propio PNG,
    por lo que no se aplican fondos naranja, azul o morado.
*/

.profile-tool-mark,
.mark-swift,
.mark-swiftui,
.mark-flutter,
.mark-dart,
.mark-firebase,
.mark-javascript,
.mark-java,
.mark-python,
.mark-sql,
.mark-git,
.mark-figma,
.mark-blender {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    padding: 5px;
    overflow: hidden;

    border: 1px solid #e4e6eb;
    border-radius: 14px;

    background: #ffffff !important;

    box-shadow:
        0 5px 14px
        rgba(19, 21, 28, 0.07);
}

/*
    Todos los PNG quedan centrados y conservan su proporción.
*/

.profile-tool-image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 38px;
    max-height: 38px;
    margin: auto;

    object-fit: contain;
    object-position: center;
}

/*
    La tarjeta conserva su posición al pasar el mouse.
*/

.profile-rework-tool:hover {
    transform: none;
}

/* Dos columnas en pantallas medianas. */

@media (max-width: 1180px) {
    .profile-rework-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* Una columna en móvil. */

@media (max-width: 560px) {
    .profile-rework-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HERRAMIENTAS — TEXTO COMPLETO Y FONDO EN MODO OSCURO

   Parche aislado. Solo modifica las tarjetas de herramientas
   dentro del apartado Perfil.
========================================================= */

/*
    La información de cada herramienta puede ocupar dos líneas.
    Se elimina el recorte con puntos suspensivos.
*/

.profile-rework-tool {
    min-height: 74px;
}

.profile-rework-tool > div {
    min-width: 0;
    flex: 1;
}

.profile-rework-tool strong {
    overflow: visible;

    text-overflow: clip;
    white-space: nowrap;
}

.profile-rework-tool small {
    display: block;

    min-height: 2.5em;
    margin-top: 3px;

    overflow: visible;

    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;

    font-size: 0.58rem;
    line-height: 1.25;
}

/*
    Fondo claro de los iconos.
*/

.profile-tool-mark {
    background: #ffffff !important;
}

/*
    En modo oscuro, el fondo blanco del icono cambia
    automáticamente a un gris oscuro.
*/

html[data-theme="dark"] .profile-tool-mark {
    border-color:
        rgba(255, 255, 255, 0.11);

    background: #262830 !important;

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.22);
}

/*
    En pantallas pequeñas se conserva el texto completo.
*/

@media (max-width: 560px) {
    .profile-rework-tool {
        min-height: 70px;
    }

    .profile-rework-tool small {
        min-height: 0;
    }
}

/* =========================================================
   HERRAMIENTAS — NAVEGACIÓN INFERIOR Y ANIMACIÓN

   Las flechas se colocan debajo de la cuadrícula,
   alineadas a la derecha, sin cubrir las herramientas.
========================================================= */

.profile-rework-tools-carousel {
    padding-bottom: 62px;
}

.profile-rework-tools-viewport {
    position: relative;
    overflow: hidden;
}

.profile-rework-tools-grid {
    transform-origin: center;
}

.profile-rework-tools-carousel.is-changing {
    pointer-events: none;
}

/* Controles inferiores */

.profile-rework-tools-arrow {
    top: auto;
    bottom: 4px;

    width: 44px;
    height: 44px;

    transform: none;

    border-color: var(--border);
    background: var(--surface-solid);

    box-shadow:
        0 9px 24px
        rgba(15, 16, 22, 0.09);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.profile-rework-tools-previous {
    right: 54px;
    left: auto;
}

.profile-rework-tools-next {
    right: 0;
    left: auto;
}

.profile-rework-tools-arrow:hover:not(:disabled) {
    transform: translateY(-2px);

    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--accent) 24%,
            transparent
        );
}

.profile-rework-tools-arrow:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
}

/*
    Cuando una dirección no está disponible, su botón
    desaparece y el otro permanece alineado a la derecha.
*/

.profile-rework-tools-arrow[hidden] {
    display: none !important;
}

/* Modo oscuro */

html[data-theme="dark"] .profile-rework-tools-arrow {
    border-color:
        rgba(255, 255, 255, 0.11);

    background: #24262d;

    box-shadow:
        0 10px 26px
        rgba(0, 0, 0, 0.24);
}

/* En móvil siguen debajo, no encima de las tarjetas */

@media (max-width: 560px) {
    .profile-rework-tools-carousel {
        padding-bottom: 60px;
    }

    .profile-rework-tools-previous {
        right: 52px;
        left: auto;
    }

    .profile-rework-tools-next {
        right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-tools-arrow {
        transition: none;
    }
}


/* =========================================================
   PERFIL — CARRUSEL DE HERRAMIENTAS CON FLECHAS LATERALES

   Diseño alineado con el carrusel de Proyectos:
   - hasta 12 herramientas por página en escritorio;
   - flechas circulares a los costados;
   - solo se muestra la dirección disponible;
   - se conserva la animación lateral existente.
========================================================= */

.profile-rework-tools-carousel {
    position: relative;

    display: block;

    padding: 0;
    overflow: visible;
}

.profile-rework-tools-viewport {
    position: relative;

    overflow: hidden;
}

/*
    Tres filas de cuatro herramientas en escritorio.
    No se dibujan tarjetas vacías: los espacios se llenan
    conforme agregues nuevas herramientas.
*/

.profile-rework-tools-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    min-height: 244px;
    align-content: start;
}

.profile-rework-tools-arrow {
    position: absolute;
    z-index: 6;
    top: 50%;
    bottom: auto;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;
    padding: 0;

    border: 1px solid
        color-mix(
            in srgb,
            var(--border-strong) 76%,
            transparent
        );
    border-radius: 50%;

    color: var(--text);
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 90%,
            transparent
        );

    box-shadow:
        0 16px 42px
        rgba(12, 13, 18, 0.13);

    transform: translateY(-50%);

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

    transition:
        transform 180ms cubic-bezier(.22, 1, .36, 1),
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.profile-rework-tools-previous {
    left: -58px;
    right: auto;
}

.profile-rework-tools-next {
    right: -58px;
    left: auto;
}

.profile-rework-tools-arrow span {
    display: block;

    width: auto;
    height: auto;

    overflow: visible;

    color: inherit;

    font-size: 0.92rem;
    font-weight: 760;
    line-height: 1;
}

.profile-rework-tools-arrow span::before {
    display: none;
    content: none;
}

.profile-rework-tools-arrow:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);

    box-shadow:
        0 18px 46px
        color-mix(
            in srgb,
            var(--accent) 25%,
            transparent
        );

    transform:
        translateY(-50%)
        scale(1.055);
}

.profile-rework-tools-arrow:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.97);
}

.profile-rework-tools-arrow[hidden] {
    display: none !important;
}

html[data-theme="dark"] .profile-rework-tools-arrow {
    color: var(--text);

    border-color:
        rgba(255, 255, 255, 0.13);

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 91%,
            transparent
        );

    box-shadow:
        0 17px 44px
        rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"]
.profile-rework-tools-arrow:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--accent);
    background: var(--accent);
}

/*
    Cuando la sección se hace más estrecha, la cuadrícula pasa
    a dos columnas y muestra ocho herramientas por página.
*/

@media (max-width: 1320px) {
    .profile-rework-tools-previous {
        left: -25px;
    }

    .profile-rework-tools-next {
        right: -25px;
    }
}

@media (max-width: 1180px) {
    .profile-rework-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        min-height: 329px;
    }
}

@media (max-width: 760px) {
    .profile-rework-tools-arrow {
        width: 44px;
        height: 44px;
    }

    .profile-rework-tools-previous {
        left: 8px;
    }

    .profile-rework-tools-next {
        right: 8px;
    }
}

@media (max-width: 560px) {
    .profile-rework-tools-grid {
        grid-template-columns: 1fr;
        min-height: 313px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-tools-arrow {
        transition: none;
    }
}

/* =========================================================
   HERRAMIENTAS — CHEVRONS LATERALES PROFESIONALES

   Decisión de diseño:
   - botones reales de 44 x 44 px para mantener una zona cómoda;
   - sin círculo, borde ni sombra visibles en reposo;
   - chevrons dentro de la ventana, nunca fuera del panel;
   - solo aparece la dirección disponible;
   - la animación existente permanece intacta.
========================================================= */

/*
    Reserva un pequeño canal lateral únicamente cuando hay
    más de una página. Así los controles no cubren las tarjetas.
*/

.profile-rework-tools-carousel.has-multiple-pages
.profile-rework-tools-viewport {
    margin-inline: 34px;
}

.profile-rework-tools-arrow {
    position: absolute;
    z-index: 7;
    top: 50%;
    bottom: auto;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 0;
    border-radius: 11px;

    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;

    transform: translateY(-50%);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    cursor: pointer;

    transition:
        color 170ms ease,
        background-color 170ms ease,
        transform 170ms cubic-bezier(.22, 1, .36, 1);
}

.profile-rework-tools-previous {
    left: 0;
    right: auto;
}

.profile-rework-tools-next {
    right: 0;
    left: auto;
}

/*
    Oculta la flecha textual original y dibuja un chevron fino.
*/

.profile-rework-tools-arrow span {
    position: relative;

    display: block;

    width: 14px;
    height: 22px;

    overflow: visible;

    color: transparent;
    font-size: 0;
}

.profile-rework-tools-arrow span::before {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 10px;
    height: 10px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;

    color: var(--text-secondary);

    content: "";
}

.profile-rework-tools-next span::before {
    transform:
        translate(-68%, -50%)
        rotate(45deg);
}

.profile-rework-tools-previous span::before {
    transform:
        translate(-32%, -50%)
        rotate(-135deg);
}

/*
    El estado interactivo es visible, pero continúa siendo
    ligero y no compite con las tarjetas de herramientas.
*/

.profile-rework-tools-arrow:hover:not(:disabled),
.profile-rework-tools-arrow:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: none;
}

.profile-rework-tools-arrow:hover:not(:disabled) {
    transform:
        translateY(-50%)
        scale(1.04);
}

.profile-rework-tools-arrow:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.94);
}

.profile-rework-tools-arrow:hover:not(:disabled)
span::before,
.profile-rework-tools-arrow:focus-visible
span::before {
    color: var(--accent);
}

.profile-rework-tools-arrow[hidden] {
    display: none !important;
}

/*
    Una sombra lineal muy suave separa la navegación del contenido
    sin añadir círculos ni cajas visibles.
*/

.profile-rework-tools-carousel.has-multiple-pages::before,
.profile-rework-tools-carousel.has-multiple-pages::after {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;

    width: 46px;

    content: "";
    pointer-events: none;
}

.profile-rework-tools-carousel.has-multiple-pages::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--surface-solid) 18%,
            transparent 100%
        );
}

.profile-rework-tools-carousel.has-multiple-pages::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--surface-solid) 18%,
            transparent 100%
        );
}

html[data-theme="dark"] .profile-rework-tools-arrow {
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"]
.profile-rework-tools-arrow:hover:not(:disabled),
html[data-theme="dark"]
.profile-rework-tools-arrow:focus-visible {
    color: var(--accent);
    background:
        color-mix(
            in srgb,
            var(--accent) 14%,
            transparent
        );
}

html[data-theme="dark"]
.profile-rework-tools-carousel.has-multiple-pages::before {
    background:
        linear-gradient(
            90deg,
            var(--surface-solid) 18%,
            transparent 100%
        );
}

html[data-theme="dark"]
.profile-rework-tools-carousel.has-multiple-pages::after {
    background:
        linear-gradient(
            270deg,
            var(--surface-solid) 18%,
            transparent 100%
        );
}

@media (max-width: 760px) {
    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 28px;
    }

    .profile-rework-tools-arrow {
        width: 40px;
        height: 44px;
    }
}

@media (max-width: 560px) {
    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 24px;
    }

    .profile-rework-tools-arrow {
        width: 38px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rework-tools-arrow {
        transition: none;
    }
}

/* =========================================================
   HERRAMIENTAS — CHEVRONS MÁS SEPARADOS

   Aumenta el espacio entre los controles laterales y las
   tarjetas sin cambiar su diseño ni la animación.
========================================================= */

.profile-rework-tools-carousel.has-multiple-pages
.profile-rework-tools-viewport {
    margin-inline: 52px;
}

.profile-rework-tools-previous {
    left: 6px;
}

.profile-rework-tools-next {
    right: 6px;
}

@media (max-width: 760px) {
    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 42px;
    }

    .profile-rework-tools-previous {
        left: 4px;
    }

    .profile-rework-tools-next {
        right: 4px;
    }
}

@media (max-width: 560px) {
    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 36px;
    }
}

/* =========================================================
   HERRAMIENTAS — CHEVRONS AL BORDE INTERIOR

   Los controles se acercan al borde de la ventana, pero
   permanecen completamente dentro del panel.
========================================================= */

/*
    El contenido de la sección tiene padding lateral.
    Este desplazamiento utiliza parte de ese padding para
    colocar las flechas cerca del borde interior.
*/

.profile-rework-tools-previous {
    left: -20px;
}

.profile-rework-tools-next {
    right: -20px;
}

/*
    Conserva espacio suficiente entre las flechas
    y las herramientas.
*/

.profile-rework-tools-carousel.has-multiple-pages
.profile-rework-tools-viewport {
    margin-inline: 44px;
}

/* Tableta */

@media (max-width: 760px) {
    .profile-rework-tools-previous {
        left: -14px;
    }

    .profile-rework-tools-next {
        right: -14px;
    }

    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 38px;
    }
}

/* Móvil */

@media (max-width: 560px) {
    .profile-rework-tools-previous {
        left: -8px;
    }

    .profile-rework-tools-next {
        right: -8px;
    }

    .profile-rework-tools-carousel.has-multiple-pages
    .profile-rework-tools-viewport {
        margin-inline: 32px;
    }
}

/* =========================================================
   PERFIL — TEXTO COMPLETO EN TARJETAS Y ROBLOX

   Corrección final aislada para la cuadrícula de herramientas.
========================================================= */

/*
    Todas las tarjetas conservan una altura uniforme y permiten
    que nombres y descripciones usen más de una línea.
*/

.profile-rework-tools-grid {
    grid-auto-rows: minmax(88px, auto);
}

.profile-rework-tool {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    min-width: 0;
    min-height: 88px;
    padding: 10px 11px;
}

.profile-rework-tool > div {
    display: flex;
    justify-content: center;
    flex-direction: column;

    min-width: 0;
    height: 100%;
}

.profile-rework-tool strong,
.profile-rework-tool small {
    display: block;

    max-width: 100%;
    overflow: visible;

    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.profile-rework-tool strong {
    font-size: 0.7rem;
    line-height: 1.18;
}

.profile-rework-tool small {
    min-height: 0;
    margin-top: 4px;

    font-size: 0.57rem;
    line-height: 1.3;
}

/*
    El icono mantiene su espacio fijo y no empuja el texto fuera.
*/

.profile-tool-mark {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/*
    En pantallas donde el panel es más estrecho se usan menos
    columnas para evitar tarjetas demasiado angostas.
*/

@media (max-width: 1180px) {
    .profile-rework-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(82px, auto);
    }

    .profile-rework-tool {
        min-height: 82px;
    }
}

@media (max-width: 560px) {
    .profile-rework-tools-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(78px, auto);
    }

    .profile-rework-tool {
        min-height: 78px;
    }
}

/* =========================================================
   HERRAMIENTAS — CARDS LEGIBLES Y RESPONSIVAS

   Evita cortes como “JavaScrip / t” y adapta el número de
   columnas al ancho REAL del panel, no al ancho de la ventana.
========================================================= */

/* El panel se convierte en referencia para container queries. */
.profile-rework-tools-viewport {
    container-name: profile-tools;
    container-type: inline-size;
}

/* Escritorio amplio: cuatro columnas. */
.profile-rework-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(82px, auto);
    gap: 12px;
}

/* Tarjeta más limpia y con mayor espacio real para el texto. */
.profile-rework-tool {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    min-width: 0;
    min-height: 82px;
    padding: 11px 14px;

    overflow: hidden;
}

.profile-rework-tool > div {
    display: grid;
    align-content: center;
    gap: 4px;

    min-width: 0;
    height: auto;
}

/*
   No se permite romper palabras en cualquier carácter.
   “JavaScript” permanece completo y “Roblox Studio” puede
   saltar de línea únicamente en el espacio entre palabras.
*/
.profile-rework-tool strong,
.profile-rework-tool small {
    display: block;

    max-width: 100%;
    margin: 0;
    overflow: visible;

    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.profile-rework-tool strong {
    color: var(--text);

    font-size: 0.73rem;
    font-weight: 740;
    line-height: 1.18;
}

.profile-rework-tool small {
    min-height: 0;

    color: var(--text-muted);

    font-size: 0.59rem;
    line-height: 1.28;
}

/* Icono ligeramente más compacto para ceder espacio al texto. */
.profile-tool-mark {
    width: 44px;
    height: 44px;
    padding: 5px;
}

.profile-tool-image {
    width: 100%;
    height: 100%;
    max-width: 35px;
    max-height: 35px;
}

/*
   El cambio de columnas depende del ancho del panel de
   herramientas. Esto corrige el problema aunque el monitor
   completo sea grande pero la tarjeta sea estrecha.
*/
@container profile-tools (max-width: 720px) {
    .profile-rework-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container profile-tools (max-width: 520px) {
    .profile-rework-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container profile-tools (max-width: 350px) {
    .profile-rework-tools-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   HERRAMIENTAS — PANEL DE ALTURA FIJA

   La zona de tarjetas conserva siempre el espacio equivalente
   a tres filas. La última página ya no reduce la altura del panel.
========================================================= */

.profile-rework-tools-viewport {
    --profile-tools-row-height: 82px;
    --profile-tools-row-gap: 12px;

    min-height: calc(
        (var(--profile-tools-row-height) * 3)
        + (var(--profile-tools-row-gap) * 2)
    );
}

.profile-rework-tools-grid {
    grid-auto-rows: var(--profile-tools-row-height);
    gap: var(--profile-tools-row-gap);
    align-content: start;

    min-height: calc(
        (var(--profile-tools-row-height) * 3)
        + (var(--profile-tools-row-gap) * 2)
    );
}

.profile-rework-tool {
    height: var(--profile-tools-row-height);
    min-height: var(--profile-tools-row-height);
}

/*
   En móvil se conserva igualmente una altura fija de tres filas,
   pero con tarjetas ligeramente más compactas.
*/

@container profile-tools (max-width: 350px) {
    .profile-rework-tools-viewport {
        --profile-tools-row-height: 78px;
        --profile-tools-row-gap: 10px;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — CONTENIDO DENTRO DE LA VENTANA

   Corrige el recorte de la descripción en proyectos con
   textos largos, como Tracer. El panel derecho mantiene una
   altura estable y utiliza desplazamiento interno discreto.
========================================================= */

@media (min-width: 901px) {
    .project-showcase-dialog {
        height: min(88dvh, 780px);
        max-height: calc(100dvh - 24px);
    }

    .project-showcase-layout {
        min-height: 0;
    }

    /*
        Una regla posterior usaba align-items: start y permitía
        que la descripción creciera fuera del espacio disponible.
    */

    .project-showcase-content {
        align-items: stretch !important;

        min-height: 0;
        overflow: hidden;
    }

    /*
        La galería conserva su proporción, mientras la descripción
        ocupa exactamente la altura disponible de la segunda columna.
    */

    .project-gallery {
        align-self: start;
    }

    .project-showcase-description {
        align-self: stretch;

        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        padding: 25px 22px 27px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color:
            color-mix(
                in srgb,
                var(--text-muted) 42%,
                transparent
            )
            transparent;
    }

    .project-showcase-description::-webkit-scrollbar {
        display: block;

        width: 6px;
    }

    .project-showcase-description::-webkit-scrollbar-track {
        background: transparent;
    }

    .project-showcase-description::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--text-muted) 34%,
                transparent
            );
    }

    .project-showcase-description::-webkit-scrollbar-thumb:hover {
        background:
            color-mix(
                in srgb,
                var(--accent) 62%,
                transparent
            );
    }

    /*
        Evita que margin-top:auto empuje las tecnologías más allá
        del contenido cuando la descripción es extensa.
    */

    .project-technologies-block {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* ---------- Tableta ---------- */

@media (min-width: 681px) and (max-width: 900px) {
    .project-showcase-dialog {
        height: min(92dvh, 860px);
        max-height: calc(100dvh - 18px);
    }

    .project-showcase-layout {
        min-height: 0;
    }

    .project-showcase-content {
        align-items: start !important;

        min-height: 0;
        overflow: hidden;
    }

    .project-showcase-description {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 230px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color:
            color-mix(
                in srgb,
                var(--text-muted) 42%,
                transparent
            )
            transparent;
    }

    .project-showcase-description::-webkit-scrollbar {
        display: block;

        width: 6px;
    }

    .project-showcase-description::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--text-muted) 34%,
                transparent
            );
    }

    .project-technologies-block {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — TARJETA DE ALTURA ADAPTATIVA

   Las descripciones cortas ocupan únicamente el espacio que
   necesitan. Las descripciones largas siguen limitadas a la
   altura del modal y conservan su desplazamiento interno.
========================================================= */

@media (min-width: 901px) {
    .project-showcase-content {
        align-items: start !important;
    }

    .project-showcase-description {
        align-self: start;

        height: auto;
        min-height: 0;
        max-height: 100%;

        overflow-x: hidden;
        overflow-y: auto;
    }

    /*
        Las tecnologías continúan justo después de la descripción,
        sin ser empujadas artificialmente hacia la parte inferior.
    */

    .project-technologies-block {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* En tableta también se adapta al contenido disponible. */

@media (min-width: 681px) and (max-width: 900px) {
    .project-showcase-description {
        height: auto;
        min-height: 0;
        max-height: min(300px, 34dvh);
    }
}

/* =========================================================
   MODAL DE PROYECTOS — GEOMETRÍA ESTABLE

   La galería y la tarjeta informativa conservan exactamente
   el mismo tamaño en todos los proyectos, sin depender de la
   proporción de la imagen ni de la extensión del texto.
========================================================= */

@media (min-width: 901px) {
    .project-showcase-dialog {
        height: min(88dvh, 780px);
        max-height: calc(100dvh - 24px);
    }

    .project-showcase-layout {
        grid-template-rows:
            auto
            minmax(0, 1fr);

        min-height: 0;
    }

    /*
        El contenido ocupa siempre el espacio restante del modal.
        Ya no se adapta a la altura individual de cada proyecto.
    */

    .project-showcase-content {
        align-items: stretch !important;

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

        overflow: hidden;
    }

    /*
        La galería conserva siempre:
        - una zona flexible para la imagen;
        - 12 px de separación;
        - 18 px para la paginación.

        Incluso cuando solo hay una imagen, se reserva el mismo
        espacio para evitar que el diseño cambie entre proyectos.
    */

    .project-gallery {
        align-self: stretch;

        width: 100%;
        height: 100% !important;
        min-height: 0 !important;

        grid-template-rows:
            minmax(0, 1fr)
            18px !important;

        gap: 12px;
    }

    /*
        Se anulan las proporciones landscape y portrait que hacían
        variar la altura del visor en cada proyecto.
    */

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;
    }

    .project-gallery-track,
    .project-gallery-slide,
    .project-gallery-media {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        object-fit: contain;
        object-position: center;
    }

    /*
        La galería utiliza 30 px para paginación y separación.
        La tarjeta informativa descuenta exactamente esos 30 px,
        por lo que su altura coincide con el marco de la imagen.
    */

    .project-showcase-description {
        align-self: start;

        box-sizing: border-box;

        width: 100%;
        height: calc(100% - 30px) !important;
        min-height: calc(100% - 30px) !important;
        max-height: calc(100% - 30px) !important;

        padding: 25px 22px 27px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color:
            color-mix(
                in srgb,
                var(--text-muted) 34%,
                transparent
            )
            transparent;
    }

    .project-showcase-description::-webkit-scrollbar {
        display: block;

        width: 5px;
    }

    .project-showcase-description::-webkit-scrollbar-track {
        background: transparent;
    }

    .project-showcase-description::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--text-muted) 28%,
                transparent
            );
    }

    .project-showcase-description::-webkit-scrollbar-thumb:hover {
        background:
            color-mix(
                in srgb,
                var(--accent) 58%,
                transparent
            );
    }

    /*
        En textos cortos, las tecnologías se alinean abajo y el
        espacio vacío queda distribuido de manera intencional.
        En textos largos, el panel permite desplazamiento.
    */

    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* =========================================================
   TABLETA — MISMA ALTURA PARA IMAGEN E INFORMACIÓN
========================================================= */

@media (min-width: 681px) and (max-width: 900px) {
    .project-showcase-layout {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .project-showcase-content {
        align-items: start !important;

        overflow: visible;
    }

    .project-gallery {
        height: auto !important;

        grid-template-rows:
            360px
            18px !important;

        gap: 12px;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;

        aspect-ratio: auto !important;
    }

    .project-showcase-description {
        width: 100%;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — LANDSCAPE SIN FRANJAS VACÍAS

   Las capturas horizontales permanecen completas y centradas.
   El espacio sobrante se rellena con una copia desenfocada de
   la misma imagen, sin recortar el contenido principal.
========================================================= */

.project-gallery-media.project-image-landscape {
    background: var(--surface-soft);
}

/*
    El JavaScript existente asigna la imagen actual a:
    --project-image-background

    Se utiliza esa misma imagen como fondo extendido.
*/

.project-gallery-media.project-image-landscape::before {
    inset: -40px;

    opacity: 0.38;

    background-image:
        var(--project-image-background);
    background-position: center;
    background-size: cover;

    filter:
        blur(30px)
        saturate(0.92);

    transform: scale(1.12);
}

/*
    Esta capa suaviza el fondo para que no compita con la
    captura principal y se integre con el diseño del modal.
*/

.project-gallery-media.project-image-landscape::after {
    opacity: 0.48;

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 55%,
            transparent
        );
}

/*
    La captura principal continúa completa, sin recorte.
*/

.project-gallery-media.project-image-landscape img {
    position: relative;
    z-index: 1;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center;
}

/* Modo oscuro: fondo ligeramente más visible. */

html[data-theme="dark"]
.project-gallery-media.project-image-landscape::before {
    opacity: 0.46;
}

html[data-theme="dark"]
.project-gallery-media.project-image-landscape::after {
    opacity: 0.34;

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 42%,
            transparent
        );
}

/* =========================================================
   MODAL DE PROYECTOS — LANDSCAPE REALMENTE LLENO

   Se utiliza una altura común calculada para aproximarse a
   una proporción 16:9. Las imágenes horizontales usan cover
   para eliminar completamente las franjas vacías.
========================================================= */

@media (min-width: 901px) {
    /*
        Convierte el layout en contenedor para calcular una
        altura proporcional al ancho disponible del modal.
    */

    .project-showcase-layout {
        container-type: inline-size;
    }

    .project-showcase-content {
        --project-panel-height:
            clamp(
                300px,
                calc(38cqw - 9px),
                470px
            );

        align-items: start !important;

        height: auto;
        min-height: 0;
        overflow: visible;
    }

    /*
        La galería mantiene siempre la misma altura:
        marco + separación + paginación.
    */

    .project-gallery {
        align-self: start;

        width: 100%;
        height:
            calc(
                var(--project-panel-height)
                + 30px
            ) !important;
        min-height:
            calc(
                var(--project-panel-height)
                + 30px
            ) !important;
        max-height:
            calc(
                var(--project-panel-height)
                + 30px
            ) !important;

        grid-template-rows:
            var(--project-panel-height)
            18px !important;

        gap: 12px;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height:
            var(--project-panel-height)
            !important;
        min-height:
            var(--project-panel-height)
            !important;
        max-height:
            var(--project-panel-height)
            !important;

        aspect-ratio: auto !important;
    }

    .project-gallery-track,
    .project-gallery-slide,
    .project-gallery-media {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }

    /*
        Capturas horizontales:
        llenan completamente el marco.

        Puede existir un recorte mínimo en los extremos cuando
        una captura no sea exactamente 16:9.
    */

    .project-gallery-media.project-image-landscape img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center;
    }

    /*
        Ya no se necesita el fondo desenfocado porque la imagen
        ocupa todo el visor.
    */

    .project-gallery-media.project-image-landscape::before,
    .project-gallery-media.project-image-landscape::after {
        opacity: 0 !important;
    }

    /*
        Las capturas verticales permanecen completas.
    */

    .project-gallery-media.project-image-portrait img {
        width: auto !important;
        height: 100% !important;
        max-width: 100%;

        object-fit: contain !important;
        object-position: center;
    }

    /*
        La tarjeta informativa coincide exactamente con la
        altura del marco de la imagen.
    */

    .project-showcase-description {
        align-self: start;

        box-sizing: border-box;

        width: 100%;
        height:
            var(--project-panel-height)
            !important;
        min-height:
            var(--project-panel-height)
            !important;
        max-height:
            var(--project-panel-height)
            !important;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* =========================================================
   TABLETA
========================================================= */

@media (min-width: 681px) and (max-width: 900px) {
    .project-showcase-content {
        --project-panel-height:
            clamp(
                300px,
                52vw,
                390px
            );
    }

    .project-gallery {
        height:
            calc(
                var(--project-panel-height)
                + 30px
            ) !important;

        grid-template-rows:
            var(--project-panel-height)
            18px !important;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        height:
            var(--project-panel-height)
            !important;
        min-height:
            var(--project-panel-height)
            !important;
        max-height:
            var(--project-panel-height)
            !important;

        aspect-ratio: auto !important;
    }

    .project-gallery-media.project-image-landscape img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center;
    }

    .project-gallery-media.project-image-landscape::before,
    .project-gallery-media.project-image-landscape::after {
        opacity: 0 !important;
    }

    .project-showcase-description {
        height:
            var(--project-panel-height)
            !important;
        min-height:
            var(--project-panel-height)
            !important;
        max-height:
            var(--project-panel-height)
            !important;

        overflow-y: auto;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — SIN RECORTE Y SIN FRANJAS PLANAS

   Corrección final:
   - La captura principal siempre permanece completa.
   - El marco mantiene su tamaño estable.
   - El espacio sobrante usa la misma imagen desenfocada.
========================================================= */

@media (min-width: 681px) {
    /*
        Se revierte el uso de cover que recortaba las capturas.
    */

    .project-gallery-media.project-image-landscape img {
        position: relative;
        z-index: 2;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center;
    }

    /*
        El script ya proporciona la imagen actual mediante:
        --project-image-background

        Esta capa llena completamente el fondo sin modificar
        ni recortar la captura principal.
    */

    .project-gallery-media.project-image-landscape::before {
        display: block !important;

        position: absolute;
        z-index: 0;
        inset: -48px;

        content: "";

        opacity: 0.58 !important;

        background-image:
            var(--project-image-background)
            !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        filter:
            blur(26px)
            saturate(0.9)
            brightness(0.98);

        transform: scale(1.13);
    }

    /*
        Capa suave para que el fondo no compita visualmente
        con la captura principal.
    */

    .project-gallery-media.project-image-landscape::after {
        display: block !important;

        position: absolute;
        z-index: 1;
        inset: 0;

        content: "";

        opacity: 0.42 !important;

        background:
            linear-gradient(
                135deg,
                color-mix(
                    in srgb,
                    var(--surface-solid) 48%,
                    transparent
                ),
                color-mix(
                    in srgb,
                    var(--accent-soft) 24%,
                    transparent
                )
            );
    }

    /*
        Asegura que el contenedor pueda mostrar las capas.
    */

    .project-gallery-media.project-image-landscape {
        position: relative;

        overflow: hidden;
        isolation: isolate;

        background: var(--surface-soft);
    }
}

/* ---------- Modo oscuro ---------- */

@media (min-width: 681px) {
    html[data-theme="dark"]
    .project-gallery-media.project-image-landscape::before {
        opacity: 0.5 !important;

        filter:
            blur(27px)
            saturate(0.86)
            brightness(0.72);
    }

    html[data-theme="dark"]
    .project-gallery-media.project-image-landscape::after {
        opacity: 0.3 !important;

        background:
            linear-gradient(
                135deg,
                rgba(10, 11, 16, 0.5),
                rgba(112, 103, 255, 0.12)
            );
    }
}

/* ---------- Móvil ---------- */

@media (max-width: 680px) {
    .project-gallery-media.project-image-landscape img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — FRAME 4:3 CON SCALE TO FIT

   Rework definitivo del visor:
   - El frame siempre mantiene la misma proporción.
   - Todas las imágenes se muestran completas.
   - No hay fondos desenfocados ni recortes.
   - La tarjeta de información iguala la altura del frame.
========================================================= */

@media (min-width: 901px) {
    .project-showcase-layout {
        container-type: normal !important;
    }

    .project-showcase-content {
        align-items: stretch !important;

        width: 100%;
        height: auto !important;
        min-height: 0;

        overflow: hidden;
    }

    /*
        La galería se compone de:
        - frame 4:3;
        - 12 px de separación;
        - 18 px para los indicadores.
    */

    .project-gallery {
        align-self: start;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        grid-template-rows:
            auto
            18px !important;

        gap: 12px;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 4 / 3 !important;

        overflow: hidden;

        background:
            color-mix(
                in srgb,
                var(--surface-soft) 92%,
                var(--accent-soft) 8%
            );
    }

    .project-gallery-track,
    .project-gallery-slide,
    .project-gallery-media {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }

    .project-gallery-media {
        position: relative;

        display: grid;
        place-items: center;

        overflow: hidden;
        isolation: isolate;

        background: transparent !important;
    }

    /* Elimina todos los fondos extendidos anteriores. */

    .project-gallery-media::before,
    .project-gallery-media::after,
    .project-gallery-media.project-image-landscape::before,
    .project-gallery-media.project-image-landscape::after,
    .project-gallery-media.project-image-portrait::before,
    .project-gallery-media.project-image-portrait::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
    }

    /*
        Verdadero scale to fit:
        la captura se adapta al frame sin deformarse ni recortarse.
    */

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        position: relative;
        z-index: 1;

        display: block;

        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        box-shadow: none !important;
        transform: none !important;
    }

    /*
        La fila completa mide frame + paginación.
        El margen inferior descuenta esos 30 px para que la tarjeta
        tenga exactamente la altura visual del frame.
    */

    .project-showcase-description {
        align-self: stretch !important;

        box-sizing: border-box;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 30px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* =========================================================
   TABLETA — MISMO FRAME, DISEÑO ESTABLE
========================================================= */

@media (min-width: 681px) and (max-width: 900px) {
    .project-showcase-content {
        align-items: start !important;
        overflow: visible;
    }

    .project-gallery {
        width: 100%;
        height: auto !important;

        grid-template-rows:
            auto
            18px !important;

        gap: 12px;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 4 / 3 !important;
    }

    .project-gallery-media::before,
    .project-gallery-media::after {
        display: none !important;
        content: none !important;
    }

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        box-shadow: none !important;
    }

    .project-showcase-description {
        height: auto !important;
        min-height: 0 !important;
        max-height: 360px !important;

        overflow-y: auto;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — FRAME ADAPTATIVO PROFESIONAL

   La zona de la galería mantiene un tamaño estable, pero el
   borde visible pertenece a la imagen y no al viewport.
   Así no hay franjas dentro del frame ni recorte de contenido.
========================================================= */

@media (min-width: 901px) {
    /*
        Una proporción 3:2 aprovecha mejor las capturas de apps
        y reduce la altura innecesaria del área de galería.
    */

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 3 / 2 !important;

        overflow: hidden;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .project-gallery-track,
    .project-gallery-slide,
    .project-gallery-media {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }

    .project-gallery-slide {
        display: grid;
        place-items: center;
    }

    .project-gallery-media,
    .project-gallery-media.project-image-landscape,
    .project-gallery-media.project-image-portrait {
        position: relative;

        display: grid;
        place-items: center;

        width: 100% !important;
        height: 100% !important;

        overflow: visible;
        isolation: isolate;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Elimina por completo fondos extendidos anteriores. */

    .project-gallery-media::before,
    .project-gallery-media::after,
    .project-gallery-media.project-image-landscape::before,
    .project-gallery-media.project-image-landscape::after,
    .project-gallery-media.project-image-portrait::before,
    .project-gallery-media.project-image-portrait::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
    }

    /*
        La imagen conserva su proporción natural.
        Su propio rectángulo funciona como el frame visible.
    */

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        position: relative;
        z-index: 1;

        display: block;

        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

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

        background: var(--surface-soft);
        box-shadow: var(--shadow-small) !important;

        transform: none !important;
    }

    /* La tarjeta informativa conserva la altura de la zona visual. */

    .project-showcase-description {
        align-self: stretch !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 30px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }
}

/* =========================================================
   TABLETA
========================================================= */

@media (min-width: 681px) and (max-width: 900px) {
    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        aspect-ratio: 3 / 2 !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .project-gallery-slide,
    .project-gallery-media {
        display: grid;
        place-items: center;
    }

    .project-gallery-media {
        overflow: visible;
        background: transparent !important;
    }

    .project-gallery-media::before,
    .project-gallery-media::after {
        display: none !important;
        content: none !important;
    }

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;

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

        background: var(--surface-soft);
        box-shadow: var(--shadow-small) !important;
    }
}

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

@media (max-width: 680px) {
    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .project-gallery-media {
        display: grid;
        place-items: center;
        background: transparent !important;
    }

    .project-gallery-media::before,
    .project-gallery-media::after {
        display: none !important;
        content: none !important;
    }

    .project-gallery-media img,
    .project-gallery-media.project-image-landscape img,
    .project-gallery-media.project-image-portrait img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;

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

        background: var(--surface-soft);
    }
}

/* =========================================================
   MODAL DE PROYECTOS — INFORMACIÓN IGUAL A LA IMAGEN ACTIVA

   JavaScript mide la altura renderizada de la captura activa
   y la comparte mediante --project-active-image-height.
========================================================= */

@media (min-width: 681px) {
    .project-showcase-description {
        align-self: start !important;

        box-sizing: border-box;

        height:
            var(
                --project-active-image-height,
                auto
            )
            !important;

        min-height:
            var(
                --project-active-image-height,
                0px
            )
            !important;

        max-height:
            var(
                --project-active-image-height,
                none
            )
            !important;

        margin-bottom: 0 !important;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* En móvil vuelve al flujo vertical natural. */

@media (max-width: 680px) {
    .project-showcase-description {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — SCROLL INTERIOR PROFESIONAL

   La tarjeta exterior conserva el borde y la sombra.
   El desplazamiento ocurre dentro de un contenedor separado
   del borde redondeado.
========================================================= */

@media (min-width: 681px) {
    .project-showcase-description {
        position: relative;

        padding: 0 !important;
        overflow: hidden !important;

        scrollbar-width: none !important;
    }

    .project-showcase-description::-webkit-scrollbar {
        display: none !important;
    }

    .project-description-scroll {
        display: flex;
        flex-direction: column;

        width: calc(100% - 9px);
        height: calc(100% - 16px);
        min-height: 0;

        margin:
            8px
            9px
            8px
            0;

        padding:
            18px
            17px
            20px
            22px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color:
            color-mix(
                in srgb,
                var(--text-muted) 38%,
                transparent
            )
            transparent;
    }

    /*
        La descripción conserva su estilo aunque ahora esté
        dentro del contenedor desplazable.
    */

    .project-description-scroll
    > p:not(.eyebrow) {
        color: var(--text-secondary);

        font-size: 0.9rem;
        line-height: 1.82;
    }

    .project-description-scroll
    .project-technologies-block {
        margin-top: auto;
        padding-top: 24px;
    }

    /* ---------- Chrome, Edge y Safari ---------- */

    .project-description-scroll::-webkit-scrollbar {
        width: 7px;
    }

    .project-description-scroll::-webkit-scrollbar-track {
        margin-block: 5px;

        border-radius: 999px;
        background: transparent;
    }

    .project-description-scroll::-webkit-scrollbar-thumb {
        min-height: 42px;

        border: 2px solid transparent;
        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--text-muted) 42%,
                transparent
            );

        background-clip: padding-box;
    }

    .project-description-scroll::-webkit-scrollbar-thumb:hover {
        background:
            color-mix(
                in srgb,
                var(--accent) 70%,
                transparent
            );

        background-clip: padding-box;
    }
}

/* =========================================================
   MODO OSCURO
========================================================= */

@media (min-width: 681px) {
    html[data-theme="dark"]
    .project-description-scroll {
        scrollbar-color:
            rgba(255, 255, 255, 0.22)
            transparent;
    }

    html[data-theme="dark"]
    .project-description-scroll::-webkit-scrollbar-thumb {
        border-color: transparent;

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

        background-clip: padding-box;
    }

    html[data-theme="dark"]
    .project-description-scroll::-webkit-scrollbar-thumb:hover {
        background:
            color-mix(
                in srgb,
                var(--accent) 74%,
                transparent
            );

        background-clip: padding-box;
    }
}

/* =========================================================
   MÓVIL — SIN SCROLL INTERNO
========================================================= */

@media (max-width: 680px) {
    .project-showcase-description {
        padding: 23px 20px !important;
        overflow: visible !important;
    }

    .project-description-scroll {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: visible;
    }

    .project-description-scroll
    .project-technologies-block {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — SIMETRÍA DEFINITIVA

   La captura activa y “Sobre el proyecto” comienzan en la
   misma línea y mantienen exactamente la misma altura.
========================================================= */

@media (min-width: 681px) {
    .project-showcase-content {
        align-items: start !important;
    }

    /*
        Antes las imágenes verticales se centraban también en
        vertical dentro del área de galería. Eso desplazaba su
        borde superior y rompía la alineación con la información.
    */

    .project-gallery-slide {
        align-items: start !important;
        justify-items: center !important;
    }

    .project-gallery-media,
    .project-gallery-media.project-image-landscape,
    .project-gallery-media.project-image-portrait {
        align-items: start !important;
        justify-items: center !important;
    }

    .project-showcase-description {
        align-self: start !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*
        El área interior ocupa todo el panel sin introducir un
        desplazamiento superior diferente al de la imagen.
    */

    .project-description-scroll {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

/* =========================================================
   CORRECCIÓN VISUAL AISLADA
   Proyectos, enlace de insignias y carrusel de herramientas
========================================================= */

/* =========================================================
   1. PROYECTOS — SIN BANDA DE SOMBRA DETRÁS
========================================================= */

.projects-carousel,
.projects-viewport,
.projects-track {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.projects-viewport {
    /*
        Conserva el espacio necesario para el movimiento hover,
        pero evita que las sombras de las tarjetas se unan en una
        franja gris detrás del carrusel.
    */
    padding-bottom: 8px !important;

    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
}

.project-card,
.project-card-dynamic {
    box-shadow: none !important;
}

.project-card:hover,
.project-card-dynamic:hover {
    /*
        La interacción se comunica mediante el borde y el ligero
        desplazamiento existente, no mediante una sombra extensa.
    */
    box-shadow: none !important;
}

/* Modo oscuro: borde un poco más definido sin crear una sombra. */

html[data-theme="dark"] .project-card {
    border-color:
        color-mix(
            in srgb,
            var(--border-strong) 72%,
            transparent
        );
}

html[data-theme="dark"] .project-card:hover {
    border-color: var(--accent);
}


/* =========================================================
   2. INSIGNIAS — ENLACE LIMPIO EN MODO OSCURO
========================================================= */

.badges-section-heading .section-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 0;

    border: 0;
    border-radius: 0;

    color: var(--accent);
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;

    transition:
        color 170ms ease,
        opacity 170ms ease,
        transform 170ms ease;
}

.badges-section-heading .section-link:hover {
    color: var(--accent-hover);
    background: transparent !important;

    text-decoration: none !important;

    opacity: 0.9;
    transform: translateX(2px);
}

.badges-section-heading .section-link:active {
    transform: translateX(1px) scale(0.985);
}

html[data-theme="dark"]
.badges-section-heading .section-link {
    color: var(--accent);

    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html[data-theme="dark"]
.badges-section-heading .section-link:hover {
    color: var(--accent-hover);
    background: transparent !important;
    text-decoration: none !important;
}


/* =========================================================
   3. HERRAMIENTAS — SIN RECTÁNGULO DETRÁS DE LAS CARDS
========================================================= */

.profile-rework-tools-carousel,
.profile-rework-tools-viewport,
.profile-rework-tools-grid {
    border: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/*
    Los degradados laterales anteriores podían mezclarse y parecer
    un gran rectángulo detrás de las herramientas.
*/

.profile-rework-tools-carousel::before,
.profile-rework-tools-carousel::after,
.profile-rework-tools-carousel.has-multiple-pages::before,
.profile-rework-tools-carousel.has-multiple-pages::after {
    display: none !important;

    content: none !important;

    background: transparent !important;
    box-shadow: none !important;
}

/*
    Las tarjetas individuales conservan su borde; se añade una
    superficie apenas perceptible para separarlas del panel sin
    crear otra caja grande.
*/

.profile-rework-tool {
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 38%,
            transparent
        ) !important;

    box-shadow: none !important;
}

html[data-theme="dark"] .profile-rework-tool {
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 34%,
            transparent
        ) !important;
}

.profile-rework-tool:hover {
    box-shadow: none !important;
}

/* =========================================================
   CONTACTO — ETIQUETA EXTERIOR, DISEÑO ORIGINAL

   Solo “CONTACTO” queda fuera de la tarjeta.
   El título, la descripción y las acciones conservan el
   diseño y las proporciones originales.
========================================================= */

.contact-section-eyebrow {
    width: min(
        calc(100% - 2px),
        var(--page-width)
    );

    margin: 0 0 18px 2px;
}

/*
    El h2 ya no tiene el eyebrow encima dentro de la tarjeta.
    Se elimina únicamente ese espacio superior extra.
*/

.contact-card .contact-copy h2 {
    margin-top: 0;
}

/* ---------- Icono SVG de correo ---------- */

.contact-mail-icon {
    width: 22px;
    height: 22px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 680px) {
    .contact-section-eyebrow {
        margin-bottom: 14px;
        margin-left: 0;
    }
}

/* =========================================================
   CONTACTO — MAYOR ALTURA

   Aumenta únicamente la presencia vertical del bloque oscuro.
   No modifica el ancho, las columnas ni el tamaño de las cards.
========================================================= */

@media (min-width: 981px) {
    .contact-card {
        min-height: 560px;
    }
}

@media (min-width: 681px) and (max-width: 980px) {
    .contact-card {
        min-height: 520px;
    }
}

/* =========================================================
   MODAL DE PROYECTOS — FONDO EXCLUSIVO PARA PORTRAIT

   Solo las capturas verticales reciben un fondo visual.
   Las capturas horizontales conservan su diseño actual.
========================================================= */

.project-gallery-media.project-image-portrait {
    position: relative;

    overflow: hidden !important;
    isolation: isolate;

    border: 1px solid
        color-mix(
            in srgb,
            var(--border) 78%,
            transparent
        ) !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--surface-solid) 90%,
                var(--accent-soft) 10%
            ),
            color-mix(
                in srgb,
                var(--surface-soft) 84%,
                var(--accent) 16%
            )
        ) !important;

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.72),
        0 22px 60px
            rgba(24, 24, 38, 0.08) !important;
}

/*
    Resplandor decorativo suave.
    Se reactiva únicamente para portrait.
*/

.project-gallery-media.project-image-portrait::before {
    display: block !important;
    content: "" !important;

    position: absolute;
    z-index: 0;
    inset: -24%;

    opacity: 1 !important;

    background:
        radial-gradient(
            circle at 24% 26%,
            color-mix(
                in srgb,
                var(--accent) 24%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 76%,
            color-mix(
                in srgb,
                var(--accent-soft) 70%,
                transparent
            ),
            transparent 40%
        );

    filter: blur(14px);
    transform: none !important;
}

/*
    Capa interior para dar profundidad sin competir con
    la captura principal.
*/

.project-gallery-media.project-image-portrait::after {
    display: block !important;
    content: "" !important;

    position: absolute;
    z-index: 0;
    inset: 0;

    opacity: 1 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18),
            transparent 34%,
            rgba(255, 255, 255, 0.08)
        );

    pointer-events: none;
}

/*
    La imagen vertical permanece completa y centrada.
*/

.project-gallery-media.project-image-portrait img {
    position: relative;
    z-index: 1;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 20px !important;

    background: transparent !important;

    box-shadow:
        0 24px 60px
            rgba(13, 14, 24, 0.16) !important;
}


/* =========================================================
   MODO OSCURO
========================================================= */

html[data-theme="dark"]
.project-gallery-media.project-image-portrait {
    border-color:
        rgba(255, 255, 255, 0.1) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 19, 28, 0.98),
            rgba(30, 28, 64, 0.95)
        ) !important;

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.06),
        0 24px 64px
            rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"]
.project-gallery-media.project-image-portrait::before {
    background:
        radial-gradient(
            circle at 24% 24%,
            color-mix(
                in srgb,
                var(--accent) 34%,
                transparent
            ),
            transparent 36%
        ),
        radial-gradient(
            circle at 76% 78%,
            rgba(104, 91, 255, 0.18),
            transparent 42%
        );
}

html[data-theme="dark"]
.project-gallery-media.project-image-portrait::after {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            transparent 34%,
            rgba(0, 0, 0, 0.12)
        );
}

html[data-theme="dark"]
.project-gallery-media.project-image-portrait img {
    box-shadow:
        0 26px 68px
            rgba(0, 0, 0, 0.38) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 680px) {
    .project-gallery-media.project-image-portrait {
        border-radius: 20px !important;
    }

    .project-gallery-media.project-image-portrait img {
        border-radius: 17px !important;
    }
}

/* =========================================================
   CV — REWORK PROFESIONAL Y SIN REDUNDANCIAS

   El documento es el protagonista. Se eliminan el perfil
   duplicado, las etiquetas innecesarias y los chips repetidos.
========================================================= */

.cv-card.cv-rework-card {
    display: grid !important;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(430px, 1.28fr) !important;
    align-items: stretch !important;
    gap: clamp(34px, 5vw, 72px) !important;

    min-height: 560px;
    padding: clamp(34px, 4.6vw, 58px) !important;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 80% 16%,
            color-mix(
                in srgb,
                var(--accent-soft) 82%,
                transparent
            ),
            transparent 30rem
        ),
        var(--surface);

    box-shadow: var(--shadow-medium);
}


/* ---------- Texto y acciones ---------- */

.cv-rework-copy {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    min-width: 0;
    max-width: 390px;
    padding: 4px 0 !important;
}

.cv-rework-copy h3 {
    max-width: 360px;
    margin: 0 !important;

    font-size: clamp(2.55rem, 4.1vw, 4rem) !important;
    font-weight: 740;
    line-height: 0.98 !important;
    letter-spacing: -0.062em;
}

.cv-rework-copy > p {
    max-width: 360px;
    margin-top: 24px !important;

    color: var(--text-secondary);

    font-size: 0.93rem !important;
    line-height: 1.78 !important;
}


/*
    Información útil sobre el archivo. No funciona como lista de
    contenidos y evita repetir Perfil, Proyectos o Certificaciones.
*/

.cv-document-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

    color: var(--text-muted);

    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.1em;
}

.cv-document-meta span:nth-child(even) {
    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--accent);
}

.cv-rework-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 31px;
}

.cv-rework-actions .primary-button,
.cv-rework-actions .secondary-button {
    min-width: 150px;
}


/* ---------- Escenario de la vista previa ---------- */

.cv-preview-shell.cv-compact-panel.cv-rework-preview {
    position: relative;
    isolation: isolate;

    display: grid !important;
    place-items: center;

    width: 100%;
    min-width: 0;
    min-height: 450px;
    padding: clamp(28px, 4vw, 46px) !important;
    overflow: hidden;

    border: 1px solid var(--border) !important;
    border-radius: 29px !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(
                in srgb,
                var(--accent-soft) 88%,
                transparent
            ),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--surface-solid) 94%,
                var(--accent-soft) 6%
            ),
            var(--surface-soft)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 20px 55px rgba(23, 24, 34, 0.07) !important;
}

.cv-rework-preview::before,
.cv-rework-preview::after {
    position: absolute;
    z-index: -1;

    content: "";

    border: 1px solid
        color-mix(
            in srgb,
            var(--accent) 16%,
            transparent
        );
    border-radius: 50%;
}

.cv-rework-preview::before {
    width: 330px;
    height: 330px;
    top: -190px;
    right: -110px;
}

.cv-rework-preview::after {
    width: 260px;
    height: 260px;
    bottom: -175px;
    left: -85px;
}


/* ---------- Documento ---------- */

.cv-thumbnail-button.cv-rework-preview-button {
    display: grid !important;
    place-items: center;

    width: 100% !important;
    height: 100%;
    padding: 0 !important;

    border: 0;
    background: transparent !important;
    box-shadow: none !important;

    cursor: pointer;
}

.cv-thumbnail-frame.cv-rework-document-frame {
    position: relative;

    display: grid !important;
    place-items: center;

    width: clamp(265px, 29vw, 350px) !important;
    height: auto !important;
    aspect-ratio: 210 / 297;
    margin: 0 !important;
    overflow: hidden;

    border: 1px solid
        color-mix(
            in srgb,
            var(--border-strong) 72%,
            transparent
        ) !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    box-shadow:
        0 28px 68px rgba(18, 19, 29, 0.18),
        0 4px 16px rgba(18, 19, 29, 0.08) !important;

    transform: none !important;

    transition:
        transform 240ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 240ms ease !important;
}

.cv-rework-preview-button:hover
.cv-rework-document-frame,
.cv-rework-preview-button:focus-visible
.cv-rework-document-frame {
    transform: translateY(-7px) !important;

    box-shadow:
        0 38px 82px rgba(18, 19, 29, 0.23),
        0 8px 22px rgba(18, 19, 29, 0.1) !important;
}

.cv-rework-document-frame::before {
    display: none !important;
}

.cv-rework-document-frame
.cv-live-preview-canvas {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain;
}

.cv-rework-document-frame
.cv-live-preview-loading {
    inset: 0 !important;
}


/* ---------- Hover discreto ---------- */

.cv-rework-document-frame
.cv-thumbnail-hover {
    inset: auto 12px 12px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 50px;
    padding: 8px 9px 8px 15px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;

    color: #ffffff;
    background: rgba(15, 16, 22, 0.82);

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

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 190ms ease,
        transform 190ms ease;
}

.cv-rework-document-frame
.cv-thumbnail-hover > strong {
    font-size: 0.73rem;
}

.cv-rework-document-frame
.cv-hover-action {
    order: 2;

    width: 34px;
    height: 34px;
}

.cv-rework-preview-button:hover
.cv-thumbnail-hover,
.cv-rework-preview-button:focus-visible
.cv-thumbnail-hover {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   MODO OSCURO
========================================================= */

html[data-theme="dark"]
.cv-card.cv-rework-card {
    background:
        radial-gradient(
            circle at 80% 16%,
            rgba(110, 98, 255, 0.12),
            transparent 30rem
        ),
        var(--surface);
}

html[data-theme="dark"]
.cv-preview-shell.cv-rework-preview {
    border-color: rgba(255, 255, 255, 0.09) !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(111, 99, 255, 0.16),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            #1a1b22,
            #20212a
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 22px 58px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"]
.cv-thumbnail-frame.cv-rework-document-frame {
    border-color: rgba(255, 255, 255, 0.12) !important;

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.42),
        0 5px 18px rgba(0, 0, 0, 0.22) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
    .cv-card.cv-rework-card {
        grid-template-columns: 1fr !important;
        gap: 38px !important;

        min-height: 0;
    }

    .cv-rework-copy {
        max-width: 620px;
    }

    .cv-rework-copy h3,
    .cv-rework-copy > p {
        max-width: 600px;
    }

    .cv-preview-shell.cv-rework-preview {
        min-height: 500px;
    }

    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(330px, 68vw) !important;
    }
}

@media (max-width: 680px) {
    .cv-card.cv-rework-card {
        gap: 30px !important;

        padding: 25px !important;
        border-radius: 27px;
    }

    .cv-rework-copy h3 {
        font-size: clamp(2.35rem, 13vw, 3.2rem) !important;
    }

    .cv-rework-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .cv-rework-actions .primary-button,
    .cv-rework-actions .secondary-button {
        width: 100%;
    }

    .cv-preview-shell.cv-rework-preview {
        min-height: 420px;
        padding: 24px 18px !important;
        border-radius: 23px !important;
    }

    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(280px, 74vw) !important;
    }
}

/* =========================================================
   CV — PERFIL RESTAURADO Y VISTA PREVIA COMPACTA

   Recupera nombre, carrera, descripción y áreas de enfoque.
   Elimina por completo los metadatos PDF · ES · 2026.
========================================================= */

.cv-card.cv-rework-card.cv-profile-restored {
    grid-template-columns:
        minmax(260px, 0.7fr)
        minmax(560px, 1.3fr) !important;

    min-height: 520px;
}


/* ---------- Columna izquierda ---------- */

.cv-profile-restored .cv-rework-copy {
    max-width: 380px;
}

.cv-profile-restored .cv-rework-copy h3 {
    max-width: 350px;
}

.cv-profile-restored .cv-rework-copy > p {
    max-width: 360px;
}

.cv-profile-restored .cv-rework-actions {
    margin-top: 31px;
}


/* ---------- Panel derecho ---------- */

.cv-profile-restored
.cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
    display: grid !important;
    grid-template-columns:
        minmax(185px, 0.72fr)
        minmax(280px, 1.28fr) !important;
    place-items: stretch;
    align-items: center;
    gap: clamp(28px, 3.6vw, 46px) !important;

    min-height: 410px;
    padding: clamp(28px, 3.8vw, 42px) !important;
}


/* ---------- Vista previa compacta ---------- */

.cv-profile-restored
.cv-thumbnail-button.cv-rework-preview-button {
    display: grid !important;
    place-items: center;

    width: 100% !important;
    height: auto !important;
    min-height: 0;
}

.cv-profile-restored
.cv-thumbnail-frame.cv-rework-document-frame {
    width: min(100%, 225px) !important;
    height: auto !important;
    aspect-ratio: 210 / 297;

    margin: 0 auto !important;

    border-radius: 9px !important;

    transform: none !important;
}

.cv-profile-restored
.cv-rework-preview-button:hover
.cv-rework-document-frame,
.cv-profile-restored
.cv-rework-preview-button:focus-visible
.cv-rework-document-frame {
    transform: translateY(-5px) !important;
}


/* ---------- Información profesional ---------- */

.cv-rework-information {
    display: grid;
    align-content: center;
    gap: 18px;

    min-width: 0;
}

.cv-rework-profile-heading {
    display: grid;
    gap: 6px;
}

.cv-rework-profile-heading h4 {
    margin: 0;

    font-size: clamp(1.65rem, 2.5vw, 2.05rem);
    font-weight: 740;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.cv-rework-profile-heading .cv-profile-role {
    margin: 0;

    font-size: 0.78rem;
}

.cv-profile-restored .cv-compact-description {
    max-width: 470px;

    color: var(--text-secondary);

    font-size: 0.84rem;
    line-height: 1.72;
}

.cv-profile-restored .cv-profile-highlights {
    gap: 8px;
}

.cv-profile-restored .cv-profile-highlights li {
    min-height: 36px;
    padding: 7px 0;
}

.cv-profile-restored .cv-profile-highlights strong {
    font-size: 0.73rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
    .cv-card.cv-rework-card.cv-profile-restored {
        grid-template-columns:
            minmax(235px, 0.62fr)
            minmax(500px, 1.38fr) !important;

        gap: 34px !important;
    }

    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(165px, 0.66fr)
            minmax(260px, 1.34fr) !important;

        gap: 28px !important;
    }

    .cv-profile-restored
    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(100%, 205px) !important;
    }
}

@media (max-width: 900px) {
    .cv-card.cv-rework-card.cv-profile-restored {
        grid-template-columns: 1fr !important;
        gap: 38px !important;

        min-height: 0;
    }

    .cv-profile-restored .cv-rework-copy {
        max-width: 640px;
    }

    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(180px, 0.7fr)
            minmax(270px, 1.3fr) !important;
    }
}

@media (max-width: 680px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns: 1fr !important;
        gap: 30px !important;

        min-height: 0;
        padding: 24px 20px !important;
    }

    .cv-profile-restored
    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(220px, 72vw) !important;
    }

    .cv-rework-information {
        width: 100%;
    }

    .cv-rework-profile-heading {
        text-align: center;
    }

    .cv-profile-restored .cv-compact-description {
        text-align: center;
    }
}

/* =========================================================
   CV — ACCIONES EN EL PERFIL Y RESUMEN VISUAL

   Los botones terminan el recorrido de lectura del panel derecho.
   La columna izquierda utiliza el espacio con un resumen breve
   del contenido del documento.
========================================================= */


/* ---------- Columna izquierda ---------- */

.cv-profile-restored .cv-rework-copy {
    justify-content: center;
}

.cv-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    max-width: 360px;
    margin-top: 28px;
}

.cv-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    min-height: 49px;
    padding: 9px 13px;

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

    color: var(--text-secondary);
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 62%,
            transparent
        );

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.cv-summary-item > span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;

    border: 2px solid
        color-mix(
            in srgb,
            var(--accent) 38%,
            transparent
        );
    border-radius: 50%;

    background: var(--accent);
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--accent-soft) 74%,
            transparent
        );
}

.cv-summary-item strong {
    min-width: 0;

    font-size: 0.69rem;
    font-weight: 720;
    line-height: 1.35;
}

.cv-summary-item-wide {
    grid-column: 1 / -1;
}

.cv-summary-item:hover {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 48%,
            var(--border)
        );

    background:
        color-mix(
            in srgb,
            var(--accent-soft) 42%,
            var(--surface-solid)
        );

    transform: translateY(-2px);
}


/* ---------- Panel derecho ---------- */

.cv-rework-information {
    gap: 15px;
}

.cv-profile-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    max-width: 380px;
    margin-top: 3px !important;
}

.cv-profile-actions .primary-button,
.cv-profile-actions .secondary-button {
    width: 100%;
    min-width: 0;
    padding-inline: 14px;
}


/* ---------- Modo oscuro ---------- */

html[data-theme="dark"] .cv-summary-item {
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 72%,
            transparent
        );
}

html[data-theme="dark"] .cv-summary-item:hover {
    background:
        color-mix(
            in srgb,
            var(--accent-soft) 45%,
            var(--surface-solid)
        );
}


/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .cv-profile-actions {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
}

@media (max-width: 900px) {
    .cv-summary-grid {
        max-width: 520px;
    }

    .cv-profile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 390px;
    }
}

@media (max-width: 680px) {
    .cv-summary-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .cv-summary-item-wide {
        grid-column: auto;
    }

    .cv-profile-actions {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .cv-profile-actions .primary-button,
    .cv-profile-actions .secondary-button {
        width: 100%;
    }
}

/* =========================================================
   CV — RESUMEN EN FORMATO TAG

   Formación, Proyectos y Tecnologías vuelven a mostrarse como
   etiquetas compactas en lugar de tarjetas rectangulares.
========================================================= */

.cv-summary-grid {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;

    width: 100%;
    max-width: 370px;
    margin-top: 27px;
}

.cv-summary-item,
.cv-summary-item.cv-summary-item-wide {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 12px !important;

    border: 1px solid var(--border) !important;
    border-radius: 999px !important;

    color: var(--text-secondary);
    background: var(--surface-soft) !important;

    box-shadow: none !important;
    transform: none !important;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease !important;
}

.cv-summary-item-wide {
    grid-column: auto !important;
}

.cv-summary-item > span {
    display: none !important;
}

.cv-summary-item strong {
    width: auto;

    font-size: 0.68rem !important;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.cv-summary-item:hover {
    color: var(--accent);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 34%,
            var(--border)
        ) !important;

    background: var(--accent-soft) !important;

    box-shadow: none !important;
    transform: none !important;
}

/*
    La etiqueta más importante recibe un acento discreto,
    igual que en la versión anterior.
*/

.cv-summary-item:last-child {
    color: var(--accent);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 30%,
            var(--border)
        ) !important;

    background: var(--accent-soft) !important;
}


/* ---------- Modo oscuro ---------- */

html[data-theme="dark"] .cv-summary-item,
html[data-theme="dark"]
.cv-summary-item.cv-summary-item-wide {
    background: var(--surface-soft) !important;
}

html[data-theme="dark"] .cv-summary-item:hover,
html[data-theme="dark"] .cv-summary-item:last-child {
    background: var(--accent-soft) !important;
}


/* ---------- Responsive ---------- */

@media (max-width: 680px) {
    .cv-summary-grid {
        display: flex !important;
        max-width: none;
    }

    .cv-summary-item,
    .cv-summary-item.cv-summary-item-wide {
        width: auto !important;
    }

    .cv-summary-item strong {
        white-space: normal;
    }
}

/* =========================================================
   CV — MAYOR ALTURA Y TAGS PROFESIONALES

   Los tags nunca se parten: cuando uno no cabe, pasa completo
   a la siguiente fila. La tarjeta gana presencia vertical.
========================================================= */

.cv-card.cv-rework-card.cv-profile-restored {
    min-height: 610px !important;
    padding-block:
        clamp(48px, 5.2vw, 66px) !important;
}

.cv-profile-restored
.cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
    min-height: 475px !important;
}


/* ---------- Columna izquierda ---------- */

.cv-profile-restored .cv-rework-copy {
    max-width: 430px;
}

.cv-profile-restored .cv-rework-copy h3 {
    max-width: 390px;
}

.cv-profile-restored .cv-rework-copy > p {
    max-width: 405px;
}


/* ---------- Tags ---------- */

.cv-summary-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    align-content: flex-start;
    gap: 9px !important;

    width: 100%;
    max-width: 425px !important;
    margin-top: 30px !important;
}

.cv-summary-item,
.cv-summary-item.cv-summary-item-wide {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    min-height: 35px !important;
    padding: 7px 13px !important;

    border: 1px solid var(--border) !important;
    border-radius: 999px !important;

    color: var(--text-secondary);
    background: var(--surface-soft) !important;

    box-shadow: none !important;
    transform: none !important;
}

.cv-summary-item > span {
    display: none !important;
}

.cv-summary-item strong {
    width: auto !important;

    font-size: 0.68rem !important;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.cv-summary-item:last-child {
    color: var(--text-secondary) !important;

    border-color: var(--border) !important;
    background: var(--surface-soft) !important;
}

.cv-summary-item.cv-summary-item-accent {
    color: var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 34%,
            var(--border)
        ) !important;

    background: var(--accent-soft) !important;
}

.cv-summary-item:hover {
    color: var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 38%,
            var(--border)
        ) !important;

    background: var(--accent-soft) !important;

    box-shadow: none !important;
    transform: none !important;
}


/* ---------- Modo oscuro ---------- */

html[data-theme="dark"] .cv-summary-item,
html[data-theme="dark"]
.cv-summary-item:last-child {
    color: var(--text-secondary) !important;
    background: var(--surface-soft) !important;
}

html[data-theme="dark"]
.cv-summary-item.cv-summary-item-accent,
html[data-theme="dark"]
.cv-summary-item:hover {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .cv-card.cv-rework-card.cv-profile-restored {
        min-height: 0 !important;
    }

    .cv-summary-grid {
        max-width: 560px !important;
    }
}

@media (max-width: 680px) {
    .cv-card.cv-rework-card.cv-profile-restored {
        padding-block: 30px !important;
    }

    .cv-profile-restored
    .cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
        min-height: 0 !important;
    }

    .cv-summary-grid {
        max-width: none !important;
    }

    .cv-summary-item strong {
        white-space: nowrap !important;
    }
}

/* =========================================================
   CV — TAGS REFINADOS

   Etiquetas breves, ligeras y no interactivas.
   Cuando una no cabe, pasa completa a la siguiente fila.
========================================================= */

.cv-summary-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    align-content: flex-start;
    gap: 8px !important;

    width: 100%;
    max-width: 385px !important;
    margin-top: 28px !important;
}

.cv-summary-item,
.cv-summary-item.cv-summary-item-wide {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    min-height: 33px !important;
    padding: 7px 13px !important;

    border: 1px solid
        color-mix(
            in srgb,
            var(--border) 88%,
            transparent
        ) !important;
    border-radius: 999px !important;

    color: var(--text-secondary) !important;
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 54%,
            transparent
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.38) !important;

    cursor: default;
    transform: none !important;
}

.cv-summary-item strong {
    width: auto !important;

    font-size: 0.67rem !important;
    font-weight: 690;
    line-height: 1.2;
    letter-spacing: 0;

    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.cv-summary-item:last-child {
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 54%,
            transparent
        ) !important;
}

.cv-summary-item.cv-summary-item-accent {
    color: var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 27%,
            var(--border)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--accent-soft) 68%,
            var(--surface-solid)
        ) !important;
}

/*
    No son botones ni enlaces, por lo que el hover no cambia
    su posición ni crea una falsa invitación a hacer clic.
*/

.cv-summary-item:hover,
.cv-summary-item.cv-summary-item-accent:hover {
    color: inherit !important;
    transform: none !important;
}


/* ---------- Modo oscuro ---------- */

html[data-theme="dark"] .cv-summary-item {
    border-color:
        rgba(255, 255, 255, 0.1) !important;

    background:
        rgba(255, 255, 255, 0.045) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025) !important;
}

html[data-theme="dark"]
.cv-summary-item.cv-summary-item-accent {
    color: var(--accent) !important;

    border-color:
        color-mix(
            in srgb,
            var(--accent) 34%,
            rgba(255, 255, 255, 0.1)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--accent-soft) 72%,
            transparent
        ) !important;
}


/* ---------- Responsive ---------- */

@media (max-width: 680px) {
    .cv-summary-grid {
        max-width: none !important;
    }

    .cv-summary-item strong {
        white-space: nowrap !important;
    }
}

/* =========================================================
   CV — BOTONES DEBAJO DE LA VISTA PREVIA

   La vista previa y sus acciones forman una misma columna.
   La información profesional queda limpia en la derecha.
========================================================= */

.cv-profile-restored
.cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(300px, 1.1fr) !important;
    gap: clamp(34px, 4vw, 54px) !important;
}


/* ---------- Columna de documento ---------- */

.cv-preview-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;

    width: 100%;
    min-width: 0;
}

.cv-preview-column
.cv-thumbnail-button.cv-rework-preview-button {
    width: 100% !important;
}

.cv-profile-restored
.cv-preview-column
.cv-thumbnail-frame.cv-rework-document-frame {
    width: min(100%, 220px) !important;
}


/* ---------- Acciones debajo del documento ---------- */

.cv-preview-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: min(100%, 330px);
    margin: 0 !important;
}

.cv-preview-actions .primary-button,
.cv-preview-actions .secondary-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 13px;

    white-space: nowrap;
}


/* ---------- Información profesional ---------- */

.cv-profile-restored .cv-rework-information {
    align-content: center;
    gap: 18px;
}

.cv-profile-restored .cv-profile-highlights {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(250px, 0.85fr)
            minmax(270px, 1.15fr) !important;

        gap: 32px !important;
    }

    .cv-preview-actions {
        grid-template-columns: 1fr;
        width: min(100%, 235px);
    }
}

@media (max-width: 900px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(270px, 0.9fr)
            minmax(290px, 1.1fr) !important;
    }

    .cv-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 330px);
    }
}

@media (max-width: 680px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns: 1fr !important;
    }

    .cv-preview-column {
        gap: 18px;
    }

    .cv-preview-actions {
        grid-template-columns: 1fr;
        width: min(100%, 280px);
    }
}

/* =========================================================
   CV — BOTONES COMPACTOS BAJO EL PREVIEW

   Conserva el layout anterior. Los dos botones ocupan juntos
   exactamente el ancho visual de la vista previa.
========================================================= */

.cv-profile-restored
.cv-preview-column
.cv-thumbnail-frame.cv-rework-document-frame {
    width: min(100%, 220px) !important;
}

.cv-preview-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;

    width: min(100%, 220px) !important;
    margin: 0 auto !important;
}

.cv-preview-actions .primary-button,
.cv-preview-actions .secondary-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;

    padding: 8px 9px !important;

    border-radius: 12px !important;

    font-size: 0.66rem !important;
    line-height: 1.15;
    white-space: nowrap;
}

.cv-preview-actions .primary-button {
    gap: 5px;
}

.cv-preview-actions .primary-button > span:last-child {
    font-size: 0.72rem;
}


/* En tamaños intermedios se conserva la simetría horizontal. */

@media (max-width: 1080px) {
    .cv-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 205px) !important;
    }

    .cv-profile-restored
    .cv-preview-column
    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(100%, 205px) !important;
    }

    .cv-preview-actions .primary-button,
    .cv-preview-actions .secondary-button {
        padding-inline: 7px !important;
        font-size: 0.62rem !important;
    }
}

@media (max-width: 900px) {
    .cv-preview-actions {
        width: min(100%, 220px) !important;
    }

    .cv-profile-restored
    .cv-preview-column
    .cv-thumbnail-frame.cv-rework-document-frame {
        width: min(100%, 220px) !important;
    }
}

@media (max-width: 680px) {
    .cv-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 220px) !important;
    }

    .cv-preview-actions .primary-button,
    .cv-preview-actions .secondary-button {
        min-height: 41px !important;
        font-size: 0.64rem !important;
    }
}

/* =========================================================
   CV — MÁS ESPACIO ENTRE PREVIEW Y BOTONES
========================================================= */

.cv-preview-actions {
    margin-top: 10px !important;
}

/* =========================================================
   CV — TEXTO COMPLETO SIN RECORTES

   Corrige únicamente la distribución del panel interior.
   No mueve los botones, tags ni demás elementos.
========================================================= */

.cv-profile-restored
.cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
    grid-template-columns:
        minmax(190px, 205px)
        minmax(0, 1fr) !important;

    column-gap: clamp(28px, 3vw, 38px) !important;

    padding:
        clamp(30px, 3.4vw, 38px) !important;
}


/* ---------- Preview y botones ---------- */

.cv-profile-restored
.cv-preview-column
.cv-thumbnail-frame.cv-rework-document-frame {
    width: min(100%, 205px) !important;
}

.cv-preview-actions {
    width: min(100%, 205px) !important;
}


/* ---------- Información profesional ---------- */

.cv-profile-restored
.cv-rework-information,
.cv-profile-restored
.cv-compact-information {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    overflow: visible !important;
}

.cv-profile-restored
.cv-rework-profile-heading,
.cv-profile-restored
.cv-rework-profile-heading h4,
.cv-profile-restored
.cv-compact-description,
.cv-profile-restored
.cv-profile-highlights {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.cv-profile-restored
.cv-rework-profile-heading h4,
.cv-profile-restored
.cv-compact-description,
.cv-profile-restored
.cv-profile-highlights strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.cv-profile-restored
.cv-compact-description {
    padding-right: 2px;

    font-size: 0.8rem !important;
    line-height: 1.65 !important;
}

.cv-profile-restored
.cv-profile-highlights li {
    grid-template-columns:
        8px minmax(0, 1fr) !important;
}

.cv-profile-restored
.cv-profile-highlights strong {
    display: block;

    line-height: 1.35 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) and (min-width: 901px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(175px, 190px)
            minmax(0, 1fr) !important;

        column-gap: 26px !important;
        padding: 30px !important;
    }

    .cv-profile-restored
    .cv-preview-column
    .cv-thumbnail-frame.cv-rework-document-frame,
    .cv-preview-actions {
        width: min(100%, 190px) !important;
    }
}

@media (max-width: 900px) and (min-width: 681px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns:
            minmax(190px, 215px)
            minmax(0, 1fr) !important;

        column-gap: 30px !important;
    }

    .cv-profile-restored
    .cv-preview-column
    .cv-thumbnail-frame.cv-rework-document-frame,
    .cv-preview-actions {
        width: min(100%, 215px) !important;
    }
}

@media (max-width: 680px) {
    .cv-profile-restored
    .cv-preview-shell.cv-restored-panel {
        grid-template-columns: 1fr !important;
    }

    .cv-profile-restored
    .cv-rework-information {
        overflow: visible !important;
    }
}

/* =========================================================
   CV — INFORMACIÓN ALINEADA CON EL PREVIEW

   El nombre comienza a la misma altura que la parte superior
   del documento y el resto del contenido continúa debajo.
========================================================= */

.cv-profile-restored
.cv-preview-shell.cv-compact-panel.cv-rework-preview.cv-restored-panel {
    align-items: start !important;
}

.cv-profile-restored
.cv-preview-column {
    align-self: start !important;
}

.cv-profile-restored
.cv-rework-information,
.cv-profile-restored
.cv-compact-information {
    align-self: start !important;
    align-content: start !important;

    padding-top: 0 !important;
}

.cv-profile-restored
.cv-rework-profile-heading {
    margin-top: 0 !important;
}

.cv-profile-restored
.cv-rework-profile-heading h4 {
    margin-top: 0 !important;
}

.cv-profile-restored
.cv-rework-profile-heading .cv-profile-role {
    margin-top: 5px !important;
}

.cv-profile-restored
.cv-compact-description {
    margin-top: 18px !important;
}

.cv-profile-restored
.cv-profile-highlights {
    margin-top: 7px !important;
}

/* =========================================================
   CV — INFORMACIÓN MÁS COMPACTA

   Acerca la descripción al cargo y la lista a la descripción.
   El espacio libre restante permanece debajo del contenido.
========================================================= */

.cv-profile-restored
.cv-rework-information,
.cv-profile-restored
.cv-compact-information {
    gap: 0 !important;
}

.cv-profile-restored
.cv-rework-profile-heading .cv-profile-role {
    margin-top: 4px !important;
}

.cv-profile-restored
.cv-compact-description {
    margin-top: 11px !important;
    margin-bottom: 0 !important;
}

.cv-profile-restored
.cv-profile-highlights {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   PERFIL — FORMACIÓN EN CURSO

   Mantiene intacta la tarjeta original. Solo añade universidad
   e indicador amarillo dentro de la fila Formación.
========================================================= */

.profile-rework-facts dd.profile-education {
    display: grid;
    gap: 4px;
}

.profile-education-degree {
    color: var(--text);

    font-size: inherit;
    font-weight: 690;
    line-height: 1.45;
}

.profile-education-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;

    color: var(--text-secondary);

    font-size: 0.64rem;
    font-weight: 620;
    line-height: 1.45;
}

.profile-education-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #9a6700;

    font-size: 0.62rem;
    font-weight: 730;
    white-space: nowrap;
}

.profile-education-light {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;

    border-radius: 50%;

    background: #eab308;

    box-shadow:
        0 0 0 4px rgba(234, 179, 8, 0.12),
        0 0 10px rgba(234, 179, 8, 0.34);

    animation:
        educationStatusGlow
        2.4s
        ease-in-out
        infinite;
}

@keyframes educationStatusGlow {
    0%,
    100% {
        opacity: 0.82;

        box-shadow:
            0 0 0 4px rgba(234, 179, 8, 0.1),
            0 0 8px rgba(234, 179, 8, 0.26);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 0 5px rgba(234, 179, 8, 0.06),
            0 0 13px rgba(234, 179, 8, 0.46);
    }
}

html[data-theme="dark"]
.profile-education-progress {
    color: #facc15;
}

html[data-theme="dark"]
.profile-education-light {
    background: #facc15;

    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.1),
        0 0 11px rgba(250, 204, 21, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .profile-education-light {
        animation: none;
    }
}

/* =========================================================
   SELECTOR DE CORREO

   Movido desde index.html para mantener la estructura HTML
   separada de la presentación. El diseño no fue alterado.
========================================================= */

.email-choice-dialog {
            --email-surface: rgba(255, 255, 255, 0.985);
            --email-text: #171a28;
            --email-muted: #73798a;
            --email-border: rgba(23, 26, 40, 0.10);
            --email-border-hover: rgba(91, 78, 255, 0.34);
            --email-accent: #6254ff;
            --email-accent-soft: rgba(98, 84, 255, 0.075);
            --email-card: rgba(248, 249, 252, 0.82);
            --email-card-hover: #ffffff;

            width: min(92vw, 590px);
            padding: 0;
            border: 1px solid rgba(98, 84, 255, 0.18);
            border-radius: 28px;
            color: var(--email-text);
            background: var(--email-surface);
            box-shadow:
                0 30px 90px rgba(14, 19, 34, 0.28),
                0 3px 16px rgba(14, 19, 34, 0.08);
            overflow: hidden;
            transform-origin: 50% 48%;
        }

        html[data-theme="dark"] .email-choice-dialog {
            --email-surface: rgba(17, 21, 35, 0.985);
            --email-text: #f7f8fc;
            --email-muted: #a7afc1;
            --email-border: rgba(255, 255, 255, 0.095);
            --email-border-hover: rgba(159, 142, 255, 0.58);
            --email-accent: #9f8eff;
            --email-accent-soft: rgba(159, 142, 255, 0.10);
            --email-card: rgba(255, 255, 255, 0.035);
            --email-card-hover: rgba(255, 255, 255, 0.06);
        }

        .email-choice-dialog::backdrop {
            background:
                radial-gradient(
                    circle at 50% 42%,
                    rgba(91, 78, 255, 0.18),
                    transparent 34%
                ),
                rgba(6, 9, 18, 0.70);
            backdrop-filter: blur(12px) saturate(0.92);
            -webkit-backdrop-filter: blur(12px) saturate(0.92);
        }

        .email-choice-shell {
            position: relative;
            padding: 36px;
            background:
                radial-gradient(
                    circle at 100% 0%,
                    rgba(98, 84, 255, 0.10),
                    transparent 34%
                ),
                linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.018),
                    transparent 30%
                ),
                var(--email-surface);
        }

        .email-choice-close {
            position: absolute;
            top: 20px;
            right: 20px;
            display: grid;
            place-items: center;
            width: 39px;
            height: 39px;
            border: 1px solid var(--email-border);
            border-radius: 13px;
            color: var(--email-muted);
            background: var(--email-card);
            cursor: pointer;
            transition:
                transform 160ms ease,
                color 160ms ease,
                border-color 160ms ease,
                background 160ms ease;
        }

        .email-choice-close:hover {
            transform: translateY(-1px);
            color: var(--email-text);
            border-color: var(--email-border-hover);
            background: var(--email-card-hover);
        }

        .email-choice-close svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .email-choice-header {
            padding-right: 58px;
        }

        .email-choice-heading {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0;
            text-wrap: balance;
        }

        .email-choice-heading-main,
        .email-choice-heading-accent {
            display: block;
        }

        .email-choice-heading-main {
            color: var(--email-text);
            font-size: clamp(2.8rem, 6vw, 3.7rem);
            font-weight: 850;
            line-height: 0.94;
            letter-spacing: -0.06em;
        }

        .email-choice-heading-accent {
            margin-top: 14px;
            color: var(--email-accent);
            font-size: clamp(1.12rem, 2.15vw, 1.34rem);
            font-weight: 750;
            line-height: 1.22;
            letter-spacing: -0.025em;
            white-space: nowrap;
        }

        .email-choice-actions {
            display: grid;
            gap: 11px;
            margin-top: 29px;
        }

        .email-choice-action {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) 30px;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 15px 16px;
            border: 1px solid var(--email-border);
            border-radius: 18px;
            color: var(--email-text);
            background: var(--email-card);
            text-align: left;
            cursor: pointer;
            font: inherit;
            transition:
                transform 170ms ease,
                border-color 170ms ease,
                background 170ms ease,
                box-shadow 170ms ease;
        }

        .email-choice-action:hover {
            transform: translateY(-2px);
            border-color: var(--email-border-hover);
            background: var(--email-card-hover);
            box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
        }

        .email-choice-action:focus-visible,
        .email-choice-close:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--email-accent) 34%, transparent);
            outline-offset: 3px;
        }

        .email-choice-action-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border: 1px solid var(--email-border);
            border-radius: 13px;
            color: var(--email-accent);
            background: var(--email-surface);
        }

        .email-choice-action-icon svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .email-choice-action-copy {
            min-width: 0;
        }

        .email-choice-action-copy strong {
            display: block;
            margin-bottom: 4px;
            color: var(--email-text);
            font-size: 0.98rem;
            line-height: 1.2;
        }

        .email-choice-action-copy small {
            display: block;
            color: var(--email-muted);
            font-size: 0.80rem;
            font-weight: 500;
            line-height: 1.42;
        }

        .email-choice-action-arrow {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 10px;
            color: var(--email-accent);
            background: var(--email-accent-soft);
            font-size: 0.95rem;
            transition: transform 170ms ease;
        }

        .email-choice-action:hover .email-choice-action-arrow {
            transform: translate(2px, -1px);
        }

        .email-choice-dialog[open] {
            animation: email-dialog-open 220ms cubic-bezier(.2, .82, .2, 1);
        }

        .email-choice-dialog.is-closing {
            animation: email-dialog-close 180ms cubic-bezier(.4, 0, 1, 1) forwards;
        }

        .email-choice-dialog.is-closing::backdrop {
            animation: email-backdrop-close 180ms ease forwards;
        }

        @keyframes email-dialog-open {
            from {
                opacity: 0;
                transform: translateY(14px) scale(0.975);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes email-dialog-close {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateY(10px) scale(0.982);
            }
        }

        @keyframes email-backdrop-close {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @media (max-width: 620px) {
            .email-choice-shell {
                padding: 29px 21px 22px;
            }

            .email-choice-close {
                top: 15px;
                right: 15px;
            }

            .email-choice-header {
                padding-right: 45px;
            }

            .email-choice-heading {
                max-width: calc(100% - 6px);
            }

            .email-choice-heading-main {
                font-size: clamp(2.35rem, 12vw, 3rem);
            }

            .email-choice-heading-accent {
                margin-top: 12px;
                font-size: clamp(1.05rem, 5.2vw, 1.25rem);
                white-space: normal;
                text-wrap: balance;
            }

            .email-choice-action {
                grid-template-columns: 40px minmax(0, 1fr) 28px;
                gap: 12px;
                padding: 14px;
            }

            .email-choice-action-icon {
                width: 40px;
                height: 40px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .email-choice-dialog[open],
            .email-choice-dialog.is-closing,
            .email-choice-action,
            .email-choice-action-arrow,
            .email-choice-close {
                animation: none;
                transition: none;
            }
        }


/* =========================================================
   GALERÍA DE PROYECTOS — AJUSTE PARA LAPTOPS

   Conserva únicamente los puntos originales y reserva una fila
   real para evitar que queden recortados en pantallas de poca altura.
========================================================= */

.project-gallery-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px !important;

    width: 100%;
    min-width: 0;
    min-height: 24px !important;

    overflow: visible;
}

.project-gallery-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 0;
}

/*
   En pantallas de laptop con poca altura, la galería utiliza el
   espacio disponible y reserva una fila para los puntos originales.
*/

@media (min-width: 901px) and (max-height: 900px) {
    .project-showcase-dialog {
        height: min(92dvh, 760px) !important;
        max-height: calc(100dvh - 18px) !important;
    }

    .project-showcase-layout {
        gap: clamp(16px, 2.2dvh, 22px) !important;
        padding:
            clamp(24px, 3.1vw, 38px) !important;
    }

    .project-showcase-header h2 {
        font-size: clamp(2.35rem, 4.7vw, 4rem) !important;
    }

    .project-showcase-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .project-gallery {
        height: 100% !important;
        min-height: 0 !important;

        grid-template-rows:
            minmax(0, 1fr)
            24px !important;

        gap: 9px !important;
    }

    .project-gallery-viewport,
    .project-gallery-viewport.project-frame-landscape,
    .project-gallery-viewport.project-frame-portrait {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;
    }

    .project-gallery-track,
    .project-gallery-slide,
    .project-gallery-media {
        height: 100% !important;
        min-height: 0 !important;
    }
}

@media (max-width: 680px) {
    .project-gallery-pagination {
        gap: 6px !important;
        min-height: 22px !important;
    }

    .project-gallery-dots {
        gap: 6px;
    }
}