/* Las fuentes (Oswald, Space Mono, Bodoni Moda, Inter) se cargan desde
   index.html con <link>, no con @import: así el navegador las descubre de
   inmediato y document.fonts.ready (usado en script.js) resulta fiable. */

/* ==========================================================================
   Sistema de diseño — variables globales
   Paleta unificada: tonos arena (fondo cálido y limpio) + granate (acento).
   ========================================================================== */
:root {
    /* Fondos: arena, cálidos y claros, misma familia para dar ritmo */
    --bg-primary: #f7f1e5;
    --bg-secondary: #efe3d0;
    --bg-elevated: #fffbf3;

    /* Acento granate */
    --accent: #7a2331;
    --accent-light: #9c3a45;
    --accent-dark: #4f151d;
    --accent-soft: rgba(122, 35, 49, 0.08);

    /* Texto (marrón oscuro cálido en vez de negro puro) */
    --text-primary: #2b211b;
    --text-secondary: #5c4c40;
    --text-muted: #6f5d4f;

    /* Color de texto/iconos sobre superficies de acento sólido (granate) */
    --on-accent: #f7f1e5;

    /* Superficies / bordes */
    --surface: rgba(122, 35, 49, 0.04);
    --surface-hover: rgba(122, 35, 49, 0.08);
    --border: rgba(43, 33, 27, 0.12);
    --border-accent: rgba(122, 35, 49, 0.35);

    /* Tipografía */
    --font-display: "Bodoni Moda", serif;
    --font-mono: "Space Mono", monospace;
    --font-body: "Inter", sans-serif;
    --font-impact: "Oswald", sans-serif;

    /* Otros: radios más contenidos y sombra más corta para un
       acabado más técnico/estructurado (menos "blando") */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-soft: 0 6px 18px rgba(43, 30, 23, 0.10);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Foco visible para navegación por teclado (el cursor:none no afecta al teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
/*Estilos genericos*/
html, body {
    width: 100vw;
    height: auto;
    cursor:none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}
img{
    position: relative;
    width: auto;
    height: auto;
    object-fit: cover;
    will-change: transform;
}
section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    scroll-behavior: smooth;
}

/* Contenedor principal */
.nav-container {
    position: fixed;
    width: 100%;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: all 0.4s ease;
}
/* Barra de navegación */
.nav-wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logotipo / monograma: estilo etiqueta de código, "<PD/>" */
.nav-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    padding: 6px 4px;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.nav-logo .bracket {
    color: var(--accent);
    transition: color 0.3s ease;
}
.nav-logo a:hover {
    color: var(--accent-dark);
    letter-spacing: 0.05em;
}
.nav-logo a:hover .bracket {
    color: var(--accent-light);
}

/* Boton con enlaces */
.nav-links {
  display: flex;
  gap: 10px;
}
.nav-link {
    padding: 9px;
    width: 165px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: none;
    background: rgba(247, 241, 229, 0.6);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-link:hover {
    background: var(--accent-soft);
    border-color: var(--border-accent);
}
.nav-link.active {
    background: var(--accent-soft);
    border-color: var(--border-accent);
}
.nav-link.active .button-label {
    color: var(--accent-light);
}
/*Icono menú desplegable*/
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    cursor: none;
    z-index: 20;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.hamburger span {
    height: 3px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}
/* RESPONSIVE */
@media (max-width: 968px) {
    .nav-container {
        padding: 15px 20px;
    }
    .hamburger {
        display: flex;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        transition: right 0.4s ease;
        padding: 80px 20px 40px;
        background: rgba(247, 241, 229, 0.97);
        border-left: 1px solid var(--border);
    }
    .nav-links.active {
        right: 0;
    }
    .nav-link {
        width: 100%;
        max-width: 200px;
        padding: 15px;
        background-color: transparent;
        border-color: transparent;
    }

    /* Animación hamburguesa  X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        transform: translateY(-7.5px) rotate(-45deg);
    }
}

/* Texto botones */
.button-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
}
.nav-link:hover .button-label {
    color: var(--accent-light);
}
/*Inicio*/
.intro{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    background: radial-gradient(circle at 50% 20%, var(--bg-secondary) 0%, var(--bg-primary) 65%);
}
.eyebrow{
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 1rem;
    opacity: 0;
    text-align: center;
}
.eyebrow::before{
    content: "> ";
    color: var(--text-muted);
    font-weight: 400;
}
/* Etiqueta numerada de sección, en el mismo lenguaje que el contador
   de la sección de proyectos (01/02/03/04) */
.section-kicker{
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.4rem;
}
.experiencia .section-kicker{
    text-align: right;
}
.text{
    font-family: var(--font-display);
    font-style: italic;
    text-align: center;
    font-size: clamp(2.1rem, 8vw, 5rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1px;
    pointer-events: none;
    color: var(--text-secondary);
    padding: 0 0.5rem;
}
.subtext{
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.3px;
    text-align: center;
    opacity:0.9;
    pointer-events: none;
    color: var(--text-secondary);
}
.text-wrapper,.subtext-wrapper{
    overflow: hidden;
}
/*Botones inicio*/
.btn {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 32px;
    opacity: 0;
    visibility:hidden;
    transform: translateY(30px);
    cursor: none;

}.btn button {
    background-color: var(--accent);
    color: var(--on-accent);
    padding: 12px 32px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.3s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: none;
}
.btn button:hover{
    background-color: var(--accent-light);
    border-color: var(--accent-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(122, 35, 49, 0.25);
}
.btn button#cv{
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn button#cv:hover{
    background-color: var(--surface-hover);
    border-color: var(--accent-light);
    color: var(--accent-light);
    box-shadow: none;
}
#proyectos-button,#cv{
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
#proyectos-button{
    scroll-behavior: smooth;
}
.btn button img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.btn button#cv img{
    filter: brightness(0);
}
/* Indicador de scroll en el hero */
.scroll-cue{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    opacity: 0;
    animation: fadeInCue 1s ease forwards;
    animation-delay: 2.4s;
    transition: color 0.3s ease;
}
.scroll-cue:hover{
    color: var(--accent-light);
}
.scroll-cue svg{
    width: 16px;
    height: 16px;
    animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes fadeInCue{
    to{ opacity: 1; }
}
@keyframes scrollBounce{
    0%, 100%{ transform: translateY(0); opacity: 0.6; }
    50%{ transform: translateY(6px); opacity: 1; }
}
@media (max-width: 768px){
    .scroll-cue{ display: none; }
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .intro{
        padding: 15px;
        justify-content: center;
    }
    .text {
        margin-bottom: 10px;
    }
    .subtext {
        font-size: 1.05rem;
    }
    .btn {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    .btn button {
        width: auto;
        min-width: 140px;
    }
}
@media (max-width: 480px) {
    .intro {
        justify-content: center;
    }
    .subtext{
        font-size: 0.9rem;
    }
    .btn {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;

    }
    .btn button {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}
/*Seccion dispositiva sobremi*/
.about-section {
    min-height: auto;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    overflow: hidden;
    /* padding-top deja hueco para el nav fijo (.nav-container), que si no
       se solapa con el título al desplazarse a esta sección */
    padding: 6rem 1rem 1rem;
}

.container{
    width: 100%;
    padding: 0 1.5rem;
}
.section-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--accent-light);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
}
.section-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(-90deg);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    transition: all 0.3s var(--ease);
    box-sizing: border-box;
    width: 100%;
}
.card:hover {
    background: var(--surface-hover);
    border-color: var(--border-accent);
    transform: translateY(-5px);
}
.card-content {
    padding: 0.85rem;
}
/* Dos columnas: habilidades (izquierda) + acerca de mí (derecha) */
.about-columns {
    display: grid;
    gap: 4.5rem;
}
.about-bio-col {
    margin-bottom: 0.5rem;
}
.description-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.description-text h3 {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 3vw, 1.2rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 0.75rem;
}
.description-text p {
    color: var(--text-secondary);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.description-text{
        text-align: justify;
        align-self: flex-end;
        max-width: 97%;
    }
.description-avatar {
    display: flex;
    justify-content: center;
}
.avatar-circle {
    width: 10rem;
    height: 10rem;
    background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 50%;
    border: 2px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.avatar-circle:hover {
    transform: scale(1.05);
}
.avatar-image {
    width: 80%;
    height: 100%;
    border-radius: 35%;
    padding-bottom: 4px;
    transition: transform 0.3s ease;
}
/* Columna de habilidades: listas de texto plano, sin chips ni tarjetas
   (inspirado en la sección "Skills" de zunedaalim.com) */
.about-skills-col {
    padding-top: 0.5rem;
    min-width: 0;
}
.about-col-title {
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 3vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 0.75rem;
}
.skill-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem 1.5rem;
}
@media (min-width: 480px) {
    .skill-groups {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.skill-group h4 {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.6rem;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
}
.skill-plain-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.skill-plain-list li {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    transition: color 0.2s ease, transform 0.2s ease;
    overflow-wrap: break-word;
}
.skill-plain-list li:hover {
    color: var(--accent);
    transform: translateX(3px);
}
/* Botón estilo terminal para alternar entre las 4 primeras y las 4
   últimas categorías de habilidades, con efecto de tecleo al pulsar */
.skills-terminal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.65rem 1rem;
    background: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: none;
    transition: border-color 0.25s ease;
}
.skills-terminal:hover {
    border-color: var(--accent);
}
.skills-terminal:disabled {
    cursor: not-allowed;
}
.skills-terminal-prompt {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-light);
}
.skills-terminal-cmd {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--on-accent);
    white-space: nowrap;
}
.skills-terminal-cursor {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-light);
    animation: skillsCursorBlink 1s step-end infinite;
}
@keyframes skillsCursorBlink {
    50% { opacity: 0; }
}
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.tech-tag {
    background: var(--accent-soft);
    color: var(--accent-light);
    border: 1px solid var(--border-accent);
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    white-space: nowrap;
    transition: all 0.25s ease;
}
.tech-tag:hover{
    background: var(--accent);
    color: var(--on-accent);
}
.letter {
    display: inline-block;
}
.fade-in {
    opacity: 0;
    transform: translateY(50px);
}
.scale-in {
    opacity: 0;
    transform: scale(0.9);
}
.lkn {
    color: var(--text-secondary);
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    z-index: 10;
    cursor: none;
    position: relative;
    transition: letter-spacing 280ms ease-in-out, color 280ms ease;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
}
#lkn-img {
    margin-left: 8px;
    width: 22px;
    height: 22px;
    pointer-events: none;
}
/* Efecto botón linkedin */
.lkn:hover,
.lkn:active {
    letter-spacing: 2px;
    color: var(--accent-light);
}
.lkn:after,
.lkn:before {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border: 1px solid var(--accent);
    bottom: 0px;
    content: " ";
    display: block;
    margin: 0 auto;
    position: absolute;
    -webkit-transition: all 280ms ease-in-out;
            transition: all 280ms ease-in-out;
    width: 0;
    left: 50%;
    transform: translateX(-50%);
}
.lkn:hover:after,
.lkn:hover:before {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-color: var(--accent);
    -webkit-transition: width 350ms ease-in-out;
            transition: width 350ms ease-in-out;
    width: 100%;
}
.lkn:hover:before {
    bottom: auto;
    top: 0;
    width: 100%;
}
/*Responsive About me*/
@media (min-width: 640px) {
    .container {
        padding: 0 2.5rem;
    }
    .tech-tag {
        gap: 0.5rem;
        padding: 0.3rem 0.85rem;
    }
    .avatar-circle {
        width: 8rem;
        height: 8rem;
    }
    .card-content {
        padding: 0.9rem;
    }
    .lkn {
        margin-top: 0.5rem;
        font-size: 1.2rem;
    }
    #lkn-img {
        width: 26px;
        height: 26px;
    }
    .lkn:hover,
    .lkn:active {
        letter-spacing: 3px;
    }
}
@media (min-width: 768px) {
    .section-title {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    .about-columns {
        grid-template-columns: 1fr 2fr;
        align-items: start;
    }
    .avatar-circle {
        width: 11rem;
        height: 11rem;
    }
    .about-bio-col {
        margin-bottom: 1rem;
    }
    .card-content {
        padding: 1rem;
    }
    #lkn-img {
        width: 30px;
        height: 30px;
    }
    .lkn {
        margin-bottom: 0;
    }
}
@media (min-width: 1600px) {
    .container {
        padding: 0 4rem;
    }
    .section-title {
        margin-top: 0;
        margin-bottom: 2rem;
    }
    .lkn {
        margin-top: 2rem;
        margin-bottom: 0rem;
    }
}

