/* =========================================================
   PORTFOLIO · EST.
   Añadido encima del CSS de la web de la banda.
   Misma paleta, mismo papel, mismo celo.
   ========================================================= */

/* ---------- cabecera propia ---------- */
.marca {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
    color: var(--tinta);
    text-decoration: none;
    transform: rotate(-2deg);
    line-height: 1;
}

.marca em {
    font-style: normal;
    color: var(--acento);
    font-size: 0.85em;
}

.menu a.activo {
    position: relative;
}

.menu a.activo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    background: var(--acento);
    transform: rotate(-1deg);
}

/* ---------- portada ---------- */
.portada-est {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(6.5rem, 16vw, 10rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.portada-texto {
    position: relative;
    z-index: 3;
}

.ante-titulo-est {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    color: var(--acento-fuerte);
    transform: rotate(-1.5deg);
    margin-bottom: 0.2rem;
}

.titulo-est {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(4.5rem, 15vw, 9rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.titulo-est em {
    font-style: normal;
    color: var(--acento);
    font-size: 0.42em;
}

.rol {
    margin-top: 1.1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.85rem, 1.9vw, 1.02rem);
    color: var(--acento-fuerte);
    letter-spacing: 0.01em;
    min-height: 1.6em;
}

.rol::before {
    content: '> ';
    opacity: 0.65;
}

.rol .cursor,
.codigo .cursor {
    display: inline-block;
    width: 0.55em;
    height: 1em;
    background: currentColor;
    vertical-align: -0.14em;
    margin-left: 2px;
    animation: parpadeo 1s steps(1) infinite;
}

@keyframes parpadeo {
    50% { opacity: 0; }
}

.entradilla {
    margin-top: 1.2rem;
    max-width: 30rem;
    font-size: clamp(1rem, 2.1vw, 1.1rem);
    font-weight: 300;
    color: #2c2620;
    line-height: 1.6;
}

body.oscuro .entradilla { color: #d9d3e8; }

.acciones-est {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.9rem;
}

.enlaces-est {
    display: flex;
    gap: 1.1rem;
    margin-top: 1.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.enlaces-est a {
    color: var(--gris);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 2px;
    transition: color 0.25s;
}

.enlaces-est a:hover { color: var(--acento-fuerte); }

/* ---------- ventana de código ---------- */
.ventana-codigo {
    position: relative;
    background: #1b1712;
    border-radius: 4px;
    box-shadow: 0 26px 46px rgba(31, 24, 15, 0.34);
    transform: rotate(1.4deg);
    padding: 0 0 1.1rem;
    z-index: 2;
}

.ventana-codigo::before,
.ventana-codigo::after {
    content: '';
    position: absolute;
    width: 108px;
    height: 26px;
    background: var(--celo);
    border-left: 1px dashed rgba(23, 19, 15, 0.18);
    border-right: 1px dashed rgba(23, 19, 15, 0.18);
    box-shadow: 0 2px 6px rgba(31, 24, 15, 0.2);
}

.ventana-codigo::before { top: -13px; left: 12%; transform: rotate(-5deg); }
.ventana-codigo::after { bottom: -11px; right: 9%; transform: rotate(3deg); }

.barra-ventana {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.barra-ventana i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4a443b;
    display: block;
}

.barra-ventana span {
    margin-left: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #9a917f;
    letter-spacing: 0.04em;
}

.codigo {
    margin: 0;
    padding: 1rem 1.1rem 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.68rem, 1.6vw, 0.8rem);
    line-height: 1.75;
    color: #e9e2d3;
    min-height: 15.5em;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}

.codigo .c { color: #7d7466; }
.codigo .k { color: #8fd6cb; }
.codigo .s { color: #e0a08c; }
.codigo .n { color: #c9a227; }
.codigo .f { color: #cfc6b4; }

/* ---------- marquesina propia ---------- */
.marquesina-est {
    background: var(--tinta);
    color: var(--papel);
    padding: 0.75rem 0;
    overflow: hidden;
    transform: rotate(-0.7deg);
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem);
    border-top: 3px solid var(--tinta);
    border-bottom: 3px solid var(--tinta);
}

.marquesina-est .marquesina-texto span {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- proyectos ---------- */
.rejilla-proyectos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    gap: clamp(1.6rem, 3.5vw, 2.8rem);
    align-items: start;
}

.proyecto {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fdfaf3;
    padding: 14px 14px 4px;
    box-shadow: 0 16px 32px rgba(31, 24, 15, 0.22);
    transform: rotate(var(--giro, -1.6deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
    will-change: transform;
}

.proyecto:nth-child(2n) { --giro: 1.4deg; }
.proyecto:nth-child(3n) { --giro: -0.8deg; }

.proyecto:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.015);
    box-shadow: 0 28px 46px rgba(31, 24, 15, 0.3);
}

.proyecto::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 16%;
    width: 92px;
    height: 24px;
    background: var(--celo);
    border-left: 1px dashed rgba(23, 19, 15, 0.18);
    border-right: 1px dashed rgba(23, 19, 15, 0.18);
    transform: rotate(-5deg);
    box-shadow: 0 2px 5px rgba(31, 24, 15, 0.16);
    z-index: 5;
}

.proyecto .marco {
    aspect-ratio: 372 / 272;
    background: #100d0a;
}

.arte {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.lienzo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 372px;
    height: 272px;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    transform-origin: center;
}

.proyecto h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    margin-top: 0.85rem;
    letter-spacing: -0.01em;
}

.proyecto p {
    font-family: 'Caveat', cursive;
    font-size: 1.12rem;
    color: var(--gris);
    line-height: 1.25;
    padding-bottom: 0.5rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-bottom: 0.9rem;
}

.chips span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(23, 19, 15, 0.35);
    color: var(--tinta);
    background: rgba(255, 255, 255, 0.4);
}

.chips span.acc {
    background: var(--acento);
    border-color: var(--acento-fuerte);
    color: #fff;
}

.proyecto .num {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.66rem;
    color: var(--papel);
    background: rgba(23, 19, 15, 0.55);
    padding: 2px 6px;
    z-index: 6;
}

.proyecto.enlace { cursor: pointer; }

.proyecto .ver {
    position: absolute;
    inset: 14px 14px auto auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta);
    background: var(--acento);
    padding: 3px 7px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 7;
}

.proyecto.enlace:hover .ver {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- ficha ---------- */
.hoja-ficha {
    position: relative;
    max-width: 860px;
    background: #fdfaf3;
    background-image:
        repeating-linear-gradient(180deg, transparent 0 30px, rgba(23, 19, 15, 0.07) 30px 31px),
        linear-gradient(180deg, #fdfaf3, #f5eede);
    padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.2rem, 4vw, 2.4rem);
    box-shadow: 0 18px 36px rgba(31, 24, 15, 0.22);
    transform: rotate(-0.4deg);
}

.hoja-ficha::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 34%;
    width: 104px;
    height: 26px;
    background: var(--celo);
    border-left: 1px dashed rgba(23, 19, 15, 0.18);
    border-right: 1px dashed rgba(23, 19, 15, 0.18);
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(31, 24, 15, 0.16);
}

.ficha-cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--tinta);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.ficha-cabeza h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    text-transform: uppercase;
}

.ficha-cabeza span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gris);
}

