/* Estilos para el Portfolio Scroll Mockup */

.portfolio-mockup {
    width: 100%;
    height: 500px; /* Altura del marco simulado */
    border-radius: 0 0 12px 12px;
    background-color: #f6f5f1;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.05);
    
    /* Mejoras para alta resolución */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
}

/* Cabecera del mockup (simula la barra del navegador) */
.mockup-header {
    width: 100%;
    height: 36px;
    background-color: #f0eded;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mockup-dot.red { background-color: #ff5f56; }
.mockup-dot.yellow { background-color: #ffbd2e; }
.mockup-dot.green { background-color: #27c93f; }

/* Contenedor general del mockup con sombra suave */
.mockup-container {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mockup-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.14);
}

/* Botones de control de dirección discretos en la cabecera */
.mockup-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mockup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    color: #434843;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}

.mockup-btn:hover:not(:disabled) {
    background-color: rgba(6, 27, 14, 0.12);
    color: #061b0e;
    transform: scale(1.08);
}

.mockup-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.mockup-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.mockup-btn .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}