/*Seccion galeria proyecto*/
.proyecto{
    background: var(--bg-primary);
}
.cartas {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 150%;
  max-width: 1800px;
  height: 600px;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.carta {
  position: absolute;
  width: 500px;
  height: 550px;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  margin-left: -250px;
  display: flex;
  flex-direction:column;
  gap:1em;
  will-change: transform;
  text-decoration: none;
  cursor: none;
}
.carta-img{
    flex: 1;
    min-height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.3s ease;
}
.carta:hover .carta-img{
    border-color: var(--accent);
}
.carta-video{
    display: none;
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
}
.carta-img.has-video .carta-video{
    display: block;
}
.carta-img.has-video .carta-placeholder{
    display: none;
}
/* Barra superior estilo editor de código */
.carta-topbar{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.carta-topbar span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-accent);
}
/* Botón "+" de "más información": vive en la topbar (siempre visible,
   sin depender del hover que oculta .carta-info) empujado al extremo
   derecho de la barra. */
.carta-topbar-mas{
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-accent);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1;
    cursor: none;
    transition: all 0.25s var(--ease);
}
.carta-topbar-mas:hover,
.carta-topbar-mas:focus-visible{
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.carta-placeholder{
    flex: 1;
    background: var(--bg-elevated);
}
/* Información del proyecto: superpuesta sobre el vídeo/miniatura (no
   suma alto a la tarjeta, así no se recorta en pantallas bajas donde
   la sección de proyectos va fijada y con overflow:hidden) */
.carta-info{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem;
    background: rgba(20, 15, 12, 0.82);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid rgba(244, 241, 229, 0.1);
}
/* En ratón/trackpad, la información queda oculta por defecto (se ve
   solo el vídeo/miniatura, más limpio) y aparece al pasar el cursor,
   enfocar la tarjeta o tabular hasta alguno de sus botones. En
   pantallas táctiles, sin hover, se mantiene siempre visible. */
@media (hover: hover) and (pointer: fine) {
    .carta-info{
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .carta:hover .carta-info,
    .carta:focus-visible .carta-info,
    .carta:focus-within .carta-info{
        opacity: 1;
        transform: translateY(0);
    }
}
.carta-titulo{
    color: var(--on-accent);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.carta-descripcion{
    color: rgba(244, 241, 229, 0.78);
    font-size: 0.85rem;
    line-height: 1.5;
}
.carta-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}
.carta-tags .tech-tag{
    background: rgba(244, 241, 229, 0.1);
    color: rgba(244, 241, 229, 0.9);
    border-color: rgba(244, 241, 229, 0.22);
}
.carta-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: none;
    border: 1px solid transparent;
    transition: all 0.25s var(--ease);
}
.carta-btn-link{
    background: rgba(244, 241, 229, 0.08);
    color: rgba(244, 241, 229, 0.9);
    border-color: rgba(244, 241, 229, 0.28);
}
.carta-btn-link:hover,
.carta-btn-link:focus-visible{
    background: rgba(244, 241, 229, 0.18);
    border-color: rgba(244, 241, 229, 0.55);
}
/* Modal "Más información" de cada proyecto */
.proyecto-modal{
    /* El reset global "*{margin:0}" anula el margin:auto con el que el
       navegador centra un <dialog> por defecto; se restaura aquí junto
       con position/inset para que quede siempre en medio de la pantalla. */
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: min(920px, calc(100vw - 2.5rem));
    width: 100%;
    max-height: min(640px, calc(100vh - 3rem));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 25px 60px rgba(43, 33, 27, 0.35);
}
.proyecto-modal::backdrop{
    background: rgba(20, 15, 12, 0.55);
    backdrop-filter: blur(4px);
}
.proyecto-modal[open]{
    animation: proyecto-modal-in 0.25s var(--ease);
}
@keyframes proyecto-modal-in{
    from{ opacity: 0; transform: translateY(12px) scale(0.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
.proyecto-modal-contenido{
    position: relative;
    padding: 2rem 1.75rem 1.75rem;
}
.proyecto-modal-cuerpo{
    display: flex;
    flex-direction: column-reverse;
    gap: 1.25rem;
}
.proyecto-modal-texto{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
/* Hueco reservado para el vídeo del proyecto (todavía sin implementar):
   de momento es un panel vacío, solo para que el hueco quede reservado
   en el layout y no haya que rehacerlo cuando se añada el vídeo. */
.proyecto-modal-media{
    flex-shrink: 0;
    min-height: 140px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}
@media (min-width: 640px){
    .proyecto-modal-cuerpo{
        flex-direction: row;
        align-items: stretch;
    }
    .proyecto-modal-texto{
        flex: 1;
    }
    .proyecto-modal-media{
        width: 260px;
        min-height: 0;
    }
}
.proyecto-modal-cerrar{
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: none;
    transition: all 0.25s var(--ease);
}
.proyecto-modal-cerrar:hover,
.proyecto-modal-cerrar:focus-visible{
    color: var(--accent-light);
    border-color: var(--border-accent);
    background: var(--surface-hover);
}
.proyecto-modal-kicker{
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
}
.proyecto-modal-titulo{
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}
.proyecto-modal-stack{
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.proyecto-modal-descripcion{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
    overflow-y: auto;
}
.proyecto-modal-enlaces{
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.proyecto-modal-enlaces .carta-btn-link{
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-color: var(--border-accent);
}
.proyecto-modal-enlaces .carta-btn-link:hover,
.proyecto-modal-enlaces .carta-btn-link:focus-visible{
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.proyecto-modal-proximamente{
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}
/* El <dialog> se renderiza en la "top layer" del navegador, por encima
   del cursor personalizado (un div normal posicionado con JS). Mientras
   el modal está abierto se restaura el cursor nativo en toda la página
   para no dejar al usuario sin ningún cursor visible. */
body.modal-abierto,
body.modal-abierto *{
    cursor: auto !important;
}
body.modal-abierto .cursor-punto,
body.modal-abierto .cursor-linia{
    opacity: 0;
}
.proyecto-modal-cerrar,
.proyecto-modal .carta-btn{
    cursor: pointer !important;
}
.titulo-proyecto{
    margin-top: 5px;
}
.contador-proyecto{
    position: absolute;
    /* top deja hueco para el nav fijo (.nav-container): la sección
       "proyecto" queda pineada por ScrollTrigger con su borde superior
       pegado al del viewport, así que sin esto el "<PD/>" del nav se
       solapa con el título "Proyectos" */
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    margin: 2em;
}
.titulo-proyecto, .contador{
    position: relative;
    width: 700px;
    height: 150px;
    clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
}
.contador{
    top:-10px
}
.contenedor-contador{
    position: relative;
    transform:translateY(150px);
    will-change: transform;
}
.contador-proyecto h1{
    width: 100%;
    position: relative;
    color: var(--accent);
    text-transform: uppercase;
    font-family: var(--font-impact);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: 150px;
    line-height: 1;
    letter-spacing: -0.04em;
    will-change: transform;
}
.titulo-proyecto h1{
    color: var(--text-primary);
    font-weight: 600;
}
.empty{
    opacity: 0;
}
@media(max-width:900px){
    .titulo-proyecto, .contador  {
        width: 100%;
    }
    .contador-proyecto{
        /* En móvil el nav fijo es más bajo (solo la barra con el hamburguesa) */
        top: 4rem;
        margin: 5px;
        max-width: calc(100% - 10px);
    }
    .contador{
        top:-50px;
        height: 80px;
    }
    .titulo-proyecto h1, .contenedor-contador h1{
        font-size: 75px;
    }
    .cartas{
        top:27.5%
    }
    .carta{
        width: 375px;
        height: 500px;
        margin-left: -187.5px;
    }
}
/* Portátiles con poca altura de viewport (pantalla ancha tipo laptop,
   ~1366x768 o similar): con los tamaños de escritorio, el título
   "Proyectos" queda muy abajo y las tarjetas del carrusel llegan a
   taparlo. Se reduce el título y las tarjetas para dejar hueco. */
@media (min-width: 901px) and (max-height: 820px){
    .contador-proyecto{
        top: 3.2rem;
    }
    .contador-proyecto h1{
        font-size: 95px;
    }
    .contador{
        /* La ventana del contador debe medir lo mismo que una línea de
           texto (font-size de arriba); si no, se cuela el número
           siguiente por debajo. */
        top: -40px;
        height: 95px;
    }
    .cartas{
        top: 34%;
        height: 480px;
    }
    .carta{
        width: 380px;
        height: 420px;
        margin-left: -190px;
    }
}

/*Seccion experiencia*/
.trabajo{
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    padding: 20px;
    height: auto;
    padding-bottom: 15px;
}
.experiencia{
    width: 100%;
    display: block;
    align-items: center;
    text-align: center;
    font-family: var(--font-mono);
    font-style: italic;
    justify-content: center;
    font-size: small;
}
.experiencia h2{
    color: var(--text-muted);
    font-weight: 400;
}
.experiencia-titulo{
    color: var(--accent-light);
    margin-top: 25px;
    font-family: var(--font-body);
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-size: 2.75rem;
    padding: 0.5rem;
    overflow: hidden;
}
.contenido-experiencia{
    margin-top: 15px;
    text-align: center;
    padding-bottom: 20px;
}

/* Estilos por defecto -> móviles */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 1rem;

}
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--border-accent);
    top: 0;
    bottom: 45px;
    left: 1.5rem;
    transform: none;
    z-index: 1;
}
/* Cada item */
.experience-item {
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    z-index: 2;
}
.experience-item.izquierda, .experience-item.derecha {
    align-self: flex-start;
    padding-left: 1.5rem;
    text-align: left;
}
.experience-item::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    top: 1.25rem;
    transform: none;
    z-index: 3;
}

.experience-item.izquierda::before, .experience-item.derecha::before {
    left: 0.25rem;
    right: auto;
}

.experience-content {
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s var(--ease), border-color 0.3s ease;
}
.experience-content:hover{
    transform: translateY(-4px);
    border-color: var(--border-accent);
}

/* Textos */
.job-title {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.job-duration {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-light);
    margin: 0.35rem 0 0.5rem;
}
.company-name {
    font-weight: 600;
    margin: 0;
    color: var(--text-secondary);
}
.job-type {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0.25rem 0 1rem;
}
.job-description {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}
.job-description, .tag{
    display: block;
}
/* Lista de tecnologías */
.tag {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent-light);
    border: 1px solid var(--border-accent);
    padding: 0.3rem 0.6rem;
    margin: 0.2rem 0.3rem 0.2rem 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
/* Responsive pantalla grande*/
@media (min-width: 768px) {
    .trabajo{
        min-height: 100vh;
    }
    .timeline {
        align-items: center;
        margin-top: 2.25rem;
    }
    .timeline::after {
        margin-top: 10px;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
    }
    .experience-item {
        width: 40%;
        margin: 0;
    }
    .experience-item.izquierda {
        margin-top: 15px;
        align-self: flex-start;
        padding-right: 1.5rem;
        padding-left: 0;
        margin-left: 120px;
        text-align: right;
    }
    .experience-item.derecha {
        align-self: flex-end;
        padding-left: 2rem;
        padding-right: 0;
        margin-right: 120px;
        text-align: left;
    }
    .experience-item.izquierda::before {
        right: -31.5px;
        left: auto;
    }
    .experience-item.derecha::before {
        left: -31.5px;
        right: auto;
    }
}

@media (min-width: 1600px) {
    .timeline {
        margin-top: 5rem;
    }
    .experience-item.izquierda {
        margin-left: 120px;
        padding-right: 0rem;
    }
    .experience-item.derecha {
        margin-right: 120px;
        padding-left: 0rem;
    }
    .experience-item.izquierda::before {
        right: -69.9px;
    }
    .experience-item.derecha::before {
        left: -69.9px;
    }
    .job-title {
        font-size: 1.3rem;
    }
    .job-duration, .company-name {
        font-size: 1.1rem;
    }
    .job-description {
        font-size: 1rem;
    }
    .experience-content {
        padding: 1.75rem;
    }
}
/*Seccion de contacto final*/
.outro {
    width: 100%;
    min-height: 100svh;
    padding: 1.5rem;
    padding-right: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-primary);
    color: var(--text-secondary);
}
.contenedor-contacto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}
.texto-contacto {
    flex: 1;
    min-width: 300px;
    max-width: 420px;
 }
.outro h1{
    font-family: var(--font-body);
    margin-top: 10px;
    margin-bottom: 0.4rem;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: 4rem;
    color: var(--text-primary);
}
.outro h2{
    font-family: var(--font-body);
    font-weight: 300;
    font-style: normal;
    color: var(--text-muted);
    max-width: 34ch;
}
#contact-form{
    display: flex;
    flex-direction: column;
    flex: 1.4;
    min-width: 320px;
    max-width: 600px;
}
#contact-form input,
#contact-form textarea {
  width: 100%;
  gap: 1rem;
  padding: 1rem;
  margin: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.25s ease, background 0.25s ease;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder{
    color: var(--text-muted);
}
#contact-form input:focus,
#contact-form textarea:focus{
    outline: none;
    border-color: var(--border-accent);
    background: var(--surface-hover);
}
#contact-form .send{
    width: 100%;
    margin: 5px;
    padding: 1rem;
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}
#contact-form .send:hover{
    background: var(--accent-light);
    border-color: var(--accent-light);
    transform: translateY(-2px);
}
#contact-form .send:disabled{
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
#form-response{
    margin: 10px 5px 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    min-height: 1.2em;
}
#form-response.is-success{
    color: var(--accent-light);
}
#form-response.is-error{
    color: #b3261e;
}
.footer-note{
    text-align: center;
    margin-top: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.iconos-contacto{
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    gap: 16px;
    width: 100%;
}
.iconos{
    cursor: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}
.iconos img{
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
    transition: transform 0.3s ease;
}
.iconos:hover {
    transform: translateY(-5px);
    border-color: var(--border-accent);
    background: var(--accent-soft);
}
.iconos:hover img{
    transform: scale(1.1);
}
.send{
    cursor: none;
}

/*Responsive */
@media (max-width: 768px) {
    .contenedor-contacto {
        flex-direction: column;
    }
    .texto-contacto, #contact-form {
        width: 100%;
        max-width: none;
    }
    .outro h1 {
        font-size: 3.2rem;
    }
     #contact-form input,#contact-form textarea {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .outro {
        padding: 1rem;
    }
    .outro h1 {
        font-size: 2.5rem;
    }
    .outro h2 {
        font-size: 1.1rem;
    }
    #contact-form {
        padding: 1.5rem;
    }
}
@media (max-width: 1440px) {
    .outro h1 {
        font-size: 3.75rem;
    }
}
@media (min-width: 1600px) {
    .outro h1 {
        font-size: 4rem;
    }
    .outro h2 {
        font-size: 1.4rem;
    }
    #contact-form {
        padding: 2rem;
    }
}

/*Estilo cursor*/
.cursor-punto {
    width: 10px;
    height: 10px;
    background-color: var(--accent);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.3s ease;
    will-change: transform;
}
.cursor-punto.is-visible{
    opacity: 1;
}
.cursor-punto.on-button {
    background-color: white;
    mix-blend-mode: exclusion;
}
.cursor-linia {
    width: 40px;
    height: 40px;
    border: 2px solid var(--text-muted);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, border 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
    will-change: transform;
    z-index: 100;
}
.cursor-linia.is-visible{
    opacity: 1;
}
.cursor-linia.expand{
    transform: translate(-50%, -50%) scale(1.8);
    border: 2px solid var(--accent);
    transition: transform 0.1s ease, border 0.1s ease;
}

/* Dispositivos táctiles: sin puntero personalizado, sin cursor oculto */
@media (pointer: coarse) {
    .cursor-punto, .cursor-linia{
        display: none;
    }
    html, body, .nav-link, .hamburger, .btn button, .lkn, .send, .iconos, #proyectos-button, #cv, .skills-terminal, .carta{
        cursor: auto;
    }
}