.ficha-filas {
    display: grid;
    gap: 0.1rem;
}

.fila {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1rem;
    padding: 0.42rem 0;
    align-items: baseline;
}

.fila dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento-fuerte);
}

.fila dd {
    font-size: clamp(0.92rem, 2.1vw, 1rem);
    line-height: 1.45;
}

.fila dd .tenue { color: var(--gris); }

.ficha-firma {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(23, 19, 15, 0.3);
}

.ficha-firma p {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    color: var(--acento-fuerte);
    transform: rotate(-1.4deg);
}

.sello-cuadrado {
    border: 2.5px solid #d84a2f;
    color: #d84a2f;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-align: center;
    transform: rotate(-3deg);
    opacity: 0.85;
}

body.oscuro .hoja-ficha {
    background-color: #1b1830;
    background-image:
        repeating-linear-gradient(180deg, transparent 0 30px, rgba(255, 255, 255, 0.05) 30px 31px);
}

body.oscuro .fila dd { color: #e7e1f4; }
body.oscuro .proyecto { background: #1b1830; }
body.oscuro .chips span { color: #e7e1f4; border-color: rgba(231, 225, 244, 0.35); background: rgba(255, 255, 255, 0.06); }
body.oscuro .chips span.acc { color: #141220; }

/* ---------- consola ---------- */
.consola {
    position: relative;
    max-width: 860px;
    margin-top: 2rem;
    background: #12100d;
    border-radius: 4px;
    box-shadow: 0 22px 40px rgba(31, 24, 15, 0.3);
    transform: rotate(0.5deg);
    overflow: hidden;
}

.consola-sup {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.consola-sup i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4a443b;
    display: block;
}

.consola-sup span {
    margin-left: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: #9a917f;
    letter-spacing: 0.05em;
}

.consola-salida {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.72rem, 1.7vw, 0.82rem);
    line-height: 1.7;
    color: #cfc6b4;
    padding: 0.9rem 1.1rem 0.3rem;
    max-height: 16rem;
    overflow-y: auto;
    white-space: pre-wrap;
}

.consola-salida .ok { color: #7fd6c1; }
.consola-salida .acl { color: #8fd6cb; }
.consola-salida .dim { color: #7d7466; }

.consola-linea {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.72rem, 1.7vw, 0.82rem);
}

.consola-linea label { color: #7fd6c1; }

.consola-linea input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e9e2d3;
    font-family: inherit;
    font-size: inherit;
    caret-color: #7fd6c1;
}

.consola-nota {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    color: var(--gris);
    margin-top: 0.8rem;
    transform: rotate(-1deg);
}

/* ---------- pie ---------- */
.pie-est {
    border-top: 2px solid var(--tinta);
    margin-top: clamp(2rem, 6vw, 4rem);
    padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 4vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
}

.pie-est a { color: var(--acento-fuerte); text-decoration: none; }
.pie-est a:hover { text-decoration: underline; }

/* ---------- arte de las tarjetas (copiado del perfil) ---------- */

.fw{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#242019,#100d0a 78%);display:flex;align-items:center;justify-content:center;padding:9px}
.fw-win{width:100%;height:100%;background:#efe7d6;border-radius:3px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.55);display:flex;flex-direction:column}
.fw-bar{display:flex;align-items:center;gap:4px;padding:5px 7px;background:#1d1a16}
.fw-bar i{width:5px;height:5px;border-radius:50%;background:#6b6258;display:block}
.fw-bar b{margin-left:5px;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:6.6px;color:#cfc6b4;letter-spacing:.04em}
.fw-page{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 14px 0;background:#f2ebdd;background-image:radial-gradient(circle at 15% 10%,rgba(216,202,176,.6),transparent 45%),radial-gradient(circle at 85% 90%,rgba(214,198,170,.5),transparent 45%)}
.fw-top{display:flex;align-items:center;justify-content:space-between;font-family:'Inter',sans-serif;font-size:5.2px;letter-spacing:.16em;text-transform:uppercase;color:#6b6258}
.fw-top em{font-style:normal;width:15px;height:15px;border-radius:50%;border:1.6px solid #17130f;display:block}
.fw-title{font-family:'Archivo Black',sans-serif;font-size:23px;line-height:.92;letter-spacing:-.04em;color:#17130f;margin-top:10px}
.fw-title span{color:#0f9c8c}
.fw-hand{font-family:'Caveat',cursive;font-size:11px;color:#0b6f64;margin-top:3px;transform:rotate(-1.2deg)}
.fw-photos{display:flex;gap:8px;margin-top:12px}
.fw-ph{position:relative;flex:1;height:56px;background:#fdfaf3;padding:3.5px;box-shadow:2px 3px 6px rgba(31,24,15,.3)}
.fw-ph:nth-child(1){transform:rotate(-6deg)}
.fw-ph:nth-child(2){transform:rotate(4deg)}
.fw-ph i{display:block;width:100%;height:100%;background:linear-gradient(160deg,#3d3830,#151210)}
.fw-ph.g i{background:linear-gradient(160deg,#0f9c8c,#0b4c46)}
.fw-list{display:grid;gap:0;margin-top:10px}
.fw-list div{display:flex;gap:6px;align-items:baseline;padding:3.5px 0;border-top:1px dashed rgba(23,19,15,.28);font-family:'Inter',sans-serif;font-size:5.6px;color:#3b332a;letter-spacing:.04em}
.fw-list b{font-family:'Archivo Black',sans-serif;font-size:5.4px;letter-spacing:.1em;color:#17130f}
.fw-btn{align-self:flex-start;margin-top:auto;margin-bottom:12px;display:inline-block;font-family:'Archivo Black',sans-serif;font-size:5.6px;letter-spacing:.14em;text-transform:uppercase;color:#f2ebdd;background:#17130f;padding:4px 9px;box-shadow:2px 2px 0 #0f9c8c}
.fw-foot{padding:4px 14px;background:#17130f;color:#d9d1c1;font-family:'JetBrains Mono',monospace;font-size:4.8px;letter-spacing:.14em;text-transform:uppercase}

.cyd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 48% 34%,rgba(255,230,196,.2),transparent 62%),linear-gradient(160deg,#332d26,#16130f 76%)}
.cyd-case{position:relative;width:332px;height:256px;padding:12px;border-radius:12px;background:linear-gradient(150deg,#4a443b,#221e19 52%,#12100d);box-shadow:0 22px 36px rgba(0,0,0,.62),inset 0 2px 0 rgba(255,255,255,.26),inset 2px 0 0 rgba(255,255,255,.1),inset 0 -3px 8px rgba(0,0,0,.65);transform:rotate(-3deg) perspective(1000px) rotateY(-8deg) rotateX(2deg)}
.cyd-case::before{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2.5px)}
.scr{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c8477,#3a352e);box-shadow:inset 0 0 2px rgba(0,0,0,.9),0 0 1px rgba(255,255,255,.2)}
.scr.tl{top:5px;left:5px}.scr.tr{top:5px;right:5px}.scr.bl{bottom:5px;left:5px}.scr.br{bottom:5px;right:5px}
.cyd-usb{position:absolute;right:-15px;top:104px;width:17px;height:28px;border-radius:2px;background:linear-gradient(180deg,#a49b8d,#5c554a 60%,#3a352e);box-shadow:0 3px 8px rgba(0,0,0,.55)}
.cyd-screen{position:relative;width:308px;height:232px;border-radius:6px;overflow:hidden;background:#0a0908;box-shadow:inset 0 0 0 2px #060505,0 0 0 1px rgba(255,255,255,.06)}
.u{position:absolute;inset:5px;display:flex;flex-direction:column;gap:4px}
.u-top{height:20px;display:flex;align-items:center;gap:4px;padding:0 5px;border-radius:10px;background:rgba(255,255,255,.62);border:1.2px solid rgba(226,160,186,.85)}
.u-lv{font-family:'Inter',sans-serif;font-size:8.4px;font-weight:600;color:#3a2b3a;letter-spacing:-.01em}
.u-stats{display:flex;gap:2px;margin-left:2px}
.u-stats i{display:block;width:22px;height:4px;border-radius:2px;background:rgba(58,43,58,.14);position:relative;overflow:hidden}
.u-stats i::after{content:'';position:absolute;inset:0;width:var(--w);background:var(--c);border-radius:2px}
.u-coin{margin-left:auto;display:flex;align-items:center;gap:2px;font-family:'Inter',sans-serif;font-size:8px;font-weight:700;color:#c2568a}
.u-coin s{display:block;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0d97a,#c9a227)}
.u-gear{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6cadb,#d98fb0);box-shadow:inset 0 0 0 1px rgba(58,43,58,.25)}
.u-scene{position:relative;flex:1;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#8ad6f7 0%,#66c2f0 46%,#4aa2e2 100%)}
.u-scene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,#c2c489,#a9ad6e)}
.u-tl{position:absolute;top:6px;left:6px;width:34px;height:12px;border-radius:6px;background:rgba(255,255,255,.7)}
.u-tr{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:34px;height:12px;border-radius:6px;background:rgba(255,255,255,.7)}
.u-tr i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0d97a,#c9a227)}
.u-pet{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:104px;height:118px;z-index:3}
.u-pet .ear{position:absolute;top:22px;width:30px;height:48px;background:#2b2328;border-radius:15px}
.u-pet .ear.l{left:-6px;transform:rotate(17deg)}
.u-pet .ear.r{right:-6px;transform:rotate(-17deg)}
.u-pet .tuft{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:15px;height:10px;background:#2b2328;border-radius:7px 7px 2px 2px}
.u-pet .head{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:80px;height:66px;background:#fffdf8;border-radius:50% 50% 47% 47%;box-shadow:0 2px 4px rgba(30,20,30,.14)}
.u-pet .eye{position:absolute;top:42%;width:6px;height:8px;border-radius:3px;background:#2b2328}
.u-pet .eye.l{left:22%}.u-pet .eye.r{right:22%}
.u-pet .nose{position:absolute;top:56%;left:50%;transform:translateX(-50%);width:6px;height:4px;border-radius:2px;background:#2b2328}
.u-pet .blush{position:absolute;bottom:14%;width:15px;height:9px;border-radius:50%;background:#f0aac0;opacity:.9}
.u-pet .blush.l{left:6%}.u-pet .blush.r{right:6%}
.u-pet .body{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:62px;height:44px;background:linear-gradient(180deg,#c8808f,#b96d80);border-radius:14px 14px 9px 9px;z-index:-1}
.u-pet .cushion{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:92px;height:18px;background:radial-gradient(ellipse at 50% 30%,#e2d6c2,#c9bda6);border-radius:50%;z-index:-2;opacity:.9}
.u-btns{height:42px;display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.u-btns span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:9px;border:1.2px solid var(--br);background:var(--bga);font-family:'Inter',sans-serif;font-size:6.4px;font-weight:600;color:#3a2b3a;letter-spacing:-.02em}
.u-btns span i{width:6px;height:6px;border-radius:50%;background:var(--d);display:block}
.u-btns span:nth-child(4) i{border-radius:1.5px}
.u-btns span:nth-child(1){--bga:rgba(240,190,212,.6);--br:rgba(214,130,170,.9);--d:#c2568a}
.u-btns span:nth-child(2){--bga:rgba(150,214,226,.6);--br:rgba(90,180,200,.9);--d:#3f9fb4}
.u-btns span:nth-child(3){--bga:rgba(240,226,140,.65);--br:rgba(200,180,70,.9);--d:#c9a227}
.u-btns span:nth-child(4){--bga:rgba(238,238,232,.75);--br:rgba(170,170,160,.9);--d:#f7f5ee}
.u-btns span:nth-child(5){--bga:rgba(244,200,140,.65);--br:rgba(214,150,70,.9);--d:#c98030}
.u-btns span:nth-child(6){--bga:rgba(240,190,212,.6);--br:rgba(214,130,170,.9);--d:#c2568a}
.u-lcd{position:absolute;inset:0;pointer-events:none;opacity:.42;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 1px,transparent 1px 2px)}
.u-glass{position:absolute;inset:0;pointer-events:none;border-radius:6px;background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.09))}

.fj{position:absolute;inset:0;background:linear-gradient(180deg,#080b14 0%,#141a2e 42%,#2a2138 72%,#120f18 100%);overflow:hidden}
.fj-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 18%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 84% 26%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 38% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 74% 40%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 12% 44%,rgba(255,255,255,.4),transparent)}
.fj-moon{position:absolute;top:32px;right:44px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8e6ff,#7c8fc4 70%);box-shadow:0 0 34px rgba(140,170,255,.45)}
.fj-mont{position:absolute;bottom:0;left:0;width:100%;height:120px;background:#0b0912;clip-path:polygon(0 100%,0 62%,12% 40%,24% 58%,36% 26%,48% 52%,60% 34%,72% 56%,84% 38%,100% 58%,100% 100%)}
.fj-mont.f{height:74px;background:#171223;clip-path:polygon(0 100%,0 70%,16% 48%,30% 66%,44% 44%,58% 68%,74% 50%,88% 70%,100% 56%,100% 100%)}
.fj-hero{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);filter:drop-shadow(0 0 12px rgba(15,156,140,.55))}
.fj-orb{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#b9fff5,#0f9c8c 65%);box-shadow:0 0 24px rgba(15,156,140,.9)}
.fj-hud{position:absolute;top:11px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:6px;color:#cfd8e8;letter-spacing:.12em;text-transform:uppercase}
.fj-hp{width:88px;height:5px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;margin-top:3px}
.fj-hp i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#0f9c8c,#8fe0d4)}
.fj-tag{position:absolute;bottom:10px;left:12px;font-family:'Archivo Black',sans-serif;font-size:8px;letter-spacing:.16em;color:#e8e2d5;text-transform:uppercase;opacity:.9}
.fj-jam{position:absolute;bottom:9px;right:11px;border:1px solid rgba(232,226,213,.5);color:#e8e2d5;font-family:'JetBrains Mono',monospace;font-size:5.6px;letter-spacing:.1em;padding:2px 5px;text-transform:uppercase}

.ft{position:absolute;inset:0;background:#12100d;padding:12px;display:flex;flex-direction:column}
.ft-top{display:flex;gap:4px;align-items:center;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.09)}
.ft-top i{width:6px;height:6px;border-radius:50%;background:#4a443b;display:block}
.ft-top b{margin-left:4px;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:6.4px;color:#8d8577;letter-spacing:.05em}
.ft-body{flex:1;font-family:'JetBrains Mono',monospace;font-size:9.1px;line-height:1.78;color:#cfc6b4;padding-top:16px;white-space:pre}
.ft-body .c{color:#6f6656}
.ft-body .k{color:#7fc9be}
.ft-body .s{color:#dfa48f}
.ft-body .n{color:#c9a227}
.ft-body .ok{color:#5fd0b8}
.ft-body .cur{display:inline-block;width:5px;height:9px;background:#cfc6b4;vertical-align:-1px;animation:parpadeo 1s steps(1) infinite}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .portada-est {
        grid-template-columns: 1fr;
        padding-top: clamp(6rem, 22vw, 8rem);
    }

    .ventana-codigo {
        transform: rotate(0.8deg);
        margin-top: 1.8rem;
    }

    .codigo { min-height: 13em; }

    .fila {
        grid-template-columns: 1fr;
        gap: 0.15rem;
        border-bottom: 1px dashed rgba(23, 19, 15, 0.12);
        padding-bottom: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proyecto,
    .ventana-codigo,
    .hoja-ficha,
    .consola {
        transition: none;
    }

    .rol .cursor,
    .codigo .cursor {
        animation: none;
    }
}

/* utilidades sueltas */
.mono { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; letter-spacing: 0.01em; }
body.oscuro .codigo, body.oscuro .consola { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.5); }
body.oscuro .ventana-codigo, body.oscuro .consola { background: #0c0a14; }
body.oscuro .proyecto::before, body.oscuro .hoja-ficha::before { background: var(--celo); }

@media (max-width: 760px) {
    .rejilla-proyectos { grid-template-columns: 1fr; max-width: 460px; }
}

/* =========================================================
   CAOS · cuando alguien intenta borrar el sistema
   Dura unos 10 segundos y luego se restaura solo.
   ========================================================= */

.caos {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.caos.activa {
    opacity: 1;
}

.cristal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cristal path {
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}

.cristal polygon {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1;
}

.fogonazo {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95), rgba(216, 74, 47, 0.55) 35%, rgba(12, 10, 8, 0.95) 78%);
}

.scanlines {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

body.muerto {
    background-color: #0b0912 !important;
    background-image: none !important;
}

body.muerto .grano {
    mix-blend-mode: screen;
    opacity: 0.08;
}

.caos-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.4rem, 5vw, 3.2rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #f2ebdd;
    text-shadow: 0 0 18px rgba(216, 74, 47, 0.55);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.25s linear, transform 0.35s ease;
}

.caos-texto span:nth-child(2) {
    color: #d84a2f;
}

.caos-texto.visible {
    opacity: 1;
    transform: scale(1);
    animation: glitch 0.28s steps(2) infinite;
}

@keyframes glitch {
    0%   { text-shadow: 0 0 18px rgba(216, 74, 47, 0.55); transform: translate(0, 0); }
    40%  { text-shadow: 4px 0 0 rgba(15, 156, 140, 0.75), -4px 0 0 rgba(216, 74, 47, 0.75); transform: translate(-2px, 0); }
    70%  { text-shadow: -4px 0 0 rgba(15, 156, 140, 0.75), 4px 0 0 rgba(216, 74, 47, 0.75); transform: translate(2px, 0); }
    100% { text-shadow: 0 0 18px rgba(216, 74, 47, 0.55); transform: translate(0, 0); }
}

.caos.activa .scanlines {
    opacity: 1;
}

/* temblor */
@keyframes temblor {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-3px, 2px) rotate(-0.25deg); }
    40%  { transform: translate(4px, -3px) rotate(0.3deg); }
    60%  { transform: translate(-2px, -2px) rotate(-0.2deg); }
    80%  { transform: translate(3px, 3px) rotate(0.22deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

body.temblando .cabecera,
body.temblando main,
body.temblando .marquesina-est,
body.temblando .pie-est {
    animation: temblor 0.16s linear infinite;
}

body.temblando main { animation-duration: 0.2s; }
body.temblando .pie-est { animation-duration: 0.24s; }

/* el papel se pone feo mientras dura */
/* ojo: el filtro va en las piezas, nunca en body.
   Un filter en body convierte position:fixed en relativo al body y las capas
   del caos se estiran toda la altura del documento (el cartel se va fuera de pantalla). */
body.temblando main,
body.temblando .cabecera,
body.temblando .pie-est,
body.temblando .marquesina-est {
    filter: saturate(0.85) contrast(1.08) brightness(0.94);
    transition: filter 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.temblando .cabecera,
    body.temblando main,
    body.temblando .marquesina-est,
    body.temblando .pie-est {
        animation: none;
    }
}